@serenis/design-tokens 0.21.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +13 -14
  2. package/dist/base.css +1 -1
  3. package/dist/constants/index.d.ts +1 -0
  4. package/dist/constants/index.js +1 -0
  5. package/dist/constants/z-index.d.ts +31 -0
  6. package/dist/constants/z-index.js +31 -0
  7. package/dist/cssvar/index.d.ts +1 -0
  8. package/dist/cssvar/index.js +1 -0
  9. package/dist/cssvar/z-index.d.ts +11 -0
  10. package/dist/cssvar/z-index.js +12 -0
  11. package/dist/index.cjs +144 -2
  12. package/dist/index.css +1 -1
  13. package/dist/serenis-dark.css +1 -1
  14. package/dist/serenis-light.css +1 -1
  15. package/dist/types/index.d.ts +1 -0
  16. package/dist/types/index.js +1 -0
  17. package/dist/types/utility-class.d.ts +94 -0
  18. package/dist/types/utility-class.js +94 -0
  19. package/dist/types/z-index.d.ts +3 -0
  20. package/dist/types/z-index.js +1 -0
  21. package/dist/utilities.css +1 -1
  22. package/dist/utils/cx.d.ts +5 -2
  23. package/package.json +4 -4
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # design-tokens
1
+ # @serenis/design-tokens
2
2
 
3
3
  Design tokens for the Serenis design system. Generates typed JS constants, CSS custom properties, cssvar accessor helpers, and CSS utility classes — all from a single set of [DTCG](https://tr.designtokens.org/format/) JSON files.
4
4
 
@@ -10,29 +10,25 @@ See [ADR-0011](../../docs/adr/0011-design-tokens-architecture.md) for architectu
10
10
  npm install @serenis/design-tokens
11
11
  ```
12
12
 
13
- Peer dependencies (must be installed by the consuming app):
14
-
15
- - `react` >= 19.0.0 (for Storybook stories only; not required at runtime for CSS/JS constants)
16
-
17
13
  Import the CSS bundle in your app entry point:
18
14
 
19
15
  ```ts
20
16
  import '@serenis/design-tokens/css'
21
17
  ```
22
18
 
23
- Sub-paths for advanced use cases: `@serenis/design-tokens/css/base`, `css/serenis-light`, `css/serenis-dark`, `utilities`.
19
+ Sub-paths for advanced use cases: `@serenis/design-tokens/css/base`, `@serenis/design-tokens/css/serenis-light`, `@serenis/design-tokens/css/serenis-dark`, `@serenis/design-tokens/utilities`.
24
20
 
25
21
  ## Quick start
26
22
 
27
23
  ```bash
28
24
  # Build all outputs (codegen + CSS + JS bundle)
29
- yarn workspace design-tokens build
25
+ yarn workspace @serenis/design-tokens build
30
26
 
31
27
  # Run tests (includes golden snapshot tests)
32
- yarn workspace design-tokens test
28
+ yarn workspace @serenis/design-tokens test
33
29
 
34
30
  # Update golden snapshots after intentional changes
35
- yarn workspace design-tokens test -- -u
31
+ yarn workspace @serenis/design-tokens test -- -u
36
32
  ```
37
33
 
38
34
  ## Directory structure
@@ -177,10 +173,13 @@ For example, `md\:flex` applies `display: flex` when the viewport is at least 60
177
173
  - Spacing gap (`gap-*`, `gap-x-*`, `gap-y-*`)
178
174
  - Display (`flex`, `grid`, `block`, `inline-flex`, `inline-block`, `hidden`)
179
175
  - Flex direction (`flex-row`, `flex-col`)
180
- - Alignment (`items-center`, `items-start`, `items-end`)
176
+ - Alignment (`items-center`, `items-start`, `items-end`, `items-stretch`)
181
177
  - Justify (`justify-center`, `justify-between`, `justify-start`, `justify-end`)
178
+ - Flex wrap (`flex-wrap`, `flex-nowrap`)
179
+ - Flex grow/shrink (`grow`, `grow-0`, `shrink`, `shrink-0`)
180
+ - Flex basis (`basis-1/12`–`basis-11/12`, `basis-full`, `basis-auto`, `basis-{container}`)
182
181
 
183
- **Utilities without responsive variants:** spacing sizing (`w-*`, `h-*`, `size-*`), border radius (`rounded-*`), colors (`bg-*`, `text-{color}`, `border-{color}`), border width (`border-*`), elevation (`elevation-*`), font weight, font family, opacity (`opacity-*`), typography composites (`typography-*`), position, overflow, text-align, flex-wrap, border-style, and transition.
182
+ **Utilities without responsive variants:** spacing sizing (`w-*`, `h-*`, `size-*` from spacing `0` only), container width (`w-{container}`, `min-w-{container}`, `max-w-{container}`), border radius (`rounded-*`), colors (`bg-*`, `text-{color}`, `border-{color}`), border width (`border-*`), elevation (`elevation-*`), z-index (`z-*`), font weight, font family, opacity (`opacity-*`), typography composites (`typography-*`), position, overflow (`overflow-*`, `truncate`), text-align, text-transform (`uppercase`, `lowercase`, `capitalize`, `normal-case`), white-space (`whitespace-*`), border-style, and transition.
184
183
 
185
184
  #### `cx` helper
186
185
 
@@ -208,9 +207,9 @@ import { cx } from '@serenis/design-tokens'
208
207
  }
209
208
  ```
210
209
 
211
- 2. **Build**: Run `yarn workspace design-tokens build`. The pipeline auto-discovers branches by `$type`.
210
+ 2. **Build**: Run `yarn workspace @serenis/design-tokens build`. The pipeline auto-discovers branches by `$type`.
212
211
 
213
- 3. **Update snapshots**: Run `yarn workspace design-tokens test -- -u` to update golden snapshots.
212
+ 3. **Update snapshots**: Run `yarn workspace @serenis/design-tokens test -- -u` to update golden snapshots.
214
213
 
215
214
  4. The new token is immediately available as:
216
215
  - JS constant: `MY_BRANCH_MY_TOKEN` / `MY_BRANCH_MY_TOKEN_VALUE`
@@ -236,7 +235,7 @@ import { cx } from '@serenis/design-tokens'
236
235
  | `duration` | time | Registry (simple) |
237
236
  | `fontFamily` | font-family | Registry (simple) |
238
237
  | `fontWeight` | font-weight | Registry (simple) |
239
- | `number` | opacity | Registry (simple) |
238
+ | `number` | opacity, z-index | Registry (simple) |
240
239
  | `string` | media-query | Registry (simple) |
241
240
  | `shadow` | elevation | Dedicated (theme layers) |
242
241
  | `color` | color | Dedicated (theme layers) |
package/dist/base.css CHANGED
@@ -1 +1 @@
1
- :root{--srns-font-family-degular-display: "Degular Display", degular-display, serif;--srns-font-family-mona-sans: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-font-family-monospace: monospace;--srns-font-size-10: 10px;--srns-font-size-12: 12px;--srns-font-size-14: 14px;--srns-font-size-16: 16px;--srns-font-size-18: 18px;--srns-font-size-20: 20px;--srns-font-size-24: 24px;--srns-font-size-32: 32px;--srns-font-size-40: 40px;--srns-font-size-48: 48px;--srns-font-size-56: 56px;--srns-font-size-64: 64px;--srns-font-size-72: 72px;--srns-line-height-12: 12px;--srns-line-height-14: 14px;--srns-line-height-16: 16px;--srns-line-height-20: 20px;--srns-line-height-24: 24px;--srns-line-height-32: 32px;--srns-line-height-40: 40px;--srns-line-height-48: 48px;--srns-line-height-56: 56px;--srns-line-height-64: 64px;--srns-line-height-72: 72px;--srns-font-weight-400: 400;--srns-font-weight-500: 500;--srns-font-weight-600: 600;--srns-letter-spacing-0: 0;--srns-letter-spacing-112: 1.12px;--srns-letter-spacing-128: 1.28px;--srns-letter-spacing-144: 1.44px;--srns-letter-spacing-020: .2px;--srns-letter-spacing-024: .24px;--srns-letter-spacing-028: .28px;--srns-letter-spacing-032: .32px;--srns-letter-spacing-036: .36px;--srns-letter-spacing-040: .4px;--srns-letter-spacing-048: .48px;--srns-letter-spacing-056: .56px;--srns-letter-spacing-064: .64px;--srns-letter-spacing-072: .72px;--srns-letter-spacing-080: .8px;--srns-letter-spacing-096: .96px;--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 56px;--srns-typography-public-h0-font-size: 56px;--srns-typography-public-h0-letter-spacing: 1.12px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 32px;--srns-typography-public-h1-font-size: 32px;--srns-typography-public-h1-letter-spacing: .64px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 24px;--srns-typography-public-h2-font-size: 24px;--srns-typography-public-h2-letter-spacing: .48px;--srns-typography-public-h3-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h3-font-weight: 400;--srns-typography-public-h3-line-height: 24px;--srns-typography-public-h3-font-size: 20px;--srns-typography-public-h3-letter-spacing: .4px;--srns-typography-public-paragraph-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-paragraph-font-weight: 400;--srns-typography-public-paragraph-line-height: 24px;--srns-typography-public-paragraph-font-size: 16px;--srns-typography-public-paragraph-letter-spacing: 0;--srns-typography-public-caption-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-caption-font-weight: 400;--srns-typography-public-caption-line-height: 24px;--srns-typography-public-caption-font-size: 14px;--srns-typography-public-caption-letter-spacing: 0;--srns-typography-public-footnote-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-footnote-font-weight: 500;--srns-typography-public-footnote-line-height: 24px;--srns-typography-public-footnote-font-size: 12px;--srns-typography-public-footnote-letter-spacing: 0;--srns-typography-public-micro-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-micro-font-weight: 500;--srns-typography-public-micro-line-height: 16px;--srns-typography-public-micro-font-size: 12px;--srns-typography-public-micro-letter-spacing: 0;--srns-typography-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-h0-font-weight: 600;--srns-typography-h0-line-height: 56px;--srns-typography-h0-font-size: 56px;--srns-typography-h0-letter-spacing: 1.12px;--srns-typography-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-h1-font-weight: 600;--srns-typography-h1-line-height: 32px;--srns-typography-h1-font-size: 32px;--srns-typography-h1-letter-spacing: .64px;--srns-typography-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-h2-font-weight: 600;--srns-typography-h2-line-height: 24px;--srns-typography-h2-font-size: 24px;--srns-typography-h2-letter-spacing: .48px;--srns-typography-h3-font-family: "Degular Display", degular-display, serif;--srns-typography-h3-font-weight: 600;--srns-typography-h3-line-height: 24px;--srns-typography-h3-font-size: 20px;--srns-typography-h3-letter-spacing: .4px;--srns-typography-paragraph-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-paragraph-font-weight: 400;--srns-typography-paragraph-line-height: 24px;--srns-typography-paragraph-font-size: 16px;--srns-typography-paragraph-letter-spacing: 0;--srns-typography-caption-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-caption-font-weight: 400;--srns-typography-caption-line-height: 24px;--srns-typography-caption-font-size: 14px;--srns-typography-caption-letter-spacing: 0;--srns-typography-footnote-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-footnote-font-weight: 500;--srns-typography-footnote-line-height: 16px;--srns-typography-footnote-font-size: 12px;--srns-typography-footnote-letter-spacing: 0;--srns-typography-micro-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-micro-font-weight: 500;--srns-typography-micro-line-height: 14px;--srns-typography-micro-font-size: 10px;--srns-typography-micro-letter-spacing: 0;--srns-spacing-0: 0;--srns-spacing-4xs: 2px;--srns-spacing-3xs: 4px;--srns-spacing-2xs: 6px;--srns-spacing-xs: 8px;--srns-spacing-sm: 12px;--srns-spacing-md: 16px;--srns-spacing-lg: 24px;--srns-spacing-xl: 32px;--srns-spacing-2xl: 40px;--srns-spacing-3xl: 48px;--srns-spacing-4xl: 64px;--srns-spacing-5xl: 80px;--srns-spacing-6xl: 96px;--srns-spacing-7xl: 112px;--srns-container-3xs: 256px;--srns-container-2xs: 288px;--srns-container-xs: 320px;--srns-container-sm: 384px;--srns-container-md: 448px;--srns-container-lg: 512px;--srns-container-xl: 576px;--srns-container-2xl: 672px;--srns-container-3xl: 768px;--srns-container-4xl: 896px;--srns-container-5xl: 1024px;--srns-container-6xl: 1152px;--srns-container-7xl: 1280px;--srns-border-radius-0: 0;--srns-border-radius-4xs: 2px;--srns-border-radius-3xs: 4px;--srns-border-radius-2xs: 6px;--srns-border-radius-xs: 8px;--srns-border-radius-sm: 12px;--srns-border-radius-md: 16px;--srns-border-radius-lg: 24px;--srns-border-radius-xl: 32px;--srns-border-radius-2xl: 40px;--srns-border-radius-3xl: 48px;--srns-border-radius-circle: 9999px;--srns-opacity-0: 0;--srns-opacity-8: .08;--srns-opacity-16: .16;--srns-opacity-24: .24;--srns-opacity-32: .32;--srns-opacity-40: .4;--srns-opacity-48: .48;--srns-opacity-56: .56;--srns-opacity-64: .64;--srns-opacity-72: .72;--srns-opacity-80: .8;--srns-opacity-88: .88;--srns-opacity-96: .96;--srns-opacity-100: 1;--srns-time-0: 0ms;--srns-time-150: 150ms;--srns-time-300: 300ms;--srns-time-500: 500ms;--srns-time-700: 700ms;--srns-border-width-0: 0;--srns-border-width-1: 1px;--srns-border-width-2: 2px;--srns-border-width-4: 4px;--srns-border-width-05: .5px;--srns-elevation-0: 0px 0px 0px 0px #00000000;--srns-breakpoint-sm: 0;--srns-breakpoint-md: 601px;--srns-breakpoint-lg: 1025px;--srns-breakpoint-xl: 1441px;--srns-media-query-sm: (max-width: 600px );--srns-media-query-md: (min-width: 600px ) and (max-width: 1024px );--srns-media-query-lg: (min-width: 1024px ) and (max-width: 1440px );--srns-media-query-xl: (min-width: 1440px );--srns-media-query-gt-sm: (min-width: 601px);--srns-media-query-gt-md: (min-width: 1025px);--srns-media-query-gt-lg: (min-width: 1441px);--srns-media-query-lt-md: (max-width: 600px );--srns-media-query-lt-lg: (max-width: 1024px );--srns-media-query-lt-xl: (max-width: 1440px );--srns-color-white: #ffffff;--srns-color-black: #0b0b1e;--srns-color-transparent: rgba(0, 0, 0, 0);--srns-color-grey-10: #ffffff;--srns-color-grey-20: #f6f7fd;--srns-color-grey-30: #ecedf9;--srns-color-grey-40: #d7d7ea;--srns-color-grey-50: #a7a7d2;--srns-color-grey-60: #8686c1;--srns-color-grey-70: #7a7aae;--srns-color-grey-80: #5d5d98;--srns-color-grey-90: #3e3e79;--srns-color-grey-100: #2d2d58;--srns-color-grey-110: #1c1c36;--srns-color-grey-120: #0b0b1e;--srns-color-grey: #7a7aae;--srns-color-minttea-20: #cafacb;--srns-color-minttea-40: #179a92;--srns-color-minttea-60: #003b2e;--srns-color-minttea-80: #061a1d;--srns-color-minttea: #cafacb;--srns-color-medicine-20: #d0f9fd;--srns-color-medicine-40: #6be5f5;--srns-color-medicine-60: #0d99bb;--srns-color-medicine-80: #175d73;--srns-color-medicine: #0d99bb;--srns-color-mental-20: #f1d6ff;--srns-color-mental-40: #ce8ef2;--srns-color-mental-60: #ae4fdd;--srns-color-mental-80: #7a2c9d;--srns-color-mental: #ae4fdd;--srns-color-nutrition-20: #ccf5e0;--srns-color-nutrition-40: #83a8a4;--srns-color-nutrition-60: #225559;--srns-color-nutrition-80: #1f4042;--srns-color-nutrition: #225559}@media(min-width:601px){:root{--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 72px;--srns-typography-public-h0-font-size: 72px;--srns-typography-public-h0-letter-spacing: 1.44px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 48px;--srns-typography-public-h1-font-size: 48px;--srns-typography-public-h1-letter-spacing: .96px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 40px;--srns-typography-public-h2-font-size: 40px;--srns-typography-public-h2-letter-spacing: .8px}}@media(min-width:1025px){:root{--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 72px;--srns-typography-public-h0-font-size: 72px;--srns-typography-public-h0-letter-spacing: 1.44px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 48px;--srns-typography-public-h1-font-size: 48px;--srns-typography-public-h1-letter-spacing: .96px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 40px;--srns-typography-public-h2-font-size: 40px;--srns-typography-public-h2-letter-spacing: .8px}}
1
+ :root{--srns-font-family-degular-display: "Degular Display", degular-display, serif;--srns-font-family-mona-sans: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-font-family-monospace: monospace;--srns-font-size-10: 10px;--srns-font-size-12: 12px;--srns-font-size-14: 14px;--srns-font-size-16: 16px;--srns-font-size-18: 18px;--srns-font-size-20: 20px;--srns-font-size-24: 24px;--srns-font-size-32: 32px;--srns-font-size-40: 40px;--srns-font-size-48: 48px;--srns-font-size-56: 56px;--srns-font-size-64: 64px;--srns-font-size-72: 72px;--srns-line-height-12: 12px;--srns-line-height-14: 14px;--srns-line-height-16: 16px;--srns-line-height-20: 20px;--srns-line-height-24: 24px;--srns-line-height-32: 32px;--srns-line-height-40: 40px;--srns-line-height-48: 48px;--srns-line-height-56: 56px;--srns-line-height-64: 64px;--srns-line-height-72: 72px;--srns-font-weight-400: 400;--srns-font-weight-500: 500;--srns-font-weight-600: 600;--srns-letter-spacing-0: 0;--srns-letter-spacing-112: 1.12px;--srns-letter-spacing-128: 1.28px;--srns-letter-spacing-144: 1.44px;--srns-letter-spacing-020: .2px;--srns-letter-spacing-024: .24px;--srns-letter-spacing-028: .28px;--srns-letter-spacing-032: .32px;--srns-letter-spacing-036: .36px;--srns-letter-spacing-040: .4px;--srns-letter-spacing-048: .48px;--srns-letter-spacing-056: .56px;--srns-letter-spacing-064: .64px;--srns-letter-spacing-072: .72px;--srns-letter-spacing-080: .8px;--srns-letter-spacing-096: .96px;--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 56px;--srns-typography-public-h0-font-size: 56px;--srns-typography-public-h0-letter-spacing: 1.12px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 32px;--srns-typography-public-h1-font-size: 32px;--srns-typography-public-h1-letter-spacing: .64px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 24px;--srns-typography-public-h2-font-size: 24px;--srns-typography-public-h2-letter-spacing: .48px;--srns-typography-public-h3-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h3-font-weight: 400;--srns-typography-public-h3-line-height: 24px;--srns-typography-public-h3-font-size: 20px;--srns-typography-public-h3-letter-spacing: .4px;--srns-typography-public-paragraph-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-paragraph-font-weight: 400;--srns-typography-public-paragraph-line-height: 24px;--srns-typography-public-paragraph-font-size: 16px;--srns-typography-public-paragraph-letter-spacing: 0;--srns-typography-public-caption-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-caption-font-weight: 400;--srns-typography-public-caption-line-height: 24px;--srns-typography-public-caption-font-size: 14px;--srns-typography-public-caption-letter-spacing: 0;--srns-typography-public-footnote-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-footnote-font-weight: 500;--srns-typography-public-footnote-line-height: 24px;--srns-typography-public-footnote-font-size: 12px;--srns-typography-public-footnote-letter-spacing: 0;--srns-typography-public-micro-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-public-micro-font-weight: 500;--srns-typography-public-micro-line-height: 16px;--srns-typography-public-micro-font-size: 12px;--srns-typography-public-micro-letter-spacing: 0;--srns-typography-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-h0-font-weight: 600;--srns-typography-h0-line-height: 56px;--srns-typography-h0-font-size: 56px;--srns-typography-h0-letter-spacing: 1.12px;--srns-typography-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-h1-font-weight: 600;--srns-typography-h1-line-height: 32px;--srns-typography-h1-font-size: 32px;--srns-typography-h1-letter-spacing: .64px;--srns-typography-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-h2-font-weight: 600;--srns-typography-h2-line-height: 24px;--srns-typography-h2-font-size: 24px;--srns-typography-h2-letter-spacing: .48px;--srns-typography-h3-font-family: "Degular Display", degular-display, serif;--srns-typography-h3-font-weight: 600;--srns-typography-h3-line-height: 24px;--srns-typography-h3-font-size: 20px;--srns-typography-h3-letter-spacing: .4px;--srns-typography-paragraph-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-paragraph-font-weight: 400;--srns-typography-paragraph-line-height: 24px;--srns-typography-paragraph-font-size: 16px;--srns-typography-paragraph-letter-spacing: 0;--srns-typography-caption-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-caption-font-weight: 400;--srns-typography-caption-line-height: 24px;--srns-typography-caption-font-size: 14px;--srns-typography-caption-letter-spacing: 0;--srns-typography-footnote-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-footnote-font-weight: 500;--srns-typography-footnote-line-height: 16px;--srns-typography-footnote-font-size: 12px;--srns-typography-footnote-letter-spacing: 0;--srns-typography-micro-font-family: "Mona Sans", MonaSans, mona-sans, "Mona Sans Fallback", mona-sans-fallback, Arial, system-ui, sans-serif;--srns-typography-micro-font-weight: 500;--srns-typography-micro-line-height: 14px;--srns-typography-micro-font-size: 10px;--srns-typography-micro-letter-spacing: 0;--srns-spacing-0: 0;--srns-spacing-4xs: 2px;--srns-spacing-3xs: 4px;--srns-spacing-2xs: 6px;--srns-spacing-xs: 8px;--srns-spacing-sm: 12px;--srns-spacing-md: 16px;--srns-spacing-lg: 24px;--srns-spacing-xl: 32px;--srns-spacing-2xl: 40px;--srns-spacing-3xl: 48px;--srns-spacing-4xl: 64px;--srns-spacing-5xl: 80px;--srns-spacing-6xl: 96px;--srns-spacing-7xl: 112px;--srns-container-3xs: 256px;--srns-container-2xs: 288px;--srns-container-xs: 320px;--srns-container-sm: 384px;--srns-container-md: 448px;--srns-container-lg: 512px;--srns-container-xl: 576px;--srns-container-2xl: 672px;--srns-container-3xl: 768px;--srns-container-4xl: 896px;--srns-container-5xl: 1024px;--srns-container-6xl: 1152px;--srns-container-7xl: 1280px;--srns-border-radius-0: 0;--srns-border-radius-4xs: 2px;--srns-border-radius-3xs: 4px;--srns-border-radius-2xs: 6px;--srns-border-radius-xs: 8px;--srns-border-radius-sm: 12px;--srns-border-radius-md: 16px;--srns-border-radius-lg: 24px;--srns-border-radius-xl: 32px;--srns-border-radius-2xl: 40px;--srns-border-radius-3xl: 48px;--srns-border-radius-circle: 9999px;--srns-opacity-0: 0;--srns-opacity-8: .08;--srns-opacity-16: .16;--srns-opacity-24: .24;--srns-opacity-32: .32;--srns-opacity-40: .4;--srns-opacity-48: .48;--srns-opacity-56: .56;--srns-opacity-64: .64;--srns-opacity-72: .72;--srns-opacity-80: .8;--srns-opacity-88: .88;--srns-opacity-96: .96;--srns-opacity-100: 1;--srns-z-index-0: 0;--srns-z-index-100: 100;--srns-z-index-200: 200;--srns-z-index-300: 300;--srns-z-index-400: 400;--srns-z-index-500: 500;--srns-z-index-9999: 9999;--srns-z-index--100: -100;--srns-time-0: 0ms;--srns-time-150: 150ms;--srns-time-300: 300ms;--srns-time-500: 500ms;--srns-time-700: 700ms;--srns-border-width-0: 0;--srns-border-width-1: 1px;--srns-border-width-2: 2px;--srns-border-width-4: 4px;--srns-border-width-05: .5px;--srns-elevation-0: 0px 0px 0px 0px #00000000;--srns-breakpoint-sm: 0;--srns-breakpoint-md: 601px;--srns-breakpoint-lg: 1025px;--srns-breakpoint-xl: 1441px;--srns-media-query-sm: (max-width: 600px );--srns-media-query-md: (min-width: 600px ) and (max-width: 1024px );--srns-media-query-lg: (min-width: 1024px ) and (max-width: 1440px );--srns-media-query-xl: (min-width: 1440px );--srns-media-query-gt-sm: (min-width: 601px);--srns-media-query-gt-md: (min-width: 1025px);--srns-media-query-gt-lg: (min-width: 1441px);--srns-media-query-lt-md: (max-width: 600px );--srns-media-query-lt-lg: (max-width: 1024px );--srns-media-query-lt-xl: (max-width: 1440px );--srns-color-white: #ffffff;--srns-color-black: #0b0b1e;--srns-color-transparent: rgba(0, 0, 0, 0);--srns-color-grey-10: #ffffff;--srns-color-grey-20: #f6f7fd;--srns-color-grey-30: #ecedf9;--srns-color-grey-40: #d7d7ea;--srns-color-grey-50: #a7a7d2;--srns-color-grey-60: #8686c1;--srns-color-grey-70: #7a7aae;--srns-color-grey-80: #5d5d98;--srns-color-grey-90: #3e3e79;--srns-color-grey-100: #2d2d58;--srns-color-grey-110: #1c1c36;--srns-color-grey-120: #0b0b1e;--srns-color-grey: #7a7aae;--srns-color-minttea-20: #cafacb;--srns-color-minttea-40: #179a92;--srns-color-minttea-60: #003b2e;--srns-color-minttea-80: #061a1d;--srns-color-minttea: #cafacb;--srns-color-medicine-20: #d0f9fd;--srns-color-medicine-40: #6be5f5;--srns-color-medicine-60: #0d99bb;--srns-color-medicine-80: #175d73;--srns-color-medicine: #0d99bb;--srns-color-mental-20: #f1d6ff;--srns-color-mental-40: #ce8ef2;--srns-color-mental-60: #ae4fdd;--srns-color-mental-80: #7a2c9d;--srns-color-mental: #ae4fdd;--srns-color-nutrition-20: #ccf5e0;--srns-color-nutrition-40: #83a8a4;--srns-color-nutrition-60: #225559;--srns-color-nutrition-80: #1f4042;--srns-color-nutrition: #225559}@media(min-width:601px){:root{--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 72px;--srns-typography-public-h0-font-size: 72px;--srns-typography-public-h0-letter-spacing: 1.44px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 48px;--srns-typography-public-h1-font-size: 48px;--srns-typography-public-h1-letter-spacing: .96px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 40px;--srns-typography-public-h2-font-size: 40px;--srns-typography-public-h2-letter-spacing: .8px}}@media(min-width:1025px){:root{--srns-typography-public-h0-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h0-font-weight: 600;--srns-typography-public-h0-line-height: 72px;--srns-typography-public-h0-font-size: 72px;--srns-typography-public-h0-letter-spacing: 1.44px;--srns-typography-public-h1-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h1-font-weight: 600;--srns-typography-public-h1-line-height: 48px;--srns-typography-public-h1-font-size: 48px;--srns-typography-public-h1-letter-spacing: .96px;--srns-typography-public-h2-font-family: "Degular Display", degular-display, serif;--srns-typography-public-h2-font-weight: 600;--srns-typography-public-h2-line-height: 40px;--srns-typography-public-h2-font-size: 40px;--srns-typography-public-h2-letter-spacing: .8px}}
package/dist/constants/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export * from './time.js'
10
10
  export * from './font-family.js'
11
11
  export * from './font-weight.js'
12
12
  export * from './opacity.js'
13
+ export * from './z-index.js'
13
14
  export * from './media-query.js'
14
15
  export * from './elevation.js'
15
16
  export * as elevationBoxShadowSerenisLight from './elevation-box-shadow-serenis-light.js'
package/dist/constants/index.js CHANGED
@@ -10,6 +10,7 @@ export * from './time.js'
10
10
  export * from './font-family.js'
11
11
  export * from './font-weight.js'
12
12
  export * from './opacity.js'
13
+ export * from './z-index.js'
13
14
  export * from './media-query.js'
14
15
  export * from './elevation.js'
15
16
  export * as elevationBoxShadowSerenisLight from './elevation-box-shadow-serenis-light.js'
package/dist/constants/z-index.d.ts ADDED
@@ -0,0 +1,31 @@
1
+ /** `-100` */
2
+ export declare const Z_INDEX_NEG_100: 'var(--srns-z-index--100)'
3
+ export declare const Z_INDEX_NEG_100_VALUE: '-100'
4
+
5
+ /** `0` */
6
+ export declare const Z_INDEX_0: 'var(--srns-z-index-0)'
7
+ export declare const Z_INDEX_0_VALUE: '0'
8
+
9
+ /** `100` */
10
+ export declare const Z_INDEX_100: 'var(--srns-z-index-100)'
11
+ export declare const Z_INDEX_100_VALUE: '100'
12
+
13
+ /** `200` */
14
+ export declare const Z_INDEX_200: 'var(--srns-z-index-200)'
15
+ export declare const Z_INDEX_200_VALUE: '200'
16
+
17
+ /** `300` */
18
+ export declare const Z_INDEX_300: 'var(--srns-z-index-300)'
19
+ export declare const Z_INDEX_300_VALUE: '300'
20
+
21
+ /** `400` */
22
+ export declare const Z_INDEX_400: 'var(--srns-z-index-400)'
23
+ export declare const Z_INDEX_400_VALUE: '400'
24
+
25
+ /** `500` */
26
+ export declare const Z_INDEX_500: 'var(--srns-z-index-500)'
27
+ export declare const Z_INDEX_500_VALUE: '500'
28
+
29
+ /** `9999` */
30
+ export declare const Z_INDEX_9999: 'var(--srns-z-index-9999)'
31
+ export declare const Z_INDEX_9999_VALUE: '9999'
package/dist/constants/z-index.js ADDED
@@ -0,0 +1,31 @@
1
+ /** `-100` */
2
+ export const Z_INDEX_NEG_100 = 'var(--srns-z-index--100)'
3
+ export const Z_INDEX_NEG_100_VALUE = '-100'
4
+
5
+ /** `0` */
6
+ export const Z_INDEX_0 = 'var(--srns-z-index-0)'
7
+ export const Z_INDEX_0_VALUE = '0'
8
+
9
+ /** `100` */
10
+ export const Z_INDEX_100 = 'var(--srns-z-index-100)'
11
+ export const Z_INDEX_100_VALUE = '100'
12
+
13
+ /** `200` */
14
+ export const Z_INDEX_200 = 'var(--srns-z-index-200)'
15
+ export const Z_INDEX_200_VALUE = '200'
16
+
17
+ /** `300` */
18
+ export const Z_INDEX_300 = 'var(--srns-z-index-300)'
19
+ export const Z_INDEX_300_VALUE = '300'
20
+
21
+ /** `400` */
22
+ export const Z_INDEX_400 = 'var(--srns-z-index-400)'
23
+ export const Z_INDEX_400_VALUE = '400'
24
+
25
+ /** `500` */
26
+ export const Z_INDEX_500 = 'var(--srns-z-index-500)'
27
+ export const Z_INDEX_500_VALUE = '500'
28
+
29
+ /** `9999` */
30
+ export const Z_INDEX_9999 = 'var(--srns-z-index-9999)'
31
+ export const Z_INDEX_9999_VALUE = '9999'
package/dist/cssvar/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export * from './time.js'
10
10
  export * from './font-family.js'
11
11
  export * from './font-weight.js'
12
12
  export * from './opacity.js'
13
+ export * from './z-index.js'
13
14
  export * from './media-query.js'
14
15
  export * from './elevation.js'
15
16
  export * from './typography.js'
package/dist/cssvar/index.js CHANGED
@@ -10,6 +10,7 @@ export * from './time.js'
10
10
  export * from './font-family.js'
11
11
  export * from './font-weight.js'
12
12
  export * from './opacity.js'
13
+ export * from './z-index.js'
13
14
  export * from './media-query.js'
14
15
  export * from './elevation.js'
15
16
  export * from './typography.js'
package/dist/cssvar/z-index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { type ZIndexName } from '../types/z-index.js'
2
+
3
+ export declare const DESIGN_TOKENS_Z_INDEX_PREFIX: 'z-index'
4
+
5
+ export declare const cssvarNameZIndex: (zIndex: ZIndexName) =>
6
+ `--srns-z-index-${ZIndexName}`
7
+
8
+ export declare const cssvarValueZIndex: (zIndex: ZIndexName) => string
9
+
10
+ export declare const cssvarZIndex: (zIndex: ZIndexName) =>
11
+ `var(--srns-z-index-${ZIndexName})`
package/dist/cssvar/z-index.js ADDED
@@ -0,0 +1,12 @@
1
+ import { cssvar, cssvarName, cssvarValue } from '../utils/cssvar.js'
2
+
3
+ export const DESIGN_TOKENS_Z_INDEX_PREFIX = 'z-index'
4
+
5
+ export const cssvarNameZIndex = (zIndex) =>
6
+ cssvarName(`${DESIGN_TOKENS_Z_INDEX_PREFIX}-${zIndex}`)
7
+
8
+ export const cssvarValueZIndex = (zIndex) =>
9
+ cssvarValue(`${DESIGN_TOKENS_Z_INDEX_PREFIX}-${zIndex}`)
10
+
11
+ export const cssvarZIndex = (zIndex) =>
12
+ cssvar(`${DESIGN_TOKENS_Z_INDEX_PREFIX}-${zIndex}`)
package/dist/index.cjs CHANGED
@@ -199,6 +199,7 @@ __export(index_exports, {
199
199
  DESIGN_TOKENS_TIME_PREFIX: () => DESIGN_TOKENS_TIME_PREFIX,
200
200
  DESIGN_TOKENS_TYPOGRAPHY_PREFIX: () => DESIGN_TOKENS_TYPOGRAPHY_PREFIX,
201
201
  DESIGN_TOKENS_TYPOGRAPHY_PROPERTIES: () => DESIGN_TOKENS_TYPOGRAPHY_PROPERTIES,
202
+ DESIGN_TOKENS_Z_INDEX_PREFIX: () => DESIGN_TOKENS_Z_INDEX_PREFIX,
202
203
  ELEVATION_0: () => ELEVATION_0,
203
204
  ELEVATION_0_VALUE: () => ELEVATION_0_VALUE,
204
205
  ELEVATION_2XS: () => ELEVATION_2XS,
@@ -548,6 +549,22 @@ __export(index_exports, {
548
549
  TYPOGRAPHY_PUBLIC_PARAGRAPH_LETTER_SPACING_VALUE: () => TYPOGRAPHY_PUBLIC_PARAGRAPH_LETTER_SPACING_VALUE,
549
550
  TYPOGRAPHY_PUBLIC_PARAGRAPH_LINE_HEIGHT: () => TYPOGRAPHY_PUBLIC_PARAGRAPH_LINE_HEIGHT,
550
551
  TYPOGRAPHY_PUBLIC_PARAGRAPH_LINE_HEIGHT_VALUE: () => TYPOGRAPHY_PUBLIC_PARAGRAPH_LINE_HEIGHT_VALUE,
552
+ Z_INDEX_0: () => Z_INDEX_0,
553
+ Z_INDEX_0_VALUE: () => Z_INDEX_0_VALUE,
554
+ Z_INDEX_100: () => Z_INDEX_100,
555
+ Z_INDEX_100_VALUE: () => Z_INDEX_100_VALUE,
556
+ Z_INDEX_200: () => Z_INDEX_200,
557
+ Z_INDEX_200_VALUE: () => Z_INDEX_200_VALUE,
558
+ Z_INDEX_300: () => Z_INDEX_300,
559
+ Z_INDEX_300_VALUE: () => Z_INDEX_300_VALUE,
560
+ Z_INDEX_400: () => Z_INDEX_400,
561
+ Z_INDEX_400_VALUE: () => Z_INDEX_400_VALUE,
562
+ Z_INDEX_500: () => Z_INDEX_500,
563
+ Z_INDEX_500_VALUE: () => Z_INDEX_500_VALUE,
564
+ Z_INDEX_9999: () => Z_INDEX_9999,
565
+ Z_INDEX_9999_VALUE: () => Z_INDEX_9999_VALUE,
566
+ Z_INDEX_NEG_100: () => Z_INDEX_NEG_100,
567
+ Z_INDEX_NEG_100_VALUE: () => Z_INDEX_NEG_100_VALUE,
551
568
  borderRadiusNames: () => borderRadiusNames,
552
569
  borderWidthNames: () => borderWidthNames,
553
570
  breakpointNames: () => breakpointNames,
@@ -585,6 +602,7 @@ __export(index_exports, {
585
602
  cssvarNameSpacing: () => cssvarNameSpacing,
586
603
  cssvarNameTime: () => cssvarNameTime,
587
604
  cssvarNameTypographyProp: () => cssvarNameTypographyProp,
605
+ cssvarNameZIndex: () => cssvarNameZIndex,
588
606
  cssvarOpacity: () => cssvarOpacity,
589
607
  cssvarSpacing: () => cssvarSpacing,
590
608
  cssvarTime: () => cssvarTime,
@@ -607,6 +625,8 @@ __export(index_exports, {
607
625
  cssvarValueSpacing: () => cssvarValueSpacing,
608
626
  cssvarValueTime: () => cssvarValueTime,
609
627
  cssvarValueTypographyProp: () => cssvarValueTypographyProp,
628
+ cssvarValueZIndex: () => cssvarValueZIndex,
629
+ cssvarZIndex: () => cssvarZIndex,
610
630
  cx: () => cx,
611
631
  elevationBoxShadowSerenisDark: () => elevation_box_shadow_serenis_dark_exports,
612
632
  elevationBoxShadowSerenisLight: () => elevation_box_shadow_serenis_light_exports,
@@ -621,7 +641,8 @@ __export(index_exports, {
621
641
  spacingNames: () => spacingNames,
622
642
  timeNames: () => timeNames,
623
643
  typographyNames: () => typographyNames,
624
- utilityClassNames: () => utilityClassNames
644
+ utilityClassNames: () => utilityClassNames,
645
+ zIndexNames: () => zIndexNames
625
646
  });
626
647
  module.exports = __toCommonJS(index_exports);
627
648
 
@@ -877,6 +898,24 @@ var OPACITY_96_VALUE = "0.96";
877
898
  var OPACITY_100 = "var(--srns-opacity-100)";
878
899
  var OPACITY_100_VALUE = "1";
879
900
 
901
+ // dist/constants/z-index.js
902
+ var Z_INDEX_NEG_100 = "var(--srns-z-index--100)";
903
+ var Z_INDEX_NEG_100_VALUE = "-100";
904
+ var Z_INDEX_0 = "var(--srns-z-index-0)";
905
+ var Z_INDEX_0_VALUE = "0";
906
+ var Z_INDEX_100 = "var(--srns-z-index-100)";
907
+ var Z_INDEX_100_VALUE = "100";
908
+ var Z_INDEX_200 = "var(--srns-z-index-200)";
909
+ var Z_INDEX_200_VALUE = "200";
910
+ var Z_INDEX_300 = "var(--srns-z-index-300)";
911
+ var Z_INDEX_300_VALUE = "300";
912
+ var Z_INDEX_400 = "var(--srns-z-index-400)";
913
+ var Z_INDEX_400_VALUE = "400";
914
+ var Z_INDEX_500 = "var(--srns-z-index-500)";
915
+ var Z_INDEX_500_VALUE = "500";
916
+ var Z_INDEX_9999 = "var(--srns-z-index-9999)";
917
+ var Z_INDEX_9999_VALUE = "9999";
918
+
880
919
  // dist/constants/media-query.js
881
920
  var MEDIA_QUERY_SM = "var(--srns-media-query-sm)";
882
921
  var MEDIA_QUERY_SM_VALUE = "(max-width: calc(601px - 1px))";
@@ -1670,6 +1709,12 @@ var cssvarNameOpacity = (opacity) => cssvarName(`${DESIGN_TOKENS_OPACITY_PREFIX}
1670
1709
  var cssvarValueOpacity = (opacity) => cssvarValue(`${DESIGN_TOKENS_OPACITY_PREFIX}-${opacity}`);
1671
1710
  var cssvarOpacity = (opacity) => cssvar(`${DESIGN_TOKENS_OPACITY_PREFIX}-${opacity}`);
1672
1711
 
1712
+ // dist/cssvar/z-index.js
1713
+ var DESIGN_TOKENS_Z_INDEX_PREFIX = "z-index";
1714
+ var cssvarNameZIndex = (zIndex) => cssvarName(`${DESIGN_TOKENS_Z_INDEX_PREFIX}-${zIndex}`);
1715
+ var cssvarValueZIndex = (zIndex) => cssvarValue(`${DESIGN_TOKENS_Z_INDEX_PREFIX}-${zIndex}`);
1716
+ var cssvarZIndex = (zIndex) => cssvar(`${DESIGN_TOKENS_Z_INDEX_PREFIX}-${zIndex}`);
1717
+
1673
1718
  // dist/cssvar/media-query.js
1674
1719
  var DESIGN_TOKENS_MEDIA_QUERY_PREFIX = "media-query";
1675
1720
  var cssvarNameMediaQuery = (mediaQuery) => cssvarName(`${DESIGN_TOKENS_MEDIA_QUERY_PREFIX}-${mediaQuery}`);
@@ -1835,6 +1880,9 @@ var fontWeightNames = ["400", "500", "600"];
1835
1880
  // dist/types/opacity.js
1836
1881
  var opacityNames = ["0", "8", "16", "24", "32", "40", "48", "56", "64", "72", "80", "88", "96", "100"];
1837
1882
 
1883
+ // dist/types/z-index.js
1884
+ var zIndexNames = ["-100", "0", "100", "200", "300", "400", "500", "9999"];
1885
+
1838
1886
  // dist/types/media-query.js
1839
1887
  var mediaQueryNames = ["sm", "md", "lg", "xl", "gt-sm", "gt-md", "gt-lg", "lt-md", "lt-lg", "lt-xl"];
1840
1888
 
@@ -1965,15 +2013,28 @@ var utilityClassNames = [
1965
2013
  "basis-10/12",
1966
2014
  "basis-11/12",
1967
2015
  "basis-2/12",
2016
+ "basis-2xl",
2017
+ "basis-2xs",
1968
2018
  "basis-3/12",
2019
+ "basis-3xl",
2020
+ "basis-3xs",
1969
2021
  "basis-4/12",
2022
+ "basis-4xl",
1970
2023
  "basis-5/12",
2024
+ "basis-5xl",
1971
2025
  "basis-6/12",
2026
+ "basis-6xl",
1972
2027
  "basis-7/12",
2028
+ "basis-7xl",
1973
2029
  "basis-8/12",
1974
2030
  "basis-9/12",
1975
2031
  "basis-auto",
1976
2032
  "basis-full",
2033
+ "basis-lg",
2034
+ "basis-md",
2035
+ "basis-sm",
2036
+ "basis-xl",
2037
+ "basis-xs",
1977
2038
  "bg-accent",
1978
2039
  "bg-accent-10",
1979
2040
  "bg-accent-20",
@@ -2213,6 +2274,7 @@ var utilityClassNames = [
2213
2274
  "bottom-sm",
2214
2275
  "bottom-xl",
2215
2276
  "bottom-xs",
2277
+ "capitalize",
2216
2278
  "elevation-0",
2217
2279
  "elevation-2xs",
2218
2280
  "elevation-lg",
@@ -2286,6 +2348,7 @@ var utilityClassNames = [
2286
2348
  "gap-y-xs",
2287
2349
  "grid",
2288
2350
  "grow",
2351
+ "grow-0",
2289
2352
  "h-0",
2290
2353
  "h-auto",
2291
2354
  "h-full",
@@ -2340,6 +2403,7 @@ var utilityClassNames = [
2340
2403
  "items-center",
2341
2404
  "items-end",
2342
2405
  "items-start",
2406
+ "items-stretch",
2343
2407
  "justify-between",
2344
2408
  "justify-center",
2345
2409
  "justify-end",
@@ -2363,15 +2427,28 @@ var utilityClassNames = [
2363
2427
  "lg:basis-10/12",
2364
2428
  "lg:basis-11/12",
2365
2429
  "lg:basis-2/12",
2430
+ "lg:basis-2xl",
2431
+ "lg:basis-2xs",
2366
2432
  "lg:basis-3/12",
2433
+ "lg:basis-3xl",
2434
+ "lg:basis-3xs",
2367
2435
  "lg:basis-4/12",
2436
+ "lg:basis-4xl",
2368
2437
  "lg:basis-5/12",
2438
+ "lg:basis-5xl",
2369
2439
  "lg:basis-6/12",
2440
+ "lg:basis-6xl",
2370
2441
  "lg:basis-7/12",
2442
+ "lg:basis-7xl",
2371
2443
  "lg:basis-8/12",
2372
2444
  "lg:basis-9/12",
2373
2445
  "lg:basis-auto",
2374
2446
  "lg:basis-full",
2447
+ "lg:basis-lg",
2448
+ "lg:basis-md",
2449
+ "lg:basis-sm",
2450
+ "lg:basis-xl",
2451
+ "lg:basis-xs",
2375
2452
  "lg:block",
2376
2453
  "lg:flex",
2377
2454
  "lg:flex-1",
@@ -2380,8 +2457,10 @@ var utilityClassNames = [
2380
2457
  "lg:flex-col-reverse",
2381
2458
  "lg:flex-initial",
2382
2459
  "lg:flex-none",
2460
+ "lg:flex-nowrap",
2383
2461
  "lg:flex-row",
2384
2462
  "lg:flex-row-reverse",
2463
+ "lg:flex-wrap",
2385
2464
  "lg:gap-0",
2386
2465
  "lg:gap-2xl",
2387
2466
  "lg:gap-2xs",
@@ -2429,12 +2508,14 @@ var utilityClassNames = [
2429
2508
  "lg:gap-y-xs",
2430
2509
  "lg:grid",
2431
2510
  "lg:grow",
2511
+ "lg:grow-0",
2432
2512
  "lg:hidden",
2433
2513
  "lg:inline-block",
2434
2514
  "lg:inline-flex",
2435
2515
  "lg:items-center",
2436
2516
  "lg:items-end",
2437
2517
  "lg:items-start",
2518
+ "lg:items-stretch",
2438
2519
  "lg:justify-between",
2439
2520
  "lg:justify-center",
2440
2521
  "lg:justify-end",
@@ -2650,6 +2731,8 @@ var utilityClassNames = [
2650
2731
  "lg:py-xl",
2651
2732
  "lg:py-xs",
2652
2733
  "lg:shrink",
2734
+ "lg:shrink-0",
2735
+ "lowercase",
2653
2736
  "m-0",
2654
2737
  "m-2xl",
2655
2738
  "m-2xs",
@@ -2665,6 +2748,8 @@ var utilityClassNames = [
2665
2748
  "m-sm",
2666
2749
  "m-xl",
2667
2750
  "m-xs",
2751
+ "max-h-full",
2752
+ "max-h-none",
2668
2753
  "max-w-2xl",
2669
2754
  "max-w-2xs",
2670
2755
  "max-w-3xl",
@@ -2699,15 +2784,28 @@ var utilityClassNames = [
2699
2784
  "md:basis-10/12",
2700
2785
  "md:basis-11/12",
2701
2786
  "md:basis-2/12",
2787
+ "md:basis-2xl",
2788
+ "md:basis-2xs",
2702
2789
  "md:basis-3/12",
2790
+ "md:basis-3xl",
2791
+ "md:basis-3xs",
2703
2792
  "md:basis-4/12",
2793
+ "md:basis-4xl",
2704
2794
  "md:basis-5/12",
2795
+ "md:basis-5xl",
2705
2796
  "md:basis-6/12",
2797
+ "md:basis-6xl",
2706
2798
  "md:basis-7/12",
2799
+ "md:basis-7xl",
2707
2800
  "md:basis-8/12",
2708
2801
  "md:basis-9/12",
2709
2802
  "md:basis-auto",
2710
2803
  "md:basis-full",
2804
+ "md:basis-lg",
2805
+ "md:basis-md",
2806
+ "md:basis-sm",
2807
+ "md:basis-xl",
2808
+ "md:basis-xs",
2711
2809
  "md:block",
2712
2810
  "md:flex",
2713
2811
  "md:flex-1",
@@ -2716,8 +2814,10 @@ var utilityClassNames = [
2716
2814
  "md:flex-col-reverse",
2717
2815
  "md:flex-initial",
2718
2816
  "md:flex-none",
2817
+ "md:flex-nowrap",
2719
2818
  "md:flex-row",
2720
2819
  "md:flex-row-reverse",
2820
+ "md:flex-wrap",
2721
2821
  "md:gap-0",
2722
2822
  "md:gap-2xl",
2723
2823
  "md:gap-2xs",
@@ -2765,12 +2865,14 @@ var utilityClassNames = [
2765
2865
  "md:gap-y-xs",
2766
2866
  "md:grid",
2767
2867
  "md:grow",
2868
+ "md:grow-0",
2768
2869
  "md:hidden",
2769
2870
  "md:inline-block",
2770
2871
  "md:inline-flex",
2771
2872
  "md:items-center",
2772
2873
  "md:items-end",
2773
2874
  "md:items-start",
2875
+ "md:items-stretch",
2774
2876
  "md:justify-between",
2775
2877
  "md:justify-center",
2776
2878
  "md:justify-end",
@@ -2986,6 +3088,9 @@ var utilityClassNames = [
2986
3088
  "md:py-xl",
2987
3089
  "md:py-xs",
2988
3090
  "md:shrink",
3091
+ "md:shrink-0",
3092
+ "min-h-0",
3093
+ "min-h-full",
2989
3094
  "min-w-0",
2990
3095
  "min-w-2xl",
2991
3096
  "min-w-2xs",
@@ -3076,6 +3181,7 @@ var utilityClassNames = [
3076
3181
  "my-sm",
3077
3182
  "my-xl",
3078
3183
  "my-xs",
3184
+ "normal-case",
3079
3185
  "opacity-0",
3080
3186
  "opacity-100",
3081
3187
  "opacity-16",
@@ -3091,7 +3197,9 @@ var utilityClassNames = [
3091
3197
  "opacity-88",
3092
3198
  "opacity-96",
3093
3199
  "overflow-auto",
3200
+ "overflow-clip",
3094
3201
  "overflow-hidden",
3202
+ "overflow-visible",
3095
3203
  "overflow-x-auto",
3096
3204
  "overflow-y-auto",
3097
3205
  "p-0",
@@ -3324,6 +3432,7 @@ var utilityClassNames = [
3324
3432
  "rounded-xl",
3325
3433
  "rounded-xs",
3326
3434
  "shrink",
3435
+ "shrink-0",
3327
3436
  "size-0",
3328
3437
  "size-auto",
3329
3438
  "size-full",
@@ -3440,6 +3549,7 @@ var utilityClassNames = [
3440
3549
  "top-xl",
3441
3550
  "top-xs",
3442
3551
  "transition-opacity",
3552
+ "truncate",
3443
3553
  "typography-caption",
3444
3554
  "typography-footnote",
3445
3555
  "typography-h0",
@@ -3456,6 +3566,7 @@ var utilityClassNames = [
3456
3566
  "typography-public-h3",
3457
3567
  "typography-public-micro",
3458
3568
  "typography-public-paragraph",
3569
+ "uppercase",
3459
3570
  "w-0",
3460
3571
  "w-2xl",
3461
3572
  "w-2xs",
@@ -3472,19 +3583,36 @@ var utilityClassNames = [
3472
3583
  "w-sm",
3473
3584
  "w-xl",
3474
3585
  "w-xs",
3586
+ "whitespace-normal",
3587
+ "whitespace-nowrap",
3588
+ "whitespace-pre",
3589
+ "whitespace-pre-wrap",
3475
3590
  "xl:basis-1/12",
3476
3591
  "xl:basis-10/12",
3477
3592
  "xl:basis-11/12",
3478
3593
  "xl:basis-2/12",
3594
+ "xl:basis-2xl",
3595
+ "xl:basis-2xs",
3479
3596
  "xl:basis-3/12",
3597
+ "xl:basis-3xl",
3598
+ "xl:basis-3xs",
3480
3599
  "xl:basis-4/12",
3600
+ "xl:basis-4xl",
3481
3601
  "xl:basis-5/12",
3602
+ "xl:basis-5xl",
3482
3603
  "xl:basis-6/12",
3604
+ "xl:basis-6xl",
3483
3605
  "xl:basis-7/12",
3606
+ "xl:basis-7xl",
3484
3607
  "xl:basis-8/12",
3485
3608
  "xl:basis-9/12",
3486
3609
  "xl:basis-auto",
3487
3610
  "xl:basis-full",
3611
+ "xl:basis-lg",
3612
+ "xl:basis-md",
3613
+ "xl:basis-sm",
3614
+ "xl:basis-xl",
3615
+ "xl:basis-xs",
3488
3616
  "xl:block",
3489
3617
  "xl:flex",
3490
3618
  "xl:flex-1",
@@ -3493,8 +3621,10 @@ var utilityClassNames = [
3493
3621
  "xl:flex-col-reverse",
3494
3622
  "xl:flex-initial",
3495
3623
  "xl:flex-none",
3624
+ "xl:flex-nowrap",
3496
3625
  "xl:flex-row",
3497
3626
  "xl:flex-row-reverse",
3627
+ "xl:flex-wrap",
3498
3628
  "xl:gap-0",
3499
3629
  "xl:gap-2xl",
3500
3630
  "xl:gap-2xs",
@@ -3542,12 +3672,14 @@ var utilityClassNames = [
3542
3672
  "xl:gap-y-xs",
3543
3673
  "xl:grid",
3544
3674
  "xl:grow",
3675
+ "xl:grow-0",
3545
3676
  "xl:hidden",
3546
3677
  "xl:inline-block",
3547
3678
  "xl:inline-flex",
3548
3679
  "xl:items-center",
3549
3680
  "xl:items-end",
3550
3681
  "xl:items-start",
3682
+ "xl:items-stretch",
3551
3683
  "xl:justify-between",
3552
3684
  "xl:justify-center",
3553
3685
  "xl:justify-end",
@@ -3762,7 +3894,17 @@ var utilityClassNames = [
3762
3894
  "xl:py-sm",
3763
3895
  "xl:py-xl",
3764
3896
  "xl:py-xs",
3765
- "xl:shrink"
3897
+ "xl:shrink",
3898
+ "xl:shrink-0",
3899
+ "z--100",
3900
+ "z-0",
3901
+ "z-100",
3902
+ "z-200",
3903
+ "z-300",
3904
+ "z-400",
3905
+ "z-500",
3906
+ "z-9999",
3907
+ "z-auto"
3766
3908
  ];
3767
3909
 
3768
3910
  // dist/utils/cx.js