@sanity/ui 3.0.0-static.32 → 3.0.0-static.34

package/src/core/hooks/useMediaIndex/__workshop__/test.tsx

@@ -1,6 +1,6 @@
 import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
 
-export default function TestStory() {
+export default function TestStory(): React.JSX.Element {
   const mediaIndex = useMediaIndex()
 
   return (

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -30,12 +30,17 @@ function _getMediaQuery(media: number[], index: number): MediaQuery {
 
 function _createMediaStore(): _MediaStore {
   const mediaLen = media.length
-  let sizes: {mq: MediaQueryList; index: number}[]
+
+  let sizes: {mq: MediaQueryList; index: number}[] = []
 
   // The _createMediaStore function is called in both server and client environments.
   // However since subscribe and getSnapshot are only called on the client we lazy init what we need for them
   // so that we don't need to run checks for wether it's safe to call `window.matchMedia`
   const getSizes = () => {
+    if (typeof window === 'undefined') {
+      return sizes
+    }
+
     if (!sizes) {
       sizes = []
 

package/src/core/index.ts

@@ -1,13 +1,3 @@
-// compat
-export * from './_compat/helpers'
-export * from './_compat/styles/_responsive'
-export * from './_compat/theme/themeColorProvider'
-export * from './_compat/theme/themeProvider'
-export * from './_compat/theme/types'
-export * from './_compat/theme/useRootTheme'
-export * from './_compat/theme/useTheme'
-export * from './_compat/types'
-
 // components
 export * from './components/autocomplete/autocomplete'
 export * from './components/autocomplete/types'
@@ -44,13 +34,9 @@ export * from './helpers/props'
 export * from './helpers/scroll'
 
 // hooks
-export * from './hooks/useArrayProp'
-export * from './hooks/useClickOutside'
 export * from './hooks/useClickOutsideEvent'
 export * from './hooks/useCustomValidity'
-export * from './hooks/useElementRect/useElementRect'
 export * from './hooks/useElementSize'
-export * from './hooks/useForwardedRef'
 export * from './hooks/useGlobalKeyDown'
 export * from './hooks/useMatchMedia'
 export * from './hooks/useMediaIndex/useMediaIndex'
@@ -70,7 +56,6 @@ export * from './primitives/avatar/avatarStack'
 export * from './primitives/avatar/types'
 export * from './primitives/badge/badge'
 export * from './primitives/box/box'
-export * from './primitives/box/types'
 export * from './primitives/button/button'
 export * from './primitives/button/types'
 export * from './primitives/card/card'
@@ -82,9 +67,7 @@ export * from './primitives/code/code'
 export * from './primitives/container/container'
 export * from './primitives/container/types'
 export * from './primitives/flex/flex'
-export * from './primitives/flex/types'
 export * from './primitives/grid/grid'
-export * from './primitives/grid/types'
 export * from './primitives/heading/heading'
 export * from './primitives/inline/inline'
 export * from './primitives/kbd/kbd'
@@ -98,7 +81,6 @@ export * from './primitives/popover/types'
 export * from './primitives/radio/radio'
 export * from './primitives/select/select'
 export * from './primitives/selectable/selectable'
-export * from './primitives/selectable/types'
 export * from './primitives/skeleton/codeSkeleton'
 export * from './primitives/skeleton/headingSkeleton'
 export * from './primitives/skeleton/labelSkeleton'
@@ -113,7 +95,6 @@ export * from './primitives/textArea/textArea'
 export * from './primitives/textInput/textInput'
 export * from './primitives/tooltip/tooltip'
 export * from './primitives/tooltip/tooltipDelayGroup'
-export * from './primitives/types'
 
 // utils
 export * from './utils/boundaryElement/boundaryElementProvider'
@@ -131,8 +112,4 @@ export * from './Root'
 export * from './RootProvider'
 
 // types
-export * from './types/gridItem'
-export * from './types/placement'
-export * from './types/props'
-export * from './types/radius'
-export * from './types/textAlign'
+export * from './types'

package/src/core/lib/createGlobalScopedContext.ts

@@ -16,7 +16,7 @@ export function createGlobalScopedContext<ContextType, const T extends ContextTy
   /**
    * Enforce that all Symbol.for keys used for globally scoped contexts have a predictable prefix
    */
-  key: `@sanity/ui/context/${string}`,
+  key: `@sanity/ui/v3/${string}`,
   defaultValue: T,
 ): Context<ContextType> {
   const symbol = Symbol.for(key)

package/src/core/lib/globalScope.ts

@@ -16,4 +16,4 @@ function getGlobalScope() {
   throw new Error('@sanity/ui: could not locate global scope')
 }
 
-export const globalScope = getGlobalScope()
+export const globalScope: typeof globalThis = getGlobalScope()

package/src/core/observers/elementSize.ts

@@ -43,7 +43,7 @@ export interface _ElementSizeListener {
 /**
  * @internal
  */
-export const _elementSizeObserver = _createElementSizeObserver()
+export const _elementSizeObserver: _ElementSizeObserver = _createElementSizeObserver()
 
 function _createElementRectValueListener(): _ElementSizeListener {
   return {

package/src/core/primitives/arrow/arrow.tsx

@@ -2,7 +2,7 @@ import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} fr
 import {assignInlineVars} from '@vanilla-extract/dynamic'
 import {useMemo} from 'react'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {compileCommands, getRoundedCommands, type Point} from './cmds'
 
 /** @internal */
@@ -24,7 +24,7 @@ export type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<Ar
 /** @internal */
 export function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
   props: ArrowProps<E>,
-) {
+): React.JSX.Element {
   const {
     as: Element = DEFAULT_ARROW_ELEMENT,
     width: w,

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
-export default function AsButtonStory() {
+export default function AsButtonStory(): React.JSX.Element {
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (

package/src/core/primitives/avatar/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import {type WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/avatar',
   title: 'Avatar',
   stories: [
@@ -26,4 +26,6 @@ export default defineScope({
       component: lazy(() => import('./withinMenuItem')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
-export default function StackStory() {
+export default function StackStory(): React.JSX.Element {
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -1,7 +1,7 @@
 import {Avatar, AvatarStack, Box, Button, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-export default function WithinButtonStory() {
+export default function WithinButtonStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled', false)
 
   return (

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -12,7 +12,7 @@ import {
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-export default function WithinMenuItemStory() {
+export default function WithinMenuItemStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled', false)
 
   return (

package/src/core/primitives/avatar/avatar.tsx

@@ -10,10 +10,10 @@ import type {AvatarColor, AvatarSize, FontLabelSize} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/box'
 import {Label} from '../label/label'
-import type {AvatarPosition, AvatarStatus} from './types'
+import type {AvatarPosition} from './types'
 
 /** @public */
 export const DEFAULT_AVATAR_ELEMENT = 'span'
@@ -29,11 +29,6 @@ export interface AvatarOwnProps {
   onImageLoadError?: (event: Error) => void
   size?: ResponsiveProp<AvatarSize>
   src?: string
-  /**
-   * The status of the entity this Avatar represents.
-   * @deprecated Will be removed in next major version.
-   */
-  status?: AvatarStatus
   title?: string
 }
 
@@ -50,7 +45,7 @@ export type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props
  */
 export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
   props: AvatarProps<E>,
-) {
+): React.JSX.Element {
   const {
     __unstable_hideInnerStroke,
     as: Element = DEFAULT_AVATAR_ELEMENT,
@@ -62,8 +57,6 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    status = 'online',
     size: sizeProp = 1,
     ...rest
   } = props as AvatarProps<typeof DEFAULT_AVATAR_ELEMENT>

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -3,7 +3,7 @@ import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
 import {useMemo} from 'react'
 
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/box'
 import {Label} from '../label/label'
 
@@ -26,7 +26,7 @@ export type AvatarCounterProps<E extends AvatarCounterElementType = AvatarCounte
 /** @public */
 export function AvatarCounter<
   E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
->(props: AvatarCounterProps<E>) {
+>(props: AvatarCounterProps<E>): React.JSX.Element {
   const {
     as = DEFAULT_AVATAR_COUNTER_ELEMENT,
     className,

package/src/core/primitives/avatar/avatarStack.tsx

@@ -3,7 +3,7 @@ import type {AvatarSize} from '@sanity/ui/theme'
 import {Children, cloneElement, Fragment, isValidElement, type ReactElement} from 'react'
 
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box, type BoxOwnProps} from '../box/box'
 import type {AvatarProps} from './avatar'
 import {AvatarCounter} from './avatarCounter'
@@ -22,8 +22,6 @@ export type AvatarStackOwnProps = Omit<
   children: AvatarStackChild | AvatarStackChild[]
   maxLength?: number
   size?: ResponsiveProp<AvatarSize>
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
 }
 
 /** @public */
@@ -38,7 +36,7 @@ export type AvatarStackProps<E extends AvatarStackElementType = AvatarStackEleme
 /** @public */
 export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT>(
   props: AvatarStackProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_AVATAR_STACK_ELEMENT,
     children: childrenProp,

package/src/core/primitives/avatar/types.ts

@@ -1,34 +1,2 @@
-import type {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-
-export {
-  /** @deprecated Use `AvatarSize` from `@sanity/ui/theme' instead. */
-  type AvatarSize,
-} from '@sanity/ui/theme'
-
 /** @public */
 export type AvatarPosition = 'top' | 'bottom' | 'inside'
-
-/** @public */
-// export type AvatarSize = 0 | 1 | 2 | 3
-
-/**
- * @public
- * @deprecated Will be removed in next major version.
- */
-export type AvatarStatus = 'online' | 'editing' | 'inactive'
-
-/**
- * @internal
- * @deprecated This will be removed in next major version.
- */
-export interface AvatarRootStyleProps {
-  $color: ThemeColorAvatarColorKey
-}
-
-/**
- * @internal
- * @deprecated This will be removed in next major version.
- */
-export interface ResponsiveAvatarSizeStyleProps {
-  $size: AvatarSize[]
-}

package/src/core/primitives/badge/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/badge',
   title: 'Badge',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./tones')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/badge/__workshop__/props.tsx

@@ -3,7 +3,7 @@ import {useAction, useSelect, useText} from '@sanity/ui-workshop'
 
 import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
   const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')

package/src/core/primitives/badge/__workshop__/tones.tsx

@@ -1,11 +1,11 @@
 import {Badge, Flex} from '@sanity/ui'
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {ELEMENT_TONES} from '@sanity/ui/theme'
 
-export default function Tones() {
+export default function Tones(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Flex align="center" direction="column" gap={2}>
-        {THEME_COLOR_STATE_TONES.map((tone) => (
+        {ELEMENT_TONES.map((tone) => (
           <Badge key={tone} tone={tone}>
             {tone}
           </Badge>

package/src/core/primitives/badge/badge.test.tsx

@@ -1,7 +1,8 @@
 import {describe, expect, it} from 'vitest'
 import {axe} from 'vitest-axe'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {Badge} from './badge'
 
 describe('atoms/badge', () => {

package/src/core/primitives/badge/badge.tsx

@@ -1,21 +1,20 @@
-import type {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {badge} from '@sanity/ui/css'
-import type {FontTextSize} from '@sanity/ui/theme'
+import {
+  badge,
+  type BadgeStyleProps,
+  type FlexStyleProps,
+  type PaddingStyleProps,
+  type RadiusStyleProps,
+} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/box'
 import {Text} from '../text/text'
-import type {BadgeTone} from './types'
 
 /** @public */
 export const DEFAULT_BADGE_ELEMENT = 'span'
 
 /** @public */
-export type BadgeOwnProps = PaddingStyleProps &
-  RadiusStyleProps & {
-    fontSize?: ResponsiveProp<FontTextSize>
-    tone?: BadgeTone
-  }
+export type BadgeOwnProps = BadgeStyleProps & FlexStyleProps & PaddingStyleProps & RadiusStyleProps
 
 /** @public */
 export type BadgeElementType = 'div' | 'span' | ComponentType
@@ -30,11 +29,12 @@ export type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<Ba
  */
 export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
   props: BadgeProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_BADGE_ELEMENT,
     children,
     className,
+    flex = 'none',
     fontSize = 1,
     padding = 1,
     radius = 2,
@@ -48,6 +48,7 @@ export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>
       {...rest}
       as={as}
       className={badge({className, tone})}
+      flex={flex}
       display="flex"
       maxWidth="fill"
       padding={padding}

package/src/core/primitives/box/__workshop__/index.ts

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/box',
   title: 'Box',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./responsive')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/box/__workshop__/props.tsx

@@ -3,7 +3,7 @@ import {useAction, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
 
   return (

package/src/core/primitives/box/__workshop__/responsive.tsx

@@ -1,7 +1,7 @@
 import {Box, Text} from '@sanity/ui'
 import {vars} from '@sanity/ui/css'
 
-export default function ResponsiveStory() {
+export default function ResponsiveStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <Box

package/src/core/primitives/box/box.tsx

@@ -1,18 +1,12 @@
-import type {
-  BoxStyleProps,
-  GapStyleProps,
-  InsetStyleProps,
-  PositionStyleProps,
-} from '@sanity/ui/css'
-import {box} from '@sanity/ui/css'
+import {box, type BoxStyleProps} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_BOX_ELEMENT = 'div'
 
 /** @public */
-export type BoxOwnProps = BoxStyleProps & GapStyleProps & InsetStyleProps & PositionStyleProps
+export type BoxOwnProps = BoxStyleProps
 
 /** @public */
 export type BoxElementType =
@@ -55,13 +49,15 @@ export type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnPr
  *
  * @public
  */
-export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props: BoxProps<E>) {
+export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
+  props: BoxProps<E>,
+): React.JSX.Element {
   const {
     alignItems,
     as: Element = DEFAULT_BOX_ELEMENT,
-    autoCols,
-    autoFlow,
-    autoRows,
+    // autoCols,
+    // autoFlow,
+    // autoRows,
     border = false,
     borderTop,
     borderRight,
@@ -69,10 +65,10 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     borderLeft,
     className,
     children,
-    column,
-    columnStart,
-    columnEnd,
-    columns,
+    // column,
+    // columnStart,
+    // columnEnd,
+    // columns,
     display = 'block',
     flex,
     flexDirection,
@@ -123,10 +119,10 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     pointerEvents,
     position,
     radius,
-    row,
-    rows,
-    rowStart,
-    rowEnd,
+    // row,
+    // rows,
+    // rowStart,
+    // rowEnd,
     shadow,
     sizing = 'border',
     textAlign,
@@ -141,18 +137,18 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
       className={box({
         className,
         alignItems,
-        autoCols,
-        autoFlow,
-        autoRows,
+        // autoCols,
+        // autoFlow,
+        // autoRows,
         border,
         borderTop,
         borderRight,
         borderBottom,
         borderLeft,
-        column,
-        columnStart,
-        columnEnd,
-        columns,
+        // column,
+        // columnStart,
+        // columnEnd,
+        // columns,
         display,
         flex,
         flexDirection,
@@ -203,10 +199,10 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
         pointerEvents,
         position,
         radius,
-        row,
-        rows,
-        rowStart,
-        rowEnd,
+        // row,
+        // rows,
+        // rowStart,
+        // rowEnd,
         shadow,
         sizing,
         textAlign,

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -1,13 +1,13 @@
 import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {BUTTON_MODES, ELEMENT_TONES} from '@sanity/ui/theme'
 
-export default function CustomStory() {
+export default function CustomStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Stack gap={2}>
-        {THEME_COLOR_BUTTON_MODES.map((mode) => (
-          <Grid columns={7} gap={1} key={mode}>
-            {THEME_COLOR_STATE_TONES.map((tone) => (
+        {BUTTON_MODES.map((mode) => (
+          <Grid gridTemplateColumns={7} gap={1} key={mode}>
+            {ELEMENT_TONES.map((tone) => (
               <Button key={tone} mode={mode} padding={3} tone={tone}>
                 <Stack gap={2}>
                   <Text>Text</Text>

package/src/core/primitives/button/__workshop__/customIcons.tsx

@@ -1,7 +1,7 @@
 import {RocketIcon} from '@sanity/icons'
 import {Button, Flex, Inline} from '@sanity/ui'
 
-export default function CustomIconsStory() {
+export default function CustomIconsStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <Inline gap={1}>

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -10,14 +10,14 @@ const DEFAULT_PROPS = {
   iconRight: SquareIcon,
 } as const
 
-export default function DisabledButtonStory() {
+export default function DisabledButtonStory(): React.JSX.Element {
   const muted = useBoolean('Muted', false)
 
   return (
     <Card padding={5}>
       <Container width={2}>
         <Stack gap={4}>
-          <Grid columns={COLUMNS} gap={GAP}>
+          <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
             <Text size={1} weight="semibold">
               Default
             </Text>
@@ -30,7 +30,7 @@ export default function DisabledButtonStory() {
           </Grid>
 
           <Stack gap={2}>
-            <Grid columns={COLUMNS} gap={GAP}>
+            <Grid gridTemplateColumns={COLUMNS} gap={GAP}>
               <Stack gap={2}>
                 <Button {...DEFAULT_PROPS} mode="default" muted={muted} text="Enabled" />
                 <Button {...DEFAULT_PROPS} disabled mode="default" muted={muted} text="Disabled" />