baseui 10.9.2 → 10.11.1

package/progress-bar/styled-components.js.flow

@@ -5,10 +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, hexToRgb, withWrapper} from '../styles/index.js';
-import {SIZE} from './constants.js';
+import { styled, hexToRgb, withWrapper } from '../styles/index.js';
+import { SIZE } from './constants.js';
 
-import type {StylePropsT, SizeT} from './types.js';
+import type { StylePropsT, SizeT } from './types.js';
 import React from 'react';
 
 function getBarHeight(size) {
@@ -19,15 +19,15 @@ function getBarHeight(size) {
   }[size];
 }
 
-export const StyledRoot = styled<StylePropsT>('div', props => {
+export const StyledRoot = styled<StylePropsT>('div', (props) => {
   return {
     width: '100%',
   };
 });
 
-export const StyledBarContainer = styled<StylePropsT>('div', props => {
-  const {$theme} = props;
-  const {sizing} = $theme;
+export const StyledBarContainer = styled<StylePropsT>('div', (props) => {
+  const { $theme } = props;
+  const { sizing } = $theme;
   return ({
     display: 'flex',
     marginLeft: sizing.scale500,
@@ -37,9 +37,9 @@ export const StyledBarContainer = styled<StylePropsT>('div', props => {
   }: {});
 });
 
-export const StyledBar = styled<StylePropsT>('div', props => {
-  const {$theme, $size, $steps} = props;
-  const {colors, sizing, borders} = $theme;
+export const StyledBar = styled<StylePropsT>('div', (props) => {
+  const { $theme, $size, $steps } = props;
+  const { colors, sizing, borders } = $theme;
   const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
   return ({
     borderTopLeftRadius: borderRadius,
@@ -61,21 +61,12 @@ export const StyledBar = styled<StylePropsT>('div', props => {
   }: {});
 });
 
-export const StyledBarProgress = styled<StylePropsT>('div', props => {
-  const {
-    $theme,
-    $value,
-    $successValue,
-    $steps,
-    $index,
-    $maxValue,
-    $minValue = 0,
-  } = props;
+export const StyledBarProgress = styled<StylePropsT>('div', (props) => {
+  const { $theme, $value, $successValue, $steps, $index, $maxValue, $minValue = 0 } = props;
   // making sure this doesn't break existing use that use StyledBarProgress directly
   const maxValue = $maxValue ? $maxValue : $successValue;
-  const {colors, sizing, borders} = $theme;
-  const width = `${100 -
-    (($value - $minValue) * 100) / (maxValue - $minValue)}%`;
+  const { colors, sizing, borders } = $theme;
+  const width = `${100 - (($value - $minValue) * 100) / (maxValue - $minValue)}%`;
 
   const stepStates = {
     default: 'default',
@@ -127,7 +118,7 @@ export const StyledBarProgress = styled<StylePropsT>('div', props => {
       ? {
           transform: 'translateX(0%)',
         }
-      : {transform: 'translateX(-102%)'};
+      : { transform: 'translateX(-102%)' };
 
   return {
     borderTopLeftRadius: borderRadius,
@@ -143,77 +134,72 @@ export const StyledBarProgress = styled<StylePropsT>('div', props => {
   };
 });
 
-export const StyledInfiniteBar = styled<{$isLeft?: boolean, $size: SizeT}>(
-  'div',
-  props => {
-    const {$theme, $isLeft = false, $size = SIZE.medium} = props;
-    const {colors, sizing, borders} = $theme;
-    const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
-    const height = getBarHeight($size);
-    const animationStyles = {
-      display: 'inline-block',
-      flex: 1,
-      marginLeft: 'auto',
-      marginRight: 'auto',
-      transitionProperty: 'background-position',
-      animationDuration: '1.5s',
-      animationIterationCount: 'infinite',
-      animationTimingFunction: $theme.animation.linearCurve,
-      backgroundSize: '300% auto',
-      backgroundRepeat: 'no-repeat',
-      backgroundPositionX: $isLeft ? '-50%' : '150%',
-      backgroundImage: `linear-gradient(${
-        $isLeft ? '90' : '270'
-      }deg, transparent 0%, ${colors.accent} 25%, ${
-        colors.accent
-      } 75%, transparent 100%)`,
-      animationName: $isLeft
-        ? {
-            '0%': {
-              backgroundPositionX: '-50%',
-            },
-            '33%': {
-              backgroundPositionX: '50%',
-            },
-            '66%': {
-              backgroundPositionX: '50%',
-            },
-            '100%': {
-              backgroundPositionX: '150%',
-            },
-          }
-        : {
-            '0%': {
-              backgroundPositionX: '150%',
-            },
-            '33%': {
-              backgroundPositionX: '50%',
-            },
-            '66%': {
-              backgroundPositionX: '50%',
-            },
-            '100%': {
-              backgroundPositionX: '-50%',
-            },
+export const StyledInfiniteBar = styled<{ $isLeft?: boolean, $size: SizeT }>('div', (props) => {
+  const { $theme, $isLeft = false, $size = SIZE.medium } = props;
+  const { colors, sizing, borders } = $theme;
+  const borderRadius = borders.useRoundedCorners ? sizing.scale0 : 0;
+  const height = getBarHeight($size);
+  const animationStyles = {
+    display: 'inline-block',
+    flex: 1,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    transitionProperty: 'background-position',
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: $theme.animation.linearCurve,
+    backgroundSize: '300% auto',
+    backgroundRepeat: 'no-repeat',
+    backgroundPositionX: $isLeft ? '-50%' : '150%',
+    backgroundImage: `linear-gradient(${$isLeft ? '90' : '270'}deg, transparent 0%, ${
+      colors.accent
+    } 25%, ${colors.accent} 75%, transparent 100%)`,
+    animationName: $isLeft
+      ? {
+          '0%': {
+            backgroundPositionX: '-50%',
           },
-    };
-    return {
-      ...($isLeft
-        ? {
-            borderTopLeftRadius: borderRadius,
-            borderBottomLeftRadius: borderRadius,
-          }
-        : {
-            borderTopRightRadius: borderRadius,
-            borderBottomRightRadius: borderRadius,
-          }),
-      height,
-      ...animationStyles,
-    };
-  },
-);
+          '33%': {
+            backgroundPositionX: '50%',
+          },
+          '66%': {
+            backgroundPositionX: '50%',
+          },
+          '100%': {
+            backgroundPositionX: '150%',
+          },
+        }
+      : {
+          '0%': {
+            backgroundPositionX: '150%',
+          },
+          '33%': {
+            backgroundPositionX: '50%',
+          },
+          '66%': {
+            backgroundPositionX: '50%',
+          },
+          '100%': {
+            backgroundPositionX: '-50%',
+          },
+        },
+  };
+  return {
+    ...($isLeft
+      ? {
+          borderTopLeftRadius: borderRadius,
+          borderBottomLeftRadius: borderRadius,
+        }
+      : {
+          borderTopRightRadius: borderRadius,
+          borderBottomRightRadius: borderRadius,
+        }),
+    height,
+    ...animationStyles,
+  };
+});
 
-export const StyledLabel = styled<StylePropsT>('div', props => {
+export const StyledLabel = styled<StylePropsT>('div', (props) => {
   return {
     textAlign: 'center',
     ...props.$theme.typography.font150,
@@ -223,24 +209,21 @@ export const StyledLabel = styled<StylePropsT>('div', props => {
 
 const PROGRESS_BAR_ROUNDED_SIZES = {
   [SIZE.large]: {
-    d:
-      'M47.5 4H71.5529C82.2933 4 91 12.9543 91 24C91 35.0457 82.2933 44 71.5529 44H23.4471C12.7067 44 4 35.0457 4 24C4 12.9543 12.7067 4 23.4471 4H47.5195',
+    d: 'M47.5 4H71.5529C82.2933 4 91 12.9543 91 24C91 35.0457 82.2933 44 71.5529 44H23.4471C12.7067 44 4 35.0457 4 24C4 12.9543 12.7067 4 23.4471 4H47.5195',
     width: 95,
     height: 48,
     strokeWidth: 8,
     typography: 'LabelLarge',
   },
   [SIZE.medium]: {
-    d:
-      'M39 2H60.5833C69.0977 2 76 9.16344 76 18C76 26.8366 69.0977 34 60.5833 34H17.4167C8.90228 34 2 26.8366 2 18C2 9.16344 8.90228 2 17.4167 2H39.0195',
+    d: 'M39 2H60.5833C69.0977 2 76 9.16344 76 18C76 26.8366 69.0977 34 60.5833 34H17.4167C8.90228 34 2 26.8366 2 18C2 9.16344 8.90228 2 17.4167 2H39.0195',
     width: 78,
     height: 36,
     strokeWidth: 4,
     typography: 'LabelMedium',
   },
   [SIZE.small]: {
-    d:
-      'M32 1H51.6271C57.9082 1 63 6.37258 63 13C63 19.6274 57.9082 25 51.6271 25H12.3729C6.09181 25 1 19.6274 1 13C1 6.37258 6.09181 1 12.3729 1H32.0195',
+    d: 'M32 1H51.6271C57.9082 1 63 6.37258 63 13C63 19.6274 57.9082 25 51.6271 25H12.3729C6.09181 25 1 19.6274 1 13C1 6.37258 6.09181 1 12.3729 1H32.0195',
     width: 64,
     height: 26,
     strokeWidth: 2,
@@ -251,7 +234,7 @@ const PROGRESS_BAR_ROUNDED_SIZES = {
 export const StyledProgressBarRoundedRoot = styled<{
   $size: SizeT,
   $inline: boolean,
-}>('div', ({$size, $inline}) => {
+}>('div', ({ $size, $inline }) => {
   return {
     width: PROGRESS_BAR_ROUNDED_SIZES[$size].width + 'px',
     height: PROGRESS_BAR_ROUNDED_SIZES[$size].height + 'px',
@@ -264,7 +247,7 @@ export const StyledProgressBarRoundedRoot = styled<{
 
 const _StyledProgressBarRoundedSvg = styled<{
   $size: SizeT,
-}>('svg', ({$size}) => {
+}>('svg', ({ $size }) => {
   return {
     width: PROGRESS_BAR_ROUNDED_SIZES[$size].width + 'px',
     height: PROGRESS_BAR_ROUNDED_SIZES[$size].height + 'px',
@@ -275,21 +258,23 @@ const _StyledProgressBarRoundedSvg = styled<{
 
 export const StyledProgressBarRoundedSvg = withWrapper(
   _StyledProgressBarRoundedSvg,
-  Styled =>
+  (Styled) =>
     function StyledProgressBarRoundedSvg(props) {
       return (
         <Styled
-          viewBox={`0 0 ${PROGRESS_BAR_ROUNDED_SIZES[props.$size].width} ${PROGRESS_BAR_ROUNDED_SIZES[props.$size].height}`}
+          viewBox={`0 0 ${PROGRESS_BAR_ROUNDED_SIZES[props.$size].width} ${
+            PROGRESS_BAR_ROUNDED_SIZES[props.$size].height
+          }`}
           xmlns="http://www.w3.org/2000/svg"
           {...props}
         />
       );
-    },
+    }
 );
 
 const _StyledProgressBarRoundedTrackBackground = styled<{
   $size: SizeT,
-}>('path', ({$theme, $size}) => {
+}>('path', ({ $theme, $size }) => {
   return {
     stroke: $theme.colors.backgroundTertiary,
     strokeWidth: PROGRESS_BAR_ROUNDED_SIZES[$size].strokeWidth + 'px',
@@ -298,12 +283,10 @@ const _StyledProgressBarRoundedTrackBackground = styled<{
 
 export const StyledProgressBarRoundedTrackBackground = withWrapper(
   _StyledProgressBarRoundedTrackBackground,
-  Styled =>
+  (Styled) =>
     function StyledProgressBarRoundedSvg(props) {
-      return (
-        <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />
-      );
-    },
+      return <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />;
+    }
 );
 
 const _StyledProgressBarRoundedTrackForeground = styled<{
@@ -311,7 +294,7 @@ const _StyledProgressBarRoundedTrackForeground = styled<{
   $visible: boolean,
   $pathLength: number,
   $pathProgress: number,
-}>('path', ({$theme, $size, $visible, $pathLength, $pathProgress}) => {
+}>('path', ({ $theme, $size, $visible, $pathLength, $pathProgress }) => {
   return {
     visibility: $visible ? 'visible' : 'hidden',
     stroke: $theme.colors.borderAccent,
@@ -323,17 +306,15 @@ const _StyledProgressBarRoundedTrackForeground = styled<{
 
 export const StyledProgressBarRoundedTrackForeground = withWrapper(
   _StyledProgressBarRoundedTrackForeground,
-  Styled =>
+  (Styled) =>
     function StyledProgressBarRoundedSvg(props) {
-      return (
-        <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />
-      );
-    },
+      return <Styled d={PROGRESS_BAR_ROUNDED_SIZES[props.$size].d} {...props} />;
+    }
 );
 
 export const StyledProgressBarRoundedText = styled<{
   $size: SizeT,
-}>('div', ({$theme, $size}) => {
+}>('div', ({ $theme, $size }) => {
   return {
     color: $theme.colors.contentPrimary,
     ...$theme.typography[PROGRESS_BAR_ROUNDED_SIZES[$size].typography],

package/progress-bar/types.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE } from './constants.js';
 
 export type SizeT = $Keys<typeof SIZE>;
 
@@ -23,15 +23,12 @@ export type OverridesT = {
 export type ProgressBarPropsT = {
   /** The accessible label for the progress bar (getProgressLabel will be used if not provided) */
   ariaLabel?: string,
+  'aria-label'?: string,
   children?: React.Node,
   /** Error message for screen-reader users**/
   errorMessage?: string,
   /** The function that returns a progress bar label to display. */
-  getProgressLabel: (
-    value: number,
-    maxValue: number,
-    minValue: number,
-  ) => React.Node,
+  getProgressLabel: (value: number, maxValue: number, minValue: number) => React.Node,
   /** If set to true, there’s and infinite loading animation. */
   infinite: boolean,
   overrides?: OverridesT,

package/progress-steps/index.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-export {default as ProgressSteps} from './progress-steps.js';
-export {default as Step} from './step.js';
-export {default as NumberedStep} from './numbered-step.js';
+export { default as ProgressSteps } from './progress-steps.js';
+export { default as Step } from './step.js';
+export { default as NumberedStep } from './numbered-step.js';
 export * from './styled-components.js';
 export type * from './types.js';
 

package/progress-steps/numbered-step.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 import {
   StyledNumberStep,
   StyledNumberIcon,
@@ -19,7 +19,7 @@ import {
 } from './styled-components.js';
 import StyledCheckIcon from '../icon/check.js';
 
-import type {NumberedStepPropsT} from './types.js';
+import type { NumberedStepPropsT } from './types.js';
 
 function NumberedStep({
   overrides = {},
@@ -32,23 +32,14 @@ function NumberedStep({
 }: NumberedStepPropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledNumberStep);
   const [Icon, iconProps] = getOverrides(overrides.Icon, StyledNumberIcon);
-  const [Tail, tailProps] = getOverrides(
-    overrides.Tail,
-    StyledNumberContentTail,
-  );
-  const [Content, contentProps] = getOverrides(
-    overrides.Content,
-    StyledContent,
-  );
+  const [Tail, tailProps] = getOverrides(overrides.Tail, StyledNumberContentTail);
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
   const [Title, titleProps] = getOverrides(overrides.Title, StyledContentTitle);
   const [Description, descriptionProps] = getOverrides(
     overrides.Description,
-    StyledContentDescription,
-  );
-  const [CheckIcon, checkIconProps] = getOverrides(
-    overrides.Icon,
-    StyledCheckIcon,
+    StyledContentDescription
   );
+  const [CheckIcon, checkIconProps] = getOverrides(overrides.Icon, StyledCheckIcon);
 
   const sharedProps = {
     $isCompleted: isCompleted,

package/progress-steps/progress-steps.js.flow

@@ -8,15 +8,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {StyledProgressSteps} from './styled-components.js';
-import type {ProgressStepsPropsT, StepPropsT} from './types.js';
-
-function ProgressSteps({
-  overrides = {},
-  current,
-  children,
-}: ProgressStepsPropsT) {
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledProgressSteps } from './styled-components.js';
+import type { ProgressStepsPropsT, StepPropsT } from './types.js';
+
+function ProgressSteps({ overrides = {}, current, children }: ProgressStepsPropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledProgressSteps);
   const numChildren = React.Children.count(children);
   const modifiedChildren = React.Children.map(children, (child, index) => {
@@ -24,10 +20,7 @@ function ProgressSteps({
 
     const childOverrides = child.props.overrides || {};
 
-    const isActive =
-      child.props.isActive !== undefined
-        ? child.props.isActive
-        : index === current;
+    const isActive = child.props.isActive !== undefined ? child.props.isActive : index === current;
 
     return React.cloneElement(
       child,
@@ -41,7 +34,7 @@ function ProgressSteps({
           Root: overrides.StepRoot,
           ...childOverrides,
         },
-      }: StepPropsT),
+      }: StepPropsT)
     );
   });
 

package/progress-steps/step.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 import {
   StyledStep,
   StyledIconContainer,
@@ -20,35 +20,22 @@ import {
   StyledContentDescription,
 } from './styled-components.js';
 
-import type {StepPropsT} from './types.js';
+import type { StepPropsT } from './types.js';
 
-function Step({
-  overrides = {},
-  isCompleted,
-  isActive,
-  isLast,
-  title,
-  children,
-}: StepPropsT) {
+function Step({ overrides = {}, isCompleted, isActive, isLast, title, children }: StepPropsT) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledStep);
   const [IconContainer, iconContainerProps] = getOverrides(
     overrides.IconContainer,
-    StyledIconContainer,
+    StyledIconContainer
   );
   const [Icon, iconProps] = getOverrides(overrides.Icon, StyledIcon);
-  const [InnerIcon, innerIconProps] = getOverrides(
-    overrides.InnerIcon,
-    StyledInnerIcon,
-  );
+  const [InnerIcon, innerIconProps] = getOverrides(overrides.InnerIcon, StyledInnerIcon);
   const [Tail, tailProps] = getOverrides(overrides.Tail, StyledContentTail);
-  const [Content, contentProps] = getOverrides(
-    overrides.Content,
-    StyledContent,
-  );
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
   const [Title, titleProps] = getOverrides(overrides.Title, StyledContentTitle);
   const [Description, descriptionProps] = getOverrides(
     overrides.Description,
-    StyledContentDescription,
+    StyledContentDescription
   );
 
   const sharedProps = {

package/progress-steps/styled-components.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import {styled} from '../styles/index.js';
-import type {StylePropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { StylePropsT } from './types.js';
 
-export const StyledProgressSteps = styled<{}>('ol', ({$theme}) => {
+export const StyledProgressSteps = styled<{}>('ol', ({ $theme }) => {
   return {
     display: 'inline-block',
     marginBottom: 0,
@@ -22,7 +22,7 @@ export const StyledProgressSteps = styled<{}>('ol', ({$theme}) => {
   };
 });
 
-export const StyledStep = styled<StylePropsT>('li', ({$theme}) => {
+export const StyledStep = styled<StylePropsT>('li', ({ $theme }) => {
   return {
     listStyleType: 'none',
     position: 'relative',
@@ -32,7 +32,7 @@ export const StyledStep = styled<StylePropsT>('li', ({$theme}) => {
 
 export const StyledIconContainer = styled<StylePropsT>(
   'div',
-  ({$theme, $isActive, $isCompleted, $disabled}) => {
+  ({ $theme, $isActive, $isCompleted, $disabled }) => {
     let currentColor = $theme.colors.backgroundPrimary;
     let size = $theme.sizing.scale500;
     let marginLeft = '26px';
@@ -65,12 +65,12 @@ export const StyledIconContainer = styled<StylePropsT>(
       justifyContent: 'center',
       alignItems: 'center',
     };
-  },
+  }
 );
 
 export const StyledIcon = styled<StylePropsT>(
   'div',
-  ({$theme, $isActive, $isCompleted, $disabled}) => {
+  ({ $theme, $isActive, $isCompleted, $disabled }) => {
     let currentColor = $theme.colors.mono400;
     let size = $theme.sizing.scale300;
 
@@ -99,10 +99,10 @@ export const StyledIcon = styled<StylePropsT>(
       justifyContent: 'center',
       alignItems: 'center',
     };
-  },
+  }
 );
 
-export const StyledInnerIcon = styled<StylePropsT>('div', ({$theme}) => {
+export const StyledInnerIcon = styled<StylePropsT>('div', ({ $theme }) => {
   return {
     width: $theme.sizing.scale300,
     height: $theme.sizing.scale300,
@@ -116,9 +116,8 @@ export const StyledInnerIcon = styled<StylePropsT>('div', ({$theme}) => {
   };
 });
 
-export const StyledContent = styled<StylePropsT>('div', ({$theme}) => {
-  const marginDir: string =
-    $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+export const StyledContent = styled<StylePropsT>('div', ({ $theme }) => {
+  const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
     [marginDir]: $theme.sizing.scale1600,
   };
@@ -126,7 +125,7 @@ export const StyledContent = styled<StylePropsT>('div', ({$theme}) => {
 
 export const StyledContentTitle = styled<StylePropsT>(
   'div',
-  ({$theme, $isActive, $isCompleted}) => {
+  ({ $theme, $isActive, $isCompleted }) => {
     let color = $theme.colors.primary400;
     if ($isCompleted) {
       color = $theme.colors.contentSecondary;
@@ -141,12 +140,12 @@ export const StyledContentTitle = styled<StylePropsT>(
       paddingTop: $theme.sizing.scale800,
       paddingBottom: $theme.sizing.scale800,
     };
-  },
+  }
 );
 
 export const StyledContentTail = styled<StylePropsT>(
   'div',
-  ({$theme, $isCompleted, $isActive}) => {
+  ({ $theme, $isCompleted, $isActive }) => {
     let currentColor = $theme.colors.mono400;
     let size = $theme.sizing.scale500;
     let font = $theme.typography.LabelMedium;
@@ -173,19 +172,16 @@ export const StyledContentTail = styled<StylePropsT>(
       display: 'inline-block',
       backgroundColor: currentColor,
     };
-  },
+  }
 );
 
-export const StyledContentDescription = styled<StylePropsT>(
-  'div',
-  ({$theme}) => {
-    return {
-      marginBottom: $theme.sizing.scale700,
-    };
-  },
-);
+export const StyledContentDescription = styled<StylePropsT>('div', ({ $theme }) => {
+  return {
+    marginBottom: $theme.sizing.scale700,
+  };
+});
 
-export const StyledNumberStep = styled<StylePropsT>('li', ({$theme}) => {
+export const StyledNumberStep = styled<StylePropsT>('li', ({ $theme }) => {
   return {
     listStyleType: 'none',
     position: 'relative',
@@ -195,7 +191,7 @@ export const StyledNumberStep = styled<StylePropsT>('li', ({$theme}) => {
 
 export const StyledNumberIcon = styled<StylePropsT>(
   'div',
-  ({$theme, $isActive, $isCompleted, $disabled}) => {
+  ({ $theme, $isActive, $isCompleted, $disabled }) => {
     let backgroundColor = $theme.colors.mono400;
     let color = $theme.colors.contentStateDisabled;
     let size = $theme.sizing.scale950;
@@ -234,12 +230,12 @@ export const StyledNumberIcon = styled<StylePropsT>(
       alignItems: 'center',
       ...font,
     };
-  },
+  }
 );
 
 export const StyledNumberContentTail = styled<StylePropsT>(
   'div',
-  ({$theme, $isActive, $isCompleted, $disabled}) => {
+  ({ $theme, $isActive, $isCompleted, $disabled }) => {
     let currentColor = $theme.colors.mono300;
     let size = $theme.sizing.scale950;
     let titleFont = $theme.typography.LabelMedium;
@@ -261,7 +257,7 @@ export const StyledNumberContentTail = styled<StylePropsT>(
       backgroundColor: currentColor,
       display: 'inline-block',
     };
-  },
+  }
 );
 
 declare var __DEV__: boolean;