@wistia/ui 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +57 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +78 -11
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v1.
|
|
3
|
+
* @license @wistia/ui v1.6.0
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -67,7 +67,7 @@ const clickRegionGlobalStyles = css`
|
|
|
67
67
|
//#endregion
|
|
68
68
|
//#region src/css/designTokens/index.tsx
|
|
69
69
|
const designTokens = css`
|
|
70
|
-
${"/* -------------------------------------------\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: var(--wui-app-background);\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: var(--wui-gray-3);\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: var(--wui-blue-9);\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: var(--wui-blue-8);\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: var(--wui-blue-6);\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\n:root[data-wui-color-mode='dark'],\n[data-wui-color-mode='dark'] {\ncolor-scheme: dark;\n--wui-app-background: #101629;\n --wui-blue-1: #111725;\n --wui-blue-2: #12192b;\n --wui-blue-3: #152452;\n --wui-blue-4: #192c6d;\n --wui-blue-5: #203681;\n --wui-blue-6: #284191;\n --wui-blue-7: #314da7;\n --wui-blue-8: #395ac3;\n --wui-blue-9: #2949e5;\n --wui-blue-10: #1f36d3;\n --wui-blue-11: #90b3ff;\n --wui-blue-12: #d2e1ff;\n --wui-blue-alpha-1: #90960003;\n --wui-blue-alpha-2: #90d6a905;\n --wui-blue-alpha-3: #2b5fff30;\n --wui-blue-alpha-4: #2c5bfd52;\n --wui-blue-alpha-5: #3764ff69;\n --wui-blue-alpha-6: #426fff7d;\n --wui-blue-alpha-7: #4773fe96;\n --wui-blue-alpha-8: #4975ffb8;\n --wui-blue-alpha-9: #2c4ffee0;\n --wui-blue-alpha-10: #233fffcc;\n --wui-blue-alpha-11: #90b3ff;\n --wui-blue-alpha-12: #d2e1ff;\n --wui-blue-contrast: #fff;\n --wui-blue-surface: #141c2d80;\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-color-bg-app: var(--wui-app-background);\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-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-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: var(--wui-gray-3);\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-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-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-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-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-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: var(--wui-blue-9);\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-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: var(--wui-blue-8);\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-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-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: var(--wui-blue-6);\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-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-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-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-text-blue: var(--wui-blue-12);\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-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-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-warning: var(--wui-warning-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\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-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-error-1: #1d1514;\n --wui-error-2: #231615;\n --wui-error-3: #3d1414;\n --wui-error-4: #521013;\n --wui-error-5: #62171a;\n --wui-error-6: #732426;\n --wui-error-7: #8c3434;\n --wui-error-8: #b54546;\n --wui-error-9: #e5484d;\n --wui-error-10: #d63941;\n --wui-error-11: #ff8f8b;\n --wui-error-12: #ffd2ce;\n --wui-error-alpha-1: #fd04000d;\n --wui-error-alpha-2: #f7170014;\n --wui-error-alpha-3: #fb0c0030;\n --wui-error-alpha-4: #fd010047;\n --wui-error-alpha-5: #fe190059;\n --wui-error-alpha-6: #ff38226b;\n --wui-error-alpha-7: #fe4f3e85;\n --wui-error-alpha-8: #fe5a52b0;\n --wui-error-alpha-9: #fe4e52e3;\n --wui-error-alpha-10: #fe4046d4;\n --wui-error-alpha-11: #ff8f8b;\n --wui-error-alpha-12: #ffd2ce;\n --wui-error-contrast: #fff;\n --wui-error-surface: #36160280;\n --wui-gray-1: #0d162d;\n --wui-gray-2: #131c35;\n --wui-gray-3: #172448;\n --wui-gray-4: #1c2a50;\n --wui-gray-5: #223057;\n --wui-gray-6: #293860;\n --wui-gray-7: #36466f;\n --wui-gray-8: #4e5f8a;\n --wui-gray-9: #5b6d98;\n --wui-gray-10: #687aa7;\n --wui-gray-11: #9fb3e3;\n --wui-gray-12: #e4eeff;\n --wui-gray-alpha-1: #0017f605;\n --wui-gray-alpha-2: #437cf60f;\n --wui-gray-alpha-3: #4177ff26;\n --wui-gray-alpha-4: #5283fd2e;\n --wui-gray-alpha-5: #638fff38;\n --wui-gray-alpha-6: #719afe42;\n --wui-gray-alpha-7: #84a8fe54;\n --wui-gray-alpha-8: #98b7ff73;\n --wui-gray-alpha-9: #a0bcfe85;\n --wui-gray-alpha-10: #a4bffe96;\n --wui-gray-alpha-11: #b4caffde;\n --wui-gray-alpha-12: #e4eeff;\n --wui-gray-contrast: #fff;\n --wui-gray-surface: #0000000d;\n --wui-green-1: #111a0f;\n --wui-green-2: #151e13;\n --wui-green-3: #182e14;\n --wui-green-4: #133e0c;\n --wui-green-5: #174c0d;\n --wui-green-6: #1a5c0e;\n --wui-green-7: #1d6d0d;\n --wui-green-8: #1d8004;\n --wui-green-9: #268713;\n --wui-green-10: #117900;\n --wui-green-11: #76d467;\n --wui-green-12: #aff9a3;\n --wui-green-alpha-1: #44e30005;\n --wui-green-alpha-2: #9ef90009;\n --wui-green-alpha-3: #5cf9001b;\n --wui-green-alpha-4: #22fe002c;\n --wui-green-alpha-5: #2efc003c;\n --wui-green-alpha-6: #32fe004d;\n --wui-green-alpha-7: #33fd0060;\n --wui-green-alpha-8: #2cfd0075;\n --wui-green-alpha-9: #3eff007c;\n --wui-green-alpha-10: #13fd006d;\n --wui-green-alpha-11: #8dff75d0;\n --wui-green-alpha-12: #b3fea6f9;\n --wui-green-contrast: #fff;\n --wui-green-surface: #1c240280;\n --wui-orange-1: #1c1514;\n --wui-orange-2: #211816;\n --wui-orange-3: #391a12;\n --wui-orange-4: #4e190b;\n --wui-orange-5: #5c2010;\n --wui-orange-6: #6c2d1c;\n --wui-orange-7: #833d2a;\n --wui-orange-8: #a95038;\n --wui-orange-9: #d1451a;\n --wui-orange-10: #c23600;\n --wui-orange-11: #ff9271;\n --wui-orange-12: #f9d4ca;\n --wui-orange-alpha-1: #fc03000d;\n --wui-orange-alpha-2: #f5310012;\n --wui-orange-alpha-3: #fe2e002b;\n --wui-orange-alpha-4: #fc220042;\n --wui-orange-alpha-5: #fd360052;\n --wui-orange-alpha-6: #fd520863;\n --wui-orange-alpha-7: #ff672c7a;\n --wui-orange-alpha-8: #fe7040a3;\n --wui-orange-alpha-9: #ff5117cf;\n --wui-orange-alpha-10: #ff4100bf;\n --wui-orange-alpha-11: #ff9271;\n --wui-orange-alpha-12: #ffd8cefa;\n --wui-orange-contrast: #fff;\n --wui-orange-surface: #321a0480;\n --wui-pink-1: #1f1319;\n --wui-pink-2: #26121c;\n --wui-pink-3: #3f122b;\n --wui-pink-4: #550438;\n --wui-pink-5: #630b42;\n --wui-pink-6: #741b50;\n --wui-pink-7: #8f2965;\n --wui-pink-8: #b73581;\n --wui-pink-9: #ff40b3;\n --wui-pink-10: #f12fa7;\n --wui-pink-11: #ff86cc;\n --wui-pink-12: #ffcde8;\n --wui-pink-alpha-1: #f1000012;\n --wui-pink-alpha-2: #fa000017;\n --wui-pink-alpha-3: #fb023333;\n --wui-pink-alpha-4: #fe005d4a;\n --wui-pink-alpha-5: #fe007159;\n --wui-pink-alpha-6: #ff22866b;\n --wui-pink-alpha-7: #ff3a9a87;\n --wui-pink-alpha-8: #fe42a7b2;\n --wui-pink-alpha-9: #ff40b3;\n --wui-pink-alpha-10: #fe31aff2;\n --wui-pink-alpha-11: #ff86cc;\n --wui-pink-alpha-12: #ffcde8;\n --wui-pink-contrast: #fff;\n --wui-pink-surface: #3c0f1080;\n --wui-purple-1: #1c1320;\n --wui-purple-2: #221429;\n --wui-purple-3: #361544;\n --wui-purple-4: #46135b;\n --wui-purple-5: #521969;\n --wui-purple-6: #5f2578;\n --wui-purple-7: #753491;\n --wui-purple-8: #9643ba;\n --wui-purple-9: #ac12e0;\n --wui-purple-10: #9d00d0;\n --wui-purple-11: #e590ff;\n --wui-purple-12: #f4d2ff;\n --wui-purple-alpha-1: #fc00000d;\n --wui-purple-alpha-2: #f6002914;\n --wui-purple-alpha-3: #fd10d129;\n --wui-purple-alpha-4: #f60afe3d;\n --wui-purple-alpha-5: #eb20fd4d;\n --wui-purple-alpha-6: #e53ffd5e;\n --wui-purple-alpha-7: #e054ff7d;\n --wui-purple-alpha-8: #d659ffad;\n --wui-purple-alpha-9: #c612fedb;\n --wui-purple-alpha-10: #c400ffc7;\n --wui-purple-alpha-11: #e590ff;\n --wui-purple-alpha-12: #f4d2ff;\n --wui-purple-contrast: #fff;\n --wui-purple-surface: #34132980;\n --wui-red-1: #1e1414;\n --wui-red-2: #241616;\n --wui-red-3: #411014;\n --wui-red-4: #580314;\n --wui-red-5: #68071b;\n --wui-red-6: #7a1725;\n --wui-red-7: #952634;\n --wui-red-8: #c23244;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f00e45;\n --wui-red-11: #ff8e93;\n --wui-red-12: #ffcfce;\n --wui-red-alpha-1: #fe00000f;\n --wui-red-alpha-2: #f8170017;\n --wui-red-alpha-3: #fc000036;\n --wui-red-alpha-4: #ff00004d;\n --wui-red-alpha-5: #ff00045e;\n --wui-red-alpha-6: #fd192173;\n --wui-red-alpha-7: #ff333d8f;\n --wui-red-alpha-8: #ff3b4ebf;\n --wui-red-alpha-9: #ff2b51;\n --wui-red-alpha-10: #ff0e46f0;\n --wui-red-alpha-11: #ff8e93;\n --wui-red-alpha-12: #ffcfce;\n --wui-red-contrast: #fff;\n --wui-red-surface: #38160480;\n --wui-success-1: #121915;\n --wui-success-2: #151e18;\n --wui-success-3: #172e21;\n --wui-success-4: #153c27;\n --wui-success-5: #1b4931;\n --wui-success-6: #23573c;\n --wui-success-7: #2b6848;\n --wui-success-8: #327c55;\n --wui-success-9: #30a46c;\n --wui-success-10: #1d9760;\n --wui-success-11: #63d196;\n --wui-success-12: #b2f1cb;\n --wui-success-alpha-1: #90d60005;\n --wui-success-alpha-2: #9ef9000a;\n --wui-success-alpha-3: #53f9001c;\n --wui-success-alpha-4: #2ffd1d29;\n --wui-success-alpha-5: #43ff4e38;\n --wui-success-alpha-6: #54fd6d47;\n --wui-success-alpha-7: #5dff8059;\n --wui-success-alpha-8: #5eff8e70;\n --wui-success-alpha-9: #45fe979c;\n --wui-success-alpha-10: #28fe8c8f;\n --wui-success-alpha-11: #78ffb1cc;\n --wui-success-alpha-12: #bcffd6f0;\n --wui-success-contrast: #fff;\n --wui-success-surface: #1a260880;\n --wui-vendor-hubspot-1: #1d1513;\n --wui-vendor-hubspot-2: #231815;\n --wui-vendor-hubspot-3: #3b1a12;\n --wui-vendor-hubspot-4: #511609;\n --wui-vendor-hubspot-5: #601d0d;\n --wui-vendor-hubspot-6: #702a1a;\n --wui-vendor-hubspot-7: #883a27;\n --wui-vendor-hubspot-8: #af4a33;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f14f28;\n --wui-vendor-hubspot-11: #ff9578;\n --wui-vendor-hubspot-12: #ffd5ca;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-hubspot-surface: #361a0280;\n --wui-vendor-marketo-1: #141621;\n --wui-vendor-marketo-2: #161827;\n --wui-vendor-marketo-3: #1f234a;\n --wui-vendor-marketo-4: #262a66;\n --wui-vendor-marketo-5: #2f3476;\n --wui-vendor-marketo-6: #383f83;\n --wui-vendor-marketo-7: #444c97;\n --wui-vendor-marketo-8: #515ab4;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #9faeff;\n --wui-vendor-marketo-12: #dae1ff;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-marketo-surface: #1c1a2680;\n --wui-vendor-pardot-1: #0e191f;\n --wui-vendor-pardot-2: #111d24;\n --wui-vendor-pardot-3: #092c3d;\n --wui-vendor-pardot-4: #003752;\n --wui-vendor-pardot-5: #004463;\n --wui-vendor-pardot-6: #055274;\n --wui-vendor-pardot-7: #15648a;\n --wui-vendor-pardot-8: #197ba9;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0095d3;\n --wui-vendor-pardot-11: #62c3f8;\n --wui-vendor-pardot-12: #bfe7ff;\n --wui-vendor-pardot-contrast: #fff;\n --wui-vendor-pardot-surface: #12242080;\n --wui-warning-1: #181711;\n --wui-warning-2: #1e1d14;\n --wui-warning-3: #2b270c;\n --wui-warning-4: #352f00;\n --wui-warning-5: #403800;\n --wui-warning-6: #4d450e;\n --wui-warning-7: #5f5720;\n --wui-warning-8: #796f2b;\n --wui-warning-9: #ffe629;\n --wui-warning-10: #f1dd4e;\n --wui-warning-11: #f2dd4f;\n --wui-warning-12: #f4edb8;\n --wui-warning-alpha-1: #f333000a;\n --wui-warning-alpha-2: #fe8d000f;\n --wui-warning-alpha-3: #feac001c;\n --wui-warning-alpha-4: #fcb50029;\n --wui-warning-alpha-5: #fcbc0033;\n --wui-warning-alpha-6: #fccc0042;\n --wui-warning-alpha-7: #fdd90e54;\n --wui-warning-alpha-8: #fddf2e70;\n --wui-warning-alpha-9: #ffe629;\n --wui-warning-alpha-10: #fee950f2;\n --wui-warning-alpha-11: #fee851f2;\n --wui-warning-alpha-12: #fef7bef5;\n --wui-warning-contrast: #262209;\n --wui-warning-surface: #2c240080;\n --wui-yellow-1: #171811;\n --wui-yellow-2: #1c1c13;\n --wui-yellow-3: #292a16;\n --wui-yellow-4: #353615;\n --wui-yellow-5: #414218;\n --wui-yellow-6: #4e4f1c;\n --wui-yellow-7: #5c5e20;\n --wui-yellow-8: #6d6f22;\n --wui-yellow-9: #bcbf19;\n --wui-yellow-10: #b1b400;\n --wui-yellow-11: #cbcf4b;\n --wui-yellow-12: #eaeeae;\n --wui-yellow-alpha-1: #f0560008;\n --wui-yellow-alpha-2: #fc8c000d;\n --wui-yellow-alpha-3: #fdd3001c;\n --wui-yellow-alpha-4: #fce20029;\n --wui-yellow-alpha-5: #fcea0036;\n --wui-yellow-alpha-6: #fcef0042;\n --wui-yellow-alpha-7: #fdf60e52;\n --wui-yellow-alpha-8: #fdf91863;\n --wui-yellow-alpha-9: #feff13ba;\n --wui-yellow-alpha-10: #feff00ad;\n --wui-yellow-alpha-11: #fbff54cc;\n --wui-yellow-alpha-12: #fbfeb8ed;\n --wui-yellow-contrast: #22230b;\n --wui-yellow-surface: #28220080;\n}\n"}
|
|
70
|
+
${"/* -------------------------------------------\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: var(--wui-app-background);\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: var(--wui-gray-3);\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: var(--wui-blue-9);\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: var(--wui-blue-8);\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: var(--wui-blue-6);\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\n:root[data-wui-color-mode='dark'],\n[data-wui-color-mode='dark'] {\ncolor-scheme: dark;\n--wui-app-background: #101629;\n --wui-blue-1: #111725;\n --wui-blue-2: #12192b;\n --wui-blue-3: #152452;\n --wui-blue-4: #192c6d;\n --wui-blue-5: #203681;\n --wui-blue-6: #284191;\n --wui-blue-7: #314da7;\n --wui-blue-8: #395ac3;\n --wui-blue-9: #2949e5;\n --wui-blue-10: #1f36d3;\n --wui-blue-11: #90b3ff;\n --wui-blue-12: #d2e1ff;\n --wui-blue-alpha-1: #90960003;\n --wui-blue-alpha-2: #90d6a905;\n --wui-blue-alpha-3: #2b5fff30;\n --wui-blue-alpha-4: #2c5bfd52;\n --wui-blue-alpha-5: #3764ff69;\n --wui-blue-alpha-6: #426fff7d;\n --wui-blue-alpha-7: #4773fe96;\n --wui-blue-alpha-8: #4975ffb8;\n --wui-blue-alpha-9: #2c4ffee0;\n --wui-blue-alpha-10: #233fffcc;\n --wui-blue-alpha-11: #90b3ff;\n --wui-blue-alpha-12: #d2e1ff;\n --wui-blue-contrast: #fff;\n --wui-blue-surface: #141c2d80;\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-color-bg-app: var(--wui-app-background);\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-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-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: var(--wui-gray-3);\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-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-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-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-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-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: var(--wui-blue-9);\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-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: var(--wui-blue-8);\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-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-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: var(--wui-blue-6);\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-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-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-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-text-blue: var(--wui-blue-12);\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-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-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-warning: var(--wui-warning-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\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-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-error-1: #1d1514;\n --wui-error-2: #231615;\n --wui-error-3: #3d1414;\n --wui-error-4: #521013;\n --wui-error-5: #62171a;\n --wui-error-6: #732426;\n --wui-error-7: #8c3434;\n --wui-error-8: #b54546;\n --wui-error-9: #e5484d;\n --wui-error-10: #d63941;\n --wui-error-11: #ff8f8b;\n --wui-error-12: #ffd2ce;\n --wui-error-alpha-1: #fd04000d;\n --wui-error-alpha-2: #f7170014;\n --wui-error-alpha-3: #fb0c0030;\n --wui-error-alpha-4: #fd010047;\n --wui-error-alpha-5: #fe190059;\n --wui-error-alpha-6: #ff38226b;\n --wui-error-alpha-7: #fe4f3e85;\n --wui-error-alpha-8: #fe5a52b0;\n --wui-error-alpha-9: #fe4e52e3;\n --wui-error-alpha-10: #fe4046d4;\n --wui-error-alpha-11: #ff8f8b;\n --wui-error-alpha-12: #ffd2ce;\n --wui-error-contrast: #fff;\n --wui-error-surface: #36160280;\n --wui-gray-1: #0d162d;\n --wui-gray-2: #131c35;\n --wui-gray-3: #172448;\n --wui-gray-4: #1c2a50;\n --wui-gray-5: #223057;\n --wui-gray-6: #293860;\n --wui-gray-7: #36466f;\n --wui-gray-8: #4e5f8a;\n --wui-gray-9: #5b6d98;\n --wui-gray-10: #687aa7;\n --wui-gray-11: #9fb3e3;\n --wui-gray-12: #e4eeff;\n --wui-gray-alpha-1: #0017f605;\n --wui-gray-alpha-2: #437cf60f;\n --wui-gray-alpha-3: #4177ff26;\n --wui-gray-alpha-4: #5283fd2e;\n --wui-gray-alpha-5: #638fff38;\n --wui-gray-alpha-6: #719afe42;\n --wui-gray-alpha-7: #84a8fe54;\n --wui-gray-alpha-8: #98b7ff73;\n --wui-gray-alpha-9: #a0bcfe85;\n --wui-gray-alpha-10: #a4bffe96;\n --wui-gray-alpha-11: #b4caffde;\n --wui-gray-alpha-12: #e4eeff;\n --wui-gray-contrast: #fff;\n --wui-gray-surface: #0000000d;\n --wui-green-1: #111a0f;\n --wui-green-2: #151e13;\n --wui-green-3: #182e14;\n --wui-green-4: #133e0c;\n --wui-green-5: #174c0d;\n --wui-green-6: #1a5c0e;\n --wui-green-7: #1d6d0d;\n --wui-green-8: #1d8004;\n --wui-green-9: #268713;\n --wui-green-10: #117900;\n --wui-green-11: #76d467;\n --wui-green-12: #aff9a3;\n --wui-green-alpha-1: #44e30005;\n --wui-green-alpha-2: #9ef90009;\n --wui-green-alpha-3: #5cf9001b;\n --wui-green-alpha-4: #22fe002c;\n --wui-green-alpha-5: #2efc003c;\n --wui-green-alpha-6: #32fe004d;\n --wui-green-alpha-7: #33fd0060;\n --wui-green-alpha-8: #2cfd0075;\n --wui-green-alpha-9: #3eff007c;\n --wui-green-alpha-10: #13fd006d;\n --wui-green-alpha-11: #8dff75d0;\n --wui-green-alpha-12: #b3fea6f9;\n --wui-green-contrast: #fff;\n --wui-green-surface: #1c240280;\n --wui-orange-1: #1c1514;\n --wui-orange-2: #211816;\n --wui-orange-3: #391a12;\n --wui-orange-4: #4e190b;\n --wui-orange-5: #5c2010;\n --wui-orange-6: #6c2d1c;\n --wui-orange-7: #833d2a;\n --wui-orange-8: #a95038;\n --wui-orange-9: #d1451a;\n --wui-orange-10: #c23600;\n --wui-orange-11: #ff9271;\n --wui-orange-12: #f9d4ca;\n --wui-orange-alpha-1: #fc03000d;\n --wui-orange-alpha-2: #f5310012;\n --wui-orange-alpha-3: #fe2e002b;\n --wui-orange-alpha-4: #fc220042;\n --wui-orange-alpha-5: #fd360052;\n --wui-orange-alpha-6: #fd520863;\n --wui-orange-alpha-7: #ff672c7a;\n --wui-orange-alpha-8: #fe7040a3;\n --wui-orange-alpha-9: #ff5117cf;\n --wui-orange-alpha-10: #ff4100bf;\n --wui-orange-alpha-11: #ff9271;\n --wui-orange-alpha-12: #ffd8cefa;\n --wui-orange-contrast: #fff;\n --wui-orange-surface: #321a0480;\n --wui-pink-1: #1f1319;\n --wui-pink-2: #26121c;\n --wui-pink-3: #3f122b;\n --wui-pink-4: #550438;\n --wui-pink-5: #630b42;\n --wui-pink-6: #741b50;\n --wui-pink-7: #8f2965;\n --wui-pink-8: #b73581;\n --wui-pink-9: #ff40b3;\n --wui-pink-10: #f12fa7;\n --wui-pink-11: #ff86cc;\n --wui-pink-12: #ffcde8;\n --wui-pink-alpha-1: #f1000012;\n --wui-pink-alpha-2: #fa000017;\n --wui-pink-alpha-3: #fb023333;\n --wui-pink-alpha-4: #fe005d4a;\n --wui-pink-alpha-5: #fe007159;\n --wui-pink-alpha-6: #ff22866b;\n --wui-pink-alpha-7: #ff3a9a87;\n --wui-pink-alpha-8: #fe42a7b2;\n --wui-pink-alpha-9: #ff40b3;\n --wui-pink-alpha-10: #fe31aff2;\n --wui-pink-alpha-11: #ff86cc;\n --wui-pink-alpha-12: #ffcde8;\n --wui-pink-contrast: #fff;\n --wui-pink-surface: #3c0f1080;\n --wui-purple-1: #1c1320;\n --wui-purple-2: #221429;\n --wui-purple-3: #361544;\n --wui-purple-4: #46135b;\n --wui-purple-5: #521969;\n --wui-purple-6: #5f2578;\n --wui-purple-7: #753491;\n --wui-purple-8: #9643ba;\n --wui-purple-9: #ac12e0;\n --wui-purple-10: #9d00d0;\n --wui-purple-11: #e590ff;\n --wui-purple-12: #f4d2ff;\n --wui-purple-alpha-1: #fc00000d;\n --wui-purple-alpha-2: #f6002914;\n --wui-purple-alpha-3: #fd10d129;\n --wui-purple-alpha-4: #f60afe3d;\n --wui-purple-alpha-5: #eb20fd4d;\n --wui-purple-alpha-6: #e53ffd5e;\n --wui-purple-alpha-7: #e054ff7d;\n --wui-purple-alpha-8: #d659ffad;\n --wui-purple-alpha-9: #c612fedb;\n --wui-purple-alpha-10: #c400ffc7;\n --wui-purple-alpha-11: #e590ff;\n --wui-purple-alpha-12: #f4d2ff;\n --wui-purple-contrast: #fff;\n --wui-purple-surface: #34132980;\n --wui-red-1: #1e1414;\n --wui-red-2: #241616;\n --wui-red-3: #411014;\n --wui-red-4: #580314;\n --wui-red-5: #68071b;\n --wui-red-6: #7a1725;\n --wui-red-7: #952634;\n --wui-red-8: #c23244;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f00e45;\n --wui-red-11: #ff8e93;\n --wui-red-12: #ffcfce;\n --wui-red-alpha-1: #fe00000f;\n --wui-red-alpha-2: #f8170017;\n --wui-red-alpha-3: #fc000036;\n --wui-red-alpha-4: #ff00004d;\n --wui-red-alpha-5: #ff00045e;\n --wui-red-alpha-6: #fd192173;\n --wui-red-alpha-7: #ff333d8f;\n --wui-red-alpha-8: #ff3b4ebf;\n --wui-red-alpha-9: #ff2b51;\n --wui-red-alpha-10: #ff0e46f0;\n --wui-red-alpha-11: #ff8e93;\n --wui-red-alpha-12: #ffcfce;\n --wui-red-contrast: #fff;\n --wui-red-surface: #38160480;\n --wui-success-1: #121915;\n --wui-success-2: #151e18;\n --wui-success-3: #172e21;\n --wui-success-4: #153c27;\n --wui-success-5: #1b4931;\n --wui-success-6: #23573c;\n --wui-success-7: #2b6848;\n --wui-success-8: #327c55;\n --wui-success-9: #30a46c;\n --wui-success-10: #1d9760;\n --wui-success-11: #63d196;\n --wui-success-12: #b2f1cb;\n --wui-success-alpha-1: #90d60005;\n --wui-success-alpha-2: #9ef9000a;\n --wui-success-alpha-3: #53f9001c;\n --wui-success-alpha-4: #2ffd1d29;\n --wui-success-alpha-5: #43ff4e38;\n --wui-success-alpha-6: #54fd6d47;\n --wui-success-alpha-7: #5dff8059;\n --wui-success-alpha-8: #5eff8e70;\n --wui-success-alpha-9: #45fe979c;\n --wui-success-alpha-10: #28fe8c8f;\n --wui-success-alpha-11: #78ffb1cc;\n --wui-success-alpha-12: #bcffd6f0;\n --wui-success-contrast: #fff;\n --wui-success-surface: #1a260880;\n --wui-vendor-hubspot-1: #1d1513;\n --wui-vendor-hubspot-2: #231815;\n --wui-vendor-hubspot-3: #3b1a12;\n --wui-vendor-hubspot-4: #511609;\n --wui-vendor-hubspot-5: #601d0d;\n --wui-vendor-hubspot-6: #702a1a;\n --wui-vendor-hubspot-7: #883a27;\n --wui-vendor-hubspot-8: #af4a33;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f14f28;\n --wui-vendor-hubspot-11: #ff9578;\n --wui-vendor-hubspot-12: #ffd5ca;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-hubspot-surface: #361a0280;\n --wui-vendor-marketo-1: #141621;\n --wui-vendor-marketo-2: #161827;\n --wui-vendor-marketo-3: #1f234a;\n --wui-vendor-marketo-4: #262a66;\n --wui-vendor-marketo-5: #2f3476;\n --wui-vendor-marketo-6: #383f83;\n --wui-vendor-marketo-7: #444c97;\n --wui-vendor-marketo-8: #515ab4;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #9faeff;\n --wui-vendor-marketo-12: #dae1ff;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-marketo-surface: #1c1a2680;\n --wui-vendor-pardot-1: #0e191f;\n --wui-vendor-pardot-2: #111d24;\n --wui-vendor-pardot-3: #092c3d;\n --wui-vendor-pardot-4: #003752;\n --wui-vendor-pardot-5: #004463;\n --wui-vendor-pardot-6: #055274;\n --wui-vendor-pardot-7: #15648a;\n --wui-vendor-pardot-8: #197ba9;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0095d3;\n --wui-vendor-pardot-11: #62c3f8;\n --wui-vendor-pardot-12: #bfe7ff;\n --wui-vendor-pardot-contrast: #fff;\n --wui-vendor-pardot-surface: #12242080;\n --wui-warning-1: #181711;\n --wui-warning-2: #1e1d14;\n --wui-warning-3: #2b270c;\n --wui-warning-4: #352f00;\n --wui-warning-5: #403800;\n --wui-warning-6: #4d450e;\n --wui-warning-7: #5f5720;\n --wui-warning-8: #796f2b;\n --wui-warning-9: #ffe629;\n --wui-warning-10: #f1dd4e;\n --wui-warning-11: #f2dd4f;\n --wui-warning-12: #f4edb8;\n --wui-warning-alpha-1: #f333000a;\n --wui-warning-alpha-2: #fe8d000f;\n --wui-warning-alpha-3: #feac001c;\n --wui-warning-alpha-4: #fcb50029;\n --wui-warning-alpha-5: #fcbc0033;\n --wui-warning-alpha-6: #fccc0042;\n --wui-warning-alpha-7: #fdd90e54;\n --wui-warning-alpha-8: #fddf2e70;\n --wui-warning-alpha-9: #ffe629;\n --wui-warning-alpha-10: #fee950f2;\n --wui-warning-alpha-11: #fee851f2;\n --wui-warning-alpha-12: #fef7bef5;\n --wui-warning-contrast: #262209;\n --wui-warning-surface: #2c240080;\n --wui-yellow-1: #171811;\n --wui-yellow-2: #1c1c13;\n --wui-yellow-3: #292a16;\n --wui-yellow-4: #353615;\n --wui-yellow-5: #414218;\n --wui-yellow-6: #4e4f1c;\n --wui-yellow-7: #5c5e20;\n --wui-yellow-8: #6d6f22;\n --wui-yellow-9: #bcbf19;\n --wui-yellow-10: #b1b400;\n --wui-yellow-11: #cbcf4b;\n --wui-yellow-12: #eaeeae;\n --wui-yellow-alpha-1: #f0560008;\n --wui-yellow-alpha-2: #fc8c000d;\n --wui-yellow-alpha-3: #fdd3001c;\n --wui-yellow-alpha-4: #fce20029;\n --wui-yellow-alpha-5: #fcea0036;\n --wui-yellow-alpha-6: #fcef0042;\n --wui-yellow-alpha-7: #fdf60e52;\n --wui-yellow-alpha-8: #fdf91863;\n --wui-yellow-alpha-9: #feff13ba;\n --wui-yellow-alpha-10: #feff00ad;\n --wui-yellow-alpha-11: #fbff54cc;\n --wui-yellow-alpha-12: #fbfeb8ed;\n --wui-yellow-contrast: #22230b;\n --wui-yellow-surface: #28220080;\n}\n\n:root[data-wui-color-mode='light'],\n[data-wui-color-mode='light'] {\ncolor-scheme: light;\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-color-backdrop: var(--wui-gray-alpha-9);\n --wui-color-bg-app: var(--wui-app-background);\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-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-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: var(--wui-gray-3);\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-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-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-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-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-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: var(--wui-blue-9);\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-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: var(--wui-blue-8);\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-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-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: var(--wui-blue-6);\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-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-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-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-text-blue: var(--wui-blue-12);\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-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-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-warning: var(--wui-warning-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\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-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-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-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-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-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}\n"}
|
|
71
71
|
${"/*\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:root,\n[data-wui-theme='true'] {\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}\n"}
|
|
72
72
|
${"/*\n * Legacy typography sub-property aliases\n *\n * Terrazzo's plugin-css emits typography composite sub-properties using DTCG\n * names verbatim (kebab-cased):\n * --wui-typography-<style>-font-family\n * --wui-typography-<style>-font-size\n * --wui-typography-<style>-font-weight\n *\n * Prior versions of @wistia/ui exposed shortened legacy names:\n * --wui-typography-<style>-family\n * --wui-typography-<style>-size\n * --wui-typography-<style>-weight\n *\n * These aliases preserve that surface so downstream apps (notably wistia/wistia)\n * keep working unchanged after the Terrazzo migration. Once all known consumers\n * have migrated to the DTCG names, delete this file and remove the import from\n * designTokens/index.tsx.\n *\n * Note: `line-height` and `paragraph-spacing` sub-properties are unchanged\n * between DTCG and the prior surface, so no aliases are required for those.\n *\n * --------------------------------------------------------------------------\n * Migrating consumers in wistia/wistia (run from the VMA repo root):\n *\n * # 1. List every legacy reference site:\n * grep -rnE --include='*.ts' --include='*.tsx' --include='*.css' \\\n * '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n * frontend\n *\n * # 2. Apply the rename in-place (BSD sed on macOS):\n * grep -rlE --include='*.ts' --include='*.tsx' --include='*.css' \\\n * '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n * frontend \\\n * | xargs sed -i '' -E \\\n * 's/(--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9]))-(family|size|weight)/\\1-font-\\3/g'\n *\n * # 3. (GNU sed / Linux variant — drop the empty '' after -i):\n * # ... | xargs sed -i -E '...'\n *\n * Special case: frontend/authentication/css/redesign/wistia-ui/design-tokens/\n * typography.css *defines* the legacy names itself (not consumed from\n * @wistia/ui). It will keep working post-rename, but should be migrated for\n * consistency.\n * --------------------------------------------------------------------------\n */\n:root,\n[data-wui-theme='true'] {\n --wui-typography-heading-hero-family: var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-hero-size: var(--wui-typography-heading-hero-font-size);\n --wui-typography-heading-hero-weight: var(--wui-typography-heading-hero-font-weight);\n --wui-typography-heading-1-family: var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-1-size: var(--wui-typography-heading-1-font-size);\n --wui-typography-heading-1-weight: var(--wui-typography-heading-1-font-weight);\n --wui-typography-heading-2-family: var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-2-size: var(--wui-typography-heading-2-font-size);\n --wui-typography-heading-2-weight: var(--wui-typography-heading-2-font-weight);\n --wui-typography-heading-3-family: var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-3-size: var(--wui-typography-heading-3-font-size);\n --wui-typography-heading-3-weight: var(--wui-typography-heading-3-font-weight);\n --wui-typography-heading-4-family: var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-4-size: var(--wui-typography-heading-4-font-size);\n --wui-typography-heading-4-weight: var(--wui-typography-heading-4-font-weight);\n --wui-typography-heading-5-family: var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-5-size: var(--wui-typography-heading-5-font-size);\n --wui-typography-heading-5-weight: var(--wui-typography-heading-5-font-weight);\n --wui-typography-heading-6-family: var(--wui-typography-heading-6-font-family);\n --wui-typography-heading-6-size: var(--wui-typography-heading-6-font-size);\n --wui-typography-heading-6-weight: var(--wui-typography-heading-6-font-weight);\n --wui-typography-body-1-family: var(--wui-typography-body-1-font-family);\n --wui-typography-body-1-size: var(--wui-typography-body-1-font-size);\n --wui-typography-body-1-weight: var(--wui-typography-body-1-font-weight);\n --wui-typography-body-2-family: var(--wui-typography-body-2-font-family);\n --wui-typography-body-2-size: var(--wui-typography-body-2-font-size);\n --wui-typography-body-2-weight: var(--wui-typography-body-2-font-weight);\n --wui-typography-body-3-family: var(--wui-typography-body-3-font-family);\n --wui-typography-body-3-size: var(--wui-typography-body-3-font-size);\n --wui-typography-body-3-weight: var(--wui-typography-body-3-font-weight);\n --wui-typography-body-4-family: var(--wui-typography-body-4-font-family);\n --wui-typography-body-4-size: var(--wui-typography-body-4-font-size);\n --wui-typography-body-4-weight: var(--wui-typography-body-4-font-weight);\n --wui-typography-label-1-family: var(--wui-typography-label-1-font-family);\n --wui-typography-label-1-size: var(--wui-typography-label-1-font-size);\n --wui-typography-label-1-weight: var(--wui-typography-label-1-font-weight);\n --wui-typography-label-2-family: var(--wui-typography-label-2-font-family);\n --wui-typography-label-2-size: var(--wui-typography-label-2-font-size);\n --wui-typography-label-2-weight: var(--wui-typography-label-2-font-weight);\n --wui-typography-label-3-family: var(--wui-typography-label-3-font-family);\n --wui-typography-label-3-size: var(--wui-typography-label-3-font-size);\n --wui-typography-label-3-weight: var(--wui-typography-label-3-font-weight);\n --wui-typography-label-4-family: var(--wui-typography-label-4-font-family);\n --wui-typography-label-4-size: var(--wui-typography-label-4-font-size);\n --wui-typography-label-4-weight: var(--wui-typography-label-4-font-weight);\n}\n"}
|
|
73
73
|
`;
|
|
@@ -108,6 +108,8 @@ const globalStyleAdjustmentsCss = css`
|
|
|
108
108
|
'text-wrap: wrap' behavior, so no polyfill is needed.
|
|
109
109
|
*/
|
|
110
110
|
body {
|
|
111
|
+
/* Ensure background and text colors are wui default, not system default */
|
|
112
|
+
background-color: var(--wui-color-bg-app);
|
|
111
113
|
color: var(--wui-color-text);
|
|
112
114
|
-moz-osx-font-smoothing: grayscale; /* 1 */
|
|
113
115
|
-webkit-font-smoothing: antialiased; /* 2 */
|
|
@@ -1280,6 +1282,68 @@ const useClipboard = (textToCopy, timeout = 1500) => {
|
|
|
1280
1282
|
];
|
|
1281
1283
|
};
|
|
1282
1284
|
//#endregion
|
|
1285
|
+
//#region src/hooks/useDocumentColorMode/useDocumentColorMode.ts
|
|
1286
|
+
/**
|
|
1287
|
+
* The attribute that activates a color mode's token block in tokens.css.
|
|
1288
|
+
* Exported so server-rendered layouts can stamp the attribute (e.g.
|
|
1289
|
+
* `<html data-wui-color-mode="dark">`) without hardcoding the string.
|
|
1290
|
+
*/
|
|
1291
|
+
const DOCUMENT_COLOR_MODE_ATTRIBUTE = "data-wui-color-mode";
|
|
1292
|
+
const documentColorModeOptions = ["dark", "light"];
|
|
1293
|
+
const isDocumentColorMode = (value) => documentColorModeOptions.includes(value);
|
|
1294
|
+
/**
|
|
1295
|
+
* Reads the document-level color mode. Returns `null` when no mode is set
|
|
1296
|
+
* (the document default, light) or outside a DOM environment.
|
|
1297
|
+
*/
|
|
1298
|
+
const getDocumentColorMode = () => {
|
|
1299
|
+
if (typeof document === "undefined") return null;
|
|
1300
|
+
const value = document.documentElement.getAttribute(DOCUMENT_COLOR_MODE_ATTRIBUTE);
|
|
1301
|
+
return value !== null && isDocumentColorMode(value) ? value : null;
|
|
1302
|
+
};
|
|
1303
|
+
/**
|
|
1304
|
+
* Sets or clears the document-level color mode by writing the
|
|
1305
|
+
* `data-wui-color-mode` attribute on `<html>`. Because the attribute lives on
|
|
1306
|
+
* the document element, the mode applies to the whole page — every React
|
|
1307
|
+
* root and every portaled element (popovers, modals, tooltips) included.
|
|
1308
|
+
* Pass `null` to remove the attribute and return to the default (light).
|
|
1309
|
+
*
|
|
1310
|
+
* This is the single supported writer for whole-page color mode; prefer it
|
|
1311
|
+
* over touching `document.documentElement.dataset` directly so all consumers
|
|
1312
|
+
* share one contract. For subtree scoping, use `ColorSchemeWrapper`'s
|
|
1313
|
+
* `colorMode` prop instead (note: portaled content escapes a subtree mode).
|
|
1314
|
+
*/
|
|
1315
|
+
const setDocumentColorMode = (mode) => {
|
|
1316
|
+
if (typeof document === "undefined") return;
|
|
1317
|
+
if (mode === null) document.documentElement.removeAttribute(DOCUMENT_COLOR_MODE_ATTRIBUTE);
|
|
1318
|
+
else document.documentElement.setAttribute(DOCUMENT_COLOR_MODE_ATTRIBUTE, mode);
|
|
1319
|
+
};
|
|
1320
|
+
/**
|
|
1321
|
+
* Forces the document-level color mode while the calling component is
|
|
1322
|
+
* mounted, restoring whatever mode was previously set when it unmounts (or
|
|
1323
|
+
* when `mode` changes). Pass `null` to leave the document untouched — this
|
|
1324
|
+
* makes conditional forcing ergonomic:
|
|
1325
|
+
*
|
|
1326
|
+
* ```tsx
|
|
1327
|
+
* // Dark only when the screen was entered from the marketing funnel
|
|
1328
|
+
* useDocumentColorMode(isMarketingEntry ? 'dark' : null);
|
|
1329
|
+
* ```
|
|
1330
|
+
*
|
|
1331
|
+
* Restoration is last-in-first-out: nested/route-scoped usage restores
|
|
1332
|
+
* correctly as screens mount and unmount in order. Two sibling components
|
|
1333
|
+
* forcing modes over overlapping, non-nested lifetimes can restore a stale
|
|
1334
|
+
* value — keep forcing at one level of the tree (typically the route/screen).
|
|
1335
|
+
*/
|
|
1336
|
+
const useDocumentColorMode = (mode) => {
|
|
1337
|
+
useEffect(() => {
|
|
1338
|
+
if (mode === null) return;
|
|
1339
|
+
const previousMode = getDocumentColorMode();
|
|
1340
|
+
setDocumentColorMode(mode);
|
|
1341
|
+
return () => {
|
|
1342
|
+
setDocumentColorMode(previousMode);
|
|
1343
|
+
};
|
|
1344
|
+
}, [mode]);
|
|
1345
|
+
};
|
|
1346
|
+
//#endregion
|
|
1283
1347
|
//#region src/hooks/useElementObserver/useElementObserver.ts
|
|
1284
1348
|
const initialRect = {
|
|
1285
1349
|
width: 0,
|
|
@@ -5971,7 +6035,7 @@ const colorSchemeOptions = [
|
|
|
5971
6035
|
...brandColorSchemeOptions,
|
|
5972
6036
|
...vendorColorSchemeOptions
|
|
5973
6037
|
];
|
|
5974
|
-
const colorModeOptions = ["inherit",
|
|
6038
|
+
const colorModeOptions = ["inherit", ...documentColorModeOptions];
|
|
5975
6039
|
const StyledColorSchemeWrapper = styled.div`
|
|
5976
6040
|
${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
|
|
5977
6041
|
color: var(--wui-color-text);
|
|
@@ -5979,13 +6043,16 @@ const StyledColorSchemeWrapper = styled.div`
|
|
|
5979
6043
|
/**
|
|
5980
6044
|
* A wrapper to apply a color scheme to its children.
|
|
5981
6045
|
*/
|
|
5982
|
-
const ColorSchemeWrapper = ({ __nav = false, colorMode = "inherit", colorScheme = "inherit", children, ...props }) =>
|
|
5983
|
-
|
|
5984
|
-
|
|
5985
|
-
|
|
5986
|
-
|
|
5987
|
-
|
|
5988
|
-
|
|
6046
|
+
const ColorSchemeWrapper = ({ __nav = false, colorMode = "inherit", colorScheme = "inherit", children, ...props }) => {
|
|
6047
|
+
const resolvedColorMode = __nav ? "light" : colorMode;
|
|
6048
|
+
return /* @__PURE__ */ jsx(StyledColorSchemeWrapper, {
|
|
6049
|
+
$colorScheme: resolvedColorMode !== "inherit" && colorScheme === "inherit" ? "standard" : colorScheme,
|
|
6050
|
+
$nav: __nav,
|
|
6051
|
+
"data-wui-color-mode": resolvedColorMode === "inherit" ? void 0 : resolvedColorMode,
|
|
6052
|
+
...props,
|
|
6053
|
+
children
|
|
6054
|
+
});
|
|
6055
|
+
};
|
|
5989
6056
|
ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
|
|
5990
6057
|
//#endregion
|
|
5991
6058
|
//#region src/components/Image/Image.tsx
|
|
@@ -16841,6 +16908,6 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
|
|
|
16841
16908
|
};
|
|
16842
16909
|
WistiaLogo.displayName = "WistiaLogo_UI";
|
|
16843
16910
|
//#endregion
|
|
16844
|
-
export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorModeOptions, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
|
|
16911
|
+
export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DOCUMENT_COLOR_MODE_ATTRIBUTE, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorModeOptions, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, documentColorModeOptions, getBackgroundGradient, getDocumentColorMode, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, setDocumentColorMode, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useDocumentColorMode, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
|
|
16845
16912
|
|
|
16846
16913
|
//# sourceMappingURL=index.js.map
|