@sanity/ui 3.0.0-static.10 → 3.0.0-static.2

package/src/{ui → core}/primitives/tooltip/tooltip.test.tsx

@@ -6,8 +6,8 @@ import '../../../../test/mocks/matchMedia.mock'
 import {act, fireEvent, screen} from '@testing-library/react'
 
 import {render} from '../../../../test'
-import {Button, Text} from '..'
-import {Tooltip, TooltipDelayGroupProvider} from '.'
+import {Button, Text} from '../../primitives'
+import {Tooltip, TooltipDelayGroupProvider} from '../tooltip'
 
 // Fake timers using Jest
 beforeEach(() => {

package/src/{ui → core}/primitives/tooltip/tooltip.tsx

@@ -28,7 +28,7 @@ import {
 } from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
-import {Z_OFFSETS} from '../../constants'
+import {useTheme_v2} from '../../_compat'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
@@ -91,6 +91,7 @@ export const Tooltip = forwardRef(function Tooltip(
   forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
+  const {layer} = useTheme_v2()
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
@@ -108,7 +109,7 @@ export const Tooltip = forwardRef(function Tooltip(
     radius = 3,
     scheme,
     shadow = 2,
-    zOffset = Z_OFFSETS.tooltip,
+    zOffset = layer.tooltip.zOffset,
     tone,
     ...restProps
   } = props

package/src/{ui → core}/utils/layer/layerProvider.tsx

@@ -34,7 +34,7 @@ export function LayerProvider(props: LayerProviderProps): ReactElement {
   // Get responsive z-index value
   const maxMediaIndex = zOffset.length - 1
   const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
-  const zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : (zOffset[mediaIndex] ?? 0)
+  const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]
 
   // A state value that is used to keep track of the number of child layers on each level
   const [, setChildLayers] = useState<Record<number, number>>({})

package/src/{ui → core}/utils/portal/portal.ts

@@ -1,7 +1,6 @@
-import {createElement, ReactNode, ReactPortal} from 'react'
+import {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider, useCard} from '../../primitives'
 import {usePortal} from './usePortal'
 
 /**
@@ -20,7 +19,6 @@ export interface PortalProps {
  */
 export function Portal(props: PortalProps): ReactPortal | null {
   const {children, __unstable_name: name} = props
-  const card = useCard()
   const portal = usePortal()
   const portalElement =
     (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default
@@ -29,18 +27,7 @@ export function Portal(props: PortalProps): ReactPortal | null {
     return null
   }
 
-  return createPortal(
-    createElement(
-      CardProvider,
-      {
-        rendered: true,
-        tone: 'transparent', // card?.tone || 'default',
-        scheme: card?.scheme || 'light',
-      },
-      children,
-    ),
-    portalElement,
-  )
+  return createPortal(children, portalElement)
 }
 
 Portal.displayName = 'Portal'

package/src/{ui → core}/utils/virtualList/virtualList.tsx

@@ -133,7 +133,7 @@ export const VirtualList = forwardRef(function VirtualList(
 
     if (itemHeight === -1) {
       return [
-        <Box insetTop={0} insetLeft={0} insetRight={0} key={0} position="absolute">
+        <Box insetTop={0} insetLeft={0} key={0} position="absolute">
           {renderItem(items[0])}
         </Box>,
       ]
@@ -147,7 +147,6 @@ export const VirtualList = forwardRef(function VirtualList(
       return (
         <Box
           insetLeft={0}
-          insetRight={0}
           key={key}
           position="absolute"
           style={{top: itemIndex * (itemHeight + space[gap])}}

package/src/css/_resp.ts

@@ -1,10 +1,5 @@
-// import {scopeClassName as _} from './scopeClassName'
 import {ResponsiveProp} from './types'
 
-function _(className: string) {
-  return className
-}
-
 export function _resp<T>(
   prefix: string | undefined,
   prop: ResponsiveProp<T> | undefined,
@@ -23,16 +18,14 @@ export function _resp<T>(
           .join('-')
           .replace(/\./g, '_')
 
-        return index === 0 ? _(className) : _(`${index}:${className}`)
+        return index === 0 ? `${className}` : `_${index}:${className}`
       })
       .filter(Boolean)
       .join(' ')
   }
 
-  return _(
-    (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
-      .filter((s) => s === 0 || Boolean(s))
-      .join('-')
-      .replace(/\./g, '_'),
-  )
+  return (typeof prop === 'boolean' ? [prefix] : [prefix, prop])
+    .filter((s) => s === 0 || Boolean(s))
+    .join('-')
+    .replace(/\./g, '_')
 }

package/src/css/compile/compilePalette.ts

@@ -1,25 +1,58 @@
-import {color} from '@sanity/color'
-import {HUES, TINTS} from '@sanity/ui/theme'
+import {HUES, PaletteConfig, TINTS} from '@sanity/ui/theme'
 
 import {compileRule} from './compileRule'
 
-export function compilePalette(): string {
+export function compilePalette(config: PaletteConfig): string {
   const props: Record<string, string> = {
-    ...compileHues(),
+    '--l-min': `${config.luminosity.min * 100}%`,
+    '--l-max': `${config.luminosity.max * 100}%`,
+    '--l-range': `calc(var(--l-max) - var(--l-min))`,
 
-    '--black': color.black.hex,
-    '--white': color.white.hex,
+    '--c-min': `${config.chroma.min}`,
+    '--c-max': `${config.chroma.max}`,
+    '--c-range': `calc(var(--c-max) - var(--c-min))`,
+
+    ...compileHues(config.hues),
+
+    '--black': `oklch(
+      calc(var(--l-min) + 0.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`,
+
+    '--white': `oklch(
+      calc(var(--l-min) + 1.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`,
   }
 
   return compileRule(':root', props, {keyframes: {}, media: {}})
 }
 
-function compileHues() {
+function compileHues(hues: PaletteConfig['hues']) {
   const rules: Record<string, string> = {}
 
   for (const hue of HUES) {
+    const {c, h} = hues[hue]
+
+    rules[`--${hue}-h`] = `${h}`
+    rules[`--${hue}-c`] = `${c}`
+    rules[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`
+    rules[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`
+
     for (const tint of TINTS) {
-      rules[`--${hue}-${tint}`] = color[hue][tint].hex
+      const l_offset = parseFloat((1 - tint / 1000).toFixed(2))
+      const c_offset_tmp = tint / 500
+      const c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1))
+
+      rules[`--${hue}-${tint}`] = [
+        `oklch(`,
+        `calc(var(--l-min) + ${l_offset} * var(--l-range)) `,
+        `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `,
+        `var(--${hue}-h)`,
+        `)`,
+      ].join('')
     }
   }
 

package/src/css/compile/compileRule.ts

@@ -1,8 +1,6 @@
-import {PREFIX} from '../constants'
 import {type Properties} from '../types'
 import {CompileRulesContext} from './types'
 
-// TODO: remove this
 export function compileRule(
   selector: string,
   props: Properties,
@@ -14,11 +12,8 @@ export function compileRule(
     css += compileNestedRules(selector, props['@nest'], context)
   }
 
-  // @ts-expect-error - TODO: fix this
   if (props['@keyframes']) {
-    // @ts-expect-error - TODO: fix this
     for (const name in props['@keyframes']) {
-      // @ts-expect-error - TODO: fix this
       context.keyframes[name] = props['@keyframes'][name]
     }
   }
@@ -68,9 +63,7 @@ function compileNestedRules(
   let css = ''
 
   for (const [_selector, _props] of Object.entries(props)) {
-    css +=
-      '\n' +
-      compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context)
+    css += '\n' + compileRule(_selector.replace(/&/g, selector), _props, context)
   }
 
   return css

package/src/css/compile/compileRules.test.ts

@@ -7,7 +7,6 @@ it('should compile deeply nested rules', () => {
     card: {
       '@nest': {
         '&:is(a)': {
-          // @ts-expect-error - TODO: fix this
           '@media': {
             '(hover: hover)': {
               background: 'red',

package/src/css/compile/compileRules.ts

@@ -1,4 +1,3 @@
-import {scopeClassName} from '../scopeClassName'
 import {type Rules} from '../types'
 import {compileMediaQueryRule, compileRule} from './compileRule'
 import {CompileRulesContext} from './types'
@@ -13,15 +12,13 @@ export function compileRules(rules: Rules): string {
   }
 
   for (const [className, props] of Object.entries(rules)) {
-    const ruleCss = compileRule(
-      `.${scopeClassName(className)}`.replace(/:/g, '\\:'),
-      props,
-      context,
-    )
+    const ruleCss = compileRule(`.${className}`.replace(/:/g, '\\:'), props, context)
 
     css += ruleCss ? `${ruleCss}\n` : ''
   }
 
+  // console.log('context', context)
+
   for (const [name, value] of Object.entries(context.keyframes)) {
     let keyframesCss = `@keyframes ${name} {\n`
 

package/src/css/compile/compileSystem.ts

@@ -1,10 +1,7 @@
-// import {rules} from '../rules'
-import {systemStyle} from '../system.style'
-import {compileStyle} from './compileStyle'
-// import {compileRules} from './compileRules'
+import {rules} from '../rules'
+import {compileRules} from './compileRules'
 
 /** @public */
 export function compileSystem(): string {
-  // return compileRules(rules)
-  return compileStyle(systemStyle)
+  return compileRules(rules)
 }

package/src/css/compile/compileTheme_v3.ts

@@ -22,6 +22,8 @@ export function compileTheme_v3(theme: Theme_v3): string {
 }
 
 function compileThemeProperties(theme: Theme_v3): Properties {
+  // const palette = defaultPalette
+
   return {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
@@ -34,10 +36,26 @@ function compileThemeProperties(theme: Theme_v3): Properties {
     ...buildRadiusThemeProperties(theme),
     ...buildShadowThemeProperties(theme),
     ...buildSpaceThemeProperties(theme),
+    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme),
   }
 }
 
+// function buildColorPaletteProperties(palette: Color): Properties {
+//   const props: Properties = {
+//     '--black': palette.black.hex,
+//     '--white': palette.white.hex,
+//   }
+
+//   for (const hue of COLOR_HUES) {
+//     for (const tint of COLOR_TINTS) {
+//       props[`--${hue}-${tint}`] = palette[hue][tint].hex
+//     }
+//   }
+
+//   return props
+// }
+
 function buildAvatarThemeProperties(theme: Theme_v3): Properties {
   return {
     [`--avatar-focus-ring-offset`]: px(theme.avatar.focusRing.offset),
@@ -339,62 +357,53 @@ function buildColorCardThemeProperties(
   const context: RenderColorContext = {bgVar: `${prefix}-bg-0`, hue: tokens._hue, scheme}
 
   const props: Properties = {
-    // backdrop
     [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
 
-    // code
-    [`${prefix}-code-bg`]: renderColor(tokens.code.bg, context),
-    [`${prefix}-code-fg`]: renderColor(tokens.code.fg, context),
-
-    // code / token
-    [`${prefix}-code-token-atrule`]: renderColor(tokens.code.token.atrule, context),
-    [`${prefix}-code-token-attr-name`]: renderColor(tokens.code.token.attrName, context),
-    [`${prefix}-code-token-attr-value`]: renderColor(tokens.code.token.attrValue, context),
-    [`${prefix}-code-token-attribute`]: renderColor(tokens.code.token.attribute, context),
-    [`${prefix}-code-token-boolean`]: renderColor(tokens.code.token.boolean, context),
-    [`${prefix}-code-token-builtin`]: renderColor(tokens.code.token.builtin, context),
-    [`${prefix}-code-token-cdata`]: renderColor(tokens.code.token.cdata, context),
-    [`${prefix}-code-token-char`]: renderColor(tokens.code.token.char, context),
-    [`${prefix}-code-token-class-name`]: renderColor(tokens.code.token.className, context),
-    [`${prefix}-code-token-class`]: renderColor(tokens.code.token.class, context),
-    [`${prefix}-code-token-comment`]: renderColor(tokens.code.token.comment, context),
-    [`${prefix}-code-token-constant`]: renderColor(tokens.code.token.constant, context),
-    [`${prefix}-code-token-deleted`]: renderColor(tokens.code.token.deleted, context),
-    [`${prefix}-code-token-doctype`]: renderColor(tokens.code.token.doctype, context),
-    [`${prefix}-code-token-entity`]: renderColor(tokens.code.token.entity, context),
-    [`${prefix}-code-token-function`]: renderColor(tokens.code.token.function, context),
-    [`${prefix}-code-token-hexcode`]: renderColor(tokens.code.token.hexcode, context),
-    [`${prefix}-code-token-id`]: renderColor(tokens.code.token.id, context),
-    [`${prefix}-code-token-important`]: renderColor(tokens.code.token.important, context),
-    [`${prefix}-code-token-inserted`]: renderColor(tokens.code.token.inserted, context),
-    [`${prefix}-code-token-keyword`]: renderColor(tokens.code.token.keyword, context),
-    [`${prefix}-code-token-number`]: renderColor(tokens.code.token.number, context),
-    [`${prefix}-code-token-operator`]: renderColor(tokens.code.token.operator, context),
-    [`${prefix}-code-token-prolog`]: renderColor(tokens.code.token.prolog, context),
-    [`${prefix}-code-token-property`]: renderColor(tokens.code.token.property, context),
-    [`${prefix}-code-token-pseudo-class`]: renderColor(tokens.code.token.pseudoClass, context),
-    [`${prefix}-code-token-pseudo-eelement`]: renderColor(tokens.code.token.pseudoElement, context),
-    [`${prefix}-code-token-punctuation`]: renderColor(tokens.code.token.punctuation, context),
-    [`${prefix}-code-token-regex`]: renderColor(tokens.code.token.regex, context),
-    [`${prefix}-code-token-selector`]: renderColor(tokens.code.token.selector, context),
-    [`${prefix}-code-token-string`]: renderColor(tokens.code.token.string, context),
-    [`${prefix}-code-token-symbol`]: renderColor(tokens.code.token.symbol, context),
-    [`${prefix}-code-token-tag`]: renderColor(tokens.code.token.tag, context),
-    [`${prefix}-code-token-unit`]: renderColor(tokens.code.token.unit, context),
-    [`${prefix}-code-token-url`]: renderColor(tokens.code.token.url, context),
-    [`${prefix}-code-token-variable`]: renderColor(tokens.code.token.variable, context),
-
-    // focus ring
     [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
 
-    // link
     [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
 
-    // shadow
     [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
     [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
     [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
     [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context),
+
+    [`${prefix}-token-atrule`]: renderColor(tokens.token.atrule, context),
+    [`${prefix}-token-attr-name`]: renderColor(tokens.token.attrName, context),
+    [`${prefix}-token-attr-value`]: renderColor(tokens.token.attrValue, context),
+    [`${prefix}-token-attribute`]: renderColor(tokens.token.attribute, context),
+    [`${prefix}-token-boolean`]: renderColor(tokens.token.boolean, context),
+    [`${prefix}-token-builtin`]: renderColor(tokens.token.builtin, context),
+    [`${prefix}-token-cdata`]: renderColor(tokens.token.cdata, context),
+    [`${prefix}-token-char`]: renderColor(tokens.token.char, context),
+    [`${prefix}-token-class-name`]: renderColor(tokens.token.className, context),
+    [`${prefix}-token-class`]: renderColor(tokens.token.class, context),
+    [`${prefix}-token-comment`]: renderColor(tokens.token.comment, context),
+    [`${prefix}-token-constant`]: renderColor(tokens.token.constant, context),
+    [`${prefix}-token-deleted`]: renderColor(tokens.token.deleted, context),
+    [`${prefix}-token-doctype`]: renderColor(tokens.token.doctype, context),
+    [`${prefix}-token-entity`]: renderColor(tokens.token.entity, context),
+    [`${prefix}-token-function`]: renderColor(tokens.token.function, context),
+    [`${prefix}-token-hexcode`]: renderColor(tokens.token.hexcode, context),
+    [`${prefix}-token-id`]: renderColor(tokens.token.id, context),
+    [`${prefix}-token-important`]: renderColor(tokens.token.important, context),
+    [`${prefix}-token-inserted`]: renderColor(tokens.token.inserted, context),
+    [`${prefix}-token-keyword`]: renderColor(tokens.token.keyword, context),
+    [`${prefix}-token-number`]: renderColor(tokens.token.number, context),
+    [`${prefix}-token-operator`]: renderColor(tokens.token.operator, context),
+    [`${prefix}-token-prolog`]: renderColor(tokens.token.prolog, context),
+    [`${prefix}-token-property`]: renderColor(tokens.token.property, context),
+    [`${prefix}-token-pseudo-class`]: renderColor(tokens.token.pseudoClass, context),
+    [`${prefix}-token-pseudo-eelement`]: renderColor(tokens.token.pseudoElement, context),
+    [`${prefix}-token-punctuation`]: renderColor(tokens.token.punctuation, context),
+    [`${prefix}-token-regex`]: renderColor(tokens.token.regex, context),
+    [`${prefix}-token-selector`]: renderColor(tokens.token.selector, context),
+    [`${prefix}-token-string`]: renderColor(tokens.token.string, context),
+    [`${prefix}-token-symbol`]: renderColor(tokens.token.symbol, context),
+    [`${prefix}-token-tag`]: renderColor(tokens.token.tag, context),
+    [`${prefix}-token-unit`]: renderColor(tokens.token.unit, context),
+    [`${prefix}-token-url`]: renderColor(tokens.token.url, context),
+    [`${prefix}-token-variable`]: renderColor(tokens.token.variable, context),
   }
 
   return props

package/src/css/components/breadcrumbs/breadcrumbs.ts

@@ -1,5 +1,5 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 
 export function breadcrumbs(): string | undefined {
-  return _comp('breadcrumbs')
+  return composeClassNames('breadcrumbs')
 }

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

@@ -1,30 +1,29 @@
-import {_comp} from '../../_comp'
-import {inset} from '../../aspects'
+import {composeClassNames} from '../../composeClassNames'
 
 export function dialog(): string | undefined {
-  return _comp('dialog', inset({inset: 0}))
+  return composeClassNames('dialog')
 }
 
 export function dialogContainer(): string | undefined {
-  return _comp('dialog-container')
+  return composeClassNames('dialog-container')
 }
 
 export function dialogCardRoot(): string | undefined {
-  return _comp('dialog-card-root')
+  return composeClassNames('dialog-card-root')
 }
 
 export function dialogLayout(): string | undefined {
-  return _comp('dialog-layout')
+  return composeClassNames('dialog-layout')
 }
 
 export function dialogHeader(): string | undefined {
-  return _comp('dialog-header')
+  return composeClassNames('dialog-header')
 }
 
 export function dialogContent(): string | undefined {
-  return _comp('dialog-content')
+  return composeClassNames('dialog-content')
 }
 
 export function dialogFooter(): string | undefined {
-  return _comp('dialog-footer')
+  return composeClassNames('dialog-footer')
 }

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

@@ -13,7 +13,6 @@ export const dialogRules: Rules = {
 
     'background': vars.color.backdrop,
 
-    // @ts-expect-error - TODO: fix this
     '@keyframes': {
       'dialog-zoom-in': {
         from: {
@@ -55,7 +54,6 @@ export const dialogRules: Rules = {
   'dialog-card-root': {
     width: '100%',
     maxHeight: '100%',
-    // @ts-expect-error - TODO: fix this
     overflow: ['hidden', 'clip'],
   },
 

package/src/css/components/menu/menu.ts

@@ -1,9 +1,9 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 
 export function menu(): string | undefined {
-  return _comp('menu')
+  return composeClassNames('menu')
 }
 
 export function menuDivider(): string | undefined {
-  return _comp('menu-divider')
+  return composeClassNames('menu-divider')
 }

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

@@ -16,7 +16,6 @@ export const skeletonRules: Rules = {
     'opacity': 0,
     'transition': 'opacity 200ms ease-in',
 
-    // @ts-expect-error - TODO: fix this
     '@keyframes': {
       'skeleton-pulse': {
         '0%': {

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

@@ -1,6 +1,6 @@
-import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {radius} from '../../aspects/radius'
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles/radius'
 import {
   CodeSkeletonStyleProps,
   HeadingSkeletonStyleProps,
@@ -11,21 +11,21 @@ import {
 
 /** @beta */
 export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _comp('skeleton', radius(props))
+  return composeClassNames('skeleton', radius(props))
 }
 
 export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('code-skeleton', props.size))
+  return composeClassNames('font-skeleton', _resp('code-skeleton', props.size))
 }
 
 export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('heading-skeleton', props.size))
+  return composeClassNames('font-skeleton', _resp('heading-skeleton', props.size))
 }
 
 export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('label-skeleton', props.size))
+  return composeClassNames('font-skeleton', _resp('label-skeleton', props.size))
 }
 
 export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('text-skeleton', props.size))
+  return composeClassNames('font-skeleton', _resp('text-skeleton', props.size))
 }

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

@@ -1,6 +1,6 @@
 import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../aspects/radius'
+import {RadiusStyleProps} from '../../styles/radius'
 import {ResponsiveProp} from '../../types'
 
 /** @beta */

package/src/css/components/toast/rules.ts

@@ -12,7 +12,6 @@ export const toastRules: Rules = {
 
   'toast': {
     pointerEvents: 'all',
-    // @ts-expect-error - TODO: fix this
     overflow: ['hidden', 'clip'],
   },
 }

package/src/css/components/toast/toast.ts

@@ -1,21 +1,21 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 
 export function toastLayer() {
-  return _comp('toast-layer')
+  return composeClassNames('toast-layer')
 }
 
 export function toast() {
-  return _comp('toast')
+  return composeClassNames('toast')
 }
 
 export function toastLoadingBar() {
-  return _comp('toast-loading-bar')
+  return composeClassNames('toast-loading-bar')
 }
 
 export function toastLoadingBarProgress() {
-  return _comp('toast-loading-bar-progress')
+  return composeClassNames('toast-loading-bar-progress')
 }
 
 export function toastLoadingBarMask() {
-  return _comp('toast-loading-bar-mask')
+  return composeClassNames('toast-loading-bar-mask')
 }

package/src/css/components/tree/tree.ts

@@ -1,5 +1,5 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 
 export function treeItem(): string | undefined {
-  return _comp('tree-item')
+  return composeClassNames('tree-item')
 }

package/src/css/composeClassNames.ts

@@ -1,15 +1,11 @@
-export function getClassNames(...classNames: Array<string | false | undefined>): string[] {
-  return classNames
-    .map((n) => typeof n === 'string' && n.trim())
-    .filter(Boolean)
-    .join(' ')
-    .split(' ')
-}
-
 export function composeClassNames(
   ...classNames: Array<string | false | undefined>
 ): string | undefined {
-  return unique(getClassNames(...classNames)).join(' ') || undefined
+  const names =
+    unique(classNames.map((n) => typeof n === 'string' && n.trim()).filter(Boolean)).join(' ') ||
+    undefined
+
+  return names
 }
 
 function unique<T>(array: T[]): T[] {

package/src/css/index.ts

@@ -1,4 +1,4 @@
-export * from './aspects'
+export * from '../theme/versioning/v3_v2'
 export * from './compile/compilePalette'
 export * from './compile/compileSystem'
 export * from './compile/compileTheme'
@@ -27,13 +27,12 @@ export * from './primitives/popover'
 export * from './primitives/radio'
 export * from './primitives/select'
 export * from './primitives/spinner'
-export * from './primitives/stack'
 export * from './primitives/switch'
 export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
 export * from './primitives/tooltip'
-export * from './scopeClassName'
+export * from './styles'
 export * from './types'
 export * from './util'
 export * from './utils/srOnly'