baseui 10.10.0 → 10.11.0

package/a11y/a11y.js

@@ -182,7 +182,7 @@ function A11y(props) {
 
     return (
       /*#__PURE__*/
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       React.createElement(Violation, {
         target: node,
         violations: violations,

package/a11y/a11y.js.flow

@@ -10,16 +10,16 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import axe from 'axe-core';
 
-import {Layer, TetherBehavior, TETHER_PLACEMENT} from '../layer/index.js';
-import {ParagraphSmall, ParagraphXSmall} from '../typography/index.js';
-import {styled} from '../styles/index.js';
-import {ThemeContext} from '../styles/theme-provider.js';
+import { Layer, TetherBehavior, TETHER_PLACEMENT } from '../layer/index.js';
+import { ParagraphSmall, ParagraphXSmall } from '../typography/index.js';
+import { styled } from '../styles/index.js';
+import { ThemeContext } from '../styles/theme-provider.js';
 
-import type {ViolationPropsT} from './types.js';
+import type { ViolationPropsT } from './types.js';
 
 function validateNode(node) {
   return new Promise((resolve, reject) => {
-    axe.run(node, {reporter: 'v2'}, (error, results) => {
+    axe.run(node, { reporter: 'v2' }, (error, results) => {
       if (error) reject(error);
       resolve(results.violations);
     });
@@ -28,7 +28,7 @@ function validateNode(node) {
 
 function segmentViolationsByNode(violations) {
   const nodes = violations.reduce((map, violation) => {
-    violation.nodes.forEach(node => {
+    violation.nodes.forEach((node) => {
       if (!map[node.target]) {
         map[node.target] = [violation];
       } else {
@@ -40,9 +40,9 @@ function segmentViolationsByNode(violations) {
   return Object.entries(nodes);
 }
 
-const ViolationContainer = styled<{$top: string, $left: string}>(
+const ViolationContainer = styled<{ $top: string, $left: string }>(
   'div',
-  ({$theme, $top, $left}) => {
+  ({ $theme, $top, $left }) => {
     return {
       backgroundColor: $theme.colors.mono100,
       boxShadow: $theme.lighting.shadow600,
@@ -51,11 +51,11 @@ const ViolationContainer = styled<{$top: string, $left: string}>(
       top: $top,
       left: $left,
     };
-  },
+  }
 );
 
 function Violation(props: ViolationPropsT) {
-  const [offset, setOffset] = React.useState({top: 0, left: 0});
+  const [offset, setOffset] = React.useState({ top: 0, left: 0 });
   const [anchor, setAnchor] = React.useState(null);
   const [popper, setPopper] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
@@ -69,10 +69,7 @@ function Violation(props: ViolationPropsT) {
     if (node) {
       setAnchor(node);
 
-      node.setAttribute(
-        'style',
-        `border: solid 1px ${theme.colors.negative300};`,
-      );
+      node.setAttribute('style', `border: solid 1px ${theme.colors.negative300};`);
 
       node.addEventListener('mouseenter', handleMouseEnter);
       node.addEventListener('mouseleave', handleMouseLeave);
@@ -93,7 +90,7 @@ function Violation(props: ViolationPropsT) {
       <TetherBehavior
         anchorRef={anchor}
         popperRef={popper}
-        onPopperUpdate={update => setOffset(update.popper)}
+        onPopperUpdate={(update) => setOffset(update.popper)}
         placement={TETHER_PLACEMENT.bottom}
       >
         <ViolationContainer
@@ -111,7 +108,7 @@ function Violation(props: ViolationPropsT) {
   );
 }
 
-export default function A11y(props: {children: React.Node}) {
+export default function A11y(props: { children: React.Node }) {
   const [violations, setViolations] = React.useState([]);
   const [idleID, setIdleID] = React.useState(null);
   const child = React.useRef(null);
@@ -136,7 +133,7 @@ export default function A11y(props: {children: React.Node}) {
       <span ref={child}>{props.children}</span>
       <div>
         {violationsByNode.map(([node, violations], index) => (
-          // eslint-disable-next-line flowtype/no-weak-types
+          // flowlint-next-line unclear-type:off
           <Violation target={node} violations={(violations: any)} key={index} />
         ))}
       </div>

package/a11y/index.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as Unstable_A11y} from './a11y.js';
+export { default as Unstable_A11y } from './a11y.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/a11y/types.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-type NodeT = {target: string};
-type ViolationT = {description: string, nodes: NodeT};
+type NodeT = { target: string };
+type ViolationT = { description: string, nodes: NodeT };
 
 export type ViolationPropsT = {
   target: string,

package/accordion/accordion.js

@@ -92,7 +92,8 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
 
   _createClass(Accordion, [{
     key: "onPanelChange",
-    value: function onPanelChange(key, onChange) {
+    value: //flowlint-next-line unclear-type:off
+    function onPanelChange(key, onChange) {
       var activeKeys = this.state.expanded;
       var accordion = this.props.accordion;
 
@@ -144,7 +145,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           children = _this$props2.children,
           renderPanelContent = _this$props2.renderPanelContent,
           renderAll = _this$props2.renderAll,
-          overrides = _this$props2.overrides; // eslint-disable-next-line flowtype/no-weak-types
+          overrides = _this$props2.overrides; // flowlint-next-line unclear-type:off
 
       return React.Children.map(children, function (child, index) {
         if (!child) return; // If there is no key provided use the panel order as a default key

package/accordion/accordion.js.flow

@@ -7,19 +7,12 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {Root as StyledRoot} from './styled-components.js';
-import {STATE_CHANGE_TYPE} from './constants.js';
-import type {
-  AccordionPropsT,
-  AccordionStateT,
-  StateChangeTypeT,
-} from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Root as StyledRoot } from './styled-components.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
+import type { AccordionPropsT, AccordionStateT, StateChangeTypeT } from './types.js';
 
-export default class Accordion extends React.Component<
-  AccordionPropsT,
-  AccordionStateT,
-> {
+export default class Accordion extends React.Component<AccordionPropsT, AccordionStateT> {
   static defaultProps: $Shape<AccordionPropsT> = {
     accordion: true,
     disabled: false,
@@ -38,9 +31,10 @@ export default class Accordion extends React.Component<
     ...this.props.initialState,
   };
 
-  onPanelChange(key: React.Key, onChange: () => {}, ...args: *) {
+  //flowlint-next-line unclear-type:off
+  onPanelChange(key: React.Key, onChange: () => {}, ...args: Array<any>) {
     let activeKeys = this.state.expanded;
-    const {accordion} = this.props;
+    const { accordion } = this.props;
     if (accordion) {
       activeKeys = activeKeys[0] === key ? [] : [key];
     } else {
@@ -54,31 +48,24 @@ export default class Accordion extends React.Component<
         activeKeys.push(key);
       }
     }
-    const newState = {expanded: activeKeys};
+    const newState = { expanded: activeKeys };
     this.internalSetState(STATE_CHANGE_TYPE.expand, newState);
     // Call individual panel's onChange handler
     if (typeof onChange === 'function') onChange(...args);
   }
 
   internalSetState(type: StateChangeTypeT, changes: AccordionStateT) {
-    const {stateReducer, onChange} = this.props;
+    const { stateReducer, onChange } = this.props;
     const newState = stateReducer(type, changes, this.state);
     this.setState(newState);
     typeof onChange === 'function' && onChange(newState);
   }
 
   getItems() {
-    const {expanded} = this.state;
-    const {
-      accordion,
-      disabled,
-      children,
-      renderPanelContent,
-      renderAll,
-      overrides,
-    } = this.props;
-    // eslint-disable-next-line flowtype/no-weak-types
-    return React.Children.map(children, (child: *, index) => {
+    const { expanded } = this.state;
+    const { accordion, disabled, children, renderPanelContent, renderAll, overrides } = this.props;
+    // flowlint-next-line unclear-type:off
+    return React.Children.map(children, (child: any, index) => {
       if (!child) return;
       // If there is no key provided use the panel order as a default key
       const key = child.key || String(index);
@@ -97,8 +84,7 @@ export default class Accordion extends React.Component<
         renderAll,
         overrides: child.props.overrides || overrides,
         disabled: child.props.disabled || disabled,
-        onChange: (...args) =>
-          this.onPanelChange(key, child.props.onChange, ...args),
+        onChange: (...args) => this.onPanelChange(key, child.props.onChange, ...args),
       };
       return React.cloneElement(child, props);
     });
@@ -108,14 +94,14 @@ export default class Accordion extends React.Component<
     // TODO(v11)
     if (__DEV__ && this.props.renderPanelContent) {
       console.warn(
-        'baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.',
+        'baseui:Accordion The `renderPanelContent` prop is deprecated. Please update your code to use `renderAll`.'
       );
     }
   }
 
   render() {
-    const {overrides = {}} = this.props;
-    const {Root: RootOverride} = overrides;
+    const { overrides = {} } = this.props;
+    const { Root: RootOverride } = overrides;
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
     return (
       <Root

package/accordion/index.js.flow

@@ -5,13 +5,13 @@ 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 Accordion} from './accordion.js';
-export {default as Panel} from './panel.js';
-export {default as StatefulPanel} from './stateful-panel.js';
-export {default as StatefulPanelContainer} from './stateful-panel-container.js';
-export {default as StatelessAccordion} from './stateless-accordion.js';
+export { default as Accordion } from './accordion.js';
+export { default as Panel } from './panel.js';
+export { default as StatefulPanel } from './stateful-panel.js';
+export { default as StatefulPanelContainer } from './stateful-panel-container.js';
+export { default as StatelessAccordion } from './stateless-accordion.js';
 // Constants
-export {STATE_CHANGE_TYPE} from './constants.js';
+export { STATE_CHANGE_TYPE } from './constants.js';
 // Styled elements
 export {
   Root as StyledRoot,

package/accordion/panel.js

@@ -116,7 +116,7 @@ var Panel = function Panel(_ref) {
     }
 
     typeof onKeyDown === 'function' && onKeyDown(e);
-  }, [expanded, disabled, onChange, onKeyDown]); // eslint-disable-next-line flowtype/no-weak-types
+  }, [expanded, disabled, onChange, onKeyDown]); // flowlint-next-line unclear-type:off
 
   var _animateRef = React.useRef(null);
 

package/accordion/panel.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {LocaleContext} from '../locale/index.js';
-import {getOverrides} from '../helpers/overrides.js';
+import { LocaleContext } from '../locale/index.js';
+import { getOverrides } from '../helpers/overrides.js';
 import {
   PanelContainer as StyledPanelContainer,
   Header as StyledHeader,
@@ -16,9 +16,9 @@ import {
   ToggleIconGroup as StyledToggleIconGroup,
   ContentAnimationContainer as StyledContentAnimationContainer,
 } from './styled-components.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
-import type {PanelPropsT} from './types.js';
+import type { PanelPropsT } from './types.js';
 
 const Panel = ({
   'aria-controls': ariaControls,
@@ -42,28 +42,28 @@ const Panel = ({
   const handleFocus = React.useCallback(
     (event: SyntheticEvent<>) => {
       if (isFocusVisible(event)) {
-        setLocalState({...localState, isFocusVisible: true});
+        setLocalState({ ...localState, isFocusVisible: true });
       }
     },
-    [localState],
+    [localState]
   );
   const handleBlur = React.useCallback(
     (event: SyntheticEvent<>) => {
       if (localState.isFocusVisible) {
-        setLocalState({...localState, isFocusVisible: false});
+        setLocalState({ ...localState, isFocusVisible: false });
       }
     },
-    [localState],
+    [localState]
   );
   const handleClick = React.useCallback(
     (e: Event) => {
       if (disabled) {
         return;
       }
-      typeof onChange === 'function' && onChange({expanded: !expanded});
+      typeof onChange === 'function' && onChange({ expanded: !expanded });
       typeof onClick === 'function' && onClick(e);
     },
-    [expanded, disabled, onChange, onClick],
+    [expanded, disabled, onChange, onClick]
   );
   const handleKeyDown = React.useCallback(
     (e: KeyboardEvent) => {
@@ -75,16 +75,16 @@ const Panel = ({
       const SPACE = 32;
 
       if (e.keyCode === ENTER || e.keyCode === SPACE) {
-        typeof onChange === 'function' && onChange({expanded: !expanded});
+        typeof onChange === 'function' && onChange({ expanded: !expanded });
         if (e.keyCode === SPACE) {
           e.preventDefault(); // prevent jumping scroll when using Space
         }
       }
       typeof onKeyDown === 'function' && onKeyDown(e);
     },
-    [expanded, disabled, onChange, onKeyDown],
+    [expanded, disabled, onChange, onKeyDown]
   );
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   const _animateRef = React.useRef<any>(null);
 
   React.useEffect(() => {
@@ -108,13 +108,7 @@ const Panel = ({
         });
       }
     }
-  }, [
-    _animateRef.current,
-    expanded,
-    localState.elementHeight,
-    localState.expanded,
-    setLocalState,
-  ]);
+  }, [_animateRef.current, expanded, localState.elementHeight, localState.expanded, setLocalState]);
 
   const contentHeight = React.useMemo(() => {
     // When closing, the first render will re-query the content element for the new
@@ -132,12 +126,7 @@ const Panel = ({
     }
     // When no longer animating, set the height to auto to accommodate dynamic nested components.
     return localState.animationInProgress ? localState.elementHeight : 'auto';
-  }, [
-    expanded,
-    localState.expanded,
-    localState.animationInProgress,
-    localState.elementHeight,
-  ]);
+  }, [expanded, localState.expanded, localState.animationInProgress, localState.elementHeight]);
 
   const sharedProps = {
     $disabled: disabled,
@@ -156,27 +145,24 @@ const Panel = ({
 
   const [PanelContainer, panelContainerProps] = getOverrides(
     PanelContainerOverride,
-    StyledPanelContainer,
+    StyledPanelContainer
   );
   const [Header, headerProps] = getOverrides(HeaderOverride, StyledHeader);
   const [Content, contentProps] = getOverrides(ContentOverride, StyledContent);
   const [ContentAnimationContainer, contentAnimationProps] = getOverrides(
     ContentAnimationContainerOverride,
-    StyledContentAnimationContainer,
+    StyledContentAnimationContainer
   );
   const [ToggleIconGroup, toggleIconGroupProps] = getOverrides(
     ToggleIconGroupOverride,
-    StyledToggleIconGroup,
+    StyledToggleIconGroup
   );
 
-  const [ToggleIcon, toggleIconProps] = getOverrides(
-    ToggleIconOverride,
-    StyledToggleIcon,
-  );
+  const [ToggleIcon, toggleIconProps] = getOverrides(ToggleIconOverride, StyledToggleIcon);
 
   return (
     <LocaleContext.Consumer>
-      {locale => (
+      {(locale) => (
         <PanelContainer {...sharedProps} {...panelContainerProps}>
           <Header
             tabIndex={0}
@@ -185,7 +171,7 @@ const Panel = ({
             aria-disabled={disabled || null}
             {...sharedProps}
             {...headerProps}
-            {...(ariaControls ? {'aria-controls': ariaControls} : {})}
+            {...(ariaControls ? { 'aria-controls': ariaControls } : {})}
             onClick={handleClick}
             onKeyDown={handleKeyDown}
             onFocus={forkFocus(headerProps, handleFocus)}
@@ -194,11 +180,7 @@ const Panel = ({
             {title}
             <ToggleIcon
               viewBox="0 0 24 24"
-              title={
-                localState.expanded
-                  ? locale.accordion.collapse
-                  : locale.accordion.expand
-              }
+              title={localState.expanded ? locale.accordion.collapse : locale.accordion.expand}
               size={16}
               {...toggleIconProps}
               {...sharedProps}
@@ -223,7 +205,7 @@ const Panel = ({
             $height={contentHeight}
             onTransitionEnd={() => {
               if (localState.animationInProgress) {
-                setLocalState({...localState, animationInProgress: false});
+                setLocalState({ ...localState, animationInProgress: false });
               }
             }}
           >
@@ -231,7 +213,7 @@ const Panel = ({
               ref={_animateRef}
               {...sharedProps}
               {...contentProps}
-              {...(ariaControls ? {id: ariaControls} : {})}
+              {...(ariaControls ? { id: ariaControls } : {})}
             >
               {localState.expanded ||
               renderAll ||

package/accordion/stateful-panel-container.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_CHANGE_TYPE} from './constants.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
 import type {
   PanelStateT,
   StatefulPanelContainerPropsT,
@@ -17,12 +17,9 @@ import type {
 
 const defaultStateReducer: PanelStateReducerT = (type, nextState) => nextState;
 
-class StatefulPanelContainer extends React.Component<
-  StatefulPanelContainerPropsT,
-  PanelStateT,
-> {
+class StatefulPanelContainer extends React.Component<StatefulPanelContainerPropsT, PanelStateT> {
   static defaultProps = {
-    initialState: {expanded: false},
+    initialState: { expanded: false },
     stateReducer: defaultStateReducer,
     onChange: () => {},
   };
@@ -34,7 +31,7 @@ class StatefulPanelContainer extends React.Component<
 
   onChange: OnChangeHandlerT = () => {
     if (typeof this.props.onChange === 'function') {
-      this.props.onChange({expanded: !this.state.expanded});
+      this.props.onChange({ expanded: !this.state.expanded });
     }
     this.internalSetState(STATE_CHANGE_TYPE.expand, {
       expanded: !this.state.expanded,
@@ -42,14 +39,12 @@ class StatefulPanelContainer extends React.Component<
   };
 
   internalSetState(type: StateChangeTypeT, changes: PanelStateT) {
-    const {stateReducer} = this.props;
-    this.setState(prevState =>
-      stateReducer ? stateReducer(type, changes, prevState) : changes,
-    );
+    const { stateReducer } = this.props;
+    this.setState((prevState) => (stateReducer ? stateReducer(type, changes, prevState) : changes));
   }
 
   render() {
-    const {children, initialState, stateReducer, ...restProps} = this.props;
+    const { children, initialState, stateReducer, ...restProps } = this.props;
 
     return this.props.children({
       ...restProps,

package/accordion/stateful-panel.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-panel-container.js';
 import Panel from './panel.js';
-import type {StatefulPanelPropsT} from './types.js';
+import type { StatefulPanelPropsT } from './types.js';
 
 export default function StatefulPanel(props: StatefulPanelPropsT) {
-  const {children, ...restProps} = props;
+  const { children, ...restProps } = props;
   return (
     <StatefulContainer {...restProps}>
-      {componentProps => <Panel {...componentProps}>{children}</Panel>}
+      {(componentProps) => <Panel {...componentProps}>{children}</Panel>}
     </StatefulContainer>
   );
 }

package/accordion/stateless-accordion.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {Root as StyledRoot} from './styled-components.js';
-import type {StatelessAccordionPropsT} from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Root as StyledRoot } from './styled-components.js';
+import type { StatelessAccordionPropsT } from './types.js';
 
 function StatelessAccordion({
   accordion = true,
@@ -20,7 +20,7 @@ function StatelessAccordion({
   renderAll,
   renderPanelContent,
 }: StatelessAccordionPropsT) {
-  const {Root: RootOverrides, ...PanelOverrides} = overrides;
+  const { Root: RootOverrides, ...PanelOverrides } = overrides;
   const [Root, rootProps] = getOverrides(RootOverrides, StyledRoot);
   return (
     <Root data-baseweb="accordion" {...rootProps}>
@@ -43,12 +43,12 @@ function StatelessAccordion({
                     }
                   } else {
                     if (expanded.includes(key)) {
-                      next = expanded.filter(k => k !== key);
+                      next = expanded.filter((k) => k !== key);
                     } else {
                       next = [...expanded, key];
                     }
                   }
-                  onChange({key, expanded: next});
+                  onChange({ key, expanded: next });
                 }
               : onChange,
           overrides: child.props.overrides || PanelOverrides,

package/accordion/styled-components.js.flow

@@ -5,9 +5,9 @@ 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 {getSvgStyles} from '../icon/styled-components.js';
-import type {SharedStylePropsArgT} from './types.js';
+import { styled } from '../styles/index.js';
+import { getSvgStyles } from '../icon/styled-components.js';
+import type { SharedStylePropsArgT } from './types.js';
 
 /**
  * Main component container element
@@ -21,10 +21,10 @@ export const Root = styled('ul', {
   width: '100%',
 });
 
-export const PanelContainer = styled<SharedStylePropsArgT>('li', props => {
+export const PanelContainer = styled<SharedStylePropsArgT>('li', (props) => {
   const {
     $expanded,
-    $theme: {colors},
+    $theme: { colors },
   } = props;
   return {
     listStyleType: 'none',
@@ -35,11 +35,11 @@ export const PanelContainer = styled<SharedStylePropsArgT>('li', props => {
   };
 });
 
-export const Header = styled<SharedStylePropsArgT>('div', props => {
+export const Header = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $disabled,
     $isFocusVisible,
-    $theme: {colors, sizing, typography},
+    $theme: { colors, sizing, typography },
   } = props;
   return {
     ...typography.font350,
@@ -65,8 +65,8 @@ export const Header = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const ToggleIcon = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme, $disabled, $color} = props;
+export const ToggleIcon = styled<SharedStylePropsArgT>('svg', (props) => {
+  const { $theme, $disabled, $color } = props;
   return {
     ...getSvgStyles(props),
     flexShrink: 0,
@@ -75,8 +75,8 @@ export const ToggleIcon = styled<SharedStylePropsArgT>('svg', props => {
   };
 });
 
-export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', props => {
-  const {$theme, $expanded} = props;
+export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', (props) => {
+  const { $theme, $expanded } = props;
   return {
     transform: $expanded ? 'rotate(0)' : 'rotate(-90deg)',
     transformOrigin: 'center',
@@ -86,9 +86,9 @@ export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', props => {
   };
 });
 
-export const Content = styled<SharedStylePropsArgT>('div', props => {
+export const Content = styled<SharedStylePropsArgT>('div', (props) => {
   const {
-    $theme: {animation, colors, sizing, typography},
+    $theme: { animation, colors, sizing, typography },
     $expanded,
   } = props;
   return {
@@ -115,11 +115,11 @@ export const Content = styled<SharedStylePropsArgT>('div', props => {
 });
 
 export const ContentAnimationContainer = styled<
-  {$height: string | number} & SharedStylePropsArgT,
->('div', props => {
+  { $height: string | number } & SharedStylePropsArgT
+>('div', (props) => {
   const {
     $height,
-    $theme: {animation},
+    $theme: { animation },
   } = props;
   return {
     height: `${$height}`,