@sanity/ui 3.0.0-static.26 → 3.0.0-static.28

package/src/core/primitives/popover/popover.tsx

@@ -25,11 +25,15 @@ import {
 } from 'react'
 
 import {Z_OFFSETS} from '../../constants'
-import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {origin} from '../../middleware/origin'
-import type {ComponentType, Placement, PopoverMargins, Props} from '../../types'
-import {type LayerOwnProps, Portal, useBoundaryElement, useLayer} from '../../utils'
+import type {Placement} from '../../types/placement'
+import type {ComponentType, Props} from '../../types/props'
+import {useBoundaryElement} from '../../utils/boundaryElement'
+import {Portal} from '../../utils/portal'
 import {CardProvider, useCard} from '../card'
+import {type LayerOwnProps, useLayer} from '../layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_POPOVER_DISTANCE,
@@ -38,7 +42,7 @@ import {
 } from './constants'
 import {size} from './floating-ui/size'
 import {PopoverLayer} from './popoverLayer'
-import type {PopoverUpdateCallback} from './types'
+import type {PopoverMargins, PopoverUpdateCallback} from './types'
 
 /** @public */
 export const DEFAULT_POPOVER_ELEMENT = 'div'

package/src/core/primitives/popover/popoverLayer.tsx

@@ -4,15 +4,17 @@ import {motion} from 'framer-motion'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import type {Placement, PopoverMargins} from '../../types'
-import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
+import type {Placement} from '../../types/placement'
+import {Arrow} from '../arrow'
 import {Flex} from '../flex'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
   DEFAULT_POPOVER_ARROW_RADIUS,
   DEFAULT_POPOVER_ARROW_WIDTH,
   DEFAULT_POPOVER_MARGINS,
 } from './constants'
+import type {PopoverMargins} from './types'
 
 /** @internal */
 export const DEFAULT_POPOVER_LAYER_ELEMENT = 'div'

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

@@ -1,5 +1,10 @@
 import type {ContainerWidth} from '@sanity/ui/theme'
 
+/**
+ * @beta
+ */
+export type PopoverMargins = [number, number, number, number]
+
 /** @beta */
 export type PopoverUpdateCallback = () => void
 

package/src/core/primitives/radio/radio.tsx

@@ -1,8 +1,8 @@
 import {radio, radioInput, radioPresentation} from '@sanity/ui/css'
 import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_RADIO_ELEMENT = 'input'

package/src/core/primitives/select/select.tsx

@@ -9,8 +9,8 @@ import {
 import type {Space} from '@sanity/ui/theme'
 import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Text} from '../text'
 

package/src/core/{components → primitives}/skeleton/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'components/skeleton',
+  name: 'primitives/skeleton',
   title: 'Skeleton',
   stories: [
     {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},

package/src/core/{components → primitives}/skeleton/codeSkeleton.tsx

@@ -1,7 +1,7 @@
 import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/headingSkeleton.tsx

@@ -1,7 +1,7 @@
 import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontHeadingSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/labelSkeleton.tsx

@@ -1,7 +1,7 @@
 import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontLabelSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/skeleton.tsx

@@ -1,8 +1,7 @@
 import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
 import {useEffect, useState} from 'react'
 
-import {Box, type BoxOwnProps} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @beta */
 export const DEFAULT_SKELETON_ELEMENT = 'div'
@@ -11,11 +10,10 @@ export const DEFAULT_SKELETON_ELEMENT = 'div'
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export type SkeletonOwnProps = BoxOwnProps &
-  SkeletonStyleProps & {
-    animated?: boolean
-    delay?: number
-  }
+export type SkeletonOwnProps = SkeletonStyleProps & {
+  animated?: boolean
+  delay?: number
+}
 
 /** @beta */
 export type SkeletonElementType = 'div' | 'span' | ComponentType
@@ -34,6 +32,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
   props: SkeletonProps<E>,
 ) {
   const {
+    as: As = DEFAULT_SKELETON_ELEMENT,
     animated = false,
     className,
     delay,
@@ -58,7 +57,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
   }, [delay])
 
   return (
-    <Box
+    <As
       data-ui="Skeleton"
       {...rest}
       className={skeleton({

package/src/core/{components → primitives}/skeleton/textSkeleton.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/primitives/spinner/spinner.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, spinner} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Text} from '../text'
 import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 

package/src/core/{utils → primitives}/srOnly/srOnly.tsx

@@ -1,6 +1,6 @@
 import {srOnly} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_SR_ONLY_ELEMENT = 'span'

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

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, stack} from '@sanity/ui/css'
 import type {Space} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */
@@ -17,6 +17,7 @@ export type StackOwnProps = Omit<
   | 'direction'
   | 'display'
   | 'flexDirection'
+  | 'flexWrap'
   | 'gapX'
   | 'gapY'
   | 'justify'

package/src/core/primitives/switch/switch.tsx

@@ -7,7 +7,7 @@ import {
 } from '@sanity/ui/css'
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 
 /** @public */
@@ -36,7 +36,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
 ) {
   const {
     as: Element = DEFAULT_SWITCH_ELEMENT,
-    checked,
     className,
     disabled,
     indeterminate,
@@ -63,18 +62,14 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
   return (
     <Box
       className={_switch({className})}
-      data-checked={checked ? '' : undefined}
-      data-indeterminate={indeterminate ? '' : undefined}
       data-ui="Switch"
-      display="inline-block"
+      display="block"
       position="relative"
       style={style}
     >
       <Element
         {...rest}
-        checked={indeterminate !== true && checked}
         className={_switchElement()}
-        data-disabled={disabled ? '' : undefined}
         data-read-only={!disabled && readOnly ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -1,5 +1,5 @@
 import {Flex, Text} from '@sanity/ui'
-import {varNames, vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui/css'
 import type {AvatarColor} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
@@ -7,7 +7,7 @@ import {styled} from 'styled-components'
 import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
 
 const ColoredText = styled(Text)<{$color: AvatarColor}>`
-  ${varNames.color.fg}: ${({$color}) => vars.color.avatar[$color].bg};
+  ${vars.color.fg.slice(4, -1)}: ${({$color}) => vars.color.avatar[$color].bg};
 `
 
 export default function ColoredTextStory() {

package/src/core/primitives/text/__workshop__/opticalAlignment.tsx

@@ -1,48 +1,23 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {CropIcon} from '@sanity/icons'
+import {Box, Stack, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
 
 export default function OpticalAlignment() {
   return (
-    <Box padding={[4, 5, 6]}>
-      <Stack gap={1}>
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={4}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={3}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={2}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={1}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={0}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} tone="neutral">
-            <Text>
-              <AddCircleIcon />
+    <Stack gap={4} padding={[4, 5, 6]}>
+      {FONT_TEXT_SIZE.map((size) => (
+        <Box display="flex" gap={2} key={size}>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Text size={size}>
+              <CropIcon />
             </Text>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
+          </div>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Text size={size}>Hamburgefonstiv M</Text>
+          </div>
+        </Box>
+      ))}
+    </Stack>
   )
 }

package/src/core/primitives/text/text.tsx

@@ -1,6 +1,6 @@
 import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TEXT_ELEMENT = 'div'
@@ -39,6 +39,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
     children,
     className,
     flex,
+    maxWidth = 'fill',
     muted,
     size = 2,
     textOverflow: textOverflowProp,
@@ -55,6 +56,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
         accent,
         align,
         flex,
+        maxWidth,
         muted,
         size,
         weight,

package/src/core/primitives/textArea/__workshop__/plain.tsx

@@ -26,10 +26,10 @@ export default function PlainStory() {
 
   return (
     <Card
-      align="center"
+      alignItems="center"
       display="flex"
       height="fill"
-      justify="center"
+      justifyContent="center"
       padding={[4, 5, 6]}
       sizing="border"
       tone={tone}

package/src/core/primitives/textArea/textArea.tsx

@@ -8,8 +8,8 @@ import {
 import type {Space} from '@sanity/ui/theme'
 import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'

package/src/core/primitives/textInput/textInput.tsx

@@ -23,9 +23,10 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity, useResponsiveProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Button, type ButtonProps} from '../button'
 import {Text} from '../text'

package/src/core/primitives/tooltip/constants.ts

@@ -1,4 +1,4 @@
-import type {Placement} from '../../types'
+import type {Placement} from '../../types/placement'
 
 export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
 export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6

package/src/core/primitives/tooltip/tooltip.tsx

@@ -31,13 +31,16 @@ import {
 import {useEffectEvent} from 'use-effect-event'
 
 import {Z_OFFSETS} from '../../constants'
-import {usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
-import type {ComponentType, Placement, Props} from '../../types'
-import {type LayerOwnProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import type {Placement} from '../../types/placement'
+import type {ComponentType, Props} from '../../types/props'
+import {useBoundaryElement} from '../../utils/boundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
+import {Portal, usePortal} from '../../utils/portal'
 import {CardProvider, useCard} from '../card'
+import type {LayerOwnProps} from '../layer'
 import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,

package/src/core/primitives/tooltip/tooltipLayer.tsx

@@ -2,8 +2,9 @@ import {motion, type MotionStyle} from 'framer-motion'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import type {Placement} from '../../types'
-import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
+import type {Placement} from '../../types/placement'
+import {Arrow} from '../arrow'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,

package/src/core/primitives/types.ts

@@ -1,8 +1,14 @@
 import type {
   AlignItems,
+  BoxHeight,
+  BoxOverflow,
+  BoxSizing,
   Flex,
   FlexDirection,
   FlexWrap,
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
@@ -11,17 +17,9 @@ import type {
   GridItemRowStart,
   JustifyContent,
 } from '@sanity/ui/css'
+import type {Radius} from '@sanity/ui/theme'
 
-import type {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  Radius,
-} from '../types'
+import type {BoxDisplay} from './box/types'
 
 /**
  * @public

package/src/core/types/radius.ts

@@ -1,7 +1,7 @@
 export {
   /**
    * @public
-   * @deprecated
+   * @deprecated Use `Radius` from `@sanity/ui/theme` instead.
    */
   type Radius,
 } from '@sanity/ui/theme'

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,22 +1,26 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {varNames, vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui/css'
 import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
   [data-eq-min~='0'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.orange[600]}, ${vars.palette.orange[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.orange[600]}, ${vars.color
+      .palette.orange[400]});
   }
 
   [data-eq-min~='1'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.red[600]}, ${vars.palette.red[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.red[600]}, ${vars.color.palette
+      .red[400]});
   }
 
   [data-eq-min~='2'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.magenta[600]}, ${vars.palette.magenta[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.magenta[600]}, ${vars.color
+      .palette.magenta[400]});
   }
 
   [data-eq-min~='3'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.purple[600]}, ${vars.palette.purple[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.purple[600]}, ${vars.color
+      .palette.purple[400]});
   }
 `
 

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,8 +1,8 @@
 import {BREAKPOINTS} from '@sanity/ui/css'
 import {useImperativeHandle, useMemo, useState} from 'react'
 
-import {useElementSize} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useElementSize} from '../../hooks/useElementSize'
+import type {ComponentType, Props} from '../../types/props'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /** @beta */

package/src/core/utils/getElementRef.ts

@@ -1,3 +1,4 @@
+/** @internal */
 // Based on https://github.com/radix-ui/primitives/blob/0bade6a704e5821b90a6da0f3d8cfa8a7711127d/packages/react/slot/src/Slot.tsx#L128-L150
 // Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
 // After React 19 accessing `element.ref` does the opposite.

package/src/core/utils/portal/portal.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider, useCard} from '../../primitives'
+import {CardProvider, useCard} from '../../primitives/card'
 import {usePortal} from './usePortal'
 
 /** @public */

package/src/css/components/dialog/dialog.css.ts

@@ -63,8 +63,33 @@ export const container = _style(layers.components, {
   height: '100%',
 })
 
-export const layout = _style(layers.components, {
+export const scroller = _style(layers.components, {
   width: '100%',
+  height: '100%',
+  // overflow: 'auto',
+  outline: 'none',
+})
+
+export const scrollerShadowTop = _style(layers.components, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 8,
+  background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
+})
+
+export const scrollerShadowBottom = _style(layers.components, {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: 8,
+  background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
 })
 
 export const header = _style(layers.components, {

package/src/css/components/dialog/dialog.ts

@@ -1,6 +1,16 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {inset} from '../../props'
-import {card, container, content, footer, header, layout, root} from './dialog.css'
+import {inset} from '../../props/inset'
+import {
+  card,
+  container,
+  content,
+  footer,
+  header,
+  root,
+  scroller,
+  scrollerShadowBottom,
+  scrollerShadowTop,
+} from './dialog.css'
 
 /** @public */
 export function dialog(props: {className?: string}): string | undefined {
@@ -17,11 +27,6 @@ export function dialogContainer(): string | undefined {
   return container
 }
 
-/** @public */
-export function dialogLayout(): string | undefined {
-  return layout
-}
-
 /** @public */
 export function dialogHeader(): string | undefined {
   return header
@@ -32,6 +37,21 @@ export function dialogContent(): string | undefined {
   return content
 }
 
+/** @public */
+export function dialogScroller(): string | undefined {
+  return scroller
+}
+
+/** @public */
+export function dialogScrollerShadowTop(): string | undefined {
+  return scrollerShadowTop
+}
+
+/** @public */
+export function dialogScrollerShadowBottom(): string | undefined {
+  return scrollerShadowBottom
+}
+
 /** @public */
 export function dialogFooter(): string | undefined {
   return footer

package/src/css/components/skeleton/skeleton.ts

@@ -1,5 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
+import {flex} from '../../props/flex'
+import {margin} from '../../props/margin'
 import {radius} from '../../props/radius'
 import {codeScale, font, headingScale, labelScale, root, textScale} from './skeleton.css'
 import type {
@@ -12,7 +14,7 @@ import type {
 
 /** @beta */
 export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, radius(props))
+  return _composeClassNames(props.className, root, flex(props), radius(props), margin(props))
 }
 
 /** @beta */