Reduce amount of console warnings

src/layouts/Sidebar.tsx

@@ -610,9 +610,7 @@ const Sidebar = () => {
       key="sidebar"
       forwardedAs="nav"
       height="100%"
-      css={`
-        overflow: scroll;
-      `}
+      overflow="scroll"
       width={{ default: '240px', s: '65px' }}
       backgroundColor={getValueForSidebar('backgroundColor')}
       color={getValueForSidebar('color')}

src/pages/Footer.tsx

@@ -71,6 +71,7 @@ type FooterLinkProps = {
 const FooterLink = ({ footerVariant, ...props }: FooterLinkProps) => (
   <Link
     {...props}
+    as="span"
     css={`
       text-decoration: underline;
       color: ${footerVariant === FooterVariants.LOGIN

src/ui/Alert.tsx

@@ -18,8 +18,8 @@ const IconWarning = () => {
       width={24}
       viewBox="0 0 24 24"
     >
-      <g clip-path="url(#a)">
-        <g clip-path="url(#b)">
+      <g clipPath="url(#a)">
+        <g clipPath="url(#b)">
           <path
             d="M1 21h22L12 2 1 21Zm12-3h-2v-2h2v2Zm0-4h-2v-4h2v4Z"
             fill="#E69336"
@@ -46,7 +46,7 @@ const IconSuccess = () => {
       width={24}
       viewBox="0 0 24 24"
     >
-      <g clip-path="url(#a)">
+      <g clipPath="url(#a)">
         <path
           d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z"
           fill="#6BCD69"
@@ -85,7 +85,7 @@ const IconError = () => {
       width={24}
       viewBox="0 0 24 24"
     >
-      <g clip-path="url(#a)">
+      <g clipPath="url(#a)">
         <path
           d="M11 15h2v2h-2v-2Zm0-8h2v6h-2V7Zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2ZM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8Z"
           fill="#DD5242"

src/ui/Box.tsx

@@ -16,6 +16,7 @@ import { ReactDatePickerProps } from 'react-datepicker';
 import type {
   FlattenInterpolation,
   FlattenSimpleInterpolation,
+  StyledConfig,
   ThemeProps,
 } from 'styled-components';
 import styled, { css } from 'styled-components';
@@ -201,6 +202,7 @@ type UIProps = {
   minHeight: UIProp<string | number>;
   minWidth: UIProp<string | number>;
   objectFit: UIProp<string>;
+  overflow: UIProp<string>;
   opacity: UIProp<number>;
   padding: UIProp<number>;
   paddingBottom: UIProp<number>;
@@ -442,6 +444,7 @@ const boxProps = css`
   ${parseProperty('zIndex')};
 
   ${parseProperty('display')};
+  ${parseProperty('overflow')};
   ${parseProperty('opacity')};
   ${parseProperty('flex')};
   ${parseProperty('flexShrink')};
@@ -467,6 +470,7 @@ const boxPropTypes = [
   'display',
   'flex',
   'flexShrink',
+  'flexWrap',
   'fontSize',
   'fontWeight',
   'fontStyle',
@@ -489,6 +493,7 @@ const boxPropTypes = [
   'objectFit',
   'onClick',
   'opacity',
+  'overflow',
   'padding',
   'paddingBottom',
   'paddingLeft',
@@ -502,7 +507,9 @@ const boxPropTypes = [
   'textAlign',
   'textDecoration',
   'top',
+  'stackOn',
   'width',
+  'size',
   'zIndex',
   'dangerouslySetInnerHTML',
 ] as const;
@@ -511,9 +518,11 @@ const notAllowedPropsSet = new Set(
   difference(boxPropTypes, ['as', 'id', 'onClick', 'dangerouslySetInnerHTML']),
 );
 
-const StyledBox = styled.div.withConfig({
+export const withoutDisallowedPropsConfig: StyledConfig = {
   shouldForwardProp: (prop) => !notAllowedPropsSet.has(prop as any),
-})`
+};
+
+const StyledBox = styled.div.withConfig(withoutDisallowedPropsConfig)`
   ${boxProps}
 `;
 

src/ui/Inline.tsx

@@ -4,7 +4,13 @@
 
 import { useMatchBreakpoint } from '@/hooks/useMatchBreakpoint';
 
-import type { BoxProps, UIProp, UnknownProps } from './Box';
+import {
+  BoxProps,
+  notAllowedPropsSet,
+  UIProp,
+  UnknownProps,
+  withoutDisallowedPropsConfig,
+} from './Box';
 import {
   Box,
   boxProps,
@@ -44,7 +50,7 @@
   ${parseStackOnProperty()};
 `;
 
-const StyledBox = styled(Box)`
+const StyledBox = styled(Box).withConfig(withoutDisallowedPropsConfig)`
   ${inlineProps};
   ${boxProps};
 `;

src/ui/Notification.tsx

@@ -50,7 +50,6 @@ const Notification = ({ icon, header, body }: Props) => {
         paddingBottom={4}
         paddingRight={5}
         paddingLeft={4}
-        as={BootstrapToast.Body}
         alignItems="center"
         color={getValue('textColor.dark')}
       >

src/ui/RadioButtonWithLabel.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode, Ref } from 'react';
 
 import { BoxProps } from './Box';
 import { getInlineProps, Inline } from './Inline';
@@ -14,44 +14,50 @@ type Props = RadioButtonProps &
     label?: ReactNode;
   };
 
-const RadioButtonWithLabel = ({
-  id,
-  name,
-  disabled,
-  onChange,
-  label,
-  info,
-  value,
-  className,
-  checked,
-  type,
-  ...props
-}: Props) => {
-  return (
-    <Inline
-      className={className}
-      alignItems={info ? 'flex-start' : 'center'}
-      spacing={3}
-      as="li"
-      {...getInlineProps(props)}
-    >
-      <RadioButton
-        id={id}
-        type={type}
-        onChange={onChange}
-        disabled={disabled}
-        value={value}
-        name={name}
-        checked={checked}
-      />
-      <Stack>
-        <Label cursor="pointer" htmlFor={id}>
-          {label}
-        </Label>
-        {!!info && <Text variant={TextVariants.MUTED}>{info}</Text>}
-      </Stack>
-    </Inline>
-  );
-};
+const RadioButtonWithLabel = React.forwardRef(
+  (
+    {
+      id,
+      name,
+      disabled,
+      onChange,
+      label,
+      info,
+      value,
+      className,
+      checked,
+      type,
+      ...props
+    }: Props,
+    ref: Ref<HTMLElement>,
+  ) => {
+    return (
+      <Inline
+        className={className}
+        alignItems={info ? 'flex-start' : 'center'}
+        spacing={3}
+        as="li"
+        ref={ref}
+        {...getInlineProps(props)}
+      >
+        <RadioButton
+          id={id}
+          type={type}
+          onChange={onChange}
+          disabled={disabled}
+          value={value}
+          name={name}
+          checked={checked}
+        />
+        <Stack>
+          <Label cursor="pointer" htmlFor={id}>
+            {label}
+          </Label>
+          {!!info && <Text variant={TextVariants.MUTED}>{info}</Text>}
+        </Stack>
+      </Inline>
+    );
+  },
+);
 
 export { RadioButtonWithLabel };

src/ui/Stack.tsx

@@ -2,7 +2,13 @@ import { pickBy } from 'lodash';
 import { Children, cloneElement, forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { BoxProps, UIProp, UnknownProps } from './Box';
+import {
+  BoxProps,
+  getBoxProps,
+  UIProp,
+  UnknownProps,
+  withoutDisallowedPropsConfig,
+} from './Box';
 import {
   Box,
   boxProps,
@@ -27,7 +33,7 @@ const stackProps = css`
   ${parseProperty('justifyContent')};
 `;
 
-const StyledBox = styled(Box)`
+const StyledBox = styled(Box).withConfig(withoutDisallowedPropsConfig)`
   ${stackProps};
   ${boxProps};
 `;
@@ -50,7 +56,12 @@ const Stack = forwardRef<HTMLElement, Props>(
     });
 
     return (
-      <StyledBox className={className} as={as} ref={ref} {...props}>
+      <StyledBox
+        className={className}
+        as={as}
+        ref={ref}
+        {...getBoxProps(props)}
+      >
         {clonedChildren}
       </StyledBox>
     );

src/ui/Typeahead.tsx

@@ -65,7 +65,7 @@ const TypeaheadInner = <T extends TypeaheadModel>(
     hideNewInputText,
     newSelectionPrefix,
     positionFixed,
-    isLoading,
+    isLoading = false,
     ...props
   }: Props<T>,
   ref: ForwardedRef<BootstrapTypeahead<T>>,