@serenis/design-tokens 0.21.0 → 0.22.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 +133 -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 +83 -0
  18. package/dist/types/utility-class.js +83 -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, text-align, 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",
@@ -2286,6 +2347,7 @@ var utilityClassNames = [
2286
2347
  "gap-y-xs",
2287
2348
  "grid",
2288
2349
  "grow",
2350
+ "grow-0",
2289
2351
  "h-0",
2290
2352
  "h-auto",
2291
2353
  "h-full",
@@ -2340,6 +2402,7 @@ var utilityClassNames = [
2340
2402
  "items-center",
2341
2403
  "items-end",
2342
2404
  "items-start",
2405
+ "items-stretch",
2343
2406
  "justify-between",
2344
2407
  "justify-center",
2345
2408
  "justify-end",
@@ -2363,15 +2426,28 @@ var utilityClassNames = [
2363
2426
  "lg:basis-10/12",
2364
2427
  "lg:basis-11/12",
2365
2428
  "lg:basis-2/12",
2429
+ "lg:basis-2xl",
2430
+ "lg:basis-2xs",
2366
2431
  "lg:basis-3/12",
2432
+ "lg:basis-3xl",
2433
+ "lg:basis-3xs",
2367
2434
  "lg:basis-4/12",
2435
+ "lg:basis-4xl",
2368
2436
  "lg:basis-5/12",
2437
+ "lg:basis-5xl",
2369
2438
  "lg:basis-6/12",
2439
+ "lg:basis-6xl",
2370
2440
  "lg:basis-7/12",
2441
+ "lg:basis-7xl",
2371
2442
  "lg:basis-8/12",
2372
2443
  "lg:basis-9/12",
2373
2444
  "lg:basis-auto",
2374
2445
  "lg:basis-full",
2446
+ "lg:basis-lg",
2447
+ "lg:basis-md",
2448
+ "lg:basis-sm",
2449
+ "lg:basis-xl",
2450
+ "lg:basis-xs",
2375
2451
  "lg:block",
2376
2452
  "lg:flex",
2377
2453
  "lg:flex-1",
@@ -2380,8 +2456,10 @@ var utilityClassNames = [
2380
2456
  "lg:flex-col-reverse",
2381
2457
  "lg:flex-initial",
2382
2458
  "lg:flex-none",
2459
+ "lg:flex-nowrap",
2383
2460
  "lg:flex-row",
2384
2461
  "lg:flex-row-reverse",
2462
+ "lg:flex-wrap",
2385
2463
  "lg:gap-0",
2386
2464
  "lg:gap-2xl",
2387
2465
  "lg:gap-2xs",
@@ -2429,12 +2507,14 @@ var utilityClassNames = [
2429
2507
  "lg:gap-y-xs",
2430
2508
  "lg:grid",
2431
2509
  "lg:grow",
2510
+ "lg:grow-0",
2432
2511
  "lg:hidden",
2433
2512
  "lg:inline-block",
2434
2513
  "lg:inline-flex",
2435
2514
  "lg:items-center",
2436
2515
  "lg:items-end",
2437
2516
  "lg:items-start",
2517
+ "lg:items-stretch",
2438
2518
  "lg:justify-between",
2439
2519
  "lg:justify-center",
2440
2520
  "lg:justify-end",
@@ -2650,6 +2730,7 @@ var utilityClassNames = [
2650
2730
  "lg:py-xl",
2651
2731
  "lg:py-xs",
2652
2732
  "lg:shrink",
2733
+ "lg:shrink-0",
2653
2734
  "m-0",
2654
2735
  "m-2xl",
2655
2736
  "m-2xs",
@@ -2665,6 +2746,8 @@ var utilityClassNames = [
2665
2746
  "m-sm",
2666
2747
  "m-xl",
2667
2748
  "m-xs",
2749
+ "max-h-full",
2750
+ "max-h-none",
2668
2751
  "max-w-2xl",
2669
2752
  "max-w-2xs",
2670
2753
  "max-w-3xl",
@@ -2699,15 +2782,28 @@ var utilityClassNames = [
2699
2782
  "md:basis-10/12",
2700
2783
  "md:basis-11/12",
2701
2784
  "md:basis-2/12",
2785
+ "md:basis-2xl",
2786
+ "md:basis-2xs",
2702
2787
  "md:basis-3/12",
2788
+ "md:basis-3xl",
2789
+ "md:basis-3xs",
2703
2790
  "md:basis-4/12",
2791
+ "md:basis-4xl",
2704
2792
  "md:basis-5/12",
2793
+ "md:basis-5xl",
2705
2794
  "md:basis-6/12",
2795
+ "md:basis-6xl",
2706
2796
  "md:basis-7/12",
2797
+ "md:basis-7xl",
2707
2798
  "md:basis-8/12",
2708
2799
  "md:basis-9/12",
2709
2800
  "md:basis-auto",
2710
2801
  "md:basis-full",
2802
+ "md:basis-lg",
2803
+ "md:basis-md",
2804
+ "md:basis-sm",
2805
+ "md:basis-xl",
2806
+ "md:basis-xs",
2711
2807
  "md:block",
2712
2808
  "md:flex",
2713
2809
  "md:flex-1",
@@ -2716,8 +2812,10 @@ var utilityClassNames = [
2716
2812
  "md:flex-col-reverse",
2717
2813
  "md:flex-initial",
2718
2814
  "md:flex-none",
2815
+ "md:flex-nowrap",
2719
2816
  "md:flex-row",
2720
2817
  "md:flex-row-reverse",
2818
+ "md:flex-wrap",
2721
2819
  "md:gap-0",
2722
2820
  "md:gap-2xl",
2723
2821
  "md:gap-2xs",
@@ -2765,12 +2863,14 @@ var utilityClassNames = [
2765
2863
  "md:gap-y-xs",
2766
2864
  "md:grid",
2767
2865
  "md:grow",
2866
+ "md:grow-0",
2768
2867
  "md:hidden",
2769
2868
  "md:inline-block",
2770
2869
  "md:inline-flex",
2771
2870
  "md:items-center",
2772
2871
  "md:items-end",
2773
2872
  "md:items-start",
2873
+ "md:items-stretch",
2774
2874
  "md:justify-between",
2775
2875
  "md:justify-center",
2776
2876
  "md:justify-end",
@@ -2986,6 +3086,9 @@ var utilityClassNames = [
2986
3086
  "md:py-xl",
2987
3087
  "md:py-xs",
2988
3088
  "md:shrink",
3089
+ "md:shrink-0",
3090
+ "min-h-0",
3091
+ "min-h-full",
2989
3092
  "min-w-0",
2990
3093
  "min-w-2xl",
2991
3094
  "min-w-2xs",
@@ -3324,6 +3427,7 @@ var utilityClassNames = [
3324
3427
  "rounded-xl",
3325
3428
  "rounded-xs",
3326
3429
  "shrink",
3430
+ "shrink-0",
3327
3431
  "size-0",
3328
3432
  "size-auto",
3329
3433
  "size-full",
@@ -3476,15 +3580,28 @@ var utilityClassNames = [
3476
3580
  "xl:basis-10/12",
3477
3581
  "xl:basis-11/12",
3478
3582
  "xl:basis-2/12",
3583
+ "xl:basis-2xl",
3584
+ "xl:basis-2xs",
3479
3585
  "xl:basis-3/12",
3586
+ "xl:basis-3xl",
3587
+ "xl:basis-3xs",
3480
3588
  "xl:basis-4/12",
3589
+ "xl:basis-4xl",
3481
3590
  "xl:basis-5/12",
3591
+ "xl:basis-5xl",
3482
3592
  "xl:basis-6/12",
3593
+ "xl:basis-6xl",
3483
3594
  "xl:basis-7/12",
3595
+ "xl:basis-7xl",
3484
3596
  "xl:basis-8/12",
3485
3597
  "xl:basis-9/12",
3486
3598
  "xl:basis-auto",
3487
3599
  "xl:basis-full",
3600
+ "xl:basis-lg",
3601
+ "xl:basis-md",
3602
+ "xl:basis-sm",
3603
+ "xl:basis-xl",
3604
+ "xl:basis-xs",
3488
3605
  "xl:block",
3489
3606
  "xl:flex",
3490
3607
  "xl:flex-1",
@@ -3493,8 +3610,10 @@ var utilityClassNames = [
3493
3610
  "xl:flex-col-reverse",
3494
3611
  "xl:flex-initial",
3495
3612
  "xl:flex-none",
3613
+ "xl:flex-nowrap",
3496
3614
  "xl:flex-row",
3497
3615
  "xl:flex-row-reverse",
3616
+ "xl:flex-wrap",
3498
3617
  "xl:gap-0",
3499
3618
  "xl:gap-2xl",
3500
3619
  "xl:gap-2xs",
@@ -3542,12 +3661,14 @@ var utilityClassNames = [
3542
3661
  "xl:gap-y-xs",
3543
3662
  "xl:grid",
3544
3663
  "xl:grow",
3664
+ "xl:grow-0",
3545
3665
  "xl:hidden",
3546
3666
  "xl:inline-block",
3547
3667
  "xl:inline-flex",
3548
3668
  "xl:items-center",
3549
3669
  "xl:items-end",
3550
3670
  "xl:items-start",
3671
+ "xl:items-stretch",
3551
3672
  "xl:justify-between",
3552
3673
  "xl:justify-center",
3553
3674
  "xl:justify-end",
@@ -3762,7 +3883,17 @@ var utilityClassNames = [
3762
3883
  "xl:py-sm",
3763
3884
  "xl:py-xl",
3764
3885
  "xl:py-xs",
3765
- "xl:shrink"
3886
+ "xl:shrink",
3887
+ "xl:shrink-0",
3888
+ "z--100",
3889
+ "z-0",
3890
+ "z-100",
3891
+ "z-200",
3892
+ "z-300",
3893
+ "z-400",
3894
+ "z-500",
3895
+ "z-9999",
3896
+ "z-auto"
3766
3897
  ];
3767
3898
 
3768
3899
  // dist/utils/cx.js