@wistia/ui 1.2.0 → 1.3.0-beta.46ca81e1.d3f9a36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/css-custom-data.css +17 -17
  2. package/dist/index.d.ts +45 -20
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +839 -804
  5. package/dist/index.js.map +1 -1
  6. package/package.json +17 -18
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v1.2.0
3
+ * @license @wistia/ui v1.3.0-beta.46ca81e1.d3f9a36
4
4
  *
5
5
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
6
6
  *
@@ -13,12 +13,12 @@ import { createGlobalStyle, css, keyframes, styled } from "styled-components";
13
13
  import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
14
14
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
15
15
  import { Toaster, toast } from "sonner";
16
+ import { isPast } from "date-fns/isPast";
16
17
  import { isValid } from "date-fns/isValid";
18
+ import { parse } from "date-fns/parse";
19
+ import { startOfDay } from "date-fns/startOfDay";
17
20
  import { startOfToday } from "date-fns/startOfToday";
18
21
  import { startOfTomorrow } from "date-fns/startOfTomorrow";
19
- import { startOfDay } from "date-fns/startOfDay";
20
- import { isPast } from "date-fns/isPast";
21
- import { parse } from "date-fns/parse";
22
22
  import { getValueAndUnit } from "polished";
23
23
  import { useFilePicker as useFilePicker$1, useImperativeFilePicker as useImperativeFilePicker$1 } from "use-file-picker";
24
24
  import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
@@ -34,9 +34,9 @@ import { Popover as Popover$1 } from "@base-ui/react/popover";
34
34
  import { Slider as Slider$1 } from "@base-ui/react/slider";
35
35
  import * as Ariakit from "@ariakit/react";
36
36
  import { matchSorter } from "match-sorter";
37
- import { createPortal } from "react-dom";
38
37
  import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
39
38
  import { Menu as Menu$1 } from "@base-ui/react/menu";
39
+ import { createPortal } from "react-dom";
40
40
  import { DayPicker } from "@daypicker/react";
41
41
  import { ValidationError } from "yup";
42
42
  import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
@@ -45,6 +45,41 @@ import { Dialog } from "@base-ui/react/dialog";
45
45
  import { Progress } from "@base-ui/react/progress";
46
46
  import { Select as Select$1 } from "@base-ui/react/select";
47
47
  import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
48
+ //#region src/components/ClickRegion/globalStyles.tsx
49
+ const clickRegionGlobalStyles = css`
50
+ [data-click-region] {
51
+ position: relative;
52
+ cursor: pointer;
53
+ z-index: 1;
54
+ }
55
+
56
+ [data-click-region] a:not([data-click-region-target-link]),
57
+ [data-click-region] button:not([data-click-region-target-button]) {
58
+ z-index: 2;
59
+ }
60
+
61
+ [data-click-region-target-link]::before {
62
+ content: '';
63
+ cursor: inherit;
64
+ display: block;
65
+ position: absolute;
66
+ top: 0;
67
+ left: 0;
68
+ z-index: 0;
69
+ width: 100%;
70
+ height: 100%;
71
+ }
72
+ `;
73
+ //#endregion
74
+ //#region src/css/designTokens/index.tsx
75
+ const designTokens = css`
76
+ ${"/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root,\n[data-wui-theme='true'] {\n--wui-app-background: #fff;\n --wui-blue-1: #fdfdfe;\n --wui-blue-2: #f6f9ff;\n --wui-blue-3: #ecf2ff;\n --wui-blue-4: #ddeaff;\n --wui-blue-5: #cddfff;\n --wui-blue-6: #b8d1ff;\n --wui-blue-7: #a1beff;\n --wui-blue-8: #81a4fe;\n --wui-blue-9: #2949e5;\n --wui-blue-10: #1f36d3;\n --wui-blue-11: #3154dc;\n --wui-blue-12: #192b65;\n --wui-blue-alpha-1: #00008003;\n --wui-blue-alpha-2: #0055ff0a;\n --wui-blue-alpha-3: #0051ff12;\n --wui-blue-alpha-4: #0062ff21;\n --wui-blue-alpha-5: #005cff33;\n --wui-blue-alpha-6: #005aff47;\n --wui-blue-alpha-7: #004fff5e;\n --wui-blue-alpha-8: #0047fd7d;\n --wui-blue-alpha-9: #0026e0d6;\n --wui-blue-alpha-10: #001acde0;\n --wui-blue-alpha-11: #002bd4cf;\n --wui-blue-alpha-12: #001454e5;\n --wui-blue-contrast: #fff;\n --wui-blue-surface: #f4f8ffcc;\n --wui-border-radius-00: 0px;\n --wui-border-radius-01: 4px;\n --wui-border-radius-02: 8px;\n --wui-border-radius-03: 16px;\n --wui-border-radius-04: 20px;\n --wui-border-radius-05: 24px;\n --wui-border-radius-rounded: 1000px;\n --wui-color-accent-1: var(--wui-blue-1);\n --wui-color-accent-2: var(--wui-blue-2);\n --wui-color-accent-3: var(--wui-blue-3);\n --wui-color-accent-4: var(--wui-blue-4);\n --wui-color-accent-5: var(--wui-blue-5);\n --wui-color-accent-6: var(--wui-blue-6);\n --wui-color-accent-7: var(--wui-blue-7);\n --wui-color-accent-8: var(--wui-blue-8);\n --wui-color-accent-9: var(--wui-blue-9);\n --wui-color-accent-10: var(--wui-blue-10);\n --wui-color-accent-11: var(--wui-blue-11);\n --wui-color-accent-12: var(--wui-blue-12);\n --wui-color-accent-contrast: var(--wui-blue-contrast);\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-color-base-1: var(--wui-gray-1);\n --wui-color-base-2: var(--wui-gray-2);\n --wui-color-base-3: var(--wui-gray-3);\n --wui-color-base-4: var(--wui-gray-4);\n --wui-color-base-5: var(--wui-gray-5);\n --wui-color-base-6: var(--wui-gray-6);\n --wui-color-base-7: var(--wui-gray-7);\n --wui-color-base-8: var(--wui-gray-8);\n --wui-color-base-9: var(--wui-gray-9);\n --wui-color-base-10: var(--wui-gray-10);\n --wui-color-base-11: var(--wui-gray-11);\n --wui-color-base-12: var(--wui-gray-12);\n --wui-color-base-contrast: var(--wui-gray-contrast);\n --wui-color-bg-app: #fff;\n --wui-color-bg-fill: var(--wui-color-accent-9);\n --wui-color-bg-fill-active: var(--wui-color-accent-11);\n --wui-color-bg-fill-active-blue: var(--wui-blue-11);\n --wui-color-bg-fill-active-error: var(--wui-error-11);\n --wui-color-bg-fill-active-green: var(--wui-green-11);\n --wui-color-bg-fill-active-info: var(--wui-blue-11);\n --wui-color-bg-fill-active-orange: var(--wui-orange-11);\n --wui-color-bg-fill-active-pink: var(--wui-pink-11);\n --wui-color-bg-fill-active-purple: var(--wui-purple-11);\n --wui-color-bg-fill-active-success: var(--wui-success-11);\n --wui-color-bg-fill-active-warning: var(--wui-warning-11);\n --wui-color-bg-fill-active-yellow: var(--wui-yellow-11);\n --wui-color-bg-fill-blue: var(--wui-blue-9);\n --wui-color-bg-fill-error: var(--wui-error-9);\n --wui-color-bg-fill-green: var(--wui-green-9);\n --wui-color-bg-fill-hover: var(--wui-color-accent-10);\n --wui-color-bg-fill-hover-blue: var(--wui-blue-10);\n --wui-color-bg-fill-hover-error: var(--wui-error-10);\n --wui-color-bg-fill-hover-green: var(--wui-green-10);\n --wui-color-bg-fill-hover-info: var(--wui-blue-10);\n --wui-color-bg-fill-hover-orange: var(--wui-orange-10);\n --wui-color-bg-fill-hover-pink: var(--wui-pink-10);\n --wui-color-bg-fill-hover-purple: var(--wui-purple-10);\n --wui-color-bg-fill-hover-success: var(--wui-success-10);\n --wui-color-bg-fill-hover-warning: var(--wui-warning-10);\n --wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);\n --wui-color-bg-fill-info: var(--wui-blue-9);\n --wui-color-bg-fill-orange: var(--wui-orange-9);\n --wui-color-bg-fill-pink: var(--wui-pink-9);\n --wui-color-bg-fill-purple: var(--wui-purple-9);\n --wui-color-bg-fill-success: var(--wui-success-9);\n --wui-color-bg-fill-warning: var(--wui-warning-9);\n --wui-color-bg-fill-white: #fff;\n --wui-color-bg-fill-yellow: var(--wui-yellow-9);\n --wui-color-bg-surface: var(--wui-color-surface-token);\n --wui-color-bg-surface-active: var(--wui-color-base-4);\n --wui-color-bg-surface-active-blue: var(--wui-blue-4);\n --wui-color-bg-surface-active-error: var(--wui-error-4);\n --wui-color-bg-surface-active-green: var(--wui-green-4);\n --wui-color-bg-surface-active-info: var(--wui-blue-4);\n --wui-color-bg-surface-active-orange: var(--wui-orange-4);\n --wui-color-bg-surface-active-pink: var(--wui-pink-4);\n --wui-color-bg-surface-active-purple: var(--wui-purple-4);\n --wui-color-bg-surface-active-success: var(--wui-success-4);\n --wui-color-bg-surface-active-warning: var(--wui-warning-4);\n --wui-color-bg-surface-active-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-blue: var(--wui-blue-2);\n --wui-color-bg-surface-disabled: #f0f0f3;\n --wui-color-bg-surface-error: var(--wui-error-2);\n --wui-color-bg-surface-green: var(--wui-green-2);\n --wui-color-bg-surface-hover: var(--wui-color-base-3);\n --wui-color-bg-surface-hover-blue: var(--wui-blue-3);\n --wui-color-bg-surface-hover-error: var(--wui-error-3);\n --wui-color-bg-surface-hover-green: var(--wui-green-3);\n --wui-color-bg-surface-hover-info: var(--wui-blue-3);\n --wui-color-bg-surface-hover-orange: var(--wui-orange-3);\n --wui-color-bg-surface-hover-pink: var(--wui-pink-3);\n --wui-color-bg-surface-hover-purple: var(--wui-purple-3);\n --wui-color-bg-surface-hover-success: var(--wui-success-3);\n --wui-color-bg-surface-hover-warning: var(--wui-warning-3);\n --wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-info: var(--wui-blue-2);\n --wui-color-bg-surface-orange: var(--wui-orange-2);\n --wui-color-bg-surface-pink: var(--wui-pink-2);\n --wui-color-bg-surface-purple: var(--wui-purple-2);\n --wui-color-bg-surface-secondary: var(--wui-color-base-3);\n --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);\n --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);\n --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);\n --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);\n --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);\n --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);\n --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);\n --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-error: var(--wui-error-3);\n --wui-color-bg-surface-secondary-green: var(--wui-green-3);\n --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);\n --wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);\n --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);\n --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);\n --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);\n --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);\n --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);\n --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-secondary-info: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);\n --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);\n --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);\n --wui-color-bg-surface-secondary-success: var(--wui-success-3);\n --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);\n --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-selected: var(--wui-blue-3);\n --wui-color-bg-surface-selected-active: var(--wui-blue-5);\n --wui-color-bg-surface-selected-hover: var(--wui-blue-4);\n --wui-color-bg-surface-success: var(--wui-success-2);\n --wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n --wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);\n --wui-color-bg-surface-tertiary-error: var(--wui-error-5);\n --wui-color-bg-surface-tertiary-green: var(--wui-green-5);\n --wui-color-bg-surface-tertiary-info: var(--wui-blue-6);\n --wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);\n --wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);\n --wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);\n --wui-color-bg-surface-tertiary-success: var(--wui-success-5);\n --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);\n --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-warning: var(--wui-warning-2);\n --wui-color-bg-surface-yellow: var(--wui-yellow-2);\n --wui-color-bg-tooltip: #242528;\n --wui-color-border: var(--wui-color-base-6);\n --wui-color-border-active: var(--wui-color-base-9);\n --wui-color-border-active-blue: var(--wui-blue-9);\n --wui-color-border-active-error: var(--wui-error-9);\n --wui-color-border-active-green: var(--wui-green-9);\n --wui-color-border-active-info: var(--wui-blue-9);\n --wui-color-border-active-orange: var(--wui-orange-9);\n --wui-color-border-active-pink: var(--wui-pink-9);\n --wui-color-border-active-purple: var(--wui-purple-9);\n --wui-color-border-active-selected: #2949e5;\n --wui-color-border-active-success: var(--wui-success-9);\n --wui-color-border-active-warning: var(--wui-warning-9);\n --wui-color-border-active-yellow: var(--wui-yellow-9);\n --wui-color-border-blue: var(--wui-blue-6);\n --wui-color-border-disabled: var(--wui-gray-4);\n --wui-color-border-error: var(--wui-error-6);\n --wui-color-border-green: var(--wui-green-6);\n --wui-color-border-hover: var(--wui-color-base-8);\n --wui-color-border-hover-blue: var(--wui-blue-8);\n --wui-color-border-hover-green: var(--wui-green-8);\n --wui-color-border-hover-info: var(--wui-blue-8);\n --wui-color-border-hover-orange: var(--wui-orange-8);\n --wui-color-border-hover-pink: var(--wui-pink-8);\n --wui-color-border-hover-purple: var(--wui-purple-8);\n --wui-color-border-hover-selected: #81a4fe;\n --wui-color-border-hover-success: var(--wui-success-8);\n --wui-color-border-hover-warning: var(--wui-warning-8);\n --wui-color-border-hover-yellow: var(--wui-yellow-8);\n --wui-color-border-info: var(--wui-blue-6);\n --wui-color-border-orange: var(--wui-orange-6);\n --wui-color-border-pink: var(--wui-pink-6);\n --wui-color-border-purple: var(--wui-purple-6);\n --wui-color-border-secondary: var(--wui-color-base-8);\n --wui-color-border-secondary-active: var(--wui-color-base-11);\n --wui-color-border-secondary-active-blue: var(--wui-blue-11);\n --wui-color-border-secondary-active-error: var(--wui-error-11);\n --wui-color-border-secondary-active-green: var(--wui-green-11);\n --wui-color-border-secondary-active-info: var(--wui-blue-11);\n --wui-color-border-secondary-active-orange: var(--wui-orange-11);\n --wui-color-border-secondary-active-pink: var(--wui-pink-11);\n --wui-color-border-secondary-active-purple: var(--wui-purple-11);\n --wui-color-border-secondary-active-success: var(--wui-success-11);\n --wui-color-border-secondary-active-warning: var(--wui-warning-11);\n --wui-color-border-secondary-active-yellow: var(--wui-yellow-11);\n --wui-color-border-secondary-blue: var(--wui-blue-8);\n --wui-color-border-secondary-error: var(--wui-error-8);\n --wui-color-border-secondary-green: var(--wui-green-8);\n --wui-color-border-secondary-hover: var(--wui-color-base-10);\n --wui-color-border-secondary-hover-blue: var(--wui-blue-10);\n --wui-color-border-secondary-hover-error: var(--wui-error-10);\n --wui-color-border-secondary-hover-green: var(--wui-green-10);\n --wui-color-border-secondary-hover-info: var(--wui-blue-10);\n --wui-color-border-secondary-hover-orange: var(--wui-orange-10);\n --wui-color-border-secondary-hover-pink: var(--wui-pink-10);\n --wui-color-border-secondary-hover-purple: var(--wui-purple-10);\n --wui-color-border-secondary-hover-success: var(--wui-success-10);\n --wui-color-border-secondary-hover-warning: var(--wui-warning-10);\n --wui-color-border-secondary-hover-yellow: var(--wui-yellow-10);\n --wui-color-border-secondary-info: var(--wui-blue-8);\n --wui-color-border-secondary-orange: var(--wui-orange-8);\n --wui-color-border-secondary-pink: var(--wui-pink-8);\n --wui-color-border-secondary-purple: var(--wui-purple-8);\n --wui-color-border-secondary-success: var(--wui-success-8);\n --wui-color-border-secondary-warning: var(--wui-warning-8);\n --wui-color-border-secondary-yellow: var(--wui-yellow-8);\n --wui-color-border-selected: #b8d1ff;\n --wui-color-border-success: var(--wui-success-6);\n --wui-color-border-warning: var(--wui-warning-6);\n --wui-color-border-yellow: var(--wui-yellow-6);\n --wui-color-drop-shadow: #1f33991a;\n --wui-color-focus-color: var(--wui-blue-9);\n --wui-color-focus-ring: var(--wui-color-accent-9);\n --wui-color-focus-ring-blue: var(--wui-blue-9);\n --wui-color-focus-ring-disabled: var(--wui-gray-6);\n --wui-color-focus-ring-error: var(--wui-error-9);\n --wui-color-focus-ring-green: var(--wui-green-9);\n --wui-color-focus-ring-info: var(--wui-blue-9);\n --wui-color-focus-ring-orange: var(--wui-orange-9);\n --wui-color-focus-ring-pink: var(--wui-pink-9);\n --wui-color-focus-ring-purple: var(--wui-purple-9);\n --wui-color-focus-ring-success: var(--wui-success-9);\n --wui-color-focus-ring-warning: var(--wui-warning-9);\n --wui-color-focus-ring-yellow: var(--wui-yellow-9);\n --wui-color-icon: var(--wui-color-base-11);\n --wui-color-icon-blue: var(--wui-blue-11);\n --wui-color-icon-disabled: var(--wui-gray-8);\n --wui-color-icon-error: var(--wui-error-11);\n --wui-color-icon-green: var(--wui-green-11);\n --wui-color-icon-info: var(--wui-blue-11);\n --wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n --wui-color-icon-on-fill-blue: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-error: var(--wui-error-contrast);\n --wui-color-icon-on-fill-green: var(--wui-green-contrast);\n --wui-color-icon-on-fill-info: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-icon-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-icon-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-icon-on-fill-success: var(--wui-success-contrast);\n --wui-color-icon-on-fill-warning: var(--wui-warning-2);\n --wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-icon-orange: var(--wui-orange-11);\n --wui-color-icon-pink: var(--wui-pink-11);\n --wui-color-icon-purple: var(--wui-purple-11);\n --wui-color-icon-selected: var(--wui-blue-9);\n --wui-color-icon-success: var(--wui-success-11);\n --wui-color-icon-warning: var(--wui-warning-11);\n --wui-color-icon-yellow: var(--wui-yellow-11);\n --wui-color-invalid-indicator: var(--wui-error-9);\n --wui-color-notification-pill-color: var(--wui-pink-9);\n --wui-color-segmented-color-text-override: var(--wui-color-text-selected);\n --wui-color-segmented-control-checked-background: var(--wui-color-bg-app);\n --wui-color-surface-token: var(--wui-gray-1);\n --wui-color-text: var(--wui-color-base-12);\n --wui-color-text-blue: var(--wui-blue-12);\n --wui-color-text-button: var(--wui-color-text-button-token);\n --wui-color-text-button-blue: var(--wui-blue-11);\n --wui-color-text-button-error: var(--wui-error-11);\n --wui-color-text-button-green: var(--wui-green-11);\n --wui-color-text-button-info: var(--wui-blue-11);\n --wui-color-text-button-orange: var(--wui-orange-11);\n --wui-color-text-button-pink: var(--wui-pink-11);\n --wui-color-text-button-purple: var(--wui-purple-11);\n --wui-color-text-button-success: var(--wui-success-11);\n --wui-color-text-button-token: var(--wui-gray-12);\n --wui-color-text-button-warning: var(--wui-warning-11);\n --wui-color-text-button-yellow: var(--wui-yellow-12);\n --wui-color-text-disabled: var(--wui-gray-10);\n --wui-color-text-error: var(--wui-error-11);\n --wui-color-text-green: var(--wui-green-12);\n --wui-color-text-info: var(--wui-blue-12);\n --wui-color-text-link: var(--wui-color-text-link-token);\n --wui-color-text-link-blue: var(--wui-blue-9);\n --wui-color-text-link-error: var(--wui-error-11);\n --wui-color-text-link-green: var(--wui-green-11);\n --wui-color-text-link-info: var(--wui-blue-9);\n --wui-color-text-link-orange: var(--wui-orange-11);\n --wui-color-text-link-pink: var(--wui-pink-11);\n --wui-color-text-link-purple: var(--wui-purple-11);\n --wui-color-text-link-success: var(--wui-success-9);\n --wui-color-text-link-token: var(--wui-color-accent-9);\n --wui-color-text-link-warning: var(--wui-warning-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\n --wui-color-text-on-fill: var(--wui-color-accent-contrast);\n --wui-color-text-on-fill-blue: var(--wui-blue-2);\n --wui-color-text-on-fill-error: var(--wui-error-contrast);\n --wui-color-text-on-fill-green: var(--wui-green-contrast);\n --wui-color-text-on-fill-info: var(--wui-blue-contrast);\n --wui-color-text-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-text-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-text-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-text-on-fill-success: var(--wui-success-contrast);\n --wui-color-text-on-fill-warning: var(--wui-warning-contrast);\n --wui-color-text-on-fill-white-selected: var(--wui-blue-9);\n --wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-text-orange: var(--wui-orange-12);\n --wui-color-text-pink: var(--wui-pink-12);\n --wui-color-text-purple: var(--wui-purple-12);\n --wui-color-text-secondary: var(--wui-color-base-11);\n --wui-color-text-secondary-blue: var(--wui-blue-5);\n --wui-color-text-secondary-error: var(--wui-error-11);\n --wui-color-text-secondary-green: var(--wui-green-10);\n --wui-color-text-secondary-info: var(--wui-blue-11);\n --wui-color-text-secondary-orange: var(--wui-orange-10);\n --wui-color-text-secondary-pink: var(--wui-pink-10);\n --wui-color-text-secondary-purple: var(--wui-purple-11);\n --wui-color-text-secondary-success: var(--wui-success-11);\n --wui-color-text-secondary-warning: var(--wui-warning-11);\n --wui-color-text-secondary-yellow: var(--wui-yellow-10);\n --wui-color-text-selected: var(--wui-blue-9);\n --wui-color-text-success: var(--wui-success-12);\n --wui-color-text-warning: var(--wui-warning-12);\n --wui-color-text-yellow: var(--wui-yellow-11);\n --wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);\n --wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);\n --wui-error-1: #fffcfc;\n --wui-error-2: #fff7f7;\n --wui-error-3: #ffebea;\n --wui-error-4: #ffdcd9;\n --wui-error-5: #ffcdca;\n --wui-error-6: #febdb9;\n --wui-error-7: #f5a9a5;\n --wui-error-8: #eb8f8b;\n --wui-error-9: #e5484d;\n --wui-error-10: #d73840;\n --wui-error-11: #cc2e39;\n --wui-error-12: #64181b;\n --wui-error-alpha-1: #ff000003;\n --wui-error-alpha-2: #ff000008;\n --wui-error-alpha-3: #ff0d0014;\n --wui-error-alpha-4: #ff150026;\n --wui-error-alpha-5: #ff0f0036;\n --wui-error-alpha-6: #fc0f0045;\n --wui-error-alpha-7: #e30c0159;\n --wui-error-alpha-8: #d4090073;\n --wui-error-alpha-9: #db0007b8;\n --wui-error-alpha-10: #cc000ac7;\n --wui-error-alpha-11: #c1000ed1;\n --wui-error-alpha-12: #540003e8;\n --wui-error-contrast: #fff;\n --wui-error-surface: #fff5f5cc;\n --wui-gray-1: #fcfcfd;\n --wui-gray-2: #f9f9fb;\n --wui-gray-3: #f0f0f3;\n --wui-gray-4: #e8e8ec;\n --wui-gray-5: #e0e0e5;\n --wui-gray-6: #d9d9de;\n --wui-gray-7: #ceced5;\n --wui-gray-8: #bbbbc4;\n --wui-gray-9: #8d8d95;\n --wui-gray-10: #82828a;\n --wui-gray-11: #64646a;\n --wui-gray-12: #202024;\n --wui-gray-alpha-1: #00005503;\n --wui-gray-alpha-2: #00005505;\n --wui-gray-alpha-3: #0000330f;\n --wui-gray-alpha-4: #00002d17;\n --wui-gray-alpha-5: #00002a1f;\n --wui-gray-alpha-6: #00002226;\n --wui-gray-alpha-7: #00002530;\n --wui-gray-alpha-8: #00002245;\n --wui-gray-alpha-9: #00001273;\n --wui-gray-alpha-10: #0000117d;\n --wui-gray-alpha-11: #00000a9c;\n --wui-gray-alpha-12: #000005de;\n --wui-gray-contrast: #fff;\n --wui-gray-surface: #fffc;\n --wui-green-1: #fbfefa;\n --wui-green-2: #f5fbf4;\n --wui-green-3: #e7f8e5;\n --wui-green-4: #d8f2d4;\n --wui-green-5: #c6ebc0;\n --wui-green-6: #afe0a6;\n --wui-green-7: #8fd185;\n --wui-green-8: #5fbd51;\n --wui-green-9: #268713;\n --wui-green-10: #117900;\n --wui-green-11: #1e8106;\n --wui-green-12: #1e3d19;\n --wui-green-alpha-1: #33cc0005;\n --wui-green-alpha-2: #18a3000b;\n --wui-green-alpha-3: #14bb001a;\n --wui-green-alpha-4: #18b2012b;\n --wui-green-alpha-5: #19af003f;\n --wui-green-alpha-6: #1aa70059;\n --wui-green-alpha-7: #159f017a;\n --wui-green-alpha-8: #189f00b0;\n --wui-green-alpha-9: #159f00ae;\n --wui-green-alpha-10: #157d00ec;\n --wui-green-alpha-11: #117900;\n --wui-green-alpha-12: #197e00f9;\n --wui-green-contrast: #fff;\n --wui-green-surface: #f3faf1cc;\n --wui-motion-duration-01: 70ms;\n --wui-motion-duration-02: 110ms;\n --wui-motion-duration-03: 150ms;\n --wui-motion-duration-04: 240ms;\n --wui-motion-duration-05: 400ms;\n --wui-motion-duration-06: 700ms;\n --wui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n --wui-motion-ease-in: cubic-bezier(0.42, 0, 1, 1);\n --wui-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);\n --wui-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);\n --wui-motion-linear: cubic-bezier(0, 0, 1, 1);\n --wui-orange-1: #fffcfb;\n --wui-orange-2: #fff7f5;\n --wui-orange-3: #ffebe6;\n --wui-orange-4: #ffdbce;\n --wui-orange-5: #fcbfcb;\n --wui-orange-6: #ffbdaa;\n --wui-orange-7: #f4aa95;\n --wui-orange-8: #ea9178;\n --wui-orange-9: #d1451a;\n --wui-orange-10: #c23600;\n --wui-orange-11: #ce4216;\n --wui-orange-12: #592b1e;\n --wui-orange-alpha-1: #ff400005;\n --wui-orange-alpha-2: #ff33000a;\n --wui-orange-alpha-3: #ff33001a;\n --wui-orange-alpha-4: #ff440030;\n --wui-orange-alpha-5: #ff400045;\n --wui-orange-alpha-6: #ff390054;\n --wui-orange-alpha-7: #e533016b;\n --wui-orange-alpha-8: #d8300087;\n --wui-orange-alpha-9: #cc3000e5;\n --wui-orange-alpha-10: #c23600;\n --wui-orange-alpha-11: #c93000e8;\n --wui-orange-alpha-12: #430f00e0;\n --wui-orange-contrast: #fff;\n --wui-orange-surface: #fff5f3cc;\n --wui-pink-1: #fffcfd;\n --wui-pink-2: #fff7fa;\n --wui-pink-3: #ffe8f3;\n --wui-pink-4: #ffdaeb;\n --wui-pink-5: #fdcbe2;\n --wui-pink-6: #f7bcd8;\n --wui-pink-7: #efa8ca;\n --wui-pink-8: #e68eba;\n --wui-pink-9: #ff40b3;\n --wui-pink-10: #f12fa7;\n --wui-pink-11: #cd0089;\n --wui-pink-12: #680445;\n --wui-pink-alpha-1: #ff005503;\n --wui-pink-alpha-2: #ff006008;\n --wui-pink-alpha-3: #ff007a17;\n --wui-pink-alpha-4: #ff007626;\n --wui-pink-alpha-5: #f6007133;\n --wui-pink-alpha-6: #e1006b42;\n --wui-pink-alpha-7: #d1006457;\n --wui-pink-alpha-8: #c7006470;\n --wui-pink-alpha-9: #ff009abf;\n --wui-pink-alpha-10: #ee0093d1;\n --wui-pink-alpha-11: #cd0089;\n --wui-pink-alpha-12: #660042fa;\n --wui-pink-contrast: #fff;\n --wui-pink-surface: #fff5f9cc;\n --wui-purple-1: #fefcff;\n --wui-purple-2: #fdf7ff;\n --wui-purple-3: #fbeaff;\n --wui-purple-4: #f7ddff;\n --wui-purple-5: #f2ceff;\n --wui-purple-6: #eabdff;\n --wui-purple-7: #e0a5fc;\n --wui-purple-8: #d285f7;\n --wui-purple-9: #ac12e0;\n --wui-purple-10: #9a09c9;\n --wui-purple-11: #9b0bca;\n --wui-purple-12: #550072;\n --wui-purple-alpha-1: #aa00ff03;\n --wui-purple-alpha-2: #c000ff08;\n --wui-purple-alpha-3: #cf00ff14;\n --wui-purple-alpha-4: #c300ff21;\n --wui-purple-alpha-5: #bc00ff30;\n --wui-purple-alpha-6: #ae00ff42;\n --wui-purple-alpha-7: #a801f759;\n --wui-purple-alpha-8: #a101ef7a;\n --wui-purple-alpha-9: #a600deed;\n --wui-purple-alpha-10: #9600c7f5;\n --wui-purple-alpha-11: #9700c8f5;\n --wui-purple-alpha-12: #550072;\n --wui-purple-contrast: #fff;\n --wui-purple-surface: #fdf5ffcc;\n --wui-red-1: #fffcfc;\n --wui-red-2: #fff7f7;\n --wui-red-3: #ffe9e9;\n --wui-red-4: #ffd9d9;\n --wui-red-5: #ffcaca;\n --wui-red-6: #ffbaba;\n --wui-red-7: #fca5a6;\n --wui-red-8: #f5898c;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f10845;\n --wui-red-11: #db0035;\n --wui-red-12: #6d021a;\n --wui-red-alpha-1: #ff000003;\n --wui-red-alpha-2: #ff000008;\n --wui-red-alpha-3: #ff000017;\n --wui-red-alpha-4: #ff000026;\n --wui-red-alpha-5: #ff000036;\n --wui-red-alpha-6: #ff000045;\n --wui-red-alpha-7: #f7010359;\n --wui-red-alpha-8: #ea000775;\n --wui-red-alpha-9: #ff002ed4;\n --wui-red-alpha-10: #f1003ff7;\n --wui-red-alpha-11: #db0035;\n --wui-red-alpha-12: #6c0018fc;\n --wui-red-contrast: #fff;\n --wui-red-surface: #fff5f5cc;\n --wui-space-00: 0px;\n --wui-space-01: 4px;\n --wui-space-02: 8px;\n --wui-space-03: 12px;\n --wui-space-04: 16px;\n --wui-space-05: 24px;\n --wui-space-06: 32px;\n --wui-space-07: 40px;\n --wui-space-08: 48px;\n --wui-space-09: 64px;\n --wui-success-1: #fbfefc;\n --wui-success-2: #f4fbf7;\n --wui-success-3: #e5f6eb;\n --wui-success-4: #d6f1df;\n --wui-success-5: #c4e8d1;\n --wui-success-6: #adddc0;\n --wui-success-7: #8fcea8;\n --wui-success-8: #60b887;\n --wui-success-9: #30a46c;\n --wui-success-10: #289662;\n --wui-success-11: #00814c;\n --wui-success-12: #1d3b2a;\n --wui-success-alpha-1: #00c04005;\n --wui-success-alpha-2: #00a3460a;\n --wui-success-alpha-3: #00a73b1a;\n --wui-success-alpha-4: #00a83829;\n --wui-success-alpha-5: #019c393b;\n --wui-success-alpha-6: #00963c52;\n --wui-success-alpha-7: #00903970;\n --wui-success-alpha-8: #008d3f9e;\n --wui-success-alpha-9: #008f4acf;\n --wui-success-alpha-10: #008345d6;\n --wui-success-alpha-11: #00814c;\n --wui-success-alpha-12: #00220fe3;\n --wui-success-contrast: #fff;\n --wui-success-surface: #f1faf5cc;\n --wui-typography-body-1: var(--wui-typography-body-1-font-weight) var(--wui-typography-body-1-font-size)/var(--wui-typography-body-1-line-height) var(--wui-typography-body-1-font-family);\n --wui-typography-body-1-font-family: var(--wui-typography-family-default);\n --wui-typography-body-1-font-size: 20px;\n --wui-typography-body-1-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-1-letter-spacing: 0px;\n --wui-typography-body-1-line-height: 30px;\n --wui-typography-body-1-paragraph-spacing: 16px;\n --wui-typography-body-2: var(--wui-typography-body-2-font-weight) var(--wui-typography-body-2-font-size)/var(--wui-typography-body-2-line-height) var(--wui-typography-body-2-font-family);\n --wui-typography-body-2-font-family: var(--wui-typography-family-default);\n --wui-typography-body-2-font-size: 16px;\n --wui-typography-body-2-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-2-letter-spacing: 0px;\n --wui-typography-body-2-line-height: 26px;\n --wui-typography-body-2-paragraph-spacing: 12px;\n --wui-typography-body-3: var(--wui-typography-body-3-font-weight) var(--wui-typography-body-3-font-size)/var(--wui-typography-body-3-line-height) var(--wui-typography-body-3-font-family);\n --wui-typography-body-3-font-family: var(--wui-typography-family-default);\n --wui-typography-body-3-font-size: 14px;\n --wui-typography-body-3-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-3-letter-spacing: 0px;\n --wui-typography-body-3-line-height: 22px;\n --wui-typography-body-3-paragraph-spacing: 8px;\n --wui-typography-body-4: var(--wui-typography-body-4-font-weight) var(--wui-typography-body-4-font-size)/var(--wui-typography-body-4-line-height) var(--wui-typography-body-4-font-family);\n --wui-typography-body-4-font-family: var(--wui-typography-family-default);\n --wui-typography-body-4-font-size: 12px;\n --wui-typography-body-4-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-4-letter-spacing: 0px;\n --wui-typography-body-4-line-height: 18px;\n --wui-typography-body-4-paragraph-spacing: 8px;\n --wui-typography-family-brand: \"GT Walsheim\", sans-serif;\n --wui-typography-family-default: intervariable, sans-serif;\n --wui-typography-family-mono: \"IBM Plex Mono\", monospace;\n --wui-typography-heading-1: var(--wui-typography-heading-1-font-weight) var(--wui-typography-heading-1-font-size)/var(--wui-typography-heading-1-line-height) var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-1-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-1-font-size: 36px;\n --wui-typography-heading-1-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-1-letter-spacing: 0px;\n --wui-typography-heading-1-line-height: 44px;\n --wui-typography-heading-2: var(--wui-typography-heading-2-font-weight) var(--wui-typography-heading-2-font-size)/var(--wui-typography-heading-2-line-height) var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-2-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-2-font-size: 32px;\n --wui-typography-heading-2-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-2-letter-spacing: 0px;\n --wui-typography-heading-2-line-height: 38px;\n --wui-typography-heading-3: var(--wui-typography-heading-3-font-weight) var(--wui-typography-heading-3-font-size)/var(--wui-typography-heading-3-line-height) var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-3-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-3-font-size: 24px;\n --wui-typography-heading-3-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-3-letter-spacing: 0px;\n --wui-typography-heading-3-line-height: 30px;\n --wui-typography-heading-4: var(--wui-typography-heading-4-font-weight) var(--wui-typography-heading-4-font-size)/var(--wui-typography-heading-4-line-height) var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-4-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-4-font-size: 18px;\n --wui-typography-heading-4-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-4-letter-spacing: 0px;\n --wui-typography-heading-4-line-height: 24px;\n --wui-typography-heading-5: var(--wui-typography-heading-5-font-weight) var(--wui-typography-heading-5-font-size)/var(--wui-typography-heading-5-line-height) var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-5-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-5-font-size: 16px;\n --wui-typography-heading-5-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-5-letter-spacing: 0px;\n --wui-typography-heading-5-line-height: 22px;\n --wui-typography-heading-6: var(--wui-typography-heading-6-font-weight) var(--wui-typography-heading-6-font-size)/var(--wui-typography-heading-6-line-height) var(--wui-typography-heading-6-font-family);\n --wui-typography-heading-6-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-6-font-size: 14px;\n --wui-typography-heading-6-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-6-letter-spacing: 0px;\n --wui-typography-heading-6-line-height: 18px;\n --wui-typography-heading-hero: var(--wui-typography-heading-hero-font-weight) var(--wui-typography-heading-hero-font-size)/var(--wui-typography-heading-hero-line-height) var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-hero-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-hero-font-size: 48px;\n --wui-typography-heading-hero-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-hero-letter-spacing: 0px;\n --wui-typography-heading-hero-line-height: 58px;\n --wui-typography-label-1: var(--wui-typography-label-1-font-weight) var(--wui-typography-label-1-font-size)/var(--wui-typography-label-1-line-height) var(--wui-typography-label-1-font-family);\n --wui-typography-label-1-font-family: var(--wui-typography-family-default);\n --wui-typography-label-1-font-size: 18px;\n --wui-typography-label-1-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-1-letter-spacing: 0px;\n --wui-typography-label-1-line-height: 24px;\n --wui-typography-label-2: var(--wui-typography-label-2-font-weight) var(--wui-typography-label-2-font-size)/var(--wui-typography-label-2-line-height) var(--wui-typography-label-2-font-family);\n --wui-typography-label-2-font-family: var(--wui-typography-family-default);\n --wui-typography-label-2-font-size: 16px;\n --wui-typography-label-2-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-2-letter-spacing: 0px;\n --wui-typography-label-2-line-height: 18px;\n --wui-typography-label-3: var(--wui-typography-label-3-font-weight) var(--wui-typography-label-3-font-size)/var(--wui-typography-label-3-line-height) var(--wui-typography-label-3-font-family);\n --wui-typography-label-3-font-family: var(--wui-typography-family-default);\n --wui-typography-label-3-font-size: 14px;\n --wui-typography-label-3-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-3-letter-spacing: 0px;\n --wui-typography-label-3-line-height: 16px;\n --wui-typography-label-4: var(--wui-typography-label-4-font-weight) var(--wui-typography-label-4-font-size)/var(--wui-typography-label-4-line-height) var(--wui-typography-label-4-font-family);\n --wui-typography-label-4-font-family: var(--wui-typography-family-default);\n --wui-typography-label-4-font-size: 12px;\n --wui-typography-label-4-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-4-letter-spacing: 0px;\n --wui-typography-label-4-line-height: 14px;\n --wui-typography-weight-body: 425;\n --wui-typography-weight-body-bold: 700;\n --wui-typography-weight-brand-black: 700;\n --wui-typography-weight-brand-bold: 600;\n --wui-typography-weight-label: 475;\n --wui-typography-weight-label-bold: 600;\n --wui-vendor-hubspot-1: #fefcfb;\n --wui-vendor-hubspot-2: #fff5f2;\n --wui-vendor-hubspot-3: #ffe9e2;\n --wui-vendor-hubspot-4: #ffd7c9;\n --wui-vendor-hubspot-5: #ffc8b7;\n --wui-vendor-hubspot-6: #ffb8a3;\n --wui-vendor-hubspot-7: #ffa48d;\n --wui-vendor-hubspot-8: #f68a70;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f24d25;\n --wui-vendor-hubspot-11: #d93a0f;\n --wui-vendor-hubspot-12: #5b2a1e;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-hubspot-surface: #fff3efcc;\n --wui-vendor-marketo-1: #fdfdff;\n --wui-vendor-marketo-2: #f7f8ff;\n --wui-vendor-marketo-3: #eff2ff;\n --wui-vendor-marketo-4: #e3e8ff;\n --wui-vendor-marketo-5: #d5ddff;\n --wui-vendor-marketo-6: #c5cfff;\n --wui-vendor-marketo-7: #b0bcfa;\n --wui-vendor-marketo-8: #93a0f2;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #4f55c7;\n --wui-vendor-marketo-12: #252a62;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-marketo-surface: #f5f6ffcc;\n --wui-vendor-pardot-1: #fafdff;\n --wui-vendor-pardot-2: #f3fafe;\n --wui-vendor-pardot-3: #e1f5ff;\n --wui-vendor-pardot-4: #ceeeff;\n --wui-vendor-pardot-5: #bae5ff;\n --wui-vendor-pardot-6: #a4d9fa;\n --wui-vendor-pardot-7: #85c9f1;\n --wui-vendor-pardot-8: #4fb3e8;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0094cf;\n --wui-vendor-pardot-11: #0079b5;\n --wui-vendor-pardot-12: #0c3a51;\n --wui-vendor-pardot-contrast: #fff;\n --wui-vendor-pardot-surface: #f0f9fecc;\n --wui-warning-1: #fdfdfa;\n --wui-warning-2: #fefceb;\n --wui-warning-3: #fff9bf;\n --wui-warning-4: #fef29f;\n --wui-warning-5: #f8e981;\n --wui-warning-6: #e9da79;\n --wui-warning-7: #d8cb75;\n --wui-warning-8: #c4b54f;\n --wui-warning-9: #ffe62a;\n --wui-warning-10: #f3dd45;\n --wui-warning-11: #897a00;\n --wui-warning-12: #413d23;\n --wui-warning-alpha-1: #99990005;\n --wui-warning-alpha-2: #f3d90014;\n --wui-warning-alpha-3: #ffe80040;\n --wui-warning-alpha-4: #fddd0061;\n --wui-warning-alpha-5: #f1d3007d;\n --wui-warning-alpha-6: #d6b90087;\n --wui-warning-alpha-7: #b79f008a;\n --wui-warning-alpha-8: #aa9400b0;\n --wui-warning-alpha-9: #ffe100d6;\n --wui-warning-alpha-10: #efd100ba;\n --wui-warning-alpha-11: #897a00;\n --wui-warning-alpha-12: #231e00db;\n --wui-warning-contrast: #262209;\n --wui-warning-surface: #fefbe6cc;\n --wui-yellow-1: #fdfdf8;\n --wui-yellow-2: #fbfcea;\n --wui-yellow-3: #f6fbb8;\n --wui-yellow-4: #f0f491;\n --wui-yellow-5: #e7eb6d;\n --wui-yellow-6: #d8dd5d;\n --wui-yellow-7: #c8cc52;\n --wui-yellow-8: #b3b600;\n --wui-yellow-9: #bcbf19;\n --wui-yellow-10: #b1b400;\n --wui-yellow-11: #7a7b00;\n --wui-yellow-12: #3e3f14;\n --wui-yellow-alpha-1: #b7b70008;\n --wui-yellow-alpha-2: #cfdb0014;\n --wui-yellow-alpha-3: #dff10047;\n --wui-yellow-alpha-4: #dde6006e;\n --wui-yellow-alpha-5: #d5dc0091;\n --wui-yellow-alpha-6: #c2ca00a3;\n --wui-yellow-alpha-7: #aeb400ad;\n --wui-yellow-alpha-8: #b3b600;\n --wui-yellow-alpha-9: #b5b800e5;\n --wui-yellow-alpha-10: #b1b400;\n --wui-yellow-alpha-11: #7a7b00;\n --wui-yellow-alpha-12: #2e2f00eb;\n --wui-yellow-contrast: #22230b;\n --wui-yellow-surface: #fafbe5cc;\n --wui-zindex-backdrop: 500;\n --wui-zindex-menu: 500;\n --wui-zindex-modal: 500;\n --wui-zindex-popover: 500;\n --wui-zindex-select: 500;\n --wui-zindex-tooltip: 500;\n --wui-zindex-under: -1;\n}\n"}
77
+ :root,
78
+ [data-wui-theme='true'] {
79
+ ${"/*\n * Typography weight overlay\n *\n * Reintroduces the var-with-fallback override hooks for heading weights. These\n * vars are part of the @wistia/ui public surface (see CustomizableThemeWrapper)\n * and consumers override them at any cascade level. DTCG aliases compile to a\n * single resolved value, so the fallback pattern can't live in the generated\n * tokens.css.\n *\n * Order matters: this file MUST follow the generated tokens.css so its\n * declarations win the cascade, and MUST precede typographyLegacyAliases.css so\n * the override hook propagates through any legacy `*-weight` alias as well.\n */\n--wui-typography-heading-hero-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-1-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-2-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-3-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-4-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-5-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-6-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n"}
80
+ ${"/*\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--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"}
81
+ }
82
+ `;
48
83
  //#endregion
49
84
  //#region src/css/GlobalStyle.tsx
50
85
  const GlobalStyle = createGlobalStyle`
@@ -173,43 +208,10 @@ const GlobalStyle = createGlobalStyle`
173
208
  }
174
209
  }
175
210
  `}
176
- ${css`
177
- ${"/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root,\n[data-wui-theme='true'] {\n--wui-space-00: 0px;\n --wui-space-01: 4px;\n --wui-space-02: 8px;\n --wui-space-03: 12px;\n --wui-space-04: 16px;\n --wui-space-05: 24px;\n --wui-space-06: 32px;\n --wui-space-07: 40px;\n --wui-space-08: 48px;\n --wui-space-09: 64px;\n --wui-border-radius-00: 0px;\n --wui-border-radius-01: 4px;\n --wui-border-radius-02: 8px;\n --wui-border-radius-03: 16px;\n --wui-border-radius-04: 20px;\n --wui-border-radius-05: 24px;\n --wui-border-radius-rounded: 1000px;\n --wui-zindex-under: -1;\n --wui-zindex-backdrop: 500;\n --wui-zindex-menu: 500;\n --wui-zindex-modal: 500;\n --wui-zindex-popover: 500;\n --wui-zindex-select: 500;\n --wui-zindex-tooltip: 500;\n --wui-motion-duration-01: 70ms;\n --wui-motion-duration-02: 110ms;\n --wui-motion-duration-03: 150ms;\n --wui-motion-duration-04: 240ms;\n --wui-motion-duration-05: 400ms;\n --wui-motion-duration-06: 700ms;\n --wui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n --wui-motion-ease-in: cubic-bezier(0.42, 0, 1, 1);\n --wui-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);\n --wui-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);\n --wui-motion-linear: cubic-bezier(0, 0, 1, 1);\n --wui-typography-family-default: intervariable, sans-serif;\n --wui-typography-family-brand: \"GT Walsheim\", sans-serif;\n --wui-typography-family-mono: \"IBM Plex Mono\", monospace;\n --wui-typography-weight-brand-bold: 600;\n --wui-typography-weight-brand-black: 700;\n --wui-typography-weight-body: 425;\n --wui-typography-weight-body-bold: 700;\n --wui-typography-weight-label: 475;\n --wui-typography-weight-label-bold: 600;\n --wui-typography-heading-hero-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-hero-line-height: 58px;\n --wui-typography-heading-hero-letter-spacing: 0;\n --wui-typography-heading-hero-font-size: 48px;\n --wui-typography-heading-hero-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-hero: var(--wui-typography-heading-hero-font-weight) var(--wui-typography-heading-hero-font-size)/var(--wui-typography-heading-hero-line-height) var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-1-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-1-line-height: 44px;\n --wui-typography-heading-1-letter-spacing: 0;\n --wui-typography-heading-1-font-size: 36px;\n --wui-typography-heading-1-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-1: var(--wui-typography-heading-1-font-weight) var(--wui-typography-heading-1-font-size)/var(--wui-typography-heading-1-line-height) var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-2-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-2-line-height: 38px;\n --wui-typography-heading-2-letter-spacing: 0;\n --wui-typography-heading-2-font-size: 32px;\n --wui-typography-heading-2-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-2: var(--wui-typography-heading-2-font-weight) var(--wui-typography-heading-2-font-size)/var(--wui-typography-heading-2-line-height) var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-3-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-3-line-height: 30px;\n --wui-typography-heading-3-letter-spacing: 0;\n --wui-typography-heading-3-font-size: 24px;\n --wui-typography-heading-3-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-3: var(--wui-typography-heading-3-font-weight) var(--wui-typography-heading-3-font-size)/var(--wui-typography-heading-3-line-height) var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-4-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-4-line-height: 24px;\n --wui-typography-heading-4-letter-spacing: 0;\n --wui-typography-heading-4-font-size: 18px;\n --wui-typography-heading-4-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-4: var(--wui-typography-heading-4-font-weight) var(--wui-typography-heading-4-font-size)/var(--wui-typography-heading-4-line-height) var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-5-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-5-line-height: 22px;\n --wui-typography-heading-5-letter-spacing: 0;\n --wui-typography-heading-5-font-size: 16px;\n --wui-typography-heading-5-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-5: var(--wui-typography-heading-5-font-weight) var(--wui-typography-heading-5-font-size)/var(--wui-typography-heading-5-line-height) var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-6-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-6-line-height: 18px;\n --wui-typography-heading-6-letter-spacing: 0;\n --wui-typography-heading-6-font-size: 14px;\n --wui-typography-heading-6-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-6: var(--wui-typography-heading-6-font-weight) var(--wui-typography-heading-6-font-size)/var(--wui-typography-heading-6-line-height) var(--wui-typography-heading-6-font-family);\n --wui-typography-body-1-font-family: var(--wui-typography-family-default);\n --wui-typography-body-1-line-height: 30px;\n --wui-typography-body-1-letter-spacing: 0;\n --wui-typography-body-1-font-size: 20px;\n --wui-typography-body-1-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-1-paragraph-spacing: 16px;\n --wui-typography-body-1: var(--wui-typography-body-1-font-weight) var(--wui-typography-body-1-font-size)/var(--wui-typography-body-1-line-height) var(--wui-typography-body-1-font-family);\n --wui-typography-body-2-font-family: var(--wui-typography-family-default);\n --wui-typography-body-2-line-height: 26px;\n --wui-typography-body-2-letter-spacing: 0;\n --wui-typography-body-2-font-size: 16px;\n --wui-typography-body-2-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-2-paragraph-spacing: 12px;\n --wui-typography-body-2: var(--wui-typography-body-2-font-weight) var(--wui-typography-body-2-font-size)/var(--wui-typography-body-2-line-height) var(--wui-typography-body-2-font-family);\n --wui-typography-body-3-font-family: var(--wui-typography-family-default);\n --wui-typography-body-3-line-height: 22px;\n --wui-typography-body-3-letter-spacing: 0;\n --wui-typography-body-3-font-size: 14px;\n --wui-typography-body-3-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-3-paragraph-spacing: 8px;\n --wui-typography-body-3: var(--wui-typography-body-3-font-weight) var(--wui-typography-body-3-font-size)/var(--wui-typography-body-3-line-height) var(--wui-typography-body-3-font-family);\n --wui-typography-body-4-font-family: var(--wui-typography-family-default);\n --wui-typography-body-4-line-height: 18px;\n --wui-typography-body-4-letter-spacing: 0;\n --wui-typography-body-4-font-size: 12px;\n --wui-typography-body-4-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-4-paragraph-spacing: 8px;\n --wui-typography-body-4: var(--wui-typography-body-4-font-weight) var(--wui-typography-body-4-font-size)/var(--wui-typography-body-4-line-height) var(--wui-typography-body-4-font-family);\n --wui-typography-label-1-font-family: var(--wui-typography-family-default);\n --wui-typography-label-1-line-height: 24px;\n --wui-typography-label-1-letter-spacing: 0;\n --wui-typography-label-1-font-size: 18px;\n --wui-typography-label-1-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-1: var(--wui-typography-label-1-font-weight) var(--wui-typography-label-1-font-size)/var(--wui-typography-label-1-line-height) var(--wui-typography-label-1-font-family);\n --wui-typography-label-2-font-family: var(--wui-typography-family-default);\n --wui-typography-label-2-line-height: 18px;\n --wui-typography-label-2-letter-spacing: 0;\n --wui-typography-label-2-font-size: 16px;\n --wui-typography-label-2-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-2: var(--wui-typography-label-2-font-weight) var(--wui-typography-label-2-font-size)/var(--wui-typography-label-2-line-height) var(--wui-typography-label-2-font-family);\n --wui-typography-label-3-font-family: var(--wui-typography-family-default);\n --wui-typography-label-3-line-height: 16px;\n --wui-typography-label-3-letter-spacing: 0;\n --wui-typography-label-3-font-size: 14px;\n --wui-typography-label-3-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-3: var(--wui-typography-label-3-font-weight) var(--wui-typography-label-3-font-size)/var(--wui-typography-label-3-line-height) var(--wui-typography-label-3-font-family);\n --wui-typography-label-4-font-family: var(--wui-typography-family-default);\n --wui-typography-label-4-line-height: 14px;\n --wui-typography-label-4-letter-spacing: 0;\n --wui-typography-label-4-font-size: 12px;\n --wui-typography-label-4-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-4: var(--wui-typography-label-4-font-weight) var(--wui-typography-label-4-font-size)/var(--wui-typography-label-4-line-height) var(--wui-typography-label-4-font-family);\n --wui-app-background: #fff;\n --wui-blue-1: #fdfdfe;\n --wui-color-accent-1: var(--wui-blue-1);\n --wui-blue-2: #f6f9ff;\n --wui-color-bg-surface-info: var(--wui-blue-2);\n --wui-color-bg-surface-blue: var(--wui-blue-2);\n --wui-color-text-on-fill-blue: var(--wui-blue-2);\n --wui-color-accent-2: var(--wui-blue-2);\n --wui-blue-3: #ecf2ff;\n --wui-color-bg-surface-hover-info: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-info: var(--wui-blue-3);\n --wui-color-bg-surface-hover-blue: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);\n --wui-color-bg-surface-selected: var(--wui-blue-3);\n --wui-color-accent-3: var(--wui-blue-3);\n --wui-blue-4: #ddeaff;\n --wui-color-bg-surface-active-info: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);\n --wui-color-bg-surface-active-blue: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);\n --wui-color-bg-surface-selected-hover: var(--wui-blue-4);\n --wui-color-accent-4: var(--wui-blue-4);\n --wui-blue-5: #cddfff;\n --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);\n --wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);\n --wui-color-bg-surface-selected-active: var(--wui-blue-5);\n --wui-color-text-secondary-blue: var(--wui-blue-5);\n --wui-color-accent-5: var(--wui-blue-5);\n --wui-blue-6: #b8d1ff;\n --wui-color-bg-surface-tertiary-info: var(--wui-blue-6);\n --wui-color-border-info: var(--wui-blue-6);\n --wui-color-border-blue: var(--wui-blue-6);\n --wui-color-accent-6: var(--wui-blue-6);\n --wui-blue-7: #a1beff;\n --wui-color-accent-7: var(--wui-blue-7);\n --wui-blue-8: #81a4fe;\n --wui-color-border-hover-info: var(--wui-blue-8);\n --wui-color-border-secondary-info: var(--wui-blue-8);\n --wui-color-border-hover-blue: var(--wui-blue-8);\n --wui-color-border-secondary-blue: var(--wui-blue-8);\n --wui-color-accent-8: var(--wui-blue-8);\n --wui-blue-9: #2949e5;\n --wui-color-bg-fill-info: var(--wui-blue-9);\n --wui-color-bg-fill-blue: var(--wui-blue-9);\n --wui-color-bg-fill: var(--wui-color-accent-9);\n --wui-color-border-active-info: var(--wui-blue-9);\n --wui-color-text-link-info: var(--wui-blue-9);\n --wui-color-focus-ring-info: var(--wui-blue-9);\n --wui-color-border-active-blue: var(--wui-blue-9);\n --wui-color-text-link-blue: var(--wui-blue-9);\n --wui-color-focus-ring-blue: var(--wui-blue-9);\n --wui-color-focus-color: var(--wui-blue-9);\n --wui-color-text-on-fill-white-selected: var(--wui-blue-9);\n --wui-color-icon-selected: var(--wui-blue-9);\n --wui-color-text-selected: var(--wui-blue-9);\n --wui-color-segmented-color-text-override: var(--wui-color-text-selected);\n --wui-color-accent-9: var(--wui-blue-9);\n --wui-color-text-link-token: var(--wui-color-accent-9);\n --wui-color-text-link: var(--wui-color-text-link-token);\n --wui-color-focus-ring: var(--wui-color-accent-9);\n --wui-blue-10: #1f36d3;\n --wui-color-bg-fill-hover-info: var(--wui-blue-10);\n --wui-color-bg-fill-hover-blue: var(--wui-blue-10);\n --wui-color-bg-fill-hover: var(--wui-color-accent-10);\n --wui-color-border-secondary-hover-info: var(--wui-blue-10);\n --wui-color-border-secondary-hover-blue: var(--wui-blue-10);\n --wui-color-accent-10: var(--wui-blue-10);\n --wui-blue-11: #3154dc;\n --wui-color-bg-fill-active-info: var(--wui-blue-11);\n --wui-color-bg-fill-active-blue: var(--wui-blue-11);\n --wui-color-bg-fill-active: var(--wui-color-accent-11);\n --wui-color-border-secondary-active-info: var(--wui-blue-11);\n --wui-color-icon-info: var(--wui-blue-11);\n --wui-color-text-button-info: var(--wui-blue-11);\n --wui-color-text-secondary-info: var(--wui-blue-11);\n --wui-color-border-secondary-active-blue: var(--wui-blue-11);\n --wui-color-icon-blue: var(--wui-blue-11);\n --wui-color-text-button-blue: var(--wui-blue-11);\n --wui-color-accent-11: var(--wui-blue-11);\n --wui-blue-12: #192b65;\n --wui-color-text-info: var(--wui-blue-12);\n --wui-color-text-blue: var(--wui-blue-12);\n --wui-color-accent-12: var(--wui-blue-12);\n --wui-blue-surface: #f4f8ffcc;\n --wui-blue-contrast: #fff;\n --wui-color-icon-on-fill-info: var(--wui-blue-contrast);\n --wui-color-text-on-fill-info: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-blue: var(--wui-blue-contrast);\n --wui-color-accent-contrast: var(--wui-blue-contrast);\n --wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n --wui-color-text-on-fill: var(--wui-color-accent-contrast);\n --wui-blue-alpha-1: #00008003;\n --wui-blue-alpha-2: #0055ff0a;\n --wui-blue-alpha-3: #0051ff12;\n --wui-blue-alpha-4: #0062ff21;\n --wui-blue-alpha-5: #005cff33;\n --wui-blue-alpha-6: #005aff47;\n --wui-blue-alpha-7: #004fff5e;\n --wui-blue-alpha-8: #0047fd7d;\n --wui-blue-alpha-9: #0026e0d6;\n --wui-blue-alpha-10: #001acde0;\n --wui-blue-alpha-11: #002bd4cf;\n --wui-blue-alpha-12: #001454e5;\n --wui-purple-1: #fefcff;\n --wui-purple-2: #fdf7ff;\n --wui-color-bg-surface-purple: var(--wui-purple-2);\n --wui-purple-3: #fbeaff;\n --wui-color-bg-surface-hover-purple: var(--wui-purple-3);\n --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);\n --wui-purple-4: #f7ddff;\n --wui-color-bg-surface-active-purple: var(--wui-purple-4);\n --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);\n --wui-purple-5: #f2ceff;\n --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);\n --wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);\n --wui-purple-6: #eabdff;\n --wui-color-border-purple: var(--wui-purple-6);\n --wui-purple-7: #e0a5fc;\n --wui-purple-8: #d285f7;\n --wui-color-border-hover-purple: var(--wui-purple-8);\n --wui-color-border-secondary-purple: var(--wui-purple-8);\n --wui-purple-9: #ac12e0;\n --wui-color-bg-fill-purple: var(--wui-purple-9);\n --wui-color-border-active-purple: var(--wui-purple-9);\n --wui-color-focus-ring-purple: var(--wui-purple-9);\n --wui-purple-10: #9a09c9;\n --wui-color-bg-fill-hover-purple: var(--wui-purple-10);\n --wui-color-border-secondary-hover-purple: var(--wui-purple-10);\n --wui-purple-11: #9b0bca;\n --wui-color-bg-fill-active-purple: var(--wui-purple-11);\n --wui-color-border-secondary-active-purple: var(--wui-purple-11);\n --wui-color-icon-purple: var(--wui-purple-11);\n --wui-color-text-link-purple: var(--wui-purple-11);\n --wui-color-text-button-purple: var(--wui-purple-11);\n --wui-color-text-secondary-purple: var(--wui-purple-11);\n --wui-purple-12: #550072;\n --wui-color-text-purple: var(--wui-purple-12);\n --wui-purple-surface: #fdf5ffcc;\n --wui-purple-contrast: #fff;\n --wui-color-icon-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-text-on-fill-purple: var(--wui-purple-contrast);\n --wui-purple-alpha-1: #aa00ff03;\n --wui-purple-alpha-2: #c000ff08;\n --wui-purple-alpha-3: #cf00ff14;\n --wui-purple-alpha-4: #c300ff21;\n --wui-purple-alpha-5: #bc00ff30;\n --wui-purple-alpha-6: #ae00ff42;\n --wui-purple-alpha-7: #a801f759;\n --wui-purple-alpha-8: #a101ef7a;\n --wui-purple-alpha-9: #a600deed;\n --wui-purple-alpha-10: #9600c7f5;\n --wui-purple-alpha-11: #9700c8f5;\n --wui-purple-alpha-12: #550072;\n --wui-green-1: #fbfefa;\n --wui-green-2: #f5fbf4;\n --wui-color-bg-surface-green: var(--wui-green-2);\n --wui-green-3: #e7f8e5;\n --wui-color-bg-surface-hover-green: var(--wui-green-3);\n --wui-color-bg-surface-secondary-green: var(--wui-green-3);\n --wui-green-4: #d8f2d4;\n --wui-color-bg-surface-active-green: var(--wui-green-4);\n --wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);\n --wui-green-5: #c6ebc0;\n --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);\n --wui-color-bg-surface-tertiary-green: var(--wui-green-5);\n --wui-green-6: #afe0a6;\n --wui-color-border-green: var(--wui-green-6);\n --wui-green-7: #8fd185;\n --wui-green-8: #5fbd51;\n --wui-color-border-hover-green: var(--wui-green-8);\n --wui-color-border-secondary-green: var(--wui-green-8);\n --wui-green-9: #268713;\n --wui-color-bg-fill-green: var(--wui-green-9);\n --wui-color-border-active-green: var(--wui-green-9);\n --wui-color-focus-ring-green: var(--wui-green-9);\n --wui-green-10: #117900;\n --wui-color-bg-fill-hover-green: var(--wui-green-10);\n --wui-color-border-secondary-hover-green: var(--wui-green-10);\n --wui-color-text-secondary-green: var(--wui-green-10);\n --wui-green-11: #1e8106;\n --wui-color-bg-fill-active-green: var(--wui-green-11);\n --wui-color-border-secondary-active-green: var(--wui-green-11);\n --wui-color-icon-green: var(--wui-green-11);\n --wui-color-text-button-green: var(--wui-green-11);\n --wui-color-text-link-green: var(--wui-green-11);\n --wui-green-12: #1e3d19;\n --wui-color-text-green: var(--wui-green-12);\n --wui-green-surface: #f3faf1cc;\n --wui-green-contrast: #fff;\n --wui-color-icon-on-fill-green: var(--wui-green-contrast);\n --wui-color-text-on-fill-green: var(--wui-green-contrast);\n --wui-green-alpha-1: #33cc0005;\n --wui-green-alpha-2: #18a3000b;\n --wui-green-alpha-3: #14bb001a;\n --wui-green-alpha-4: #18b2012b;\n --wui-green-alpha-5: #19af003f;\n --wui-green-alpha-6: #1aa70059;\n --wui-green-alpha-7: #159f017a;\n --wui-green-alpha-8: #189f00b0;\n --wui-green-alpha-9: #159f00ae;\n --wui-green-alpha-10: #157d00ec;\n --wui-green-alpha-11: #117900;\n --wui-green-alpha-12: #197e00f9;\n --wui-pink-1: #fffcfd;\n --wui-pink-2: #fff7fa;\n --wui-color-bg-surface-pink: var(--wui-pink-2);\n --wui-pink-3: #ffe8f3;\n --wui-color-bg-surface-hover-pink: var(--wui-pink-3);\n --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);\n --wui-pink-4: #ffdaeb;\n --wui-color-bg-surface-active-pink: var(--wui-pink-4);\n --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);\n --wui-pink-5: #fdcbe2;\n --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);\n --wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);\n --wui-pink-6: #f7bcd8;\n --wui-color-border-pink: var(--wui-pink-6);\n --wui-pink-7: #efa8ca;\n --wui-pink-8: #e68eba;\n --wui-color-border-hover-pink: var(--wui-pink-8);\n --wui-color-border-secondary-pink: var(--wui-pink-8);\n --wui-pink-9: #ff40b3;\n --wui-color-bg-fill-pink: var(--wui-pink-9);\n --wui-color-border-active-pink: var(--wui-pink-9);\n --wui-color-focus-ring-pink: var(--wui-pink-9);\n --wui-color-notification-pill-color: var(--wui-pink-9);\n --wui-pink-10: #f12fa7;\n --wui-color-bg-fill-hover-pink: var(--wui-pink-10);\n --wui-color-border-secondary-hover-pink: var(--wui-pink-10);\n --wui-color-text-secondary-pink: var(--wui-pink-10);\n --wui-pink-11: #cd0089;\n --wui-color-bg-fill-active-pink: var(--wui-pink-11);\n --wui-color-border-secondary-active-pink: var(--wui-pink-11);\n --wui-color-icon-pink: var(--wui-pink-11);\n --wui-color-text-link-pink: var(--wui-pink-11);\n --wui-color-text-button-pink: var(--wui-pink-11);\n --wui-pink-12: #680445;\n --wui-color-text-pink: var(--wui-pink-12);\n --wui-pink-surface: #fff5f9cc;\n --wui-pink-contrast: #fff;\n --wui-color-icon-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-text-on-fill-pink: var(--wui-pink-contrast);\n --wui-pink-alpha-1: #ff005503;\n --wui-pink-alpha-2: #ff006008;\n --wui-pink-alpha-3: #ff007a17;\n --wui-pink-alpha-4: #ff007626;\n --wui-pink-alpha-5: #f6007133;\n --wui-pink-alpha-6: #e1006b42;\n --wui-pink-alpha-7: #d1006457;\n --wui-pink-alpha-8: #c7006470;\n --wui-pink-alpha-9: #ff009abf;\n --wui-pink-alpha-10: #ee0093d1;\n --wui-pink-alpha-11: #cd0089;\n --wui-pink-alpha-12: #660042fa;\n --wui-red-1: #fffcfc;\n --wui-red-2: #fff7f7;\n --wui-red-3: #ffe9e9;\n --wui-red-4: #ffd9d9;\n --wui-red-5: #ffcaca;\n --wui-red-6: #ffbaba;\n --wui-red-7: #fca5a6;\n --wui-red-8: #f5898c;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f10845;\n --wui-red-11: #db0035;\n --wui-red-12: #6d021a;\n --wui-red-surface: #fff5f5cc;\n --wui-red-contrast: #fff;\n --wui-red-alpha-1: #ff000003;\n --wui-red-alpha-2: #ff000008;\n --wui-red-alpha-3: #ff000017;\n --wui-red-alpha-4: #ff000026;\n --wui-red-alpha-5: #ff000036;\n --wui-red-alpha-6: #ff000045;\n --wui-red-alpha-7: #f7010359;\n --wui-red-alpha-8: #ea000775;\n --wui-red-alpha-9: #ff002ed4;\n --wui-red-alpha-10: #f1003ff7;\n --wui-red-alpha-11: #db0035;\n --wui-red-alpha-12: #6c0018fc;\n --wui-yellow-1: #fdfdf8;\n --wui-yellow-2: #fbfcea;\n --wui-color-bg-surface-yellow: var(--wui-yellow-2);\n --wui-yellow-3: #f6fbb8;\n --wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);\n --wui-yellow-4: #f0f491;\n --wui-color-bg-surface-active-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);\n --wui-yellow-5: #e7eb6d;\n --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);\n --wui-yellow-6: #d8dd5d;\n --wui-color-border-yellow: var(--wui-yellow-6);\n --wui-yellow-7: #c8cc52;\n --wui-yellow-8: #b3b600;\n --wui-color-border-hover-yellow: var(--wui-yellow-8);\n --wui-color-border-secondary-yellow: var(--wui-yellow-8);\n --wui-yellow-9: #bcbf19;\n --wui-color-bg-fill-yellow: var(--wui-yellow-9);\n --wui-color-border-active-yellow: var(--wui-yellow-9);\n --wui-color-focus-ring-yellow: var(--wui-yellow-9);\n --wui-yellow-10: #b1b400;\n --wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);\n --wui-color-border-secondary-hover-yellow: var(--wui-yellow-10);\n --wui-color-text-secondary-yellow: var(--wui-yellow-10);\n --wui-yellow-11: #7a7b00;\n --wui-color-bg-fill-active-yellow: var(--wui-yellow-11);\n --wui-color-border-secondary-active-yellow: var(--wui-yellow-11);\n --wui-color-icon-yellow: var(--wui-yellow-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\n --wui-color-text-yellow: var(--wui-yellow-11);\n --wui-yellow-12: #3e3f14;\n --wui-color-text-button-yellow: var(--wui-yellow-12);\n --wui-yellow-surface: #fafbe5cc;\n --wui-yellow-contrast: #22230b;\n --wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-yellow-alpha-1: #b7b70008;\n --wui-yellow-alpha-2: #cfdb0014;\n --wui-yellow-alpha-3: #dff10047;\n --wui-yellow-alpha-4: #dde6006e;\n --wui-yellow-alpha-5: #d5dc0091;\n --wui-yellow-alpha-6: #c2ca00a3;\n --wui-yellow-alpha-7: #aeb400ad;\n --wui-yellow-alpha-8: #b3b600;\n --wui-yellow-alpha-9: #b5b800e5;\n --wui-yellow-alpha-10: #b1b400;\n --wui-yellow-alpha-11: #7a7b00;\n --wui-yellow-alpha-12: #2e2f00eb;\n --wui-orange-1: #fffcfb;\n --wui-orange-2: #fff7f5;\n --wui-color-bg-surface-orange: var(--wui-orange-2);\n --wui-orange-3: #ffebe6;\n --wui-color-bg-surface-hover-orange: var(--wui-orange-3);\n --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);\n --wui-orange-4: #ffdbce;\n --wui-color-bg-surface-active-orange: var(--wui-orange-4);\n --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);\n --wui-orange-5: #fcbfcb;\n --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);\n --wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);\n --wui-orange-6: #ffbdaa;\n --wui-color-border-orange: var(--wui-orange-6);\n --wui-orange-7: #f4aa95;\n --wui-orange-8: #ea9178;\n --wui-color-border-hover-orange: var(--wui-orange-8);\n --wui-color-border-secondary-orange: var(--wui-orange-8);\n --wui-orange-9: #d1451a;\n --wui-color-bg-fill-orange: var(--wui-orange-9);\n --wui-color-border-active-orange: var(--wui-orange-9);\n --wui-color-focus-ring-orange: var(--wui-orange-9);\n --wui-orange-10: #c23600;\n --wui-color-bg-fill-hover-orange: var(--wui-orange-10);\n --wui-color-border-secondary-hover-orange: var(--wui-orange-10);\n --wui-color-text-secondary-orange: var(--wui-orange-10);\n --wui-orange-11: #ce4216;\n --wui-color-bg-fill-active-orange: var(--wui-orange-11);\n --wui-color-border-secondary-active-orange: var(--wui-orange-11);\n --wui-color-icon-orange: var(--wui-orange-11);\n --wui-color-text-link-orange: var(--wui-orange-11);\n --wui-color-text-button-orange: var(--wui-orange-11);\n --wui-orange-12: #592b1e;\n --wui-color-text-orange: var(--wui-orange-12);\n --wui-orange-surface: #fff5f3cc;\n --wui-orange-contrast: #fff;\n --wui-color-icon-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-text-on-fill-orange: var(--wui-orange-contrast);\n --wui-orange-alpha-1: #ff400005;\n --wui-orange-alpha-2: #ff33000a;\n --wui-orange-alpha-3: #ff33001a;\n --wui-orange-alpha-4: #ff440030;\n --wui-orange-alpha-5: #ff400045;\n --wui-orange-alpha-6: #ff390054;\n --wui-orange-alpha-7: #e533016b;\n --wui-orange-alpha-8: #d8300087;\n --wui-orange-alpha-9: #cc3000e5;\n --wui-orange-alpha-10: #c23600;\n --wui-orange-alpha-11: #c93000e8;\n --wui-orange-alpha-12: #430f00e0;\n --wui-error-1: #fffcfc;\n --wui-error-2: #fff7f7;\n --wui-color-bg-surface-error: var(--wui-error-2);\n --wui-error-3: #ffebea;\n --wui-color-bg-surface-hover-error: var(--wui-error-3);\n --wui-color-bg-surface-secondary-error: var(--wui-error-3);\n --wui-error-4: #ffdcd9;\n --wui-color-bg-surface-active-error: var(--wui-error-4);\n --wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);\n --wui-error-5: #ffcdca;\n --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);\n --wui-color-bg-surface-tertiary-error: var(--wui-error-5);\n --wui-error-6: #febdb9;\n --wui-color-border-error: var(--wui-error-6);\n --wui-error-7: #f5a9a5;\n --wui-error-8: #eb8f8b;\n --wui-color-border-secondary-error: var(--wui-error-8);\n --wui-error-9: #e5484d;\n --wui-color-bg-fill-error: var(--wui-error-9);\n --wui-color-border-active-error: var(--wui-error-9);\n --wui-color-focus-ring-error: var(--wui-error-9);\n --wui-color-invalid-indicator: var(--wui-error-9);\n --wui-error-10: #d73840;\n --wui-color-bg-fill-hover-error: var(--wui-error-10);\n --wui-color-border-secondary-hover-error: var(--wui-error-10);\n --wui-error-11: #cc2e39;\n --wui-color-bg-fill-active-error: var(--wui-error-11);\n --wui-color-border-secondary-active-error: var(--wui-error-11);\n --wui-color-icon-error: var(--wui-error-11);\n --wui-color-text-error: var(--wui-error-11);\n --wui-color-text-button-error: var(--wui-error-11);\n --wui-color-text-link-error: var(--wui-error-11);\n --wui-color-text-secondary-error: var(--wui-error-11);\n --wui-error-12: #64181b;\n --wui-error-surface: #fff5f5cc;\n --wui-error-contrast: #fff;\n --wui-color-icon-on-fill-error: var(--wui-error-contrast);\n --wui-color-text-on-fill-error: var(--wui-error-contrast);\n --wui-error-alpha-1: #ff000003;\n --wui-error-alpha-2: #ff000008;\n --wui-error-alpha-3: #ff0d0014;\n --wui-error-alpha-4: #ff150026;\n --wui-error-alpha-5: #ff0f0036;\n --wui-error-alpha-6: #fc0f0045;\n --wui-error-alpha-7: #e30c0159;\n --wui-error-alpha-8: #d4090073;\n --wui-error-alpha-9: #db0007b8;\n --wui-error-alpha-10: #cc000ac7;\n --wui-error-alpha-11: #c1000ed1;\n --wui-error-alpha-12: #540003e8;\n --wui-success-1: #fbfefc;\n --wui-success-2: #f4fbf7;\n --wui-color-bg-surface-success: var(--wui-success-2);\n --wui-success-3: #e5f6eb;\n --wui-color-bg-surface-hover-success: var(--wui-success-3);\n --wui-color-bg-surface-secondary-success: var(--wui-success-3);\n --wui-success-4: #d6f1df;\n --wui-color-bg-surface-active-success: var(--wui-success-4);\n --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);\n --wui-success-5: #c4e8d1;\n --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);\n --wui-color-bg-surface-tertiary-success: var(--wui-success-5);\n --wui-success-6: #adddc0;\n --wui-color-border-success: var(--wui-success-6);\n --wui-success-7: #8fcea8;\n --wui-success-8: #60b887;\n --wui-color-border-hover-success: var(--wui-success-8);\n --wui-color-border-secondary-success: var(--wui-success-8);\n --wui-success-9: #30a46c;\n --wui-color-bg-fill-success: var(--wui-success-9);\n --wui-color-border-active-success: var(--wui-success-9);\n --wui-color-text-link-success: var(--wui-success-9);\n --wui-color-focus-ring-success: var(--wui-success-9);\n --wui-success-10: #289662;\n --wui-color-bg-fill-hover-success: var(--wui-success-10);\n --wui-color-border-secondary-hover-success: var(--wui-success-10);\n --wui-success-11: #00814c;\n --wui-color-bg-fill-active-success: var(--wui-success-11);\n --wui-color-border-secondary-active-success: var(--wui-success-11);\n --wui-color-icon-success: var(--wui-success-11);\n --wui-color-text-secondary-success: var(--wui-success-11);\n --wui-color-text-button-success: var(--wui-success-11);\n --wui-success-12: #1d3b2a;\n --wui-color-text-success: var(--wui-success-12);\n --wui-success-surface: #f1faf5cc;\n --wui-success-contrast: #fff;\n --wui-color-icon-on-fill-success: var(--wui-success-contrast);\n --wui-color-text-on-fill-success: var(--wui-success-contrast);\n --wui-success-alpha-1: #00c04005;\n --wui-success-alpha-2: #00a3460a;\n --wui-success-alpha-3: #00a73b1a;\n --wui-success-alpha-4: #00a83829;\n --wui-success-alpha-5: #019c393b;\n --wui-success-alpha-6: #00963c52;\n --wui-success-alpha-7: #00903970;\n --wui-success-alpha-8: #008d3f9e;\n --wui-success-alpha-9: #008f4acf;\n --wui-success-alpha-10: #008345d6;\n --wui-success-alpha-11: #00814c;\n --wui-success-alpha-12: #00220fe3;\n --wui-warning-1: #fdfdfa;\n --wui-warning-2: #fefceb;\n --wui-color-bg-surface-warning: var(--wui-warning-2);\n --wui-color-icon-on-fill-warning: var(--wui-warning-2);\n --wui-warning-3: #fff9bf;\n --wui-color-bg-surface-hover-warning: var(--wui-warning-3);\n --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);\n --wui-warning-4: #fef29f;\n --wui-color-bg-surface-active-warning: var(--wui-warning-4);\n --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);\n --wui-warning-5: #f8e981;\n --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);\n --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);\n --wui-warning-6: #e9da79;\n --wui-color-border-warning: var(--wui-warning-6);\n --wui-warning-7: #d8cb75;\n --wui-warning-8: #c4b54f;\n --wui-color-border-hover-warning: var(--wui-warning-8);\n --wui-color-border-secondary-warning: var(--wui-warning-8);\n --wui-warning-9: #ffe62a;\n --wui-color-bg-fill-warning: var(--wui-warning-9);\n --wui-color-border-active-warning: var(--wui-warning-9);\n --wui-color-focus-ring-warning: var(--wui-warning-9);\n --wui-warning-10: #f3dd45;\n --wui-color-bg-fill-hover-warning: var(--wui-warning-10);\n --wui-color-border-secondary-hover-warning: var(--wui-warning-10);\n --wui-warning-11: #897a00;\n --wui-color-bg-fill-active-warning: var(--wui-warning-11);\n --wui-color-border-secondary-active-warning: var(--wui-warning-11);\n --wui-color-icon-warning: var(--wui-warning-11);\n --wui-color-text-link-warning: var(--wui-warning-11);\n --wui-color-text-secondary-warning: var(--wui-warning-11);\n --wui-color-text-button-warning: var(--wui-warning-11);\n --wui-warning-12: #413d23;\n --wui-color-text-warning: var(--wui-warning-12);\n --wui-warning-surface: #fefbe6cc;\n --wui-warning-contrast: #262209;\n --wui-color-text-on-fill-warning: var(--wui-warning-contrast);\n --wui-warning-alpha-1: #99990005;\n --wui-warning-alpha-2: #f3d90014;\n --wui-warning-alpha-3: #ffe80040;\n --wui-warning-alpha-4: #fddd0061;\n --wui-warning-alpha-5: #f1d3007d;\n --wui-warning-alpha-6: #d6b90087;\n --wui-warning-alpha-7: #b79f008a;\n --wui-warning-alpha-8: #aa9400b0;\n --wui-warning-alpha-9: #ffe100d6;\n --wui-warning-alpha-10: #efd100ba;\n --wui-warning-alpha-11: #897a00;\n --wui-warning-alpha-12: #231e00db;\n --wui-gray-1: #fcfcfd;\n --wui-color-bg-surface: var(--wui-color-surface-token);\n --wui-color-base-1: var(--wui-gray-1);\n --wui-color-surface-token: var(--wui-gray-1);\n --wui-gray-2: #f9f9fb;\n --wui-color-base-2: var(--wui-gray-2);\n --wui-gray-3: #f0f0f3;\n --wui-color-bg-surface-hover: var(--wui-color-base-3);\n --wui-color-bg-surface-secondary: var(--wui-color-base-3);\n --wui-color-base-3: var(--wui-gray-3);\n --wui-gray-4: #e8e8ec;\n --wui-color-bg-surface-active: var(--wui-color-base-4);\n --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n --wui-color-border-disabled: var(--wui-gray-4);\n --wui-color-base-4: var(--wui-gray-4);\n --wui-gray-5: #e0e0e5;\n --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n --wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n --wui-color-base-5: var(--wui-gray-5);\n --wui-gray-6: #d9d9de;\n --wui-color-focus-ring-disabled: var(--wui-gray-6);\n --wui-color-base-6: var(--wui-gray-6);\n --wui-color-border: var(--wui-color-base-6);\n --wui-gray-7: #ceced5;\n --wui-color-base-7: var(--wui-gray-7);\n --wui-gray-8: #bbbbc4;\n --wui-color-icon-disabled: var(--wui-gray-8);\n --wui-color-base-8: var(--wui-gray-8);\n --wui-color-border-hover: var(--wui-color-base-8);\n --wui-color-border-secondary: var(--wui-color-base-8);\n --wui-gray-9: #8d8d95;\n --wui-color-base-9: var(--wui-gray-9);\n --wui-color-border-active: var(--wui-color-base-9);\n --wui-gray-10: #82828a;\n --wui-color-text-disabled: var(--wui-gray-10);\n --wui-color-base-10: var(--wui-gray-10);\n --wui-color-border-secondary-hover: var(--wui-color-base-10);\n --wui-gray-11: #64646a;\n --wui-color-base-11: var(--wui-gray-11);\n --wui-color-border-secondary-active: var(--wui-color-base-11);\n --wui-color-icon: var(--wui-color-base-11);\n --wui-color-text-secondary: var(--wui-color-base-11);\n --wui-gray-12: #202024;\n --wui-color-base-12: var(--wui-gray-12);\n --wui-color-text-button-token: var(--wui-gray-12);\n --wui-color-text: var(--wui-color-base-12);\n --wui-color-text-button: var(--wui-color-text-button-token);\n --wui-gray-surface: #fffc;\n --wui-gray-contrast: #fff;\n --wui-color-base-contrast: var(--wui-gray-contrast);\n --wui-gray-alpha-1: #00005503;\n --wui-gray-alpha-2: #00005505;\n --wui-gray-alpha-3: #0000330f;\n --wui-gray-alpha-4: #00002d17;\n --wui-gray-alpha-5: #00002a1f;\n --wui-gray-alpha-6: #00002226;\n --wui-gray-alpha-7: #00002530;\n --wui-gray-alpha-8: #00002245;\n --wui-gray-alpha-9: #00001273;\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-gray-alpha-10: #0000117d;\n --wui-gray-alpha-11: #00000a9c;\n --wui-gray-alpha-12: #000005de;\n --wui-vendor-hubspot-1: #fefcfb;\n --wui-vendor-hubspot-2: #fff5f2;\n --wui-vendor-hubspot-3: #ffe9e2;\n --wui-vendor-hubspot-4: #ffd7c9;\n --wui-vendor-hubspot-5: #ffc8b7;\n --wui-vendor-hubspot-6: #ffb8a3;\n --wui-vendor-hubspot-7: #ffa48d;\n --wui-vendor-hubspot-8: #f68a70;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f24d25;\n --wui-vendor-hubspot-11: #d93a0f;\n --wui-vendor-hubspot-12: #5b2a1e;\n --wui-vendor-hubspot-surface: #fff3efcc;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-marketo-1: #fdfdff;\n --wui-vendor-marketo-2: #f7f8ff;\n --wui-vendor-marketo-3: #eff2ff;\n --wui-vendor-marketo-4: #e3e8ff;\n --wui-vendor-marketo-5: #d5ddff;\n --wui-vendor-marketo-6: #c5cfff;\n --wui-vendor-marketo-7: #b0bcfa;\n --wui-vendor-marketo-8: #93a0f2;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #4f55c7;\n --wui-vendor-marketo-12: #252a62;\n --wui-vendor-marketo-surface: #f5f6ffcc;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-pardot-1: #fafdff;\n --wui-vendor-pardot-2: #f3fafe;\n --wui-vendor-pardot-3: #e1f5ff;\n --wui-vendor-pardot-4: #ceeeff;\n --wui-vendor-pardot-5: #bae5ff;\n --wui-vendor-pardot-6: #a4d9fa;\n --wui-vendor-pardot-7: #85c9f1;\n --wui-vendor-pardot-8: #4fb3e8;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0094cf;\n --wui-vendor-pardot-11: #0079b5;\n --wui-vendor-pardot-12: #0c3a51;\n --wui-vendor-pardot-surface: #f0f9fecc;\n --wui-vendor-pardot-contrast: #fff;\n --wui-color-bg-fill-white: #fff;\n --wui-color-bg-tooltip: #242528;\n --wui-color-bg-surface-disabled: #f0f0f3;\n --wui-color-bg-app: #fff;\n --wui-color-segmented-control-checked-background: var(--wui-color-bg-app);\n --wui-color-drop-shadow: #1f33991a;\n --wui-elevation-01: 0 4px 8px 0 var(--wui-color-drop-shadow);\n --wui-elevation-02: 0 4px 24px 0 var(--wui-color-drop-shadow);\n --wui-color-border-selected: #b8d1ff;\n --wui-color-border-hover-selected: #81a4fe;\n --wui-color-border-active-selected: #2949e5;\n}\n"}
178
- :root,
179
- [data-wui-theme='true'] {
180
- ${"/*\n * Typography weight overlay\n *\n * Reintroduces the var-with-fallback override hooks for heading weights. These\n * vars are part of the @wistia/ui public surface (see CustomizableThemeWrapper)\n * and consumers override them at any cascade level. DTCG aliases compile to a\n * single resolved value, so the fallback pattern can't live in the generated\n * tokens.css.\n *\n * Order matters: this file MUST follow the generated tokens.css so its\n * declarations win the cascade, and MUST precede typographyLegacyAliases.css so\n * the override hook propagates through any legacy `*-weight` alias as well.\n */\n--wui-typography-heading-hero-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-1-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-2-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n);\n--wui-typography-heading-3-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-4-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-5-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n--wui-typography-heading-6-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n);\n"}
181
- ${"/*\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--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"}
182
- }
183
- `}
184
- ${css`
185
- [data-click-region] {
186
- position: relative;
187
- cursor: pointer;
188
- z-index: 1;
189
- }
190
-
191
- [data-click-region] a:not([data-click-region-target-link]),
192
- [data-click-region] button:not([data-click-region-target-button]) {
193
- z-index: 2;
194
- }
195
-
196
- [data-click-region-target-link]::before {
197
- content: '';
198
- cursor: inherit;
199
- display: block;
200
- position: absolute;
201
- top: 0;
202
- left: 0;
203
- z-index: 0;
204
- width: 100%;
205
- height: 100%;
206
- }
207
- `}
211
+ ${designTokens}
212
+ ${clickRegionGlobalStyles}
208
213
  `;
209
214
  //#endregion
210
- //#region src/providers/AriaLiveProvider/AriaLiveContext.tsx
211
- const AriaLiveContext = createContext(void 0);
212
- //#endregion
213
215
  //#region src/css/visuallyHiddenStyle.tsx
214
216
  const visuallyHiddenStyle = {
215
217
  border: "0",
@@ -224,6 +226,9 @@ const visuallyHiddenStyle = {
224
226
  width: "1px"
225
227
  };
226
228
  //#endregion
229
+ //#region src/providers/AriaLiveProvider/AriaLiveContext.tsx
230
+ const AriaLiveContext = createContext(void 0);
231
+ //#endregion
227
232
  //#region src/providers/AriaLiveProvider/AriaLiveProvider.tsx
228
233
  const debugStyle = {
229
234
  position: "absolute",
@@ -265,6 +270,19 @@ const AriaLiveProvider = ({ children, debug = false }) => {
265
270
  });
266
271
  };
267
272
  //#endregion
273
+ //#region src/providers/UIProvider/ToastScopeContext.tsx
274
+ /**
275
+ * Carries the toast scope id from a `UIProvider` down to `useToast` and
276
+ * `ToastProvider`. When set, `useToast` tags every toast with this id as
277
+ * sonner's `toasterId`, and `ToastProvider` renders a `Toaster` scoped to the
278
+ * same id — so toasts created within one `UIProvider` only render in that
279
+ * provider's `Toaster`.
280
+ *
281
+ * `undefined` (the default) preserves sonner's global behavior: the `Toaster`
282
+ * is unscoped and renders every toast that has no `toasterId`.
283
+ */
284
+ const ToastScopeContext = createContext(void 0);
285
+ //#endregion
268
286
  //#region src/providers/UIProvider/ToastProvider.tsx
269
287
  const toastConfig = {
270
288
  expand: false,
@@ -272,19 +290,28 @@ const toastConfig = {
272
290
  position: "bottom-left",
273
291
  visibleToasts: 3
274
292
  };
275
- const ToastProvider = () => /* @__PURE__ */ jsx(Toaster, { ...toastConfig });
293
+ const ToastProvider = () => {
294
+ const toasterId = useContext(ToastScopeContext);
295
+ return /* @__PURE__ */ jsx(Toaster, {
296
+ ...toastConfig,
297
+ ...toasterId !== void 0 && toasterId !== "" && { id: toasterId }
298
+ });
299
+ };
276
300
  //#endregion
277
301
  //#region src/providers/UIProvider/UIProvider.tsx
278
302
  const UIProviderNestingContext = createContext(false);
279
- const UIProvider = ({ children }) => {
303
+ const UIProvider = ({ children, id }) => {
280
304
  if (useContext(UIProviderNestingContext)) return /* @__PURE__ */ jsx(Fragment, { children });
281
305
  return /* @__PURE__ */ jsx(UIProviderNestingContext, {
282
306
  value: true,
283
- children: /* @__PURE__ */ jsx(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(Tooltip$1.Provider, { children: [
284
- /* @__PURE__ */ jsx(GlobalStyle, {}),
285
- children,
286
- /* @__PURE__ */ jsx(ToastProvider, {})
287
- ] }) })
307
+ children: /* @__PURE__ */ jsx(ToastScopeContext, {
308
+ value: id,
309
+ children: /* @__PURE__ */ jsx(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(Tooltip$1.Provider, { children: [
310
+ /* @__PURE__ */ jsx(GlobalStyle, {}),
311
+ children,
312
+ /* @__PURE__ */ jsx(ToastProvider, {})
313
+ ] }) })
314
+ })
288
315
  });
289
316
  };
290
317
  //#endregion
@@ -471,6 +498,13 @@ const dateTimeToDate = (dateTime) => {
471
498
  return null;
472
499
  };
473
500
  //#endregion
501
+ //#region src/helpers/dateTime/dateTimeToISO.ts
502
+ /**
503
+ * @param {Partial<WistiaDateTimeObject>} dateTime - a dateTime object
504
+ * @returns {string | null} - string with the ISO-8601 string or null
505
+ */
506
+ const dateTimeToISO = (dateTime) => dateTimeToDate(dateTime)?.toISOString() ?? null;
507
+ //#endregion
474
508
  //#region src/helpers/dateTime/dateToDateTime.ts
475
509
  /**
476
510
  * @typedef {Object} WistiaDateTimeObject
@@ -495,13 +529,6 @@ const dateToDateTime = (date) => {
495
529
  };
496
530
  };
497
531
  //#endregion
498
- //#region src/helpers/dateTime/dateTimeToISO.ts
499
- /**
500
- * @param {Partial<WistiaDateTimeObject>} dateTime - a dateTime object
501
- * @returns {string | null} - string with the ISO-8601 string or null
502
- */
503
- const dateTimeToISO = (dateTime) => dateTimeToDate(dateTime)?.toISOString() ?? null;
504
- //#endregion
505
532
  //#region src/helpers/dateTime/dateTimeRounded.ts
506
533
  /**
507
534
  * @param {Date} dateTime - a dateTime object
@@ -775,9 +802,9 @@ const getLocalDateParts = (date) => {
775
802
  const dayPart = parts.find((part) => part.type === "day");
776
803
  if (isNil(yearPart) || isNil(monthPart) || isNil(dayPart)) throw new Error("Failed to parse date parts");
777
804
  return {
778
- year: Number.parseInt(yearPart.value, 10),
779
- month: Number.parseInt(monthPart.value, 10),
780
- day: Number.parseInt(dayPart.value, 10)
805
+ year: Math.trunc(Number(yearPart.value)),
806
+ month: Math.trunc(Number(monthPart.value)),
807
+ day: Math.trunc(Number(dayPart.value))
781
808
  };
782
809
  };
783
810
  //#endregion
@@ -1281,7 +1308,7 @@ const isVisibleElement = (element) => {
1281
1308
  };
1282
1309
  const getElementTabIndex = (element) => {
1283
1310
  const tabIndex = element.getAttribute("tabindex");
1284
- return Number.parseInt(tabIndex ?? void 0, 10);
1311
+ return Math.trunc(Number(tabIndex ?? void 0));
1285
1312
  };
1286
1313
  const isTabIndexNaN = (element) => {
1287
1314
  const tabIndex = getElementTabIndex(element);
@@ -1710,53 +1737,53 @@ const Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ jsx(Ellipsis
1710
1737
  });
1711
1738
  Ellipsis.displayName = "Ellipsis_UI";
1712
1739
  //#endregion
1713
- //#region src/css/designTokens/generated/schemes/standard.css
1714
- var standard_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, standard permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-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-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-gray-7);\n--wui-color-base-8: var(--wui-gray-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-gray-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-gray-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-gray-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-gray-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-gray-contrast);\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-text-link-token: var(--wui-color-accent-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-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-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-gray-1);\n--wui-color-text-button-token: var(--wui-gray-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1715
- //#endregion
1716
1740
  //#region src/css/designTokens/generated/schemes/blue.css
1717
- var blue_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, blue permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\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-text-link-token: var(--wui-blue-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-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-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1741
+ var blue_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, blue permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-blue-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1742
+ //#endregion
1743
+ //#region src/css/designTokens/generated/schemes/error.css
1744
+ var error_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, error permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-error-1);\n--wui-color-accent-2: var(--wui-error-2);\n--wui-color-accent-3: var(--wui-error-3);\n--wui-color-accent-4: var(--wui-error-4);\n--wui-color-accent-5: var(--wui-error-5);\n--wui-color-accent-6: var(--wui-error-6);\n--wui-color-accent-7: var(--wui-error-7);\n--wui-color-accent-8: var(--wui-error-8);\n--wui-color-accent-9: var(--wui-error-9);\n--wui-color-accent-10: var(--wui-error-10);\n--wui-color-accent-11: var(--wui-error-11);\n--wui-color-accent-12: var(--wui-error-12);\n--wui-color-accent-contrast: var(--wui-error-contrast);\n--wui-color-base-1: var(--wui-error-1);\n--wui-color-base-2: var(--wui-error-2);\n--wui-color-base-3: var(--wui-error-3);\n--wui-color-base-4: var(--wui-error-4);\n--wui-color-base-5: var(--wui-error-5);\n--wui-color-base-6: var(--wui-error-6);\n--wui-color-base-7: var(--wui-error-7);\n--wui-color-base-8: var(--wui-error-8);\n--wui-color-base-9: var(--wui-error-9);\n--wui-color-base-10: var(--wui-error-10);\n--wui-color-base-11: var(--wui-error-11);\n--wui-color-base-12: var(--wui-error-12);\n--wui-color-base-contrast: var(--wui-error-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-error-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-error-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-error-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1718
1745
  //#endregion
1719
1746
  //#region src/css/designTokens/generated/schemes/green.css
1720
- var green_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, green permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-green-1);\n--wui-color-base-2: var(--wui-green-2);\n--wui-color-base-3: var(--wui-green-3);\n--wui-color-base-4: var(--wui-green-4);\n--wui-color-base-5: var(--wui-green-5);\n--wui-color-base-6: var(--wui-green-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-green-7);\n--wui-color-base-8: var(--wui-green-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-green-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-green-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-green-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-green-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-green-contrast);\n--wui-color-accent-1: var(--wui-green-1);\n--wui-color-accent-2: var(--wui-green-2);\n--wui-color-accent-3: var(--wui-green-3);\n--wui-color-accent-4: var(--wui-green-4);\n--wui-color-accent-5: var(--wui-green-5);\n--wui-color-accent-6: var(--wui-green-6);\n--wui-color-accent-7: var(--wui-green-7);\n--wui-color-accent-8: var(--wui-green-8);\n--wui-color-accent-9: var(--wui-green-9);\n--wui-color-text-link-token: var(--wui-green-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-green-10);\n--wui-color-accent-11: var(--wui-green-11);\n--wui-color-accent-12: var(--wui-green-12);\n--wui-color-accent-contrast: var(--wui-green-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-green-2);\n--wui-color-text-button-token: var(--wui-green-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1747
+ var green_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, green permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-green-1);\n--wui-color-accent-2: var(--wui-green-2);\n--wui-color-accent-3: var(--wui-green-3);\n--wui-color-accent-4: var(--wui-green-4);\n--wui-color-accent-5: var(--wui-green-5);\n--wui-color-accent-6: var(--wui-green-6);\n--wui-color-accent-7: var(--wui-green-7);\n--wui-color-accent-8: var(--wui-green-8);\n--wui-color-accent-9: var(--wui-green-9);\n--wui-color-accent-10: var(--wui-green-10);\n--wui-color-accent-11: var(--wui-green-11);\n--wui-color-accent-12: var(--wui-green-12);\n--wui-color-accent-contrast: var(--wui-green-contrast);\n--wui-color-base-1: var(--wui-green-1);\n--wui-color-base-2: var(--wui-green-2);\n--wui-color-base-3: var(--wui-green-3);\n--wui-color-base-4: var(--wui-green-4);\n--wui-color-base-5: var(--wui-green-5);\n--wui-color-base-6: var(--wui-green-6);\n--wui-color-base-7: var(--wui-green-7);\n--wui-color-base-8: var(--wui-green-8);\n--wui-color-base-9: var(--wui-green-9);\n--wui-color-base-10: var(--wui-green-10);\n--wui-color-base-11: var(--wui-green-11);\n--wui-color-base-12: var(--wui-green-12);\n--wui-color-base-contrast: var(--wui-green-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-green-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-green-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-green-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1748
+ //#endregion
1749
+ //#region src/css/designTokens/generated/schemes/info.css
1750
+ var info_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, info permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-blue-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1751
+ //#endregion
1752
+ //#region src/css/designTokens/generated/schemes/nav.css
1753
+ var nav_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, nav permutation\n * ------------------------------------------- */\n--wui-color-bg-app: #1e3399;\n--wui-color-bg-fill: var(--wui-blue-1);\n--wui-color-bg-fill-active: #dcdfef;\n--wui-color-bg-fill-hover: #e7e9f4;\n--wui-color-bg-surface: #0000;\n--wui-color-bg-surface-active: #122271;\n--wui-color-bg-surface-disabled: #0000;\n--wui-color-bg-surface-hover: #15267b;\n--wui-color-bg-surface-secondary: #15267b;\n--wui-color-bg-surface-secondary-active: #101e67;\n--wui-color-bg-surface-secondary-hover: #122271;\n--wui-color-bg-surface-selected: var(--wui-color-bg-fill);\n--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);\n--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);\n--wui-color-bg-surface-tertiary: #0d1a5c;\n--wui-color-border: var(--wui-color-bg-fill);\n--wui-color-border-active: var(--wui-color-bg-fill-active);\n--wui-color-border-active-selected: #0000;\n--wui-color-border-hover: var(--wui-color-bg-fill-hover);\n--wui-color-border-hover-selected: #0000;\n--wui-color-border-secondary: #101e67;\n--wui-color-border-selected: #0000;\n--wui-color-focus-ring: var(--wui-blue-1);\n--wui-color-icon: var(--wui-blue-1);\n--wui-color-icon-disabled: var(--wui-blue-8);\n--wui-color-icon-on-fill: var(--wui-color-bg-app);\n--wui-color-icon-selected: var(--wui-color-bg-app);\n--wui-color-segmented-color-text-override: var(--wui-blue-9);\n--wui-color-text: var(--wui-blue-1);\n--wui-color-text-button: var(--wui-blue-1);\n--wui-color-text-disabled: var(--wui-blue-8);\n--wui-color-text-link: var(--wui-blue-4);\n--wui-color-text-on-fill: var(--wui-color-bg-app);\n--wui-color-text-secondary: var(--wui-blue-6);\n--wui-color-text-selected: var(--wui-color-bg-app);\n";
1721
1754
  //#endregion
1722
1755
  //#region src/css/designTokens/generated/schemes/orange.css
1723
- var orange_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, orange permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-orange-1);\n--wui-color-base-2: var(--wui-orange-2);\n--wui-color-base-3: var(--wui-orange-3);\n--wui-color-base-4: var(--wui-orange-4);\n--wui-color-base-5: var(--wui-orange-5);\n--wui-color-base-6: var(--wui-orange-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-orange-7);\n--wui-color-base-8: var(--wui-orange-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-orange-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-orange-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-orange-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-orange-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-orange-contrast);\n--wui-color-accent-1: var(--wui-orange-1);\n--wui-color-accent-2: var(--wui-orange-2);\n--wui-color-accent-3: var(--wui-orange-3);\n--wui-color-accent-4: var(--wui-orange-4);\n--wui-color-accent-5: var(--wui-orange-5);\n--wui-color-accent-6: var(--wui-orange-6);\n--wui-color-accent-7: var(--wui-orange-7);\n--wui-color-accent-8: var(--wui-orange-8);\n--wui-color-accent-9: var(--wui-orange-9);\n--wui-color-text-link-token: var(--wui-orange-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-orange-10);\n--wui-color-accent-11: var(--wui-orange-11);\n--wui-color-accent-12: var(--wui-orange-12);\n--wui-color-accent-contrast: var(--wui-orange-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-orange-2);\n--wui-color-text-button-token: var(--wui-orange-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1756
+ var orange_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, orange permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-orange-1);\n--wui-color-accent-2: var(--wui-orange-2);\n--wui-color-accent-3: var(--wui-orange-3);\n--wui-color-accent-4: var(--wui-orange-4);\n--wui-color-accent-5: var(--wui-orange-5);\n--wui-color-accent-6: var(--wui-orange-6);\n--wui-color-accent-7: var(--wui-orange-7);\n--wui-color-accent-8: var(--wui-orange-8);\n--wui-color-accent-9: var(--wui-orange-9);\n--wui-color-accent-10: var(--wui-orange-10);\n--wui-color-accent-11: var(--wui-orange-11);\n--wui-color-accent-12: var(--wui-orange-12);\n--wui-color-accent-contrast: var(--wui-orange-contrast);\n--wui-color-base-1: var(--wui-orange-1);\n--wui-color-base-2: var(--wui-orange-2);\n--wui-color-base-3: var(--wui-orange-3);\n--wui-color-base-4: var(--wui-orange-4);\n--wui-color-base-5: var(--wui-orange-5);\n--wui-color-base-6: var(--wui-orange-6);\n--wui-color-base-7: var(--wui-orange-7);\n--wui-color-base-8: var(--wui-orange-8);\n--wui-color-base-9: var(--wui-orange-9);\n--wui-color-base-10: var(--wui-orange-10);\n--wui-color-base-11: var(--wui-orange-11);\n--wui-color-base-12: var(--wui-orange-12);\n--wui-color-base-contrast: var(--wui-orange-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-orange-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-orange-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-orange-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1724
1757
  //#endregion
1725
1758
  //#region src/css/designTokens/generated/schemes/pink.css
1726
- var pink_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, pink permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-pink-1);\n--wui-color-base-2: var(--wui-pink-2);\n--wui-color-base-3: var(--wui-pink-3);\n--wui-color-base-4: var(--wui-pink-4);\n--wui-color-base-5: var(--wui-pink-5);\n--wui-color-base-6: var(--wui-pink-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-pink-7);\n--wui-color-base-8: var(--wui-pink-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-pink-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-pink-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-pink-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-pink-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-pink-contrast);\n--wui-color-accent-1: var(--wui-pink-1);\n--wui-color-accent-2: var(--wui-pink-2);\n--wui-color-accent-3: var(--wui-pink-3);\n--wui-color-accent-4: var(--wui-pink-4);\n--wui-color-accent-5: var(--wui-pink-5);\n--wui-color-accent-6: var(--wui-pink-6);\n--wui-color-accent-7: var(--wui-pink-7);\n--wui-color-accent-8: var(--wui-pink-8);\n--wui-color-accent-9: var(--wui-pink-9);\n--wui-color-text-link-token: var(--wui-pink-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-pink-10);\n--wui-color-accent-11: var(--wui-pink-11);\n--wui-color-accent-12: var(--wui-pink-12);\n--wui-color-accent-contrast: var(--wui-pink-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-pink-2);\n--wui-color-text-button-token: var(--wui-pink-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1759
+ var pink_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, pink permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-pink-1);\n--wui-color-accent-2: var(--wui-pink-2);\n--wui-color-accent-3: var(--wui-pink-3);\n--wui-color-accent-4: var(--wui-pink-4);\n--wui-color-accent-5: var(--wui-pink-5);\n--wui-color-accent-6: var(--wui-pink-6);\n--wui-color-accent-7: var(--wui-pink-7);\n--wui-color-accent-8: var(--wui-pink-8);\n--wui-color-accent-9: var(--wui-pink-9);\n--wui-color-accent-10: var(--wui-pink-10);\n--wui-color-accent-11: var(--wui-pink-11);\n--wui-color-accent-12: var(--wui-pink-12);\n--wui-color-accent-contrast: var(--wui-pink-contrast);\n--wui-color-base-1: var(--wui-pink-1);\n--wui-color-base-2: var(--wui-pink-2);\n--wui-color-base-3: var(--wui-pink-3);\n--wui-color-base-4: var(--wui-pink-4);\n--wui-color-base-5: var(--wui-pink-5);\n--wui-color-base-6: var(--wui-pink-6);\n--wui-color-base-7: var(--wui-pink-7);\n--wui-color-base-8: var(--wui-pink-8);\n--wui-color-base-9: var(--wui-pink-9);\n--wui-color-base-10: var(--wui-pink-10);\n--wui-color-base-11: var(--wui-pink-11);\n--wui-color-base-12: var(--wui-pink-12);\n--wui-color-base-contrast: var(--wui-pink-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-pink-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-pink-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-pink-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1727
1760
  //#endregion
1728
1761
  //#region src/css/designTokens/generated/schemes/purple.css
1729
- var purple_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, purple permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-purple-1);\n--wui-color-base-2: var(--wui-purple-2);\n--wui-color-base-3: var(--wui-purple-3);\n--wui-color-base-4: var(--wui-purple-4);\n--wui-color-base-5: var(--wui-purple-5);\n--wui-color-base-6: var(--wui-purple-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-purple-7);\n--wui-color-base-8: var(--wui-purple-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-purple-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-purple-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-purple-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-purple-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-purple-contrast);\n--wui-color-accent-1: var(--wui-purple-1);\n--wui-color-accent-2: var(--wui-purple-2);\n--wui-color-accent-3: var(--wui-purple-3);\n--wui-color-accent-4: var(--wui-purple-4);\n--wui-color-accent-5: var(--wui-purple-5);\n--wui-color-accent-6: var(--wui-purple-6);\n--wui-color-accent-7: var(--wui-purple-7);\n--wui-color-accent-8: var(--wui-purple-8);\n--wui-color-accent-9: var(--wui-purple-9);\n--wui-color-text-link-token: var(--wui-purple-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-purple-10);\n--wui-color-accent-11: var(--wui-purple-11);\n--wui-color-accent-12: var(--wui-purple-12);\n--wui-color-accent-contrast: var(--wui-purple-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-purple-2);\n--wui-color-text-button-token: var(--wui-purple-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1762
+ var purple_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, purple permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-purple-1);\n--wui-color-accent-2: var(--wui-purple-2);\n--wui-color-accent-3: var(--wui-purple-3);\n--wui-color-accent-4: var(--wui-purple-4);\n--wui-color-accent-5: var(--wui-purple-5);\n--wui-color-accent-6: var(--wui-purple-6);\n--wui-color-accent-7: var(--wui-purple-7);\n--wui-color-accent-8: var(--wui-purple-8);\n--wui-color-accent-9: var(--wui-purple-9);\n--wui-color-accent-10: var(--wui-purple-10);\n--wui-color-accent-11: var(--wui-purple-11);\n--wui-color-accent-12: var(--wui-purple-12);\n--wui-color-accent-contrast: var(--wui-purple-contrast);\n--wui-color-base-1: var(--wui-purple-1);\n--wui-color-base-2: var(--wui-purple-2);\n--wui-color-base-3: var(--wui-purple-3);\n--wui-color-base-4: var(--wui-purple-4);\n--wui-color-base-5: var(--wui-purple-5);\n--wui-color-base-6: var(--wui-purple-6);\n--wui-color-base-7: var(--wui-purple-7);\n--wui-color-base-8: var(--wui-purple-8);\n--wui-color-base-9: var(--wui-purple-9);\n--wui-color-base-10: var(--wui-purple-10);\n--wui-color-base-11: var(--wui-purple-11);\n--wui-color-base-12: var(--wui-purple-12);\n--wui-color-base-contrast: var(--wui-purple-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-purple-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-purple-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-purple-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1730
1763
  //#endregion
1731
1764
  //#region src/css/designTokens/generated/schemes/red.css
1732
- var red_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, red permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-red-1);\n--wui-color-base-2: var(--wui-red-2);\n--wui-color-base-3: var(--wui-red-3);\n--wui-color-base-4: var(--wui-red-4);\n--wui-color-base-5: var(--wui-red-5);\n--wui-color-base-6: var(--wui-red-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-red-7);\n--wui-color-base-8: var(--wui-red-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-red-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-red-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-red-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-red-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-red-contrast);\n--wui-color-accent-1: var(--wui-red-1);\n--wui-color-accent-2: var(--wui-red-2);\n--wui-color-accent-3: var(--wui-red-3);\n--wui-color-accent-4: var(--wui-red-4);\n--wui-color-accent-5: var(--wui-red-5);\n--wui-color-accent-6: var(--wui-red-6);\n--wui-color-accent-7: var(--wui-red-7);\n--wui-color-accent-8: var(--wui-red-8);\n--wui-color-accent-9: var(--wui-red-9);\n--wui-color-text-link-token: var(--wui-red-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-red-10);\n--wui-color-accent-11: var(--wui-red-11);\n--wui-color-accent-12: var(--wui-red-12);\n--wui-color-accent-contrast: var(--wui-red-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-red-2);\n--wui-color-text-button-token: var(--wui-red-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1733
- //#endregion
1734
- //#region src/css/designTokens/generated/schemes/yellow.css
1735
- var yellow_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, yellow permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-yellow-1);\n--wui-color-base-2: var(--wui-yellow-2);\n--wui-color-base-3: var(--wui-yellow-3);\n--wui-color-base-4: var(--wui-yellow-4);\n--wui-color-base-5: var(--wui-yellow-5);\n--wui-color-base-6: var(--wui-yellow-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-yellow-7);\n--wui-color-base-8: var(--wui-yellow-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-yellow-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-yellow-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-yellow-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-yellow-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-yellow-contrast);\n--wui-color-accent-1: var(--wui-yellow-1);\n--wui-color-accent-2: var(--wui-yellow-2);\n--wui-color-accent-3: var(--wui-yellow-3);\n--wui-color-accent-4: var(--wui-yellow-4);\n--wui-color-accent-5: var(--wui-yellow-5);\n--wui-color-accent-6: var(--wui-yellow-6);\n--wui-color-accent-7: var(--wui-yellow-7);\n--wui-color-accent-8: var(--wui-yellow-8);\n--wui-color-accent-9: var(--wui-yellow-9);\n--wui-color-text-link-token: var(--wui-yellow-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-yellow-10);\n--wui-color-accent-11: var(--wui-yellow-11);\n--wui-color-accent-12: var(--wui-yellow-12);\n--wui-color-accent-contrast: var(--wui-yellow-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-yellow-2);\n--wui-color-text-button-token: var(--wui-yellow-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1736
- //#endregion
1737
- //#region src/css/designTokens/generated/schemes/error.css
1738
- var error_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, error permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-error-1);\n--wui-color-base-2: var(--wui-error-2);\n--wui-color-base-3: var(--wui-error-3);\n--wui-color-base-4: var(--wui-error-4);\n--wui-color-base-5: var(--wui-error-5);\n--wui-color-base-6: var(--wui-error-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-error-7);\n--wui-color-base-8: var(--wui-error-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-error-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-error-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-error-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-error-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-error-contrast);\n--wui-color-accent-1: var(--wui-error-1);\n--wui-color-accent-2: var(--wui-error-2);\n--wui-color-accent-3: var(--wui-error-3);\n--wui-color-accent-4: var(--wui-error-4);\n--wui-color-accent-5: var(--wui-error-5);\n--wui-color-accent-6: var(--wui-error-6);\n--wui-color-accent-7: var(--wui-error-7);\n--wui-color-accent-8: var(--wui-error-8);\n--wui-color-accent-9: var(--wui-error-9);\n--wui-color-text-link-token: var(--wui-error-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-error-10);\n--wui-color-accent-11: var(--wui-error-11);\n--wui-color-accent-12: var(--wui-error-12);\n--wui-color-accent-contrast: var(--wui-error-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-error-2);\n--wui-color-text-button-token: var(--wui-error-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1765
+ var red_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, red permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-red-1);\n--wui-color-accent-2: var(--wui-red-2);\n--wui-color-accent-3: var(--wui-red-3);\n--wui-color-accent-4: var(--wui-red-4);\n--wui-color-accent-5: var(--wui-red-5);\n--wui-color-accent-6: var(--wui-red-6);\n--wui-color-accent-7: var(--wui-red-7);\n--wui-color-accent-8: var(--wui-red-8);\n--wui-color-accent-9: var(--wui-red-9);\n--wui-color-accent-10: var(--wui-red-10);\n--wui-color-accent-11: var(--wui-red-11);\n--wui-color-accent-12: var(--wui-red-12);\n--wui-color-accent-contrast: var(--wui-red-contrast);\n--wui-color-base-1: var(--wui-red-1);\n--wui-color-base-2: var(--wui-red-2);\n--wui-color-base-3: var(--wui-red-3);\n--wui-color-base-4: var(--wui-red-4);\n--wui-color-base-5: var(--wui-red-5);\n--wui-color-base-6: var(--wui-red-6);\n--wui-color-base-7: var(--wui-red-7);\n--wui-color-base-8: var(--wui-red-8);\n--wui-color-base-9: var(--wui-red-9);\n--wui-color-base-10: var(--wui-red-10);\n--wui-color-base-11: var(--wui-red-11);\n--wui-color-base-12: var(--wui-red-12);\n--wui-color-base-contrast: var(--wui-red-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-red-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-red-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-red-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1739
1766
  //#endregion
1740
- //#region src/css/designTokens/generated/schemes/info.css
1741
- var info_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, info permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\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-text-link-token: var(--wui-blue-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-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-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1767
+ //#region src/css/designTokens/generated/schemes/standard.css
1768
+ var standard_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, standard permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-gray-1);\n--wui-color-base-2: var(--wui-gray-2);\n--wui-color-base-3: var(--wui-gray-3);\n--wui-color-base-4: var(--wui-gray-4);\n--wui-color-base-5: var(--wui-gray-5);\n--wui-color-base-6: var(--wui-gray-6);\n--wui-color-base-7: var(--wui-gray-7);\n--wui-color-base-8: var(--wui-gray-8);\n--wui-color-base-9: var(--wui-gray-9);\n--wui-color-base-10: var(--wui-gray-10);\n--wui-color-base-11: var(--wui-gray-11);\n--wui-color-base-12: var(--wui-gray-12);\n--wui-color-base-contrast: var(--wui-gray-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-gray-1);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-gray-12);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-color-accent-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1742
1769
  //#endregion
1743
1770
  //#region src/css/designTokens/generated/schemes/success.css
1744
- var success_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, success permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-success-1);\n--wui-color-base-2: var(--wui-success-2);\n--wui-color-base-3: var(--wui-success-3);\n--wui-color-base-4: var(--wui-success-4);\n--wui-color-base-5: var(--wui-success-5);\n--wui-color-base-6: var(--wui-success-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-success-7);\n--wui-color-base-8: var(--wui-success-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-success-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-success-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-success-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-success-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-success-contrast);\n--wui-color-accent-1: var(--wui-success-1);\n--wui-color-accent-2: var(--wui-success-2);\n--wui-color-accent-3: var(--wui-success-3);\n--wui-color-accent-4: var(--wui-success-4);\n--wui-color-accent-5: var(--wui-success-5);\n--wui-color-accent-6: var(--wui-success-6);\n--wui-color-accent-7: var(--wui-success-7);\n--wui-color-accent-8: var(--wui-success-8);\n--wui-color-accent-9: var(--wui-success-9);\n--wui-color-text-link-token: var(--wui-success-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-success-10);\n--wui-color-accent-11: var(--wui-success-11);\n--wui-color-accent-12: var(--wui-success-12);\n--wui-color-accent-contrast: var(--wui-success-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-success-2);\n--wui-color-text-button-token: var(--wui-success-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1745
- //#endregion
1746
- //#region src/css/designTokens/generated/schemes/warning.css
1747
- var warning_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, warning permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-warning-1);\n--wui-color-base-2: var(--wui-warning-2);\n--wui-color-base-3: var(--wui-warning-3);\n--wui-color-base-4: var(--wui-warning-4);\n--wui-color-base-5: var(--wui-warning-5);\n--wui-color-base-6: var(--wui-warning-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-warning-7);\n--wui-color-base-8: var(--wui-warning-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-warning-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-warning-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-warning-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-warning-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-warning-contrast);\n--wui-color-accent-1: var(--wui-warning-1);\n--wui-color-accent-2: var(--wui-warning-2);\n--wui-color-accent-3: var(--wui-warning-3);\n--wui-color-accent-4: var(--wui-warning-4);\n--wui-color-accent-5: var(--wui-warning-5);\n--wui-color-accent-6: var(--wui-warning-6);\n--wui-color-accent-7: var(--wui-warning-7);\n--wui-color-accent-8: var(--wui-warning-8);\n--wui-color-accent-9: var(--wui-warning-9);\n--wui-color-text-link-token: var(--wui-warning-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-warning-10);\n--wui-color-accent-11: var(--wui-warning-11);\n--wui-color-accent-12: var(--wui-warning-12);\n--wui-color-accent-contrast: var(--wui-warning-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-warning-2);\n--wui-color-text-button-token: var(--wui-warning-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1771
+ var success_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, success permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-success-1);\n--wui-color-accent-2: var(--wui-success-2);\n--wui-color-accent-3: var(--wui-success-3);\n--wui-color-accent-4: var(--wui-success-4);\n--wui-color-accent-5: var(--wui-success-5);\n--wui-color-accent-6: var(--wui-success-6);\n--wui-color-accent-7: var(--wui-success-7);\n--wui-color-accent-8: var(--wui-success-8);\n--wui-color-accent-9: var(--wui-success-9);\n--wui-color-accent-10: var(--wui-success-10);\n--wui-color-accent-11: var(--wui-success-11);\n--wui-color-accent-12: var(--wui-success-12);\n--wui-color-accent-contrast: var(--wui-success-contrast);\n--wui-color-base-1: var(--wui-success-1);\n--wui-color-base-2: var(--wui-success-2);\n--wui-color-base-3: var(--wui-success-3);\n--wui-color-base-4: var(--wui-success-4);\n--wui-color-base-5: var(--wui-success-5);\n--wui-color-base-6: var(--wui-success-6);\n--wui-color-base-7: var(--wui-success-7);\n--wui-color-base-8: var(--wui-success-8);\n--wui-color-base-9: var(--wui-success-9);\n--wui-color-base-10: var(--wui-success-10);\n--wui-color-base-11: var(--wui-success-11);\n--wui-color-base-12: var(--wui-success-12);\n--wui-color-base-contrast: var(--wui-success-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-success-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-success-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-success-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1748
1772
  //#endregion
1749
1773
  //#region src/css/designTokens/generated/schemes/vendor-hubspot.css
1750
- var vendor_hubspot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-hubspot permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-vendor-hubspot-1);\n--wui-color-base-2: var(--wui-vendor-hubspot-2);\n--wui-color-base-3: var(--wui-vendor-hubspot-3);\n--wui-color-base-4: var(--wui-vendor-hubspot-4);\n--wui-color-base-5: var(--wui-vendor-hubspot-5);\n--wui-color-base-6: var(--wui-vendor-hubspot-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-vendor-hubspot-7);\n--wui-color-base-8: var(--wui-vendor-hubspot-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-vendor-hubspot-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-vendor-hubspot-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-vendor-hubspot-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-vendor-hubspot-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-accent-1: var(--wui-vendor-hubspot-1);\n--wui-color-accent-2: var(--wui-vendor-hubspot-2);\n--wui-color-accent-3: var(--wui-vendor-hubspot-3);\n--wui-color-accent-4: var(--wui-vendor-hubspot-4);\n--wui-color-accent-5: var(--wui-vendor-hubspot-5);\n--wui-color-accent-6: var(--wui-vendor-hubspot-6);\n--wui-color-accent-7: var(--wui-vendor-hubspot-7);\n--wui-color-accent-8: var(--wui-vendor-hubspot-8);\n--wui-color-accent-9: var(--wui-vendor-hubspot-9);\n--wui-color-text-link-token: var(--wui-vendor-hubspot-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-vendor-hubspot-10);\n--wui-color-accent-11: var(--wui-vendor-hubspot-11);\n--wui-color-accent-12: var(--wui-vendor-hubspot-12);\n--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-hubspot-2);\n--wui-color-text-button-token: var(--wui-vendor-hubspot-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1774
+ var vendor_hubspot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-hubspot permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-vendor-hubspot-1);\n--wui-color-accent-2: var(--wui-vendor-hubspot-2);\n--wui-color-accent-3: var(--wui-vendor-hubspot-3);\n--wui-color-accent-4: var(--wui-vendor-hubspot-4);\n--wui-color-accent-5: var(--wui-vendor-hubspot-5);\n--wui-color-accent-6: var(--wui-vendor-hubspot-6);\n--wui-color-accent-7: var(--wui-vendor-hubspot-7);\n--wui-color-accent-8: var(--wui-vendor-hubspot-8);\n--wui-color-accent-9: var(--wui-vendor-hubspot-9);\n--wui-color-accent-10: var(--wui-vendor-hubspot-10);\n--wui-color-accent-11: var(--wui-vendor-hubspot-11);\n--wui-color-accent-12: var(--wui-vendor-hubspot-12);\n--wui-color-accent-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-base-1: var(--wui-vendor-hubspot-1);\n--wui-color-base-2: var(--wui-vendor-hubspot-2);\n--wui-color-base-3: var(--wui-vendor-hubspot-3);\n--wui-color-base-4: var(--wui-vendor-hubspot-4);\n--wui-color-base-5: var(--wui-vendor-hubspot-5);\n--wui-color-base-6: var(--wui-vendor-hubspot-6);\n--wui-color-base-7: var(--wui-vendor-hubspot-7);\n--wui-color-base-8: var(--wui-vendor-hubspot-8);\n--wui-color-base-9: var(--wui-vendor-hubspot-9);\n--wui-color-base-10: var(--wui-vendor-hubspot-10);\n--wui-color-base-11: var(--wui-vendor-hubspot-11);\n--wui-color-base-12: var(--wui-vendor-hubspot-12);\n--wui-color-base-contrast: var(--wui-vendor-hubspot-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-hubspot-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-vendor-hubspot-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-vendor-hubspot-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1751
1775
  //#endregion
1752
1776
  //#region src/css/designTokens/generated/schemes/vendor-marketo.css
1753
- var vendor_marketo_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-marketo permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-vendor-marketo-1);\n--wui-color-base-2: var(--wui-vendor-marketo-2);\n--wui-color-base-3: var(--wui-vendor-marketo-3);\n--wui-color-base-4: var(--wui-vendor-marketo-4);\n--wui-color-base-5: var(--wui-vendor-marketo-5);\n--wui-color-base-6: var(--wui-vendor-marketo-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-vendor-marketo-7);\n--wui-color-base-8: var(--wui-vendor-marketo-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-vendor-marketo-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-vendor-marketo-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-vendor-marketo-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-vendor-marketo-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-accent-1: var(--wui-vendor-marketo-1);\n--wui-color-accent-2: var(--wui-vendor-marketo-2);\n--wui-color-accent-3: var(--wui-vendor-marketo-3);\n--wui-color-accent-4: var(--wui-vendor-marketo-4);\n--wui-color-accent-5: var(--wui-vendor-marketo-5);\n--wui-color-accent-6: var(--wui-vendor-marketo-6);\n--wui-color-accent-7: var(--wui-vendor-marketo-7);\n--wui-color-accent-8: var(--wui-vendor-marketo-8);\n--wui-color-accent-9: var(--wui-vendor-marketo-9);\n--wui-color-text-link-token: var(--wui-vendor-marketo-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-vendor-marketo-10);\n--wui-color-accent-11: var(--wui-vendor-marketo-11);\n--wui-color-accent-12: var(--wui-vendor-marketo-12);\n--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-marketo-2);\n--wui-color-text-button-token: var(--wui-vendor-marketo-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1777
+ var vendor_marketo_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-marketo permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-vendor-marketo-1);\n--wui-color-accent-2: var(--wui-vendor-marketo-2);\n--wui-color-accent-3: var(--wui-vendor-marketo-3);\n--wui-color-accent-4: var(--wui-vendor-marketo-4);\n--wui-color-accent-5: var(--wui-vendor-marketo-5);\n--wui-color-accent-6: var(--wui-vendor-marketo-6);\n--wui-color-accent-7: var(--wui-vendor-marketo-7);\n--wui-color-accent-8: var(--wui-vendor-marketo-8);\n--wui-color-accent-9: var(--wui-vendor-marketo-9);\n--wui-color-accent-10: var(--wui-vendor-marketo-10);\n--wui-color-accent-11: var(--wui-vendor-marketo-11);\n--wui-color-accent-12: var(--wui-vendor-marketo-12);\n--wui-color-accent-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-base-1: var(--wui-vendor-marketo-1);\n--wui-color-base-2: var(--wui-vendor-marketo-2);\n--wui-color-base-3: var(--wui-vendor-marketo-3);\n--wui-color-base-4: var(--wui-vendor-marketo-4);\n--wui-color-base-5: var(--wui-vendor-marketo-5);\n--wui-color-base-6: var(--wui-vendor-marketo-6);\n--wui-color-base-7: var(--wui-vendor-marketo-7);\n--wui-color-base-8: var(--wui-vendor-marketo-8);\n--wui-color-base-9: var(--wui-vendor-marketo-9);\n--wui-color-base-10: var(--wui-vendor-marketo-10);\n--wui-color-base-11: var(--wui-vendor-marketo-11);\n--wui-color-base-12: var(--wui-vendor-marketo-12);\n--wui-color-base-contrast: var(--wui-vendor-marketo-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-marketo-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-vendor-marketo-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-vendor-marketo-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1754
1778
  //#endregion
1755
1779
  //#region src/css/designTokens/generated/schemes/vendor-pardot.css
1756
- var vendor_pardot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-pardot permutation\n * ------------------------------------------- */\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-base-1: var(--wui-vendor-pardot-1);\n--wui-color-base-2: var(--wui-vendor-pardot-2);\n--wui-color-base-3: var(--wui-vendor-pardot-3);\n--wui-color-base-4: var(--wui-vendor-pardot-4);\n--wui-color-base-5: var(--wui-vendor-pardot-5);\n--wui-color-base-6: var(--wui-vendor-pardot-6);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-base-7: var(--wui-vendor-pardot-7);\n--wui-color-base-8: var(--wui-vendor-pardot-8);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-base-9: var(--wui-vendor-pardot-9);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-base-10: var(--wui-vendor-pardot-10);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-base-11: var(--wui-vendor-pardot-11);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-text-secondary: var(--wui-color-base-11);\n--wui-color-base-12: var(--wui-vendor-pardot-12);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-accent-1: var(--wui-vendor-pardot-1);\n--wui-color-accent-2: var(--wui-vendor-pardot-2);\n--wui-color-accent-3: var(--wui-vendor-pardot-3);\n--wui-color-accent-4: var(--wui-vendor-pardot-4);\n--wui-color-accent-5: var(--wui-vendor-pardot-5);\n--wui-color-accent-6: var(--wui-vendor-pardot-6);\n--wui-color-accent-7: var(--wui-vendor-pardot-7);\n--wui-color-accent-8: var(--wui-vendor-pardot-8);\n--wui-color-accent-9: var(--wui-vendor-pardot-9);\n--wui-color-text-link-token: var(--wui-vendor-pardot-9);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-accent-10: var(--wui-vendor-pardot-10);\n--wui-color-accent-11: var(--wui-vendor-pardot-11);\n--wui-color-accent-12: var(--wui-vendor-pardot-12);\n--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-pardot-2);\n--wui-color-text-button-token: var(--wui-vendor-pardot-11);\n--wui-color-text-button: var(--wui-color-text-button-token);\n";
1780
+ var vendor_pardot_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, vendor-pardot permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-vendor-pardot-1);\n--wui-color-accent-2: var(--wui-vendor-pardot-2);\n--wui-color-accent-3: var(--wui-vendor-pardot-3);\n--wui-color-accent-4: var(--wui-vendor-pardot-4);\n--wui-color-accent-5: var(--wui-vendor-pardot-5);\n--wui-color-accent-6: var(--wui-vendor-pardot-6);\n--wui-color-accent-7: var(--wui-vendor-pardot-7);\n--wui-color-accent-8: var(--wui-vendor-pardot-8);\n--wui-color-accent-9: var(--wui-vendor-pardot-9);\n--wui-color-accent-10: var(--wui-vendor-pardot-10);\n--wui-color-accent-11: var(--wui-vendor-pardot-11);\n--wui-color-accent-12: var(--wui-vendor-pardot-12);\n--wui-color-accent-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-base-1: var(--wui-vendor-pardot-1);\n--wui-color-base-2: var(--wui-vendor-pardot-2);\n--wui-color-base-3: var(--wui-vendor-pardot-3);\n--wui-color-base-4: var(--wui-vendor-pardot-4);\n--wui-color-base-5: var(--wui-vendor-pardot-5);\n--wui-color-base-6: var(--wui-vendor-pardot-6);\n--wui-color-base-7: var(--wui-vendor-pardot-7);\n--wui-color-base-8: var(--wui-vendor-pardot-8);\n--wui-color-base-9: var(--wui-vendor-pardot-9);\n--wui-color-base-10: var(--wui-vendor-pardot-10);\n--wui-color-base-11: var(--wui-vendor-pardot-11);\n--wui-color-base-12: var(--wui-vendor-pardot-12);\n--wui-color-base-contrast: var(--wui-vendor-pardot-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-vendor-pardot-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-vendor-pardot-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-vendor-pardot-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1757
1781
  //#endregion
1758
- //#region src/css/designTokens/generated/schemes/nav.css
1759
- var nav_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, nav permutation\n * ------------------------------------------- */\n--wui-color-bg-surface-disabled: #0000;\n--wui-color-bg-surface-selected: var(--wui-color-bg-fill);\n--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);\n--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);\n--wui-color-bg-app: #1e3399;\n--wui-color-bg-fill: var(--wui-blue-1);\n--wui-color-bg-fill-hover: #e7e9f4;\n--wui-color-bg-fill-active: #dcdfef;\n--wui-color-bg-surface: #0000;\n--wui-color-bg-surface-hover: #15267b;\n--wui-color-bg-surface-active: #122271;\n--wui-color-bg-surface-secondary: #15267b;\n--wui-color-bg-surface-secondary-hover: #122271;\n--wui-color-bg-surface-secondary-active: #101e67;\n--wui-color-bg-surface-tertiary: #0d1a5c;\n--wui-color-icon-disabled: var(--wui-blue-8);\n--wui-color-text-disabled: var(--wui-blue-8);\n--wui-color-icon-selected: var(--wui-color-bg-app);\n--wui-color-text-selected: var(--wui-color-bg-app);\n--wui-color-segmented-color-text-override: var(--wui-blue-9);\n--wui-color-border-selected: #0000;\n--wui-color-border-hover-selected: #0000;\n--wui-color-border-active-selected: #0000;\n--wui-color-border-secondary: #101e67;\n--wui-color-border: var(--wui-color-bg-fill);\n--wui-color-border-hover: var(--wui-color-bg-fill-hover);\n--wui-color-border-active: var(--wui-color-bg-fill-active);\n--wui-color-icon: var(--wui-blue-1);\n--wui-color-icon-on-fill: var(--wui-color-bg-app);\n--wui-color-text: var(--wui-blue-1);\n--wui-color-text-on-fill: var(--wui-color-bg-app);\n--wui-color-text-link: var(--wui-blue-4);\n--wui-color-text-secondary: var(--wui-blue-6);\n--wui-color-text-button: var(--wui-blue-1);\n--wui-color-focus-ring: var(--wui-blue-1);\n";
1782
+ //#region src/css/designTokens/generated/schemes/warning.css
1783
+ var warning_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, warning permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-warning-1);\n--wui-color-accent-2: var(--wui-warning-2);\n--wui-color-accent-3: var(--wui-warning-3);\n--wui-color-accent-4: var(--wui-warning-4);\n--wui-color-accent-5: var(--wui-warning-5);\n--wui-color-accent-6: var(--wui-warning-6);\n--wui-color-accent-7: var(--wui-warning-7);\n--wui-color-accent-8: var(--wui-warning-8);\n--wui-color-accent-9: var(--wui-warning-9);\n--wui-color-accent-10: var(--wui-warning-10);\n--wui-color-accent-11: var(--wui-warning-11);\n--wui-color-accent-12: var(--wui-warning-12);\n--wui-color-accent-contrast: var(--wui-warning-contrast);\n--wui-color-base-1: var(--wui-warning-1);\n--wui-color-base-2: var(--wui-warning-2);\n--wui-color-base-3: var(--wui-warning-3);\n--wui-color-base-4: var(--wui-warning-4);\n--wui-color-base-5: var(--wui-warning-5);\n--wui-color-base-6: var(--wui-warning-6);\n--wui-color-base-7: var(--wui-warning-7);\n--wui-color-base-8: var(--wui-warning-8);\n--wui-color-base-9: var(--wui-warning-9);\n--wui-color-base-10: var(--wui-warning-10);\n--wui-color-base-11: var(--wui-warning-11);\n--wui-color-base-12: var(--wui-warning-12);\n--wui-color-base-contrast: var(--wui-warning-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-warning-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-warning-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-warning-11);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1784
+ //#endregion
1785
+ //#region src/css/designTokens/generated/schemes/yellow.css
1786
+ var yellow_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, yellow permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-yellow-1);\n--wui-color-accent-2: var(--wui-yellow-2);\n--wui-color-accent-3: var(--wui-yellow-3);\n--wui-color-accent-4: var(--wui-yellow-4);\n--wui-color-accent-5: var(--wui-yellow-5);\n--wui-color-accent-6: var(--wui-yellow-6);\n--wui-color-accent-7: var(--wui-yellow-7);\n--wui-color-accent-8: var(--wui-yellow-8);\n--wui-color-accent-9: var(--wui-yellow-9);\n--wui-color-accent-10: var(--wui-yellow-10);\n--wui-color-accent-11: var(--wui-yellow-11);\n--wui-color-accent-12: var(--wui-yellow-12);\n--wui-color-accent-contrast: var(--wui-yellow-contrast);\n--wui-color-base-1: var(--wui-yellow-1);\n--wui-color-base-2: var(--wui-yellow-2);\n--wui-color-base-3: var(--wui-yellow-3);\n--wui-color-base-4: var(--wui-yellow-4);\n--wui-color-base-5: var(--wui-yellow-5);\n--wui-color-base-6: var(--wui-yellow-6);\n--wui-color-base-7: var(--wui-yellow-7);\n--wui-color-base-8: var(--wui-yellow-8);\n--wui-color-base-9: var(--wui-yellow-9);\n--wui-color-base-10: var(--wui-yellow-10);\n--wui-color-base-11: var(--wui-yellow-11);\n--wui-color-base-12: var(--wui-yellow-12);\n--wui-color-base-contrast: var(--wui-yellow-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-yellow-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-yellow-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-yellow-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1760
1787
  //#endregion
1761
1788
  //#region src/css/designTokens/colorSchemes.tsx
1762
1789
  const standardColorScheme = css`
@@ -1898,8 +1925,9 @@ Toast.displayName = "Toast";
1898
1925
  //#endregion
1899
1926
  //#region src/hooks/useToast/useToast.tsx
1900
1927
  const useToast = () => {
1928
+ const toasterId = useContext(ToastScopeContext);
1901
1929
  return useCallback(({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
1902
- toast.custom(() => {
1930
+ const id = toast.custom(() => {
1903
1931
  return /* @__PURE__ */ jsx(Toast, {
1904
1932
  action,
1905
1933
  colorScheme,
@@ -1908,9 +1936,16 @@ const useToast = () => {
1908
1936
  });
1909
1937
  }, {
1910
1938
  position,
1911
- duration
1939
+ duration,
1940
+ ...toasterId !== void 0 && toasterId !== "" && { toasterId }
1912
1941
  });
1913
- }, []);
1942
+ return {
1943
+ id,
1944
+ dismiss: () => {
1945
+ toast.dismiss(id);
1946
+ }
1947
+ };
1948
+ }, [toasterId]);
1914
1949
  };
1915
1950
  //#endregion
1916
1951
  //#region src/css/buttonResetCss.tsx
@@ -1957,165 +1992,30 @@ const buttonResetCss = css`
1957
1992
  }
1958
1993
  `;
1959
1994
  //#endregion
1960
- //#region src/components/Button/buttonStyles.tsx
1961
- const buttonSmallStyles = css`
1962
- --button-padding-vertical: var(--wui-space-01);
1963
- --button-padding-horizontal: var(--wui-space-02);
1964
- --button-label-padding-horizontal: var(--wui-space-01);
1965
- --button-typography-family: var(--wui-typography-family-default);
1966
- --button-typography-size: var(--wui-typography-label-4-font-size);
1967
- --button-typography-weight: var(--wui-typography-label-4-font-weight);
1968
- --button-typography-line-height: 16px;
1969
- --button-icon-size: 12px;
1970
- --button-label-gap: 4px;
1971
- `;
1972
- const buttonMediumStyles = css`
1973
- --button-padding-vertical: var(--wui-space-02);
1974
- --button-padding-horizontal: var(--wui-space-02);
1975
- --button-label-padding-horizontal: 6px;
1976
- --button-typography-family: var(--wui-typography-family-default);
1977
- --button-typography-size: var(--wui-typography-label-3-font-size);
1978
- --button-typography-weight: var(--wui-typography-label-3-font-weight);
1979
- --button-typography-line-height: 16px;
1980
- --button-icon-size: 16px;
1981
- --button-label-gap: 6px;
1982
- `;
1983
- const buttonLargeStyles = css`
1984
- --button-padding-vertical: var(--wui-space-02);
1985
- --button-padding-horizontal: var(--wui-space-02);
1986
- --button-label-padding-horizontal: var(--wui-space-02);
1987
- --button-typography-family: var(--wui-typography-family-default);
1988
- --button-typography-size: var(--wui-typography-label-1-font-size);
1989
- --button-typography-weight: var(--wui-typography-label-1-font-weight);
1990
- --button-typography-line-height: 24px;
1991
- --button-icon-size: 24px;
1992
- --button-label-gap: 8px;
1993
- `;
1994
- const buttonExtraLargeStyles = css`
1995
- --button-padding-vertical: var(--wui-space-03);
1996
- --button-padding-horizontal: var(--wui-space-03);
1997
- --button-label-padding-horizontal: var(--wui-space-02);
1998
- --button-typography-family: var(--wui-typography-family-brand);
1999
- --button-typography-size: 18px;
2000
- --button-typography-weight: var(--wui-typography-weight-brand-bold);
2001
- --button-typography-line-height: 24px;
2002
- --button-icon-size: 24px;
2003
- --button-label-gap: 8px;
2004
- `;
2005
- const ghostButtonVariant = css`
2006
- --button-color-bg-override: transparent;
2007
- --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
2008
- --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
2009
- --button-color-text: var(--wui-color-text-button);
2010
- --button-color-icon: var(--wui-color-icon);
2011
- `;
2012
- const outlineButtonVariant = css`
2013
- ${ghostButtonVariant};
2014
- --button-color-border: var(--wui-color-border);
2015
-
2016
- box-shadow: 0 0 0 2px var(--button-color-border) inset;
2017
- `;
2018
- const softButtonVariant = css`
2019
- --button-color-bg: var(--wui-color-bg-surface-secondary);
2020
- --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
2021
- --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
2022
- --button-color-text: var(--wui-color-text-button);
2023
- --button-color-icon: var(--wui-color-icon);
2024
- `;
2025
- const solidButtonVariant = css`
2026
- --button-color-bg: var(--wui-color-bg-fill);
2027
- --button-color-bg-hover: var(--wui-color-bg-fill-hover);
2028
- --button-color-bg-active: var(--wui-color-bg-fill-active);
2029
- --button-color-text: var(--wui-color-text-on-fill);
2030
- --button-color-icon: var(--wui-color-icon-on-fill);
2031
- `;
2032
- const disabledButtonVariant = css`
2033
- --button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
2034
- --button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
2035
- --button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
2036
- --button-color-text: var(--wui-color-text-disabled);
2037
- --button-color-icon: var(--wui-color-icon-disabled);
2038
- --button-color-border: var(--wui-color-border-disabled);
2039
- `;
2040
- const pressedButtonVariant = css`
2041
- --button-color-bg: var(--wui-color-bg-surface-selected);
2042
- --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
2043
- --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
2044
- --button-color-text: var(--wui-color-text-selected);
2045
- --button-color-icon: var(--wui-color-icon-selected);
2046
- --button-color-border: var(--wui-color-border-selected);
2047
- `;
2048
- const buttonBaseStyles = css`
2049
- border-radius: var(--wui-border-radius-rounded);
2050
- font-family: var(--button-typography-family);
2051
- font-size: var(--button-typography-size);
2052
- font-weight: var(--button-typography-weight);
2053
- line-height: var(--button-typography-line-height);
2054
- padding: var(--button-padding-vertical) var(--button-padding-horizontal);
2055
- background-color: var(--button-color-bg);
2056
- color: var(--button-color-text);
2057
- transition:
2058
- background-color var(--wui-motion-duration-01) var(--wui-motion-ease),
2059
- box-shadow var(--wui-motion-duration-01) var(--wui-motion-ease);
2060
-
2061
- /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
2062
- && {
2063
- & svg {
2064
- color: var(--button-color-icon);
2065
- width: var(--button-icon-size);
2066
- height: var(--button-icon-size);
2067
- flex: 0 0 var(--button-icon-size);
2068
- }
2069
- }
2070
-
2071
- &:focus {
2072
- outline: none;
2073
- }
2074
-
2075
- &:focus-visible,
2076
- &.force-state-focus {
2077
- --wui-button-focus-color: var(--wui-color-focus-ring);
2078
-
2079
- background-color: var(--button-color-bg-hover);
2080
- box-shadow:
2081
- inset 0 0 0 2px var(--wui-button-focus-color),
2082
- inset 0 0 0 3px var(--wui-color-bg-app),
2083
- inset 0 0 0 5px var(--button-color-border, transparent);
2084
-
2085
- &[aria-disabled='true'] {
2086
- --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
2087
- }
2088
- }
2089
-
2090
- &:hover:not([aria-disabled='true']),
2091
- &.force-state-hover {
2092
- background-color: var(--button-color-bg-hover);
2093
- }
2094
-
2095
- &:active:not([aria-disabled='true']),
2096
- &.force-state-active {
2097
- background-color: var(--button-color-bg-active);
2098
- }
2099
-
2100
- &[aria-disabled='true'] {
2101
- ${disabledButtonVariant};
2102
- }
2103
-
2104
- &[aria-pressed='true'] {
2105
- ${pressedButtonVariant};
2106
- }
2107
- `;
2108
- const buttonVariantsStyles = {
2109
- ghost: ghostButtonVariant,
2110
- outline: outlineButtonVariant,
2111
- soft: softButtonVariant,
2112
- solid: solidButtonVariant
1995
+ //#region src/private/hooks/useResponsiveProp/useResponsiveProp.ts
1996
+ const isResponsiveObject = (values) => {
1997
+ return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
2113
1998
  };
2114
- const buttonSizeStyles = {
2115
- sm: buttonSmallStyles,
2116
- md: buttonMediumStyles,
2117
- lg: buttonLargeStyles,
2118
- xl: buttonExtraLargeStyles
1999
+ /** How to use in a component
2000
+ * const Example = ({ someProp }: ExampleProps) => {
2001
+ * const somePropResponsiveValue = useResponsiveProp<ExampleProps['someProp']>(someProp);
2002
+ *
2003
+ * return <div>{somePropResponsiveValue}</div>;
2004
+ * }
2005
+ *
2006
+ * The end use could implement either:
2007
+ * <Example someProp="a normal value" />
2008
+ * <Example someProp={{ base: 'baselinevalue', isMdAndUp: 'value for medium screens', isLgAndUp: 'value for larger screens' }} />
2009
+ */
2010
+ const useResponsiveProp = (values) => {
2011
+ const activeMediaQueries = useActiveMq();
2012
+ return useMemo(() => {
2013
+ if (isRecord(values) && isResponsiveObject(values)) {
2014
+ const mq = activeMediaQueries.find((key) => key in values);
2015
+ return isNotUndefined(mq) && isNotUndefined(values[mq]) ? values[mq] : values.base;
2016
+ }
2017
+ return values;
2018
+ }, [activeMediaQueries, values]);
2119
2019
  };
2120
2020
  //#endregion
2121
2021
  //#region src/components/Icon/icons/AbTestIcon.tsx
@@ -2608,17 +2508,6 @@ const ChaptersIcon = (props) => /* @__PURE__ */ jsx("svg", {
2608
2508
  })
2609
2509
  });
2610
2510
  //#endregion
2611
- //#region src/components/Icon/icons/CheckmarkIcon.tsx
2612
- const CheckmarkIcon = (props) => /* @__PURE__ */ jsx("svg", {
2613
- ...props,
2614
- viewBox: "0 0 24 24",
2615
- xmlns: "http://www.w3.org/2000/svg",
2616
- children: /* @__PURE__ */ jsx("path", {
2617
- d: "M8.99985 19.9998H8.99718C8.69451 19.9998 8.40785 19.8612 8.21985 19.6252L2.88653 12.9585C2.54119 12.5265 2.61053 11.8985 3.04253 11.5532C3.47586 11.2078 4.10386 11.2785 4.44786 11.7092L9.00518 17.4052L19.5558 4.37053C19.9038 3.9412 20.5318 3.8732 20.9625 4.22253C21.3918 4.57053 21.4585 5.19986 21.1105 5.62919L9.77718 19.6292C9.58651 19.8638 9.30118 19.9998 8.99985 19.9998Z",
2618
- fill: "currentColor"
2619
- })
2620
- });
2621
- //#endregion
2622
2511
  //#region src/components/Icon/icons/CheckmarkCircleIcon.tsx
2623
2512
  const CheckmarkCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
2624
2513
  ...props,
@@ -2643,6 +2532,17 @@ const CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ jsx("svg", {
2643
2532
  })
2644
2533
  });
2645
2534
  //#endregion
2535
+ //#region src/components/Icon/icons/CheckmarkIcon.tsx
2536
+ const CheckmarkIcon = (props) => /* @__PURE__ */ jsx("svg", {
2537
+ ...props,
2538
+ viewBox: "0 0 24 24",
2539
+ xmlns: "http://www.w3.org/2000/svg",
2540
+ children: /* @__PURE__ */ jsx("path", {
2541
+ d: "M8.99985 19.9998H8.99718C8.69451 19.9998 8.40785 19.8612 8.21985 19.6252L2.88653 12.9585C2.54119 12.5265 2.61053 11.8985 3.04253 11.5532C3.47586 11.2078 4.10386 11.2785 4.44786 11.7092L9.00518 17.4052L19.5558 4.37053C19.9038 3.9412 20.5318 3.8732 20.9625 4.22253C21.3918 4.57053 21.4585 5.19986 21.1105 5.62919L9.77718 19.6292C9.58651 19.8638 9.30118 19.9998 8.99985 19.9998Z",
2542
+ fill: "currentColor"
2543
+ })
2544
+ });
2545
+ //#endregion
2646
2546
  //#region src/components/Icon/icons/CheckmarkThreeQuatersCircleIcon.tsx
2647
2547
  const CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
2648
2548
  ...props,
@@ -2691,6 +2591,17 @@ const ClipsIcon = (props) => /* @__PURE__ */ jsx("svg", {
2691
2591
  })
2692
2592
  });
2693
2593
  //#endregion
2594
+ //#region src/components/Icon/icons/ClosedCaptionsIcon.tsx
2595
+ const ClosedCaptionsIcon = (props) => /* @__PURE__ */ jsx("svg", {
2596
+ ...props,
2597
+ viewBox: "0 0 24 24",
2598
+ xmlns: "http://www.w3.org/2000/svg",
2599
+ children: /* @__PURE__ */ jsx("path", {
2600
+ d: "M19 2.66653H4.99999C2.97732 2.66653 1.33333 4.31053 1.33333 6.33319V17.6665C1.33333 19.6892 2.97732 21.3332 4.99999 21.3332H19C21.0226 21.3332 22.6666 19.6892 22.6666 17.6665V6.33319C22.6666 4.31053 21.0226 2.66653 19 2.66653ZM6.33332 11.3332H13C13.552 11.3332 14 11.7812 14 12.3332C14 12.8852 13.552 13.3332 13 13.3332H6.33332C5.78132 13.3332 5.33332 12.8852 5.33332 12.3332C5.33332 11.7812 5.78132 11.3332 6.33332 11.3332ZM7.66665 17.3332H6.33332C5.78132 17.3332 5.33332 16.8852 5.33332 16.3332C5.33332 15.7812 5.78132 15.3332 6.33332 15.3332H7.66665C8.21864 15.3332 8.66664 15.7812 8.66664 16.3332C8.66664 16.8852 8.21864 17.3332 7.66665 17.3332ZM17.6666 17.3332H11C10.448 17.3332 9.99997 16.8852 9.99997 16.3332C9.99997 15.7812 10.448 15.3332 11 15.3332H17.6666C18.2186 15.3332 18.6666 15.7812 18.6666 16.3332C18.6666 16.8852 18.2186 17.3332 17.6666 17.3332ZM17.6666 13.3332H16.3333C15.7813 13.3332 15.3333 12.8852 15.3333 12.3332C15.3333 11.7812 15.7813 11.3332 16.3333 11.3332H17.6666C18.2186 11.3332 18.6666 11.7812 18.6666 12.3332C18.6666 12.8852 18.2186 13.3332 17.6666 13.3332Z",
2601
+ fill: "currentColor"
2602
+ })
2603
+ });
2604
+ //#endregion
2694
2605
  //#region src/components/Icon/icons/CloseIcon.tsx
2695
2606
  const CloseIcon = (props) => /* @__PURE__ */ jsx("svg", {
2696
2607
  ...props,
@@ -2717,17 +2628,6 @@ const CloseOctagonIcon = (props) => /* @__PURE__ */ jsx("svg", {
2717
2628
  })
2718
2629
  });
2719
2630
  //#endregion
2720
- //#region src/components/Icon/icons/ClosedCaptionsIcon.tsx
2721
- const ClosedCaptionsIcon = (props) => /* @__PURE__ */ jsx("svg", {
2722
- ...props,
2723
- viewBox: "0 0 24 24",
2724
- xmlns: "http://www.w3.org/2000/svg",
2725
- children: /* @__PURE__ */ jsx("path", {
2726
- d: "M19 2.66653H4.99999C2.97732 2.66653 1.33333 4.31053 1.33333 6.33319V17.6665C1.33333 19.6892 2.97732 21.3332 4.99999 21.3332H19C21.0226 21.3332 22.6666 19.6892 22.6666 17.6665V6.33319C22.6666 4.31053 21.0226 2.66653 19 2.66653ZM6.33332 11.3332H13C13.552 11.3332 14 11.7812 14 12.3332C14 12.8852 13.552 13.3332 13 13.3332H6.33332C5.78132 13.3332 5.33332 12.8852 5.33332 12.3332C5.33332 11.7812 5.78132 11.3332 6.33332 11.3332ZM7.66665 17.3332H6.33332C5.78132 17.3332 5.33332 16.8852 5.33332 16.3332C5.33332 15.7812 5.78132 15.3332 6.33332 15.3332H7.66665C8.21864 15.3332 8.66664 15.7812 8.66664 16.3332C8.66664 16.8852 8.21864 17.3332 7.66665 17.3332ZM17.6666 17.3332H11C10.448 17.3332 9.99997 16.8852 9.99997 16.3332C9.99997 15.7812 10.448 15.3332 11 15.3332H17.6666C18.2186 15.3332 18.6666 15.7812 18.6666 16.3332C18.6666 16.8852 18.2186 17.3332 17.6666 17.3332ZM17.6666 13.3332H16.3333C15.7813 13.3332 15.3333 12.8852 15.3333 12.3332C15.3333 11.7812 15.7813 11.3332 16.3333 11.3332H17.6666C18.2186 11.3332 18.6666 11.7812 18.6666 12.3332C18.6666 12.8852 18.2186 13.3332 17.6666 13.3332Z",
2727
- fill: "currentColor"
2728
- })
2729
- });
2730
- //#endregion
2731
2631
  //#region src/components/Icon/icons/CmdIcon.tsx
2732
2632
  const CmdIcon = (props) => /* @__PURE__ */ jsx("svg", {
2733
2633
  ...props,
@@ -2741,27 +2641,27 @@ const CmdIcon = (props) => /* @__PURE__ */ jsx("svg", {
2741
2641
  })
2742
2642
  });
2743
2643
  //#endregion
2744
- //#region src/components/Icon/icons/CollapseIcon.tsx
2745
- const CollapseIcon = (props) => /* @__PURE__ */ jsx("svg", {
2644
+ //#region src/components/Icon/icons/CollapseDiagonalIcon.tsx
2645
+ const CollapseDiagonalIcon = (props) => /* @__PURE__ */ jsx("svg", {
2746
2646
  ...props,
2747
2647
  viewBox: "0 0 24 24",
2748
2648
  xmlns: "http://www.w3.org/2000/svg",
2749
2649
  children: /* @__PURE__ */ jsx("path", {
2750
2650
  clipRule: "evenodd",
2751
- d: "M11.9999 7.91987L15.9599 3.95987H15.9572C16.3479 3.5692 16.9812 3.5692 17.3719 3.95987C17.7625 4.35054 17.7625 4.98387 17.3719 5.37454L12.7052 10.0412C12.5105 10.2372 12.2545 10.3345 11.9985 10.3345C11.7425 10.3345 11.4865 10.2359 11.2919 10.0412L6.62521 5.37454C6.23455 4.98387 6.23455 4.35054 6.62521 3.95987C7.01588 3.5692 7.64921 3.5692 8.03988 3.95987L11.9999 7.91987ZM11.2919 13.9599C11.6825 13.5692 12.3159 13.5692 12.7065 13.9599L17.3732 18.6265C17.7639 19.0172 17.7639 19.6505 17.3732 20.0412C17.1785 20.2372 16.9225 20.3345 16.6665 20.3345C16.4105 20.3345 16.1545 20.2359 15.9599 20.0412L11.9999 16.0812L8.03988 20.0412C7.64921 20.4319 7.01588 20.4319 6.62521 20.0412C6.23455 19.6505 6.23455 19.0172 6.62521 18.6265L11.2919 13.9599Z",
2651
+ d: "M19.6253 2.95987C20.0159 2.5692 20.6493 2.5692 21.0399 2.95987L21.0386 2.95854C21.4293 3.3492 21.4293 3.98254 21.0386 4.3732L18.9119 6.49987L20.8026 8.39054C21.1853 8.77454 21.2986 9.34387 21.0919 9.84387C20.8839 10.3439 20.3999 10.6665 19.8599 10.6665H14.6653C13.9293 10.6665 13.3319 10.0679 13.3319 9.3332V4.13854C13.3319 3.5972 13.6546 3.1132 14.1559 2.90654C14.6559 2.69854 15.2279 2.81454 15.6093 3.1972L17.4986 5.08654L19.6253 2.95987ZM4.1386 13.3332H9.33326V13.3345C10.0693 13.3345 10.6666 13.9332 10.6666 14.6679V19.8625C10.6666 20.4039 10.3439 20.8879 9.8426 21.0945C9.67726 21.1625 9.50393 21.1959 9.33193 21.1959C8.98393 21.1959 8.64393 21.0599 8.38926 20.8039L6.49993 18.9145L4.37326 21.0412C4.1786 21.2372 3.9226 21.3345 3.6666 21.3345C3.4106 21.3345 3.1546 21.2359 2.95993 21.0412C2.56926 20.6505 2.56926 20.0172 2.95993 19.6265L5.0866 17.4999L3.19593 15.6092C2.81326 15.2252 2.69993 14.6559 2.9066 14.1559C3.1146 13.6559 3.5986 13.3332 4.1386 13.3332Z",
2752
2652
  fill: "currentColor",
2753
2653
  fillRule: "evenodd"
2754
2654
  })
2755
2655
  });
2756
2656
  //#endregion
2757
- //#region src/components/Icon/icons/CollapseDiagonalIcon.tsx
2758
- const CollapseDiagonalIcon = (props) => /* @__PURE__ */ jsx("svg", {
2657
+ //#region src/components/Icon/icons/CollapseIcon.tsx
2658
+ const CollapseIcon = (props) => /* @__PURE__ */ jsx("svg", {
2759
2659
  ...props,
2760
2660
  viewBox: "0 0 24 24",
2761
2661
  xmlns: "http://www.w3.org/2000/svg",
2762
2662
  children: /* @__PURE__ */ jsx("path", {
2763
2663
  clipRule: "evenodd",
2764
- d: "M19.6253 2.95987C20.0159 2.5692 20.6493 2.5692 21.0399 2.95987L21.0386 2.95854C21.4293 3.3492 21.4293 3.98254 21.0386 4.3732L18.9119 6.49987L20.8026 8.39054C21.1853 8.77454 21.2986 9.34387 21.0919 9.84387C20.8839 10.3439 20.3999 10.6665 19.8599 10.6665H14.6653C13.9293 10.6665 13.3319 10.0679 13.3319 9.3332V4.13854C13.3319 3.5972 13.6546 3.1132 14.1559 2.90654C14.6559 2.69854 15.2279 2.81454 15.6093 3.1972L17.4986 5.08654L19.6253 2.95987ZM4.1386 13.3332H9.33326V13.3345C10.0693 13.3345 10.6666 13.9332 10.6666 14.6679V19.8625C10.6666 20.4039 10.3439 20.8879 9.8426 21.0945C9.67726 21.1625 9.50393 21.1959 9.33193 21.1959C8.98393 21.1959 8.64393 21.0599 8.38926 20.8039L6.49993 18.9145L4.37326 21.0412C4.1786 21.2372 3.9226 21.3345 3.6666 21.3345C3.4106 21.3345 3.1546 21.2359 2.95993 21.0412C2.56926 20.6505 2.56926 20.0172 2.95993 19.6265L5.0866 17.4999L3.19593 15.6092C2.81326 15.2252 2.69993 14.6559 2.9066 14.1559C3.1146 13.6559 3.5986 13.3332 4.1386 13.3332Z",
2664
+ d: "M11.9999 7.91987L15.9599 3.95987H15.9572C16.3479 3.5692 16.9812 3.5692 17.3719 3.95987C17.7625 4.35054 17.7625 4.98387 17.3719 5.37454L12.7052 10.0412C12.5105 10.2372 12.2545 10.3345 11.9985 10.3345C11.7425 10.3345 11.4865 10.2359 11.2919 10.0412L6.62521 5.37454C6.23455 4.98387 6.23455 4.35054 6.62521 3.95987C7.01588 3.5692 7.64921 3.5692 8.03988 3.95987L11.9999 7.91987ZM11.2919 13.9599C11.6825 13.5692 12.3159 13.5692 12.7065 13.9599L17.3732 18.6265C17.7639 19.0172 17.7639 19.6505 17.3732 20.0412C17.1785 20.2372 16.9225 20.3345 16.6665 20.3345C16.4105 20.3345 16.1545 20.2359 15.9599 20.0412L11.9999 16.0812L8.03988 20.0412C7.64921 20.4319 7.01588 20.4319 6.62521 20.0412C6.23455 19.6505 6.23455 19.0172 6.62521 18.6265L11.2919 13.9599Z",
2765
2665
  fill: "currentColor",
2766
2666
  fillRule: "evenodd"
2767
2667
  })
@@ -3053,19 +2953,6 @@ const ErrorIcon = (props) => /* @__PURE__ */ jsx("svg", {
3053
2953
  })
3054
2954
  });
3055
2955
  //#endregion
3056
- //#region src/components/Icon/icons/ExpandIcon.tsx
3057
- const ExpandIcon = (props) => /* @__PURE__ */ jsx("svg", {
3058
- ...props,
3059
- viewBox: "0 0 24 24",
3060
- xmlns: "http://www.w3.org/2000/svg",
3061
- children: /* @__PURE__ */ jsx("path", {
3062
- clipRule: "evenodd",
3063
- d: "M11.2915 2.95987C11.6822 2.5692 12.3155 2.5692 12.7062 2.95987L17.3729 7.62652C17.7635 8.01719 17.7635 8.65052 17.3729 9.04119C17.1782 9.23719 16.9222 9.33452 16.6662 9.33452C16.4102 9.33452 16.1542 9.23585 15.9595 9.04119L11.9995 5.0812L8.03956 9.04119C7.64889 9.43185 7.01556 9.43185 6.62489 9.04119C6.23423 8.65052 6.23423 8.01719 6.62489 7.62652L11.2915 2.95987ZM11.9995 18.9198L15.9595 14.9598H15.9569C16.3475 14.5692 16.9809 14.5692 17.3715 14.9598C17.7622 15.3505 17.7622 15.9838 17.3715 16.3745L12.7049 21.0412C12.5102 21.2372 12.2542 21.3345 11.9982 21.3345C11.7422 21.3345 11.4862 21.2358 11.2915 21.0412L6.62489 16.3745C6.23423 15.9838 6.23423 15.3505 6.62489 14.9598C7.01556 14.5692 7.64889 14.5692 8.03956 14.9598L11.9995 18.9198Z",
3064
- fill: "currentColor",
3065
- fillRule: "evenodd"
3066
- })
3067
- });
3068
- //#endregion
3069
2956
  //#region src/components/Icon/icons/ExpandDiagonalIcon.tsx
3070
2957
  const ExpandDiagonalIcon = (props) => /* @__PURE__ */ jsx("svg", {
3071
2958
  ...props,
@@ -3103,6 +2990,19 @@ const ExpandHorizontalIcon = (props) => /* @__PURE__ */ jsx("svg", {
3103
2990
  })
3104
2991
  });
3105
2992
  //#endregion
2993
+ //#region src/components/Icon/icons/ExpandIcon.tsx
2994
+ const ExpandIcon = (props) => /* @__PURE__ */ jsx("svg", {
2995
+ ...props,
2996
+ viewBox: "0 0 24 24",
2997
+ xmlns: "http://www.w3.org/2000/svg",
2998
+ children: /* @__PURE__ */ jsx("path", {
2999
+ clipRule: "evenodd",
3000
+ d: "M11.2915 2.95987C11.6822 2.5692 12.3155 2.5692 12.7062 2.95987L17.3729 7.62652C17.7635 8.01719 17.7635 8.65052 17.3729 9.04119C17.1782 9.23719 16.9222 9.33452 16.6662 9.33452C16.4102 9.33452 16.1542 9.23585 15.9595 9.04119L11.9995 5.0812L8.03956 9.04119C7.64889 9.43185 7.01556 9.43185 6.62489 9.04119C6.23423 8.65052 6.23423 8.01719 6.62489 7.62652L11.2915 2.95987ZM11.9995 18.9198L15.9595 14.9598H15.9569C16.3475 14.5692 16.9809 14.5692 17.3715 14.9598C17.7622 15.3505 17.7622 15.9838 17.3715 16.3745L12.7049 21.0412C12.5102 21.2372 12.2542 21.3345 11.9982 21.3345C11.7422 21.3345 11.4862 21.2358 11.2915 21.0412L6.62489 16.3745C6.23423 15.9838 6.23423 15.3505 6.62489 14.9598C7.01556 14.5692 7.64889 14.5692 8.03956 14.9598L11.9995 18.9198Z",
3001
+ fill: "currentColor",
3002
+ fillRule: "evenodd"
3003
+ })
3004
+ });
3005
+ //#endregion
3106
3006
  //#region src/components/Icon/icons/FastForwardIcon.tsx
3107
3007
  const FastForwardIcon = (props) => /* @__PURE__ */ jsx("svg", {
3108
3008
  ...props,
@@ -3733,24 +3633,24 @@ const MinimizeIcon = (props) => /* @__PURE__ */ jsx("svg", {
3733
3633
  })
3734
3634
  });
3735
3635
  //#endregion
3736
- //#region src/components/Icon/icons/MinusIcon.tsx
3737
- const MinusIcon = (props) => /* @__PURE__ */ jsx("svg", {
3636
+ //#region src/components/Icon/icons/MinusCircleIcon.tsx
3637
+ const MinusCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
3738
3638
  ...props,
3739
3639
  viewBox: "0 0 24 24",
3740
3640
  xmlns: "http://www.w3.org/2000/svg",
3741
3641
  children: /* @__PURE__ */ jsx("path", {
3742
- d: "M19.6667 12.9999H4.33344C3.7813 12.9999 3.33344 12.552 3.33344 11.9999C3.33344 11.4477 3.7813 10.9999 4.33344 10.9999H19.6667C20.2189 10.9999 20.6667 11.4477 20.6667 11.9999C20.6667 12.552 20.2189 12.9999 19.6667 12.9999Z",
3642
+ d: "M11.9998 1.33321C6.11842 1.33321 1.33309 6.11855 1.33309 11.9999C1.33309 17.8812 6.11842 22.6665 11.9998 22.6665C17.8811 22.6665 22.6664 17.8812 22.6664 11.9999C22.6664 6.11855 17.8811 1.33321 11.9998 1.33321ZM16.3331 12.9999H7.66642C7.11442 12.9999 6.66642 12.5519 6.66642 11.9999C6.66642 11.4479 7.11442 10.9999 7.66642 10.9999H16.3331C16.8851 10.9999 17.3331 11.4479 17.3331 11.9999C17.3331 12.5519 16.8851 12.9999 16.3331 12.9999Z",
3743
3643
  fill: "currentColor"
3744
3644
  })
3745
3645
  });
3746
3646
  //#endregion
3747
- //#region src/components/Icon/icons/MinusCircleIcon.tsx
3748
- const MinusCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
3647
+ //#region src/components/Icon/icons/MinusIcon.tsx
3648
+ const MinusIcon = (props) => /* @__PURE__ */ jsx("svg", {
3749
3649
  ...props,
3750
3650
  viewBox: "0 0 24 24",
3751
3651
  xmlns: "http://www.w3.org/2000/svg",
3752
3652
  children: /* @__PURE__ */ jsx("path", {
3753
- d: "M11.9998 1.33321C6.11842 1.33321 1.33309 6.11855 1.33309 11.9999C1.33309 17.8812 6.11842 22.6665 11.9998 22.6665C17.8811 22.6665 22.6664 17.8812 22.6664 11.9999C22.6664 6.11855 17.8811 1.33321 11.9998 1.33321ZM16.3331 12.9999H7.66642C7.11442 12.9999 6.66642 12.5519 6.66642 11.9999C6.66642 11.4479 7.11442 10.9999 7.66642 10.9999H16.3331C16.8851 10.9999 17.3331 11.4479 17.3331 11.9999C17.3331 12.5519 16.8851 12.9999 16.3331 12.9999Z",
3653
+ d: "M19.6667 12.9999H4.33344C3.7813 12.9999 3.33344 12.552 3.33344 11.9999C3.33344 11.4477 3.7813 10.9999 4.33344 10.9999H19.6667C20.2189 10.9999 20.6667 11.4477 20.6667 11.9999C20.6667 12.552 20.2189 12.9999 19.6667 12.9999Z",
3754
3654
  fill: "currentColor"
3755
3655
  })
3756
3656
  });
@@ -4041,24 +3941,24 @@ const PipIcon = (props) => /* @__PURE__ */ jsx("svg", {
4041
3941
  })
4042
3942
  });
4043
3943
  //#endregion
4044
- //#region src/components/Icon/icons/PlayIcon.tsx
4045
- const PlayIcon = (props) => /* @__PURE__ */ jsx("svg", {
3944
+ //#region src/components/Icon/icons/PlayerIcon.tsx
3945
+ const PlayerIcon = (props) => /* @__PURE__ */ jsx("svg", {
4046
3946
  ...props,
4047
3947
  viewBox: "0 0 24 24",
4048
3948
  xmlns: "http://www.w3.org/2000/svg",
4049
3949
  children: /* @__PURE__ */ jsx("path", {
4050
- d: "M20.1332 9.97052L7.47719 2.96254C6.73986 2.55454 5.8692 2.56654 5.1452 2.9932C4.42787 3.41587 3.99987 4.16253 3.99987 4.99186V19.0078C3.99987 19.8372 4.42787 20.5838 5.1452 21.0065C5.5172 21.2252 5.92653 21.3358 6.33853 21.3358C6.7292 21.3358 7.11986 21.2358 7.47719 21.0385L20.1318 14.0305C20.8732 13.6212 21.3332 12.8425 21.3332 12.0012C21.3332 11.1598 20.8732 10.3799 20.1332 9.97052Z",
3950
+ d: "M18.9998 3.99987H4.9998C2.97714 3.99987 1.33315 5.64386 1.33315 7.66653V16.3332C1.33315 18.3558 2.97714 19.9998 4.9998 19.9998H18.9998C21.0224 19.9998 22.6664 18.3558 22.6664 16.3332V7.66653C22.6664 5.64386 21.0224 3.99987 18.9998 3.99987ZM15.0371 12.8638L10.1705 15.7025C10.0131 15.7945 9.83979 15.8412 9.66646 15.8412C9.49579 15.8412 9.32513 15.7958 9.16779 15.7065C8.85313 15.5265 8.66646 15.2025 8.66646 14.8398V9.16119C8.66646 8.79852 8.85446 8.47452 9.16779 8.29452C9.48246 8.11319 9.85712 8.11586 10.1691 8.29719L15.0358 11.1359C15.3464 11.3172 15.5331 11.6398 15.5331 11.9998C15.5331 12.3598 15.3491 12.6825 15.0371 12.8638Z",
4051
3951
  fill: "currentColor"
4052
3952
  })
4053
3953
  });
4054
3954
  //#endregion
4055
- //#region src/components/Icon/icons/PlayerIcon.tsx
4056
- const PlayerIcon = (props) => /* @__PURE__ */ jsx("svg", {
3955
+ //#region src/components/Icon/icons/PlayIcon.tsx
3956
+ const PlayIcon = (props) => /* @__PURE__ */ jsx("svg", {
4057
3957
  ...props,
4058
3958
  viewBox: "0 0 24 24",
4059
3959
  xmlns: "http://www.w3.org/2000/svg",
4060
3960
  children: /* @__PURE__ */ jsx("path", {
4061
- d: "M18.9998 3.99987H4.9998C2.97714 3.99987 1.33315 5.64386 1.33315 7.66653V16.3332C1.33315 18.3558 2.97714 19.9998 4.9998 19.9998H18.9998C21.0224 19.9998 22.6664 18.3558 22.6664 16.3332V7.66653C22.6664 5.64386 21.0224 3.99987 18.9998 3.99987ZM15.0371 12.8638L10.1705 15.7025C10.0131 15.7945 9.83979 15.8412 9.66646 15.8412C9.49579 15.8412 9.32513 15.7958 9.16779 15.7065C8.85313 15.5265 8.66646 15.2025 8.66646 14.8398V9.16119C8.66646 8.79852 8.85446 8.47452 9.16779 8.29452C9.48246 8.11319 9.85712 8.11586 10.1691 8.29719L15.0358 11.1359C15.3464 11.3172 15.5331 11.6398 15.5331 11.9998C15.5331 12.3598 15.3491 12.6825 15.0371 12.8638Z",
3961
+ d: "M20.1332 9.97052L7.47719 2.96254C6.73986 2.55454 5.8692 2.56654 5.1452 2.9932C4.42787 3.41587 3.99987 4.16253 3.99987 4.99186V19.0078C3.99987 19.8372 4.42787 20.5838 5.1452 21.0065C5.5172 21.2252 5.92653 21.3358 6.33853 21.3358C6.7292 21.3358 7.11986 21.2358 7.47719 21.0385L20.1318 14.0305C20.8732 13.6212 21.3332 12.8425 21.3332 12.0012C21.3332 11.1598 20.8732 10.3799 20.1332 9.97052Z",
4062
3962
  fill: "currentColor"
4063
3963
  })
4064
3964
  });
@@ -4210,19 +4110,6 @@ const ReactIcon = (props) => /* @__PURE__ */ jsx("svg", {
4210
4110
  })
4211
4111
  });
4212
4112
  //#endregion
4213
- //#region src/components/Icon/icons/RecordIcon.tsx
4214
- const RecordIcon = (props) => /* @__PURE__ */ jsx("svg", {
4215
- ...props,
4216
- viewBox: "0 0 24 24",
4217
- xmlns: "http://www.w3.org/2000/svg",
4218
- children: /* @__PURE__ */ jsx("path", {
4219
- clipRule: "evenodd",
4220
- d: "M1.33308 11.9998C1.33308 6.11853 6.11841 1.33321 11.9997 1.33321C17.881 1.33321 22.6664 6.11853 22.6664 11.9998C22.6664 17.8812 17.881 22.6665 11.9997 22.6665C6.11841 22.6665 1.33308 17.8812 1.33308 11.9998ZM3.33308 11.9998C3.33308 16.7785 7.22107 20.6665 11.9997 20.6665C16.7784 20.6665 20.6664 16.7785 20.6664 11.9998C20.6664 7.22119 16.7784 3.3332 11.9997 3.3332C7.22107 3.3332 3.33308 7.22119 3.33308 11.9998ZM18.6664 11.9998C18.6664 15.6817 15.6816 18.6665 11.9997 18.6665C8.31783 18.6665 5.33307 15.6817 5.33307 11.9998C5.33307 8.31796 8.31783 5.3332 11.9997 5.3332C15.6816 5.3332 18.6664 8.31796 18.6664 11.9998Z",
4221
- fill: "currentColor",
4222
- fillRule: "evenodd"
4223
- })
4224
- });
4225
- //#endregion
4226
4113
  //#region src/components/Icon/icons/RecordGroupIcon.tsx
4227
4114
  const RecordGroupIcon = (props) => /* @__PURE__ */ jsxs("svg", {
4228
4115
  ...props,
@@ -4254,6 +4141,19 @@ const RecordGroupIcon = (props) => /* @__PURE__ */ jsxs("svg", {
4254
4141
  ]
4255
4142
  });
4256
4143
  //#endregion
4144
+ //#region src/components/Icon/icons/RecordIcon.tsx
4145
+ const RecordIcon = (props) => /* @__PURE__ */ jsx("svg", {
4146
+ ...props,
4147
+ viewBox: "0 0 24 24",
4148
+ xmlns: "http://www.w3.org/2000/svg",
4149
+ children: /* @__PURE__ */ jsx("path", {
4150
+ clipRule: "evenodd",
4151
+ d: "M1.33308 11.9998C1.33308 6.11853 6.11841 1.33321 11.9997 1.33321C17.881 1.33321 22.6664 6.11853 22.6664 11.9998C22.6664 17.8812 17.881 22.6665 11.9997 22.6665C6.11841 22.6665 1.33308 17.8812 1.33308 11.9998ZM3.33308 11.9998C3.33308 16.7785 7.22107 20.6665 11.9997 20.6665C16.7784 20.6665 20.6664 16.7785 20.6664 11.9998C20.6664 7.22119 16.7784 3.3332 11.9997 3.3332C7.22107 3.3332 3.33308 7.22119 3.33308 11.9998ZM18.6664 11.9998C18.6664 15.6817 15.6816 18.6665 11.9997 18.6665C8.31783 18.6665 5.33307 15.6817 5.33307 11.9998C5.33307 8.31796 8.31783 5.3332 11.9997 5.3332C15.6816 5.3332 18.6664 8.31796 18.6664 11.9998Z",
4152
+ fill: "currentColor",
4153
+ fillRule: "evenodd"
4154
+ })
4155
+ });
4156
+ //#endregion
4257
4157
  //#region src/components/Icon/icons/RedoIcon.tsx
4258
4158
  const RedoIcon = (props) => /* @__PURE__ */ jsx("svg", {
4259
4159
  ...props,
@@ -4377,27 +4277,27 @@ const RoundnessIcon = (props) => /* @__PURE__ */ jsx("svg", {
4377
4277
  })
4378
4278
  });
4379
4279
  //#endregion
4380
- //#region src/components/Icon/icons/SaveIcon.tsx
4381
- const SaveIcon = (props) => /* @__PURE__ */ jsx("svg", {
4280
+ //#region src/components/Icon/icons/SaveAsCopyIcon.tsx
4281
+ const SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx("svg", {
4382
4282
  ...props,
4383
4283
  viewBox: "0 0 24 24",
4384
4284
  xmlns: "http://www.w3.org/2000/svg",
4385
4285
  children: /* @__PURE__ */ jsx("path", {
4386
- d: "M21.3155 6.5692L17.4301 2.68387C16.9888 2.24254 16.4035 1.99987 15.7808 1.99987H5.87949C3.74083 1.99987 1.9995 3.7412 1.9995 5.87986V18.1198C1.9995 20.2585 3.74083 21.9998 5.87949 21.9998H18.1195C20.2581 21.9998 21.9995 20.2585 21.9995 18.1198V8.21852C21.9995 7.59586 21.7568 7.00919 21.3155 6.5692ZM6.66616 3.99987H14.6661V6.66653C14.6661 7.39986 14.0661 7.99986 13.3328 7.99986H7.99949C7.26616 7.99986 6.66616 7.39986 6.66616 6.66653V3.99987ZM17.3328 19.9998H6.66616V14.6665C6.66616 13.9332 7.26616 13.3332 7.99949 13.3332H15.9995C16.7328 13.3332 17.3328 13.9332 17.3328 14.6665V19.9998Z",
4387
- fill: "currentColor"
4286
+ clipRule: "evenodd",
4287
+ d: "M2.7461 16.1438C2.81944 16.6398 3.24743 16.9972 3.7341 16.9972V16.9958C3.78343 16.9958 3.83277 16.9932 3.8821 16.9852C4.42743 16.9052 4.8061 16.3958 4.72476 15.8492L3.35277 6.61719C3.2861 6.17719 3.39543 5.73719 3.66077 5.37986C3.92477 5.02253 4.3141 4.7892 4.7541 4.72386L13.9861 3.35053C14.7527 3.23453 15.4874 3.6572 15.7767 4.3732C15.9847 4.88653 16.5701 5.13453 17.0781 4.92653C17.5914 4.71986 17.8381 4.1372 17.6314 3.6252C16.9954 2.0492 15.3714 1.12387 13.6927 1.3732L4.46077 2.7452C3.49143 2.8892 2.63677 3.40253 2.0541 4.1892C1.47011 4.97586 1.22877 5.94253 1.37277 6.91186L2.7461 16.1438ZM9.6661 5.99986H18.9994C21.0244 5.99986 22.6661 7.64148 22.6661 9.66652V18.9998C22.6661 21.0249 21.0244 22.6665 18.9994 22.6665H9.6661C7.64106 22.6665 5.99944 21.0249 5.99944 18.9998V9.66652C5.99944 7.64148 7.64106 5.99986 9.6661 5.99986Z",
4288
+ fill: "currentColor",
4289
+ fillRule: "evenodd"
4388
4290
  })
4389
4291
  });
4390
4292
  //#endregion
4391
- //#region src/components/Icon/icons/SaveAsCopyIcon.tsx
4392
- const SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx("svg", {
4293
+ //#region src/components/Icon/icons/SaveIcon.tsx
4294
+ const SaveIcon = (props) => /* @__PURE__ */ jsx("svg", {
4393
4295
  ...props,
4394
4296
  viewBox: "0 0 24 24",
4395
4297
  xmlns: "http://www.w3.org/2000/svg",
4396
4298
  children: /* @__PURE__ */ jsx("path", {
4397
- clipRule: "evenodd",
4398
- d: "M2.7461 16.1438C2.81944 16.6398 3.24743 16.9972 3.7341 16.9972V16.9958C3.78343 16.9958 3.83277 16.9932 3.8821 16.9852C4.42743 16.9052 4.8061 16.3958 4.72476 15.8492L3.35277 6.61719C3.2861 6.17719 3.39543 5.73719 3.66077 5.37986C3.92477 5.02253 4.3141 4.7892 4.7541 4.72386L13.9861 3.35053C14.7527 3.23453 15.4874 3.6572 15.7767 4.3732C15.9847 4.88653 16.5701 5.13453 17.0781 4.92653C17.5914 4.71986 17.8381 4.1372 17.6314 3.6252C16.9954 2.0492 15.3714 1.12387 13.6927 1.3732L4.46077 2.7452C3.49143 2.8892 2.63677 3.40253 2.0541 4.1892C1.47011 4.97586 1.22877 5.94253 1.37277 6.91186L2.7461 16.1438ZM9.6661 5.99986H18.9994C21.0244 5.99986 22.6661 7.64148 22.6661 9.66652V18.9998C22.6661 21.0249 21.0244 22.6665 18.9994 22.6665H9.6661C7.64106 22.6665 5.99944 21.0249 5.99944 18.9998V9.66652C5.99944 7.64148 7.64106 5.99986 9.6661 5.99986Z",
4399
- fill: "currentColor",
4400
- fillRule: "evenodd"
4299
+ d: "M21.3155 6.5692L17.4301 2.68387C16.9888 2.24254 16.4035 1.99987 15.7808 1.99987H5.87949C3.74083 1.99987 1.9995 3.7412 1.9995 5.87986V18.1198C1.9995 20.2585 3.74083 21.9998 5.87949 21.9998H18.1195C20.2581 21.9998 21.9995 20.2585 21.9995 18.1198V8.21852C21.9995 7.59586 21.7568 7.00919 21.3155 6.5692ZM6.66616 3.99987H14.6661V6.66653C14.6661 7.39986 14.0661 7.99986 13.3328 7.99986H7.99949C7.26616 7.99986 6.66616 7.39986 6.66616 6.66653V3.99987ZM17.3328 19.9998H6.66616V14.6665C6.66616 13.9332 7.26616 13.3332 7.99949 13.3332H15.9995C16.7328 13.3332 17.3328 13.9332 17.3328 14.6665V19.9998Z",
4300
+ fill: "currentColor"
4401
4301
  })
4402
4302
  });
4403
4303
  //#endregion
@@ -4639,18 +4539,6 @@ const TeleprompterIcon = (props) => /* @__PURE__ */ jsx("svg", {
4639
4539
  })
4640
4540
  });
4641
4541
  //#endregion
4642
- //#region src/components/Icon/icons/TextIcon.tsx
4643
- const TextIcon = (props) => /* @__PURE__ */ jsx("svg", {
4644
- ...props,
4645
- viewBox: "0 0 24 24",
4646
- xmlns: "http://www.w3.org/2000/svg",
4647
- children: /* @__PURE__ */ jsx("path", {
4648
- transform: "translate(3.334 2.664)",
4649
- d: "M15.3339 0C15.7126 4.39001e-05 16.0592 0.215079 16.2285 0.553711L17.2285 2.55371C17.4764 3.04837 17.2749 3.64787 16.7802 3.89453C16.6376 3.96652 16.4842 4.00195 16.3349 4.00195C15.9683 4.00186 15.6154 3.79881 15.4394 3.44824L14.7148 2.00195H9.66694V16.668H11.6669C12.2188 16.668 12.6668 17.1161 12.6669 17.668C12.6669 18.2199 12.2189 18.6679 11.6669 18.668H5.66694C5.11494 18.668 4.66694 18.22 4.66694 17.668C4.66712 17.1161 5.11505 16.668 5.66694 16.668H7.66694V2.00195H2.61909L1.89546 3.44824C1.64879 3.94158 1.04833 4.14253 0.553663 3.89453C0.0592901 3.64647 -0.141039 3.0469 0.105421 2.55371L1.10542 0.553711C1.27475 0.215044 1.62226 0 2.00093 0H15.3339Z",
4650
- fill: "currentColor"
4651
- })
4652
- });
4653
- //#endregion
4654
4542
  //#region src/components/Icon/icons/TextAllCapsIcon.tsx
4655
4543
  const TextAllCapsIcon = (props) => /* @__PURE__ */ jsx("svg", {
4656
4544
  ...props,
@@ -4697,6 +4585,18 @@ const TextCenterAlignIcon = (props) => /* @__PURE__ */ jsx("svg", {
4697
4585
  })
4698
4586
  });
4699
4587
  //#endregion
4588
+ //#region src/components/Icon/icons/TextIcon.tsx
4589
+ const TextIcon = (props) => /* @__PURE__ */ jsx("svg", {
4590
+ ...props,
4591
+ viewBox: "0 0 24 24",
4592
+ xmlns: "http://www.w3.org/2000/svg",
4593
+ children: /* @__PURE__ */ jsx("path", {
4594
+ transform: "translate(3.334 2.664)",
4595
+ d: "M15.3339 0C15.7126 4.39001e-05 16.0592 0.215079 16.2285 0.553711L17.2285 2.55371C17.4764 3.04837 17.2749 3.64787 16.7802 3.89453C16.6376 3.96652 16.4842 4.00195 16.3349 4.00195C15.9683 4.00186 15.6154 3.79881 15.4394 3.44824L14.7148 2.00195H9.66694V16.668H11.6669C12.2188 16.668 12.6668 17.1161 12.6669 17.668C12.6669 18.2199 12.2189 18.6679 11.6669 18.668H5.66694C5.11494 18.668 4.66694 18.22 4.66694 17.668C4.66712 17.1161 5.11505 16.668 5.66694 16.668H7.66694V2.00195H2.61909L1.89546 3.44824C1.64879 3.94158 1.04833 4.14253 0.553663 3.89453C0.0592901 3.64647 -0.141039 3.0469 0.105421 2.55371L1.10542 0.553711C1.27475 0.215044 1.62226 0 2.00093 0H15.3339Z",
4596
+ fill: "currentColor"
4597
+ })
4598
+ });
4599
+ //#endregion
4700
4600
  //#region src/components/Icon/icons/TextItalicsIcon.tsx
4701
4601
  const TextItalicsIcon = (props) => /* @__PURE__ */ jsx("svg", {
4702
4602
  ...props,
@@ -5383,32 +5283,6 @@ const iconMap = {
5383
5283
  "zoom-out": ZoomOutIcon
5384
5284
  };
5385
5285
  //#endregion
5386
- //#region src/private/hooks/useResponsiveProp/useResponsiveProp.ts
5387
- const isResponsiveObject = (values) => {
5388
- return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
5389
- };
5390
- /** How to use in a component
5391
- * const Example = ({ someProp }: ExampleProps) => {
5392
- * const somePropResponsiveValue = useResponsiveProp<ExampleProps['someProp']>(someProp);
5393
- *
5394
- * return <div>{somePropResponsiveValue}</div>;
5395
- * }
5396
- *
5397
- * The end use could implement either:
5398
- * <Example someProp="a normal value" />
5399
- * <Example someProp={{ base: 'baselinevalue', isMdAndUp: 'value for medium screens', isLgAndUp: 'value for larger screens' }} />
5400
- */
5401
- const useResponsiveProp = (values) => {
5402
- const activeMediaQueries = useActiveMq();
5403
- return useMemo(() => {
5404
- if (isRecord(values) && isResponsiveObject(values)) {
5405
- const mq = activeMediaQueries.find((key) => key in values);
5406
- return isNotUndefined(mq) && isNotUndefined(values[mq]) ? values[mq] : values.base;
5407
- }
5408
- return values;
5409
- }, [activeMediaQueries, values]);
5410
- };
5411
- //#endregion
5412
5286
  //#region src/components/Icon/Icon.tsx
5413
5287
  const iconSizeMap = {
5414
5288
  sm: "12",
@@ -5592,13 +5466,174 @@ const Link = ({ beforeAction, children, type, disabled = false, colorScheme = "i
5592
5466
  return null;
5593
5467
  };
5594
5468
  //#endregion
5595
- //#region src/components/Button/Button.tsx
5596
- const isLink = (props) => isNotUndefined(props.href);
5597
- const StyledButton$2 = styled.button`
5598
- ${buttonResetCss}
5599
- ${({ $colorScheme }) => getColorScheme($colorScheme)}
5600
- ${({ $size }) => buttonSizeStyles[$size]}
5601
- ${({ $variant }) => buttonVariantsStyles[$variant]}
5469
+ //#region src/components/Button/buttonStyles.tsx
5470
+ const buttonSmallStyles = css`
5471
+ --button-padding-vertical: var(--wui-space-01);
5472
+ --button-padding-horizontal: var(--wui-space-02);
5473
+ --button-label-padding-horizontal: var(--wui-space-01);
5474
+ --button-typography-family: var(--wui-typography-family-default);
5475
+ --button-typography-size: var(--wui-typography-label-4-font-size);
5476
+ --button-typography-weight: var(--wui-typography-label-4-font-weight);
5477
+ --button-typography-line-height: 16px;
5478
+ --button-icon-size: 12px;
5479
+ --button-label-gap: 4px;
5480
+ `;
5481
+ const buttonMediumStyles = css`
5482
+ --button-padding-vertical: var(--wui-space-02);
5483
+ --button-padding-horizontal: var(--wui-space-02);
5484
+ --button-label-padding-horizontal: 6px;
5485
+ --button-typography-family: var(--wui-typography-family-default);
5486
+ --button-typography-size: var(--wui-typography-label-3-font-size);
5487
+ --button-typography-weight: var(--wui-typography-label-3-font-weight);
5488
+ --button-typography-line-height: 16px;
5489
+ --button-icon-size: 16px;
5490
+ --button-label-gap: 6px;
5491
+ `;
5492
+ const buttonLargeStyles = css`
5493
+ --button-padding-vertical: var(--wui-space-02);
5494
+ --button-padding-horizontal: var(--wui-space-02);
5495
+ --button-label-padding-horizontal: var(--wui-space-02);
5496
+ --button-typography-family: var(--wui-typography-family-default);
5497
+ --button-typography-size: var(--wui-typography-label-1-font-size);
5498
+ --button-typography-weight: var(--wui-typography-label-1-font-weight);
5499
+ --button-typography-line-height: 24px;
5500
+ --button-icon-size: 24px;
5501
+ --button-label-gap: 8px;
5502
+ `;
5503
+ const buttonExtraLargeStyles = css`
5504
+ --button-padding-vertical: var(--wui-space-03);
5505
+ --button-padding-horizontal: var(--wui-space-03);
5506
+ --button-label-padding-horizontal: var(--wui-space-02);
5507
+ --button-typography-family: var(--wui-typography-family-brand);
5508
+ --button-typography-size: 18px;
5509
+ --button-typography-weight: var(--wui-typography-weight-brand-bold);
5510
+ --button-typography-line-height: 24px;
5511
+ --button-icon-size: 24px;
5512
+ --button-label-gap: 8px;
5513
+ `;
5514
+ const ghostButtonVariant = css`
5515
+ --button-color-bg-override: transparent;
5516
+ --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
5517
+ --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
5518
+ --button-color-text: var(--wui-color-text-button);
5519
+ --button-color-icon: var(--wui-color-icon);
5520
+ `;
5521
+ const outlineButtonVariant = css`
5522
+ ${ghostButtonVariant};
5523
+ --button-color-border: var(--wui-color-border);
5524
+
5525
+ box-shadow: 0 0 0 2px var(--button-color-border) inset;
5526
+ `;
5527
+ const softButtonVariant = css`
5528
+ --button-color-bg: var(--wui-color-bg-surface-secondary);
5529
+ --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
5530
+ --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
5531
+ --button-color-text: var(--wui-color-text-button);
5532
+ --button-color-icon: var(--wui-color-icon);
5533
+ `;
5534
+ const solidButtonVariant = css`
5535
+ --button-color-bg: var(--wui-color-bg-fill);
5536
+ --button-color-bg-hover: var(--wui-color-bg-fill-hover);
5537
+ --button-color-bg-active: var(--wui-color-bg-fill-active);
5538
+ --button-color-text: var(--wui-color-text-on-fill);
5539
+ --button-color-icon: var(--wui-color-icon-on-fill);
5540
+ `;
5541
+ const disabledButtonVariant = css`
5542
+ --button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
5543
+ --button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
5544
+ --button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
5545
+ --button-color-text: var(--wui-color-text-disabled);
5546
+ --button-color-icon: var(--wui-color-icon-disabled);
5547
+ --button-color-border: var(--wui-color-border-disabled);
5548
+ `;
5549
+ const pressedButtonVariant = css`
5550
+ --button-color-bg: var(--wui-color-bg-surface-selected);
5551
+ --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
5552
+ --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
5553
+ --button-color-text: var(--wui-color-text-selected);
5554
+ --button-color-icon: var(--wui-color-icon-selected);
5555
+ --button-color-border: var(--wui-color-border-selected);
5556
+ `;
5557
+ const buttonBaseStyles = css`
5558
+ border-radius: var(--wui-border-radius-rounded);
5559
+ font-family: var(--button-typography-family);
5560
+ font-size: var(--button-typography-size);
5561
+ font-weight: var(--button-typography-weight);
5562
+ line-height: var(--button-typography-line-height);
5563
+ padding: var(--button-padding-vertical) var(--button-padding-horizontal);
5564
+ background-color: var(--button-color-bg);
5565
+ color: var(--button-color-text);
5566
+ transition:
5567
+ background-color var(--wui-motion-duration-01) var(--wui-motion-ease),
5568
+ box-shadow var(--wui-motion-duration-01) var(--wui-motion-ease);
5569
+
5570
+ /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
5571
+ && {
5572
+ & svg {
5573
+ color: var(--button-color-icon);
5574
+ width: var(--button-icon-size);
5575
+ height: var(--button-icon-size);
5576
+ flex: 0 0 var(--button-icon-size);
5577
+ }
5578
+ }
5579
+
5580
+ &:focus {
5581
+ outline: none;
5582
+ }
5583
+
5584
+ &:focus-visible,
5585
+ &.force-state-focus {
5586
+ --wui-button-focus-color: var(--wui-color-focus-ring);
5587
+
5588
+ background-color: var(--button-color-bg-hover);
5589
+ box-shadow:
5590
+ inset 0 0 0 2px var(--wui-button-focus-color),
5591
+ inset 0 0 0 3px var(--wui-color-bg-app),
5592
+ inset 0 0 0 5px var(--button-color-border, transparent);
5593
+
5594
+ &[aria-disabled='true'] {
5595
+ --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
5596
+ }
5597
+ }
5598
+
5599
+ &:hover:not([aria-disabled='true']),
5600
+ &.force-state-hover {
5601
+ background-color: var(--button-color-bg-hover);
5602
+ }
5603
+
5604
+ &:active:not([aria-disabled='true']),
5605
+ &.force-state-active {
5606
+ background-color: var(--button-color-bg-active);
5607
+ }
5608
+
5609
+ &[aria-disabled='true'] {
5610
+ ${disabledButtonVariant};
5611
+ }
5612
+
5613
+ &[aria-pressed='true'] {
5614
+ ${pressedButtonVariant};
5615
+ }
5616
+ `;
5617
+ const buttonVariantsStyles = {
5618
+ ghost: ghostButtonVariant,
5619
+ outline: outlineButtonVariant,
5620
+ soft: softButtonVariant,
5621
+ solid: solidButtonVariant
5622
+ };
5623
+ const buttonSizeStyles = {
5624
+ sm: buttonSmallStyles,
5625
+ md: buttonMediumStyles,
5626
+ lg: buttonLargeStyles,
5627
+ xl: buttonExtraLargeStyles
5628
+ };
5629
+ //#endregion
5630
+ //#region src/components/Button/Button.tsx
5631
+ const isLink = (props) => isNotUndefined(props.href);
5632
+ const StyledButton$2 = styled.button`
5633
+ ${buttonResetCss}
5634
+ ${({ $colorScheme }) => getColorScheme($colorScheme)}
5635
+ ${({ $size }) => buttonSizeStyles[$size]}
5636
+ ${({ $variant }) => buttonVariantsStyles[$variant]}
5602
5637
  ${({ $unstyled }) => !$unstyled && buttonBaseStyles}
5603
5638
  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "fit-content"};
5604
5639
  text-align: center;
@@ -5836,44 +5871,6 @@ const ActionButton = ({ icon, colorScheme = "standard", disabled = false, forceS
5836
5871
  });
5837
5872
  };
5838
5873
  //#endregion
5839
- //#region src/components/Avatar/formatNameForDisplay.tsx
5840
- const containsEmojiCharacter = (char) => {
5841
- return /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu.test(char);
5842
- };
5843
- const formatNameForDisplay = (name) => {
5844
- if (isNil(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) return "U";
5845
- return name.trim().slice(0, 1).toUpperCase();
5846
- };
5847
- //#endregion
5848
- //#region src/components/Image/Image.tsx
5849
- const getFillStyle$1 = (fillContainer) => {
5850
- if (fillContainer === "horizontal") return "width: 100%;";
5851
- if (fillContainer === "vertical") return "height: 100%;";
5852
- if (fillContainer === true) return `
5853
- width: 100%;
5854
- height: 100%;
5855
- `;
5856
- };
5857
- const StyledImage = styled.img`
5858
- border-radius: ${({ $borderRadius }) => isNotNil($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
5859
- ${({ $fillContainer }) => getFillStyle$1($fillContainer)};
5860
- object-fit: ${({ $objFit }) => $objFit};
5861
- object-position: ${({ $objPosition }) => $objPosition};
5862
- `;
5863
- const Image = ({ src, alt, borderRadius, fill: fillContainer = false, fit: objFit, loading = "lazy", position: objPosition, onLoad, onError, ...props }) => /* @__PURE__ */ jsx(StyledImage, {
5864
- $borderRadius: borderRadius,
5865
- $fillContainer: fillContainer,
5866
- $objFit: objFit,
5867
- $objPosition: objPosition,
5868
- alt,
5869
- loading,
5870
- onError,
5871
- onLoad,
5872
- src,
5873
- ...props
5874
- });
5875
- Image.displayName = "Image_UI";
5876
- //#endregion
5877
5874
  //#region src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
5878
5875
  const defaultColorSchemeOptions = ["standard", "inherit"];
5879
5876
  const semanticColorSchemeOptions = [
@@ -5916,6 +5913,44 @@ const ColorSchemeWrapper = ({ __nav = false, colorScheme = "inherit", children,
5916
5913
  });
5917
5914
  ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
5918
5915
  //#endregion
5916
+ //#region src/components/Image/Image.tsx
5917
+ const getFillStyle$1 = (fillContainer) => {
5918
+ if (fillContainer === "horizontal") return "width: 100%;";
5919
+ if (fillContainer === "vertical") return "height: 100%;";
5920
+ if (fillContainer === true) return `
5921
+ width: 100%;
5922
+ height: 100%;
5923
+ `;
5924
+ };
5925
+ const StyledImage = styled.img`
5926
+ border-radius: ${({ $borderRadius }) => isNotNil($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
5927
+ ${({ $fillContainer }) => getFillStyle$1($fillContainer)};
5928
+ object-fit: ${({ $objFit }) => $objFit};
5929
+ object-position: ${({ $objPosition }) => $objPosition};
5930
+ `;
5931
+ const Image = ({ src, alt, borderRadius, fill: fillContainer = false, fit: objFit, loading = "lazy", position: objPosition, onLoad, onError, ...props }) => /* @__PURE__ */ jsx(StyledImage, {
5932
+ $borderRadius: borderRadius,
5933
+ $fillContainer: fillContainer,
5934
+ $objFit: objFit,
5935
+ $objPosition: objPosition,
5936
+ alt,
5937
+ loading,
5938
+ onError,
5939
+ onLoad,
5940
+ src,
5941
+ ...props
5942
+ });
5943
+ Image.displayName = "Image_UI";
5944
+ //#endregion
5945
+ //#region src/components/Avatar/formatNameForDisplay.tsx
5946
+ const containsEmojiCharacter = (char) => {
5947
+ return /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu.test(char);
5948
+ };
5949
+ const formatNameForDisplay = (name) => {
5950
+ if (isNil(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) return "U";
5951
+ return name.trim().slice(0, 1).toUpperCase();
5952
+ };
5953
+ //#endregion
5919
5954
  //#region src/components/Avatar/Avatar.tsx
5920
5955
  const avatarSizeMap = {
5921
5956
  sm: 16,
@@ -6215,10 +6250,70 @@ const BoxComponent = ({ ref, alignContent = "stretch", alignItems = "flex-start"
6215
6250
  children
6216
6251
  });
6217
6252
  };
6218
- /**
6219
- * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
6220
- */
6221
- const Box = makePolymorphic(BoxComponent);
6253
+ /**
6254
+ * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
6255
+ */
6256
+ const Box = makePolymorphic(BoxComponent);
6257
+ //#endregion
6258
+ //#region src/components/ButtonGroup/ButtonGroup.tsx
6259
+ const getAlignment = (align) => {
6260
+ if (align === "center") return "center";
6261
+ if (align === "left") return "flex-start";
6262
+ if (align === "right") return "flex-end";
6263
+ return "flex-start";
6264
+ };
6265
+ const ButtonGroupComponent = styled.div`
6266
+ display: flex;
6267
+
6268
+ /* this helps ensure that primary buttons appear at the top of the column */
6269
+ flex-direction: ${({ $collapse, $align }) => {
6270
+ if (!$collapse) return "row";
6271
+ return $align === "right" ? "column-reverse" : "column";
6272
+ }};
6273
+ gap: var(--wui-space-02);
6274
+ align-items: center;
6275
+ justify-content: ${({ $align }) => getAlignment($align)};
6276
+ width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
6277
+
6278
+ ${mq.smAndUp} {
6279
+ flex-direction: row;
6280
+ }
6281
+
6282
+ &:not([data-wistia-ui-icon-button]) {
6283
+ ${mq.smAndDown} {
6284
+ width: 100%;
6285
+ }
6286
+ }
6287
+
6288
+ ${({ $buttonSize }) => $buttonSize !== "natural" && css`
6289
+ button,
6290
+ a {
6291
+ ${buttonSizeStyles[$buttonSize]}
6292
+ }
6293
+
6294
+ [data-wistia-ui-icon-button] {
6295
+ height: var(--icon-button-size-${$buttonSize});
6296
+ width: var(--icon-button-size-${$buttonSize});
6297
+ }
6298
+ `}
6299
+ `;
6300
+ /**
6301
+ * ButtonGroup is a layout component that groups buttons together,
6302
+ * with a standardized gap between them.
6303
+ */
6304
+ const ButtonGroup = ({ children, align = "left", fullWidth = false, collapseOnSmallScreens = true, buttonSize = "natural", ...props }) => {
6305
+ const responsiveButtonSize = useResponsiveProp(buttonSize);
6306
+ if (isNil(children)) return null;
6307
+ return /* @__PURE__ */ jsx(ButtonGroupComponent, {
6308
+ $align: align,
6309
+ $buttonSize: responsiveButtonSize,
6310
+ $collapse: collapseOnSmallScreens,
6311
+ $fullWidth: fullWidth,
6312
+ ...props,
6313
+ children
6314
+ });
6315
+ };
6316
+ ButtonGroup.displayName = "ButtonGroup_UI";
6222
6317
  //#endregion
6223
6318
  //#region src/private/helpers/truncateString/truncateString.ts
6224
6319
  /**
@@ -6355,6 +6450,37 @@ const HeadingComponent = ({ ref, align = "left", children, colorScheme = "inheri
6355
6450
  */
6356
6451
  const Heading = makePolymorphic(HeadingComponent);
6357
6452
  //#endregion
6453
+ //#region src/components/IconButton/IconButton.tsx
6454
+ const StyledButton$1 = styled(Button)`
6455
+ --icon-button-size-sm: 24px;
6456
+ --icon-button-size-md: 32px;
6457
+ --icon-button-size-lg: 40px;
6458
+ --icon-button-size-xl: 48px;
6459
+
6460
+ border-radius: 50%;
6461
+ height: ${({ size }) => `var(--icon-button-size-${size})`};
6462
+ width: ${({ size }) => `var(--icon-button-size-${size})`};
6463
+ display: flex;
6464
+ justify-content: center;
6465
+ align-items: center;
6466
+ line-height: 1;
6467
+ `;
6468
+ /**
6469
+ * IconButton behaves like a [Button](/components/Button),
6470
+ * but only accepts an [Icon](/components/Icon) as a child.
6471
+ */
6472
+ const IconButton = ({ children, label, size = "md", ref, ...props }) => {
6473
+ const responsiveSize = useResponsiveProp(size);
6474
+ return /* @__PURE__ */ jsx(StyledButton$1, {
6475
+ ...props,
6476
+ ref,
6477
+ "aria-label": label,
6478
+ "data-wistia-ui-icon-button": true,
6479
+ size: responsiveSize,
6480
+ children: cloneElement(Children.only(children), { size: responsiveSize })
6481
+ });
6482
+ };
6483
+ //#endregion
6358
6484
  //#region src/components/Text/Text.tsx
6359
6485
  const sharedBodyStyle = css`
6360
6486
  > strong,
@@ -6545,97 +6671,6 @@ const TextComponent = ({ ref, align = "left", children, colorScheme = "inherit",
6545
6671
  */
6546
6672
  const Text = makePolymorphic(TextComponent);
6547
6673
  //#endregion
6548
- //#region src/components/ButtonGroup/ButtonGroup.tsx
6549
- const getAlignment = (align) => {
6550
- if (align === "center") return "center";
6551
- if (align === "left") return "flex-start";
6552
- if (align === "right") return "flex-end";
6553
- return "flex-start";
6554
- };
6555
- const ButtonGroupComponent = styled.div`
6556
- display: flex;
6557
-
6558
- /* this helps ensure that primary buttons appear at the top of the column */
6559
- flex-direction: ${({ $collapse, $align }) => {
6560
- if (!$collapse) return "row";
6561
- return $align === "right" ? "column-reverse" : "column";
6562
- }};
6563
- gap: var(--wui-space-02);
6564
- align-items: center;
6565
- justify-content: ${({ $align }) => getAlignment($align)};
6566
- width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
6567
-
6568
- ${mq.smAndUp} {
6569
- flex-direction: row;
6570
- }
6571
-
6572
- &:not([data-wistia-ui-icon-button]) {
6573
- ${mq.smAndDown} {
6574
- width: 100%;
6575
- }
6576
- }
6577
-
6578
- ${({ $buttonSize }) => $buttonSize !== "natural" && css`
6579
- button,
6580
- a {
6581
- ${buttonSizeStyles[$buttonSize]}
6582
- }
6583
-
6584
- [data-wistia-ui-icon-button] {
6585
- height: var(--icon-button-size-${$buttonSize});
6586
- width: var(--icon-button-size-${$buttonSize});
6587
- }
6588
- `}
6589
- `;
6590
- /**
6591
- * ButtonGroup is a layout component that groups buttons together,
6592
- * with a standardized gap between them.
6593
- */
6594
- const ButtonGroup = ({ children, align = "left", fullWidth = false, collapseOnSmallScreens = true, buttonSize = "natural", ...props }) => {
6595
- const responsiveButtonSize = useResponsiveProp(buttonSize);
6596
- if (isNil(children)) return null;
6597
- return /* @__PURE__ */ jsx(ButtonGroupComponent, {
6598
- $align: align,
6599
- $buttonSize: responsiveButtonSize,
6600
- $collapse: collapseOnSmallScreens,
6601
- $fullWidth: fullWidth,
6602
- ...props,
6603
- children
6604
- });
6605
- };
6606
- ButtonGroup.displayName = "ButtonGroup_UI";
6607
- //#endregion
6608
- //#region src/components/IconButton/IconButton.tsx
6609
- const StyledButton$1 = styled(Button)`
6610
- --icon-button-size-sm: 24px;
6611
- --icon-button-size-md: 32px;
6612
- --icon-button-size-lg: 40px;
6613
- --icon-button-size-xl: 48px;
6614
-
6615
- border-radius: 50%;
6616
- height: ${({ size }) => `var(--icon-button-size-${size})`};
6617
- width: ${({ size }) => `var(--icon-button-size-${size})`};
6618
- display: flex;
6619
- justify-content: center;
6620
- align-items: center;
6621
- line-height: 1;
6622
- `;
6623
- /**
6624
- * IconButton behaves like a [Button](/components/Button),
6625
- * but only accepts an [Icon](/components/Icon) as a child.
6626
- */
6627
- const IconButton = ({ children, label, size = "md", ref, ...props }) => {
6628
- const responsiveSize = useResponsiveProp(size);
6629
- return /* @__PURE__ */ jsx(StyledButton$1, {
6630
- ...props,
6631
- ref,
6632
- "aria-label": label,
6633
- "data-wistia-ui-icon-button": true,
6634
- size: responsiveSize,
6635
- children: cloneElement(Children.only(children), { size: responsiveSize })
6636
- });
6637
- };
6638
- //#endregion
6639
6674
  //#region src/components/Banner/Banner.tsx
6640
6675
  const StyledBanner = styled.div`
6641
6676
  display: flex;
@@ -6984,45 +7019,6 @@ const StackComponent = ({ ref, renderAs, direction = "vertical", gap = "space-02
6984
7019
  */
6985
7020
  const Stack = makePolymorphic(StackComponent);
6986
7021
  //#endregion
6987
- //#region src/components/FormGroup/FormGroup.tsx
6988
- const StyledFieldset = styled.fieldset`
6989
- padding: 0;
6990
- margin: 0;
6991
- border: 0;
6992
- `;
6993
- const StyledLegend = styled.legend`
6994
- padding-inline: 0;
6995
- display: flex;
6996
- flex-direction: column;
6997
- gap: var(--wui-space-01);
6998
- margin-bottom: var(--wui-space-02);
6999
- `;
7000
- /**
7001
- * For grouping like form elements together.
7002
- */
7003
- const FormGroup = ({ children, label, description, ...props }) => {
7004
- const ref = useRef(null);
7005
- const hasLabel = isNotNil(label) && isNonEmptyString(label);
7006
- const hasDescription = isNotNil(description) && isNonEmptyString(description);
7007
- return /* @__PURE__ */ jsxs(Stack, {
7008
- ...props,
7009
- ref,
7010
- renderAs: StyledFieldset,
7011
- children: [hasLabel || hasDescription ? /* @__PURE__ */ jsxs(Heading, {
7012
- renderAs: StyledLegend,
7013
- variant: "heading5",
7014
- children: [hasLabel ? label : null, hasDescription ? /* @__PURE__ */ jsx(Text, {
7015
- "data-wui-form-group-description": true,
7016
- prominence: "secondary",
7017
- renderAs: "span",
7018
- variant: "body4",
7019
- children: description
7020
- }) : null]
7021
- }) : null, children]
7022
- });
7023
- };
7024
- FormGroup.displayName = "FormGroup_UI";
7025
- //#endregion
7026
7022
  //#region src/components/Form/serializeFormData.tsx
7027
7023
  const ARRAY_SUFFIX = "[]";
7028
7024
  const serializeFormData = (formData) => {
@@ -7119,6 +7115,45 @@ const Form = ({ children, action, values = DEFAULT_VALUES, labelPosition = "bloc
7119
7115
  });
7120
7116
  };
7121
7117
  //#endregion
7118
+ //#region src/components/FormGroup/FormGroup.tsx
7119
+ const StyledFieldset = styled.fieldset`
7120
+ padding: 0;
7121
+ margin: 0;
7122
+ border: 0;
7123
+ `;
7124
+ const StyledLegend = styled.legend`
7125
+ padding-inline: 0;
7126
+ display: flex;
7127
+ flex-direction: column;
7128
+ gap: var(--wui-space-01);
7129
+ margin-bottom: var(--wui-space-02);
7130
+ `;
7131
+ /**
7132
+ * For grouping like form elements together.
7133
+ */
7134
+ const FormGroup = ({ children, label, description, ...props }) => {
7135
+ const ref = useRef(null);
7136
+ const hasLabel = isNotNil(label) && isNonEmptyString(label);
7137
+ const hasDescription = isNotNil(description) && isNonEmptyString(description);
7138
+ return /* @__PURE__ */ jsxs(Stack, {
7139
+ ...props,
7140
+ ref,
7141
+ renderAs: StyledFieldset,
7142
+ children: [hasLabel || hasDescription ? /* @__PURE__ */ jsxs(Heading, {
7143
+ renderAs: StyledLegend,
7144
+ variant: "heading5",
7145
+ children: [hasLabel ? label : null, hasDescription ? /* @__PURE__ */ jsx(Text, {
7146
+ "data-wui-form-group-description": true,
7147
+ prominence: "secondary",
7148
+ renderAs: "span",
7149
+ variant: "body4",
7150
+ children: description
7151
+ }) : null]
7152
+ }) : null, children]
7153
+ });
7154
+ };
7155
+ FormGroup.displayName = "FormGroup_UI";
7156
+ //#endregion
7122
7157
  //#region src/components/FormGroup/CheckboxGroup.tsx
7123
7158
  const CheckboxGroupContext = createContext(null);
7124
7159
  /**
@@ -7413,14 +7448,62 @@ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
7413
7448
  const ClampedContent = styled.div`
7414
7449
  --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
7415
7450
  `;
7416
- const CollapsibleContent = ({ clamp, children }) => {
7417
- if (isNotUndefined(clamp)) return /* @__PURE__ */ jsx(ClampedContent, {
7418
- $clamp: clamp,
7419
- "data-wui-collapsible-content": "true",
7451
+ const CollapsibleContent = ({ clamp, children }) => {
7452
+ if (isNotUndefined(clamp)) return /* @__PURE__ */ jsx(ClampedContent, {
7453
+ $clamp: clamp,
7454
+ "data-wui-collapsible-content": "true",
7455
+ children
7456
+ });
7457
+ return /* @__PURE__ */ jsx(Collapsible$1.Panel, { children: /* @__PURE__ */ jsxs(Fragment, { children: [children, " "] }) });
7458
+ };
7459
+ //#endregion
7460
+ //#region src/components/Label/Label.tsx
7461
+ const requiredStyle = css`
7462
+ &::after {
7463
+ color: var(--wui-color-text-error);
7464
+ display: inline;
7465
+ padding-left: var(--wui-space-01);
7466
+ content: '*';
7467
+ }
7468
+ `;
7469
+ const disabledStyle = css`
7470
+ color: var(--wui-color-text-disabled);
7471
+ `;
7472
+ const StyledLabel$2 = styled.label`
7473
+ display: block;
7474
+ width: 100%;
7475
+ color: var(--wui-color-text);
7476
+ font: var(--wui-typography-heading-6);
7477
+
7478
+ /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
7479
+ > input,
7480
+ > textarea,
7481
+ > select {
7482
+ display: block;
7483
+ }
7484
+
7485
+ > label {
7486
+ font-weight: normal;
7487
+ }
7488
+
7489
+ ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
7490
+ ${({ $disabled }) => $disabled && disabledStyle}
7491
+ ${({ $required }) => $required && requiredStyle}
7492
+ `;
7493
+ /**
7494
+ * Labels are used to give a title to a form component (eg. Input, Select, etc.)
7495
+ */
7496
+ const Label = ({ children, disabled = false, htmlFor, required = false, screenReaderOnly = false, ...props }) => {
7497
+ return /* @__PURE__ */ jsx(StyledLabel$2, {
7498
+ ...props,
7499
+ $disabled: disabled,
7500
+ $required: required,
7501
+ $screenReaderOnly: screenReaderOnly,
7502
+ htmlFor,
7420
7503
  children
7421
7504
  });
7422
- return /* @__PURE__ */ jsx(Collapsible$1.Panel, { children: /* @__PURE__ */ jsxs(Fragment, { children: [children, " "] }) });
7423
7505
  };
7506
+ Label.displayName = "Label_UI";
7424
7507
  //#endregion
7425
7508
  //#region src/components/ColorPicker/color-conversion-utils.ts
7426
7509
  const convertToRgbRaw = useMode(modeRgb);
@@ -7448,38 +7531,6 @@ const convertToRgb = (color) => {
7448
7531
  return result;
7449
7532
  };
7450
7533
  //#endregion
7451
- //#region src/components/ColorPicker/transitionBetweenColors.ts
7452
- const transitionBetweenColors = (fromHsv, toHsv, onColorStep, onTransitionEnd) => {
7453
- if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
7454
- onColorStep(toHsv);
7455
- onTransitionEnd?.();
7456
- return;
7457
- }
7458
- const interpolator = interpolate([
7459
- easingSmootherstep(.33),
7460
- fromHsv,
7461
- toHsv
7462
- ], "hsv");
7463
- const steps = 5;
7464
- const intervalMs = 16;
7465
- let count = 0;
7466
- let lastTime = performance.now();
7467
- const step = (now) => {
7468
- if (count >= steps) {
7469
- onColorStep(toHsv);
7470
- onTransitionEnd?.();
7471
- return;
7472
- }
7473
- if (now - lastTime >= intervalMs) {
7474
- onColorStep(interpolator(count / steps));
7475
- count++;
7476
- lastTime = now;
7477
- }
7478
- requestAnimationFrame(step);
7479
- };
7480
- requestAnimationFrame(step);
7481
- };
7482
- //#endregion
7483
7534
  //#region src/components/ColorPicker/consts.ts
7484
7535
  const DEFAULT_MIN_CONTRAST = 4.5;
7485
7536
  const DEFAULT_COLOR_FOR_COMPARISON = "#ffffff";
@@ -7704,6 +7755,38 @@ const hasAccessibleDerivatives = ({ originalColor, colorForComparison, minContra
7704
7755
  return brighterOption !== null || darkerOption !== null;
7705
7756
  };
7706
7757
  //#endregion
7758
+ //#region src/components/ColorPicker/transitionBetweenColors.ts
7759
+ const transitionBetweenColors = (fromHsv, toHsv, onColorStep, onTransitionEnd) => {
7760
+ if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
7761
+ onColorStep(toHsv);
7762
+ onTransitionEnd?.();
7763
+ return;
7764
+ }
7765
+ const interpolator = interpolate([
7766
+ easingSmootherstep(.33),
7767
+ fromHsv,
7768
+ toHsv
7769
+ ], "hsv");
7770
+ const steps = 5;
7771
+ const intervalMs = 16;
7772
+ let count = 0;
7773
+ let lastTime = performance.now();
7774
+ const step = (now) => {
7775
+ if (count >= steps) {
7776
+ onColorStep(toHsv);
7777
+ onTransitionEnd?.();
7778
+ return;
7779
+ }
7780
+ if (now - lastTime >= intervalMs) {
7781
+ onColorStep(interpolator(count / steps));
7782
+ count++;
7783
+ lastTime = now;
7784
+ }
7785
+ requestAnimationFrame(step);
7786
+ };
7787
+ requestAnimationFrame(step);
7788
+ };
7789
+ //#endregion
7707
7790
  //#region src/components/ColorPicker/ColorPickerContext.tsx
7708
7791
  const ColorPickerContext = createContext(null);
7709
7792
  const ColorPickerProvider = ({ children, colorForComparison, minimumContrastRatio, onValueChange, onValueCommit, opacityForContrastCalculation, value: valueAsHex }) => {
@@ -7838,54 +7921,6 @@ const useColorPickerState = () => {
7838
7921
  return context;
7839
7922
  };
7840
7923
  //#endregion
7841
- //#region src/components/Label/Label.tsx
7842
- const requiredStyle = css`
7843
- &::after {
7844
- color: var(--wui-color-text-error);
7845
- display: inline;
7846
- padding-left: var(--wui-space-01);
7847
- content: '*';
7848
- }
7849
- `;
7850
- const disabledStyle = css`
7851
- color: var(--wui-color-text-disabled);
7852
- `;
7853
- const StyledLabel$2 = styled.label`
7854
- display: block;
7855
- width: 100%;
7856
- color: var(--wui-color-text);
7857
- font: var(--wui-typography-heading-6);
7858
-
7859
- /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
7860
- > input,
7861
- > textarea,
7862
- > select {
7863
- display: block;
7864
- }
7865
-
7866
- > label {
7867
- font-weight: normal;
7868
- }
7869
-
7870
- ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
7871
- ${({ $disabled }) => $disabled && disabledStyle}
7872
- ${({ $required }) => $required && requiredStyle}
7873
- `;
7874
- /**
7875
- * Labels are used to give a title to a form component (eg. Input, Select, etc.)
7876
- */
7877
- const Label = ({ children, disabled = false, htmlFor, required = false, screenReaderOnly = false, ...props }) => {
7878
- return /* @__PURE__ */ jsx(StyledLabel$2, {
7879
- ...props,
7880
- $disabled: disabled,
7881
- $required: required,
7882
- $screenReaderOnly: screenReaderOnly,
7883
- htmlFor,
7884
- children
7885
- });
7886
- };
7887
- Label.displayName = "Label_UI";
7888
- //#endregion
7889
7924
  //#region src/components/ColorPicker/ColorGrid.tsx
7890
7925
  const Container$9 = styled.div`
7891
7926
  display: grid;
@@ -7920,45 +7955,6 @@ const ColorGrid = ({ children, label }) => {
7920
7955
  };
7921
7956
  ColorGrid.displayName = "ColorGrid_UI";
7922
7957
  //#endregion
7923
- //#region src/components/ColorPicker/ColorSwatch.tsx
7924
- const ColorSwatchDiv = styled.div`
7925
- aspect-ratio: 1;
7926
- width: ${({ $diameterPx }) => `${$diameterPx}px`};
7927
- border-radius: var(--wui-border-radius-rounded);
7928
- box-shadow: inset 0 0 1px 0 var(--wui-color-border-secondary);
7929
- display: flex;
7930
- align-items: center;
7931
- justify-content: center;
7932
- position: relative;
7933
- overflow: hidden;
7934
- outline: ${({ $selected }) => {
7935
- if ($selected) return "2px solid var(--wui-color-focus-ring-info)";
7936
- return "none";
7937
- }};
7938
- outline-offset: 2px;
7939
- transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
7940
- `;
7941
- const DerivativeHalfCircle = styled.div`
7942
- position: absolute;
7943
- right: 0;
7944
- top: 0;
7945
- width: 50%;
7946
- height: 100%;
7947
- background-color: ${({ $color }) => $color};
7948
- border-radius: 0 var(--wui-border-radius-rounded) var(--wui-border-radius-rounded) 0;
7949
- `;
7950
- const ColorSwatch = ({ children, diameterPx = 24, isSelected = false, derivativeIsSelected = false, value }) => {
7951
- const { valueAsHex: colorPickerValueAsHex } = useColorPickerState();
7952
- return /* @__PURE__ */ jsxs(ColorSwatchDiv, {
7953
- $diameterPx: diameterPx,
7954
- $selected: isSelected || derivativeIsSelected,
7955
- "aria-label": `Color swatch: ${value}`,
7956
- role: "img",
7957
- style: { backgroundColor: value },
7958
- children: [derivativeIsSelected ? /* @__PURE__ */ jsx(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null, children]
7959
- });
7960
- };
7961
- //#endregion
7962
7958
  //#region src/components/Tooltip/Tooltip.tsx
7963
7959
  const hide = keyframes`
7964
7960
  from {
@@ -8117,6 +8113,45 @@ const Tooltip = ({ delay = 500, direction = "top", content, children, forceOpen,
8117
8113
  };
8118
8114
  Tooltip.displayName = "Tooltip_UI";
8119
8115
  //#endregion
8116
+ //#region src/components/ColorPicker/ColorSwatch.tsx
8117
+ const ColorSwatchDiv = styled.div`
8118
+ aspect-ratio: 1;
8119
+ width: ${({ $diameterPx }) => `${$diameterPx}px`};
8120
+ border-radius: var(--wui-border-radius-rounded);
8121
+ box-shadow: inset 0 0 1px 0 var(--wui-color-border-secondary);
8122
+ display: flex;
8123
+ align-items: center;
8124
+ justify-content: center;
8125
+ position: relative;
8126
+ overflow: hidden;
8127
+ outline: ${({ $selected }) => {
8128
+ if ($selected) return "2px solid var(--wui-color-focus-ring-info)";
8129
+ return "none";
8130
+ }};
8131
+ outline-offset: 2px;
8132
+ transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
8133
+ `;
8134
+ const DerivativeHalfCircle = styled.div`
8135
+ position: absolute;
8136
+ right: 0;
8137
+ top: 0;
8138
+ width: 50%;
8139
+ height: 100%;
8140
+ background-color: ${({ $color }) => $color};
8141
+ border-radius: 0 var(--wui-border-radius-rounded) var(--wui-border-radius-rounded) 0;
8142
+ `;
8143
+ const ColorSwatch = ({ children, diameterPx = 24, isSelected = false, derivativeIsSelected = false, value }) => {
8144
+ const { valueAsHex: colorPickerValueAsHex } = useColorPickerState();
8145
+ return /* @__PURE__ */ jsxs(ColorSwatchDiv, {
8146
+ $diameterPx: diameterPx,
8147
+ $selected: isSelected || derivativeIsSelected,
8148
+ "aria-label": `Color swatch: ${value}`,
8149
+ role: "img",
8150
+ style: { backgroundColor: value },
8151
+ children: [derivativeIsSelected ? /* @__PURE__ */ jsx(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null, children]
8152
+ });
8153
+ };
8154
+ //#endregion
8120
8155
  //#region src/components/ColorPicker/ColorGridOption.tsx
8121
8156
  const Container$8 = styled(Radio$1.Root)`
8122
8157
  border: none;
@@ -8360,20 +8395,6 @@ const ColorPickerSection = ({ children }) => {
8360
8395
  };
8361
8396
  ColorPickerSection.displayName = "ColorPickerSection_UI";
8362
8397
  //#endregion
8363
- //#region src/components/ColorPicker/ValueSwatch.tsx
8364
- /**
8365
- * Renders a circular color swatch filled with the current color from
8366
- * ColorPicker context. Accepts an optional `diameterPx` to control size.
8367
- */
8368
- const ValueSwatch = ({ diameterPx = 24 }) => {
8369
- const { valueAsHex } = useColorPickerState();
8370
- return /* @__PURE__ */ jsx(ColorSwatch, {
8371
- diameterPx,
8372
- value: valueAsHex
8373
- });
8374
- };
8375
- ValueSwatch.displayName = "ValueSwatch_UI";
8376
- //#endregion
8377
8398
  //#region src/components/ColorPicker/ValueNameOrHexCode.tsx
8378
8399
  /**
8379
8400
  * Displays the name of the current color (if it matches a known color name)
@@ -8386,7 +8407,21 @@ const ValueNameOrHexCode = (props) => {
8386
8407
  hexCode: valueAsHex
8387
8408
  });
8388
8409
  };
8389
- ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
8410
+ ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
8411
+ //#endregion
8412
+ //#region src/components/ColorPicker/ValueSwatch.tsx
8413
+ /**
8414
+ * Renders a circular color swatch filled with the current color from
8415
+ * ColorPicker context. Accepts an optional `diameterPx` to control size.
8416
+ */
8417
+ const ValueSwatch = ({ diameterPx = 24 }) => {
8418
+ const { valueAsHex } = useColorPickerState();
8419
+ return /* @__PURE__ */ jsx(ColorSwatch, {
8420
+ diameterPx,
8421
+ value: valueAsHex
8422
+ });
8423
+ };
8424
+ ValueSwatch.displayName = "ValueSwatch_UI";
8390
8425
  //#endregion
8391
8426
  //#region src/components/ColorPicker/ColorPickerTrigger.tsx
8392
8427
  const StyledPopoverTrigger = styled(Popover$1.Trigger)`
@@ -8440,45 +8475,6 @@ const ColorPickerTrigger = ({ children, ref, ...props }) => {
8440
8475
  });
8441
8476
  };
8442
8477
  //#endregion
8443
- //#region src/components/ColorPicker/ContrastIndicator.tsx
8444
- const Container$3 = styled.div`
8445
- display: flex;
8446
- flex-direction: row;
8447
- justify-content: end;
8448
- align-items: center;
8449
- `;
8450
- const floorToTenth = (value) => {
8451
- return Math.floor(value * 10) / 10;
8452
- };
8453
- const ContrastIndicator = () => {
8454
- const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
8455
- const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
8456
- const label = /* @__PURE__ */ jsxs("div", { children: [
8457
- /* @__PURE__ */ jsx(Text, {
8458
- renderAs: "span",
8459
- variant: "body4",
8460
- children: "Contrast:"
8461
- }),
8462
- " ",
8463
- /* @__PURE__ */ jsxs(Text, {
8464
- renderAs: "span",
8465
- variant: "body4Mono",
8466
- children: [floorToTenth(currentContrastRatio).toFixed(1), ":1"]
8467
- })
8468
- ] });
8469
- return /* @__PURE__ */ jsx(Container$3, { children: isContrastSufficient ? /* @__PURE__ */ jsx(Badge, {
8470
- colorScheme: "success",
8471
- icon: /* @__PURE__ */ jsx(Icon, { type: "checkmark" }),
8472
- label,
8473
- variant: "outline"
8474
- }) : /* @__PURE__ */ jsx(Badge, {
8475
- colorScheme: "warning",
8476
- icon: /* @__PURE__ */ jsx(Icon, { type: "error" }),
8477
- label,
8478
- variant: "outline"
8479
- }) });
8480
- };
8481
- //#endregion
8482
8478
  //#region src/components/Switch/Switch.tsx
8483
8479
  const switchHeightMap = {
8484
8480
  sm: 16,
@@ -8611,6 +8607,45 @@ const ContrastEnforcerSwitch = () => {
8611
8607
  });
8612
8608
  };
8613
8609
  //#endregion
8610
+ //#region src/components/ColorPicker/ContrastIndicator.tsx
8611
+ const Container$3 = styled.div`
8612
+ display: flex;
8613
+ flex-direction: row;
8614
+ justify-content: end;
8615
+ align-items: center;
8616
+ `;
8617
+ const floorToTenth = (value) => {
8618
+ return Math.floor(value * 10) / 10;
8619
+ };
8620
+ const ContrastIndicator = () => {
8621
+ const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
8622
+ const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
8623
+ const label = /* @__PURE__ */ jsxs("div", { children: [
8624
+ /* @__PURE__ */ jsx(Text, {
8625
+ renderAs: "span",
8626
+ variant: "body4",
8627
+ children: "Contrast:"
8628
+ }),
8629
+ " ",
8630
+ /* @__PURE__ */ jsxs(Text, {
8631
+ renderAs: "span",
8632
+ variant: "body4Mono",
8633
+ children: [floorToTenth(currentContrastRatio).toFixed(1), ":1"]
8634
+ })
8635
+ ] });
8636
+ return /* @__PURE__ */ jsx(Container$3, { children: isContrastSufficient ? /* @__PURE__ */ jsx(Badge, {
8637
+ colorScheme: "success",
8638
+ icon: /* @__PURE__ */ jsx(Icon, { type: "checkmark" }),
8639
+ label,
8640
+ variant: "outline"
8641
+ }) : /* @__PURE__ */ jsx(Badge, {
8642
+ colorScheme: "warning",
8643
+ icon: /* @__PURE__ */ jsx(Icon, { type: "error" }),
8644
+ label,
8645
+ variant: "outline"
8646
+ }) });
8647
+ };
8648
+ //#endregion
8614
8649
  //#region src/components/ColorPicker/ContrastPreview.tsx
8615
8650
  const ContrastPreview = () => {
8616
8651
  const { valueAsHex, colorForComparison } = useColorPickerState();
@@ -9447,6 +9482,28 @@ const SaturationAndValuePicker = ({ dataTestId }) => {
9447
9482
  };
9448
9483
  SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
9449
9484
  //#endregion
9485
+ //#region src/private/helpers/getTypographicStyles/getTypographicStyles.ts
9486
+ const typographicVariantStyleMap = {
9487
+ ...variantStyleMap,
9488
+ ...variantStyleMap$1
9489
+ };
9490
+ const getTypographicStyles = (variant) => {
9491
+ return css`
9492
+ ${typographicVariantStyleMap[variant]}
9493
+ font-family: var(--font-family);
9494
+ font-size: var(--font-size);
9495
+ font-weight: var(--font-weight);
9496
+ line-height: var(--line-height);
9497
+ `;
9498
+ };
9499
+ const typographicVariantElementMap = {
9500
+ ...variantElementMap,
9501
+ ...variantElementMap$1
9502
+ };
9503
+ const getDefaultTypographicElement = (variant) => {
9504
+ return typographicVariantElementMap[variant] ?? "span";
9505
+ };
9506
+ //#endregion
9450
9507
  //#region src/components/Tag/Tag.tsx
9451
9508
  const TagLabel = styled.a`
9452
9509
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -9569,28 +9626,6 @@ const Tag = ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClic
9569
9626
  });
9570
9627
  };
9571
9628
  //#endregion
9572
- //#region src/private/helpers/getTypographicStyles/getTypographicStyles.ts
9573
- const typographicVariantStyleMap = {
9574
- ...variantStyleMap,
9575
- ...variantStyleMap$1
9576
- };
9577
- const getTypographicStyles = (variant) => {
9578
- return css`
9579
- ${typographicVariantStyleMap[variant]}
9580
- font-family: var(--font-family);
9581
- font-size: var(--font-size);
9582
- font-weight: var(--font-weight);
9583
- line-height: var(--line-height);
9584
- `;
9585
- };
9586
- const typographicVariantElementMap = {
9587
- ...variantElementMap,
9588
- ...variantElementMap$1
9589
- };
9590
- const getDefaultTypographicElement = (variant) => {
9591
- return typographicVariantElementMap[variant] ?? "span";
9592
- };
9593
- //#endregion
9594
9629
  //#region src/components/Combobox/Combobox.tsx
9595
9630
  const ComboboxWrapper = styled.div`
9596
9631
  ${inputCss};
@@ -13833,14 +13868,6 @@ const MenuItemButton = ({ children, appearance, command, icon, ref, ...props })
13833
13868
  });
13834
13869
  };
13835
13870
  //#endregion
13836
- //#region src/components/Menu/MenuItemLabel.tsx
13837
- const StyledMenuItemLabel = styled.span`
13838
- /* avoid no-empty-source rule */
13839
- `;
13840
- const MenuItemLabel = ({ children }) => {
13841
- return /* @__PURE__ */ jsx(StyledMenuItemLabel, { children });
13842
- };
13843
- //#endregion
13844
13871
  //#region src/components/Menu/MenuItemDescription.tsx
13845
13872
  const StyledMenuItemDescription = styled(Text)`
13846
13873
  /* avoid no-empty-source rule */
@@ -13853,6 +13880,14 @@ const MenuItemDescription = ({ children }) => {
13853
13880
  });
13854
13881
  };
13855
13882
  //#endregion
13883
+ //#region src/components/Menu/MenuItemLabel.tsx
13884
+ const StyledMenuItemLabel = styled.span`
13885
+ /* avoid no-empty-source rule */
13886
+ `;
13887
+ const MenuItemLabel = ({ children }) => {
13888
+ return /* @__PURE__ */ jsx(StyledMenuItemLabel, { children });
13889
+ };
13890
+ //#endregion
13856
13891
  //#region src/components/Menu/SubMenu.tsx
13857
13892
  const SubMenuPopup = styled(Menu$1.Popup)`
13858
13893
  ${menuContentCss}
@@ -14231,50 +14266,6 @@ const Meter = ({ segments, label, labelMeta, description, hideKey = false, max =
14231
14266
  };
14232
14267
  Meter.displayName = "Meter_UI";
14233
14268
  //#endregion
14234
- //#region src/components/Modal/ModalCloseButton.tsx
14235
- const ModalCloseButton = () => {
14236
- return /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
14237
- label: "Dismiss modal",
14238
- size: "sm",
14239
- style: { alignSelf: "start" },
14240
- variant: "ghost",
14241
- children: /* @__PURE__ */ jsx(Icon, { type: "close" })
14242
- }) });
14243
- };
14244
- //#endregion
14245
- //#region src/components/Modal/ModalHeader.tsx
14246
- const Header = styled.header`
14247
- display: flex;
14248
- order: 1;
14249
- padding: 0 var(--wui-space-05);
14250
- padding-bottom: 0;
14251
- gap: var(--wui-space-01);
14252
- justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
14253
-
14254
- /* Dialog.Title creates an h2 element which inherits some margin */
14255
- h2 {
14256
- margin: 0;
14257
- padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
14258
- }
14259
-
14260
- button {
14261
- position: absolute;
14262
- right: var(--wui-space-03);
14263
- top: var(--wui-space-03);
14264
- }
14265
- `;
14266
- const Title = styled(Dialog.Title)`
14267
- font: var(--wui-typography-heading-2);
14268
- overflow-wrap: anywhere;
14269
- `;
14270
- const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
14271
- return /* @__PURE__ */ jsxs(Header, {
14272
- $hideCloseButon: hideCloseButton,
14273
- $hideTitle: hideTitle,
14274
- children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title, { children: title }) }) : /* @__PURE__ */ jsx(Title, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
14275
- });
14276
- };
14277
- //#endregion
14278
14269
  //#region src/components/Modal/constants.ts
14279
14270
  const DEFAULT_MODAL_WIDTH = "532px";
14280
14271
  //#endregion
@@ -14409,6 +14400,50 @@ const ModalContent = ({ width, positionVariant, initialFocusRef, children, ref,
14409
14400
  });
14410
14401
  };
14411
14402
  //#endregion
14403
+ //#region src/components/Modal/ModalCloseButton.tsx
14404
+ const ModalCloseButton = () => {
14405
+ return /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
14406
+ label: "Dismiss modal",
14407
+ size: "sm",
14408
+ style: { alignSelf: "start" },
14409
+ variant: "ghost",
14410
+ children: /* @__PURE__ */ jsx(Icon, { type: "close" })
14411
+ }) });
14412
+ };
14413
+ //#endregion
14414
+ //#region src/components/Modal/ModalHeader.tsx
14415
+ const Header = styled.header`
14416
+ display: flex;
14417
+ order: 1;
14418
+ padding: 0 var(--wui-space-05);
14419
+ padding-bottom: 0;
14420
+ gap: var(--wui-space-01);
14421
+ justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
14422
+
14423
+ /* Dialog.Title creates an h2 element which inherits some margin */
14424
+ h2 {
14425
+ margin: 0;
14426
+ padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
14427
+ }
14428
+
14429
+ button {
14430
+ position: absolute;
14431
+ right: var(--wui-space-03);
14432
+ top: var(--wui-space-03);
14433
+ }
14434
+ `;
14435
+ const Title = styled(Dialog.Title)`
14436
+ font: var(--wui-typography-heading-2);
14437
+ overflow-wrap: anywhere;
14438
+ `;
14439
+ const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
14440
+ return /* @__PURE__ */ jsxs(Header, {
14441
+ $hideCloseButon: hideCloseButton,
14442
+ $hideTitle: hideTitle,
14443
+ children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title, { children: title }) }) : /* @__PURE__ */ jsx(Title, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
14444
+ });
14445
+ };
14446
+ //#endregion
14412
14447
  //#region src/components/Modal/ModalOverlay.tsx
14413
14448
  const backdropShow = keyframes`
14414
14449
  from {
@@ -14688,6 +14723,11 @@ const Radio = ({ checked, disabled = false, id, label, description, name, onChan
14688
14723
  });
14689
14724
  };
14690
14725
  //#endregion
14726
+ //#region src/components/RadioCard/RadioCardChildrenContainer.tsx
14727
+ const RadioCardChildrenContainer = styled.div`
14728
+ flex: 1 1 auto;
14729
+ `;
14730
+ //#endregion
14691
14731
  //#region src/components/RadioCard/RadioCardRoot.tsx
14692
14732
  const checkedStyles = css`
14693
14733
  --wui-radio-card-border-color: var(--wui-color-focus-ring);
@@ -14929,11 +14969,6 @@ const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true
14929
14969
  };
14930
14970
  RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
14931
14971
  //#endregion
14932
- //#region src/components/RadioCard/RadioCardChildrenContainer.tsx
14933
- const RadioCardChildrenContainer = styled.div`
14934
- flex: 1 1 auto;
14935
- `;
14936
- //#endregion
14937
14972
  //#region src/components/RadioCard/RadioCard.tsx
14938
14973
  const RadioCard = ({ icon, label, description, showIndicator, isGated, children, ref, ...rootProps }) => {
14939
14974
  return /* @__PURE__ */ jsx(RadioCardRoot, {
@@ -15067,6 +15102,15 @@ const ScrollArea = ({ children, onScroll, style, locked = false, ref: forwardedR
15067
15102
  });
15068
15103
  };
15069
15104
  //#endregion
15105
+ //#region src/components/SegmentedControl/useSegmentedControlValue.tsx
15106
+ const SegmentedControlValueContext = createContext(null);
15107
+ const SegmentedControlValueProvider = SegmentedControlValueContext;
15108
+ const useSegmentedControlValue = () => {
15109
+ const context = useContext(SegmentedControlValueContext);
15110
+ if (context === null) throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
15111
+ return context;
15112
+ };
15113
+ //#endregion
15070
15114
  //#region src/components/SegmentedControl/useSelectedItemStyle.tsx
15071
15115
  const SelectedItemStyleContext = createContext(null);
15072
15116
  const SelectedItemStyleProvider = ({ children }) => {
@@ -15090,15 +15134,6 @@ const useSelectedItemStyle = () => {
15090
15134
  return context;
15091
15135
  };
15092
15136
  //#endregion
15093
- //#region src/components/SegmentedControl/useSegmentedControlValue.tsx
15094
- const SegmentedControlValueContext = createContext(null);
15095
- const SegmentedControlValueProvider = SegmentedControlValueContext;
15096
- const useSegmentedControlValue = () => {
15097
- const context = useContext(SegmentedControlValueContext);
15098
- if (context === null) throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
15099
- return context;
15100
- };
15101
- //#endregion
15102
15137
  //#region src/components/SegmentedControl/SelectedItemIndicator.tsx
15103
15138
  const selectedItemIndicatorStyles = css`
15104
15139
  background-color: var(--wui-color-bg-fill-white);