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

package/exports/_visual-editing.ts

@@ -2,30 +2,30 @@
  * These are internal exports for usage in `@sanity/visual-editing` and `@sanity/insert-menu`,
  * which are used in environments where the regular `@sanity/ui` export is far too heavy due to imports from refractor and more.
  */
-export {studioTheme} from '../src/core/_compat'
-export {ThemeProvider, type ThemeProviderProps} from '../src/core/_compat/theme/themeProvider'
-export {useTheme_v2} from '../src/core/_compat/theme/useTheme'
-export {Hotkeys, type HotkeysProps} from '../src/core/components/hotkeys/hotkeys'
-export {Menu, type MenuProps} from '../src/core/components/menu/menu'
-export {MenuDivider} from '../src/core/components/menu/menuDivider'
-export {MenuGroup, type MenuGroupProps} from '../src/core/components/menu/menuGroup'
-export {MenuItem, type MenuItemProps} from '../src/core/components/menu/menuItem'
-export {Tab, type TabProps} from '../src/core/components/tab/tab'
-export {TabList, type TabListProps} from '../src/core/components/tab/tabList'
-export {isHTMLAnchorElement, isHTMLElement} from '../src/core/helpers/element'
-export {usePrefersDark} from '../src/core/hooks/usePrefersDark'
-export {Box, type BoxProps} from '../src/core/primitives/box/box'
-export {Button, type ButtonProps} from '../src/core/primitives/button/button'
-export {Card, type CardProps} from '../src/core/primitives/card/card'
-export {Flex, type FlexProps} from '../src/core/primitives/flex/flex'
-export {Grid, type GridProps} from '../src/core/primitives/grid/grid'
-export {Popover, type PopoverProps} from '../src/core/primitives/popover/popover'
-export {Spinner, type SpinnerProps} from '../src/core/primitives/spinner/spinner'
-export {Stack, type StackProps} from '../src/core/primitives/stack/stack'
-export {Text, type TextProps} from '../src/core/primitives/text/text'
-export {TextInput, type TextInputProps} from '../src/core/primitives/textInput/textInput'
-export {Tooltip, type TooltipProps} from '../src/core/primitives/tooltip/tooltip'
-export type {PopoverMargins} from '../src/core/types/popover'
-export {LayerProvider} from '../src/core/utils/layer/layerProvider'
-export {Portal, type PortalProps} from '../src/core/utils/portal/portal'
-export {PortalProvider, type PortalProviderProps} from '../src/core/utils/portal/portalProvider'
+export {studioTheme} from '../src/ui/_compat'
+export {ThemeProvider, type ThemeProviderProps} from '../src/ui/_compat/theme/themeProvider'
+export {useTheme_v2} from '../src/ui/_compat/theme/useTheme'
+export {Hotkeys, type HotkeysProps} from '../src/ui/components/hotkeys/hotkeys'
+export {Menu, type MenuProps} from '../src/ui/components/menu/menu'
+export {MenuDivider} from '../src/ui/components/menu/menuDivider'
+export {MenuGroup, type MenuGroupProps} from '../src/ui/components/menu/menuGroup'
+export {MenuItem, type MenuItemProps} from '../src/ui/components/menu/menuItem'
+export {Tab, type TabProps} from '../src/ui/components/tab/tab'
+export {TabList, type TabListProps} from '../src/ui/components/tab/tabList'
+export {isHTMLAnchorElement, isHTMLElement} from '../src/ui/helpers/element'
+export {usePrefersDark} from '../src/ui/hooks/usePrefersDark'
+export {Box, type BoxProps} from '../src/ui/primitives/box/box'
+export {Button, type ButtonProps} from '../src/ui/primitives/button/button'
+export {Card, type CardProps} from '../src/ui/primitives/card/card'
+export {Flex, type FlexProps} from '../src/ui/primitives/flex/flex'
+export {Grid, type GridProps} from '../src/ui/primitives/grid/grid'
+export {Popover, type PopoverProps} from '../src/ui/primitives/popover/popover'
+export {Spinner, type SpinnerProps} from '../src/ui/primitives/spinner/spinner'
+export {Stack, type StackProps} from '../src/ui/primitives/stack/stack'
+export {Text, type TextProps} from '../src/ui/primitives/text/text'
+export {TextInput, type TextInputProps} from '../src/ui/primitives/textInput/textInput'
+export {Tooltip, type TooltipProps} from '../src/ui/primitives/tooltip/tooltip'
+export type {PopoverMargins} from '../src/ui/types/popover'
+export {LayerProvider} from '../src/ui/utils/layer/layerProvider'
+export {Portal, type PortalProps} from '../src/ui/utils/portal/portal'
+export {PortalProvider, type PortalProviderProps} from '../src/ui/utils/portal/portalProvider'

package/exports/index.ts

@@ -1 +1 @@
-export * from '../src/core'
+export * from '../src/ui'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.2",
+  "version": "3.0.0-static.3",
   "keywords": [
     "sanity",
     "ui",
@@ -109,50 +109,50 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.6.3",
-    "react-compiler-runtime": "19.0.0-beta-e993439-20250405",
+    "framer-motion": "^12.9.7",
+    "react-compiler-runtime": "19.1.0-rc.1",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.1",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@eslint/js": "^9.23.0",
+    "@eslint/js": "^9.26.0",
+    "@rollup/plugin-replace": "^6.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.34",
-    "@storybook/addon-a11y": "^8.6.11",
-    "@storybook/addon-docs": "^8.6.11",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-links": "^8.6.11",
-    "@storybook/addon-mdx-gfm": "^8.6.11",
-    "@storybook/addon-storysource": "^8.6.11",
-    "@storybook/addon-themes": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/manager-api": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/test": "^8.6.11",
-    "@storybook/theming": "^8.6.11",
+    "@sanity/ui-workshop": "^2.1.2",
+    "@storybook/addon-a11y": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-mdx-gfm": "^8.6.12",
+    "@storybook/addon-storysource": "^8.6.12",
+    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.2",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "babel-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
+    "@vitejs/plugin-react": "^4.4.1",
+    "babel-plugin-react-compiler": "19.1.0-rc.1",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -160,16 +160,15 @@
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
     "esbuild-register": "^3.6.0",
-    "eslint": "^9.23.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint": "^9.26.0",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
-    "eslint-plugin-react-hooks": "experimental",
-    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-7a2c7045-20250506",
+    "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.0.0",
@@ -179,6 +178,7 @@
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
+    "magic-string": "^0.30.17",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.5.3",
@@ -189,12 +189,12 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.3",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.11",
-    "styled-components": "^6.1.16",
+    "storybook": "^8.6.12",
+    "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.8.2",
-    "typescript-eslint": "^8.29.0",
-    "vite": "^5.4.16",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.32.0",
+    "vite": "^5.4.19",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {

package/src/css/_comp.test.ts

@@ -0,0 +1,7 @@
+import {_comp} from './_comp'
+
+it('should compose class names', () => {
+  const result = _comp('foo', 'bar baz', undefined, false)
+
+  expect(result).toBe('s-foo s-bar s-baz')
+})

package/src/css/_comp.ts

@@ -0,0 +1,10 @@
+import {getClassNames} from './composeClassNames'
+import {scopeClassName} from './scopeClassName'
+
+export function _comp(...classNames: Array<string | false | undefined>): string | undefined {
+  return (
+    getClassNames(...classNames)
+      .map(scopeClassName)
+      .join(' ') || undefined
+  )
+}

package/src/css/_mergeStyles.ts

@@ -0,0 +1,31 @@
+// import type {Style, StyleKeyframes, StyleLayers, StyleRules} from '@sanity/css'
+
+import {Style, StyleKeyframes, StyleLayers, StyleRules} from './types'
+
+/** @internal */
+export function _mergeStyles(styles: Style[]): Style {
+  const keyframes: StyleKeyframes = {}
+  const layers: StyleLayers = {}
+  const rules: StyleRules = {}
+
+  for (const s of styles) {
+    if (!s) {
+      // TODO: should not happen
+      continue
+    }
+
+    Object.assign(keyframes, s.keyframes)
+
+    for (const layerName in s.layers) {
+      if (!layers[layerName]) {
+        layers[layerName] = {}
+      }
+
+      Object.assign(layers[layerName], s.layers[layerName])
+    }
+
+    Object.assign(rules, s.rules)
+  }
+
+  return {keyframes, layers, rules}
+}

package/src/css/_resp.ts

@@ -1,5 +1,10 @@
+// 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,
@@ -18,14 +23,16 @@ 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/_responsiveRule.ts

@@ -0,0 +1,38 @@
+import type {Properties, StyleRules} from './types'
+
+/** @internal */
+export function _responsiveRule(rules: StyleRules, _name: string, properties: Properties): void {
+  const name = _name.replace(/\./g, '_')
+
+  rules[`.${name}`] = properties
+  rules[`.1\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 360px)': properties,
+    },
+  }
+  rules[`.2\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 600px)': properties,
+    },
+  }
+  rules[`.3\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 900px)': properties,
+    },
+  }
+  rules[`.4\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 1200px)': properties,
+    },
+  }
+  rules[`.5\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 1800px)': properties,
+    },
+  }
+  rules[`.6\\:${name}`] = {
+    '@media': {
+      'screen and (min-width: 2400px)': properties,
+    },
+  }
+}

package/src/css/aspects/border/border.style.ts

@@ -0,0 +1,13 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'border', {border: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-t', {borderTop: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-r', {borderRight: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-b', {borderBottom: `1px solid ${vars.color.border}`})
+_responsiveRule(util, 'border-l', {borderLeft: `1px solid ${vars.color.border}`})
+
+export const borderStyle: Style = {layers: {util}}

package/src/css/aspects/border/border.ts

@@ -0,0 +1,14 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {BorderStyleProps} from './types'
+
+/** @public */
+export function border(props: BorderStyleProps): string | undefined {
+  return composeClassNames(
+    _resp('border', props.border),
+    _resp('border-t', props.borderTop),
+    _resp('border-r', props.borderRight),
+    _resp('border-b', props.borderBottom),
+    _resp('border-l', props.borderLeft),
+  )
+}

package/src/css/aspects/display/display.style.ts

@@ -0,0 +1,34 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'block', {
+  '@nest': {'&:not([hidden])': {display: 'block'}},
+})
+
+_responsiveRule(util, 'flex', {
+  '@nest': {'&:not([hidden])': {display: 'flex'}},
+})
+
+_responsiveRule(util, 'grid', {
+  '@nest': {'&:not([hidden])': {display: 'grid'}},
+})
+
+_responsiveRule(util, 'inline-block', {
+  '@nest': {'&:not([hidden])': {display: 'inline-block'}},
+})
+
+_responsiveRule(util, 'inline-flex', {
+  '@nest': {'&:not([hidden])': {display: 'inline-flex'}},
+})
+
+_responsiveRule(util, 'inline-grid', {
+  '@nest': {'&:not([hidden])': {display: 'inline-grid'}},
+})
+
+_responsiveRule(util, 'none', {
+  '@nest': {'&:not([hidden])': {display: 'none'}},
+})
+
+export const displayStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flex.style.ts

@@ -0,0 +1,30 @@
+// import {responsiveRules} from '../../responsiveRules'
+// import {type Rules} from '../../types'
+
+// export const flexRules: Rules = {
+//   // direction
+//   // ...responsiveRules('row', {flexDirection: 'row'}),
+//   // ...responsiveRules('column', {flexDirection: 'column'}),
+
+//   // align
+//   ...responsiveRules('align-flex-start', {alignItems: 'flex-start'}),
+//   ...responsiveRules('align-flex-end', {alignItems: 'end'}),
+//   ...responsiveRules('align-center', {alignItems: 'center'}),
+//   ...responsiveRules('align-stretch', {alignItems: 'stretch'}),
+//   ...responsiveRules('align-baseline', {alignItems: 'baseline'}),
+
+//   // justify
+//   ...responsiveRules('justify-flex-start', {justifyContent: 'flex-start'}),
+//   ...responsiveRules('justify-flex-end', {justifyContent: 'flex-end'}),
+//   ...responsiveRules('justify-center', {justifyContent: 'center'}),
+//   ...responsiveRules('justify-between', {justifyContent: 'space-between'}),
+//   ...responsiveRules('justify-around', {justifyContent: 'space-around'}),
+//   ...responsiveRules('justify-evenly', {justifyContent: 'space-evenly'}),
+
+//   // wrap
+//   ...responsiveRules('wrap-nowrap', {flexWrap: 'nowrap'}),
+//   ...responsiveRules('wrap-wrap', {flexWrap: 'wrap'}),
+//   ...responsiveRules('wrap-reverse', {flexWrap: 'wrap-reverse'}),
+// }
+
+export {}

package/src/css/aspects/flex/flex.ts

@@ -0,0 +1,13 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {FlexStyleProps} from './types'
+
+/** @public */
+export function flex(props: FlexStyleProps): string | undefined {
+  return composeClassNames(
+    _resp('flex-align', props.align),
+    _resp('f', props.direction),
+    _resp('flex-justify', props.justify),
+    _resp('flex', props.wrap),
+  )
+}

package/src/css/aspects/flex/flexAlign.style.ts

@@ -0,0 +1,12 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'flex-align-flex-start', {alignItems: 'flex-start'})
+_responsiveRule(util, 'flex-align-flex-end', {alignItems: 'flex-end'})
+_responsiveRule(util, 'flex-align-center', {alignItems: 'center'})
+_responsiveRule(util, 'flex-align-stretch', {alignItems: 'stretch'})
+_responsiveRule(util, 'flex-align-baseline', {alignItems: 'baseline'})
+
+export const flexAlignStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexDirection.style.ts

@@ -0,0 +1,11 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'f-row', {flexDirection: 'row'})
+_responsiveRule(util, 'f-column', {flexDirection: 'column'})
+// _responsiveRule(util, 'f-row-reverse', {flexDirection: 'row-reverse'})
+// _responsiveRule(util, 'f-column-reverse', {flexDirection: 'column-reverse'})
+
+export const flexDirectionStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexJustify.style.ts

@@ -0,0 +1,13 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
+_responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
+_responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
+_responsiveRule(util, 'flex-justify-between', {justifyContent: 'space-between'})
+_responsiveRule(util, 'flex-justify-around', {justifyContent: 'space-around'})
+_responsiveRule(util, 'flex-justify-evenly', {justifyContent: 'space-evenly'})
+
+export const flexJustifyStyle: Style = {layers: {util}}

package/src/css/aspects/flex/flexWrap.style.ts

@@ -0,0 +1,10 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'flex-nowrap', {flexWrap: 'nowrap'})
+_responsiveRule(util, 'flex-wrap', {flexWrap: 'wrap'})
+_responsiveRule(util, 'flex-wrap-reverse', {flexWrap: 'wrap-reverse'})
+
+export const flexWrapStyle: Style = {layers: {util}}

package/src/css/aspects/flexItem/flex.style.ts

@@ -0,0 +1,22 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'f-none', {flex: 'none'})
+_responsiveRule(util, 'f-auto', {flex: 'auto'})
+_responsiveRule(util, 'f-initial', {flex: 'initial'})
+_responsiveRule(util, 'f-1', {flex: 1})
+_responsiveRule(util, 'f-2', {flex: 2})
+_responsiveRule(util, 'f-3', {flex: 3})
+_responsiveRule(util, 'f-4', {flex: 4})
+_responsiveRule(util, 'f-5', {flex: 5})
+_responsiveRule(util, 'f-6', {flex: 6})
+_responsiveRule(util, 'f-7', {flex: 7})
+_responsiveRule(util, 'f-8', {flex: 8})
+_responsiveRule(util, 'f-9', {flex: 9})
+_responsiveRule(util, 'f-10', {flex: 10})
+_responsiveRule(util, 'f-11', {flex: 11})
+_responsiveRule(util, 'f-12', {flex: 12})
+
+export const flexStyle: Style = {layers: {util}}

package/src/css/{styles → aspects}/flexItem/flexItem.ts

@@ -4,5 +4,5 @@ import {FlexItemStyleProps} from './types'
 
 /** @public */
 export function flexItem(props: FlexItemStyleProps): string | undefined {
-  return composeClassNames(_resp(`flex`, props.flex))
+  return composeClassNames(_resp(`f`, props.flex))
 }

package/src/css/{styles → aspects}/flexItem/types.ts

@@ -3,7 +3,23 @@ import {ResponsiveProp} from '../../types'
 /**
  * @public
  */
-export type FlexValue = number | 'none' | 'auto' | 'initial'
+export type FlexValue =
+  | 'none'
+  | 'auto'
+  | 'initial'
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
 
 /** @public */
 export interface FlexItemStyleProps {

package/src/css/{styles/font/rules.ts → aspects/font/font.style.ts}

@@ -1,8 +1,9 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
+// import {responsiveRules} from '../../responsiveRules'
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
 
-export const fontRules: Rules = {
-  'font': {
+export const rules: StyleRules = {
+  '.font': {
     // 'position': 'relative',
     'fontFamily': 'var(--font-family)',
     'fontFeatureSettings': 'var(--font-feature-settings)',
@@ -53,44 +54,46 @@ export const fontRules: Rules = {
     },
   },
 
-  'font-regular': {
+  '.font-regular': {
     '--font-weight': 'var(--font-weight-regular)',
   },
 
-  'font-medium': {
+  '.font-medium': {
     '--font-weight': 'var(--font-weight-medium)',
   },
 
-  'font-semibold': {
+  '.font-semibold': {
     '--font-weight': 'var(--font-weight-semibold)',
   },
 
-  'font-bold': {
+  '.font-bold': {
     '--font-weight': 'var(--font-weight-bold)',
   },
+}
 
-  // align
+// align
 
-  ...responsiveRules('text-align-initial', {
-    textAlign: 'initial',
-  }),
+_responsiveRule(rules, `text-align-initial`, {
+  textAlign: 'initial',
+})
 
-  ...responsiveRules('text-align-left', {
-    textAlign: 'left',
-  }),
+_responsiveRule(rules, `text-align-left`, {
+  textAlign: 'left',
+})
 
-  ...responsiveRules('text-align-center', {
-    textAlign: 'center',
-  }),
+_responsiveRule(rules, `text-align-center`, {
+  textAlign: 'center',
+})
 
-  ...responsiveRules('text-align-right', {
-    textAlign: 'right',
-  }),
+_responsiveRule(rules, `text-align-right`, {
+  textAlign: 'right',
+})
 
-  ...responsiveRules('text-align-justify', {
-    textAlign: 'justify',
-  }),
-}
+_responsiveRule(rules, `text-align-justify`, {
+  textAlign: 'justify',
+})
+
+export const fontStyle: Style = {layers: {primitive: rules}}
 
 // .font {
 //   position: relative;