@wistia/ui 1.3.0 → 1.3.1-beta.7199e026.b5e57ee

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 (5) hide show
  1. package/dist/index.d.ts +24 -18
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +830 -817
  4. package/dist/index.js.map +1 -1
  5. package/package.json +11 -11
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v1.3.0
3
+ * @license @wistia/ui v1.3.1-beta.7199e026.b5e57ee
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-app-background: #fff;\n --wui-blue-1: #fdfdfe;\n --wui-blue-2: #f6f9ff;\n --wui-blue-3: #ecf2ff;\n --wui-blue-4: #ddeaff;\n --wui-blue-5: #cddfff;\n --wui-blue-6: #b8d1ff;\n --wui-blue-7: #a1beff;\n --wui-blue-8: #81a4fe;\n --wui-blue-9: #2949e5;\n --wui-blue-10: #1f36d3;\n --wui-blue-11: #3154dc;\n --wui-blue-12: #192b65;\n --wui-blue-alpha-1: #00008003;\n --wui-blue-alpha-2: #0055ff0a;\n --wui-blue-alpha-3: #0051ff12;\n --wui-blue-alpha-4: #0062ff21;\n --wui-blue-alpha-5: #005cff33;\n --wui-blue-alpha-6: #005aff47;\n --wui-blue-alpha-7: #004fff5e;\n --wui-blue-alpha-8: #0047fd7d;\n --wui-blue-alpha-9: #0026e0d6;\n --wui-blue-alpha-10: #001acde0;\n --wui-blue-alpha-11: #002bd4cf;\n --wui-blue-alpha-12: #001454e5;\n --wui-blue-contrast: #fff;\n --wui-blue-surface: #f4f8ffcc;\n --wui-border-radius-00: 0px;\n --wui-border-radius-01: 4px;\n --wui-border-radius-02: 8px;\n --wui-border-radius-03: 16px;\n --wui-border-radius-04: 20px;\n --wui-border-radius-05: 24px;\n --wui-border-radius-rounded: 1000px;\n --wui-color-accent-1: var(--wui-blue-1);\n --wui-color-accent-2: var(--wui-blue-2);\n --wui-color-accent-3: var(--wui-blue-3);\n --wui-color-accent-4: var(--wui-blue-4);\n --wui-color-accent-5: var(--wui-blue-5);\n --wui-color-accent-6: var(--wui-blue-6);\n --wui-color-accent-7: var(--wui-blue-7);\n --wui-color-accent-8: var(--wui-blue-8);\n --wui-color-accent-9: var(--wui-blue-9);\n --wui-color-accent-10: var(--wui-blue-10);\n --wui-color-accent-11: var(--wui-blue-11);\n --wui-color-accent-12: var(--wui-blue-12);\n --wui-color-accent-contrast: var(--wui-blue-contrast);\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-color-base-1: var(--wui-gray-1);\n --wui-color-base-2: var(--wui-gray-2);\n --wui-color-base-3: var(--wui-gray-3);\n --wui-color-base-4: var(--wui-gray-4);\n --wui-color-base-5: var(--wui-gray-5);\n --wui-color-base-6: var(--wui-gray-6);\n --wui-color-base-7: var(--wui-gray-7);\n --wui-color-base-8: var(--wui-gray-8);\n --wui-color-base-9: var(--wui-gray-9);\n --wui-color-base-10: var(--wui-gray-10);\n --wui-color-base-11: var(--wui-gray-11);\n --wui-color-base-12: var(--wui-gray-12);\n --wui-color-base-contrast: var(--wui-gray-contrast);\n --wui-color-bg-app: #fff;\n --wui-color-bg-fill: var(--wui-color-accent-9);\n --wui-color-bg-fill-active: var(--wui-color-accent-11);\n --wui-color-bg-fill-active-blue: var(--wui-blue-11);\n --wui-color-bg-fill-active-error: var(--wui-error-11);\n --wui-color-bg-fill-active-green: var(--wui-green-11);\n --wui-color-bg-fill-active-info: var(--wui-blue-11);\n --wui-color-bg-fill-active-orange: var(--wui-orange-11);\n --wui-color-bg-fill-active-pink: var(--wui-pink-11);\n --wui-color-bg-fill-active-purple: var(--wui-purple-11);\n --wui-color-bg-fill-active-success: var(--wui-success-11);\n --wui-color-bg-fill-active-warning: var(--wui-warning-11);\n --wui-color-bg-fill-active-yellow: var(--wui-yellow-11);\n --wui-color-bg-fill-blue: var(--wui-blue-9);\n --wui-color-bg-fill-error: var(--wui-error-9);\n --wui-color-bg-fill-green: var(--wui-green-9);\n --wui-color-bg-fill-hover: var(--wui-color-accent-10);\n --wui-color-bg-fill-hover-blue: var(--wui-blue-10);\n --wui-color-bg-fill-hover-error: var(--wui-error-10);\n --wui-color-bg-fill-hover-green: var(--wui-green-10);\n --wui-color-bg-fill-hover-info: var(--wui-blue-10);\n --wui-color-bg-fill-hover-orange: var(--wui-orange-10);\n --wui-color-bg-fill-hover-pink: var(--wui-pink-10);\n --wui-color-bg-fill-hover-purple: var(--wui-purple-10);\n --wui-color-bg-fill-hover-success: var(--wui-success-10);\n --wui-color-bg-fill-hover-warning: var(--wui-warning-10);\n --wui-color-bg-fill-hover-yellow: var(--wui-yellow-10);\n --wui-color-bg-fill-info: var(--wui-blue-9);\n --wui-color-bg-fill-orange: var(--wui-orange-9);\n --wui-color-bg-fill-pink: var(--wui-pink-9);\n --wui-color-bg-fill-purple: var(--wui-purple-9);\n --wui-color-bg-fill-success: var(--wui-success-9);\n --wui-color-bg-fill-warning: var(--wui-warning-9);\n --wui-color-bg-fill-white: #fff;\n --wui-color-bg-fill-yellow: var(--wui-yellow-9);\n --wui-color-bg-surface: var(--wui-color-surface-token);\n --wui-color-bg-surface-active: var(--wui-color-base-4);\n --wui-color-bg-surface-active-blue: var(--wui-blue-4);\n --wui-color-bg-surface-active-error: var(--wui-error-4);\n --wui-color-bg-surface-active-green: var(--wui-green-4);\n --wui-color-bg-surface-active-info: var(--wui-blue-4);\n --wui-color-bg-surface-active-orange: var(--wui-orange-4);\n --wui-color-bg-surface-active-pink: var(--wui-pink-4);\n --wui-color-bg-surface-active-purple: var(--wui-purple-4);\n --wui-color-bg-surface-active-success: var(--wui-success-4);\n --wui-color-bg-surface-active-warning: var(--wui-warning-4);\n --wui-color-bg-surface-active-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-blue: var(--wui-blue-2);\n --wui-color-bg-surface-disabled: #f0f0f3;\n --wui-color-bg-surface-error: var(--wui-error-2);\n --wui-color-bg-surface-green: var(--wui-green-2);\n --wui-color-bg-surface-hover: var(--wui-color-base-3);\n --wui-color-bg-surface-hover-blue: var(--wui-blue-3);\n --wui-color-bg-surface-hover-error: var(--wui-error-3);\n --wui-color-bg-surface-hover-green: var(--wui-green-3);\n --wui-color-bg-surface-hover-info: var(--wui-blue-3);\n --wui-color-bg-surface-hover-orange: var(--wui-orange-3);\n --wui-color-bg-surface-hover-pink: var(--wui-pink-3);\n --wui-color-bg-surface-hover-purple: var(--wui-purple-3);\n --wui-color-bg-surface-hover-success: var(--wui-success-3);\n --wui-color-bg-surface-hover-warning: var(--wui-warning-3);\n --wui-color-bg-surface-hover-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-info: var(--wui-blue-2);\n --wui-color-bg-surface-orange: var(--wui-orange-2);\n --wui-color-bg-surface-pink: var(--wui-pink-2);\n --wui-color-bg-surface-purple: var(--wui-purple-2);\n --wui-color-bg-surface-secondary: var(--wui-color-base-3);\n --wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n --wui-color-bg-surface-secondary-active-blue: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-error: var(--wui-error-5);\n --wui-color-bg-surface-secondary-active-green: var(--wui-green-5);\n --wui-color-bg-surface-secondary-active-info: var(--wui-blue-5);\n --wui-color-bg-surface-secondary-active-orange: var(--wui-orange-5);\n --wui-color-bg-surface-secondary-active-pink: var(--wui-pink-5);\n --wui-color-bg-surface-secondary-active-purple: var(--wui-purple-5);\n --wui-color-bg-surface-secondary-active-success: var(--wui-success-5);\n --wui-color-bg-surface-secondary-active-warning: var(--wui-warning-5);\n --wui-color-bg-surface-secondary-active-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-secondary-blue: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-error: var(--wui-error-3);\n --wui-color-bg-surface-secondary-green: var(--wui-green-3);\n --wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n --wui-color-bg-surface-secondary-hover-blue: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-error: var(--wui-error-4);\n --wui-color-bg-surface-secondary-hover-green: var(--wui-green-4);\n --wui-color-bg-surface-secondary-hover-info: var(--wui-blue-4);\n --wui-color-bg-surface-secondary-hover-orange: var(--wui-orange-4);\n --wui-color-bg-surface-secondary-hover-pink: var(--wui-pink-4);\n --wui-color-bg-surface-secondary-hover-purple: var(--wui-purple-4);\n --wui-color-bg-surface-secondary-hover-success: var(--wui-success-4);\n --wui-color-bg-surface-secondary-hover-warning: var(--wui-warning-4);\n --wui-color-bg-surface-secondary-hover-yellow: var(--wui-yellow-4);\n --wui-color-bg-surface-secondary-info: var(--wui-blue-3);\n --wui-color-bg-surface-secondary-orange: var(--wui-orange-3);\n --wui-color-bg-surface-secondary-pink: var(--wui-pink-3);\n --wui-color-bg-surface-secondary-purple: var(--wui-purple-3);\n --wui-color-bg-surface-secondary-success: var(--wui-success-3);\n --wui-color-bg-surface-secondary-warning: var(--wui-warning-3);\n --wui-color-bg-surface-secondary-yellow: var(--wui-yellow-3);\n --wui-color-bg-surface-selected: var(--wui-blue-3);\n --wui-color-bg-surface-selected-active: var(--wui-blue-5);\n --wui-color-bg-surface-selected-hover: var(--wui-blue-4);\n --wui-color-bg-surface-success: var(--wui-success-2);\n --wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n --wui-color-bg-surface-tertiary-blue: var(--wui-blue-5);\n --wui-color-bg-surface-tertiary-error: var(--wui-error-5);\n --wui-color-bg-surface-tertiary-green: var(--wui-green-5);\n --wui-color-bg-surface-tertiary-info: var(--wui-blue-6);\n --wui-color-bg-surface-tertiary-orange: var(--wui-orange-5);\n --wui-color-bg-surface-tertiary-pink: var(--wui-pink-5);\n --wui-color-bg-surface-tertiary-purple: var(--wui-purple-5);\n --wui-color-bg-surface-tertiary-success: var(--wui-success-5);\n --wui-color-bg-surface-tertiary-warning: var(--wui-warning-5);\n --wui-color-bg-surface-tertiary-yellow: var(--wui-yellow-5);\n --wui-color-bg-surface-warning: var(--wui-warning-2);\n --wui-color-bg-surface-yellow: var(--wui-yellow-2);\n --wui-color-bg-tooltip: #242528;\n --wui-color-border: var(--wui-color-base-6);\n --wui-color-border-active: var(--wui-color-base-9);\n --wui-color-border-active-blue: var(--wui-blue-9);\n --wui-color-border-active-error: var(--wui-error-9);\n --wui-color-border-active-green: var(--wui-green-9);\n --wui-color-border-active-info: var(--wui-blue-9);\n --wui-color-border-active-orange: var(--wui-orange-9);\n --wui-color-border-active-pink: var(--wui-pink-9);\n --wui-color-border-active-purple: var(--wui-purple-9);\n --wui-color-border-active-selected: #2949e5;\n --wui-color-border-active-success: var(--wui-success-9);\n --wui-color-border-active-warning: var(--wui-warning-9);\n --wui-color-border-active-yellow: var(--wui-yellow-9);\n --wui-color-border-blue: var(--wui-blue-6);\n --wui-color-border-disabled: var(--wui-gray-4);\n --wui-color-border-error: var(--wui-error-6);\n --wui-color-border-green: var(--wui-green-6);\n --wui-color-border-hover: var(--wui-color-base-8);\n --wui-color-border-hover-blue: var(--wui-blue-8);\n --wui-color-border-hover-green: var(--wui-green-8);\n --wui-color-border-hover-info: var(--wui-blue-8);\n --wui-color-border-hover-orange: var(--wui-orange-8);\n --wui-color-border-hover-pink: var(--wui-pink-8);\n --wui-color-border-hover-purple: var(--wui-purple-8);\n --wui-color-border-hover-selected: #81a4fe;\n --wui-color-border-hover-success: var(--wui-success-8);\n --wui-color-border-hover-warning: var(--wui-warning-8);\n --wui-color-border-hover-yellow: var(--wui-yellow-8);\n --wui-color-border-info: var(--wui-blue-6);\n --wui-color-border-orange: var(--wui-orange-6);\n --wui-color-border-pink: var(--wui-pink-6);\n --wui-color-border-purple: var(--wui-purple-6);\n --wui-color-border-secondary: var(--wui-color-base-8);\n --wui-color-border-secondary-active: var(--wui-color-base-11);\n --wui-color-border-secondary-active-blue: var(--wui-blue-11);\n --wui-color-border-secondary-active-error: var(--wui-error-11);\n --wui-color-border-secondary-active-green: var(--wui-green-11);\n --wui-color-border-secondary-active-info: var(--wui-blue-11);\n --wui-color-border-secondary-active-orange: var(--wui-orange-11);\n --wui-color-border-secondary-active-pink: var(--wui-pink-11);\n --wui-color-border-secondary-active-purple: var(--wui-purple-11);\n --wui-color-border-secondary-active-success: var(--wui-success-11);\n --wui-color-border-secondary-active-warning: var(--wui-warning-11);\n --wui-color-border-secondary-active-yellow: var(--wui-yellow-11);\n --wui-color-border-secondary-blue: var(--wui-blue-8);\n --wui-color-border-secondary-error: var(--wui-error-8);\n --wui-color-border-secondary-green: var(--wui-green-8);\n --wui-color-border-secondary-hover: var(--wui-color-base-10);\n --wui-color-border-secondary-hover-blue: var(--wui-blue-10);\n --wui-color-border-secondary-hover-error: var(--wui-error-10);\n --wui-color-border-secondary-hover-green: var(--wui-green-10);\n --wui-color-border-secondary-hover-info: var(--wui-blue-10);\n --wui-color-border-secondary-hover-orange: var(--wui-orange-10);\n --wui-color-border-secondary-hover-pink: var(--wui-pink-10);\n --wui-color-border-secondary-hover-purple: var(--wui-purple-10);\n --wui-color-border-secondary-hover-success: var(--wui-success-10);\n --wui-color-border-secondary-hover-warning: var(--wui-warning-10);\n --wui-color-border-secondary-hover-yellow: var(--wui-yellow-10);\n --wui-color-border-secondary-info: var(--wui-blue-8);\n --wui-color-border-secondary-orange: var(--wui-orange-8);\n --wui-color-border-secondary-pink: var(--wui-pink-8);\n --wui-color-border-secondary-purple: var(--wui-purple-8);\n --wui-color-border-secondary-success: var(--wui-success-8);\n --wui-color-border-secondary-warning: var(--wui-warning-8);\n --wui-color-border-secondary-yellow: var(--wui-yellow-8);\n --wui-color-border-selected: #b8d1ff;\n --wui-color-border-success: var(--wui-success-6);\n --wui-color-border-warning: var(--wui-warning-6);\n --wui-color-border-yellow: var(--wui-yellow-6);\n --wui-color-drop-shadow: #1f33991a;\n --wui-color-focus-color: var(--wui-blue-9);\n --wui-color-focus-ring: var(--wui-color-accent-9);\n --wui-color-focus-ring-blue: var(--wui-blue-9);\n --wui-color-focus-ring-disabled: var(--wui-gray-6);\n --wui-color-focus-ring-error: var(--wui-error-9);\n --wui-color-focus-ring-green: var(--wui-green-9);\n --wui-color-focus-ring-info: var(--wui-blue-9);\n --wui-color-focus-ring-orange: var(--wui-orange-9);\n --wui-color-focus-ring-pink: var(--wui-pink-9);\n --wui-color-focus-ring-purple: var(--wui-purple-9);\n --wui-color-focus-ring-success: var(--wui-success-9);\n --wui-color-focus-ring-warning: var(--wui-warning-9);\n --wui-color-focus-ring-yellow: var(--wui-yellow-9);\n --wui-color-icon: var(--wui-color-base-11);\n --wui-color-icon-blue: var(--wui-blue-11);\n --wui-color-icon-disabled: var(--wui-gray-8);\n --wui-color-icon-error: var(--wui-error-11);\n --wui-color-icon-green: var(--wui-green-11);\n --wui-color-icon-info: var(--wui-blue-11);\n --wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n --wui-color-icon-on-fill-blue: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-error: var(--wui-error-contrast);\n --wui-color-icon-on-fill-green: var(--wui-green-contrast);\n --wui-color-icon-on-fill-info: var(--wui-blue-contrast);\n --wui-color-icon-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-icon-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-icon-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-icon-on-fill-success: var(--wui-success-contrast);\n --wui-color-icon-on-fill-warning: var(--wui-warning-2);\n --wui-color-icon-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-icon-orange: var(--wui-orange-11);\n --wui-color-icon-pink: var(--wui-pink-11);\n --wui-color-icon-purple: var(--wui-purple-11);\n --wui-color-icon-selected: var(--wui-blue-9);\n --wui-color-icon-success: var(--wui-success-11);\n --wui-color-icon-warning: var(--wui-warning-11);\n --wui-color-icon-yellow: var(--wui-yellow-11);\n --wui-color-invalid-indicator: var(--wui-error-9);\n --wui-color-notification-pill-color: var(--wui-pink-9);\n --wui-color-segmented-color-text-override: var(--wui-color-text-selected);\n --wui-color-segmented-control-checked-background: var(--wui-color-bg-app);\n --wui-color-surface-token: var(--wui-gray-1);\n --wui-color-text: var(--wui-color-base-12);\n --wui-color-text-blue: var(--wui-blue-12);\n --wui-color-text-button: var(--wui-color-text-button-token);\n --wui-color-text-button-blue: var(--wui-blue-11);\n --wui-color-text-button-error: var(--wui-error-11);\n --wui-color-text-button-green: var(--wui-green-11);\n --wui-color-text-button-info: var(--wui-blue-11);\n --wui-color-text-button-orange: var(--wui-orange-11);\n --wui-color-text-button-pink: var(--wui-pink-11);\n --wui-color-text-button-purple: var(--wui-purple-11);\n --wui-color-text-button-success: var(--wui-success-11);\n --wui-color-text-button-token: var(--wui-gray-12);\n --wui-color-text-button-warning: var(--wui-warning-11);\n --wui-color-text-button-yellow: var(--wui-yellow-12);\n --wui-color-text-disabled: var(--wui-gray-10);\n --wui-color-text-error: var(--wui-error-11);\n --wui-color-text-green: var(--wui-green-12);\n --wui-color-text-info: var(--wui-blue-12);\n --wui-color-text-link: var(--wui-color-text-link-token);\n --wui-color-text-link-blue: var(--wui-blue-9);\n --wui-color-text-link-error: var(--wui-error-11);\n --wui-color-text-link-green: var(--wui-green-11);\n --wui-color-text-link-info: var(--wui-blue-9);\n --wui-color-text-link-orange: var(--wui-orange-11);\n --wui-color-text-link-pink: var(--wui-pink-11);\n --wui-color-text-link-purple: var(--wui-purple-11);\n --wui-color-text-link-success: var(--wui-success-9);\n --wui-color-text-link-token: var(--wui-color-accent-9);\n --wui-color-text-link-warning: var(--wui-warning-11);\n --wui-color-text-link-yellow: var(--wui-yellow-11);\n --wui-color-text-on-fill: var(--wui-color-accent-contrast);\n --wui-color-text-on-fill-blue: var(--wui-blue-2);\n --wui-color-text-on-fill-error: var(--wui-error-contrast);\n --wui-color-text-on-fill-green: var(--wui-green-contrast);\n --wui-color-text-on-fill-info: var(--wui-blue-contrast);\n --wui-color-text-on-fill-orange: var(--wui-orange-contrast);\n --wui-color-text-on-fill-pink: var(--wui-pink-contrast);\n --wui-color-text-on-fill-purple: var(--wui-purple-contrast);\n --wui-color-text-on-fill-success: var(--wui-success-contrast);\n --wui-color-text-on-fill-warning: var(--wui-warning-contrast);\n --wui-color-text-on-fill-white-selected: var(--wui-blue-9);\n --wui-color-text-on-fill-yellow: var(--wui-yellow-contrast);\n --wui-color-text-orange: var(--wui-orange-12);\n --wui-color-text-pink: var(--wui-pink-12);\n --wui-color-text-purple: var(--wui-purple-12);\n --wui-color-text-secondary: var(--wui-color-base-11);\n --wui-color-text-secondary-blue: var(--wui-blue-5);\n --wui-color-text-secondary-error: var(--wui-error-11);\n --wui-color-text-secondary-green: var(--wui-green-10);\n --wui-color-text-secondary-info: var(--wui-blue-11);\n --wui-color-text-secondary-orange: var(--wui-orange-10);\n --wui-color-text-secondary-pink: var(--wui-pink-10);\n --wui-color-text-secondary-purple: var(--wui-purple-11);\n --wui-color-text-secondary-success: var(--wui-success-11);\n --wui-color-text-secondary-warning: var(--wui-warning-11);\n --wui-color-text-secondary-yellow: var(--wui-yellow-10);\n --wui-color-text-selected: var(--wui-blue-9);\n --wui-color-text-success: var(--wui-success-12);\n --wui-color-text-warning: var(--wui-warning-12);\n --wui-color-text-yellow: var(--wui-yellow-11);\n --wui-elevation-01: 0px 4px 8px 0px var(--wui-color-drop-shadow);\n --wui-elevation-02: 0px 4px 24px 0px var(--wui-color-drop-shadow);\n --wui-error-1: #fffcfc;\n --wui-error-2: #fff7f7;\n --wui-error-3: #ffebea;\n --wui-error-4: #ffdcd9;\n --wui-error-5: #ffcdca;\n --wui-error-6: #febdb9;\n --wui-error-7: #f5a9a5;\n --wui-error-8: #eb8f8b;\n --wui-error-9: #e5484d;\n --wui-error-10: #d73840;\n --wui-error-11: #cc2e39;\n --wui-error-12: #64181b;\n --wui-error-alpha-1: #ff000003;\n --wui-error-alpha-2: #ff000008;\n --wui-error-alpha-3: #ff0d0014;\n --wui-error-alpha-4: #ff150026;\n --wui-error-alpha-5: #ff0f0036;\n --wui-error-alpha-6: #fc0f0045;\n --wui-error-alpha-7: #e30c0159;\n --wui-error-alpha-8: #d4090073;\n --wui-error-alpha-9: #db0007b8;\n --wui-error-alpha-10: #cc000ac7;\n --wui-error-alpha-11: #c1000ed1;\n --wui-error-alpha-12: #540003e8;\n --wui-error-contrast: #fff;\n --wui-error-surface: #fff5f5cc;\n --wui-gray-1: #fcfcfd;\n --wui-gray-2: #f9f9fb;\n --wui-gray-3: #f0f0f3;\n --wui-gray-4: #e8e8ec;\n --wui-gray-5: #e0e0e5;\n --wui-gray-6: #d9d9de;\n --wui-gray-7: #ceced5;\n --wui-gray-8: #bbbbc4;\n --wui-gray-9: #8d8d95;\n --wui-gray-10: #82828a;\n --wui-gray-11: #64646a;\n --wui-gray-12: #202024;\n --wui-gray-alpha-1: #00005503;\n --wui-gray-alpha-2: #00005505;\n --wui-gray-alpha-3: #0000330f;\n --wui-gray-alpha-4: #00002d17;\n --wui-gray-alpha-5: #00002a1f;\n --wui-gray-alpha-6: #00002226;\n --wui-gray-alpha-7: #00002530;\n --wui-gray-alpha-8: #00002245;\n --wui-gray-alpha-9: #00001273;\n --wui-gray-alpha-10: #0000117d;\n --wui-gray-alpha-11: #00000a9c;\n --wui-gray-alpha-12: #000005de;\n --wui-gray-contrast: #fff;\n --wui-gray-surface: #fffc;\n --wui-green-1: #fbfefa;\n --wui-green-2: #f5fbf4;\n --wui-green-3: #e7f8e5;\n --wui-green-4: #d8f2d4;\n --wui-green-5: #c6ebc0;\n --wui-green-6: #afe0a6;\n --wui-green-7: #8fd185;\n --wui-green-8: #5fbd51;\n --wui-green-9: #268713;\n --wui-green-10: #117900;\n --wui-green-11: #1e8106;\n --wui-green-12: #1e3d19;\n --wui-green-alpha-1: #33cc0005;\n --wui-green-alpha-2: #18a3000b;\n --wui-green-alpha-3: #14bb001a;\n --wui-green-alpha-4: #18b2012b;\n --wui-green-alpha-5: #19af003f;\n --wui-green-alpha-6: #1aa70059;\n --wui-green-alpha-7: #159f017a;\n --wui-green-alpha-8: #189f00b0;\n --wui-green-alpha-9: #159f00ae;\n --wui-green-alpha-10: #157d00ec;\n --wui-green-alpha-11: #117900;\n --wui-green-alpha-12: #197e00f9;\n --wui-green-contrast: #fff;\n --wui-green-surface: #f3faf1cc;\n --wui-motion-duration-01: 70ms;\n --wui-motion-duration-02: 110ms;\n --wui-motion-duration-03: 150ms;\n --wui-motion-duration-04: 240ms;\n --wui-motion-duration-05: 400ms;\n --wui-motion-duration-06: 700ms;\n --wui-motion-ease: cubic-bezier(0.25, 0.1, 0.25, 1);\n --wui-motion-ease-in: cubic-bezier(0.42, 0, 1, 1);\n --wui-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);\n --wui-motion-ease-out: cubic-bezier(0.19, 0.91, 0.38, 1);\n --wui-motion-linear: cubic-bezier(0, 0, 1, 1);\n --wui-orange-1: #fffcfb;\n --wui-orange-2: #fff7f5;\n --wui-orange-3: #ffebe6;\n --wui-orange-4: #ffdbce;\n --wui-orange-5: #fcbfcb;\n --wui-orange-6: #ffbdaa;\n --wui-orange-7: #f4aa95;\n --wui-orange-8: #ea9178;\n --wui-orange-9: #d1451a;\n --wui-orange-10: #c23600;\n --wui-orange-11: #ce4216;\n --wui-orange-12: #592b1e;\n --wui-orange-alpha-1: #ff400005;\n --wui-orange-alpha-2: #ff33000a;\n --wui-orange-alpha-3: #ff33001a;\n --wui-orange-alpha-4: #ff440030;\n --wui-orange-alpha-5: #ff400045;\n --wui-orange-alpha-6: #ff390054;\n --wui-orange-alpha-7: #e533016b;\n --wui-orange-alpha-8: #d8300087;\n --wui-orange-alpha-9: #cc3000e5;\n --wui-orange-alpha-10: #c23600;\n --wui-orange-alpha-11: #c93000e8;\n --wui-orange-alpha-12: #430f00e0;\n --wui-orange-contrast: #fff;\n --wui-orange-surface: #fff5f3cc;\n --wui-pink-1: #fffcfd;\n --wui-pink-2: #fff7fa;\n --wui-pink-3: #ffe8f3;\n --wui-pink-4: #ffdaeb;\n --wui-pink-5: #fdcbe2;\n --wui-pink-6: #f7bcd8;\n --wui-pink-7: #efa8ca;\n --wui-pink-8: #e68eba;\n --wui-pink-9: #ff40b3;\n --wui-pink-10: #f12fa7;\n --wui-pink-11: #cd0089;\n --wui-pink-12: #680445;\n --wui-pink-alpha-1: #ff005503;\n --wui-pink-alpha-2: #ff006008;\n --wui-pink-alpha-3: #ff007a17;\n --wui-pink-alpha-4: #ff007626;\n --wui-pink-alpha-5: #f6007133;\n --wui-pink-alpha-6: #e1006b42;\n --wui-pink-alpha-7: #d1006457;\n --wui-pink-alpha-8: #c7006470;\n --wui-pink-alpha-9: #ff009abf;\n --wui-pink-alpha-10: #ee0093d1;\n --wui-pink-alpha-11: #cd0089;\n --wui-pink-alpha-12: #660042fa;\n --wui-pink-contrast: #fff;\n --wui-pink-surface: #fff5f9cc;\n --wui-purple-1: #fefcff;\n --wui-purple-2: #fdf7ff;\n --wui-purple-3: #fbeaff;\n --wui-purple-4: #f7ddff;\n --wui-purple-5: #f2ceff;\n --wui-purple-6: #eabdff;\n --wui-purple-7: #e0a5fc;\n --wui-purple-8: #d285f7;\n --wui-purple-9: #ac12e0;\n --wui-purple-10: #9a09c9;\n --wui-purple-11: #9b0bca;\n --wui-purple-12: #550072;\n --wui-purple-alpha-1: #aa00ff03;\n --wui-purple-alpha-2: #c000ff08;\n --wui-purple-alpha-3: #cf00ff14;\n --wui-purple-alpha-4: #c300ff21;\n --wui-purple-alpha-5: #bc00ff30;\n --wui-purple-alpha-6: #ae00ff42;\n --wui-purple-alpha-7: #a801f759;\n --wui-purple-alpha-8: #a101ef7a;\n --wui-purple-alpha-9: #a600deed;\n --wui-purple-alpha-10: #9600c7f5;\n --wui-purple-alpha-11: #9700c8f5;\n --wui-purple-alpha-12: #550072;\n --wui-purple-contrast: #fff;\n --wui-purple-surface: #fdf5ffcc;\n --wui-red-1: #fffcfc;\n --wui-red-2: #fff7f7;\n --wui-red-3: #ffe9e9;\n --wui-red-4: #ffd9d9;\n --wui-red-5: #ffcaca;\n --wui-red-6: #ffbaba;\n --wui-red-7: #fca5a6;\n --wui-red-8: #f5898c;\n --wui-red-9: #ff2b51;\n --wui-red-10: #f10845;\n --wui-red-11: #db0035;\n --wui-red-12: #6d021a;\n --wui-red-alpha-1: #ff000003;\n --wui-red-alpha-2: #ff000008;\n --wui-red-alpha-3: #ff000017;\n --wui-red-alpha-4: #ff000026;\n --wui-red-alpha-5: #ff000036;\n --wui-red-alpha-6: #ff000045;\n --wui-red-alpha-7: #f7010359;\n --wui-red-alpha-8: #ea000775;\n --wui-red-alpha-9: #ff002ed4;\n --wui-red-alpha-10: #f1003ff7;\n --wui-red-alpha-11: #db0035;\n --wui-red-alpha-12: #6c0018fc;\n --wui-red-contrast: #fff;\n --wui-red-surface: #fff5f5cc;\n --wui-space-00: 0px;\n --wui-space-01: 4px;\n --wui-space-02: 8px;\n --wui-space-03: 12px;\n --wui-space-04: 16px;\n --wui-space-05: 24px;\n --wui-space-06: 32px;\n --wui-space-07: 40px;\n --wui-space-08: 48px;\n --wui-space-09: 64px;\n --wui-success-1: #fbfefc;\n --wui-success-2: #f4fbf7;\n --wui-success-3: #e5f6eb;\n --wui-success-4: #d6f1df;\n --wui-success-5: #c4e8d1;\n --wui-success-6: #adddc0;\n --wui-success-7: #8fcea8;\n --wui-success-8: #60b887;\n --wui-success-9: #30a46c;\n --wui-success-10: #289662;\n --wui-success-11: #00814c;\n --wui-success-12: #1d3b2a;\n --wui-success-alpha-1: #00c04005;\n --wui-success-alpha-2: #00a3460a;\n --wui-success-alpha-3: #00a73b1a;\n --wui-success-alpha-4: #00a83829;\n --wui-success-alpha-5: #019c393b;\n --wui-success-alpha-6: #00963c52;\n --wui-success-alpha-7: #00903970;\n --wui-success-alpha-8: #008d3f9e;\n --wui-success-alpha-9: #008f4acf;\n --wui-success-alpha-10: #008345d6;\n --wui-success-alpha-11: #00814c;\n --wui-success-alpha-12: #00220fe3;\n --wui-success-contrast: #fff;\n --wui-success-surface: #f1faf5cc;\n --wui-typography-body-1: var(--wui-typography-body-1-font-weight) var(--wui-typography-body-1-font-size)/var(--wui-typography-body-1-line-height) var(--wui-typography-body-1-font-family);\n --wui-typography-body-1-font-family: var(--wui-typography-family-default);\n --wui-typography-body-1-font-size: 20px;\n --wui-typography-body-1-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-1-letter-spacing: 0px;\n --wui-typography-body-1-line-height: 30px;\n --wui-typography-body-1-paragraph-spacing: 16px;\n --wui-typography-body-2: var(--wui-typography-body-2-font-weight) var(--wui-typography-body-2-font-size)/var(--wui-typography-body-2-line-height) var(--wui-typography-body-2-font-family);\n --wui-typography-body-2-font-family: var(--wui-typography-family-default);\n --wui-typography-body-2-font-size: 16px;\n --wui-typography-body-2-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-2-letter-spacing: 0px;\n --wui-typography-body-2-line-height: 26px;\n --wui-typography-body-2-paragraph-spacing: 12px;\n --wui-typography-body-3: var(--wui-typography-body-3-font-weight) var(--wui-typography-body-3-font-size)/var(--wui-typography-body-3-line-height) var(--wui-typography-body-3-font-family);\n --wui-typography-body-3-font-family: var(--wui-typography-family-default);\n --wui-typography-body-3-font-size: 14px;\n --wui-typography-body-3-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-3-letter-spacing: 0px;\n --wui-typography-body-3-line-height: 22px;\n --wui-typography-body-3-paragraph-spacing: 8px;\n --wui-typography-body-4: var(--wui-typography-body-4-font-weight) var(--wui-typography-body-4-font-size)/var(--wui-typography-body-4-line-height) var(--wui-typography-body-4-font-family);\n --wui-typography-body-4-font-family: var(--wui-typography-family-default);\n --wui-typography-body-4-font-size: 12px;\n --wui-typography-body-4-font-weight: var(--wui-typography-weight-body);\n --wui-typography-body-4-letter-spacing: 0px;\n --wui-typography-body-4-line-height: 18px;\n --wui-typography-body-4-paragraph-spacing: 8px;\n --wui-typography-family-brand: \"GT Walsheim\", sans-serif;\n --wui-typography-family-default: intervariable, sans-serif;\n --wui-typography-family-mono: \"IBM Plex Mono\", monospace;\n --wui-typography-heading-1: var(--wui-typography-heading-1-font-weight) var(--wui-typography-heading-1-font-size)/var(--wui-typography-heading-1-line-height) var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-1-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-1-font-size: 36px;\n --wui-typography-heading-1-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-1-letter-spacing: 0px;\n --wui-typography-heading-1-line-height: 44px;\n --wui-typography-heading-2: var(--wui-typography-heading-2-font-weight) var(--wui-typography-heading-2-font-size)/var(--wui-typography-heading-2-line-height) var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-2-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-2-font-size: 32px;\n --wui-typography-heading-2-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-2-letter-spacing: 0px;\n --wui-typography-heading-2-line-height: 38px;\n --wui-typography-heading-3: var(--wui-typography-heading-3-font-weight) var(--wui-typography-heading-3-font-size)/var(--wui-typography-heading-3-line-height) var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-3-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-3-font-size: 24px;\n --wui-typography-heading-3-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-3-letter-spacing: 0px;\n --wui-typography-heading-3-line-height: 30px;\n --wui-typography-heading-4: var(--wui-typography-heading-4-font-weight) var(--wui-typography-heading-4-font-size)/var(--wui-typography-heading-4-line-height) var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-4-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-4-font-size: 18px;\n --wui-typography-heading-4-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-4-letter-spacing: 0px;\n --wui-typography-heading-4-line-height: 24px;\n --wui-typography-heading-5: var(--wui-typography-heading-5-font-weight) var(--wui-typography-heading-5-font-size)/var(--wui-typography-heading-5-line-height) var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-5-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-5-font-size: 16px;\n --wui-typography-heading-5-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-5-letter-spacing: 0px;\n --wui-typography-heading-5-line-height: 22px;\n --wui-typography-heading-6: var(--wui-typography-heading-6-font-weight) var(--wui-typography-heading-6-font-size)/var(--wui-typography-heading-6-line-height) var(--wui-typography-heading-6-font-family);\n --wui-typography-heading-6-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-6-font-size: 14px;\n --wui-typography-heading-6-font-weight: var(--wui-typography-weight-brand-bold);\n --wui-typography-heading-6-letter-spacing: 0px;\n --wui-typography-heading-6-line-height: 18px;\n --wui-typography-heading-hero: var(--wui-typography-heading-hero-font-weight) var(--wui-typography-heading-hero-font-size)/var(--wui-typography-heading-hero-line-height) var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-hero-font-family: var(--wui-typography-family-brand);\n --wui-typography-heading-hero-font-size: 48px;\n --wui-typography-heading-hero-font-weight: var(--wui-typography-weight-brand-black);\n --wui-typography-heading-hero-letter-spacing: 0px;\n --wui-typography-heading-hero-line-height: 58px;\n --wui-typography-label-1: var(--wui-typography-label-1-font-weight) var(--wui-typography-label-1-font-size)/var(--wui-typography-label-1-line-height) var(--wui-typography-label-1-font-family);\n --wui-typography-label-1-font-family: var(--wui-typography-family-default);\n --wui-typography-label-1-font-size: 18px;\n --wui-typography-label-1-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-1-letter-spacing: 0px;\n --wui-typography-label-1-line-height: 24px;\n --wui-typography-label-2: var(--wui-typography-label-2-font-weight) var(--wui-typography-label-2-font-size)/var(--wui-typography-label-2-line-height) var(--wui-typography-label-2-font-family);\n --wui-typography-label-2-font-family: var(--wui-typography-family-default);\n --wui-typography-label-2-font-size: 16px;\n --wui-typography-label-2-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-2-letter-spacing: 0px;\n --wui-typography-label-2-line-height: 18px;\n --wui-typography-label-3: var(--wui-typography-label-3-font-weight) var(--wui-typography-label-3-font-size)/var(--wui-typography-label-3-line-height) var(--wui-typography-label-3-font-family);\n --wui-typography-label-3-font-family: var(--wui-typography-family-default);\n --wui-typography-label-3-font-size: 14px;\n --wui-typography-label-3-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-3-letter-spacing: 0px;\n --wui-typography-label-3-line-height: 16px;\n --wui-typography-label-4: var(--wui-typography-label-4-font-weight) var(--wui-typography-label-4-font-size)/var(--wui-typography-label-4-line-height) var(--wui-typography-label-4-font-family);\n --wui-typography-label-4-font-family: var(--wui-typography-family-default);\n --wui-typography-label-4-font-size: 12px;\n --wui-typography-label-4-font-weight: var(--wui-typography-weight-label);\n --wui-typography-label-4-letter-spacing: 0px;\n --wui-typography-label-4-line-height: 14px;\n --wui-typography-weight-body: 425;\n --wui-typography-weight-body-bold: 700;\n --wui-typography-weight-brand-black: 700;\n --wui-typography-weight-brand-bold: 600;\n --wui-typography-weight-label: 475;\n --wui-typography-weight-label-bold: 600;\n --wui-vendor-hubspot-1: #fefcfb;\n --wui-vendor-hubspot-2: #fff5f2;\n --wui-vendor-hubspot-3: #ffe9e2;\n --wui-vendor-hubspot-4: #ffd7c9;\n --wui-vendor-hubspot-5: #ffc8b7;\n --wui-vendor-hubspot-6: #ffb8a3;\n --wui-vendor-hubspot-7: #ffa48d;\n --wui-vendor-hubspot-8: #f68a70;\n --wui-vendor-hubspot-9: #ff5c36;\n --wui-vendor-hubspot-10: #f24d25;\n --wui-vendor-hubspot-11: #d93a0f;\n --wui-vendor-hubspot-12: #5b2a1e;\n --wui-vendor-hubspot-contrast: #fff;\n --wui-vendor-hubspot-surface: #fff3efcc;\n --wui-vendor-marketo-1: #fdfdff;\n --wui-vendor-marketo-2: #f7f8ff;\n --wui-vendor-marketo-3: #eff2ff;\n --wui-vendor-marketo-4: #e3e8ff;\n --wui-vendor-marketo-5: #d5ddff;\n --wui-vendor-marketo-6: #c5cfff;\n --wui-vendor-marketo-7: #b0bcfa;\n --wui-vendor-marketo-8: #93a0f2;\n --wui-vendor-marketo-9: #4c50cc;\n --wui-vendor-marketo-10: #4040bb;\n --wui-vendor-marketo-11: #4f55c7;\n --wui-vendor-marketo-12: #252a62;\n --wui-vendor-marketo-contrast: #fff;\n --wui-vendor-marketo-surface: #f5f6ffcc;\n --wui-vendor-pardot-1: #fafdff;\n --wui-vendor-pardot-2: #f3fafe;\n --wui-vendor-pardot-3: #e1f5ff;\n --wui-vendor-pardot-4: #ceeeff;\n --wui-vendor-pardot-5: #bae5ff;\n --wui-vendor-pardot-6: #a4d9fa;\n --wui-vendor-pardot-7: #85c9f1;\n --wui-vendor-pardot-8: #4fb3e8;\n --wui-vendor-pardot-9: #00a1e0;\n --wui-vendor-pardot-10: #0094cf;\n --wui-vendor-pardot-11: #0079b5;\n --wui-vendor-pardot-12: #0c3a51;\n --wui-vendor-pardot-contrast: #fff;\n --wui-vendor-pardot-surface: #f0f9fecc;\n --wui-warning-1: #fdfdfa;\n --wui-warning-2: #fefceb;\n --wui-warning-3: #fff9bf;\n --wui-warning-4: #fef29f;\n --wui-warning-5: #f8e981;\n --wui-warning-6: #e9da79;\n --wui-warning-7: #d8cb75;\n --wui-warning-8: #c4b54f;\n --wui-warning-9: #ffe62a;\n --wui-warning-10: #f3dd45;\n --wui-warning-11: #897a00;\n --wui-warning-12: #413d23;\n --wui-warning-alpha-1: #99990005;\n --wui-warning-alpha-2: #f3d90014;\n --wui-warning-alpha-3: #ffe80040;\n --wui-warning-alpha-4: #fddd0061;\n --wui-warning-alpha-5: #f1d3007d;\n --wui-warning-alpha-6: #d6b90087;\n --wui-warning-alpha-7: #b79f008a;\n --wui-warning-alpha-8: #aa9400b0;\n --wui-warning-alpha-9: #ffe100d6;\n --wui-warning-alpha-10: #efd100ba;\n --wui-warning-alpha-11: #897a00;\n --wui-warning-alpha-12: #231e00db;\n --wui-warning-contrast: #262209;\n --wui-warning-surface: #fefbe6cc;\n --wui-yellow-1: #fdfdf8;\n --wui-yellow-2: #fbfcea;\n --wui-yellow-3: #f6fbb8;\n --wui-yellow-4: #f0f491;\n --wui-yellow-5: #e7eb6d;\n --wui-yellow-6: #d8dd5d;\n --wui-yellow-7: #c8cc52;\n --wui-yellow-8: #b3b600;\n --wui-yellow-9: #bcbf19;\n --wui-yellow-10: #b1b400;\n --wui-yellow-11: #7a7b00;\n --wui-yellow-12: #3e3f14;\n --wui-yellow-alpha-1: #b7b70008;\n --wui-yellow-alpha-2: #cfdb0014;\n --wui-yellow-alpha-3: #dff10047;\n --wui-yellow-alpha-4: #dde6006e;\n --wui-yellow-alpha-5: #d5dc0091;\n --wui-yellow-alpha-6: #c2ca00a3;\n --wui-yellow-alpha-7: #aeb400ad;\n --wui-yellow-alpha-8: #b3b600;\n --wui-yellow-alpha-9: #b5b800e5;\n --wui-yellow-alpha-10: #b1b400;\n --wui-yellow-alpha-11: #7a7b00;\n --wui-yellow-alpha-12: #2e2f00eb;\n --wui-yellow-contrast: #22230b;\n --wui-yellow-surface: #fafbe5cc;\n --wui-zindex-backdrop: 500;\n --wui-zindex-menu: 500;\n --wui-zindex-modal: 500;\n --wui-zindex-popover: 500;\n --wui-zindex-select: 500;\n --wui-zindex-tooltip: 500;\n --wui-zindex-under: -1;\n}\n"}
178
- :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",
@@ -493,6 +498,13 @@ const dateTimeToDate = (dateTime) => {
493
498
  return null;
494
499
  };
495
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
496
508
  //#region src/helpers/dateTime/dateToDateTime.ts
497
509
  /**
498
510
  * @typedef {Object} WistiaDateTimeObject
@@ -517,13 +529,6 @@ const dateToDateTime = (date) => {
517
529
  };
518
530
  };
519
531
  //#endregion
520
- //#region src/helpers/dateTime/dateTimeToISO.ts
521
- /**
522
- * @param {Partial<WistiaDateTimeObject>} dateTime - a dateTime object
523
- * @returns {string | null} - string with the ISO-8601 string or null
524
- */
525
- const dateTimeToISO = (dateTime) => dateTimeToDate(dateTime)?.toISOString() ?? null;
526
- //#endregion
527
532
  //#region src/helpers/dateTime/dateTimeRounded.ts
528
533
  /**
529
534
  * @param {Date} dateTime - a dateTime object
@@ -797,9 +802,9 @@ const getLocalDateParts = (date) => {
797
802
  const dayPart = parts.find((part) => part.type === "day");
798
803
  if (isNil(yearPart) || isNil(monthPart) || isNil(dayPart)) throw new Error("Failed to parse date parts");
799
804
  return {
800
- year: Number.parseInt(yearPart.value, 10),
801
- month: Number.parseInt(monthPart.value, 10),
802
- 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))
803
808
  };
804
809
  };
805
810
  //#endregion
@@ -1303,7 +1308,7 @@ const isVisibleElement = (element) => {
1303
1308
  };
1304
1309
  const getElementTabIndex = (element) => {
1305
1310
  const tabIndex = element.getAttribute("tabindex");
1306
- return Number.parseInt(tabIndex ?? void 0, 10);
1311
+ return Math.trunc(Number(tabIndex ?? void 0));
1307
1312
  };
1308
1313
  const isTabIndexNaN = (element) => {
1309
1314
  const tabIndex = getElementTabIndex(element);
@@ -1732,15 +1737,21 @@ const Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ jsx(Ellipsis
1732
1737
  });
1733
1738
  Ellipsis.displayName = "Ellipsis_UI";
1734
1739
  //#endregion
1735
- //#region src/css/designTokens/generated/schemes/standard.css
1736
- var standard_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, standard permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-gray-1);\n--wui-color-base-2: var(--wui-gray-2);\n--wui-color-base-3: var(--wui-gray-3);\n--wui-color-base-4: var(--wui-gray-4);\n--wui-color-base-5: var(--wui-gray-5);\n--wui-color-base-6: var(--wui-gray-6);\n--wui-color-base-7: var(--wui-gray-7);\n--wui-color-base-8: var(--wui-gray-8);\n--wui-color-base-9: var(--wui-gray-9);\n--wui-color-base-10: var(--wui-gray-10);\n--wui-color-base-11: var(--wui-gray-11);\n--wui-color-base-12: var(--wui-gray-12);\n--wui-color-base-contrast: var(--wui-gray-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-gray-1);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-gray-12);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-color-accent-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1737
- //#endregion
1738
1740
  //#region src/css/designTokens/generated/schemes/blue.css
1739
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";
1740
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";
1745
+ //#endregion
1741
1746
  //#region src/css/designTokens/generated/schemes/green.css
1742
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";
1743
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";
1754
+ //#endregion
1744
1755
  //#region src/css/designTokens/generated/schemes/orange.css
1745
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";
1746
1757
  //#endregion
@@ -1753,21 +1764,12 @@ var purple_default = "/* -------------------------------------------\n * Autogen
1753
1764
  //#region src/css/designTokens/generated/schemes/red.css
1754
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";
1755
1766
  //#endregion
1756
- //#region src/css/designTokens/generated/schemes/yellow.css
1757
- var yellow_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, yellow permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-yellow-1);\n--wui-color-accent-2: var(--wui-yellow-2);\n--wui-color-accent-3: var(--wui-yellow-3);\n--wui-color-accent-4: var(--wui-yellow-4);\n--wui-color-accent-5: var(--wui-yellow-5);\n--wui-color-accent-6: var(--wui-yellow-6);\n--wui-color-accent-7: var(--wui-yellow-7);\n--wui-color-accent-8: var(--wui-yellow-8);\n--wui-color-accent-9: var(--wui-yellow-9);\n--wui-color-accent-10: var(--wui-yellow-10);\n--wui-color-accent-11: var(--wui-yellow-11);\n--wui-color-accent-12: var(--wui-yellow-12);\n--wui-color-accent-contrast: var(--wui-yellow-contrast);\n--wui-color-base-1: var(--wui-yellow-1);\n--wui-color-base-2: var(--wui-yellow-2);\n--wui-color-base-3: var(--wui-yellow-3);\n--wui-color-base-4: var(--wui-yellow-4);\n--wui-color-base-5: var(--wui-yellow-5);\n--wui-color-base-6: var(--wui-yellow-6);\n--wui-color-base-7: var(--wui-yellow-7);\n--wui-color-base-8: var(--wui-yellow-8);\n--wui-color-base-9: var(--wui-yellow-9);\n--wui-color-base-10: var(--wui-yellow-10);\n--wui-color-base-11: var(--wui-yellow-11);\n--wui-color-base-12: var(--wui-yellow-12);\n--wui-color-base-contrast: var(--wui-yellow-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-yellow-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-yellow-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-yellow-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1758
- //#endregion
1759
- //#region src/css/designTokens/generated/schemes/error.css
1760
- var error_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, error permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-error-1);\n--wui-color-accent-2: var(--wui-error-2);\n--wui-color-accent-3: var(--wui-error-3);\n--wui-color-accent-4: var(--wui-error-4);\n--wui-color-accent-5: var(--wui-error-5);\n--wui-color-accent-6: var(--wui-error-6);\n--wui-color-accent-7: var(--wui-error-7);\n--wui-color-accent-8: var(--wui-error-8);\n--wui-color-accent-9: var(--wui-error-9);\n--wui-color-accent-10: var(--wui-error-10);\n--wui-color-accent-11: var(--wui-error-11);\n--wui-color-accent-12: var(--wui-error-12);\n--wui-color-accent-contrast: var(--wui-error-contrast);\n--wui-color-base-1: var(--wui-error-1);\n--wui-color-base-2: var(--wui-error-2);\n--wui-color-base-3: var(--wui-error-3);\n--wui-color-base-4: var(--wui-error-4);\n--wui-color-base-5: var(--wui-error-5);\n--wui-color-base-6: var(--wui-error-6);\n--wui-color-base-7: var(--wui-error-7);\n--wui-color-base-8: var(--wui-error-8);\n--wui-color-base-9: var(--wui-error-9);\n--wui-color-base-10: var(--wui-error-10);\n--wui-color-base-11: var(--wui-error-11);\n--wui-color-base-12: var(--wui-error-12);\n--wui-color-base-contrast: var(--wui-error-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-error-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-error-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-error-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1761
- //#endregion
1762
- //#region src/css/designTokens/generated/schemes/info.css
1763
- var info_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, info permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-blue-1);\n--wui-color-accent-2: var(--wui-blue-2);\n--wui-color-accent-3: var(--wui-blue-3);\n--wui-color-accent-4: var(--wui-blue-4);\n--wui-color-accent-5: var(--wui-blue-5);\n--wui-color-accent-6: var(--wui-blue-6);\n--wui-color-accent-7: var(--wui-blue-7);\n--wui-color-accent-8: var(--wui-blue-8);\n--wui-color-accent-9: var(--wui-blue-9);\n--wui-color-accent-10: var(--wui-blue-10);\n--wui-color-accent-11: var(--wui-blue-11);\n--wui-color-accent-12: var(--wui-blue-12);\n--wui-color-accent-contrast: var(--wui-blue-contrast);\n--wui-color-base-1: var(--wui-blue-1);\n--wui-color-base-2: var(--wui-blue-2);\n--wui-color-base-3: var(--wui-blue-3);\n--wui-color-base-4: var(--wui-blue-4);\n--wui-color-base-5: var(--wui-blue-5);\n--wui-color-base-6: var(--wui-blue-6);\n--wui-color-base-7: var(--wui-blue-7);\n--wui-color-base-8: var(--wui-blue-8);\n--wui-color-base-9: var(--wui-blue-9);\n--wui-color-base-10: var(--wui-blue-10);\n--wui-color-base-11: var(--wui-blue-11);\n--wui-color-base-12: var(--wui-blue-12);\n--wui-color-base-contrast: var(--wui-blue-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-blue-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-blue-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-blue-9);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
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";
1764
1769
  //#endregion
1765
1770
  //#region src/css/designTokens/generated/schemes/success.css
1766
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";
1767
1772
  //#endregion
1768
- //#region src/css/designTokens/generated/schemes/warning.css
1769
- var warning_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, warning permutation\n * ------------------------------------------- */\n--wui-color-accent-1: var(--wui-warning-1);\n--wui-color-accent-2: var(--wui-warning-2);\n--wui-color-accent-3: var(--wui-warning-3);\n--wui-color-accent-4: var(--wui-warning-4);\n--wui-color-accent-5: var(--wui-warning-5);\n--wui-color-accent-6: var(--wui-warning-6);\n--wui-color-accent-7: var(--wui-warning-7);\n--wui-color-accent-8: var(--wui-warning-8);\n--wui-color-accent-9: var(--wui-warning-9);\n--wui-color-accent-10: var(--wui-warning-10);\n--wui-color-accent-11: var(--wui-warning-11);\n--wui-color-accent-12: var(--wui-warning-12);\n--wui-color-accent-contrast: var(--wui-warning-contrast);\n--wui-color-base-1: var(--wui-warning-1);\n--wui-color-base-2: var(--wui-warning-2);\n--wui-color-base-3: var(--wui-warning-3);\n--wui-color-base-4: var(--wui-warning-4);\n--wui-color-base-5: var(--wui-warning-5);\n--wui-color-base-6: var(--wui-warning-6);\n--wui-color-base-7: var(--wui-warning-7);\n--wui-color-base-8: var(--wui-warning-8);\n--wui-color-base-9: var(--wui-warning-9);\n--wui-color-base-10: var(--wui-warning-10);\n--wui-color-base-11: var(--wui-warning-11);\n--wui-color-base-12: var(--wui-warning-12);\n--wui-color-base-contrast: var(--wui-warning-contrast);\n--wui-color-bg-fill: var(--wui-color-accent-9);\n--wui-color-bg-fill-active: var(--wui-color-accent-11);\n--wui-color-bg-fill-hover: var(--wui-color-accent-10);\n--wui-color-bg-surface: var(--wui-color-surface-token);\n--wui-color-bg-surface-active: var(--wui-color-base-4);\n--wui-color-bg-surface-hover: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary: var(--wui-color-base-3);\n--wui-color-bg-surface-secondary-active: var(--wui-color-base-5);\n--wui-color-bg-surface-secondary-hover: var(--wui-color-base-4);\n--wui-color-bg-surface-tertiary: var(--wui-color-base-5);\n--wui-color-border: var(--wui-color-base-6);\n--wui-color-border-active: var(--wui-color-base-9);\n--wui-color-border-hover: var(--wui-color-base-8);\n--wui-color-border-secondary: var(--wui-color-base-8);\n--wui-color-border-secondary-active: var(--wui-color-base-11);\n--wui-color-border-secondary-hover: var(--wui-color-base-10);\n--wui-color-focus-ring: var(--wui-color-accent-9);\n--wui-color-icon: var(--wui-color-base-11);\n--wui-color-icon-on-fill: var(--wui-color-accent-contrast);\n--wui-color-surface-token: var(--wui-warning-2);\n--wui-color-text: var(--wui-color-base-12);\n--wui-color-text-button: var(--wui-color-text-button-token);\n--wui-color-text-button-token: var(--wui-warning-11);\n--wui-color-text-link: var(--wui-color-text-link-token);\n--wui-color-text-link-token: var(--wui-warning-11);\n--wui-color-text-on-fill: var(--wui-color-accent-contrast);\n--wui-color-text-secondary: var(--wui-color-base-11);\n";
1770
- //#endregion
1771
1773
  //#region src/css/designTokens/generated/schemes/vendor-hubspot.css
1772
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";
1773
1775
  //#endregion
@@ -1777,8 +1779,11 @@ var vendor_marketo_default = "/* -------------------------------------------\n *
1777
1779
  //#region src/css/designTokens/generated/schemes/vendor-pardot.css
1778
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";
1779
1781
  //#endregion
1780
- //#region src/css/designTokens/generated/schemes/nav.css
1781
- var nav_default = "/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * Source: generated/tokens.css, nav permutation\n * ------------------------------------------- */\n--wui-color-bg-app: #1e3399;\n--wui-color-bg-fill: var(--wui-blue-1);\n--wui-color-bg-fill-active: #dcdfef;\n--wui-color-bg-fill-hover: #e7e9f4;\n--wui-color-bg-surface: #0000;\n--wui-color-bg-surface-active: #122271;\n--wui-color-bg-surface-disabled: #0000;\n--wui-color-bg-surface-hover: #15267b;\n--wui-color-bg-surface-secondary: #15267b;\n--wui-color-bg-surface-secondary-active: #101e67;\n--wui-color-bg-surface-secondary-hover: #122271;\n--wui-color-bg-surface-selected: var(--wui-color-bg-fill);\n--wui-color-bg-surface-selected-active: var(--wui-color-bg-fill-active);\n--wui-color-bg-surface-selected-hover: var(--wui-color-bg-fill-hover);\n--wui-color-bg-surface-tertiary: #0d1a5c;\n--wui-color-border: var(--wui-color-bg-fill);\n--wui-color-border-active: var(--wui-color-bg-fill-active);\n--wui-color-border-active-selected: #0000;\n--wui-color-border-hover: var(--wui-color-bg-fill-hover);\n--wui-color-border-hover-selected: #0000;\n--wui-color-border-secondary: #101e67;\n--wui-color-border-selected: #0000;\n--wui-color-focus-ring: var(--wui-blue-1);\n--wui-color-icon: var(--wui-blue-1);\n--wui-color-icon-disabled: var(--wui-blue-8);\n--wui-color-icon-on-fill: var(--wui-color-bg-app);\n--wui-color-icon-selected: var(--wui-color-bg-app);\n--wui-color-segmented-color-text-override: var(--wui-blue-9);\n--wui-color-text: var(--wui-blue-1);\n--wui-color-text-button: var(--wui-blue-1);\n--wui-color-text-disabled: var(--wui-blue-8);\n--wui-color-text-link: var(--wui-blue-4);\n--wui-color-text-on-fill: var(--wui-color-bg-app);\n--wui-color-text-secondary: var(--wui-blue-6);\n--wui-color-text-selected: var(--wui-color-bg-app);\n";
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";
1782
1787
  //#endregion
1783
1788
  //#region src/css/designTokens/colorSchemes.tsx
1784
1789
  const standardColorScheme = css`
@@ -1987,165 +1992,30 @@ const buttonResetCss = css`
1987
1992
  }
1988
1993
  `;
1989
1994
  //#endregion
1990
- //#region src/components/Button/buttonStyles.tsx
1991
- const buttonSmallStyles = css`
1992
- --button-padding-vertical: var(--wui-space-01);
1993
- --button-padding-horizontal: var(--wui-space-02);
1994
- --button-label-padding-horizontal: var(--wui-space-01);
1995
- --button-typography-family: var(--wui-typography-family-default);
1996
- --button-typography-size: var(--wui-typography-label-4-font-size);
1997
- --button-typography-weight: var(--wui-typography-label-4-font-weight);
1998
- --button-typography-line-height: 16px;
1999
- --button-icon-size: 12px;
2000
- --button-label-gap: 4px;
2001
- `;
2002
- const buttonMediumStyles = css`
2003
- --button-padding-vertical: var(--wui-space-02);
2004
- --button-padding-horizontal: var(--wui-space-02);
2005
- --button-label-padding-horizontal: 6px;
2006
- --button-typography-family: var(--wui-typography-family-default);
2007
- --button-typography-size: var(--wui-typography-label-3-font-size);
2008
- --button-typography-weight: var(--wui-typography-label-3-font-weight);
2009
- --button-typography-line-height: 16px;
2010
- --button-icon-size: 16px;
2011
- --button-label-gap: 6px;
2012
- `;
2013
- const buttonLargeStyles = css`
2014
- --button-padding-vertical: var(--wui-space-02);
2015
- --button-padding-horizontal: var(--wui-space-02);
2016
- --button-label-padding-horizontal: var(--wui-space-02);
2017
- --button-typography-family: var(--wui-typography-family-default);
2018
- --button-typography-size: var(--wui-typography-label-1-font-size);
2019
- --button-typography-weight: var(--wui-typography-label-1-font-weight);
2020
- --button-typography-line-height: 24px;
2021
- --button-icon-size: 24px;
2022
- --button-label-gap: 8px;
2023
- `;
2024
- const buttonExtraLargeStyles = css`
2025
- --button-padding-vertical: var(--wui-space-03);
2026
- --button-padding-horizontal: var(--wui-space-03);
2027
- --button-label-padding-horizontal: var(--wui-space-02);
2028
- --button-typography-family: var(--wui-typography-family-brand);
2029
- --button-typography-size: 18px;
2030
- --button-typography-weight: var(--wui-typography-weight-brand-bold);
2031
- --button-typography-line-height: 24px;
2032
- --button-icon-size: 24px;
2033
- --button-label-gap: 8px;
2034
- `;
2035
- const ghostButtonVariant = css`
2036
- --button-color-bg-override: transparent;
2037
- --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
2038
- --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
2039
- --button-color-text: var(--wui-color-text-button);
2040
- --button-color-icon: var(--wui-color-icon);
2041
- `;
2042
- const outlineButtonVariant = css`
2043
- ${ghostButtonVariant};
2044
- --button-color-border: var(--wui-color-border);
2045
-
2046
- box-shadow: 0 0 0 2px var(--button-color-border) inset;
2047
- `;
2048
- const softButtonVariant = css`
2049
- --button-color-bg: var(--wui-color-bg-surface-secondary);
2050
- --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
2051
- --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
2052
- --button-color-text: var(--wui-color-text-button);
2053
- --button-color-icon: var(--wui-color-icon);
2054
- `;
2055
- const solidButtonVariant = css`
2056
- --button-color-bg: var(--wui-color-bg-fill);
2057
- --button-color-bg-hover: var(--wui-color-bg-fill-hover);
2058
- --button-color-bg-active: var(--wui-color-bg-fill-active);
2059
- --button-color-text: var(--wui-color-text-on-fill);
2060
- --button-color-icon: var(--wui-color-icon-on-fill);
2061
- `;
2062
- const disabledButtonVariant = css`
2063
- --button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
2064
- --button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
2065
- --button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
2066
- --button-color-text: var(--wui-color-text-disabled);
2067
- --button-color-icon: var(--wui-color-icon-disabled);
2068
- --button-color-border: var(--wui-color-border-disabled);
2069
- `;
2070
- const pressedButtonVariant = css`
2071
- --button-color-bg: var(--wui-color-bg-surface-selected);
2072
- --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
2073
- --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
2074
- --button-color-text: var(--wui-color-text-selected);
2075
- --button-color-icon: var(--wui-color-icon-selected);
2076
- --button-color-border: var(--wui-color-border-selected);
2077
- `;
2078
- const buttonBaseStyles = css`
2079
- border-radius: var(--wui-border-radius-rounded);
2080
- font-family: var(--button-typography-family);
2081
- font-size: var(--button-typography-size);
2082
- font-weight: var(--button-typography-weight);
2083
- line-height: var(--button-typography-line-height);
2084
- padding: var(--button-padding-vertical) var(--button-padding-horizontal);
2085
- background-color: var(--button-color-bg);
2086
- color: var(--button-color-text);
2087
- transition:
2088
- background-color var(--wui-motion-duration-01) var(--wui-motion-ease),
2089
- box-shadow var(--wui-motion-duration-01) var(--wui-motion-ease);
2090
-
2091
- /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
2092
- && {
2093
- & svg {
2094
- color: var(--button-color-icon);
2095
- width: var(--button-icon-size);
2096
- height: var(--button-icon-size);
2097
- flex: 0 0 var(--button-icon-size);
2098
- }
2099
- }
2100
-
2101
- &:focus {
2102
- outline: none;
2103
- }
2104
-
2105
- &:focus-visible,
2106
- &.force-state-focus {
2107
- --wui-button-focus-color: var(--wui-color-focus-ring);
2108
-
2109
- background-color: var(--button-color-bg-hover);
2110
- box-shadow:
2111
- inset 0 0 0 2px var(--wui-button-focus-color),
2112
- inset 0 0 0 3px var(--wui-color-bg-app),
2113
- inset 0 0 0 5px var(--button-color-border, transparent);
2114
-
2115
- &[aria-disabled='true'] {
2116
- --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
2117
- }
2118
- }
2119
-
2120
- &:hover:not([aria-disabled='true']),
2121
- &.force-state-hover {
2122
- background-color: var(--button-color-bg-hover);
2123
- }
2124
-
2125
- &:active:not([aria-disabled='true']),
2126
- &.force-state-active {
2127
- background-color: var(--button-color-bg-active);
2128
- }
2129
-
2130
- &[aria-disabled='true'] {
2131
- ${disabledButtonVariant};
2132
- }
2133
-
2134
- &[aria-pressed='true'] {
2135
- ${pressedButtonVariant};
2136
- }
2137
- `;
2138
- const buttonVariantsStyles = {
2139
- ghost: ghostButtonVariant,
2140
- outline: outlineButtonVariant,
2141
- soft: softButtonVariant,
2142
- 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;
2143
1998
  };
2144
- const buttonSizeStyles = {
2145
- sm: buttonSmallStyles,
2146
- md: buttonMediumStyles,
2147
- lg: buttonLargeStyles,
2148
- 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]);
2149
2019
  };
2150
2020
  //#endregion
2151
2021
  //#region src/components/Icon/icons/AbTestIcon.tsx
@@ -2638,17 +2508,6 @@ const ChaptersIcon = (props) => /* @__PURE__ */ jsx("svg", {
2638
2508
  })
2639
2509
  });
2640
2510
  //#endregion
2641
- //#region src/components/Icon/icons/CheckmarkIcon.tsx
2642
- const CheckmarkIcon = (props) => /* @__PURE__ */ jsx("svg", {
2643
- ...props,
2644
- viewBox: "0 0 24 24",
2645
- xmlns: "http://www.w3.org/2000/svg",
2646
- children: /* @__PURE__ */ jsx("path", {
2647
- 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",
2648
- fill: "currentColor"
2649
- })
2650
- });
2651
- //#endregion
2652
2511
  //#region src/components/Icon/icons/CheckmarkCircleIcon.tsx
2653
2512
  const CheckmarkCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
2654
2513
  ...props,
@@ -2673,6 +2532,17 @@ const CheckmarkCircleOutlineIcon = (props) => /* @__PURE__ */ jsx("svg", {
2673
2532
  })
2674
2533
  });
2675
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
2676
2546
  //#region src/components/Icon/icons/CheckmarkThreeQuatersCircleIcon.tsx
2677
2547
  const CheckmarkThreeQuatersCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
2678
2548
  ...props,
@@ -2721,6 +2591,17 @@ const ClipsIcon = (props) => /* @__PURE__ */ jsx("svg", {
2721
2591
  })
2722
2592
  });
2723
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
2724
2605
  //#region src/components/Icon/icons/CloseIcon.tsx
2725
2606
  const CloseIcon = (props) => /* @__PURE__ */ jsx("svg", {
2726
2607
  ...props,
@@ -2747,17 +2628,6 @@ const CloseOctagonIcon = (props) => /* @__PURE__ */ jsx("svg", {
2747
2628
  })
2748
2629
  });
2749
2630
  //#endregion
2750
- //#region src/components/Icon/icons/ClosedCaptionsIcon.tsx
2751
- const ClosedCaptionsIcon = (props) => /* @__PURE__ */ jsx("svg", {
2752
- ...props,
2753
- viewBox: "0 0 24 24",
2754
- xmlns: "http://www.w3.org/2000/svg",
2755
- children: /* @__PURE__ */ jsx("path", {
2756
- 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",
2757
- fill: "currentColor"
2758
- })
2759
- });
2760
- //#endregion
2761
2631
  //#region src/components/Icon/icons/CmdIcon.tsx
2762
2632
  const CmdIcon = (props) => /* @__PURE__ */ jsx("svg", {
2763
2633
  ...props,
@@ -2771,27 +2641,27 @@ const CmdIcon = (props) => /* @__PURE__ */ jsx("svg", {
2771
2641
  })
2772
2642
  });
2773
2643
  //#endregion
2774
- //#region src/components/Icon/icons/CollapseIcon.tsx
2775
- const CollapseIcon = (props) => /* @__PURE__ */ jsx("svg", {
2644
+ //#region src/components/Icon/icons/CollapseDiagonalIcon.tsx
2645
+ const CollapseDiagonalIcon = (props) => /* @__PURE__ */ jsx("svg", {
2776
2646
  ...props,
2777
2647
  viewBox: "0 0 24 24",
2778
2648
  xmlns: "http://www.w3.org/2000/svg",
2779
2649
  children: /* @__PURE__ */ jsx("path", {
2780
2650
  clipRule: "evenodd",
2781
- 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",
2782
2652
  fill: "currentColor",
2783
2653
  fillRule: "evenodd"
2784
2654
  })
2785
2655
  });
2786
2656
  //#endregion
2787
- //#region src/components/Icon/icons/CollapseDiagonalIcon.tsx
2788
- const CollapseDiagonalIcon = (props) => /* @__PURE__ */ jsx("svg", {
2657
+ //#region src/components/Icon/icons/CollapseIcon.tsx
2658
+ const CollapseIcon = (props) => /* @__PURE__ */ jsx("svg", {
2789
2659
  ...props,
2790
2660
  viewBox: "0 0 24 24",
2791
2661
  xmlns: "http://www.w3.org/2000/svg",
2792
2662
  children: /* @__PURE__ */ jsx("path", {
2793
2663
  clipRule: "evenodd",
2794
- 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",
2795
2665
  fill: "currentColor",
2796
2666
  fillRule: "evenodd"
2797
2667
  })
@@ -3083,19 +2953,6 @@ const ErrorIcon = (props) => /* @__PURE__ */ jsx("svg", {
3083
2953
  })
3084
2954
  });
3085
2955
  //#endregion
3086
- //#region src/components/Icon/icons/ExpandIcon.tsx
3087
- const ExpandIcon = (props) => /* @__PURE__ */ jsx("svg", {
3088
- ...props,
3089
- viewBox: "0 0 24 24",
3090
- xmlns: "http://www.w3.org/2000/svg",
3091
- children: /* @__PURE__ */ jsx("path", {
3092
- clipRule: "evenodd",
3093
- 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",
3094
- fill: "currentColor",
3095
- fillRule: "evenodd"
3096
- })
3097
- });
3098
- //#endregion
3099
2956
  //#region src/components/Icon/icons/ExpandDiagonalIcon.tsx
3100
2957
  const ExpandDiagonalIcon = (props) => /* @__PURE__ */ jsx("svg", {
3101
2958
  ...props,
@@ -3133,6 +2990,19 @@ const ExpandHorizontalIcon = (props) => /* @__PURE__ */ jsx("svg", {
3133
2990
  })
3134
2991
  });
3135
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
3136
3006
  //#region src/components/Icon/icons/FastForwardIcon.tsx
3137
3007
  const FastForwardIcon = (props) => /* @__PURE__ */ jsx("svg", {
3138
3008
  ...props,
@@ -3763,24 +3633,24 @@ const MinimizeIcon = (props) => /* @__PURE__ */ jsx("svg", {
3763
3633
  })
3764
3634
  });
3765
3635
  //#endregion
3766
- //#region src/components/Icon/icons/MinusIcon.tsx
3767
- const MinusIcon = (props) => /* @__PURE__ */ jsx("svg", {
3636
+ //#region src/components/Icon/icons/MinusCircleIcon.tsx
3637
+ const MinusCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
3768
3638
  ...props,
3769
3639
  viewBox: "0 0 24 24",
3770
3640
  xmlns: "http://www.w3.org/2000/svg",
3771
3641
  children: /* @__PURE__ */ jsx("path", {
3772
- 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",
3773
3643
  fill: "currentColor"
3774
3644
  })
3775
3645
  });
3776
3646
  //#endregion
3777
- //#region src/components/Icon/icons/MinusCircleIcon.tsx
3778
- const MinusCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
3647
+ //#region src/components/Icon/icons/MinusIcon.tsx
3648
+ const MinusIcon = (props) => /* @__PURE__ */ jsx("svg", {
3779
3649
  ...props,
3780
3650
  viewBox: "0 0 24 24",
3781
3651
  xmlns: "http://www.w3.org/2000/svg",
3782
3652
  children: /* @__PURE__ */ jsx("path", {
3783
- 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",
3784
3654
  fill: "currentColor"
3785
3655
  })
3786
3656
  });
@@ -4071,24 +3941,24 @@ const PipIcon = (props) => /* @__PURE__ */ jsx("svg", {
4071
3941
  })
4072
3942
  });
4073
3943
  //#endregion
4074
- //#region src/components/Icon/icons/PlayIcon.tsx
4075
- const PlayIcon = (props) => /* @__PURE__ */ jsx("svg", {
3944
+ //#region src/components/Icon/icons/PlayerIcon.tsx
3945
+ const PlayerIcon = (props) => /* @__PURE__ */ jsx("svg", {
4076
3946
  ...props,
4077
3947
  viewBox: "0 0 24 24",
4078
3948
  xmlns: "http://www.w3.org/2000/svg",
4079
3949
  children: /* @__PURE__ */ jsx("path", {
4080
- 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",
4081
3951
  fill: "currentColor"
4082
3952
  })
4083
3953
  });
4084
3954
  //#endregion
4085
- //#region src/components/Icon/icons/PlayerIcon.tsx
4086
- const PlayerIcon = (props) => /* @__PURE__ */ jsx("svg", {
3955
+ //#region src/components/Icon/icons/PlayIcon.tsx
3956
+ const PlayIcon = (props) => /* @__PURE__ */ jsx("svg", {
4087
3957
  ...props,
4088
3958
  viewBox: "0 0 24 24",
4089
3959
  xmlns: "http://www.w3.org/2000/svg",
4090
3960
  children: /* @__PURE__ */ jsx("path", {
4091
- 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",
4092
3962
  fill: "currentColor"
4093
3963
  })
4094
3964
  });
@@ -4240,19 +4110,6 @@ const ReactIcon = (props) => /* @__PURE__ */ jsx("svg", {
4240
4110
  })
4241
4111
  });
4242
4112
  //#endregion
4243
- //#region src/components/Icon/icons/RecordIcon.tsx
4244
- const RecordIcon = (props) => /* @__PURE__ */ jsx("svg", {
4245
- ...props,
4246
- viewBox: "0 0 24 24",
4247
- xmlns: "http://www.w3.org/2000/svg",
4248
- children: /* @__PURE__ */ jsx("path", {
4249
- clipRule: "evenodd",
4250
- 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",
4251
- fill: "currentColor",
4252
- fillRule: "evenodd"
4253
- })
4254
- });
4255
- //#endregion
4256
4113
  //#region src/components/Icon/icons/RecordGroupIcon.tsx
4257
4114
  const RecordGroupIcon = (props) => /* @__PURE__ */ jsxs("svg", {
4258
4115
  ...props,
@@ -4284,6 +4141,19 @@ const RecordGroupIcon = (props) => /* @__PURE__ */ jsxs("svg", {
4284
4141
  ]
4285
4142
  });
4286
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
4287
4157
  //#region src/components/Icon/icons/RedoIcon.tsx
4288
4158
  const RedoIcon = (props) => /* @__PURE__ */ jsx("svg", {
4289
4159
  ...props,
@@ -4407,27 +4277,27 @@ const RoundnessIcon = (props) => /* @__PURE__ */ jsx("svg", {
4407
4277
  })
4408
4278
  });
4409
4279
  //#endregion
4410
- //#region src/components/Icon/icons/SaveIcon.tsx
4411
- const SaveIcon = (props) => /* @__PURE__ */ jsx("svg", {
4280
+ //#region src/components/Icon/icons/SaveAsCopyIcon.tsx
4281
+ const SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx("svg", {
4412
4282
  ...props,
4413
4283
  viewBox: "0 0 24 24",
4414
4284
  xmlns: "http://www.w3.org/2000/svg",
4415
4285
  children: /* @__PURE__ */ jsx("path", {
4416
- 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",
4417
- 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"
4418
4290
  })
4419
4291
  });
4420
4292
  //#endregion
4421
- //#region src/components/Icon/icons/SaveAsCopyIcon.tsx
4422
- const SaveAsCopyIcon = (props) => /* @__PURE__ */ jsx("svg", {
4293
+ //#region src/components/Icon/icons/SaveIcon.tsx
4294
+ const SaveIcon = (props) => /* @__PURE__ */ jsx("svg", {
4423
4295
  ...props,
4424
4296
  viewBox: "0 0 24 24",
4425
4297
  xmlns: "http://www.w3.org/2000/svg",
4426
4298
  children: /* @__PURE__ */ jsx("path", {
4427
- clipRule: "evenodd",
4428
- 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",
4429
- fill: "currentColor",
4430
- 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"
4431
4301
  })
4432
4302
  });
4433
4303
  //#endregion
@@ -4669,18 +4539,6 @@ const TeleprompterIcon = (props) => /* @__PURE__ */ jsx("svg", {
4669
4539
  })
4670
4540
  });
4671
4541
  //#endregion
4672
- //#region src/components/Icon/icons/TextIcon.tsx
4673
- const TextIcon = (props) => /* @__PURE__ */ jsx("svg", {
4674
- ...props,
4675
- viewBox: "0 0 24 24",
4676
- xmlns: "http://www.w3.org/2000/svg",
4677
- children: /* @__PURE__ */ jsx("path", {
4678
- transform: "translate(3.334 2.664)",
4679
- 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",
4680
- fill: "currentColor"
4681
- })
4682
- });
4683
- //#endregion
4684
4542
  //#region src/components/Icon/icons/TextAllCapsIcon.tsx
4685
4543
  const TextAllCapsIcon = (props) => /* @__PURE__ */ jsx("svg", {
4686
4544
  ...props,
@@ -4727,6 +4585,18 @@ const TextCenterAlignIcon = (props) => /* @__PURE__ */ jsx("svg", {
4727
4585
  })
4728
4586
  });
4729
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
4730
4600
  //#region src/components/Icon/icons/TextItalicsIcon.tsx
4731
4601
  const TextItalicsIcon = (props) => /* @__PURE__ */ jsx("svg", {
4732
4602
  ...props,
@@ -5413,32 +5283,6 @@ const iconMap = {
5413
5283
  "zoom-out": ZoomOutIcon
5414
5284
  };
5415
5285
  //#endregion
5416
- //#region src/private/hooks/useResponsiveProp/useResponsiveProp.ts
5417
- const isResponsiveObject = (values) => {
5418
- return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
5419
- };
5420
- /** How to use in a component
5421
- * const Example = ({ someProp }: ExampleProps) => {
5422
- * const somePropResponsiveValue = useResponsiveProp<ExampleProps['someProp']>(someProp);
5423
- *
5424
- * return <div>{somePropResponsiveValue}</div>;
5425
- * }
5426
- *
5427
- * The end use could implement either:
5428
- * <Example someProp="a normal value" />
5429
- * <Example someProp={{ base: 'baselinevalue', isMdAndUp: 'value for medium screens', isLgAndUp: 'value for larger screens' }} />
5430
- */
5431
- const useResponsiveProp = (values) => {
5432
- const activeMediaQueries = useActiveMq();
5433
- return useMemo(() => {
5434
- if (isRecord(values) && isResponsiveObject(values)) {
5435
- const mq = activeMediaQueries.find((key) => key in values);
5436
- return isNotUndefined(mq) && isNotUndefined(values[mq]) ? values[mq] : values.base;
5437
- }
5438
- return values;
5439
- }, [activeMediaQueries, values]);
5440
- };
5441
- //#endregion
5442
5286
  //#region src/components/Icon/Icon.tsx
5443
5287
  const iconSizeMap = {
5444
5288
  sm: "12",
@@ -5622,12 +5466,173 @@ const Link = ({ beforeAction, children, type, disabled = false, colorScheme = "i
5622
5466
  return null;
5623
5467
  };
5624
5468
  //#endregion
5625
- //#region src/components/Button/Button.tsx
5626
- const isLink = (props) => isNotUndefined(props.href);
5627
- const StyledButton$2 = styled.button`
5628
- ${buttonResetCss}
5629
- ${({ $colorScheme }) => getColorScheme($colorScheme)}
5630
- ${({ $size }) => buttonSizeStyles[$size]}
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]}
5631
5636
  ${({ $variant }) => buttonVariantsStyles[$variant]}
5632
5637
  ${({ $unstyled }) => !$unstyled && buttonBaseStyles}
5633
5638
  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "fit-content"};
@@ -5866,44 +5871,6 @@ const ActionButton = ({ icon, colorScheme = "standard", disabled = false, forceS
5866
5871
  });
5867
5872
  };
5868
5873
  //#endregion
5869
- //#region src/components/Avatar/formatNameForDisplay.tsx
5870
- const containsEmojiCharacter = (char) => {
5871
- return /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu.test(char);
5872
- };
5873
- const formatNameForDisplay = (name) => {
5874
- if (isNil(name) || !isString(name) || isEmptyString(name) || containsEmojiCharacter(name)) return "U";
5875
- return name.trim().slice(0, 1).toUpperCase();
5876
- };
5877
- //#endregion
5878
- //#region src/components/Image/Image.tsx
5879
- const getFillStyle$1 = (fillContainer) => {
5880
- if (fillContainer === "horizontal") return "width: 100%;";
5881
- if (fillContainer === "vertical") return "height: 100%;";
5882
- if (fillContainer === true) return `
5883
- width: 100%;
5884
- height: 100%;
5885
- `;
5886
- };
5887
- const StyledImage = styled.img`
5888
- border-radius: ${({ $borderRadius }) => isNotNil($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
5889
- ${({ $fillContainer }) => getFillStyle$1($fillContainer)};
5890
- object-fit: ${({ $objFit }) => $objFit};
5891
- object-position: ${({ $objPosition }) => $objPosition};
5892
- `;
5893
- const Image = ({ src, alt, borderRadius, fill: fillContainer = false, fit: objFit, loading = "lazy", position: objPosition, onLoad, onError, ...props }) => /* @__PURE__ */ jsx(StyledImage, {
5894
- $borderRadius: borderRadius,
5895
- $fillContainer: fillContainer,
5896
- $objFit: objFit,
5897
- $objPosition: objPosition,
5898
- alt,
5899
- loading,
5900
- onError,
5901
- onLoad,
5902
- src,
5903
- ...props
5904
- });
5905
- Image.displayName = "Image_UI";
5906
- //#endregion
5907
5874
  //#region src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
5908
5875
  const defaultColorSchemeOptions = ["standard", "inherit"];
5909
5876
  const semanticColorSchemeOptions = [
@@ -5946,6 +5913,44 @@ const ColorSchemeWrapper = ({ __nav = false, colorScheme = "inherit", children,
5946
5913
  });
5947
5914
  ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
5948
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
5949
5954
  //#region src/components/Avatar/Avatar.tsx
5950
5955
  const avatarSizeMap = {
5951
5956
  sm: 16,
@@ -6250,6 +6255,66 @@ const BoxComponent = ({ ref, alignContent = "stretch", alignItems = "flex-start"
6250
6255
  */
6251
6256
  const Box = makePolymorphic(BoxComponent);
6252
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";
6317
+ //#endregion
6253
6318
  //#region src/private/helpers/truncateString/truncateString.ts
6254
6319
  /**
6255
6320
  * Truncates a string to a maximum number of characters
@@ -6380,10 +6445,41 @@ const HeadingComponent = ({ ref, align = "left", children, colorScheme = "inheri
6380
6445
  children: processedChildren
6381
6446
  });
6382
6447
  };
6383
- /**
6384
- * Displaying heading text, both visually and semantically
6385
- */
6386
- const Heading = makePolymorphic(HeadingComponent);
6448
+ /**
6449
+ * Displaying heading text, both visually and semantically
6450
+ */
6451
+ const Heading = makePolymorphic(HeadingComponent);
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
+ };
6387
6483
  //#endregion
6388
6484
  //#region src/components/Text/Text.tsx
6389
6485
  const sharedBodyStyle = css`
@@ -6575,97 +6671,6 @@ const TextComponent = ({ ref, align = "left", children, colorScheme = "inherit",
6575
6671
  */
6576
6672
  const Text = makePolymorphic(TextComponent);
6577
6673
  //#endregion
6578
- //#region src/components/ButtonGroup/ButtonGroup.tsx
6579
- const getAlignment = (align) => {
6580
- if (align === "center") return "center";
6581
- if (align === "left") return "flex-start";
6582
- if (align === "right") return "flex-end";
6583
- return "flex-start";
6584
- };
6585
- const ButtonGroupComponent = styled.div`
6586
- display: flex;
6587
-
6588
- /* this helps ensure that primary buttons appear at the top of the column */
6589
- flex-direction: ${({ $collapse, $align }) => {
6590
- if (!$collapse) return "row";
6591
- return $align === "right" ? "column-reverse" : "column";
6592
- }};
6593
- gap: var(--wui-space-02);
6594
- align-items: center;
6595
- justify-content: ${({ $align }) => getAlignment($align)};
6596
- width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
6597
-
6598
- ${mq.smAndUp} {
6599
- flex-direction: row;
6600
- }
6601
-
6602
- &:not([data-wistia-ui-icon-button]) {
6603
- ${mq.smAndDown} {
6604
- width: 100%;
6605
- }
6606
- }
6607
-
6608
- ${({ $buttonSize }) => $buttonSize !== "natural" && css`
6609
- button,
6610
- a {
6611
- ${buttonSizeStyles[$buttonSize]}
6612
- }
6613
-
6614
- [data-wistia-ui-icon-button] {
6615
- height: var(--icon-button-size-${$buttonSize});
6616
- width: var(--icon-button-size-${$buttonSize});
6617
- }
6618
- `}
6619
- `;
6620
- /**
6621
- * ButtonGroup is a layout component that groups buttons together,
6622
- * with a standardized gap between them.
6623
- */
6624
- const ButtonGroup = ({ children, align = "left", fullWidth = false, collapseOnSmallScreens = true, buttonSize = "natural", ...props }) => {
6625
- const responsiveButtonSize = useResponsiveProp(buttonSize);
6626
- if (isNil(children)) return null;
6627
- return /* @__PURE__ */ jsx(ButtonGroupComponent, {
6628
- $align: align,
6629
- $buttonSize: responsiveButtonSize,
6630
- $collapse: collapseOnSmallScreens,
6631
- $fullWidth: fullWidth,
6632
- ...props,
6633
- children
6634
- });
6635
- };
6636
- ButtonGroup.displayName = "ButtonGroup_UI";
6637
- //#endregion
6638
- //#region src/components/IconButton/IconButton.tsx
6639
- const StyledButton$1 = styled(Button)`
6640
- --icon-button-size-sm: 24px;
6641
- --icon-button-size-md: 32px;
6642
- --icon-button-size-lg: 40px;
6643
- --icon-button-size-xl: 48px;
6644
-
6645
- border-radius: 50%;
6646
- height: ${({ size }) => `var(--icon-button-size-${size})`};
6647
- width: ${({ size }) => `var(--icon-button-size-${size})`};
6648
- display: flex;
6649
- justify-content: center;
6650
- align-items: center;
6651
- line-height: 1;
6652
- `;
6653
- /**
6654
- * IconButton behaves like a [Button](/components/Button),
6655
- * but only accepts an [Icon](/components/Icon) as a child.
6656
- */
6657
- const IconButton = ({ children, label, size = "md", ref, ...props }) => {
6658
- const responsiveSize = useResponsiveProp(size);
6659
- return /* @__PURE__ */ jsx(StyledButton$1, {
6660
- ...props,
6661
- ref,
6662
- "aria-label": label,
6663
- "data-wistia-ui-icon-button": true,
6664
- size: responsiveSize,
6665
- children: cloneElement(Children.only(children), { size: responsiveSize })
6666
- });
6667
- };
6668
- //#endregion
6669
6674
  //#region src/components/Banner/Banner.tsx
6670
6675
  const StyledBanner = styled.div`
6671
6676
  display: flex;
@@ -7014,45 +7019,6 @@ const StackComponent = ({ ref, renderAs, direction = "vertical", gap = "space-02
7014
7019
  */
7015
7020
  const Stack = makePolymorphic(StackComponent);
7016
7021
  //#endregion
7017
- //#region src/components/FormGroup/FormGroup.tsx
7018
- const StyledFieldset = styled.fieldset`
7019
- padding: 0;
7020
- margin: 0;
7021
- border: 0;
7022
- `;
7023
- const StyledLegend = styled.legend`
7024
- padding-inline: 0;
7025
- display: flex;
7026
- flex-direction: column;
7027
- gap: var(--wui-space-01);
7028
- margin-bottom: var(--wui-space-02);
7029
- `;
7030
- /**
7031
- * For grouping like form elements together.
7032
- */
7033
- const FormGroup = ({ children, label, description, ...props }) => {
7034
- const ref = useRef(null);
7035
- const hasLabel = isNotNil(label) && isNonEmptyString(label);
7036
- const hasDescription = isNotNil(description) && isNonEmptyString(description);
7037
- return /* @__PURE__ */ jsxs(Stack, {
7038
- ...props,
7039
- ref,
7040
- renderAs: StyledFieldset,
7041
- children: [hasLabel || hasDescription ? /* @__PURE__ */ jsxs(Heading, {
7042
- renderAs: StyledLegend,
7043
- variant: "heading5",
7044
- children: [hasLabel ? label : null, hasDescription ? /* @__PURE__ */ jsx(Text, {
7045
- "data-wui-form-group-description": true,
7046
- prominence: "secondary",
7047
- renderAs: "span",
7048
- variant: "body4",
7049
- children: description
7050
- }) : null]
7051
- }) : null, children]
7052
- });
7053
- };
7054
- FormGroup.displayName = "FormGroup_UI";
7055
- //#endregion
7056
7022
  //#region src/components/Form/serializeFormData.tsx
7057
7023
  const ARRAY_SUFFIX = "[]";
7058
7024
  const serializeFormData = (formData) => {
@@ -7149,6 +7115,45 @@ const Form = ({ children, action, values = DEFAULT_VALUES, labelPosition = "bloc
7149
7115
  });
7150
7116
  };
7151
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
7152
7157
  //#region src/components/FormGroup/CheckboxGroup.tsx
7153
7158
  const CheckboxGroupContext = createContext(null);
7154
7159
  /**
@@ -7452,6 +7457,54 @@ const CollapsibleContent = ({ clamp, children }) => {
7452
7457
  return /* @__PURE__ */ jsx(Collapsible$1.Panel, { children: /* @__PURE__ */ jsxs(Fragment, { children: [children, " "] }) });
7453
7458
  };
7454
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,
7503
+ children
7504
+ });
7505
+ };
7506
+ Label.displayName = "Label_UI";
7507
+ //#endregion
7455
7508
  //#region src/components/ColorPicker/color-conversion-utils.ts
7456
7509
  const convertToRgbRaw = useMode(modeRgb);
7457
7510
  const convertToHsvRaw = useMode(modeHsv);
@@ -7478,38 +7531,6 @@ const convertToRgb = (color) => {
7478
7531
  return result;
7479
7532
  };
7480
7533
  //#endregion
7481
- //#region src/components/ColorPicker/transitionBetweenColors.ts
7482
- const transitionBetweenColors = (fromHsv, toHsv, onColorStep, onTransitionEnd) => {
7483
- if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
7484
- onColorStep(toHsv);
7485
- onTransitionEnd?.();
7486
- return;
7487
- }
7488
- const interpolator = interpolate([
7489
- easingSmootherstep(.33),
7490
- fromHsv,
7491
- toHsv
7492
- ], "hsv");
7493
- const steps = 5;
7494
- const intervalMs = 16;
7495
- let count = 0;
7496
- let lastTime = performance.now();
7497
- const step = (now) => {
7498
- if (count >= steps) {
7499
- onColorStep(toHsv);
7500
- onTransitionEnd?.();
7501
- return;
7502
- }
7503
- if (now - lastTime >= intervalMs) {
7504
- onColorStep(interpolator(count / steps));
7505
- count++;
7506
- lastTime = now;
7507
- }
7508
- requestAnimationFrame(step);
7509
- };
7510
- requestAnimationFrame(step);
7511
- };
7512
- //#endregion
7513
7534
  //#region src/components/ColorPicker/consts.ts
7514
7535
  const DEFAULT_MIN_CONTRAST = 4.5;
7515
7536
  const DEFAULT_COLOR_FOR_COMPARISON = "#ffffff";
@@ -7734,6 +7755,38 @@ const hasAccessibleDerivatives = ({ originalColor, colorForComparison, minContra
7734
7755
  return brighterOption !== null || darkerOption !== null;
7735
7756
  };
7736
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
7737
7790
  //#region src/components/ColorPicker/ColorPickerContext.tsx
7738
7791
  const ColorPickerContext = createContext(null);
7739
7792
  const ColorPickerProvider = ({ children, colorForComparison, minimumContrastRatio, onValueChange, onValueCommit, opacityForContrastCalculation, value: valueAsHex }) => {
@@ -7868,54 +7921,6 @@ const useColorPickerState = () => {
7868
7921
  return context;
7869
7922
  };
7870
7923
  //#endregion
7871
- //#region src/components/Label/Label.tsx
7872
- const requiredStyle = css`
7873
- &::after {
7874
- color: var(--wui-color-text-error);
7875
- display: inline;
7876
- padding-left: var(--wui-space-01);
7877
- content: '*';
7878
- }
7879
- `;
7880
- const disabledStyle = css`
7881
- color: var(--wui-color-text-disabled);
7882
- `;
7883
- const StyledLabel$2 = styled.label`
7884
- display: block;
7885
- width: 100%;
7886
- color: var(--wui-color-text);
7887
- font: var(--wui-typography-heading-6);
7888
-
7889
- /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
7890
- > input,
7891
- > textarea,
7892
- > select {
7893
- display: block;
7894
- }
7895
-
7896
- > label {
7897
- font-weight: normal;
7898
- }
7899
-
7900
- ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
7901
- ${({ $disabled }) => $disabled && disabledStyle}
7902
- ${({ $required }) => $required && requiredStyle}
7903
- `;
7904
- /**
7905
- * Labels are used to give a title to a form component (eg. Input, Select, etc.)
7906
- */
7907
- const Label = ({ children, disabled = false, htmlFor, required = false, screenReaderOnly = false, ...props }) => {
7908
- return /* @__PURE__ */ jsx(StyledLabel$2, {
7909
- ...props,
7910
- $disabled: disabled,
7911
- $required: required,
7912
- $screenReaderOnly: screenReaderOnly,
7913
- htmlFor,
7914
- children
7915
- });
7916
- };
7917
- Label.displayName = "Label_UI";
7918
- //#endregion
7919
7924
  //#region src/components/ColorPicker/ColorGrid.tsx
7920
7925
  const Container$9 = styled.div`
7921
7926
  display: grid;
@@ -7950,45 +7955,6 @@ const ColorGrid = ({ children, label }) => {
7950
7955
  };
7951
7956
  ColorGrid.displayName = "ColorGrid_UI";
7952
7957
  //#endregion
7953
- //#region src/components/ColorPicker/ColorSwatch.tsx
7954
- const ColorSwatchDiv = styled.div`
7955
- aspect-ratio: 1;
7956
- width: ${({ $diameterPx }) => `${$diameterPx}px`};
7957
- border-radius: var(--wui-border-radius-rounded);
7958
- box-shadow: inset 0 0 1px 0 var(--wui-color-border-secondary);
7959
- display: flex;
7960
- align-items: center;
7961
- justify-content: center;
7962
- position: relative;
7963
- overflow: hidden;
7964
- outline: ${({ $selected }) => {
7965
- if ($selected) return "2px solid var(--wui-color-focus-ring-info)";
7966
- return "none";
7967
- }};
7968
- outline-offset: 2px;
7969
- transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
7970
- `;
7971
- const DerivativeHalfCircle = styled.div`
7972
- position: absolute;
7973
- right: 0;
7974
- top: 0;
7975
- width: 50%;
7976
- height: 100%;
7977
- background-color: ${({ $color }) => $color};
7978
- border-radius: 0 var(--wui-border-radius-rounded) var(--wui-border-radius-rounded) 0;
7979
- `;
7980
- const ColorSwatch = ({ children, diameterPx = 24, isSelected = false, derivativeIsSelected = false, value }) => {
7981
- const { valueAsHex: colorPickerValueAsHex } = useColorPickerState();
7982
- return /* @__PURE__ */ jsxs(ColorSwatchDiv, {
7983
- $diameterPx: diameterPx,
7984
- $selected: isSelected || derivativeIsSelected,
7985
- "aria-label": `Color swatch: ${value}`,
7986
- role: "img",
7987
- style: { backgroundColor: value },
7988
- children: [derivativeIsSelected ? /* @__PURE__ */ jsx(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null, children]
7989
- });
7990
- };
7991
- //#endregion
7992
7958
  //#region src/components/Tooltip/Tooltip.tsx
7993
7959
  const hide = keyframes`
7994
7960
  from {
@@ -8147,6 +8113,45 @@ const Tooltip = ({ delay = 500, direction = "top", content, children, forceOpen,
8147
8113
  };
8148
8114
  Tooltip.displayName = "Tooltip_UI";
8149
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
8150
8155
  //#region src/components/ColorPicker/ColorGridOption.tsx
8151
8156
  const Container$8 = styled(Radio$1.Root)`
8152
8157
  border: none;
@@ -8390,20 +8395,6 @@ const ColorPickerSection = ({ children }) => {
8390
8395
  };
8391
8396
  ColorPickerSection.displayName = "ColorPickerSection_UI";
8392
8397
  //#endregion
8393
- //#region src/components/ColorPicker/ValueSwatch.tsx
8394
- /**
8395
- * Renders a circular color swatch filled with the current color from
8396
- * ColorPicker context. Accepts an optional `diameterPx` to control size.
8397
- */
8398
- const ValueSwatch = ({ diameterPx = 24 }) => {
8399
- const { valueAsHex } = useColorPickerState();
8400
- return /* @__PURE__ */ jsx(ColorSwatch, {
8401
- diameterPx,
8402
- value: valueAsHex
8403
- });
8404
- };
8405
- ValueSwatch.displayName = "ValueSwatch_UI";
8406
- //#endregion
8407
8398
  //#region src/components/ColorPicker/ValueNameOrHexCode.tsx
8408
8399
  /**
8409
8400
  * Displays the name of the current color (if it matches a known color name)
@@ -8418,6 +8409,20 @@ const ValueNameOrHexCode = (props) => {
8418
8409
  };
8419
8410
  ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
8420
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";
8425
+ //#endregion
8421
8426
  //#region src/components/ColorPicker/ColorPickerTrigger.tsx
8422
8427
  const StyledPopoverTrigger = styled(Popover$1.Trigger)`
8423
8428
  background-color: var(--wui-color-bg-surface);
@@ -8434,79 +8439,40 @@ const StyledPopoverTrigger = styled(Popover$1.Trigger)`
8434
8439
 
8435
8440
  &:focus {
8436
8441
  outline-width: 2px;
8437
- outline-color: var(--wui-color-focus-ring);
8438
- outline-offset: -2px;
8439
- }
8440
-
8441
- &[aria-invalid='true'] {
8442
- outline-color: var(--wui-color-invalid-indicator);
8443
- }
8444
-
8445
- &:disabled {
8446
- outline-color: var(--wui-color-border-disabled);
8447
- background-color: var(--wui-color-bg-surface-disabled);
8448
- }
8449
- `;
8450
- const DefaultTriggerContentContainer = styled.div`
8451
- align-items: center;
8452
- display: flex;
8453
- flex-direction: row;
8454
- gap: var(--wui-space-02);
8455
- padding-right: var(--wui-space-02);
8456
- `;
8457
- const DefaultTriggerContent = () => {
8458
- return /* @__PURE__ */ jsxs(DefaultTriggerContentContainer, { children: [/* @__PURE__ */ jsx(ValueSwatch, {}), /* @__PURE__ */ jsx(ValueNameOrHexCode, {})] });
8459
- };
8460
- /**
8461
- * The button that toggles the color picker popover open and closed. By default
8462
- * it renders a swatch and hex label for the current color; pass custom children
8463
- * to replace that content.
8464
- */
8465
- const ColorPickerTrigger = ({ children, ref, ...props }) => {
8466
- return /* @__PURE__ */ jsx(StyledPopoverTrigger, {
8467
- ref,
8468
- ...props,
8469
- children: children ?? /* @__PURE__ */ jsx(DefaultTriggerContent, {})
8470
- });
8471
- };
8472
- //#endregion
8473
- //#region src/components/ColorPicker/ContrastIndicator.tsx
8474
- const Container$3 = styled.div`
8475
- display: flex;
8476
- flex-direction: row;
8477
- justify-content: end;
8478
- align-items: center;
8479
- `;
8480
- const floorToTenth = (value) => {
8481
- return Math.floor(value * 10) / 10;
8482
- };
8483
- const ContrastIndicator = () => {
8484
- const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
8485
- const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
8486
- const label = /* @__PURE__ */ jsxs("div", { children: [
8487
- /* @__PURE__ */ jsx(Text, {
8488
- renderAs: "span",
8489
- variant: "body4",
8490
- children: "Contrast:"
8491
- }),
8492
- " ",
8493
- /* @__PURE__ */ jsxs(Text, {
8494
- renderAs: "span",
8495
- variant: "body4Mono",
8496
- children: [floorToTenth(currentContrastRatio).toFixed(1), ":1"]
8497
- })
8498
- ] });
8499
- return /* @__PURE__ */ jsx(Container$3, { children: isContrastSufficient ? /* @__PURE__ */ jsx(Badge, {
8500
- colorScheme: "success",
8501
- icon: /* @__PURE__ */ jsx(Icon, { type: "checkmark" }),
8502
- label,
8503
- variant: "outline"
8504
- }) : /* @__PURE__ */ jsx(Badge, {
8505
- colorScheme: "warning",
8506
- icon: /* @__PURE__ */ jsx(Icon, { type: "error" }),
8507
- label,
8508
- variant: "outline"
8509
- }) });
8442
+ outline-color: var(--wui-color-focus-ring);
8443
+ outline-offset: -2px;
8444
+ }
8445
+
8446
+ &[aria-invalid='true'] {
8447
+ outline-color: var(--wui-color-invalid-indicator);
8448
+ }
8449
+
8450
+ &:disabled {
8451
+ outline-color: var(--wui-color-border-disabled);
8452
+ background-color: var(--wui-color-bg-surface-disabled);
8453
+ }
8454
+ `;
8455
+ const DefaultTriggerContentContainer = styled.div`
8456
+ align-items: center;
8457
+ display: flex;
8458
+ flex-direction: row;
8459
+ gap: var(--wui-space-02);
8460
+ padding-right: var(--wui-space-02);
8461
+ `;
8462
+ const DefaultTriggerContent = () => {
8463
+ return /* @__PURE__ */ jsxs(DefaultTriggerContentContainer, { children: [/* @__PURE__ */ jsx(ValueSwatch, {}), /* @__PURE__ */ jsx(ValueNameOrHexCode, {})] });
8464
+ };
8465
+ /**
8466
+ * The button that toggles the color picker popover open and closed. By default
8467
+ * it renders a swatch and hex label for the current color; pass custom children
8468
+ * to replace that content.
8469
+ */
8470
+ const ColorPickerTrigger = ({ children, ref, ...props }) => {
8471
+ return /* @__PURE__ */ jsx(StyledPopoverTrigger, {
8472
+ ref,
8473
+ ...props,
8474
+ children: children ?? /* @__PURE__ */ jsx(DefaultTriggerContent, {})
8475
+ });
8510
8476
  };
8511
8477
  //#endregion
8512
8478
  //#region src/components/Switch/Switch.tsx
@@ -8641,6 +8607,45 @@ const ContrastEnforcerSwitch = () => {
8641
8607
  });
8642
8608
  };
8643
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
8644
8649
  //#region src/components/ColorPicker/ContrastPreview.tsx
8645
8650
  const ContrastPreview = () => {
8646
8651
  const { valueAsHex, colorForComparison } = useColorPickerState();
@@ -8886,9 +8891,12 @@ const Input = ({ fullWidth = true, fullHeight = false, monospace = false, type =
8886
8891
  });
8887
8892
  const handleFocus = (event) => {
8888
8893
  if (isNotNil(props.onFocus)) props.onFocus(event);
8889
- if (autoSelect && type !== "multiline" && ref.current instanceof HTMLInputElement) requestAnimationFrame(() => {
8890
- ref.current?.select();
8891
- });
8894
+ if (autoSelect && type !== "multiline" && ref.current instanceof HTMLInputElement) {
8895
+ const valueOnFocus = ref.current.value;
8896
+ requestAnimationFrame(() => {
8897
+ if (ref.current instanceof HTMLInputElement && ref.current.value === valueOnFocus) ref.current.select();
8898
+ });
8899
+ }
8892
8900
  };
8893
8901
  return /* @__PURE__ */ jsxs(StyledInputContainer, {
8894
8902
  $fullHeight: fullHeight,
@@ -9477,6 +9485,28 @@ const SaturationAndValuePicker = ({ dataTestId }) => {
9477
9485
  };
9478
9486
  SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
9479
9487
  //#endregion
9488
+ //#region src/private/helpers/getTypographicStyles/getTypographicStyles.ts
9489
+ const typographicVariantStyleMap = {
9490
+ ...variantStyleMap,
9491
+ ...variantStyleMap$1
9492
+ };
9493
+ const getTypographicStyles = (variant) => {
9494
+ return css`
9495
+ ${typographicVariantStyleMap[variant]}
9496
+ font-family: var(--font-family);
9497
+ font-size: var(--font-size);
9498
+ font-weight: var(--font-weight);
9499
+ line-height: var(--line-height);
9500
+ `;
9501
+ };
9502
+ const typographicVariantElementMap = {
9503
+ ...variantElementMap,
9504
+ ...variantElementMap$1
9505
+ };
9506
+ const getDefaultTypographicElement = (variant) => {
9507
+ return typographicVariantElementMap[variant] ?? "span";
9508
+ };
9509
+ //#endregion
9480
9510
  //#region src/components/Tag/Tag.tsx
9481
9511
  const TagLabel = styled.a`
9482
9512
  ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -9599,28 +9629,6 @@ const Tag = ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClic
9599
9629
  });
9600
9630
  };
9601
9631
  //#endregion
9602
- //#region src/private/helpers/getTypographicStyles/getTypographicStyles.ts
9603
- const typographicVariantStyleMap = {
9604
- ...variantStyleMap,
9605
- ...variantStyleMap$1
9606
- };
9607
- const getTypographicStyles = (variant) => {
9608
- return css`
9609
- ${typographicVariantStyleMap[variant]}
9610
- font-family: var(--font-family);
9611
- font-size: var(--font-size);
9612
- font-weight: var(--font-weight);
9613
- line-height: var(--line-height);
9614
- `;
9615
- };
9616
- const typographicVariantElementMap = {
9617
- ...variantElementMap,
9618
- ...variantElementMap$1
9619
- };
9620
- const getDefaultTypographicElement = (variant) => {
9621
- return typographicVariantElementMap[variant] ?? "span";
9622
- };
9623
- //#endregion
9624
9632
  //#region src/components/Combobox/Combobox.tsx
9625
9633
  const ComboboxWrapper = styled.div`
9626
9634
  ${inputCss};
@@ -12593,7 +12601,7 @@ const SECONDS_PER_HOUR = SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
12593
12601
  const TEN_HOURS = SECONDS_PER_HOUR * 10;
12594
12602
  const ONE_HUNDREDTH_OF_A_SECOND = .01;
12595
12603
  const MAX_TIME = TEN_HOURS - ONE_HUNDREDTH_OF_A_SECOND;
12596
- const NUMBER_STRING_SET = new Set([
12604
+ const NUMBER_STRING_SET = /* @__PURE__ */ new Set([
12597
12605
  "0",
12598
12606
  "1",
12599
12607
  "2",
@@ -12820,7 +12828,7 @@ const getSelectionRanges = ({ inputValue, maxUnit }) => {
12820
12828
  };
12821
12829
  //#endregion
12822
12830
  //#region src/components/InputDuration/durationUnits.ts
12823
- const DURATION_UNITS = new Set([
12831
+ const DURATION_UNITS = /* @__PURE__ */ new Set([
12824
12832
  "hours",
12825
12833
  "hundredths-of-seconds",
12826
12834
  "minutes",
@@ -13863,14 +13871,6 @@ const MenuItemButton = ({ children, appearance, command, icon, ref, ...props })
13863
13871
  });
13864
13872
  };
13865
13873
  //#endregion
13866
- //#region src/components/Menu/MenuItemLabel.tsx
13867
- const StyledMenuItemLabel = styled.span`
13868
- /* avoid no-empty-source rule */
13869
- `;
13870
- const MenuItemLabel = ({ children }) => {
13871
- return /* @__PURE__ */ jsx(StyledMenuItemLabel, { children });
13872
- };
13873
- //#endregion
13874
13874
  //#region src/components/Menu/MenuItemDescription.tsx
13875
13875
  const StyledMenuItemDescription = styled(Text)`
13876
13876
  /* avoid no-empty-source rule */
@@ -13883,6 +13883,14 @@ const MenuItemDescription = ({ children }) => {
13883
13883
  });
13884
13884
  };
13885
13885
  //#endregion
13886
+ //#region src/components/Menu/MenuItemLabel.tsx
13887
+ const StyledMenuItemLabel = styled.span`
13888
+ /* avoid no-empty-source rule */
13889
+ `;
13890
+ const MenuItemLabel = ({ children }) => {
13891
+ return /* @__PURE__ */ jsx(StyledMenuItemLabel, { children });
13892
+ };
13893
+ //#endregion
13886
13894
  //#region src/components/Menu/SubMenu.tsx
13887
13895
  const SubMenuPopup = styled(Menu$1.Popup)`
13888
13896
  ${menuContentCss}
@@ -14261,50 +14269,6 @@ const Meter = ({ segments, label, labelMeta, description, hideKey = false, max =
14261
14269
  };
14262
14270
  Meter.displayName = "Meter_UI";
14263
14271
  //#endregion
14264
- //#region src/components/Modal/ModalCloseButton.tsx
14265
- const ModalCloseButton = () => {
14266
- return /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
14267
- label: "Dismiss modal",
14268
- size: "sm",
14269
- style: { alignSelf: "start" },
14270
- variant: "ghost",
14271
- children: /* @__PURE__ */ jsx(Icon, { type: "close" })
14272
- }) });
14273
- };
14274
- //#endregion
14275
- //#region src/components/Modal/ModalHeader.tsx
14276
- const Header = styled.header`
14277
- display: flex;
14278
- order: 1;
14279
- padding: 0 var(--wui-space-05);
14280
- padding-bottom: 0;
14281
- gap: var(--wui-space-01);
14282
- justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
14283
-
14284
- /* Dialog.Title creates an h2 element which inherits some margin */
14285
- h2 {
14286
- margin: 0;
14287
- padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
14288
- }
14289
-
14290
- button {
14291
- position: absolute;
14292
- right: var(--wui-space-03);
14293
- top: var(--wui-space-03);
14294
- }
14295
- `;
14296
- const Title = styled(Dialog.Title)`
14297
- font: var(--wui-typography-heading-2);
14298
- overflow-wrap: anywhere;
14299
- `;
14300
- const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
14301
- return /* @__PURE__ */ jsxs(Header, {
14302
- $hideCloseButon: hideCloseButton,
14303
- $hideTitle: hideTitle,
14304
- children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title, { children: title }) }) : /* @__PURE__ */ jsx(Title, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
14305
- });
14306
- };
14307
- //#endregion
14308
14272
  //#region src/components/Modal/constants.ts
14309
14273
  const DEFAULT_MODAL_WIDTH = "532px";
14310
14274
  //#endregion
@@ -14439,6 +14403,50 @@ const ModalContent = ({ width, positionVariant, initialFocusRef, children, ref,
14439
14403
  });
14440
14404
  };
14441
14405
  //#endregion
14406
+ //#region src/components/Modal/ModalCloseButton.tsx
14407
+ const ModalCloseButton = () => {
14408
+ return /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
14409
+ label: "Dismiss modal",
14410
+ size: "sm",
14411
+ style: { alignSelf: "start" },
14412
+ variant: "ghost",
14413
+ children: /* @__PURE__ */ jsx(Icon, { type: "close" })
14414
+ }) });
14415
+ };
14416
+ //#endregion
14417
+ //#region src/components/Modal/ModalHeader.tsx
14418
+ const Header = styled.header`
14419
+ display: flex;
14420
+ order: 1;
14421
+ padding: 0 var(--wui-space-05);
14422
+ padding-bottom: 0;
14423
+ gap: var(--wui-space-01);
14424
+ justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
14425
+
14426
+ /* Dialog.Title creates an h2 element which inherits some margin */
14427
+ h2 {
14428
+ margin: 0;
14429
+ padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
14430
+ }
14431
+
14432
+ button {
14433
+ position: absolute;
14434
+ right: var(--wui-space-03);
14435
+ top: var(--wui-space-03);
14436
+ }
14437
+ `;
14438
+ const Title = styled(Dialog.Title)`
14439
+ font: var(--wui-typography-heading-2);
14440
+ overflow-wrap: anywhere;
14441
+ `;
14442
+ const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
14443
+ return /* @__PURE__ */ jsxs(Header, {
14444
+ $hideCloseButon: hideCloseButton,
14445
+ $hideTitle: hideTitle,
14446
+ children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title, { children: title }) }) : /* @__PURE__ */ jsx(Title, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
14447
+ });
14448
+ };
14449
+ //#endregion
14442
14450
  //#region src/components/Modal/ModalOverlay.tsx
14443
14451
  const backdropShow = keyframes`
14444
14452
  from {
@@ -14492,7 +14500,11 @@ const ModalFooter = styled.footer`
14492
14500
  * A Modal is a focused UI element that appears atop the main interface, requiring
14493
14501
  * user interaction or dismissal before returning to the underlying content.
14494
14502
  */
14495
- const Modal = ({ children, footer, hideCloseButton = false, hideTitle = false, initialFocusRef, isOpen, onRequestClose, positionVariant = "centered", title, width = DEFAULT_MODAL_WIDTH, ref, ...props }) => {
14503
+ const Modal = ({ children, footer, hideCloseButton = false, hideTitle = false, initialFocusRef, isOpen, onKeyDown, onRequestClose, positionVariant = "centered", title, width = DEFAULT_MODAL_WIDTH, ref, ...props }) => {
14504
+ const handleKeyDown = (event) => {
14505
+ onKeyDown?.(event);
14506
+ event.stopPropagation();
14507
+ };
14496
14508
  return /* @__PURE__ */ jsx(Dialog.Root, {
14497
14509
  onOpenChange: (open) => {
14498
14510
  if (!open && isNotNil(onRequestClose)) onRequestClose();
@@ -14501,6 +14513,7 @@ const Modal = ({ children, footer, hideCloseButton = false, hideTitle = false, i
14501
14513
  children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
14502
14514
  ref,
14503
14515
  initialFocusRef,
14516
+ onKeyDown: handleKeyDown,
14504
14517
  positionVariant,
14505
14518
  width,
14506
14519
  ...props,
@@ -14718,6 +14731,11 @@ const Radio = ({ checked, disabled = false, id, label, description, name, onChan
14718
14731
  });
14719
14732
  };
14720
14733
  //#endregion
14734
+ //#region src/components/RadioCard/RadioCardChildrenContainer.tsx
14735
+ const RadioCardChildrenContainer = styled.div`
14736
+ flex: 1 1 auto;
14737
+ `;
14738
+ //#endregion
14721
14739
  //#region src/components/RadioCard/RadioCardRoot.tsx
14722
14740
  const checkedStyles = css`
14723
14741
  --wui-radio-card-border-color: var(--wui-color-focus-ring);
@@ -14959,11 +14977,6 @@ const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true
14959
14977
  };
14960
14978
  RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
14961
14979
  //#endregion
14962
- //#region src/components/RadioCard/RadioCardChildrenContainer.tsx
14963
- const RadioCardChildrenContainer = styled.div`
14964
- flex: 1 1 auto;
14965
- `;
14966
- //#endregion
14967
14980
  //#region src/components/RadioCard/RadioCard.tsx
14968
14981
  const RadioCard = ({ icon, label, description, showIndicator, isGated, children, ref, ...rootProps }) => {
14969
14982
  return /* @__PURE__ */ jsx(RadioCardRoot, {
@@ -15097,6 +15110,15 @@ const ScrollArea = ({ children, onScroll, style, locked = false, ref: forwardedR
15097
15110
  });
15098
15111
  };
15099
15112
  //#endregion
15113
+ //#region src/components/SegmentedControl/useSegmentedControlValue.tsx
15114
+ const SegmentedControlValueContext = createContext(null);
15115
+ const SegmentedControlValueProvider = SegmentedControlValueContext;
15116
+ const useSegmentedControlValue = () => {
15117
+ const context = useContext(SegmentedControlValueContext);
15118
+ if (context === null) throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
15119
+ return context;
15120
+ };
15121
+ //#endregion
15100
15122
  //#region src/components/SegmentedControl/useSelectedItemStyle.tsx
15101
15123
  const SelectedItemStyleContext = createContext(null);
15102
15124
  const SelectedItemStyleProvider = ({ children }) => {
@@ -15120,15 +15142,6 @@ const useSelectedItemStyle = () => {
15120
15142
  return context;
15121
15143
  };
15122
15144
  //#endregion
15123
- //#region src/components/SegmentedControl/useSegmentedControlValue.tsx
15124
- const SegmentedControlValueContext = createContext(null);
15125
- const SegmentedControlValueProvider = SegmentedControlValueContext;
15126
- const useSegmentedControlValue = () => {
15127
- const context = useContext(SegmentedControlValueContext);
15128
- if (context === null) throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
15129
- return context;
15130
- };
15131
- //#endregion
15132
15145
  //#region src/components/SegmentedControl/SelectedItemIndicator.tsx
15133
15146
  const selectedItemIndicatorStyles = css`
15134
15147
  background-color: var(--wui-color-bg-fill-white);