baseui 10.9.2 → 10.11.1

package/toast/toaster.js.flow

@@ -9,8 +9,8 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import {KIND, PLACEMENT} from './constants.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
+import { KIND, PLACEMENT } from './constants.js';
 import {
   Root as StyledRoot,
   Body as StyledBody,
@@ -29,7 +29,7 @@ let toasterRef: ?React.ElementRef<typeof ToasterContainer> = null;
 
 export class ToasterContainer extends React.Component<
   $Shape<ToasterPropsT>,
-  ToasterContainerStateT,
+  ToasterContainerStateT
 > {
   static defaultProps: ToasterPropsT = {
     autoFocus: false,
@@ -58,30 +58,30 @@ export class ToasterContainer extends React.Component<
   toastId: number = 0;
 
   componentDidMount() {
-    this.setState({isMounted: true});
+    this.setState({ isMounted: true });
   }
 
-  getToastProps = (props: ToastPropsT): ToastPropsT & {key: React.Key} => {
-    const {autoFocus, autoHideDuration, closeable} = this.props;
+  getToastProps = (props: ToastPropsT): ToastPropsT & { key: React.Key } => {
+    const { autoFocus, autoHideDuration, closeable } = this.props;
     const key: React.Key = props.key || `toast-${this.toastId++}`;
-    return {autoFocus, autoHideDuration, closeable, ...props, key};
+    return { autoFocus, autoHideDuration, closeable, ...props, key };
   };
 
   show = (props: ToastPropsT = {}): React.Key => {
-    if (this.state.toasts.map(t => t.key).includes(props.key)) {
+    if (this.state.toasts.map((t) => t.key).includes(props.key)) {
       this.update(props.key, props);
       return props.key;
     }
     const toastProps = this.getToastProps(props);
-    this.setState(({toasts}) => {
-      return {toasts: [...toasts, toastProps]};
+    this.setState(({ toasts }) => {
+      return { toasts: [...toasts, toastProps] };
     });
     return toastProps.key;
   };
 
   update = (key: React.Key, props: ToastPropsT): void => {
-    this.setState(({toasts}) => {
-      const updatedToasts = toasts.map(toast => {
+    this.setState(({ toasts }) => {
+      const updatedToasts = toasts.map((toast) => {
         if (toast.key === key) {
           const updatedToastProps = {
             ...toast,
@@ -91,7 +91,7 @@ export class ToasterContainer extends React.Component<
             }),
             key,
             ...(this.props.resetAutoHideTimerOnUpdate
-              ? {__updated: (parseInt(toast.__updated) || 0) + 1}
+              ? { __updated: (parseInt(toast.__updated) || 0) + 1 }
               : {}),
           };
           return updatedToastProps;
@@ -111,7 +111,7 @@ export class ToasterContainer extends React.Component<
   };
 
   clearAll = () => {
-    Object.keys(this.dismissHandlers).forEach(key => {
+    Object.keys(this.dismissHandlers).forEach((key) => {
       this.dismissHandlers[key]();
     });
   };
@@ -122,8 +122,8 @@ export class ToasterContainer extends React.Component<
 
   internalOnClose = (key: React.Key) => {
     delete this.dismissHandlers[key];
-    this.setState(({toasts}) => ({
-      toasts: toasts.filter(t => {
+    this.setState(({ toasts }) => ({
+      toasts: toasts.filter((t) => {
         return !(t.key === key);
       }),
     }));
@@ -136,8 +136,8 @@ export class ToasterContainer extends React.Component<
     };
   };
 
-  renderToast = (toastProps: ToastPropsT & {key: React.Key}): React.Node => {
-    const {onClose, children, key, ...restProps} = toastProps;
+  renderToast = (toastProps: ToastPropsT & { key: React.Key }): React.Node => {
+    const { onClose, children, key, ...restProps } = toastProps;
 
     const {
       ToastBody: BodyOverride,
@@ -150,17 +150,13 @@ export class ToasterContainer extends React.Component<
         CloseIcon: StyledCloseIcon,
         InnerContainer: StyledInnerContainer,
       },
-      // $FlowFixMe
       {
-        Body: BodyOverride,
-        CloseIcon: CloseIconOverride,
-        InnerContainer: InnerContainerOverride,
-      },
-    );
-    const toastOverrides = mergeOverrides(
-      globalToastOverrides,
-      toastProps.overrides,
+        Body: BodyOverride || {},
+        CloseIcon: CloseIconOverride || {},
+        InnerContainer: InnerContainerOverride || {},
+      }
     );
+    const toastOverrides = mergeOverrides(globalToastOverrides, toastProps.overrides);
 
     return (
       <Toast
@@ -169,7 +165,7 @@ export class ToasterContainer extends React.Component<
         key={key}
         onClose={this.getOnCloseHandler(key, onClose)}
       >
-        {({dismiss}) => {
+        {({ dismiss }) => {
           this.dismissHandlers[key] = dismiss;
           // $FlowFixMe
           return children;
@@ -179,7 +175,7 @@ export class ToasterContainer extends React.Component<
   };
 
   getSharedProps = () => {
-    const {placement} = this.props;
+    const { placement } = this.props;
     return {
       $placement: placement,
     };
@@ -188,7 +184,7 @@ export class ToasterContainer extends React.Component<
   render() {
     const sharedProps = this.getSharedProps();
 
-    const {Root: RootOverride} = this.props.overrides;
+    const { Root: RootOverride } = this.props.overrides;
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
 
     const toastsLength = this.state.toasts.length;
@@ -210,12 +206,8 @@ export class ToasterContainer extends React.Component<
     if (this.state.isMounted) {
       return (
         <>
-          {this.props.usePortal && __BROWSER__
-            ? ReactDOM.createPortal(
-                root,
-                // $FlowFixMe
-                document.body,
-              )
+          {this.props.usePortal && __BROWSER__ && document.body
+            ? ReactDOM.createPortal(root, document.body)
             : root}
           {this.props.children}
         </>
@@ -227,49 +219,34 @@ export class ToasterContainer extends React.Component<
 }
 
 const toaster = {
-  getRef: function(): ?React.ElementRef<typeof ToasterContainer> {
+  getRef: function (): ?React.ElementRef<typeof ToasterContainer> {
     return toasterRef;
   },
-  show: function(
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): ?React.Key {
+  show: function (children: React.Node, props: ToastPropsShapeT = {}): ?React.Key {
     // toasts can not be added until Toaster is mounted
     // no SSR for the `toaster.show()`
     const toasterInstance = this.getRef();
     if (toasterInstance) {
-      return toasterInstance.show({...props, children});
+      return toasterInstance.show({ ...props, children });
     } else if (__DEV__) {
       throw new Error(
-        'Please make sure to add the ToasterContainer to your application, and it is mounted, before adding toasts! You can find more information here: https://baseweb.design/components/toast',
+        'Please make sure to add the ToasterContainer to your application, and it is mounted, before adding toasts! You can find more information here: https://baseweb.design/components/toast'
       );
     }
   },
-  info: function(
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.info});
+  info: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.info });
   },
-  positive: function(
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.positive});
+  positive: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.positive });
   },
-  warning: function(
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.warning});
+  warning: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.warning });
   },
-  negative: function(
-    children: React.Node,
-    props: ToastPropsShapeT = {},
-  ): React.Key {
-    return this.show(children, {...props, kind: KIND.negative});
+  negative: function (children: React.Node, props: ToastPropsShapeT = {}): React.Key {
+    return this.show(children, { ...props, kind: KIND.negative });
   },
-  update: function(key: React.Key, props: $Shape<ToastPropsT>): void {
+  update: function (key: React.Key, props: $Shape<ToastPropsT>): void {
     const toasterInstance = this.getRef();
     if (toasterInstance) {
       toasterInstance.update(key, props);
@@ -278,7 +255,7 @@ const toaster = {
       console.error('No ToasterContainer is mounted yet.');
     }
   },
-  clear: function(key?: ?React.Key): void {
+  clear: function (key?: ?React.Key): void {
     const toasterInstance = this.getRef();
     if (toasterInstance) {
       toasterInstance.clear(key);

package/toast/types.js.flow

@@ -5,11 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-/* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {KIND, PLACEMENT, TYPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { KIND, PLACEMENT, TYPE } from './constants.js';
 
 export type KindTypeT = $Values<typeof KIND>;
 export type NotificationTypeT = $Values<typeof TYPE>;
@@ -34,7 +33,7 @@ export type OverridesT = {
   InnerContainer?: OverrideT,
 };
 
-export type ComponentRenderPropT = (props: {dismiss: () => void}) => React.Node;
+export type ComponentRenderPropT = (props: { dismiss: () => void }) => React.Node;
 
 export type ChildT = React.Node;
 
@@ -83,7 +82,7 @@ export type ToastPropsT = {
 };
 
 export type ToastPropsShapeT = $Shape<
-  $Diff<ToastPropsT, {children: ChildrenT | ComponentRenderPropT}>,
+  $Diff<ToastPropsT, { children: ChildrenT | ComponentRenderPropT }>
 >;
 
 export type ToasterOverridesT = {

package/tokens/colors.js.flow

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import type {ColorTokensT} from './types.js';
+import type { ColorTokensT } from './types.js';
 
 const colors: ColorTokensT = {
   white: '#FFFFFF',

package/tokens/index.js.flow

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as colors} from './colors.js';
+export { default as colors } from './colors.js';
 
 export type * from './types.js';
 

package/tooltip/default-props.js.flow

@@ -5,8 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE} from './constants.js';
-import type {BaseTooltipPropsT} from './types.js';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants.js';
+import type { BaseTooltipPropsT } from './types.js';
 
 const baseDefaultProps: $Shape<BaseTooltipPropsT> = {
   accessibilityType: ACCESSIBILITY_TYPE.tooltip,

package/tooltip/index.js.flow

@@ -5,16 +5,11 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as StatefulTooltip} from './stateful-tooltip.js';
-export {default as StatefulContainer} from './stateful-tooltip-container.js';
-export {default as Tooltip} from './tooltip.js';
+export { default as StatefulTooltip } from './stateful-tooltip.js';
+export { default as StatefulContainer } from './stateful-tooltip-container.js';
+export { default as Tooltip } from './tooltip.js';
 // Constants
-export {
-  ACCESSIBILITY_TYPE,
-  PLACEMENT,
-  TRIGGER_TYPE,
-  STATE_CHANGE_TYPE,
-} from './constants.js';
+export { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export {
   Arrow as StyledArrow,

package/tooltip/stateful-tooltip-container.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {StatefulContainer as StatefulPopoverContainer} from '../popover/index.js';
+import { StatefulContainer as StatefulPopoverContainer } from '../popover/index.js';
 import baseDefaultProps from './default-props.js';
-import type {StatefulTooltipContainerPropsT} from './types.js';
+import type { StatefulTooltipContainerPropsT } from './types.js';
 
 class StatefulContainer extends React.Component<StatefulTooltipContainerPropsT> {
   static defaultProps: $Shape<StatefulTooltipContainerPropsT> = {

package/tooltip/stateful-tooltip.js.flow

@@ -8,13 +8,13 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from './stateful-tooltip-container.js';
 import Tooltip from './tooltip.js';
-import type {StatefulTooltipPropsT} from './types.js';
+import type { StatefulTooltipPropsT } from './types.js';
 
 function StatefulTooltip(props: StatefulTooltipPropsT) {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
   return (
     <StatefulContainer {...restProps}>
-      {tooltipProps => <Tooltip {...tooltipProps}>{children}</Tooltip>}
+      {(tooltipProps) => <Tooltip {...tooltipProps}>{children}</Tooltip>}
     </StatefulContainer>
   );
 }

package/tooltip/styled-components.js.flow

@@ -5,14 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import {
-  getBodyStyles,
-  getArrowStyles,
-  getInnerStyles,
-} from '../popover/styled-components.js';
-import {getEndPosition} from '../popover/utils.js';
-import type {SharedStylePropsArgT} from '../popover/types.js';
+import { styled } from '../styles/index.js';
+import { getBodyStyles, getArrowStyles, getInnerStyles } from '../popover/styled-components.js';
+import { getEndPosition } from '../popover/utils.js';
+import type { SharedStylePropsArgT } from '../popover/types.js';
 
 /**
  * We want to reuse the default Popover styles and add our overrides
@@ -25,7 +21,7 @@ import type {SharedStylePropsArgT} from '../popover/types.js';
  * We could create our own withStyleDeep that also takes the $style
  * prop into account
  */
-export const Body = styled<SharedStylePropsArgT>('div', props => ({
+export const Body = styled<SharedStylePropsArgT>('div', (props) => ({
   ...getBodyStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
   borderTopLeftRadius: props.$theme.borders.radius300,
@@ -39,7 +35,7 @@ export const Body = styled<SharedStylePropsArgT>('div', props => ({
   transform: getEndPosition(props.$popoverOffset),
 }));
 
-export const Inner = styled<SharedStylePropsArgT>('div', props => ({
+export const Inner = styled<SharedStylePropsArgT>('div', (props) => ({
   ...getInnerStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
   borderTopLeftRadius: props.$theme.borders.radius300,
@@ -54,7 +50,7 @@ export const Inner = styled<SharedStylePropsArgT>('div', props => ({
   color: props.$theme.colors.tooltipText,
 }));
 
-export const Arrow = styled<SharedStylePropsArgT>('div', props => ({
+export const Arrow = styled<SharedStylePropsArgT>('div', (props) => ({
   ...getArrowStyles(props),
   backgroundColor: props.$theme.colors.tooltipBackground,
 }));

package/tooltip/tooltip.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable react/no-find-dom-node */
 import * as React from 'react';
-import {Popover} from '../popover/index.js';
-import {mergeOverrides} from '../helpers/overrides.js';
+import { Popover } from '../popover/index.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 import baseDefaultProps from './default-props.js';
-import type {TooltipPropsT} from './types.js';
+import type { TooltipPropsT } from './types.js';
 import {
   Arrow as StyledArrow,
   Body as StyledBody,
@@ -29,15 +29,10 @@ class Tooltip extends React.Component<TooltipPropsT> {
         Body: StyledBody,
         Inner: StyledInner,
       },
-      this.props.overrides,
+      this.props.overrides
     );
     return (
-      <Popover
-        autoFocus={false}
-        data-baseweb="tooltip"
-        {...this.props}
-        overrides={overrides}
-      />
+      <Popover autoFocus={false} data-baseweb="tooltip" {...this.props} overrides={overrides} />
     );
   }
 }

package/tree-view/index.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as TreeView} from './tree-view.js';
-export {default as StatefulTreeView} from './stateful-tree-view.js';
+export { default as TreeView } from './tree-view.js';
+export { default as StatefulTreeView } from './stateful-tree-view.js';
 
 export type * from './types.js';
 
@@ -18,9 +18,9 @@ export {
   StyledIconContainer,
 } from './styled-components.js';
 
-export {default as TreeLabel} from './tree-label.js';
-export {default as TreeLabelInteractable} from './tree-label-interactable.js';
-export {toggleIsExpanded} from './utils.js';
+export { default as TreeLabel } from './tree-label.js';
+export { default as TreeLabelInteractable } from './tree-label-interactable.js';
+export { toggleIsExpanded } from './utils.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/tree-view/stateful-container.js.flow

@@ -6,16 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type {StatefulContainerPropsT, TreeNodeT} from './types.js';
+import type { StatefulContainerPropsT, TreeNodeT } from './types.js';
 
 type StateType = {|
   data: TreeNodeT<>[],
 |};
 
-const findSiblings = (
-  node: TreeNodeT<>,
-  children: TreeNodeT<>[],
-): ?(TreeNodeT<>[]) => {
+const findSiblings = (node: TreeNodeT<>, children: TreeNodeT<>[]): ?(TreeNodeT<>[]) => {
   if (children.indexOf(node) !== -1) {
     return children;
   }
@@ -30,26 +27,23 @@ const findSiblings = (
   return null;
 };
 
-export default class StatefulContainer extends React.Component<
-  StatefulContainerPropsT,
-  StateType,
-> {
+export default class StatefulContainer extends React.Component<StatefulContainerPropsT, StateType> {
   state: StateType;
 
   constructor(props: StatefulContainerPropsT) {
     super(props);
-    this.state = {data: this.props.data};
+    this.state = { data: this.props.data };
   }
 
   onToggle = (node: TreeNodeT<>) => {
-    const {onToggle, singleExpanded} = this.props;
+    const { onToggle, singleExpanded } = this.props;
     this.setState(
-      prevState => {
+      (prevState) => {
         const shouldExpand = !node.isExpanded;
         if (singleExpanded && shouldExpand) {
           const siblings = findSiblings(node, prevState.data);
           if (siblings != null) {
-            siblings.forEach(sibling => {
+            siblings.forEach((sibling) => {
               if (sibling !== node) {
                 sibling.isExpanded = false;
               }
@@ -57,23 +51,23 @@ export default class StatefulContainer extends React.Component<
           }
         }
         node.isExpanded = shouldExpand;
-        return {data: prevState.data};
+        return { data: prevState.data };
       },
       () => {
         onToggle && onToggle(node);
-      },
+      }
     );
   };
 
   render() {
-    const {children, ...restProps} = this.props;
-    const {onToggle} = this;
+    const { children, ...restProps } = this.props;
+    const { onToggle } = this;
     return children(
       Object.freeze({
         ...restProps,
         ...this.state,
         onToggle,
-      }),
+      })
     );
   }
 }

package/tree-view/stateful-tree-view.js.flow

@@ -10,12 +10,12 @@ import * as React from 'react';
 
 import StatefulContainer from './stateful-container.js';
 import TreeView from './tree-view.js';
-import type {TreeViewPropsT} from './types.js';
+import type { TreeViewPropsT } from './types.js';
 
 export default function StatefulTreeView(props: TreeViewPropsT) {
   return (
     <StatefulContainer {...props}>
-      {treeViewProps => <TreeView {...treeViewProps} />}
+      {(treeViewProps) => <TreeView {...treeViewProps} />}
     </StatefulContainer>
   );
 }

package/tree-view/styled-components.js.flow

@@ -7,13 +7,13 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {styled} from '../styles/index.js';
+import { styled } from '../styles/index.js';
 
 export const StyledTreeItemList = styled<{
   $indentGuides?: boolean,
   $isChildNode?: boolean,
   $expanded?: boolean,
-}>('ul', ({$theme, $indentGuides, $isChildNode, $expanded = true}) => {
+}>('ul', ({ $theme, $indentGuides, $isChildNode, $expanded = true }) => {
   const direction: string = $theme.direction === 'rtl' ? 'Right' : 'Left';
   return {
     marginTop: 0,
@@ -27,36 +27,31 @@ export const StyledTreeItemList = styled<{
     outline: 'none',
     display: $expanded ? 'block' : 'none',
     [`border${direction}`]:
-      $indentGuides && $isChildNode
-        ? `1px solid ${$theme.colors.borderOpaque}`
-        : 'none',
+      $indentGuides && $isChildNode ? `1px solid ${$theme.colors.borderOpaque}` : 'none',
   };
 });
 
-export const StyledTreeItem = styled<{$isLeafNode?: boolean}>(
-  'li',
-  ({$theme, $isLeafNode}) => {
-    return {
-      cursor: $isLeafNode ? 'auto' : 'pointer',
-      marginTop: 0,
-      marginBottom: 0,
-      marginLeft: 0,
-      marginRight: 0,
-      overflow: 'auto',
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-      position: 'relative',
-      outline: 'none',
-    };
-  },
-);
+export const StyledTreeItem = styled<{ $isLeafNode?: boolean }>('li', ({ $theme, $isLeafNode }) => {
+  return {
+    cursor: $isLeafNode ? 'auto' : 'pointer',
+    marginTop: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    overflow: 'auto',
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    position: 'relative',
+    outline: 'none',
+  };
+});
 
 export const StyledItemContent = styled<{
   $isSelected: boolean,
   $isFocusVisible: boolean,
-}>('div', ({$theme, $isSelected, $isFocusVisible}) => {
+}>('div', ({ $theme, $isSelected, $isFocusVisible }) => {
   return {
     ...$theme.typography.font300,
     alignItems: 'center',
@@ -71,10 +66,7 @@ export const StyledItemContent = styled<{
     paddingRight: $theme.sizing.scale200,
     paddingTop: $theme.sizing.scale100,
     paddingBottom: $theme.sizing.scale100,
-    outline:
-      $isSelected && $isFocusVisible
-        ? `3px solid ${$theme.colors.accent}`
-        : 'none',
+    outline: $isSelected && $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
     outlineOffset: '-3px',
     ':hover': {
       backgroundColor: $theme.colors.mono300,
@@ -82,9 +74,8 @@ export const StyledItemContent = styled<{
   };
 });
 
-export const StyledIconContainer = styled<{}>('div', ({$theme}) => {
-  const marginDirection: string =
-    $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+export const StyledIconContainer = styled<{}>('div', ({ $theme }) => {
+  const marginDirection: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return {
     alignItems: 'center',
     display: 'flex',
@@ -95,9 +86,8 @@ export const StyledIconContainer = styled<{}>('div', ({$theme}) => {
   };
 });
 
-export const StyledNoIconContainer = styled<{}>('div', ({$theme}) => {
-  const marginDirection: string =
-    $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+export const StyledNoIconContainer = styled<{}>('div', ({ $theme }) => {
+  const marginDirection: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return {
     alignItems: 'center',
     display: 'flex',