@wistia/ui 1.2.0 → 1.3.0-beta.d5458b64.6a12e53
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.
- package/dist/css-custom-data.css +17 -17
- package/dist/index.d.ts +29 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +58 -28
- package/dist/index.js.map +1 -1
- package/package.json +17 -18
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v1.
|
|
3
|
+
* @license @wistia/ui v1.3.0-beta.d5458b64.6a12e53
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -174,7 +174,7 @@ const GlobalStyle = createGlobalStyle`
|
|
|
174
174
|
}
|
|
175
175
|
`}
|
|
176
176
|
${css`
|
|
177
|
-
${"/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root,\n[data-wui-theme='true'] {\n--wui-space-00: 0px;\n --wui-space-01: 4px;\n --wui-space-02: 8px;\n --wui-space-03: 12px;\n --wui-space-04: 16px;\n --wui-space-05: 24px;\n --wui-space-06: 32px;\n --wui-space-07: 40px;\n --wui-space-08: 48px;\n --wui-space-09: 64px;\n --wui-border-radius-00: 0px;\n --wui-border-radius-01: 4px;\n --wui-border-radius-02: 8px;\n --wui-border-radius-03: 16px;\n --wui-border-radius-04: 20px;\n --wui-border-radius-05: 24px;\n --wui-border-radius-rounded: 1000px;\n --wui-zindex-under: -1;\n --wui-zindex-backdrop: 500;\n --wui-zindex-menu: 500;\n --wui-zindex-modal: 500;\n --wui-zindex-popover: 500;\n --wui-zindex-select: 500;\n --wui-zindex-tooltip: 500;\n --wui-motion-duration-01: 70ms;\n --wui-motion-duration-02: 110ms;\n --wui-motion-duration-03: 150ms;\n --wui-motion-duration-04: 240ms;\n --wui-motion-duration-05: 400ms;\n --wui-motion-duration-06: 700ms;\n --wui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n --wui-motion-ease-in: cubic-bezier(0.42, 0, 1, 1);\n --wui-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);\n --wui-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);\n --wui-motion-linear: cubic-bezier(0, 0, 1, 1);\n --wui-typography-family-default: intervariable, sans-serif;\n --wui-typography-family-brand: \"GT Walsheim\", sans-serif;\n --wui-typography-family-mono: \"IBM Plex Mono\", monospace;\n --wui-typography-weight-brand-bold: 600;\n --wui-typography-weight-brand-black: 700;\n --wui-typography-weight-body: 425;\n --wui-typography-weight-body-bold: 700;\n --wui-typography-weight-label: 475;\n --wui-typography-weight-label-bold: 600;\n --wui-typography-heading-hero-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-hero-line-height: 58px;\n --wui-typography-heading-hero-letter-spacing: 0;\n --wui-typography-heading-hero-font-size: 48px;\n --wui-typography-heading-hero-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-hero: var(--wui-typography-heading-hero-font-weight) var(--wui-typography-heading-hero-font-size)/var(--wui-typography-heading-hero-line-height) var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-1-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-1-line-height: 44px;\n --wui-typography-heading-1-letter-spacing: 0;\n --wui-typography-heading-1-font-size: 36px;\n --wui-typography-heading-1-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-1: var(--wui-typography-heading-1-font-weight) var(--wui-typography-heading-1-font-size)/var(--wui-typography-heading-1-line-height) var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-2-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-2-line-height: 38px;\n --wui-typography-heading-2-letter-spacing: 0;\n --wui-typography-heading-2-font-size: 32px;\n --wui-typography-heading-2-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-2: var(--wui-typography-heading-2-font-weight) var(--wui-typography-heading-2-font-size)/var(--wui-typography-heading-2-line-height) var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-3-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-3-line-height: 30px;\n --wui-typography-heading-3-letter-spacing: 0;\n --wui-typography-heading-3-font-size: 24px;\n --wui-typography-heading-3-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-3: var(--wui-typography-heading-3-font-weight) var(--wui-typography-heading-3-font-size)/var(--wui-typography-heading-3-line-height) var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-4-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-4-line-height: 24px;\n --wui-typography-heading-4-letter-spacing: 0;\n --wui-typography-heading-4-font-size: 18px;\n --wui-typography-heading-4-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-4: var(--wui-typography-heading-4-font-weight) var(--wui-typography-heading-4-font-size)/var(--wui-typography-heading-4-line-height) var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-5-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-5-line-height: 22px;\n --wui-typography-heading-5-letter-spacing: 0;\n --wui-typography-heading-5-font-size: 16px;\n --wui-typography-heading-5-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-5: var(--wui-typography-heading-5-font-weight) var(--wui-typography-heading-5-font-size)/var(--wui-typography-heading-5-line-height) var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-6-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-6-line-height: 18px;\n --wui-typography-heading-6-letter-spacing: 0;\n --wui-typography-heading-6-font-size: 14px;\n --wui-typography-heading-6-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-6: var(--wui-typography-heading-6-font-weight) var(--wui-typography-heading-6-font-size)/var(--wui-typography-heading-6-line-height) var(--wui-typography-heading-6-font-family);\n --wui-typography-body-1-font-family: var(--wui-typography-family-default);\n --wui-typography-body-1-line-height: 30px;\n --wui-typography-body-1-letter-spacing: 0;\n --wui-typography-body-1-font-size: 20px;\n --wui-typography-body-1-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-1-paragraph-spacing: 16px;\n --wui-typography-body-1: var(--wui-typography-body-1-font-weight) var(--wui-typography-body-1-font-size)/var(--wui-typography-body-1-line-height) var(--wui-typography-body-1-font-family);\n --wui-typography-body-2-font-family: var(--wui-typography-family-default);\n --wui-typography-body-2-line-height: 26px;\n --wui-typography-body-2-letter-spacing: 0;\n --wui-typography-body-2-font-size: 16px;\n --wui-typography-body-2-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-2-paragraph-spacing: 12px;\n --wui-typography-body-2: var(--wui-typography-body-2-font-weight) var(--wui-typography-body-2-font-size)/var(--wui-typography-body-2-line-height) var(--wui-typography-body-2-font-family);\n --wui-typography-body-3-font-family: var(--wui-typography-family-default);\n --wui-typography-body-3-line-height: 22px;\n --wui-typography-body-3-letter-spacing: 0;\n --wui-typography-body-3-font-size: 14px;\n --wui-typography-body-3-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-3-paragraph-spacing: 8px;\n --wui-typography-body-3: var(--wui-typography-body-3-font-weight) var(--wui-typography-body-3-font-size)/var(--wui-typography-body-3-line-height) var(--wui-typography-body-3-font-family);\n --wui-typography-body-4-font-family: var(--wui-typography-family-default);\n --wui-typography-body-4-line-height: 18px;\n --wui-typography-body-4-letter-spacing: 0;\n --wui-typography-body-4-font-size: 12px;\n --wui-typography-body-4-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-4-paragraph-spacing: 8px;\n --wui-typography-body-4: var(--wui-typography-body-4-font-weight) var(--wui-typography-body-4-font-size)/var(--wui-typography-body-4-line-height) var(--wui-typography-body-4-font-family);\n --wui-typography-label-1-font-family: var(--wui-typography-family-default);\n --wui-typography-label-1-line-height: 24px;\n --wui-typography-label-1-letter-spacing: 0;\n --wui-typography-label-1-font-size: 18px;\n --wui-typography-label-1-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-1: var(--wui-typography-label-1-font-weight) var(--wui-typography-label-1-font-size)/var(--wui-typography-label-1-line-height) var(--wui-typography-label-1-font-family);\n --wui-typography-label-2-font-family: var(--wui-typography-family-default);\n --wui-typography-label-2-line-height: 18px;\n --wui-typography-label-2-letter-spacing: 0;\n --wui-typography-label-2-font-size: 16px;\n --wui-typography-label-2-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-2: var(--wui-typography-label-2-font-weight) var(--wui-typography-label-2-font-size)/var(--wui-typography-label-2-line-height) var(--wui-typography-label-2-font-family);\n --wui-typography-label-3-font-family: var(--wui-typography-family-default);\n --wui-typography-label-3-line-height: 16px;\n --wui-typography-label-3-letter-spacing: 0;\n --wui-typography-label-3-font-size: 14px;\n --wui-typography-label-3-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-3: var(--wui-typography-label-3-font-weight) var(--wui-typography-label-3-font-size)/var(--wui-typography-label-3-line-height) var(--wui-typography-label-3-font-family);\n --wui-typography-label-4-font-family: var(--wui-typography-family-default);\n --wui-typography-label-4-line-height: 14px;\n --wui-typography-label-4-letter-spacing: 0;\n --wui-typography-label-4-font-size: 12px;\n --wui-typography-label-4-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-4: var(--wui-typography-label-4-font-weight) var(--wui-typography-label-4-font-size)/var(--wui-typography-label-4-line-height) var(--wui-typography-label-4-font-family);\n --wui-app-background: #fff;\n --wui-blue-1: #fdfdfe;\n --wui-color-accent-1: var(--wui-blue-1);\n --wui-blue-2: #f6f9ff;\n --wui-color-bg-surface-info: var(--wui-blue-2);\n --wui-color-bg-surface-blue: var(--wui-blue-2);\n --wui-color-text-on-fill-blue: var(--wui-blue-2);\n --wui-color-accent-2: var(--wui-blue-2);\n --wui-blue-3: #ecf2ff;\n --wui-color-bg-surface-hover-info: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-info: var(--wui-blue-3);\n --wui-color-bg-surface-hover-blue: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);\n --wui-color-bg-surface-selected: var(--wui-blue-3);\n --wui-color-accent-3: var(--wui-blue-3);\n --wui-blue-4: #ddeaff;\n --wui-color-bg-surface-active-info: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);\n --wui-color-bg-surface-active-blue: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);\n --wui-color-bg-surface-selected-hover: var(--wui-blue-4);\n --wui-color-accent-4: var(--wui-blue-4);\n --wui-blue-5: #cddfff;\n --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);\n --wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);\n --wui-color-bg-surface-selected-active: var(--wui-blue-5);\n --wui-color-text-secondary-blue: var(--wui-blue-5);\n --wui-color-accent-5: var(--wui-blue-5);\n --wui-blue-6: #b8d1ff;\n --wui-color-bg-surface-tertiary-info: var(--wui-blue-6);\n --wui-color-border-info: var(--wui-blue-6);\n --wui-color-border-blue: var(--wui-blue-6);\n --wui-color-accent-6: var(--wui-blue-6);\n --wui-blue-7: #a1beff;\n --wui-color-accent-7: var(--wui-blue-7);\n --wui-blue-8: #81a4fe;\n --wui-color-border-hover-info: var(--wui-blue-8);\n --wui-color-border-secondary-info: var(--wui-blue-8);\n --wui-color-border-hover-blue: var(--wui-blue-8);\n --wui-color-border-secondary-blue: var(--wui-blue-8);\n --wui-color-accent-8: var(--wui-blue-8);\n --wui-blue-9: #2949e5;\n --wui-color-bg-fill-info: var(--wui-blue-9);\n --wui-color-bg-fill-blue: var(--wui-blue-9);\n --wui-color-bg-fill: var(--wui-color-accent-9);\n --wui-color-border-active-info: var(--wui-blue-9);\n --wui-color-text-link-info: var(--wui-blue-9);\n --wui-color-focus-ring-info: var(--wui-blue-9);\n --wui-color-border-active-blue: var(--wui-blue-9);\n --wui-color-text-link-blue: var(--wui-blue-9);\n --wui-color-focus-ring-blue: var(--wui-blue-9);\n --wui-color-focus-color: var(--wui-blue-9);\n --wui-color-text-on-fill-white-selected: var(--wui-blue-9);\n --wui-color-icon-selected: var(--wui-blue-9);\n --wui-color-text-selected: var(--wui-blue-9);\n --wui-color-segmented-color-text-override: var(--wui-color-text-selected);\n --wui-color-accent-9: var(--wui-blue-9);\n --wui-color-text-link-token: var(--wui-color-accent-9);\n --wui-color-text-link: var(--wui-color-text-link-token);\n --wui-color-focus-ring: var(--wui-color-accent-9);\n --wui-blue-10: #1f36d3;\n --wui-color-bg-fill-hover-info: var(--wui-blue-10);\n --wui-color-bg-fill-hover-blue: var(--wui-blue-10);\n --wui-color-bg-fill-hover: var(--wui-color-accent-10);\n --wui-color-border-secondary-hover-info: var(--wui-blue-10);\n --wui-color-border-secondary-hover-blue: var(--wui-blue-10);\n --wui-color-accent-10: var(--wui-blue-10);\n --wui-blue-11: #3154dc;\n --wui-color-bg-fill-active-info: var(--wui-blue-11);\n --wui-color-bg-fill-active-blue: var(--wui-blue-11);\n --wui-color-bg-fill-active: var(--wui-color-accent-11);\n --wui-color-border-secondary-active-info: var(--wui-blue-11);\n --wui-color-icon-info: var(--wui-blue-11);\n --wui-color-text-button-info: var(--wui-blue-11);\n --wui-color-text-secondary-info: var(--wui-blue-11);\n --wui-color-border-secondary-active-blue: var(--wui-blue-11);\n --wui-color-icon-blue: var(--wui-blue-11);\n --wui-color-text-button-blue: var(--wui-blue-11);\n --wui-color-accent-11: var(--wui-blue-11);\n --wui-blue-12: #192b65;\n --wui-color-text-info: var(--wui-blue-12);\n --wui-color-text-blue: var(--wui-blue-12);\n --wui-color-accent-12: var(--wui-blue-12);\n --wui-blue-surface: #f4f8ffcc;\n --wui-blue-contrast: #fff;\n --wui-color-icon-on-fill-info: var(--wui-blue-contrast);\n --wui-color-text-on-fill-info: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-blue: var(--wui-blue-contrast);\n --wui-color-accent-contrast: var(--wui-blue-contrast);\n --wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n --wui-color-text-on-fill: var(--wui-color-accent-contrast);\n --wui-blue-alpha-1: #00008003;\n --wui-blue-alpha-2: #0055ff0a;\n --wui-blue-alpha-3: #0051ff12;\n --wui-blue-alpha-4: #0062ff21;\n --wui-blue-alpha-5: #005cff33;\n --wui-blue-alpha-6: #005aff47;\n --wui-blue-alpha-7: #004fff5e;\n --wui-blue-alpha-8: #0047fd7d;\n --wui-blue-alpha-9: #0026e0d6;\n --wui-blue-alpha-10: #001acde0;\n --wui-blue-alpha-11: #002bd4cf;\n --wui-blue-alpha-12: #001454e5;\n --wui-purple-1: #fefcff;\n --wui-purple-2: #fdf7ff;\n --wui-color-bg-surface-purple: var(--wui-purple-2);\n --wui-purple-3: #fbeaff;\n --wui-color-bg-surface-hover-purple: var(--wui-purple-3);\n --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);\n --wui-purple-4: #f7ddff;\n --wui-color-bg-surface-active-purple: var(--wui-purple-4);\n --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);\n --wui-purple-5: #f2ceff;\n --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);\n --wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);\n --wui-purple-6: #eabdff;\n --wui-color-border-purple: var(--wui-purple-6);\n --wui-purple-7: #e0a5fc;\n --wui-purple-8: #d285f7;\n --wui-color-border-hover-purple: var(--wui-purple-8);\n --wui-color-border-secondary-purple: var(--wui-purple-8);\n --wui-purple-9: #ac12e0;\n --wui-color-bg-fill-purple: var(--wui-purple-9);\n --wui-color-border-active-purple: var(--wui-purple-9);\n --wui-color-focus-ring-purple: var(--wui-purple-9);\n --wui-purple-10: #9a09c9;\n --wui-color-bg-fill-hover-purple: var(--wui-purple-10);\n --wui-color-border-secondary-hover-purple: var(--wui-purple-10);\n --wui-purple-11: #9b0bca;\n --wui-color-bg-fill-active-purple: var(--wui-purple-11);\n --wui-color-border-secondary-active-purple: var(--wui-purple-11);\n --wui-color-icon-purple: var(--wui-purple-11);\n --wui-color-text-link-purple: var(--wui-purple-11);\n --wui-color-text-button-purple: var(--wui-purple-11);\n --wui-color-text-secondary-purple: var(--wui-purple-11);\n --wui-purple-12: #550072;\n --wui-color-text-purple: var(--wui-purple-12);\n --wui-purple-surface: #fdf5ffcc;\n --wui-purple-contrast: #fff;\n --wui-color-icon-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-text-on-fill-purple: var(--wui-purple-contrast);\n --wui-purple-alpha-1: #aa00ff03;\n --wui-purple-alpha-2: #c000ff08;\n --wui-purple-alpha-3: #cf00ff14;\n --wui-purple-alpha-4: #c300ff21;\n --wui-purple-alpha-5: #bc00ff30;\n --wui-purple-alpha-6: #ae00ff42;\n --wui-purple-alpha-7: #a801f759;\n --wui-purple-alpha-8: #a101ef7a;\n --wui-purple-alpha-9: #a600deed;\n --wui-purple-alpha-10: #9600c7f5;\n --wui-purple-alpha-11: #9700c8f5;\n --wui-purple-alpha-12: #550072;\n --wui-green-1: #fbfefa;\n --wui-green-2: #f5fbf4;\n --wui-color-bg-surface-green: var(--wui-green-2);\n --wui-green-3: #e7f8e5;\n --wui-color-bg-surface-hover-green: var(--wui-green-3);\n --wui-color-bg-surface-secondary-green: var(--wui-green-3);\n --wui-green-4: #d8f2d4;\n --wui-color-bg-surface-active-green: var(--wui-green-4);\n --wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);\n --wui-green-5: #c6ebc0;\n --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);\n --wui-color-bg-surface-tertiary-green: var(--wui-green-5);\n --wui-green-6: #afe0a6;\n --wui-color-border-green: var(--wui-green-6);\n --wui-green-7: #8fd185;\n --wui-green-8: #5fbd51;\n --wui-color-border-hover-green: var(--wui-green-8);\n --wui-color-border-secondary-green: var(--wui-green-8);\n --wui-green-9: #268713;\n --wui-color-bg-fill-green: var(--wui-green-9);\n --wui-color-border-active-green: var(--wui-green-9);\n --wui-color-focus-ring-green: var(--wui-green-9);\n --wui-green-10: #117900;\n --wui-color-bg-fill-hover-green: var(--wui-green-10);\n --wui-color-border-secondary-hover-green: var(--wui-green-10);\n --wui-color-text-secondary-green: var(--wui-green-10);\n --wui-green-11: #1e8106;\n --wui-color-bg-fill-active-green: var(--wui-green-11);\n --wui-color-border-secondary-active-green: var(--wui-green-11);\n --wui-color-icon-green: var(--wui-green-11);\n --wui-color-text-button-green: var(--wui-green-11);\n --wui-color-text-link-green: var(--wui-green-11);\n --wui-green-12: #1e3d19;\n --wui-color-text-green: var(--wui-green-12);\n --wui-green-surface: #f3faf1cc;\n --wui-green-contrast: #fff;\n --wui-color-icon-on-fill-green: var(--wui-green-contrast);\n --wui-color-text-on-fill-green: var(--wui-green-contrast);\n --wui-green-alpha-1: #33cc0005;\n --wui-green-alpha-2: #18a3000b;\n --wui-green-alpha-3: #14bb001a;\n --wui-green-alpha-4: #18b2012b;\n --wui-green-alpha-5: #19af003f;\n --wui-green-alpha-6: #1aa70059;\n --wui-green-alpha-7: #159f017a;\n --wui-green-alpha-8: #189f00b0;\n --wui-green-alpha-9: #159f00ae;\n --wui-green-alpha-10: #157d00ec;\n --wui-green-alpha-11: #117900;\n --wui-green-alpha-12: #197e00f9;\n --wui-pink-1: #fffcfd;\n --wui-pink-2: #fff7fa;\n --wui-color-bg-surface-pink: var(--wui-pink-2);\n --wui-pink-3: #ffe8f3;\n --wui-color-bg-surface-hover-pink: var(--wui-pink-3);\n --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);\n --wui-pink-4: #ffdaeb;\n --wui-color-bg-surface-active-pink: var(--wui-pink-4);\n --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);\n --wui-pink-5: #fdcbe2;\n --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);\n --wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);\n --wui-pink-6: #f7bcd8;\n --wui-color-border-pink: var(--wui-pink-6);\n --wui-pink-7: #efa8ca;\n --wui-pink-8: #e68eba;\n --wui-color-border-hover-pink: var(--wui-pink-8);\n --wui-color-border-secondary-pink: var(--wui-pink-8);\n --wui-pink-9: #ff40b3;\n --wui-color-bg-fill-pink: var(--wui-pink-9);\n --wui-color-border-active-pink: var(--wui-pink-9);\n --wui-color-focus-ring-pink: var(--wui-pink-9);\n --wui-color-notification-pill-color: var(--wui-pink-9);\n --wui-pink-10: #f12fa7;\n --wui-color-bg-fill-hover-pink: var(--wui-pink-10);\n --wui-color-border-secondary-hover-pink: var(--wui-pink-10);\n --wui-color-text-secondary-pink: var(--wui-pink-10);\n --wui-pink-11: #cd0089;\n --wui-color-bg-fill-active-pink: var(--wui-pink-11);\n --wui-color-border-secondary-active-pink: var(--wui-pink-11);\n --wui-color-icon-pink: var(--wui-pink-11);\n --wui-color-text-link-pink: var(--wui-pink-11);\n --wui-color-text-button-pink: var(--wui-pink-11);\n --wui-pink-12: #680445;\n --wui-color-text-pink: var(--wui-pink-12);\n --wui-pink-surface: #fff5f9cc;\n --wui-pink-contrast: #fff;\n --wui-color-icon-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-text-on-fill-pink: var(--wui-pink-contrast);\n --wui-pink-alpha-1: #ff005503;\n --wui-pink-alpha-2: #ff006008;\n --wui-pink-alpha-3: #ff007a17;\n --wui-pink-alpha-4: #ff007626;\n --wui-pink-alpha-5: #f6007133;\n --wui-pink-alpha-6: #e1006b42;\n --wui-pink-alpha-7: #d1006457;\n --wui-pink-alpha-8: #c7006470;\n --wui-pink-alpha-9: #ff009abf;\n --wui-pink-alpha-10: #ee0093d1;\n --wui-pink-alpha-11: #cd0089;\n --wui-pink-alpha-12: #660042fa;\n --wui-red-1: #fffcfc;\n --wui-red-2: #fff7f7;\n --wui-red-3: #ffe9e9;\n --wui-red-4: #ffd9d9;\n --wui-red-5: #ffcaca;\n --wui-red-6: #ffbaba;\n --wui-red-7: #fca5a6;\n --wui-red-8: #f5898c;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f10845;\n --wui-red-11: #db0035;\n --wui-red-12: #6d021a;\n --wui-red-surface: #fff5f5cc;\n --wui-red-contrast: #fff;\n --wui-red-alpha-1: #ff000003;\n --wui-red-alpha-2: #ff000008;\n --wui-red-alpha-3: #ff000017;\n --wui-red-alpha-4: #ff000026;\n --wui-red-alpha-5: #ff000036;\n --wui-red-alpha-6: #ff000045;\n --wui-red-alpha-7: #f7010359;\n --wui-red-alpha-8: #ea000775;\n --wui-red-alpha-9: #ff002ed4;\n --wui-red-alpha-10: #f1003ff7;\n --wui-red-alpha-11: #db0035;\n --wui-red-alpha-12: #6c0018fc;\n --wui-yellow-1: #fdfdf8;\n --wui-yellow-2: #fbfcea;\n --wui-color-bg-surface-yellow: var(--wui-yellow-2);\n --wui-yellow-3: #f6fbb8;\n --wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);\n --wui-yellow-4: #f0f491;\n --wui-color-bg-surface-active-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);\n --wui-yellow-5: #e7eb6d;\n --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);\n --wui-yellow-6: #d8dd5d;\n --wui-color-border-yellow: var(--wui-yellow-6);\n --wui-yellow-7: #c8cc52;\n --wui-yellow-8: #b3b600;\n --wui-color-border-hover-yellow: var(--wui-yellow-8);\n --wui-color-border-secondary-yellow: var(--wui-yellow-8);\n --wui-yellow-9: #bcbf19;\n --wui-color-bg-fill-yellow: var(--wui-yellow-9);\n --wui-color-border-active-yellow: var(--wui-yellow-9);\n --wui-color-focus-ring-yellow: var(--wui-yellow-9);\n --wui-yellow-10: #b1b400;\n --wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);\n --wui-color-border-secondary-hover-yellow: var(--wui-yellow-10);\n --wui-color-text-secondary-yellow: var(--wui-yellow-10);\n --wui-yellow-11: #7a7b00;\n --wui-color-bg-fill-active-yellow: var(--wui-yellow-11);\n --wui-color-border-secondary-active-yellow: var(--wui-yellow-11);\n --wui-color-icon-yellow: var(--wui-yellow-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\n --wui-color-text-yellow: var(--wui-yellow-11);\n --wui-yellow-12: #3e3f14;\n --wui-color-text-button-yellow: var(--wui-yellow-12);\n --wui-yellow-surface: #fafbe5cc;\n --wui-yellow-contrast: #22230b;\n --wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-yellow-alpha-1: #b7b70008;\n --wui-yellow-alpha-2: #cfdb0014;\n --wui-yellow-alpha-3: #dff10047;\n --wui-yellow-alpha-4: #dde6006e;\n --wui-yellow-alpha-5: #d5dc0091;\n --wui-yellow-alpha-6: #c2ca00a3;\n --wui-yellow-alpha-7: #aeb400ad;\n --wui-yellow-alpha-8: #b3b600;\n --wui-yellow-alpha-9: #b5b800e5;\n --wui-yellow-alpha-10: #b1b400;\n --wui-yellow-alpha-11: #7a7b00;\n --wui-yellow-alpha-12: #2e2f00eb;\n --wui-orange-1: #fffcfb;\n --wui-orange-2: #fff7f5;\n --wui-color-bg-surface-orange: var(--wui-orange-2);\n --wui-orange-3: #ffebe6;\n --wui-color-bg-surface-hover-orange: var(--wui-orange-3);\n --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);\n --wui-orange-4: #ffdbce;\n --wui-color-bg-surface-active-orange: var(--wui-orange-4);\n --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);\n --wui-orange-5: #fcbfcb;\n --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);\n --wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);\n --wui-orange-6: #ffbdaa;\n --wui-color-border-orange: var(--wui-orange-6);\n --wui-orange-7: #f4aa95;\n --wui-orange-8: #ea9178;\n --wui-color-border-hover-orange: var(--wui-orange-8);\n --wui-color-border-secondary-orange: var(--wui-orange-8);\n --wui-orange-9: #d1451a;\n --wui-color-bg-fill-orange: var(--wui-orange-9);\n --wui-color-border-active-orange: var(--wui-orange-9);\n --wui-color-focus-ring-orange: var(--wui-orange-9);\n --wui-orange-10: #c23600;\n --wui-color-bg-fill-hover-orange: var(--wui-orange-10);\n --wui-color-border-secondary-hover-orange: var(--wui-orange-10);\n --wui-color-text-secondary-orange: var(--wui-orange-10);\n --wui-orange-11: #ce4216;\n --wui-color-bg-fill-active-orange: var(--wui-orange-11);\n --wui-color-border-secondary-active-orange: var(--wui-orange-11);\n --wui-color-icon-orange: var(--wui-orange-11);\n --wui-color-text-link-orange: var(--wui-orange-11);\n --wui-color-text-button-orange: var(--wui-orange-11);\n --wui-orange-12: #592b1e;\n --wui-color-text-orange: var(--wui-orange-12);\n --wui-orange-surface: #fff5f3cc;\n --wui-orange-contrast: #fff;\n --wui-color-icon-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-text-on-fill-orange: var(--wui-orange-contrast);\n --wui-orange-alpha-1: #ff400005;\n --wui-orange-alpha-2: #ff33000a;\n --wui-orange-alpha-3: #ff33001a;\n --wui-orange-alpha-4: #ff440030;\n --wui-orange-alpha-5: #ff400045;\n --wui-orange-alpha-6: #ff390054;\n --wui-orange-alpha-7: #e533016b;\n --wui-orange-alpha-8: #d8300087;\n --wui-orange-alpha-9: #cc3000e5;\n --wui-orange-alpha-10: #c23600;\n --wui-orange-alpha-11: #c93000e8;\n --wui-orange-alpha-12: #430f00e0;\n --wui-error-1: #fffcfc;\n --wui-error-2: #fff7f7;\n --wui-color-bg-surface-error: var(--wui-error-2);\n --wui-error-3: #ffebea;\n --wui-color-bg-surface-hover-error: var(--wui-error-3);\n --wui-color-bg-surface-secondary-error: var(--wui-error-3);\n --wui-error-4: #ffdcd9;\n --wui-color-bg-surface-active-error: var(--wui-error-4);\n --wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);\n --wui-error-5: #ffcdca;\n --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);\n --wui-color-bg-surface-tertiary-error: var(--wui-error-5);\n --wui-error-6: #febdb9;\n --wui-color-border-error: var(--wui-error-6);\n --wui-error-7: #f5a9a5;\n --wui-error-8: #eb8f8b;\n --wui-color-border-secondary-error: var(--wui-error-8);\n --wui-error-9: #e5484d;\n --wui-color-bg-fill-error: var(--wui-error-9);\n --wui-color-border-active-error: var(--wui-error-9);\n --wui-color-focus-ring-error: var(--wui-error-9);\n --wui-color-invalid-indicator: var(--wui-error-9);\n --wui-error-10: #d73840;\n --wui-color-bg-fill-hover-error: var(--wui-error-10);\n --wui-color-border-secondary-hover-error: var(--wui-error-10);\n --wui-error-11: #cc2e39;\n --wui-color-bg-fill-active-error: var(--wui-error-11);\n --wui-color-border-secondary-active-error: var(--wui-error-11);\n --wui-color-icon-error: var(--wui-error-11);\n --wui-color-text-error: var(--wui-error-11);\n --wui-color-text-button-error: var(--wui-error-11);\n --wui-color-text-link-error: var(--wui-error-11);\n --wui-color-text-secondary-error: var(--wui-error-11);\n --wui-error-12: #64181b;\n --wui-error-surface: #fff5f5cc;\n --wui-error-contrast: #fff;\n --wui-color-icon-on-fill-error: var(--wui-error-contrast);\n --wui-color-text-on-fill-error: var(--wui-error-contrast);\n --wui-error-alpha-1: #ff000003;\n --wui-error-alpha-2: #ff000008;\n --wui-error-alpha-3: #ff0d0014;\n --wui-error-alpha-4: #ff150026;\n --wui-error-alpha-5: #ff0f0036;\n --wui-error-alpha-6: #fc0f0045;\n --wui-error-alpha-7: #e30c0159;\n --wui-error-alpha-8: #d4090073;\n --wui-error-alpha-9: #db0007b8;\n --wui-error-alpha-10: #cc000ac7;\n --wui-error-alpha-11: #c1000ed1;\n --wui-error-alpha-12: #540003e8;\n --wui-success-1: #fbfefc;\n --wui-success-2: #f4fbf7;\n --wui-color-bg-surface-success: var(--wui-success-2);\n --wui-success-3: #e5f6eb;\n --wui-color-bg-surface-hover-success: var(--wui-success-3);\n --wui-color-bg-surface-secondary-success: var(--wui-success-3);\n --wui-success-4: #d6f1df;\n --wui-color-bg-surface-active-success: var(--wui-success-4);\n --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);\n --wui-success-5: #c4e8d1;\n --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);\n --wui-color-bg-surface-tertiary-success: var(--wui-success-5);\n --wui-success-6: #adddc0;\n --wui-color-border-success: var(--wui-success-6);\n --wui-success-7: #8fcea8;\n --wui-success-8: #60b887;\n --wui-color-border-hover-success: var(--wui-success-8);\n --wui-color-border-secondary-success: var(--wui-success-8);\n --wui-success-9: #30a46c;\n --wui-color-bg-fill-success: var(--wui-success-9);\n --wui-color-border-active-success: var(--wui-success-9);\n --wui-color-text-link-success: var(--wui-success-9);\n --wui-color-focus-ring-success: var(--wui-success-9);\n --wui-success-10: #289662;\n --wui-color-bg-fill-hover-success: var(--wui-success-10);\n --wui-color-border-secondary-hover-success: var(--wui-success-10);\n --wui-success-11: #00814c;\n --wui-color-bg-fill-active-success: var(--wui-success-11);\n --wui-color-border-secondary-active-success: var(--wui-success-11);\n --wui-color-icon-success: var(--wui-success-11);\n --wui-color-text-secondary-success: var(--wui-success-11);\n --wui-color-text-button-success: var(--wui-success-11);\n --wui-success-12: #1d3b2a;\n --wui-color-text-success: var(--wui-success-12);\n --wui-success-surface: #f1faf5cc;\n --wui-success-contrast: #fff;\n --wui-color-icon-on-fill-success: var(--wui-success-contrast);\n --wui-color-text-on-fill-success: var(--wui-success-contrast);\n --wui-success-alpha-1: #00c04005;\n --wui-success-alpha-2: #00a3460a;\n --wui-success-alpha-3: #00a73b1a;\n --wui-success-alpha-4: #00a83829;\n --wui-success-alpha-5: #019c393b;\n --wui-success-alpha-6: #00963c52;\n --wui-success-alpha-7: #00903970;\n --wui-success-alpha-8: #008d3f9e;\n --wui-success-alpha-9: #008f4acf;\n --wui-success-alpha-10: #008345d6;\n --wui-success-alpha-11: #00814c;\n --wui-success-alpha-12: #00220fe3;\n --wui-warning-1: #fdfdfa;\n --wui-warning-2: #fefceb;\n --wui-color-bg-surface-warning: var(--wui-warning-2);\n --wui-color-icon-on-fill-warning: var(--wui-warning-2);\n --wui-warning-3: #fff9bf;\n --wui-color-bg-surface-hover-warning: var(--wui-warning-3);\n --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);\n --wui-warning-4: #fef29f;\n --wui-color-bg-surface-active-warning: var(--wui-warning-4);\n --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);\n --wui-warning-5: #f8e981;\n --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);\n --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);\n --wui-warning-6: #e9da79;\n --wui-color-border-warning: var(--wui-warning-6);\n --wui-warning-7: #d8cb75;\n --wui-warning-8: #c4b54f;\n --wui-color-border-hover-warning: var(--wui-warning-8);\n --wui-color-border-secondary-warning: var(--wui-warning-8);\n --wui-warning-9: #ffe62a;\n --wui-color-bg-fill-warning: var(--wui-warning-9);\n --wui-color-border-active-warning: var(--wui-warning-9);\n --wui-color-focus-ring-warning: var(--wui-warning-9);\n --wui-warning-10: #f3dd45;\n --wui-color-bg-fill-hover-warning: var(--wui-warning-10);\n --wui-color-border-secondary-hover-warning: var(--wui-warning-10);\n --wui-warning-11: #897a00;\n --wui-color-bg-fill-active-warning: var(--wui-warning-11);\n --wui-color-border-secondary-active-warning: var(--wui-warning-11);\n --wui-color-icon-warning: var(--wui-warning-11);\n --wui-color-text-link-warning: var(--wui-warning-11);\n --wui-color-text-secondary-warning: var(--wui-warning-11);\n --wui-color-text-button-warning: var(--wui-warning-11);\n --wui-warning-12: #413d23;\n --wui-color-text-warning: var(--wui-warning-12);\n --wui-warning-surface: #fefbe6cc;\n --wui-warning-contrast: #262209;\n --wui-color-text-on-fill-warning: var(--wui-warning-contrast);\n --wui-warning-alpha-1: #99990005;\n --wui-warning-alpha-2: #f3d90014;\n --wui-warning-alpha-3: #ffe80040;\n --wui-warning-alpha-4: #fddd0061;\n --wui-warning-alpha-5: #f1d3007d;\n --wui-warning-alpha-6: #d6b90087;\n --wui-warning-alpha-7: #b79f008a;\n --wui-warning-alpha-8: #aa9400b0;\n --wui-warning-alpha-9: #ffe100d6;\n --wui-warning-alpha-10: #efd100ba;\n --wui-warning-alpha-11: #897a00;\n --wui-warning-alpha-12: #231e00db;\n --wui-gray-1: #fcfcfd;\n --wui-color-bg-surface: var(--wui-color-surface-token);\n --wui-color-base-1: var(--wui-gray-1);\n --wui-color-surface-token: var(--wui-gray-1);\n --wui-gray-2: #f9f9fb;\n --wui-color-base-2: var(--wui-gray-2);\n --wui-gray-3: #f0f0f3;\n --wui-color-bg-surface-hover: var(--wui-color-base-3);\n --wui-color-bg-surface-secondary: var(--wui-color-base-3);\n --wui-color-base-3: var(--wui-gray-3);\n --wui-gray-4: #e8e8ec;\n --wui-color-bg-surface-active: var(--wui-color-base-4);\n --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n --wui-color-border-disabled: var(--wui-gray-4);\n --wui-color-base-4: var(--wui-gray-4);\n --wui-gray-5: #e0e0e5;\n --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n --wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n --wui-color-base-5: var(--wui-gray-5);\n --wui-gray-6: #d9d9de;\n --wui-color-focus-ring-disabled: var(--wui-gray-6);\n --wui-color-base-6: var(--wui-gray-6);\n --wui-color-border: var(--wui-color-base-6);\n --wui-gray-7: #ceced5;\n --wui-color-base-7: var(--wui-gray-7);\n --wui-gray-8: #bbbbc4;\n --wui-color-icon-disabled: var(--wui-gray-8);\n --wui-color-base-8: var(--wui-gray-8);\n --wui-color-border-hover: var(--wui-color-base-8);\n --wui-color-border-secondary: var(--wui-color-base-8);\n --wui-gray-9: #8d8d95;\n --wui-color-base-9: var(--wui-gray-9);\n --wui-color-border-active: var(--wui-color-base-9);\n --wui-gray-10: #82828a;\n --wui-color-text-disabled: var(--wui-gray-10);\n --wui-color-base-10: var(--wui-gray-10);\n --wui-color-border-secondary-hover: var(--wui-color-base-10);\n --wui-gray-11: #64646a;\n --wui-color-base-11: var(--wui-gray-11);\n --wui-color-border-secondary-active: var(--wui-color-base-11);\n --wui-color-icon: var(--wui-color-base-11);\n --wui-color-text-secondary: var(--wui-color-base-11);\n --wui-gray-12: #202024;\n --wui-color-base-12: var(--wui-gray-12);\n --wui-color-text-button-token: var(--wui-gray-12);\n --wui-color-text: var(--wui-color-base-12);\n --wui-color-text-button: var(--wui-color-text-button-token);\n --wui-gray-surface: #fffc;\n --wui-gray-contrast: #fff;\n --wui-color-base-contrast: var(--wui-gray-contrast);\n --wui-gray-alpha-1: #00005503;\n --wui-gray-alpha-2: #00005505;\n --wui-gray-alpha-3: #0000330f;\n --wui-gray-alpha-4: #00002d17;\n --wui-gray-alpha-5: #00002a1f;\n --wui-gray-alpha-6: #00002226;\n --wui-gray-alpha-7: #00002530;\n --wui-gray-alpha-8: #00002245;\n --wui-gray-alpha-9: #00001273;\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-gray-alpha-10: #0000117d;\n --wui-gray-alpha-11: #00000a9c;\n --wui-gray-alpha-12: #000005de;\n --wui-vendor-hubspot-1: #fefcfb;\n --wui-vendor-hubspot-2: #fff5f2;\n --wui-vendor-hubspot-3: #ffe9e2;\n --wui-vendor-hubspot-4: #ffd7c9;\n --wui-vendor-hubspot-5: #ffc8b7;\n --wui-vendor-hubspot-6: #ffb8a3;\n --wui-vendor-hubspot-7: #ffa48d;\n --wui-vendor-hubspot-8: #f68a70;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f24d25;\n --wui-vendor-hubspot-11: #d93a0f;\n --wui-vendor-hubspot-12: #5b2a1e;\n --wui-vendor-hubspot-surface: #fff3efcc;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-marketo-1: #fdfdff;\n --wui-vendor-marketo-2: #f7f8ff;\n --wui-vendor-marketo-3: #eff2ff;\n --wui-vendor-marketo-4: #e3e8ff;\n --wui-vendor-marketo-5: #d5ddff;\n --wui-vendor-marketo-6: #c5cfff;\n --wui-vendor-marketo-7: #b0bcfa;\n --wui-vendor-marketo-8: #93a0f2;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #4f55c7;\n --wui-vendor-marketo-12: #252a62;\n --wui-vendor-marketo-surface: #f5f6ffcc;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-pardot-1: #fafdff;\n --wui-vendor-pardot-2: #f3fafe;\n --wui-vendor-pardot-3: #e1f5ff;\n --wui-vendor-pardot-4: #ceeeff;\n --wui-vendor-pardot-5: #bae5ff;\n --wui-vendor-pardot-6: #a4d9fa;\n --wui-vendor-pardot-7: #85c9f1;\n --wui-vendor-pardot-8: #4fb3e8;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0094cf;\n --wui-vendor-pardot-11: #0079b5;\n --wui-vendor-pardot-12: #0c3a51;\n --wui-vendor-pardot-surface: #f0f9fecc;\n --wui-vendor-pardot-contrast: #fff;\n --wui-color-bg-fill-white: #fff;\n --wui-color-bg-tooltip: #242528;\n --wui-color-bg-surface-disabled: #f0f0f3;\n --wui-color-bg-app: #fff;\n --wui-color-segmented-control-checked-background: var(--wui-color-bg-app);\n --wui-color-drop-shadow: #1f33991a;\n --wui-elevation-01: 0 4px 8px 0 var(--wui-color-drop-shadow);\n --wui-elevation-02: 0 4px 24px 0 var(--wui-color-drop-shadow);\n --wui-color-border-selected: #b8d1ff;\n --wui-color-border-hover-selected: #81a4fe;\n --wui-color-border-active-selected: #2949e5;\n}\n"}
|
|
177
|
+
${"/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root,\n[data-wui-theme='true'] {\n--wui-app-background: #fff;\n --wui-blue-1: #fdfdfe;\n --wui-blue-2: #f6f9ff;\n --wui-blue-3: #ecf2ff;\n --wui-blue-4: #ddeaff;\n --wui-blue-5: #cddfff;\n --wui-blue-6: #b8d1ff;\n --wui-blue-7: #a1beff;\n --wui-blue-8: #81a4fe;\n --wui-blue-9: #2949e5;\n --wui-blue-10: #1f36d3;\n --wui-blue-11: #3154dc;\n --wui-blue-12: #192b65;\n --wui-blue-alpha-1: #00008003;\n --wui-blue-alpha-2: #0055ff0a;\n --wui-blue-alpha-3: #0051ff12;\n --wui-blue-alpha-4: #0062ff21;\n --wui-blue-alpha-5: #005cff33;\n --wui-blue-alpha-6: #005aff47;\n --wui-blue-alpha-7: #004fff5e;\n --wui-blue-alpha-8: #0047fd7d;\n --wui-blue-alpha-9: #0026e0d6;\n --wui-blue-alpha-10: #001acde0;\n --wui-blue-alpha-11: #002bd4cf;\n --wui-blue-alpha-12: #001454e5;\n --wui-blue-contrast: #fff;\n --wui-blue-surface: #f4f8ffcc;\n --wui-border-radius-00: 0px;\n --wui-border-radius-01: 4px;\n --wui-border-radius-02: 8px;\n --wui-border-radius-03: 16px;\n --wui-border-radius-04: 20px;\n --wui-border-radius-05: 24px;\n --wui-border-radius-rounded: 1000px;\n --wui-color-accent-1: var(--wui-blue-1);\n --wui-color-accent-2: var(--wui-blue-2);\n --wui-color-accent-3: var(--wui-blue-3);\n --wui-color-accent-4: var(--wui-blue-4);\n --wui-color-accent-5: var(--wui-blue-5);\n --wui-color-accent-6: var(--wui-blue-6);\n --wui-color-accent-7: var(--wui-blue-7);\n --wui-color-accent-8: var(--wui-blue-8);\n --wui-color-accent-9: var(--wui-blue-9);\n --wui-color-accent-10: var(--wui-blue-10);\n --wui-color-accent-11: var(--wui-blue-11);\n --wui-color-accent-12: var(--wui-blue-12);\n --wui-color-accent-contrast: var(--wui-blue-contrast);\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-color-base-1: var(--wui-gray-1);\n --wui-color-base-2: var(--wui-gray-2);\n --wui-color-base-3: var(--wui-gray-3);\n --wui-color-base-4: var(--wui-gray-4);\n --wui-color-base-5: var(--wui-gray-5);\n --wui-color-base-6: var(--wui-gray-6);\n --wui-color-base-7: var(--wui-gray-7);\n --wui-color-base-8: var(--wui-gray-8);\n --wui-color-base-9: var(--wui-gray-9);\n --wui-color-base-10: var(--wui-gray-10);\n --wui-color-base-11: var(--wui-gray-11);\n --wui-color-base-12: var(--wui-gray-12);\n --wui-color-base-contrast: var(--wui-gray-contrast);\n --wui-color-bg-app: #fff;\n --wui-color-bg-fill: var(--wui-color-accent-9);\n --wui-color-bg-fill-active: var(--wui-color-accent-11);\n --wui-color-bg-fill-active-blue: var(--wui-blue-11);\n --wui-color-bg-fill-active-error: var(--wui-error-11);\n --wui-color-bg-fill-active-green: var(--wui-green-11);\n --wui-color-bg-fill-active-info: var(--wui-blue-11);\n --wui-color-bg-fill-active-orange: var(--wui-orange-11);\n --wui-color-bg-fill-active-pink: var(--wui-pink-11);\n --wui-color-bg-fill-active-purple: var(--wui-purple-11);\n --wui-color-bg-fill-active-success: var(--wui-success-11);\n --wui-color-bg-fill-active-warning: var(--wui-warning-11);\n --wui-color-bg-fill-active-yellow: var(--wui-yellow-11);\n --wui-color-bg-fill-blue: var(--wui-blue-9);\n --wui-color-bg-fill-error: var(--wui-error-9);\n --wui-color-bg-fill-green: var(--wui-green-9);\n --wui-color-bg-fill-hover: var(--wui-color-accent-10);\n --wui-color-bg-fill-hover-blue: var(--wui-blue-10);\n --wui-color-bg-fill-hover-error: var(--wui-error-10);\n --wui-color-bg-fill-hover-green: var(--wui-green-10);\n --wui-color-bg-fill-hover-info: var(--wui-blue-10);\n --wui-color-bg-fill-hover-orange: var(--wui-orange-10);\n --wui-color-bg-fill-hover-pink: var(--wui-pink-10);\n --wui-color-bg-fill-hover-purple: var(--wui-purple-10);\n --wui-color-bg-fill-hover-success: var(--wui-success-10);\n --wui-color-bg-fill-hover-warning: var(--wui-warning-10);\n --wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);\n --wui-color-bg-fill-info: var(--wui-blue-9);\n --wui-color-bg-fill-orange: var(--wui-orange-9);\n --wui-color-bg-fill-pink: var(--wui-pink-9);\n --wui-color-bg-fill-purple: var(--wui-purple-9);\n --wui-color-bg-fill-success: var(--wui-success-9);\n --wui-color-bg-fill-warning: var(--wui-warning-9);\n --wui-color-bg-fill-white: #fff;\n --wui-color-bg-fill-yellow: var(--wui-yellow-9);\n --wui-color-bg-surface: var(--wui-color-surface-token);\n --wui-color-bg-surface-active: var(--wui-color-base-4);\n --wui-color-bg-surface-active-blue: var(--wui-blue-4);\n --wui-color-bg-surface-active-error: var(--wui-error-4);\n --wui-color-bg-surface-active-green: var(--wui-green-4);\n --wui-color-bg-surface-active-info: var(--wui-blue-4);\n --wui-color-bg-surface-active-orange: var(--wui-orange-4);\n --wui-color-bg-surface-active-pink: var(--wui-pink-4);\n --wui-color-bg-surface-active-purple: var(--wui-purple-4);\n --wui-color-bg-surface-active-success: var(--wui-success-4);\n --wui-color-bg-surface-active-warning: var(--wui-warning-4);\n --wui-color-bg-surface-active-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-blue: var(--wui-blue-2);\n --wui-color-bg-surface-disabled: #f0f0f3;\n --wui-color-bg-surface-error: var(--wui-error-2);\n --wui-color-bg-surface-green: var(--wui-green-2);\n --wui-color-bg-surface-hover: var(--wui-color-base-3);\n --wui-color-bg-surface-hover-blue: var(--wui-blue-3);\n --wui-color-bg-surface-hover-error: var(--wui-error-3);\n --wui-color-bg-surface-hover-green: var(--wui-green-3);\n --wui-color-bg-surface-hover-info: var(--wui-blue-3);\n --wui-color-bg-surface-hover-orange: var(--wui-orange-3);\n --wui-color-bg-surface-hover-pink: var(--wui-pink-3);\n --wui-color-bg-surface-hover-purple: var(--wui-purple-3);\n --wui-color-bg-surface-hover-success: var(--wui-success-3);\n --wui-color-bg-surface-hover-warning: var(--wui-warning-3);\n --wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-info: var(--wui-blue-2);\n --wui-color-bg-surface-orange: var(--wui-orange-2);\n --wui-color-bg-surface-pink: var(--wui-pink-2);\n --wui-color-bg-surface-purple: var(--wui-purple-2);\n --wui-color-bg-surface-secondary: var(--wui-color-base-3);\n --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);\n --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);\n --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);\n --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);\n --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);\n --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);\n --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);\n --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-error: var(--wui-error-3);\n --wui-color-bg-surface-secondary-green: var(--wui-green-3);\n --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);\n --wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);\n --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);\n --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);\n --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);\n --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);\n --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);\n --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-secondary-info: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);\n --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);\n --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);\n --wui-color-bg-surface-secondary-success: var(--wui-success-3);\n --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);\n --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-selected: var(--wui-blue-3);\n --wui-color-bg-surface-selected-active: var(--wui-blue-5);\n --wui-color-bg-surface-selected-hover: var(--wui-blue-4);\n --wui-color-bg-surface-success: var(--wui-success-2);\n --wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n --wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);\n --wui-color-bg-surface-tertiary-error: var(--wui-error-5);\n --wui-color-bg-surface-tertiary-green: var(--wui-green-5);\n --wui-color-bg-surface-tertiary-info: var(--wui-blue-6);\n --wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);\n --wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);\n --wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);\n --wui-color-bg-surface-tertiary-success: var(--wui-success-5);\n --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);\n --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-warning: var(--wui-warning-2);\n --wui-color-bg-surface-yellow: var(--wui-yellow-2);\n --wui-color-bg-tooltip: #242528;\n --wui-color-border: var(--wui-color-base-6);\n --wui-color-border-active: var(--wui-color-base-9);\n --wui-color-border-active-blue: var(--wui-blue-9);\n --wui-color-border-active-error: var(--wui-error-9);\n --wui-color-border-active-green: var(--wui-green-9);\n --wui-color-border-active-info: var(--wui-blue-9);\n --wui-color-border-active-orange: var(--wui-orange-9);\n --wui-color-border-active-pink: var(--wui-pink-9);\n --wui-color-border-active-purple: var(--wui-purple-9);\n --wui-color-border-active-selected: #2949e5;\n --wui-color-border-active-success: var(--wui-success-9);\n --wui-color-border-active-warning: var(--wui-warning-9);\n --wui-color-border-active-yellow: var(--wui-yellow-9);\n --wui-color-border-blue: var(--wui-blue-6);\n --wui-color-border-disabled: var(--wui-gray-4);\n --wui-color-border-error: var(--wui-error-6);\n --wui-color-border-green: var(--wui-green-6);\n --wui-color-border-hover: var(--wui-color-base-8);\n --wui-color-border-hover-blue: var(--wui-blue-8);\n --wui-color-border-hover-green: var(--wui-green-8);\n --wui-color-border-hover-info: var(--wui-blue-8);\n --wui-color-border-hover-orange: var(--wui-orange-8);\n --wui-color-border-hover-pink: var(--wui-pink-8);\n --wui-color-border-hover-purple: var(--wui-purple-8);\n --wui-color-border-hover-selected: #81a4fe;\n --wui-color-border-hover-success: var(--wui-success-8);\n --wui-color-border-hover-warning: var(--wui-warning-8);\n --wui-color-border-hover-yellow: var(--wui-yellow-8);\n --wui-color-border-info: var(--wui-blue-6);\n --wui-color-border-orange: var(--wui-orange-6);\n --wui-color-border-pink: var(--wui-pink-6);\n --wui-color-border-purple: var(--wui-purple-6);\n --wui-color-border-secondary: var(--wui-color-base-8);\n --wui-color-border-secondary-active: var(--wui-color-base-11);\n --wui-color-border-secondary-active-blue: var(--wui-blue-11);\n --wui-color-border-secondary-active-error: var(--wui-error-11);\n --wui-color-border-secondary-active-green: var(--wui-green-11);\n --wui-color-border-secondary-active-info: var(--wui-blue-11);\n --wui-color-border-secondary-active-orange: var(--wui-orange-11);\n --wui-color-border-secondary-active-pink: var(--wui-pink-11);\n --wui-color-border-secondary-active-purple: var(--wui-purple-11);\n --wui-color-border-secondary-active-success: var(--wui-success-11);\n --wui-color-border-secondary-active-warning: var(--wui-warning-11);\n --wui-color-border-secondary-active-yellow: var(--wui-yellow-11);\n --wui-color-border-secondary-blue: var(--wui-blue-8);\n --wui-color-border-secondary-error: var(--wui-error-8);\n --wui-color-border-secondary-green: var(--wui-green-8);\n --wui-color-border-secondary-hover: var(--wui-color-base-10);\n --wui-color-border-secondary-hover-blue: var(--wui-blue-10);\n --wui-color-border-secondary-hover-error: var(--wui-error-10);\n --wui-color-border-secondary-hover-green: var(--wui-green-10);\n --wui-color-border-secondary-hover-info: var(--wui-blue-10);\n --wui-color-border-secondary-hover-orange: var(--wui-orange-10);\n --wui-color-border-secondary-hover-pink: var(--wui-pink-10);\n --wui-color-border-secondary-hover-purple: var(--wui-purple-10);\n --wui-color-border-secondary-hover-success: var(--wui-success-10);\n --wui-color-border-secondary-hover-warning: var(--wui-warning-10);\n --wui-color-border-secondary-hover-yellow: var(--wui-yellow-10);\n --wui-color-border-secondary-info: var(--wui-blue-8);\n --wui-color-border-secondary-orange: var(--wui-orange-8);\n --wui-color-border-secondary-pink: var(--wui-pink-8);\n --wui-color-border-secondary-purple: var(--wui-purple-8);\n --wui-color-border-secondary-success: var(--wui-success-8);\n --wui-color-border-secondary-warning: var(--wui-warning-8);\n --wui-color-border-secondary-yellow: var(--wui-yellow-8);\n --wui-color-border-selected: #b8d1ff;\n --wui-color-border-success: var(--wui-success-6);\n --wui-color-border-warning: var(--wui-warning-6);\n --wui-color-border-yellow: var(--wui-yellow-6);\n --wui-color-drop-shadow: #1f33991a;\n --wui-color-focus-color: var(--wui-blue-9);\n --wui-color-focus-ring: var(--wui-color-accent-9);\n --wui-color-focus-ring-blue: var(--wui-blue-9);\n --wui-color-focus-ring-disabled: var(--wui-gray-6);\n --wui-color-focus-ring-error: var(--wui-error-9);\n --wui-color-focus-ring-green: var(--wui-green-9);\n --wui-color-focus-ring-info: var(--wui-blue-9);\n --wui-color-focus-ring-orange: var(--wui-orange-9);\n --wui-color-focus-ring-pink: var(--wui-pink-9);\n --wui-color-focus-ring-purple: var(--wui-purple-9);\n --wui-color-focus-ring-success: var(--wui-success-9);\n --wui-color-focus-ring-warning: var(--wui-warning-9);\n --wui-color-focus-ring-yellow: var(--wui-yellow-9);\n --wui-color-icon: var(--wui-color-base-11);\n --wui-color-icon-blue: var(--wui-blue-11);\n --wui-color-icon-disabled: var(--wui-gray-8);\n --wui-color-icon-error: var(--wui-error-11);\n --wui-color-icon-green: var(--wui-green-11);\n --wui-color-icon-info: var(--wui-blue-11);\n --wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n --wui-color-icon-on-fill-blue: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-error: var(--wui-error-contrast);\n --wui-color-icon-on-fill-green: var(--wui-green-contrast);\n --wui-color-icon-on-fill-info: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-icon-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-icon-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-icon-on-fill-success: var(--wui-success-contrast);\n --wui-color-icon-on-fill-warning: var(--wui-warning-2);\n --wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-icon-orange: var(--wui-orange-11);\n --wui-color-icon-pink: var(--wui-pink-11);\n --wui-color-icon-purple: var(--wui-purple-11);\n --wui-color-icon-selected: var(--wui-blue-9);\n --wui-color-icon-success: var(--wui-success-11);\n --wui-color-icon-warning: var(--wui-warning-11);\n --wui-color-icon-yellow: var(--wui-yellow-11);\n --wui-color-invalid-indicator: var(--wui-error-9);\n --wui-color-notification-pill-color: var(--wui-pink-9);\n --wui-color-segmented-color-text-override: var(--wui-color-text-selected);\n --wui-color-segmented-control-checked-background: var(--wui-color-bg-app);\n --wui-color-surface-token: var(--wui-gray-1);\n --wui-color-text: var(--wui-color-base-12);\n --wui-color-text-blue: var(--wui-blue-12);\n --wui-color-text-button: var(--wui-color-text-button-token);\n --wui-color-text-button-blue: var(--wui-blue-11);\n --wui-color-text-button-error: var(--wui-error-11);\n --wui-color-text-button-green: var(--wui-green-11);\n --wui-color-text-button-info: var(--wui-blue-11);\n --wui-color-text-button-orange: var(--wui-orange-11);\n --wui-color-text-button-pink: var(--wui-pink-11);\n --wui-color-text-button-purple: var(--wui-purple-11);\n --wui-color-text-button-success: var(--wui-success-11);\n --wui-color-text-button-token: var(--wui-gray-12);\n --wui-color-text-button-warning: var(--wui-warning-11);\n --wui-color-text-button-yellow: var(--wui-yellow-12);\n --wui-color-text-disabled: var(--wui-gray-10);\n --wui-color-text-error: var(--wui-error-11);\n --wui-color-text-green: var(--wui-green-12);\n --wui-color-text-info: var(--wui-blue-12);\n --wui-color-text-link: var(--wui-color-text-link-token);\n --wui-color-text-link-blue: var(--wui-blue-9);\n --wui-color-text-link-error: var(--wui-error-11);\n --wui-color-text-link-green: var(--wui-green-11);\n --wui-color-text-link-info: var(--wui-blue-9);\n --wui-color-text-link-orange: var(--wui-orange-11);\n --wui-color-text-link-pink: var(--wui-pink-11);\n --wui-color-text-link-purple: var(--wui-purple-11);\n --wui-color-text-link-success: var(--wui-success-9);\n --wui-color-text-link-token: var(--wui-color-accent-9);\n --wui-color-text-link-warning: var(--wui-warning-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\n --wui-color-text-on-fill: var(--wui-color-accent-contrast);\n --wui-color-text-on-fill-blue: var(--wui-blue-2);\n --wui-color-text-on-fill-error: var(--wui-error-contrast);\n --wui-color-text-on-fill-green: var(--wui-green-contrast);\n --wui-color-text-on-fill-info: var(--wui-blue-contrast);\n --wui-color-text-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-text-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-text-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-text-on-fill-success: var(--wui-success-contrast);\n --wui-color-text-on-fill-warning: var(--wui-warning-contrast);\n --wui-color-text-on-fill-white-selected: var(--wui-blue-9);\n --wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-text-orange: var(--wui-orange-12);\n --wui-color-text-pink: var(--wui-pink-12);\n --wui-color-text-purple: var(--wui-purple-12);\n --wui-color-text-secondary: var(--wui-color-base-11);\n --wui-color-text-secondary-blue: var(--wui-blue-5);\n --wui-color-text-secondary-error: var(--wui-error-11);\n --wui-color-text-secondary-green: var(--wui-green-10);\n --wui-color-text-secondary-info: var(--wui-blue-11);\n --wui-color-text-secondary-orange: var(--wui-orange-10);\n --wui-color-text-secondary-pink: var(--wui-pink-10);\n --wui-color-text-secondary-purple: var(--wui-purple-11);\n --wui-color-text-secondary-success: var(--wui-success-11);\n --wui-color-text-secondary-warning: var(--wui-warning-11);\n --wui-color-text-secondary-yellow: var(--wui-yellow-10);\n --wui-color-text-selected: var(--wui-blue-9);\n --wui-color-text-success: var(--wui-success-12);\n --wui-color-text-warning: var(--wui-warning-12);\n --wui-color-text-yellow: var(--wui-yellow-11);\n --wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);\n --wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);\n --wui-error-1: #fffcfc;\n --wui-error-2: #fff7f7;\n --wui-error-3: #ffebea;\n --wui-error-4: #ffdcd9;\n --wui-error-5: #ffcdca;\n --wui-error-6: #febdb9;\n --wui-error-7: #f5a9a5;\n --wui-error-8: #eb8f8b;\n --wui-error-9: #e5484d;\n --wui-error-10: #d73840;\n --wui-error-11: #cc2e39;\n --wui-error-12: #64181b;\n --wui-error-alpha-1: #ff000003;\n --wui-error-alpha-2: #ff000008;\n --wui-error-alpha-3: #ff0d0014;\n --wui-error-alpha-4: #ff150026;\n --wui-error-alpha-5: #ff0f0036;\n --wui-error-alpha-6: #fc0f0045;\n --wui-error-alpha-7: #e30c0159;\n --wui-error-alpha-8: #d4090073;\n --wui-error-alpha-9: #db0007b8;\n --wui-error-alpha-10: #cc000ac7;\n --wui-error-alpha-11: #c1000ed1;\n --wui-error-alpha-12: #540003e8;\n --wui-error-contrast: #fff;\n --wui-error-surface: #fff5f5cc;\n --wui-gray-1: #fcfcfd;\n --wui-gray-2: #f9f9fb;\n --wui-gray-3: #f0f0f3;\n --wui-gray-4: #e8e8ec;\n --wui-gray-5: #e0e0e5;\n --wui-gray-6: #d9d9de;\n --wui-gray-7: #ceced5;\n --wui-gray-8: #bbbbc4;\n --wui-gray-9: #8d8d95;\n --wui-gray-10: #82828a;\n --wui-gray-11: #64646a;\n --wui-gray-12: #202024;\n --wui-gray-alpha-1: #00005503;\n --wui-gray-alpha-2: #00005505;\n --wui-gray-alpha-3: #0000330f;\n --wui-gray-alpha-4: #00002d17;\n --wui-gray-alpha-5: #00002a1f;\n --wui-gray-alpha-6: #00002226;\n --wui-gray-alpha-7: #00002530;\n --wui-gray-alpha-8: #00002245;\n --wui-gray-alpha-9: #00001273;\n --wui-gray-alpha-10: #0000117d;\n --wui-gray-alpha-11: #00000a9c;\n --wui-gray-alpha-12: #000005de;\n --wui-gray-contrast: #fff;\n --wui-gray-surface: #fffc;\n --wui-green-1: #fbfefa;\n --wui-green-2: #f5fbf4;\n --wui-green-3: #e7f8e5;\n --wui-green-4: #d8f2d4;\n --wui-green-5: #c6ebc0;\n --wui-green-6: #afe0a6;\n --wui-green-7: #8fd185;\n --wui-green-8: #5fbd51;\n --wui-green-9: #268713;\n --wui-green-10: #117900;\n --wui-green-11: #1e8106;\n --wui-green-12: #1e3d19;\n --wui-green-alpha-1: #33cc0005;\n --wui-green-alpha-2: #18a3000b;\n --wui-green-alpha-3: #14bb001a;\n --wui-green-alpha-4: #18b2012b;\n --wui-green-alpha-5: #19af003f;\n --wui-green-alpha-6: #1aa70059;\n --wui-green-alpha-7: #159f017a;\n --wui-green-alpha-8: #189f00b0;\n --wui-green-alpha-9: #159f00ae;\n --wui-green-alpha-10: #157d00ec;\n --wui-green-alpha-11: #117900;\n --wui-green-alpha-12: #197e00f9;\n --wui-green-contrast: #fff;\n --wui-green-surface: #f3faf1cc;\n --wui-motion-duration-01: 70ms;\n --wui-motion-duration-02: 110ms;\n --wui-motion-duration-03: 150ms;\n --wui-motion-duration-04: 240ms;\n --wui-motion-duration-05: 400ms;\n --wui-motion-duration-06: 700ms;\n --wui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n --wui-motion-ease-in: cubic-bezier(0.42, 0, 1, 1);\n --wui-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);\n --wui-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);\n --wui-motion-linear: cubic-bezier(0, 0, 1, 1);\n --wui-orange-1: #fffcfb;\n --wui-orange-2: #fff7f5;\n --wui-orange-3: #ffebe6;\n --wui-orange-4: #ffdbce;\n --wui-orange-5: #fcbfcb;\n --wui-orange-6: #ffbdaa;\n --wui-orange-7: #f4aa95;\n --wui-orange-8: #ea9178;\n --wui-orange-9: #d1451a;\n --wui-orange-10: #c23600;\n --wui-orange-11: #ce4216;\n --wui-orange-12: #592b1e;\n --wui-orange-alpha-1: #ff400005;\n --wui-orange-alpha-2: #ff33000a;\n --wui-orange-alpha-3: #ff33001a;\n --wui-orange-alpha-4: #ff440030;\n --wui-orange-alpha-5: #ff400045;\n --wui-orange-alpha-6: #ff390054;\n --wui-orange-alpha-7: #e533016b;\n --wui-orange-alpha-8: #d8300087;\n --wui-orange-alpha-9: #cc3000e5;\n --wui-orange-alpha-10: #c23600;\n --wui-orange-alpha-11: #c93000e8;\n --wui-orange-alpha-12: #430f00e0;\n --wui-orange-contrast: #fff;\n --wui-orange-surface: #fff5f3cc;\n --wui-pink-1: #fffcfd;\n --wui-pink-2: #fff7fa;\n --wui-pink-3: #ffe8f3;\n --wui-pink-4: #ffdaeb;\n --wui-pink-5: #fdcbe2;\n --wui-pink-6: #f7bcd8;\n --wui-pink-7: #efa8ca;\n --wui-pink-8: #e68eba;\n --wui-pink-9: #ff40b3;\n --wui-pink-10: #f12fa7;\n --wui-pink-11: #cd0089;\n --wui-pink-12: #680445;\n --wui-pink-alpha-1: #ff005503;\n --wui-pink-alpha-2: #ff006008;\n --wui-pink-alpha-3: #ff007a17;\n --wui-pink-alpha-4: #ff007626;\n --wui-pink-alpha-5: #f6007133;\n --wui-pink-alpha-6: #e1006b42;\n --wui-pink-alpha-7: #d1006457;\n --wui-pink-alpha-8: #c7006470;\n --wui-pink-alpha-9: #ff009abf;\n --wui-pink-alpha-10: #ee0093d1;\n --wui-pink-alpha-11: #cd0089;\n --wui-pink-alpha-12: #660042fa;\n --wui-pink-contrast: #fff;\n --wui-pink-surface: #fff5f9cc;\n --wui-purple-1: #fefcff;\n --wui-purple-2: #fdf7ff;\n --wui-purple-3: #fbeaff;\n --wui-purple-4: #f7ddff;\n --wui-purple-5: #f2ceff;\n --wui-purple-6: #eabdff;\n --wui-purple-7: #e0a5fc;\n --wui-purple-8: #d285f7;\n --wui-purple-9: #ac12e0;\n --wui-purple-10: #9a09c9;\n --wui-purple-11: #9b0bca;\n --wui-purple-12: #550072;\n --wui-purple-alpha-1: #aa00ff03;\n --wui-purple-alpha-2: #c000ff08;\n --wui-purple-alpha-3: #cf00ff14;\n --wui-purple-alpha-4: #c300ff21;\n --wui-purple-alpha-5: #bc00ff30;\n --wui-purple-alpha-6: #ae00ff42;\n --wui-purple-alpha-7: #a801f759;\n --wui-purple-alpha-8: #a101ef7a;\n --wui-purple-alpha-9: #a600deed;\n --wui-purple-alpha-10: #9600c7f5;\n --wui-purple-alpha-11: #9700c8f5;\n --wui-purple-alpha-12: #550072;\n --wui-purple-contrast: #fff;\n --wui-purple-surface: #fdf5ffcc;\n --wui-red-1: #fffcfc;\n --wui-red-2: #fff7f7;\n --wui-red-3: #ffe9e9;\n --wui-red-4: #ffd9d9;\n --wui-red-5: #ffcaca;\n --wui-red-6: #ffbaba;\n --wui-red-7: #fca5a6;\n --wui-red-8: #f5898c;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f10845;\n --wui-red-11: #db0035;\n --wui-red-12: #6d021a;\n --wui-red-alpha-1: #ff000003;\n --wui-red-alpha-2: #ff000008;\n --wui-red-alpha-3: #ff000017;\n --wui-red-alpha-4: #ff000026;\n --wui-red-alpha-5: #ff000036;\n --wui-red-alpha-6: #ff000045;\n --wui-red-alpha-7: #f7010359;\n --wui-red-alpha-8: #ea000775;\n --wui-red-alpha-9: #ff002ed4;\n --wui-red-alpha-10: #f1003ff7;\n --wui-red-alpha-11: #db0035;\n --wui-red-alpha-12: #6c0018fc;\n --wui-red-contrast: #fff;\n --wui-red-surface: #fff5f5cc;\n --wui-space-00: 0px;\n --wui-space-01: 4px;\n --wui-space-02: 8px;\n --wui-space-03: 12px;\n --wui-space-04: 16px;\n --wui-space-05: 24px;\n --wui-space-06: 32px;\n --wui-space-07: 40px;\n --wui-space-08: 48px;\n --wui-space-09: 64px;\n --wui-success-1: #fbfefc;\n --wui-success-2: #f4fbf7;\n --wui-success-3: #e5f6eb;\n --wui-success-4: #d6f1df;\n --wui-success-5: #c4e8d1;\n --wui-success-6: #adddc0;\n --wui-success-7: #8fcea8;\n --wui-success-8: #60b887;\n --wui-success-9: #30a46c;\n --wui-success-10: #289662;\n --wui-success-11: #00814c;\n --wui-success-12: #1d3b2a;\n --wui-success-alpha-1: #00c04005;\n --wui-success-alpha-2: #00a3460a;\n --wui-success-alpha-3: #00a73b1a;\n --wui-success-alpha-4: #00a83829;\n --wui-success-alpha-5: #019c393b;\n --wui-success-alpha-6: #00963c52;\n --wui-success-alpha-7: #00903970;\n --wui-success-alpha-8: #008d3f9e;\n --wui-success-alpha-9: #008f4acf;\n --wui-success-alpha-10: #008345d6;\n --wui-success-alpha-11: #00814c;\n --wui-success-alpha-12: #00220fe3;\n --wui-success-contrast: #fff;\n --wui-success-surface: #f1faf5cc;\n --wui-typography-body-1: var(--wui-typography-body-1-font-weight) var(--wui-typography-body-1-font-size)/var(--wui-typography-body-1-line-height) var(--wui-typography-body-1-font-family);\n --wui-typography-body-1-font-family: var(--wui-typography-family-default);\n --wui-typography-body-1-font-size: 20px;\n --wui-typography-body-1-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-1-letter-spacing: 0px;\n --wui-typography-body-1-line-height: 30px;\n --wui-typography-body-1-paragraph-spacing: 16px;\n --wui-typography-body-2: var(--wui-typography-body-2-font-weight) var(--wui-typography-body-2-font-size)/var(--wui-typography-body-2-line-height) var(--wui-typography-body-2-font-family);\n --wui-typography-body-2-font-family: var(--wui-typography-family-default);\n --wui-typography-body-2-font-size: 16px;\n --wui-typography-body-2-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-2-letter-spacing: 0px;\n --wui-typography-body-2-line-height: 26px;\n --wui-typography-body-2-paragraph-spacing: 12px;\n --wui-typography-body-3: var(--wui-typography-body-3-font-weight) var(--wui-typography-body-3-font-size)/var(--wui-typography-body-3-line-height) var(--wui-typography-body-3-font-family);\n --wui-typography-body-3-font-family: var(--wui-typography-family-default);\n --wui-typography-body-3-font-size: 14px;\n --wui-typography-body-3-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-3-letter-spacing: 0px;\n --wui-typography-body-3-line-height: 22px;\n --wui-typography-body-3-paragraph-spacing: 8px;\n --wui-typography-body-4: var(--wui-typography-body-4-font-weight) var(--wui-typography-body-4-font-size)/var(--wui-typography-body-4-line-height) var(--wui-typography-body-4-font-family);\n --wui-typography-body-4-font-family: var(--wui-typography-family-default);\n --wui-typography-body-4-font-size: 12px;\n --wui-typography-body-4-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-4-letter-spacing: 0px;\n --wui-typography-body-4-line-height: 18px;\n --wui-typography-body-4-paragraph-spacing: 8px;\n --wui-typography-family-brand: \"GT Walsheim\", sans-serif;\n --wui-typography-family-default: intervariable, sans-serif;\n --wui-typography-family-mono: \"IBM Plex Mono\", monospace;\n --wui-typography-heading-1: var(--wui-typography-heading-1-font-weight) var(--wui-typography-heading-1-font-size)/var(--wui-typography-heading-1-line-height) var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-1-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-1-font-size: 36px;\n --wui-typography-heading-1-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-1-letter-spacing: 0px;\n --wui-typography-heading-1-line-height: 44px;\n --wui-typography-heading-2: var(--wui-typography-heading-2-font-weight) var(--wui-typography-heading-2-font-size)/var(--wui-typography-heading-2-line-height) var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-2-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-2-font-size: 32px;\n --wui-typography-heading-2-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-2-letter-spacing: 0px;\n --wui-typography-heading-2-line-height: 38px;\n --wui-typography-heading-3: var(--wui-typography-heading-3-font-weight) var(--wui-typography-heading-3-font-size)/var(--wui-typography-heading-3-line-height) var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-3-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-3-font-size: 24px;\n --wui-typography-heading-3-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-3-letter-spacing: 0px;\n --wui-typography-heading-3-line-height: 30px;\n --wui-typography-heading-4: var(--wui-typography-heading-4-font-weight) var(--wui-typography-heading-4-font-size)/var(--wui-typography-heading-4-line-height) var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-4-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-4-font-size: 18px;\n --wui-typography-heading-4-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-4-letter-spacing: 0px;\n --wui-typography-heading-4-line-height: 24px;\n --wui-typography-heading-5: var(--wui-typography-heading-5-font-weight) var(--wui-typography-heading-5-font-size)/var(--wui-typography-heading-5-line-height) var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-5-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-5-font-size: 16px;\n --wui-typography-heading-5-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-5-letter-spacing: 0px;\n --wui-typography-heading-5-line-height: 22px;\n --wui-typography-heading-6: var(--wui-typography-heading-6-font-weight) var(--wui-typography-heading-6-font-size)/var(--wui-typography-heading-6-line-height) var(--wui-typography-heading-6-font-family);\n --wui-typography-heading-6-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-6-font-size: 14px;\n --wui-typography-heading-6-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-6-letter-spacing: 0px;\n --wui-typography-heading-6-line-height: 18px;\n --wui-typography-heading-hero: var(--wui-typography-heading-hero-font-weight) var(--wui-typography-heading-hero-font-size)/var(--wui-typography-heading-hero-line-height) var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-hero-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-hero-font-size: 48px;\n --wui-typography-heading-hero-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-hero-letter-spacing: 0px;\n --wui-typography-heading-hero-line-height: 58px;\n --wui-typography-label-1: var(--wui-typography-label-1-font-weight) var(--wui-typography-label-1-font-size)/var(--wui-typography-label-1-line-height) var(--wui-typography-label-1-font-family);\n --wui-typography-label-1-font-family: var(--wui-typography-family-default);\n --wui-typography-label-1-font-size: 18px;\n --wui-typography-label-1-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-1-letter-spacing: 0px;\n --wui-typography-label-1-line-height: 24px;\n --wui-typography-label-2: var(--wui-typography-label-2-font-weight) var(--wui-typography-label-2-font-size)/var(--wui-typography-label-2-line-height) var(--wui-typography-label-2-font-family);\n --wui-typography-label-2-font-family: var(--wui-typography-family-default);\n --wui-typography-label-2-font-size: 16px;\n --wui-typography-label-2-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-2-letter-spacing: 0px;\n --wui-typography-label-2-line-height: 18px;\n --wui-typography-label-3: var(--wui-typography-label-3-font-weight) var(--wui-typography-label-3-font-size)/var(--wui-typography-label-3-line-height) var(--wui-typography-label-3-font-family);\n --wui-typography-label-3-font-family: var(--wui-typography-family-default);\n --wui-typography-label-3-font-size: 14px;\n --wui-typography-label-3-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-3-letter-spacing: 0px;\n --wui-typography-label-3-line-height: 16px;\n --wui-typography-label-4: var(--wui-typography-label-4-font-weight) var(--wui-typography-label-4-font-size)/var(--wui-typography-label-4-line-height) var(--wui-typography-label-4-font-family);\n --wui-typography-label-4-font-family: var(--wui-typography-family-default);\n --wui-typography-label-4-font-size: 12px;\n --wui-typography-label-4-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-4-letter-spacing: 0px;\n --wui-typography-label-4-line-height: 14px;\n --wui-typography-weight-body: 425;\n --wui-typography-weight-body-bold: 700;\n --wui-typography-weight-brand-black: 700;\n --wui-typography-weight-brand-bold: 600;\n --wui-typography-weight-label: 475;\n --wui-typography-weight-label-bold: 600;\n --wui-vendor-hubspot-1: #fefcfb;\n --wui-vendor-hubspot-2: #fff5f2;\n --wui-vendor-hubspot-3: #ffe9e2;\n --wui-vendor-hubspot-4: #ffd7c9;\n --wui-vendor-hubspot-5: #ffc8b7;\n --wui-vendor-hubspot-6: #ffb8a3;\n --wui-vendor-hubspot-7: #ffa48d;\n --wui-vendor-hubspot-8: #f68a70;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f24d25;\n --wui-vendor-hubspot-11: #d93a0f;\n --wui-vendor-hubspot-12: #5b2a1e;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-hubspot-surface: #fff3efcc;\n --wui-vendor-marketo-1: #fdfdff;\n --wui-vendor-marketo-2: #f7f8ff;\n --wui-vendor-marketo-3: #eff2ff;\n --wui-vendor-marketo-4: #e3e8ff;\n --wui-vendor-marketo-5: #d5ddff;\n --wui-vendor-marketo-6: #c5cfff;\n --wui-vendor-marketo-7: #b0bcfa;\n --wui-vendor-marketo-8: #93a0f2;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #4f55c7;\n --wui-vendor-marketo-12: #252a62;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-marketo-surface: #f5f6ffcc;\n --wui-vendor-pardot-1: #fafdff;\n --wui-vendor-pardot-2: #f3fafe;\n --wui-vendor-pardot-3: #e1f5ff;\n --wui-vendor-pardot-4: #ceeeff;\n --wui-vendor-pardot-5: #bae5ff;\n --wui-vendor-pardot-6: #a4d9fa;\n --wui-vendor-pardot-7: #85c9f1;\n --wui-vendor-pardot-8: #4fb3e8;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0094cf;\n --wui-vendor-pardot-11: #0079b5;\n --wui-vendor-pardot-12: #0c3a51;\n --wui-vendor-pardot-contrast: #fff;\n --wui-vendor-pardot-surface: #f0f9fecc;\n --wui-warning-1: #fdfdfa;\n --wui-warning-2: #fefceb;\n --wui-warning-3: #fff9bf;\n --wui-warning-4: #fef29f;\n --wui-warning-5: #f8e981;\n --wui-warning-6: #e9da79;\n --wui-warning-7: #d8cb75;\n --wui-warning-8: #c4b54f;\n --wui-warning-9: #ffe62a;\n --wui-warning-10: #f3dd45;\n --wui-warning-11: #897a00;\n --wui-warning-12: #413d23;\n --wui-warning-alpha-1: #99990005;\n --wui-warning-alpha-2: #f3d90014;\n --wui-warning-alpha-3: #ffe80040;\n --wui-warning-alpha-4: #fddd0061;\n --wui-warning-alpha-5: #f1d3007d;\n --wui-warning-alpha-6: #d6b90087;\n --wui-warning-alpha-7: #b79f008a;\n --wui-warning-alpha-8: #aa9400b0;\n --wui-warning-alpha-9: #ffe100d6;\n --wui-warning-alpha-10: #efd100ba;\n --wui-warning-alpha-11: #897a00;\n --wui-warning-alpha-12: #231e00db;\n --wui-warning-contrast: #262209;\n --wui-warning-surface: #fefbe6cc;\n --wui-yellow-1: #fdfdf8;\n --wui-yellow-2: #fbfcea;\n --wui-yellow-3: #f6fbb8;\n --wui-yellow-4: #f0f491;\n --wui-yellow-5: #e7eb6d;\n --wui-yellow-6: #d8dd5d;\n --wui-yellow-7: #c8cc52;\n --wui-yellow-8: #b3b600;\n --wui-yellow-9: #bcbf19;\n --wui-yellow-10: #b1b400;\n --wui-yellow-11: #7a7b00;\n --wui-yellow-12: #3e3f14;\n --wui-yellow-alpha-1: #b7b70008;\n --wui-yellow-alpha-2: #cfdb0014;\n --wui-yellow-alpha-3: #dff10047;\n --wui-yellow-alpha-4: #dde6006e;\n --wui-yellow-alpha-5: #d5dc0091;\n --wui-yellow-alpha-6: #c2ca00a3;\n --wui-yellow-alpha-7: #aeb400ad;\n --wui-yellow-alpha-8: #b3b600;\n --wui-yellow-alpha-9: #b5b800e5;\n --wui-yellow-alpha-10: #b1b400;\n --wui-yellow-alpha-11: #7a7b00;\n --wui-yellow-alpha-12: #2e2f00eb;\n --wui-yellow-contrast: #22230b;\n --wui-yellow-surface: #fafbe5cc;\n --wui-zindex-backdrop: 500;\n --wui-zindex-menu: 500;\n --wui-zindex-modal: 500;\n --wui-zindex-popover: 500;\n --wui-zindex-select: 500;\n --wui-zindex-tooltip: 500;\n --wui-zindex-under: -1;\n}\n"}
|
|
178
178
|
:root,
|
|
179
179
|
[data-wui-theme='true'] {
|
|
180
180
|
${"/*\n * Typography weight overlay\n *\n * Reintroduces the var-with-fallback override hooks for heading weights. These\n * vars are part of the @wistia/ui public surface (see CustomizableThemeWrapper)\n * and consumers override them at any cascade level. DTCG aliases compile to a\n * single resolved value, so the fallback pattern can't live in the generated\n * tokens.css.\n *\n * Order matters: this file MUST follow the generated tokens.css so its\n * declarations win the cascade, and MUST precede typographyLegacyAliases.css so\n * the override hook propagates through any legacy `*-weight` alias as well.\n */\n--wui-typography-heading-hero-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-1-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-2-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-3-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-4-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-5-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-6-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n"}
|
|
@@ -265,6 +265,19 @@ const AriaLiveProvider = ({ children, debug = false }) => {
|
|
|
265
265
|
});
|
|
266
266
|
};
|
|
267
267
|
//#endregion
|
|
268
|
+
//#region src/providers/UIProvider/ToastScopeContext.tsx
|
|
269
|
+
/**
|
|
270
|
+
* Carries the toast scope id from a `UIProvider` down to `useToast` and
|
|
271
|
+
* `ToastProvider`. When set, `useToast` tags every toast with this id as
|
|
272
|
+
* sonner's `toasterId`, and `ToastProvider` renders a `Toaster` scoped to the
|
|
273
|
+
* same id — so toasts created within one `UIProvider` only render in that
|
|
274
|
+
* provider's `Toaster`.
|
|
275
|
+
*
|
|
276
|
+
* `undefined` (the default) preserves sonner's global behavior: the `Toaster`
|
|
277
|
+
* is unscoped and renders every toast that has no `toasterId`.
|
|
278
|
+
*/
|
|
279
|
+
const ToastScopeContext = createContext(void 0);
|
|
280
|
+
//#endregion
|
|
268
281
|
//#region src/providers/UIProvider/ToastProvider.tsx
|
|
269
282
|
const toastConfig = {
|
|
270
283
|
expand: false,
|
|
@@ -272,19 +285,28 @@ const toastConfig = {
|
|
|
272
285
|
position: "bottom-left",
|
|
273
286
|
visibleToasts: 3
|
|
274
287
|
};
|
|
275
|
-
const ToastProvider = () =>
|
|
288
|
+
const ToastProvider = () => {
|
|
289
|
+
const toasterId = useContext(ToastScopeContext);
|
|
290
|
+
return /* @__PURE__ */ jsx(Toaster, {
|
|
291
|
+
...toastConfig,
|
|
292
|
+
...toasterId !== void 0 && toasterId !== "" && { id: toasterId }
|
|
293
|
+
});
|
|
294
|
+
};
|
|
276
295
|
//#endregion
|
|
277
296
|
//#region src/providers/UIProvider/UIProvider.tsx
|
|
278
297
|
const UIProviderNestingContext = createContext(false);
|
|
279
|
-
const UIProvider = ({ children }) => {
|
|
298
|
+
const UIProvider = ({ children, id }) => {
|
|
280
299
|
if (useContext(UIProviderNestingContext)) return /* @__PURE__ */ jsx(Fragment, { children });
|
|
281
300
|
return /* @__PURE__ */ jsx(UIProviderNestingContext, {
|
|
282
301
|
value: true,
|
|
283
|
-
children: /* @__PURE__ */ jsx(
|
|
284
|
-
|
|
285
|
-
children,
|
|
286
|
-
|
|
287
|
-
|
|
302
|
+
children: /* @__PURE__ */ jsx(ToastScopeContext, {
|
|
303
|
+
value: id,
|
|
304
|
+
children: /* @__PURE__ */ jsx(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(Tooltip$1.Provider, { children: [
|
|
305
|
+
/* @__PURE__ */ jsx(GlobalStyle, {}),
|
|
306
|
+
children,
|
|
307
|
+
/* @__PURE__ */ jsx(ToastProvider, {})
|
|
308
|
+
] }) })
|
|
309
|
+
})
|
|
288
310
|
});
|
|
289
311
|
};
|
|
290
312
|
//#endregion
|
|
@@ -1711,52 +1733,52 @@ const Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ jsx(Ellipsis
|
|
|
1711
1733
|
Ellipsis.displayName = "Ellipsis_UI";
|
|
1712
1734
|
//#endregion
|
|
1713
1735
|
//#region src/css/designTokens/generated/schemes/standard.css
|
|
1714
|
-
var standard_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, standard permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1736
|
+
var standard_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, standard permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-gray-1);\n--wui-color-base-2: var(--wui-gray-2);\n--wui-color-base-3: var(--wui-gray-3);\n--wui-color-base-4: var(--wui-gray-4);\n--wui-color-base-5: var(--wui-gray-5);\n--wui-color-base-6: var(--wui-gray-6);\n--wui-color-base-7: var(--wui-gray-7);\n--wui-color-base-8: var(--wui-gray-8);\n--wui-color-base-9: var(--wui-gray-9);\n--wui-color-base-10: var(--wui-gray-10);\n--wui-color-base-11: var(--wui-gray-11);\n--wui-color-base-12: var(--wui-gray-12);\n--wui-color-base-contrast: var(--wui-gray-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-gray-1);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-gray-12);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-color-accent-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1715
1737
|
//#endregion
|
|
1716
1738
|
//#region src/css/designTokens/generated/schemes/blue.css
|
|
1717
|
-
var blue_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, blue permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1739
|
+
var blue_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, blue permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-blue-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1718
1740
|
//#endregion
|
|
1719
1741
|
//#region src/css/designTokens/generated/schemes/green.css
|
|
1720
|
-
var green_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, green permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1742
|
+
var green_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, green permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-green-1);\n--wui-color-accent-2: var(--wui-green-2);\n--wui-color-accent-3: var(--wui-green-3);\n--wui-color-accent-4: var(--wui-green-4);\n--wui-color-accent-5: var(--wui-green-5);\n--wui-color-accent-6: var(--wui-green-6);\n--wui-color-accent-7: var(--wui-green-7);\n--wui-color-accent-8: var(--wui-green-8);\n--wui-color-accent-9: var(--wui-green-9);\n--wui-color-accent-10: var(--wui-green-10);\n--wui-color-accent-11: var(--wui-green-11);\n--wui-color-accent-12: var(--wui-green-12);\n--wui-color-accent-contrast: var(--wui-green-contrast);\n--wui-color-base-1: var(--wui-green-1);\n--wui-color-base-2: var(--wui-green-2);\n--wui-color-base-3: var(--wui-green-3);\n--wui-color-base-4: var(--wui-green-4);\n--wui-color-base-5: var(--wui-green-5);\n--wui-color-base-6: var(--wui-green-6);\n--wui-color-base-7: var(--wui-green-7);\n--wui-color-base-8: var(--wui-green-8);\n--wui-color-base-9: var(--wui-green-9);\n--wui-color-base-10: var(--wui-green-10);\n--wui-color-base-11: var(--wui-green-11);\n--wui-color-base-12: var(--wui-green-12);\n--wui-color-base-contrast: var(--wui-green-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-green-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-green-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-green-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1721
1743
|
//#endregion
|
|
1722
1744
|
//#region src/css/designTokens/generated/schemes/orange.css
|
|
1723
|
-
var orange_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, orange permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1745
|
+
var orange_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, orange permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-orange-1);\n--wui-color-accent-2: var(--wui-orange-2);\n--wui-color-accent-3: var(--wui-orange-3);\n--wui-color-accent-4: var(--wui-orange-4);\n--wui-color-accent-5: var(--wui-orange-5);\n--wui-color-accent-6: var(--wui-orange-6);\n--wui-color-accent-7: var(--wui-orange-7);\n--wui-color-accent-8: var(--wui-orange-8);\n--wui-color-accent-9: var(--wui-orange-9);\n--wui-color-accent-10: var(--wui-orange-10);\n--wui-color-accent-11: var(--wui-orange-11);\n--wui-color-accent-12: var(--wui-orange-12);\n--wui-color-accent-contrast: var(--wui-orange-contrast);\n--wui-color-base-1: var(--wui-orange-1);\n--wui-color-base-2: var(--wui-orange-2);\n--wui-color-base-3: var(--wui-orange-3);\n--wui-color-base-4: var(--wui-orange-4);\n--wui-color-base-5: var(--wui-orange-5);\n--wui-color-base-6: var(--wui-orange-6);\n--wui-color-base-7: var(--wui-orange-7);\n--wui-color-base-8: var(--wui-orange-8);\n--wui-color-base-9: var(--wui-orange-9);\n--wui-color-base-10: var(--wui-orange-10);\n--wui-color-base-11: var(--wui-orange-11);\n--wui-color-base-12: var(--wui-orange-12);\n--wui-color-base-contrast: var(--wui-orange-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-orange-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-orange-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-orange-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1724
1746
|
//#endregion
|
|
1725
1747
|
//#region src/css/designTokens/generated/schemes/pink.css
|
|
1726
|
-
var pink_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, pink permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1748
|
+
var pink_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, pink permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-pink-1);\n--wui-color-accent-2: var(--wui-pink-2);\n--wui-color-accent-3: var(--wui-pink-3);\n--wui-color-accent-4: var(--wui-pink-4);\n--wui-color-accent-5: var(--wui-pink-5);\n--wui-color-accent-6: var(--wui-pink-6);\n--wui-color-accent-7: var(--wui-pink-7);\n--wui-color-accent-8: var(--wui-pink-8);\n--wui-color-accent-9: var(--wui-pink-9);\n--wui-color-accent-10: var(--wui-pink-10);\n--wui-color-accent-11: var(--wui-pink-11);\n--wui-color-accent-12: var(--wui-pink-12);\n--wui-color-accent-contrast: var(--wui-pink-contrast);\n--wui-color-base-1: var(--wui-pink-1);\n--wui-color-base-2: var(--wui-pink-2);\n--wui-color-base-3: var(--wui-pink-3);\n--wui-color-base-4: var(--wui-pink-4);\n--wui-color-base-5: var(--wui-pink-5);\n--wui-color-base-6: var(--wui-pink-6);\n--wui-color-base-7: var(--wui-pink-7);\n--wui-color-base-8: var(--wui-pink-8);\n--wui-color-base-9: var(--wui-pink-9);\n--wui-color-base-10: var(--wui-pink-10);\n--wui-color-base-11: var(--wui-pink-11);\n--wui-color-base-12: var(--wui-pink-12);\n--wui-color-base-contrast: var(--wui-pink-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-pink-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-pink-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-pink-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1727
1749
|
//#endregion
|
|
1728
1750
|
//#region src/css/designTokens/generated/schemes/purple.css
|
|
1729
|
-
var purple_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, purple permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1751
|
+
var purple_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, purple permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-purple-1);\n--wui-color-accent-2: var(--wui-purple-2);\n--wui-color-accent-3: var(--wui-purple-3);\n--wui-color-accent-4: var(--wui-purple-4);\n--wui-color-accent-5: var(--wui-purple-5);\n--wui-color-accent-6: var(--wui-purple-6);\n--wui-color-accent-7: var(--wui-purple-7);\n--wui-color-accent-8: var(--wui-purple-8);\n--wui-color-accent-9: var(--wui-purple-9);\n--wui-color-accent-10: var(--wui-purple-10);\n--wui-color-accent-11: var(--wui-purple-11);\n--wui-color-accent-12: var(--wui-purple-12);\n--wui-color-accent-contrast: var(--wui-purple-contrast);\n--wui-color-base-1: var(--wui-purple-1);\n--wui-color-base-2: var(--wui-purple-2);\n--wui-color-base-3: var(--wui-purple-3);\n--wui-color-base-4: var(--wui-purple-4);\n--wui-color-base-5: var(--wui-purple-5);\n--wui-color-base-6: var(--wui-purple-6);\n--wui-color-base-7: var(--wui-purple-7);\n--wui-color-base-8: var(--wui-purple-8);\n--wui-color-base-9: var(--wui-purple-9);\n--wui-color-base-10: var(--wui-purple-10);\n--wui-color-base-11: var(--wui-purple-11);\n--wui-color-base-12: var(--wui-purple-12);\n--wui-color-base-contrast: var(--wui-purple-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-purple-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-purple-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-purple-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1730
1752
|
//#endregion
|
|
1731
1753
|
//#region src/css/designTokens/generated/schemes/red.css
|
|
1732
|
-
var red_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, red permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1754
|
+
var red_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, red permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-red-1);\n--wui-color-accent-2: var(--wui-red-2);\n--wui-color-accent-3: var(--wui-red-3);\n--wui-color-accent-4: var(--wui-red-4);\n--wui-color-accent-5: var(--wui-red-5);\n--wui-color-accent-6: var(--wui-red-6);\n--wui-color-accent-7: var(--wui-red-7);\n--wui-color-accent-8: var(--wui-red-8);\n--wui-color-accent-9: var(--wui-red-9);\n--wui-color-accent-10: var(--wui-red-10);\n--wui-color-accent-11: var(--wui-red-11);\n--wui-color-accent-12: var(--wui-red-12);\n--wui-color-accent-contrast: var(--wui-red-contrast);\n--wui-color-base-1: var(--wui-red-1);\n--wui-color-base-2: var(--wui-red-2);\n--wui-color-base-3: var(--wui-red-3);\n--wui-color-base-4: var(--wui-red-4);\n--wui-color-base-5: var(--wui-red-5);\n--wui-color-base-6: var(--wui-red-6);\n--wui-color-base-7: var(--wui-red-7);\n--wui-color-base-8: var(--wui-red-8);\n--wui-color-base-9: var(--wui-red-9);\n--wui-color-base-10: var(--wui-red-10);\n--wui-color-base-11: var(--wui-red-11);\n--wui-color-base-12: var(--wui-red-12);\n--wui-color-base-contrast: var(--wui-red-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-red-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-red-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-red-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1733
1755
|
//#endregion
|
|
1734
1756
|
//#region src/css/designTokens/generated/schemes/yellow.css
|
|
1735
|
-
var yellow_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, yellow permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1757
|
+
var yellow_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, yellow permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-yellow-1);\n--wui-color-accent-2: var(--wui-yellow-2);\n--wui-color-accent-3: var(--wui-yellow-3);\n--wui-color-accent-4: var(--wui-yellow-4);\n--wui-color-accent-5: var(--wui-yellow-5);\n--wui-color-accent-6: var(--wui-yellow-6);\n--wui-color-accent-7: var(--wui-yellow-7);\n--wui-color-accent-8: var(--wui-yellow-8);\n--wui-color-accent-9: var(--wui-yellow-9);\n--wui-color-accent-10: var(--wui-yellow-10);\n--wui-color-accent-11: var(--wui-yellow-11);\n--wui-color-accent-12: var(--wui-yellow-12);\n--wui-color-accent-contrast: var(--wui-yellow-contrast);\n--wui-color-base-1: var(--wui-yellow-1);\n--wui-color-base-2: var(--wui-yellow-2);\n--wui-color-base-3: var(--wui-yellow-3);\n--wui-color-base-4: var(--wui-yellow-4);\n--wui-color-base-5: var(--wui-yellow-5);\n--wui-color-base-6: var(--wui-yellow-6);\n--wui-color-base-7: var(--wui-yellow-7);\n--wui-color-base-8: var(--wui-yellow-8);\n--wui-color-base-9: var(--wui-yellow-9);\n--wui-color-base-10: var(--wui-yellow-10);\n--wui-color-base-11: var(--wui-yellow-11);\n--wui-color-base-12: var(--wui-yellow-12);\n--wui-color-base-contrast: var(--wui-yellow-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-yellow-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-yellow-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-yellow-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1736
1758
|
//#endregion
|
|
1737
1759
|
//#region src/css/designTokens/generated/schemes/error.css
|
|
1738
|
-
var error_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, error permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1760
|
+
var error_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, error permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-error-1);\n--wui-color-accent-2: var(--wui-error-2);\n--wui-color-accent-3: var(--wui-error-3);\n--wui-color-accent-4: var(--wui-error-4);\n--wui-color-accent-5: var(--wui-error-5);\n--wui-color-accent-6: var(--wui-error-6);\n--wui-color-accent-7: var(--wui-error-7);\n--wui-color-accent-8: var(--wui-error-8);\n--wui-color-accent-9: var(--wui-error-9);\n--wui-color-accent-10: var(--wui-error-10);\n--wui-color-accent-11: var(--wui-error-11);\n--wui-color-accent-12: var(--wui-error-12);\n--wui-color-accent-contrast: var(--wui-error-contrast);\n--wui-color-base-1: var(--wui-error-1);\n--wui-color-base-2: var(--wui-error-2);\n--wui-color-base-3: var(--wui-error-3);\n--wui-color-base-4: var(--wui-error-4);\n--wui-color-base-5: var(--wui-error-5);\n--wui-color-base-6: var(--wui-error-6);\n--wui-color-base-7: var(--wui-error-7);\n--wui-color-base-8: var(--wui-error-8);\n--wui-color-base-9: var(--wui-error-9);\n--wui-color-base-10: var(--wui-error-10);\n--wui-color-base-11: var(--wui-error-11);\n--wui-color-base-12: var(--wui-error-12);\n--wui-color-base-contrast: var(--wui-error-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-error-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-error-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-error-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1739
1761
|
//#endregion
|
|
1740
1762
|
//#region src/css/designTokens/generated/schemes/info.css
|
|
1741
|
-
var info_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, info permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1763
|
+
var info_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, info permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-blue-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1742
1764
|
//#endregion
|
|
1743
1765
|
//#region src/css/designTokens/generated/schemes/success.css
|
|
1744
|
-
var success_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, success permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1766
|
+
var success_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, success permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-success-1);\n--wui-color-accent-2: var(--wui-success-2);\n--wui-color-accent-3: var(--wui-success-3);\n--wui-color-accent-4: var(--wui-success-4);\n--wui-color-accent-5: var(--wui-success-5);\n--wui-color-accent-6: var(--wui-success-6);\n--wui-color-accent-7: var(--wui-success-7);\n--wui-color-accent-8: var(--wui-success-8);\n--wui-color-accent-9: var(--wui-success-9);\n--wui-color-accent-10: var(--wui-success-10);\n--wui-color-accent-11: var(--wui-success-11);\n--wui-color-accent-12: var(--wui-success-12);\n--wui-color-accent-contrast: var(--wui-success-contrast);\n--wui-color-base-1: var(--wui-success-1);\n--wui-color-base-2: var(--wui-success-2);\n--wui-color-base-3: var(--wui-success-3);\n--wui-color-base-4: var(--wui-success-4);\n--wui-color-base-5: var(--wui-success-5);\n--wui-color-base-6: var(--wui-success-6);\n--wui-color-base-7: var(--wui-success-7);\n--wui-color-base-8: var(--wui-success-8);\n--wui-color-base-9: var(--wui-success-9);\n--wui-color-base-10: var(--wui-success-10);\n--wui-color-base-11: var(--wui-success-11);\n--wui-color-base-12: var(--wui-success-12);\n--wui-color-base-contrast: var(--wui-success-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-success-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-success-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-success-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1745
1767
|
//#endregion
|
|
1746
1768
|
//#region src/css/designTokens/generated/schemes/warning.css
|
|
1747
|
-
var warning_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, warning permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1769
|
+
var warning_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, warning permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-warning-1);\n--wui-color-accent-2: var(--wui-warning-2);\n--wui-color-accent-3: var(--wui-warning-3);\n--wui-color-accent-4: var(--wui-warning-4);\n--wui-color-accent-5: var(--wui-warning-5);\n--wui-color-accent-6: var(--wui-warning-6);\n--wui-color-accent-7: var(--wui-warning-7);\n--wui-color-accent-8: var(--wui-warning-8);\n--wui-color-accent-9: var(--wui-warning-9);\n--wui-color-accent-10: var(--wui-warning-10);\n--wui-color-accent-11: var(--wui-warning-11);\n--wui-color-accent-12: var(--wui-warning-12);\n--wui-color-accent-contrast: var(--wui-warning-contrast);\n--wui-color-base-1: var(--wui-warning-1);\n--wui-color-base-2: var(--wui-warning-2);\n--wui-color-base-3: var(--wui-warning-3);\n--wui-color-base-4: var(--wui-warning-4);\n--wui-color-base-5: var(--wui-warning-5);\n--wui-color-base-6: var(--wui-warning-6);\n--wui-color-base-7: var(--wui-warning-7);\n--wui-color-base-8: var(--wui-warning-8);\n--wui-color-base-9: var(--wui-warning-9);\n--wui-color-base-10: var(--wui-warning-10);\n--wui-color-base-11: var(--wui-warning-11);\n--wui-color-base-12: var(--wui-warning-12);\n--wui-color-base-contrast: var(--wui-warning-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-warning-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-warning-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-warning-11);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1748
1770
|
//#endregion
|
|
1749
1771
|
//#region src/css/designTokens/generated/schemes/vendor-hubspot.css
|
|
1750
|
-
var vendor_hubspot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-hubspot permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1772
|
+
var vendor_hubspot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-hubspot permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-vendor-hubspot-1);\n--wui-color-accent-2: var(--wui-vendor-hubspot-2);\n--wui-color-accent-3: var(--wui-vendor-hubspot-3);\n--wui-color-accent-4: var(--wui-vendor-hubspot-4);\n--wui-color-accent-5: var(--wui-vendor-hubspot-5);\n--wui-color-accent-6: var(--wui-vendor-hubspot-6);\n--wui-color-accent-7: var(--wui-vendor-hubspot-7);\n--wui-color-accent-8: var(--wui-vendor-hubspot-8);\n--wui-color-accent-9: var(--wui-vendor-hubspot-9);\n--wui-color-accent-10: var(--wui-vendor-hubspot-10);\n--wui-color-accent-11: var(--wui-vendor-hubspot-11);\n--wui-color-accent-12: var(--wui-vendor-hubspot-12);\n--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-base-1: var(--wui-vendor-hubspot-1);\n--wui-color-base-2: var(--wui-vendor-hubspot-2);\n--wui-color-base-3: var(--wui-vendor-hubspot-3);\n--wui-color-base-4: var(--wui-vendor-hubspot-4);\n--wui-color-base-5: var(--wui-vendor-hubspot-5);\n--wui-color-base-6: var(--wui-vendor-hubspot-6);\n--wui-color-base-7: var(--wui-vendor-hubspot-7);\n--wui-color-base-8: var(--wui-vendor-hubspot-8);\n--wui-color-base-9: var(--wui-vendor-hubspot-9);\n--wui-color-base-10: var(--wui-vendor-hubspot-10);\n--wui-color-base-11: var(--wui-vendor-hubspot-11);\n--wui-color-base-12: var(--wui-vendor-hubspot-12);\n--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-hubspot-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-vendor-hubspot-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-vendor-hubspot-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1751
1773
|
//#endregion
|
|
1752
1774
|
//#region src/css/designTokens/generated/schemes/vendor-marketo.css
|
|
1753
|
-
var vendor_marketo_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-marketo permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1775
|
+
var vendor_marketo_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-marketo permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-vendor-marketo-1);\n--wui-color-accent-2: var(--wui-vendor-marketo-2);\n--wui-color-accent-3: var(--wui-vendor-marketo-3);\n--wui-color-accent-4: var(--wui-vendor-marketo-4);\n--wui-color-accent-5: var(--wui-vendor-marketo-5);\n--wui-color-accent-6: var(--wui-vendor-marketo-6);\n--wui-color-accent-7: var(--wui-vendor-marketo-7);\n--wui-color-accent-8: var(--wui-vendor-marketo-8);\n--wui-color-accent-9: var(--wui-vendor-marketo-9);\n--wui-color-accent-10: var(--wui-vendor-marketo-10);\n--wui-color-accent-11: var(--wui-vendor-marketo-11);\n--wui-color-accent-12: var(--wui-vendor-marketo-12);\n--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-base-1: var(--wui-vendor-marketo-1);\n--wui-color-base-2: var(--wui-vendor-marketo-2);\n--wui-color-base-3: var(--wui-vendor-marketo-3);\n--wui-color-base-4: var(--wui-vendor-marketo-4);\n--wui-color-base-5: var(--wui-vendor-marketo-5);\n--wui-color-base-6: var(--wui-vendor-marketo-6);\n--wui-color-base-7: var(--wui-vendor-marketo-7);\n--wui-color-base-8: var(--wui-vendor-marketo-8);\n--wui-color-base-9: var(--wui-vendor-marketo-9);\n--wui-color-base-10: var(--wui-vendor-marketo-10);\n--wui-color-base-11: var(--wui-vendor-marketo-11);\n--wui-color-base-12: var(--wui-vendor-marketo-12);\n--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-marketo-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-vendor-marketo-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-vendor-marketo-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1754
1776
|
//#endregion
|
|
1755
1777
|
//#region src/css/designTokens/generated/schemes/vendor-pardot.css
|
|
1756
|
-
var vendor_pardot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-pardot permutation\n * ------------------------------------------- */\n--wui-color-
|
|
1778
|
+
var vendor_pardot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-pardot permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-vendor-pardot-1);\n--wui-color-accent-2: var(--wui-vendor-pardot-2);\n--wui-color-accent-3: var(--wui-vendor-pardot-3);\n--wui-color-accent-4: var(--wui-vendor-pardot-4);\n--wui-color-accent-5: var(--wui-vendor-pardot-5);\n--wui-color-accent-6: var(--wui-vendor-pardot-6);\n--wui-color-accent-7: var(--wui-vendor-pardot-7);\n--wui-color-accent-8: var(--wui-vendor-pardot-8);\n--wui-color-accent-9: var(--wui-vendor-pardot-9);\n--wui-color-accent-10: var(--wui-vendor-pardot-10);\n--wui-color-accent-11: var(--wui-vendor-pardot-11);\n--wui-color-accent-12: var(--wui-vendor-pardot-12);\n--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-base-1: var(--wui-vendor-pardot-1);\n--wui-color-base-2: var(--wui-vendor-pardot-2);\n--wui-color-base-3: var(--wui-vendor-pardot-3);\n--wui-color-base-4: var(--wui-vendor-pardot-4);\n--wui-color-base-5: var(--wui-vendor-pardot-5);\n--wui-color-base-6: var(--wui-vendor-pardot-6);\n--wui-color-base-7: var(--wui-vendor-pardot-7);\n--wui-color-base-8: var(--wui-vendor-pardot-8);\n--wui-color-base-9: var(--wui-vendor-pardot-9);\n--wui-color-base-10: var(--wui-vendor-pardot-10);\n--wui-color-base-11: var(--wui-vendor-pardot-11);\n--wui-color-base-12: var(--wui-vendor-pardot-12);\n--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-pardot-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-vendor-pardot-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-vendor-pardot-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
|
|
1757
1779
|
//#endregion
|
|
1758
1780
|
//#region src/css/designTokens/generated/schemes/nav.css
|
|
1759
|
-
var nav_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, nav permutation\n * ------------------------------------------- */\n--wui-color-bg-
|
|
1781
|
+
var nav_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, nav permutation\n * ------------------------------------------- */\n--wui-color-bg-app: #1e3399;\n--wui-color-bg-fill: var(--wui-blue-1);\n--wui-color-bg-fill-active: #dcdfef;\n--wui-color-bg-fill-hover: #e7e9f4;\n--wui-color-bg-surface: #0000;\n--wui-color-bg-surface-active: #122271;\n--wui-color-bg-surface-disabled: #0000;\n--wui-color-bg-surface-hover: #15267b;\n--wui-color-bg-surface-secondary: #15267b;\n--wui-color-bg-surface-secondary-active: #101e67;\n--wui-color-bg-surface-secondary-hover: #122271;\n--wui-color-bg-surface-selected: var(--wui-color-bg-fill);\n--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);\n--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);\n--wui-color-bg-surface-tertiary: #0d1a5c;\n--wui-color-border: var(--wui-color-bg-fill);\n--wui-color-border-active: var(--wui-color-bg-fill-active);\n--wui-color-border-active-selected: #0000;\n--wui-color-border-hover: var(--wui-color-bg-fill-hover);\n--wui-color-border-hover-selected: #0000;\n--wui-color-border-secondary: #101e67;\n--wui-color-border-selected: #0000;\n--wui-color-focus-ring: var(--wui-blue-1);\n--wui-color-icon: var(--wui-blue-1);\n--wui-color-icon-disabled: var(--wui-blue-8);\n--wui-color-icon-on-fill: var(--wui-color-bg-app);\n--wui-color-icon-selected: var(--wui-color-bg-app);\n--wui-color-segmented-color-text-override: var(--wui-blue-9);\n--wui-color-text: var(--wui-blue-1);\n--wui-color-text-button: var(--wui-blue-1);\n--wui-color-text-disabled: var(--wui-blue-8);\n--wui-color-text-link: var(--wui-blue-4);\n--wui-color-text-on-fill: var(--wui-color-bg-app);\n--wui-color-text-secondary: var(--wui-blue-6);\n--wui-color-text-selected: var(--wui-color-bg-app);\n";
|
|
1760
1782
|
//#endregion
|
|
1761
1783
|
//#region src/css/designTokens/colorSchemes.tsx
|
|
1762
1784
|
const standardColorScheme = css`
|
|
@@ -1898,8 +1920,9 @@ Toast.displayName = "Toast";
|
|
|
1898
1920
|
//#endregion
|
|
1899
1921
|
//#region src/hooks/useToast/useToast.tsx
|
|
1900
1922
|
const useToast = () => {
|
|
1923
|
+
const toasterId = useContext(ToastScopeContext);
|
|
1901
1924
|
return useCallback(({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
|
|
1902
|
-
toast.custom(() => {
|
|
1925
|
+
const id = toast.custom(() => {
|
|
1903
1926
|
return /* @__PURE__ */ jsx(Toast, {
|
|
1904
1927
|
action,
|
|
1905
1928
|
colorScheme,
|
|
@@ -1908,9 +1931,16 @@ const useToast = () => {
|
|
|
1908
1931
|
});
|
|
1909
1932
|
}, {
|
|
1910
1933
|
position,
|
|
1911
|
-
duration
|
|
1934
|
+
duration,
|
|
1935
|
+
...toasterId !== void 0 && toasterId !== "" && { toasterId }
|
|
1912
1936
|
});
|
|
1913
|
-
|
|
1937
|
+
return {
|
|
1938
|
+
id,
|
|
1939
|
+
dismiss: () => {
|
|
1940
|
+
toast.dismiss(id);
|
|
1941
|
+
}
|
|
1942
|
+
};
|
|
1943
|
+
}, [toasterId]);
|
|
1914
1944
|
};
|
|
1915
1945
|
//#endregion
|
|
1916
1946
|
//#region src/css/buttonResetCss.tsx
|