@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

package/src/theme/build/resolveColorTokens.ts

@@ -1,11 +1,9 @@
-import {COLOR_HUES, ColorHueKey} from '@sanity/color'
+import {ColorHueKey} from '@sanity/color'
 import {
   ColorConfigCardTone,
   ColorConfigInputMode,
   ColorConfigInputState,
   ColorConfigStateTone,
-  ThemeColorAvatarTokens,
-  ThemeColorBadgeTokens,
   ThemeColorBaseTokens,
   ThemeColorButtonTokens,
   ThemeColorInputStateTokens,
@@ -66,22 +64,44 @@ function resolveBaseColorTones(
   return {
     ...spec,
     _hue: hue,
-    avatar: COLOR_HUES.reduce((acc, hue) => {
-      return {
-        ...acc,
-        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
-      }
-    }, {} as ThemeColorAvatarTokens),
-    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-      return {
-        ...acc,
-        [tone]: {
-          _hue: inputTokens?.base?.[tone]?._hue || hue,
-          ...spec.badge?.['*'],
-          ...spec.badge?.[tone],
-        },
-      }
-    }, {} as ThemeColorBadgeTokens),
+    avatar: {
+      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
+      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
+      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
+      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
+      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
+      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
+      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
+      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
+      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
+    },
+    badge: {
+      default: {
+        _hue: inputTokens?.base?.default?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.default,
+      },
+      primary: {
+        _hue: inputTokens?.base?.primary?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.primary,
+      },
+      positive: {
+        _hue: inputTokens?.base?.positive?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.positive,
+      },
+      caution: {
+        _hue: inputTokens?.base?.caution?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.caution,
+      },
+      critical: {
+        _hue: inputTokens?.base?.critical?._hue || hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.critical,
+      },
+    },
   }
 }
 
@@ -142,22 +162,44 @@ function resolveButtonStateColorTokens(
   return {
     ...spec,
     _hue: hue,
-    avatar: COLOR_HUES.reduce((acc, hue) => {
-      return {
-        ...acc,
-        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
-      }
-    }, {} as ThemeColorAvatarTokens),
-    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-      return {
-        ...acc,
-        [tone]: {
-          _hue: inputTokens?.base?.[tone]?._hue || hue,
-          ...spec.badge?.['*'],
-          ...spec.badge?.[tone],
-        },
-      }
-    }, {} as ThemeColorBadgeTokens),
+    avatar: {
+      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
+      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
+      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
+      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
+      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
+      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
+      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
+      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
+      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
+    },
+    badge: {
+      default: {
+        _hue: inputTokens?.base?.default?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.default,
+      },
+      primary: {
+        _hue: inputTokens?.base?.primary?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.primary,
+      },
+      positive: {
+        _hue: inputTokens?.base?.positive?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.positive,
+      },
+      caution: {
+        _hue: inputTokens?.base?.caution?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.caution,
+      },
+      critical: {
+        _hue: inputTokens?.base?.critical?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.critical,
+      },
+    },
   }
 }
 
@@ -247,21 +289,43 @@ function resolveSelectableStateColorTokens(
   return {
     ...spec,
     _hue: hue,
-    avatar: COLOR_HUES.reduce((acc, hue) => {
-      return {
-        ...acc,
-        [hue]: merge({_hue: hue}, spec.avatar?.['*'], spec.avatar?.[hue]),
-      }
-    }, {} as ThemeColorAvatarTokens),
-    badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-      return {
-        ...acc,
-        [tone]: {
-          _hue: inputTokens?.base?.[tone]?._hue || hue,
-          ...spec.badge?.['*'],
-          ...spec.badge?.[tone],
-        },
-      }
-    }, {} as ThemeColorBadgeTokens),
+    avatar: {
+      gray: merge({_hue: 'gray'}, spec.avatar?.['*'], spec.avatar?.gray),
+      blue: merge({_hue: 'blue'}, spec.avatar?.['*'], spec.avatar?.blue),
+      purple: merge({_hue: 'purple'}, spec.avatar?.['*'], spec.avatar?.purple),
+      magenta: merge({_hue: 'magenta'}, spec.avatar?.['*'], spec.avatar?.magenta),
+      red: merge({_hue: 'red'}, spec.avatar?.['*'], spec.avatar?.red),
+      orange: merge({_hue: 'orange'}, spec.avatar?.['*'], spec.avatar?.orange),
+      yellow: merge({_hue: 'yellow'}, spec.avatar?.['*'], spec.avatar?.yellow),
+      green: merge({_hue: 'green'}, spec.avatar?.['*'], spec.avatar?.green),
+      cyan: merge({_hue: 'cyan'}, spec.avatar?.['*'], spec.avatar?.cyan),
+    },
+    badge: {
+      default: {
+        _hue: inputTokens?.base?.default?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.default,
+      },
+      primary: {
+        _hue: inputTokens?.base?.primary?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.primary,
+      },
+      positive: {
+        _hue: inputTokens?.base?.positive?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.positive,
+      },
+      caution: {
+        _hue: inputTokens?.base?.caution?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.caution,
+      },
+      critical: {
+        _hue: inputTokens?.base?.critical?._hue,
+        ...spec.badge?.['*'],
+        ...spec.badge?.critical,
+      },
+    },
   }
 }

package/src/theme/config/tokens/color/types.ts

@@ -1,5 +1,5 @@
 import {ColorHueKey} from '@sanity/color'
-import {ThemeColorSyntax, ThemeColorButtonModeKey, ThemeColorStateToneKey} from '../../../system'
+import {ThemeColorSyntax, ThemeColorButtonModeKey} from '../../../system'
 import {
   ColorBlendModeTokenValue,
   ColorConfigCardTone,
@@ -32,6 +32,15 @@ export interface ThemeColorAvatarTokens {
   'cyan'?: ThemeColorAvatarHueTokens
 }
 
+/** @public */
+export interface ThemeColorBadgeTokens {
+  _hue?: ColorHueKey
+  bg?: ThemeColorTokenValue
+  fg?: ThemeColorTokenValue
+  dot?: ThemeColorTokenValue
+  icon?: ThemeColorTokenValue
+}
+
 /** @public */
 export interface ThemeColorBaseTokens extends ThemeColorStateTokens {
   focusRing?: ThemeColorTokenValue
@@ -55,9 +64,14 @@ export interface ThemeColorBadgeToneTokens {
 }
 
 /** @public */
-export type ThemeColorBadgeTokens = Partial<
-  Record<'*' | ThemeColorStateToneKey, ThemeColorBadgeToneTokens>
->
+export interface ThemeColorBadgeTokens {
+  '*'?: ThemeColorBadgeToneTokens
+  'default'?: ThemeColorBadgeToneTokens
+  'primary'?: ThemeColorBadgeToneTokens
+  'positive'?: ThemeColorBadgeToneTokens
+  'caution'?: ThemeColorBadgeToneTokens
+  'critical'?: ThemeColorBadgeToneTokens
+}
 
 /** @public */
 export interface ThemeColorStateTokens {

package/src/theme/defaults/colorTokens.ts

@@ -22,9 +22,6 @@ export const defaultColorTokens: ThemeColorTokens = {
           icon: ['500', '500'],
           dot: ['500', '500'],
         },
-        'default': {
-          _hue: 'gray',
-        },
         'positive': {
           bg: ['200 50%', '900'],
           fg: ['600', '500'],
@@ -41,7 +38,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['600', '400'],
       },
       fg: ['800', '200'],
-      focusRing: ['purple/500', 'purple/500'],
+      focusRing: ['blue/500', 'blue/500'],
       icon: ['600', '400'],
       kbd: {
         bg: ['white', 'black'],
@@ -49,7 +46,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         border: ['200', '800'],
       },
       link: {
-        fg: ['purple/600', 'purple/300'],
+        fg: ['blue/600', 'blue/300'],
       },
       muted: {
         bg: ['50', '950'],
@@ -76,7 +73,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         fg: ['600', '400'],
       },
     },
-    'primary': {_hue: 'purple'},
+    'primary': {_hue: 'blue'},
     'positive': {
       _hue: 'green',
       shadow: {outline: ['500/0.4', '500/0.4']},
@@ -86,8 +83,6 @@ export const defaultColorTokens: ThemeColorTokens = {
       shadow: {outline: ['600/0.3', '500/0.4']},
     },
     'critical': {_hue: 'red'},
-    'prospect': {_hue: 'purple'},
-    'explore': {_hue: 'cyan'},
   },
   button: {
     default: {
@@ -126,7 +121,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['800', '200'],
           },
           link: {
-            fg: ['purple/200', 'purple/600'],
+            fg: ['blue/200', 'blue/600'],
           },
           muted: {
             bg: ['950', '50'],
@@ -249,7 +244,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['200', '800'],
           },
           link: {
-            fg: ['purple/700 60%', 'purple/300 60%'],
+            fg: ['blue/700 60%', 'blue/300 60%'],
           },
           muted: {
             bg: ['100', '950'],
@@ -360,7 +355,7 @@ export const defaultColorTokens: ThemeColorTokens = {
             border: ['200', '800'],
           },
           link: {
-            fg: ['purple/700 70%', 'purple/300 70%'],
+            fg: ['blue/700 70%', 'blue/300 70%'],
           },
           muted: {
             bg: ['100', '950'],
@@ -373,8 +368,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         'hovered': {
           bg: ['50', '950'],
-          fg: ['800', '200'],
-          icon: ['800 70%', '300 70%'],
+          icon: ['700 70%', '400 70%'],
         },
         'pressed': {
           bg: ['100', '900'],
@@ -498,7 +492,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           border: ['200', '800'],
         },
         link: {
-          fg: ['purple/700 70%', 'purple/300 70%'],
+          fg: ['blue/700 70%', 'blue/300 70%'],
         },
         muted: {
           bg: ['50', '950'],
@@ -513,7 +507,6 @@ export const defaultColorTokens: ThemeColorTokens = {
         bg: ['50', '950'],
       },
       'pressed': {
-        // _hue: 'purple',
         bg: ['100', '900'],
       },
       'selected': {
@@ -550,7 +543,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           border: ['800', '200'],
         },
         link: {
-          fg: ['purple/200', 'purple/600'],
+          fg: ['blue/200', 'blue/600'],
         },
         muted: {
           bg: ['500 10%', '400 10%'],
@@ -605,7 +598,7 @@ export const defaultColorTokens: ThemeColorTokens = {
     },
     'default': {
       selected: {
-        _hue: 'purple',
+        _hue: 'blue',
       },
     },
     'critical': {

package/src/theme/defaults/config.ts

@@ -31,7 +31,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     popover: {zOffset: 400},
     tooltip: {zOffset: 200},
   },
-  radius: [0, 1, 3, 6, 9, 12, 21],
+  radius: [0, 1, 5, 9, 13, 21, 33],
   shadow: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},

package/src/theme/getScopedTheme.ts

@@ -1,12 +1,5 @@
 import {defaultThemeConfig} from './defaults/config'
-import {
-  RootTheme,
-  RootTheme_v2,
-  Theme,
-  ThemeColor,
-  ThemeColorCardToneKey,
-  ThemeColorSchemeKey,
-} from './system'
+import {RootTheme, RootTheme_v2, Theme, ThemeColorCardToneKey, ThemeColorSchemeKey} from './system'
 import {is_v2, v0_v2, v2_v0} from './versioning'
 
 // cache[scheme][tone][rootTheme] = theme
@@ -29,7 +22,7 @@ export function getScopedTheme(
   const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp)
 
   const colorScheme_v0 = v0.color[scheme] || v0.color.light
-  const color_v0 = (colorScheme_v0 as Record<string, ThemeColor>)[tone] || colorScheme_v0.default
+  const color_v0 = colorScheme_v0[tone] || colorScheme_v0.default
   const layer_v0 = v0.layer || defaultThemeConfig.layer
 
   const colorScheme_v2 = v2.color[scheme] || v2.color.light

package/src/theme/system/_constants.ts

@@ -0,0 +1,25 @@
+/** @public */
+export const AVATAR_SIZE = [0, 1, 2, 3] as const
+
+/** @public */
+export const CONTAINER = [0, 1, 2, 3, 4, 5] as const
+
+/** @public */
+export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full'] as const
+
+/** @public */
+export const SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
+
+/** @public */
+export const FONT_CODE_SIZE = [0, 1, 2, 3, 4, 5] as const
+
+/** @public */
+export const FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6] as const
+
+/** @public */
+export const FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5, 6] as const
+
+/** @public */
+export const FONT_TEXT_SIZE = [0, 1, 2, 3, 4, 5] as const
+
+export const SHADOW = [0, 1, 2, 3, 4, 5] as const

package/src/theme/system/_types.ts

@@ -0,0 +1,41 @@
+import {
+  AVATAR_SIZE,
+  CONTAINER,
+  FONT_CODE_SIZE,
+  FONT_HEADING_SIZE,
+  FONT_LABEL_SIZE,
+  FONT_TEXT_SIZE,
+  RADIUS,
+  SHADOW,
+  SPACE,
+} from './_constants'
+
+/** @public */
+export type AvatarSize = (typeof AVATAR_SIZE)[number]
+
+/** @public */
+export type ContainerWidth = (typeof CONTAINER)[number] | 'auto'
+
+/** @public */
+export type Radius = (typeof RADIUS)[number] | 'full'
+
+/** @public */
+export type Space = (typeof SPACE)[number]
+
+/** @public */
+export type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'
+
+/** @public */
+export type FontCodeSize = (typeof FONT_CODE_SIZE)[number]
+
+/** @public */
+export type FontHeadingSize = (typeof FONT_HEADING_SIZE)[number]
+
+/** @public */
+export type FontLabelSize = (typeof FONT_LABEL_SIZE)[number]
+
+/** @public */
+export type FontTextSize = (typeof FONT_TEXT_SIZE)[number]
+
+/** @public */
+export type Shadow = (typeof SHADOW)[number]

package/src/theme/system/color/_constants.ts

@@ -14,10 +14,6 @@ export const THEME_COLOR_CARD_TONES = [
   'positive',
   'caution',
   'critical',
-
-  // new
-  'prospect',
-  'explore',
 ] as const
 
 /** @public */
@@ -27,10 +23,6 @@ export const THEME_COLOR_STATE_TONES = [
   'positive',
   'caution',
   'critical',
-
-  // new
-  'prospect',
-  'explore',
 ] as const
 
 /** @public */

package/src/theme/system/color/badge.ts

@@ -1,5 +1,3 @@
-import {ThemeColorStateToneKey} from './_system'
-
 /**
  * @public
  */
@@ -13,4 +11,10 @@ export interface ThemeColorBadgeTone_v2 {
 /**
  * @public
  */
-export type ThemeColorBadge_v2 = Record<ThemeColorStateToneKey, ThemeColorBadgeTone_v2>
+export interface ThemeColorBadge_v2 {
+  default: ThemeColorBadgeTone_v2
+  primary: ThemeColorBadgeTone_v2
+  positive: ThemeColorBadgeTone_v2
+  caution: ThemeColorBadgeTone_v2
+  critical: ThemeColorBadgeTone_v2
+}

package/src/theme/system/index.ts

@@ -1,5 +1,7 @@
 export * from './v0'
 
+export * from './_constants'
+export * from './_types'
 export * from './avatar'
 export * from './color'
 export * from './css'

package/src/theme/system/v0/color/_system.ts

@@ -1,17 +1,13 @@
+import {ThemeColorCardToneKey} from '../../color/_system'
+
 /**
  * @public
  * @deprecated Use `ThemeColorCardToneKey` instead.
  */
-export type ThemeColorName =
-  | 'transparent'
-  | 'default'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
+export type ThemeColorName = ThemeColorCardToneKey
 
 /**
  * @public
  * @deprecated Use `ThemeColorCardToneKey` instead.
  */
-export type ThemeColorToneKey = ThemeColorName
+export type ThemeColorToneKey = ThemeColorCardToneKey

package/src/theme/system/v0/color/color.ts

@@ -1,6 +1,5 @@
-import {ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
+import {ThemeColorCardToneKey, ThemeColorSchemeKey, ThemeColorSyntax} from '../../color'
 import {ThemeColorGenericState} from './_generic'
-import {ThemeColorName} from './_system'
 import {ThemeColorBase} from './base'
 import {ThemeColorButton} from './button'
 import {ThemeColorCard} from './card'
@@ -31,7 +30,7 @@ export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'
  * @public
  * @deprecated Use `ThemeColorScheme_v2` instead.
  */
-export type ThemeColorScheme = Record<ThemeColorName, ThemeColor>
+export type ThemeColorScheme = Record<ThemeColorCardToneKey, ThemeColor>
 
 /**
  * @public

package/src/theme/versioning/themeColor_v0_v2.ts

@@ -103,20 +103,6 @@ function stateTonesThemeColor_v0_v2(
       selected: stateThemeColor_v0_v2(v0, t.critical.selected),
       disabled: stateThemeColor_v0_v2(v0, t.critical.disabled),
     },
-    prospect: {
-      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.default.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
-    },
-    explore: {
-      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.default.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.default.disabled),
-    },
   }
 }
 
@@ -192,18 +178,6 @@ function stateThemeColor_v0_v2(v0: ThemeColor, state: ThemeColorGenericState): T
         dot: v0.muted.critical.enabled.muted.fg,
         icon: v0.muted.critical.enabled.muted.fg,
       },
-      prospect: {
-        bg: v0.muted.default.enabled.bg,
-        fg: v0.muted.default.enabled.fg,
-        dot: v0.muted.default.enabled.muted.fg,
-        icon: v0.muted.default.enabled.muted.fg,
-      },
-      explore: {
-        bg: v0.muted.default.enabled.bg,
-        fg: v0.muted.default.enabled.fg,
-        dot: v0.muted.default.enabled.muted.fg,
-        icon: v0.muted.default.enabled.muted.fg,
-      },
     },
     kbd: {
       bg: v0.muted.default.enabled.bg,

package/src/theme/versioning/v0_v2.ts

@@ -48,8 +48,6 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
         positive: themeColor_v0_v2(color.light.positive),
         caution: themeColor_v0_v2(color.light.caution),
         critical: themeColor_v0_v2(color.light.critical),
-        prospect: themeColor_v0_v2(color.light.default),
-        explore: themeColor_v0_v2(color.light.default),
       },
       dark: {
         transparent: themeColor_v0_v2(color.dark.transparent),
@@ -58,8 +56,6 @@ export function v0_v2(v0: RootTheme): RootTheme_v2 {
         positive: themeColor_v0_v2(color.dark.positive),
         caution: themeColor_v0_v2(color.dark.caution),
         critical: themeColor_v0_v2(color.dark.critical),
-        prospect: themeColor_v0_v2(color.dark.default),
-        explore: themeColor_v0_v2(color.dark.default),
       },
     },
     container,

package/src/core/components/breadcrumbs/__workshop__/buttons.tsx

@@ -1,58 +0,0 @@
-import {ChevronRightIcon} from '@sanity/icons'
-import {Box, Breadcrumbs, Button, Card, Flex, Text} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-
-const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
-  '(none)': 0,
-  '1': 1,
-  '2': 2,
-  '3': 3,
-  '4': 4,
-  '5': 5,
-  '6': 6,
-  '7': 7,
-}
-
-export default function Example() {
-  const maxLength =
-    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Card padding={1} radius={3} shadow={1}>
-        <Breadcrumbs
-          gapX={0}
-          expandButton={{padding: 2}}
-          maxLength={maxLength}
-          separator={
-            <Box paddingY={2} style={{opacity: 0.5}}>
-              <Text muted size={1}>
-                <ChevronRightIcon />
-              </Text>
-            </Box>
-          }
-          // space={0}
-        >
-          <Button href="#" mode="bleed" padding={2} text="Root" />
-          <Button href="#" mode="bleed" padding={2} text="Category A of some length" />
-          <Button href="#" mode="bleed" padding={2} text="Category B" />
-          <Button href="#" mode="bleed" padding={2} text="Category C" />
-          <Button
-            href="#"
-            mode="bleed"
-            padding={2}
-            text="Category D of an every larger and more extended length"
-            textOverflow="none"
-          />
-          <Button href="#" mode="bleed" padding={2} text="Category E" />
-          <Button href="#" mode="bleed" padding={2} text="Category F" />
-          <Box padding={2}>
-            <Text size={1} weight="semibold">
-              Item
-            </Text>
-          </Box>
-        </Breadcrumbs>
-      </Card>
-    </Flex>
-  )
-}