@duro-app/ui 0.52.0 → 1.1.0

package/src/components/DetailPanel/DetailPanel.tsx

@@ -10,10 +10,18 @@ import {
   useRef,
 } from 'react'
 import {html} from 'react-strict-dom'
+import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
 
 // --- Types ---
 
+const closeDurationMap = {
+  instant: styles.closeDurationInstant,
+  fast: styles.closeDurationFast,
+  base: styles.closeDurationBase,
+  slow: styles.closeDurationSlow,
+} as const satisfies Record<DurationToken, unknown>
+
 export type DetailPanelSize = 'sm' | 'md'
 
 // --- Context ---
@@ -21,6 +29,7 @@ export type DetailPanelSize = 'sm' | 'md'
 interface DetailPanelContextValue {
   present: boolean
   closing: boolean
+  closeDuration: DurationToken
   requestOpen: () => void
   requestClose: () => void
   titleId: string
@@ -48,8 +57,8 @@ interface RootProps {
   defaultOpen?: boolean
   /** Called when open state changes */
   onOpenChange?: (open: boolean) => void
-  /** Duration of the close animation in ms. Default: 220 */
-  closeAnimationDuration?: number
+  /** Motion token for the close animation. Default: 'base' (200ms) */
+  closeAnimationDuration?: DurationToken
 }
 
 function Root({
@@ -57,7 +66,7 @@ function Root({
   open: controlledOpen,
   defaultOpen = false,
   onOpenChange,
-  closeAnimationDuration = 220,
+  closeAnimationDuration = 'base',
 }: RootProps) {
   const isControlled = controlledOpen !== undefined
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
@@ -83,7 +92,7 @@ function Root({
         setClosing(false)
         setPresent(false)
         closingTimerRef.current = null
-      }, closeAnimationDuration)
+      }, DURATION_MS[closeAnimationDuration])
     }
   }, [isOpen, present, closing, closeAnimationDuration])
 
@@ -154,6 +163,7 @@ function Root({
       value={{
         present,
         closing,
+        closeDuration: closeAnimationDuration,
         requestOpen,
         requestClose,
         titleId,
@@ -189,12 +199,18 @@ const wrapperCloseMap = {
 } as const
 
 function Content({children, size = 'sm', label}: ContentProps) {
-  const {present, closing, labelId, panelRef} = useDetailPanel()
+  const {present, closing, closeDuration, labelId, panelRef} = useDetailPanel()
 
   if (!present) return null
 
   return (
-    <html.div style={[styles.wrapper, closing ? wrapperCloseMap[size] : wrapperOpenMap[size]]}>
+    <html.div
+      style={[
+        styles.wrapper,
+        closing ? wrapperCloseMap[size] : wrapperOpenMap[size],
+        closing && closeDurationMap[closeDuration],
+      ]}
+    >
       <html.div
         ref={panelRef}
         role="complementary"
@@ -205,6 +221,7 @@ function Content({children, size = 'sm', label}: ContentProps) {
           styles.content,
           size === 'sm' ? styles.contentSm : styles.contentMd,
           closing ? styles.slideOut : styles.slideIn,
+          closing && closeDurationMap[closeDuration],
         ]}
       >
         {children}

package/src/components/DetailPanel/styles.css.ts

@@ -4,10 +4,9 @@ import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
-// The "Apple ease" curves and the 280ms open now live in the shared motion
-// tokens (easing.easeOut/easeIn, duration.slow). The 220ms close is specific to
-// this panel's exit, so it stays local.
-const CLOSE_DURATION = '220ms'
+// The "Apple ease" curves and the 280ms open live in the shared motion tokens
+// (easing.easeOut/easeIn, duration.slow). The close is duration.base, and the
+// closeAnimationDuration prop can override it via the closeDuration* styles.
 
 export const styles = css.create({
   // --- Outer wrapper: animates width from 0 → target ---
@@ -32,7 +31,7 @@ export const styles = css.create({
       from: {width: 360},
       to: {width: 0},
     }),
-    animationDuration: CLOSE_DURATION,
+    animationDuration: duration.base,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
@@ -52,7 +51,7 @@ export const styles = css.create({
       from: {width: 480},
       to: {width: 0},
     }),
-    animationDuration: CLOSE_DURATION,
+    animationDuration: duration.base,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
@@ -101,11 +100,19 @@ export const styles = css.create({
         opacity: 0,
       },
     }),
-    animationDuration: CLOSE_DURATION,
+    animationDuration: duration.base,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
+  // --- Close-duration overrides ---
+  // The closeAnimationDuration prop token drives both these and the unmount
+  // timeout, so the exit animation can never race the unmount.
+  closeDurationInstant: {animationDuration: duration.instant},
+  closeDurationFast: {animationDuration: duration.fast},
+  closeDurationBase: {animationDuration: duration.base},
+  closeDurationSlow: {animationDuration: duration.slow},
+
   // --- Header ---
   header: {
     display: 'flex',

package/src/components/Dialog/Dialog.tsx

@@ -10,17 +10,26 @@ import {
   useRef,
 } from 'react'
 import {html} from 'react-strict-dom'
+import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
 
 // --- Types ---
 
 export type DialogSize = 'sm' | 'md' | 'lg'
 
+const closeDurationMap = {
+  instant: styles.closeDurationInstant,
+  fast: styles.closeDurationFast,
+  base: styles.closeDurationBase,
+  slow: styles.closeDurationSlow,
+} as const satisfies Record<DurationToken, unknown>
+
 // --- Context ---
 
 interface DialogContextValue {
   open: boolean
   closing: boolean
+  closeDuration: DurationToken
   dismissable: boolean
   requestOpen: () => void
   requestClose: () => void
@@ -49,8 +58,8 @@ interface RootProps {
   onOpenChange?: (open: boolean) => void
   /** Whether clicking backdrop closes the dialog. Default: true */
   dismissable?: boolean
-  /** Duration of the close animation in ms. Default: 140 */
-  closeAnimationDuration?: number
+  /** Motion token for the close animation. Default: 'fast' (150ms) */
+  closeAnimationDuration?: DurationToken
 }
 
 function Root({
@@ -59,7 +68,7 @@ function Root({
   defaultOpen = false,
   onOpenChange,
   dismissable = true,
-  closeAnimationDuration = 140,
+  closeAnimationDuration = 'fast',
 }: RootProps) {
   const isControlled = controlledOpen !== undefined
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
@@ -89,7 +98,7 @@ function Root({
       closingTimerRef.current = null
       if (!isControlled) setInternalOpen(false)
       onOpenChange?.(false)
-    }, closeAnimationDuration)
+    }, DURATION_MS[closeAnimationDuration])
   }, [isControlled, onOpenChange, closeAnimationDuration])
 
   // If controlled open goes false externally, trigger close animation
@@ -137,6 +146,7 @@ function Root({
       value={{
         open: isOpen || closing,
         closing,
+        closeDuration: closeAnimationDuration,
         dismissable,
         requestOpen,
         requestClose,
@@ -174,7 +184,16 @@ interface PortalProps {
 }
 
 function Portal({children, size = 'md'}: PortalProps) {
-  const {open, closing, dismissable, requestClose, titleId, descriptionId, popupRef} = useDialog()
+  const {
+    open,
+    closing,
+    closeDuration,
+    dismissable,
+    requestClose,
+    titleId,
+    descriptionId,
+    popupRef,
+  } = useDialog()
 
   const handleBackdropClick = useCallback(() => {
     if (dismissable) {
@@ -191,6 +210,7 @@ function Portal({children, size = 'md'}: PortalProps) {
         style={[
           styles.backdrop,
           closing && styles.backdropClosing,
+          closing && closeDurationMap[closeDuration],
           !closing && styles.backdropOpen,
         ]}
         aria-hidden
@@ -209,6 +229,7 @@ function Portal({children, size = 'md'}: PortalProps) {
             styles.popup,
             styles[size],
             closing && styles.popupClosing,
+            closing && closeDurationMap[closeDuration],
             !closing && styles.popupOpen,
           ]}
         >

package/src/components/Dialog/styles.css.ts

@@ -19,7 +19,7 @@ export const styles = css.create({
       from: {opacity: 0},
       to: {opacity: 1},
     }),
-    animationDuration: '180ms',
+    animationDuration: duration.base,
     animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
@@ -29,7 +29,7 @@ export const styles = css.create({
       from: {opacity: 1},
       to: {opacity: 0},
     }),
-    animationDuration: '140ms',
+    animationDuration: duration.fast,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
@@ -75,7 +75,7 @@ export const styles = css.create({
         transform: 'scale(1) translateY(0)',
       },
     }),
-    animationDuration: '180ms',
+    animationDuration: duration.base,
     animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
@@ -91,11 +91,19 @@ export const styles = css.create({
         transform: 'scale(0.97) translateY(8px)',
       },
     }),
-    animationDuration: '140ms',
+    animationDuration: duration.fast,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
+  // --- Close-duration overrides ---
+  // The closeAnimationDuration prop token drives both these and the unmount
+  // timeout, so the exit animation can never race the unmount.
+  closeDurationInstant: {animationDuration: duration.instant},
+  closeDurationFast: {animationDuration: duration.fast},
+  closeDurationBase: {animationDuration: duration.base},
+  closeDurationSlow: {animationDuration: duration.slow},
+
   // --- Sizes ---
   sm: {maxWidth: 400},
   md: {maxWidth: 520},

package/src/components/Drawer/Drawer.tsx

@@ -10,6 +10,7 @@ import {
   useRef,
 } from 'react'
 import {html} from 'react-strict-dom'
+import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
 import {useSwipeDismiss} from './useSwipeDismiss'
 
@@ -18,11 +19,19 @@ import {useSwipeDismiss} from './useSwipeDismiss'
 export type DrawerAnchor = 'right' | 'left' | 'bottom'
 export type DrawerSize = 'sm' | 'md' | 'lg'
 
+const closeDurationMap = {
+  instant: styles.closeDurationInstant,
+  fast: styles.closeDurationFast,
+  base: styles.closeDurationBase,
+  slow: styles.closeDurationSlow,
+} as const satisfies Record<DurationToken, unknown>
+
 // --- Context ---
 
 interface DrawerContextValue {
   open: boolean
   closing: boolean
+  closeDuration: DurationToken
   anchor: DrawerAnchor
   dismissable: boolean
   swipeDismiss: boolean
@@ -59,8 +68,8 @@ interface RootProps {
   dismissable?: boolean
   /** Whether swipe gesture dismisses the drawer. Default: true */
   swipeDismiss?: boolean
-  /** Duration of the close animation in ms. Default: 160 */
-  closeAnimationDuration?: number
+  /** Motion token for the close animation. Default: 'fast' (150ms) */
+  closeAnimationDuration?: DurationToken
 }
 
 function Root({
@@ -71,7 +80,7 @@ function Root({
   anchor = 'right',
   dismissable = true,
   swipeDismiss = true,
-  closeAnimationDuration = 160,
+  closeAnimationDuration = 'fast',
 }: RootProps) {
   const isControlled = controlledOpen !== undefined
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
@@ -101,7 +110,7 @@ function Root({
       closingTimerRef.current = null
       if (!isControlled) setInternalOpen(false)
       onOpenChange?.(false)
-    }, closeAnimationDuration)
+    }, DURATION_MS[closeAnimationDuration])
   }, [isControlled, onOpenChange, closeAnimationDuration])
 
   const requestCloseImmediate = useCallback(() => {
@@ -152,6 +161,7 @@ function Root({
       value={{
         open: isOpen || closing,
         closing,
+        closeDuration: closeAnimationDuration,
         anchor,
         dismissable,
         swipeDismiss,
@@ -210,6 +220,7 @@ function Portal({children, size = 'md'}: PortalProps) {
   const {
     open,
     closing,
+    closeDuration,
     anchor,
     dismissable,
     swipeDismiss: swipeEnabled,
@@ -245,6 +256,7 @@ function Portal({children, size = 'md'}: PortalProps) {
         style={[
           styles.backdrop,
           closing && styles.backdropClosing,
+          closing && closeDurationMap[closeDuration],
           !closing && styles.backdropOpen,
         ]}
         aria-hidden
@@ -266,6 +278,7 @@ function Portal({children, size = 'md'}: PortalProps) {
             !isHorizontal && styles.panelVertical,
             anchor === 'left' && styles.panelLeftBorder,
             closing && slideOutMap[anchor],
+            closing && closeDurationMap[closeDuration],
             !closing && slideInMap[anchor],
           ]}
         >

package/src/components/Drawer/styles.css.ts

@@ -27,7 +27,7 @@ export const styles = css.create({
       from: {opacity: 1},
       to: {opacity: 0},
     }),
-    animationDuration: '160ms',
+    animationDuration: duration.fast,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
@@ -114,7 +114,7 @@ export const styles = css.create({
       from: {transform: 'translateX(0)'},
       to: {transform: 'translateX(100%)'},
     }),
-    animationDuration: '160ms',
+    animationDuration: duration.fast,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
@@ -134,7 +134,7 @@ export const styles = css.create({
       from: {transform: 'translateX(0)'},
       to: {transform: 'translateX(-100%)'},
     }),
-    animationDuration: '160ms',
+    animationDuration: duration.fast,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
@@ -154,11 +154,19 @@ export const styles = css.create({
       from: {transform: 'translateY(0)'},
       to: {transform: 'translateY(100%)'},
     }),
-    animationDuration: '160ms',
+    animationDuration: duration.fast,
     animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
+  // --- Close-duration overrides ---
+  // The closeAnimationDuration prop token drives both these and the unmount
+  // timeout, so the exit animation can never race the unmount.
+  closeDurationInstant: {animationDuration: duration.instant},
+  closeDurationFast: {animationDuration: duration.fast},
+  closeDurationBase: {animationDuration: duration.base},
+  closeDurationSlow: {animationDuration: duration.slow},
+
   // --- Header ---
   header: {
     display: 'flex',

package/src/components/EmptyState/EmptyState.meta.ts

@@ -11,7 +11,7 @@ export const meta: ComponentMeta = {
   whenNotToUse: ['Loading states — use Spinner', 'Error states — use Alert or Callout'],
   example: `<Card>
   <EmptyState
-    icon={<Icon name="info-circle" size={48} />}
+    icon={<Icon name="info-circle" size="xxl" />}
     message="No results found"
     action={<Button variant="secondary">Clear filters</Button>}
   />

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
 export const WithIcon: Story = {
   args: {
     message: 'Nothing to show here',
-    icon: <StatusIcon name="forbidden" variant="muted" size={48} />,
+    icon: <StatusIcon name="forbidden" variant="muted" size="xxl" />,
   },
   play: async ({canvas}) => {
     await expect(canvas.getByText('Nothing to show here')).toBeInTheDocument()
@@ -44,7 +44,7 @@ export const WithAction: Story = {
 export const WithIconAndAction: Story = {
   args: {
     message: 'Your inbox is empty',
-    icon: <StatusIcon name="check-done" variant="success" size={48} />,
+    icon: <StatusIcon name="check-done" variant="success" size="xxl" />,
     action: <Button variant="primary">Refresh</Button>,
   },
   play: async ({canvas}) => {

package/src/components/Fieldset/Fieldset.tsx

@@ -1,8 +1,9 @@
 import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
+import type {SpacingToken} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
 
-export type FieldsetGap = 'xs' | 'sm' | 'ms' | 'md' | 'lg' | 'xl'
+export type FieldsetGap = Exclude<SpacingToken, 'xxl' | 'xxxl'>
 
 const gapMap = {
   xs: styles.gapXs,
@@ -11,7 +12,7 @@ const gapMap = {
   md: styles.gapMd,
   lg: styles.gapLg,
   xl: styles.gapXl,
-} as const
+} as const satisfies Record<FieldsetGap, unknown>
 
 // --- Root ---
 interface RootProps {

package/src/components/Grid/Grid.stories.tsx

@@ -4,6 +4,7 @@ import {Grid} from './Grid'
 import {Stack} from '../Stack/Stack'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {SPACING_KEYS} from '@duro-app/tokens/keys'
 import {useContainerQuery} from '../../hooks/useContainerQuery'
 
 const meta: Meta<typeof Grid> = {
@@ -12,7 +13,7 @@ const meta: Meta<typeof Grid> = {
   argTypes: {
     gap: {
       control: 'select',
-      options: ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+      options: [...SPACING_KEYS],
     },
     columns: {
       control: 'select',

package/src/components/Grid/Grid.tsx

@@ -1,10 +1,10 @@
 import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
-import type {SpacingKey} from '../Stack/Stack'
+import type {SpacingToken} from '@duro-app/tokens/keys'
 
 interface GridProps {
-  gap?: SpacingKey
+  gap?: SpacingToken
   columns?: 1 | 2 | 3 | 4 | 5 | 6
   minColumnWidth?: string
   children: ReactNode
@@ -19,7 +19,7 @@ const gapMap = {
   xl: styles.gapXl,
   xxl: styles.gapXxl,
   xxxl: styles.gapXxxl,
-} as const
+} as const satisfies Record<SpacingToken, unknown>
 
 const columnsMap = {
   1: styles.col1,

package/src/components/Icon/Icon.meta.ts

@@ -16,8 +16,8 @@ export const meta: ComponentMeta = {
     },
   ],
   example: `<Inline gap="sm" align="center">
-  <Icon name="check-circle" size={20} />
-  <Icon name="alert-triangle" size={20} />
-  <Icon name="shield-filled" size={20} />
+  <Icon name="check-circle" size="md" />
+  <Icon name="alert-triangle" size="md" />
+  <Icon name="shield-filled" size="md" />
 </Inline>`,
 }

package/src/components/Icon/Icon.tsx

@@ -1,4 +1,7 @@
 import type {ReactNode} from 'react'
+import {ICON_SIZES, type IconSize} from '@duro-app/tokens/keys'
+
+export type {IconSize}
 
 export type IconName =
   | 'x-circle'
@@ -350,10 +353,12 @@ const filledIcons: Partial<Record<IconName, ReactNode>> = {
 
 interface IconProps {
   name: IconName
-  size?: number
+  /** Token from the icon size scale: sm 16, md 18, lg 24, xl 36, xxl 48. */
+  size?: IconSize
 }
 
-export function Icon({name, size = 24}: IconProps) {
+export function Icon({name, size: sizeToken = 'lg'}: IconProps) {
+  const size = ICON_SIZES[sizeToken]
   const filled = filledIcons[name]
   if (filled) {
     return (

package/src/components/Icon/index.ts

@@ -1,2 +1,2 @@
 export {Icon} from './Icon'
-export type {IconName} from './Icon'
+export type {IconName, IconSize} from './Icon'

package/src/components/Inline/Inline.stories.tsx

@@ -3,6 +3,7 @@ import {css, html} from 'react-strict-dom'
 import {Inline} from './Inline'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {SPACING_KEYS} from '@duro-app/tokens/keys'
 
 const meta: Meta<typeof Inline> = {
   title: 'Layout/Inline',
@@ -10,7 +11,7 @@ const meta: Meta<typeof Inline> = {
   argTypes: {
     gap: {
       control: 'select',
-      options: ['xs', 'sm', 'ms', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+      options: [...SPACING_KEYS],
     },
     align: {
       control: 'select',

package/src/components/Inline/Inline.tsx

@@ -1,10 +1,10 @@
 import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
-import type {SpacingKey} from '../Stack/Stack'
+import type {SpacingToken} from '@duro-app/tokens/keys'
 
 interface InlineProps {
-  gap?: SpacingKey
+  gap?: SpacingToken
   align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch'
   justify?: 'start' | 'center' | 'end' | 'between'
   children: ReactNode
@@ -19,7 +19,7 @@ const gapMap = {
   xl: styles.gapXl,
   xxl: styles.gapXxl,
   xxxl: styles.gapXxxl,
-} as const
+} as const satisfies Record<SpacingToken, unknown>
 
 const alignMap = {
   start: styles.alignStart,

package/src/components/SideNav/SideNav.meta.ts

@@ -26,12 +26,12 @@ export const meta: ComponentMeta = {
   example: `<SideNav.Root defaultValue="identities">
   {/* Default: always-open sections. Nothing is a click away from being seen. */}
   <SideNav.Section label="People & access">
-    <SideNav.Item value="identities" icon={<Icon name="users" size={18} />}>Identities</SideNav.Item>
-    <SideNav.Item value="grants" icon={<Icon name="key" size={18} />}>Grants</SideNav.Item>
+    <SideNav.Item value="identities" icon={<Icon name="users" size="md" />}>Identities</SideNav.Item>
+    <SideNav.Item value="grants" icon={<Icon name="key" size="md" />}>Grants</SideNav.Item>
   </SideNav.Section>
   {/* Disclosure, earned: rarely visited, so it starts collapsed. */}
   <SideNav.Group label="Advanced" defaultExpanded={false}>
-    <SideNav.Item value="plugins" icon={<Icon name="plug" size={18} />}>Plugins</SideNav.Item>
+    <SideNav.Item value="plugins" icon={<Icon name="plug" size="md" />}>Plugins</SideNav.Item>
   </SideNav.Group>
 </SideNav.Root>`,
 }

package/src/components/SideNav/SideNav.stories.tsx

@@ -58,20 +58,20 @@ export const SectionsWithOneDisclosedGroup: Story = {
   render: (args) => (
     <SideNav.Root {...args} defaultValue="identities">
       <SideNav.Section label="People & access">
-        <SideNav.Item value="identities" icon={<Icon name="users" size={18} />}>
+        <SideNav.Item value="identities" icon={<Icon name="users" size="md" />}>
           Identities
         </SideNav.Item>
-        <SideNav.Item value="grants" icon={<Icon name="key" size={18} />}>
+        <SideNav.Item value="grants" icon={<Icon name="key" size="md" />}>
           Grants
         </SideNav.Item>
       </SideNav.Section>
       <SideNav.Section label="Audit">
-        <SideNav.Item value="audit" icon={<Icon name="file-text" size={18} />}>
+        <SideNav.Item value="audit" icon={<Icon name="file-text" size="md" />}>
           Audit log
         </SideNav.Item>
       </SideNav.Section>
       <SideNav.Group label="Advanced">
-        <SideNav.Item value="plugins" icon={<Icon name="plug" size={18} />}>
+        <SideNav.Item value="plugins" icon={<Icon name="plug" size="md" />}>
           Plugins
         </SideNav.Item>
       </SideNav.Group>
@@ -165,18 +165,18 @@ export const FlatWithIcons: Story = {
   render: (args) => (
     <SideNav.Root {...args} defaultValue="grants">
       <SideNav.Section label="People & access">
-        <SideNav.Item value="identities" icon={<Icon name="users" size={18} />}>
+        <SideNav.Item value="identities" icon={<Icon name="users" size="md" />}>
           Identities
         </SideNav.Item>
-        <SideNav.Item value="grants" icon={<Icon name="key" size={18} />}>
+        <SideNav.Item value="grants" icon={<Icon name="key" size="md" />}>
           Grants
         </SideNav.Item>
       </SideNav.Section>
       <SideNav.Section label="Requests & invites">
-        <SideNav.Item value="invitations" icon={<Icon name="mail" size={18} />}>
+        <SideNav.Item value="invitations" icon={<Icon name="mail" size="md" />}>
           Invitations
         </SideNav.Item>
-        <SideNav.Item value="invites" icon={<Icon name="user-plus" size={18} />}>
+        <SideNav.Item value="invites" icon={<Icon name="user-plus" size="md" />}>
           User Invites
         </SideNav.Item>
       </SideNav.Section>