@wistia/ui 1.4.1 → 1.4.2-beta.a77d4be6.9cbd2cc

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 +2061 -2507
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +162 -120
  4. package/dist/index.js.map +1 -1
  5. package/package.json +22 -22
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v1.4.1
3
+ * @license @wistia/ui v1.4.2-beta.a77d4be6.9cbd2cc
4
4
  *
5
5
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
6
6
  *
@@ -68,11 +68,8 @@ const clickRegionGlobalStyles = css`
68
68
  //#region src/css/designTokens/index.tsx
69
69
  const designTokens = css`
70
70
  ${"/* -------------------------------------------\n * Autogenerated by ⛋ Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */\n\n:root,\n[data-wui-theme='true'] {\n--wui-app-background: #fff;\n --wui-blue-1: #fdfdfe;\n --wui-blue-2: #f6f9ff;\n --wui-blue-3: #ecf2ff;\n --wui-blue-4: #ddeaff;\n --wui-blue-5: #cddfff;\n --wui-blue-6: #b8d1ff;\n --wui-blue-7: #a1beff;\n --wui-blue-8: #81a4fe;\n --wui-blue-9: #2949e5;\n --wui-blue-10: #1f36d3;\n --wui-blue-11: #3154dc;\n --wui-blue-12: #192b65;\n --wui-blue-alpha-1: #00008003;\n --wui-blue-alpha-2: #0055ff0a;\n --wui-blue-alpha-3: #0051ff12;\n --wui-blue-alpha-4: #0062ff21;\n --wui-blue-alpha-5: #005cff33;\n --wui-blue-alpha-6: #005aff47;\n --wui-blue-alpha-7: #004fff5e;\n --wui-blue-alpha-8: #0047fd7d;\n --wui-blue-alpha-9: #0026e0d6;\n --wui-blue-alpha-10: #001acde0;\n --wui-blue-alpha-11: #002bd4cf;\n --wui-blue-alpha-12: #001454e5;\n --wui-blue-contrast: #fff;\n --wui-blue-surface: #f4f8ffcc;\n --wui-border-radius-00: 0px;\n --wui-border-radius-01: 4px;\n --wui-border-radius-02: 8px;\n --wui-border-radius-03: 16px;\n --wui-border-radius-04: 20px;\n --wui-border-radius-05: 24px;\n --wui-border-radius-rounded: 1000px;\n --wui-color-accent-1: var(--wui-blue-1);\n --wui-color-accent-2: var(--wui-blue-2);\n --wui-color-accent-3: var(--wui-blue-3);\n --wui-color-accent-4: var(--wui-blue-4);\n --wui-color-accent-5: var(--wui-blue-5);\n --wui-color-accent-6: var(--wui-blue-6);\n --wui-color-accent-7: var(--wui-blue-7);\n --wui-color-accent-8: var(--wui-blue-8);\n --wui-color-accent-9: var(--wui-blue-9);\n --wui-color-accent-10: var(--wui-blue-10);\n --wui-color-accent-11: var(--wui-blue-11);\n --wui-color-accent-12: var(--wui-blue-12);\n --wui-color-accent-contrast: var(--wui-blue-contrast);\n --wui-color-backdrop: var(--wui-gray-alpha-9);\n --wui-color-base-1: var(--wui-gray-1);\n --wui-color-base-2: var(--wui-gray-2);\n --wui-color-base-3: var(--wui-gray-3);\n --wui-color-base-4: var(--wui-gray-4);\n --wui-color-base-5: var(--wui-gray-5);\n --wui-color-base-6: var(--wui-gray-6);\n --wui-color-base-7: var(--wui-gray-7);\n --wui-color-base-8: var(--wui-gray-8);\n --wui-color-base-9: var(--wui-gray-9);\n --wui-color-base-10: var(--wui-gray-10);\n --wui-color-base-11: var(--wui-gray-11);\n --wui-color-base-12: var(--wui-gray-12);\n --wui-color-base-contrast: var(--wui-gray-contrast);\n --wui-color-bg-app: #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"}
71
- :root,
72
- [data-wui-theme='true'] {
73
- ${"/*\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"}
74
- ${"/*\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"}
75
- }
71
+ ${"/*\n * Typography weight overlay\n *\n * Reintroduces the var-with-fallback override hooks for heading weights. These\n * vars are part of the @wistia/ui public surface (see CustomizableThemeWrapper)\n * and consumers override them at any cascade level. DTCG aliases compile to a\n * single resolved value, so the fallback pattern can't live in the generated\n * tokens.css.\n *\n * Order matters: this file MUST follow the generated tokens.css so its\n * declarations win the cascade, and MUST precede typographyLegacyAliases.css so\n * the override hook propagates through any legacy `*-weight` alias as well.\n */\n:root,\n[data-wui-theme='true'] {\n --wui-typography-heading-hero-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n );\n --wui-typography-heading-1-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n );\n --wui-typography-heading-2-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-black)\n );\n --wui-typography-heading-3-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n );\n --wui-typography-heading-4-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n );\n --wui-typography-heading-5-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n );\n --wui-typography-heading-6-font-weight: var(\n --wui-typography-weight-heading,\n var(--wui-typography-weight-brand-bold)\n );\n}\n"}
72
+ ${"/*\n * Legacy typography sub-property aliases\n *\n * Terrazzo's plugin-css emits typography composite sub-properties using DTCG\n * names verbatim (kebab-cased):\n * --wui-typography-<style>-font-family\n * --wui-typography-<style>-font-size\n * --wui-typography-<style>-font-weight\n *\n * Prior versions of @wistia/ui exposed shortened legacy names:\n * --wui-typography-<style>-family\n * --wui-typography-<style>-size\n * --wui-typography-<style>-weight\n *\n * These aliases preserve that surface so downstream apps (notably wistia/wistia)\n * keep working unchanged after the Terrazzo migration. Once all known consumers\n * have migrated to the DTCG names, delete this file and remove the import from\n * designTokens/index.tsx.\n *\n * Note: `line-height` and `paragraph-spacing` sub-properties are unchanged\n * between DTCG and the prior surface, so no aliases are required for those.\n *\n * --------------------------------------------------------------------------\n * Migrating consumers in wistia/wistia (run from the VMA repo root):\n *\n * # 1. List every legacy reference site:\n * grep -rnE --include='*.ts' --include='*.tsx' --include='*.css' \\\n * '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n * frontend\n *\n * # 2. Apply the rename in-place (BSD sed on macOS):\n * grep -rlE --include='*.ts' --include='*.tsx' --include='*.css' \\\n * '--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9])-(family|size|weight)' \\\n * frontend \\\n * | xargs sed -i '' -E \\\n * 's/(--wui-typography-(heading-hero|heading-[0-9]|body-[0-9]|label-[0-9]))-(family|size|weight)/\\1-font-\\3/g'\n *\n * # 3. (GNU sed / Linux variant — drop the empty '' after -i):\n * # ... | xargs sed -i -E '...'\n *\n * Special case: frontend/authentication/css/redesign/wistia-ui/design-tokens/\n * typography.css *defines* the legacy names itself (not consumed from\n * @wistia/ui). It will keep working post-rename, but should be migrated for\n * consistency.\n * --------------------------------------------------------------------------\n */\n:root,\n[data-wui-theme='true'] {\n --wui-typography-heading-hero-family: var(--wui-typography-heading-hero-font-family);\n --wui-typography-heading-hero-size: var(--wui-typography-heading-hero-font-size);\n --wui-typography-heading-hero-weight: var(--wui-typography-heading-hero-font-weight);\n --wui-typography-heading-1-family: var(--wui-typography-heading-1-font-family);\n --wui-typography-heading-1-size: var(--wui-typography-heading-1-font-size);\n --wui-typography-heading-1-weight: var(--wui-typography-heading-1-font-weight);\n --wui-typography-heading-2-family: var(--wui-typography-heading-2-font-family);\n --wui-typography-heading-2-size: var(--wui-typography-heading-2-font-size);\n --wui-typography-heading-2-weight: var(--wui-typography-heading-2-font-weight);\n --wui-typography-heading-3-family: var(--wui-typography-heading-3-font-family);\n --wui-typography-heading-3-size: var(--wui-typography-heading-3-font-size);\n --wui-typography-heading-3-weight: var(--wui-typography-heading-3-font-weight);\n --wui-typography-heading-4-family: var(--wui-typography-heading-4-font-family);\n --wui-typography-heading-4-size: var(--wui-typography-heading-4-font-size);\n --wui-typography-heading-4-weight: var(--wui-typography-heading-4-font-weight);\n --wui-typography-heading-5-family: var(--wui-typography-heading-5-font-family);\n --wui-typography-heading-5-size: var(--wui-typography-heading-5-font-size);\n --wui-typography-heading-5-weight: var(--wui-typography-heading-5-font-weight);\n --wui-typography-heading-6-family: var(--wui-typography-heading-6-font-family);\n --wui-typography-heading-6-size: var(--wui-typography-heading-6-font-size);\n --wui-typography-heading-6-weight: var(--wui-typography-heading-6-font-weight);\n --wui-typography-body-1-family: var(--wui-typography-body-1-font-family);\n --wui-typography-body-1-size: var(--wui-typography-body-1-font-size);\n --wui-typography-body-1-weight: var(--wui-typography-body-1-font-weight);\n --wui-typography-body-2-family: var(--wui-typography-body-2-font-family);\n --wui-typography-body-2-size: var(--wui-typography-body-2-font-size);\n --wui-typography-body-2-weight: var(--wui-typography-body-2-font-weight);\n --wui-typography-body-3-family: var(--wui-typography-body-3-font-family);\n --wui-typography-body-3-size: var(--wui-typography-body-3-font-size);\n --wui-typography-body-3-weight: var(--wui-typography-body-3-font-weight);\n --wui-typography-body-4-family: var(--wui-typography-body-4-font-family);\n --wui-typography-body-4-size: var(--wui-typography-body-4-font-size);\n --wui-typography-body-4-weight: var(--wui-typography-body-4-font-weight);\n --wui-typography-label-1-family: var(--wui-typography-label-1-font-family);\n --wui-typography-label-1-size: var(--wui-typography-label-1-font-size);\n --wui-typography-label-1-weight: var(--wui-typography-label-1-font-weight);\n --wui-typography-label-2-family: var(--wui-typography-label-2-font-family);\n --wui-typography-label-2-size: var(--wui-typography-label-2-font-size);\n --wui-typography-label-2-weight: var(--wui-typography-label-2-font-weight);\n --wui-typography-label-3-family: var(--wui-typography-label-3-font-family);\n --wui-typography-label-3-size: var(--wui-typography-label-3-font-size);\n --wui-typography-label-3-weight: var(--wui-typography-label-3-font-weight);\n --wui-typography-label-4-family: var(--wui-typography-label-4-font-family);\n --wui-typography-label-4-size: var(--wui-typography-label-4-font-size);\n --wui-typography-label-4-weight: var(--wui-typography-label-4-font-weight);\n}\n"}
76
73
  `;
77
74
  //#endregion
78
75
  //#region src/css/GlobalStyle.tsx
@@ -106,6 +103,10 @@ const GlobalStyle = createGlobalStyle`
106
103
  * 1. Without this fonts are too heavy weight in OS X Firefox
107
104
  * 2. Design decision
108
105
  3. See: https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
106
+ 4. Avoid typographic orphans and awkward line breaks. 'text-wrap' is inherited,
107
+ so this becomes the default for all text. Guarded by '@supports' because
108
+ 'pretty' is not Baseline yet; browsers without it keep the initial
109
+ 'text-wrap: wrap' behavior, so no polyfill is needed.
109
110
  */
110
111
  body {
111
112
  -moz-osx-font-smoothing: grayscale; /* 1 */
@@ -113,6 +114,10 @@ const GlobalStyle = createGlobalStyle`
113
114
  line-height: 1.5; /* 2 */
114
115
  min-height: 100vh; /* 3 */
115
116
  min-height: -webkit-fill-available; /* 3 */
117
+
118
+ @supports (text-wrap: pretty) {
119
+ text-wrap: pretty; /* 4 */
120
+ }
116
121
  }
117
122
 
118
123
  /* Remove default margin in favour of better control in authored CSS */
@@ -5503,12 +5508,15 @@ const Link = ({ beforeAction, children, type, disabled = false, colorScheme = "i
5503
5508
  as: "a",
5504
5509
  href: to
5505
5510
  };
5506
- return /* @__PURE__ */ jsxs(StyledLink, {
5511
+ const combinedProps = {
5507
5512
  ref,
5508
5513
  ...props,
5509
5514
  ...commonProps,
5510
5515
  ...externalLinkProps,
5511
- ...routerSpecificProps,
5516
+ ...routerSpecificProps
5517
+ };
5518
+ return /* @__PURE__ */ jsxs(StyledLink, {
5519
+ ...combinedProps,
5512
5520
  role: role ?? (disabled ? "link" : void 0),
5513
5521
  children: [
5514
5522
  leftIcon ?? null,
@@ -6115,8 +6123,9 @@ const Avatar = ({ imageUrl, heightAndWidth, name, size = "md", onImageLoad, ...p
6115
6123
  });
6116
6124
  };
6117
6125
  const avatarSize = heightAndWidth ?? avatarSizeMap[size];
6126
+ const avatarColor = useMemo(() => chooseColorScheme(name), [name]);
6118
6127
  return /* @__PURE__ */ jsxs(AvatarWrapper, {
6119
- $colorScheme: useMemo(() => chooseColorScheme(name), [name]),
6128
+ $colorScheme: avatarColor,
6120
6129
  $heightAndWidth: avatarSize,
6121
6130
  ...props,
6122
6131
  children: [/* @__PURE__ */ jsx(Initial, { initial: formatNameForDisplay(name) }), isNotNil(imageUrl) && imageLoadState !== "error" && /* @__PURE__ */ jsx(Image, {
@@ -7059,13 +7068,16 @@ const StyledStack = styled.div`
7059
7068
  const StackComponent = ({ ref, renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", padding, ...props }) => {
7060
7069
  const responsiveGap = useResponsiveProp(gap);
7061
7070
  const responsiveDirection = useResponsiveProp(direction);
7071
+ const responsiveAlignItems = useResponsiveProp(alignItems);
7072
+ const responsivePaddingX = useResponsiveProp(padding?.x);
7073
+ const responsivePaddingY = useResponsiveProp(padding?.y);
7062
7074
  return /* @__PURE__ */ jsx(StyledStack, {
7063
7075
  ref,
7064
- $alignItems: useResponsiveProp(alignItems),
7076
+ $alignItems: responsiveAlignItems,
7065
7077
  $direction: responsiveDirection,
7066
7078
  $gap: responsiveGap,
7067
- $paddingX: useResponsiveProp(padding?.x),
7068
- $paddingY: useResponsiveProp(padding?.y),
7079
+ $paddingX: responsivePaddingX,
7080
+ $paddingY: responsivePaddingY,
7069
7081
  as: renderAs ?? DEFAULT_ELEMENT$1,
7070
7082
  ...props
7071
7083
  });
@@ -7140,22 +7152,23 @@ const Form = ({ children, action, values = DEFAULT_VALUES, labelPosition = "bloc
7140
7152
  if (props.onReset) props.onReset(event);
7141
7153
  if (action) action(null);
7142
7154
  };
7143
- return /* @__PURE__ */ jsx(FormContext, {
7144
- value: useMemo(() => {
7145
- return {
7146
- values,
7147
- errors,
7148
- hasSubmitted,
7149
- formId: id,
7150
- labelPosition
7151
- };
7152
- }, [
7153
- labelPosition,
7155
+ const context = useMemo(() => {
7156
+ return {
7154
7157
  values,
7155
7158
  errors,
7156
- id,
7157
- hasSubmitted
7158
- ]),
7159
+ hasSubmitted,
7160
+ formId: id,
7161
+ labelPosition
7162
+ };
7163
+ }, [
7164
+ labelPosition,
7165
+ values,
7166
+ errors,
7167
+ id,
7168
+ hasSubmitted
7169
+ ]);
7170
+ return /* @__PURE__ */ jsx(FormContext, {
7171
+ value: context,
7159
7172
  children: /* @__PURE__ */ jsx(Stack, {
7160
7173
  ...props,
7161
7174
  ref,
@@ -7225,18 +7238,19 @@ const useCheckboxGroup = () => {
7225
7238
  const CheckboxGroup = ({ children, name, onChange, value, ...props }) => {
7226
7239
  const formState = useContext(FormContext);
7227
7240
  const derivedValue = isArray(formState.values[name]) ? formState.values[name] : value;
7241
+ const context = useMemo(() => {
7242
+ return {
7243
+ name: `${name}[]`,
7244
+ onChange,
7245
+ value: derivedValue
7246
+ };
7247
+ }, [
7248
+ name,
7249
+ derivedValue,
7250
+ onChange
7251
+ ]);
7228
7252
  return /* @__PURE__ */ jsx(CheckboxGroupContext, {
7229
- value: useMemo(() => {
7230
- return {
7231
- name: `${name}[]`,
7232
- onChange,
7233
- value: derivedValue
7234
- };
7235
- }, [
7236
- name,
7237
- derivedValue,
7238
- onChange
7239
- ]),
7253
+ value: context,
7240
7254
  children: /* @__PURE__ */ jsx(FormGroup, {
7241
7255
  ...props,
7242
7256
  children
@@ -7659,7 +7673,8 @@ const getAccessibleColorByValueChannelChange = ({ originalColor, colorForCompari
7659
7673
  let searchHigh = highValue;
7660
7674
  let bestSoFar = extremeVariant;
7661
7675
  for (let i = 0; i < maxIterations; i++) {
7662
- const midValue = snapValueToEdges((searchLow + searchHigh) / 2);
7676
+ const rawMidValue = (searchLow + searchHigh) / 2;
7677
+ const midValue = snapValueToEdges(rawMidValue);
7663
7678
  const candidateHsv = {
7664
7679
  h: originalHsv.h ?? 0,
7665
7680
  s: originalHsv.s,
@@ -7765,26 +7780,29 @@ const getAccessibleColorInDirection = ({ originalColor, colorForComparison, minC
7765
7780
  * brighter and darker variants and choosing the one with the smallest change in value.
7766
7781
  */
7767
7782
  const getAccessibleColor = ({ originalColor, colorForComparison, minContrast, maxIterations = 50, opacityForContrastCalculation }) => {
7783
+ const originalColorAsHsv = convertToHsv(originalColor);
7768
7784
  if (calculateContrast({
7769
- backgroundColor: formatHex(convertToHsv(originalColor)),
7785
+ backgroundColor: formatHex(originalColorAsHsv),
7770
7786
  foregroundColor: colorForComparison,
7771
7787
  backgroundOpacity: opacityForContrastCalculation
7772
7788
  }) >= minContrast) return convertToHsv(originalColor);
7773
- const result = chooseClosestDerivativeToOriginal(getAccessibleColorInDirection({
7789
+ const brighterOption = getAccessibleColorInDirection({
7774
7790
  originalColor,
7775
7791
  colorForComparison,
7776
7792
  minContrast,
7777
7793
  maxIterations,
7778
7794
  direction: "brighter",
7779
7795
  opacityForContrastCalculation
7780
- }), getAccessibleColorInDirection({
7796
+ });
7797
+ const darkerOption = getAccessibleColorInDirection({
7781
7798
  originalColor,
7782
7799
  colorForComparison,
7783
7800
  minContrast,
7784
7801
  maxIterations,
7785
7802
  direction: "darker",
7786
7803
  opacityForContrastCalculation
7787
- }), originalColor);
7804
+ });
7805
+ const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalColor);
7788
7806
  if (result == null) throw new Error(`Unable to get accessible derivative for ${formatHex(originalColor)} at minimum contrast ratio ${minContrast}`);
7789
7807
  return result;
7790
7808
  };
@@ -7793,8 +7811,9 @@ const getAccessibleColor = ({ originalColor, colorForComparison, minContrast, ma
7793
7811
  * Returns true if at least one accessible color can be found by going brighter or darker.
7794
7812
  */
7795
7813
  const hasAccessibleDerivatives = ({ originalColor, colorForComparison, minContrast, opacityForContrastCalculation }) => {
7814
+ const originalColorAsHsv = convertToHsv(originalColor);
7796
7815
  if (calculateContrast({
7797
- backgroundColor: formatHex(convertToHsv(originalColor)),
7816
+ backgroundColor: formatHex(originalColorAsHsv),
7798
7817
  foregroundColor: colorForComparison,
7799
7818
  backgroundOpacity: opacityForContrastCalculation
7800
7819
  }) >= minContrast) return true;
@@ -7838,7 +7857,8 @@ const transitionBetweenColors = (fromHsv, toHsv, onColorStep, onTransitionEnd) =
7838
7857
  return;
7839
7858
  }
7840
7859
  if (now - lastTime >= intervalMs) {
7841
- onColorStep(interpolator(count / steps));
7860
+ const animationProgress = count / steps;
7861
+ onColorStep(interpolator(animationProgress));
7842
7862
  count++;
7843
7863
  lastTime = now;
7844
7864
  }
@@ -7936,42 +7956,43 @@ const ColorPickerProvider = ({ children, colorForComparison, minimumContrastRati
7936
7956
  valueAsHsvConvertedToHex,
7937
7957
  whatValueAsHexShouldBe
7938
7958
  ]);
7959
+ const contextValue = useMemo(() => ({
7960
+ colorForComparison,
7961
+ commitValue,
7962
+ currentContrastRatio,
7963
+ getAccessibleDerivativeColor,
7964
+ hasAccessibleDerivatives: hasAccessibleDerivativesValue,
7965
+ isDragging,
7966
+ isTransitioning,
7967
+ minimumContrastRatio,
7968
+ nonDerivedValueAsHex: formatHex(nonDerivedValueAsHsv),
7969
+ nonDerivedValueAsHsv,
7970
+ onChangeNonDerivedValueAsHsv,
7971
+ opacityForContrastCalculation,
7972
+ setIsDragging,
7973
+ setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
7974
+ shouldEnforceMinContrast,
7975
+ valueAsHex,
7976
+ valueAsHsv
7977
+ }), [
7978
+ colorForComparison,
7979
+ commitValue,
7980
+ currentContrastRatio,
7981
+ getAccessibleDerivativeColor,
7982
+ hasAccessibleDerivativesValue,
7983
+ isDragging,
7984
+ isTransitioning,
7985
+ minimumContrastRatio,
7986
+ nonDerivedValueAsHsv,
7987
+ onChangeNonDerivedValueAsHsv,
7988
+ opacityForContrastCalculation,
7989
+ setShouldEnforceMinContrastWrapped,
7990
+ shouldEnforceMinContrast,
7991
+ valueAsHex,
7992
+ valueAsHsv
7993
+ ]);
7939
7994
  return /* @__PURE__ */ jsx(ColorPickerContext, {
7940
- value: useMemo(() => ({
7941
- colorForComparison,
7942
- commitValue,
7943
- currentContrastRatio,
7944
- getAccessibleDerivativeColor,
7945
- hasAccessibleDerivatives: hasAccessibleDerivativesValue,
7946
- isDragging,
7947
- isTransitioning,
7948
- minimumContrastRatio,
7949
- nonDerivedValueAsHex: formatHex(nonDerivedValueAsHsv),
7950
- nonDerivedValueAsHsv,
7951
- onChangeNonDerivedValueAsHsv,
7952
- opacityForContrastCalculation,
7953
- setIsDragging,
7954
- setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
7955
- shouldEnforceMinContrast,
7956
- valueAsHex,
7957
- valueAsHsv
7958
- }), [
7959
- colorForComparison,
7960
- commitValue,
7961
- currentContrastRatio,
7962
- getAccessibleDerivativeColor,
7963
- hasAccessibleDerivativesValue,
7964
- isDragging,
7965
- isTransitioning,
7966
- minimumContrastRatio,
7967
- nonDerivedValueAsHsv,
7968
- onChangeNonDerivedValueAsHsv,
7969
- opacityForContrastCalculation,
7970
- setShouldEnforceMinContrastWrapped,
7971
- shouldEnforceMinContrast,
7972
- valueAsHex,
7973
- valueAsHsv
7974
- ]),
7995
+ value: contextValue,
7975
7996
  children
7976
7997
  });
7977
7998
  };
@@ -8003,10 +8024,14 @@ const ItemsContainer$1 = styled(RadioGroup$1)`
8003
8024
  * as children and pass an optional `label` for a heading.
8004
8025
  */
8005
8026
  const ColorGrid = ({ children, label }) => {
8006
- const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
8027
+ const { valueAsHex, commitValue, onChangeNonDerivedValueAsHsv } = useColorPickerState();
8007
8028
  const onValueChange = useCallback((value) => {
8008
- if (typeof value === "string") onChangeNonDerivedValueAsHsv(convertToHsv(value));
8009
- }, [onChangeNonDerivedValueAsHsv]);
8029
+ if (typeof value === "string") {
8030
+ const hsv = convertToHsv(value);
8031
+ onChangeNonDerivedValueAsHsv(hsv);
8032
+ commitValue(value);
8033
+ }
8034
+ }, [commitValue, onChangeNonDerivedValueAsHsv]);
8010
8035
  return /* @__PURE__ */ jsxs(Container$9, { children: [label != null && /* @__PURE__ */ jsx(LabelContainer$1, { children: /* @__PURE__ */ jsx(Label, { children: label }) }), /* @__PURE__ */ jsx(ItemsContainer$1, {
8011
8036
  onValueChange,
8012
8037
  value: valueAsHex,
@@ -8264,13 +8289,16 @@ const Container$7 = styled(ToggleGroup)`
8264
8289
  * `ColorListOption` for individual items.
8265
8290
  */
8266
8291
  const ColorList = ({ children }) => {
8267
- const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
8292
+ const { valueAsHex, commitValue, onChangeNonDerivedValueAsHsv } = useColorPickerState();
8293
+ const onValueChange = useCallback((newValue) => {
8294
+ const value = newValue[0];
8295
+ if (value === void 0 || value === "") return;
8296
+ const hsv = convertToHsv(value);
8297
+ onChangeNonDerivedValueAsHsv(hsv);
8298
+ commitValue(value);
8299
+ }, [commitValue, onChangeNonDerivedValueAsHsv]);
8268
8300
  return /* @__PURE__ */ jsx(Container$7, {
8269
- onValueChange: useCallback((newValue) => {
8270
- const value = newValue[0];
8271
- if (value === void 0 || value === "") return;
8272
- onChangeNonDerivedValueAsHsv(convertToHsv(value));
8273
- }, [onChangeNonDerivedValueAsHsv]),
8301
+ onValueChange,
8274
8302
  value: [valueAsHex],
8275
8303
  children
8276
8304
  });
@@ -9009,7 +9037,8 @@ const HexColorInput = ({ autoFocus = true }) => {
9009
9037
  setTextInputValue(newValue);
9010
9038
  if (!Boolean(parseHex(newValue))) return;
9011
9039
  if (newValue.length < SIX_DIGIT_HEX_CODE_LENGTH) return;
9012
- onChangeNonDerivedValueAsHsv(convertToHsv(newValue));
9040
+ const newValueAsHsv = convertToHsv(newValue);
9041
+ onChangeNonDerivedValueAsHsv(newValueAsHsv);
9013
9042
  commitValue(newValue);
9014
9043
  }, [onChangeNonDerivedValueAsHsv, commitValue]);
9015
9044
  const onCopy = useCallback((event) => {
@@ -9038,10 +9067,11 @@ const HexColorInput = ({ autoFocus = true }) => {
9038
9067
  const currentHsv = convertToHsv(valueAsHex);
9039
9068
  const saturationNudge = .02;
9040
9069
  const newSaturation = Math.max(0, Math.min(1, key === "ArrowUp" ? currentHsv.s + saturationNudge : currentHsv.s - saturationNudge));
9041
- onChangeNonDerivedValueAsHsv({
9070
+ const newHsv = {
9042
9071
  ...nonDerivedValueAsHsv,
9043
9072
  s: newSaturation
9044
- });
9073
+ };
9074
+ onChangeNonDerivedValueAsHsv(newHsv);
9045
9075
  return;
9046
9076
  }
9047
9077
  if (key.length > 1) return;
@@ -9057,11 +9087,13 @@ const HexColorInput = ({ autoFocus = true }) => {
9057
9087
  ]);
9058
9088
  const onPaste = useCallback((event) => {
9059
9089
  event.preventDefault();
9060
- const normalizedValue = normalizeHexInput(event.clipboardData.getData("text"));
9090
+ const pastedText = event.clipboardData.getData("text");
9091
+ const normalizedValue = normalizeHexInput(pastedText);
9061
9092
  const isValidHexValue = Boolean(parseHex(normalizedValue));
9062
9093
  setTextInputValue(normalizedValue);
9063
9094
  if (!isValidHexValue) return;
9064
- onChangeNonDerivedValueAsHsv(convertToHsv(normalizedValue));
9095
+ const newValueAsHsv = convertToHsv(normalizedValue);
9096
+ onChangeNonDerivedValueAsHsv(newValueAsHsv);
9065
9097
  commitValue(normalizedValue);
9066
9098
  }, [commitValue, onChangeNonDerivedValueAsHsv]);
9067
9099
  const selectAllButTheHash = useCallback(() => {
@@ -11550,8 +11582,9 @@ const DividerComponent = styled.div`
11550
11582
  */
11551
11583
  const Divider = ({ orientation = "horizontal", inset = "space-00", ...props }) => {
11552
11584
  const responsiveOrientation = useResponsiveProp(orientation);
11585
+ const responsiveInset = useResponsiveProp(inset);
11553
11586
  return /* @__PURE__ */ jsx(DividerComponent, {
11554
- $inset: useResponsiveProp(inset),
11587
+ $inset: responsiveInset,
11555
11588
  $orientation: responsiveOrientation,
11556
11589
  "aria-orientation": responsiveOrientation,
11557
11590
  role: "separator",
@@ -11820,6 +11853,7 @@ const StyledEditableTextDisplay = styled.div`
11820
11853
  }
11821
11854
  }
11822
11855
  `;
11856
+ const StyledHiddenTriggerButton = styled.button({ ...visuallyHiddenStyle });
11823
11857
  const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) => {
11824
11858
  const context = useContext(EditableTextContext);
11825
11859
  if (!context) throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
@@ -11842,10 +11876,9 @@ const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) =>
11842
11876
  as: elementType,
11843
11877
  "data-wui-editable-text-display": isPlaceholderVisible ? "placeholder" : "value",
11844
11878
  ...props,
11845
- children: [displayText, /* @__PURE__ */ jsx("button", {
11879
+ children: [displayText, /* @__PURE__ */ jsx(StyledHiddenTriggerButton, {
11846
11880
  ref: triggerButtonRef,
11847
11881
  onClick: handleTriggerClick,
11848
- style: { ...visuallyHiddenStyle },
11849
11882
  type: "button",
11850
11883
  children: "Edit text"
11851
11884
  })]
@@ -12257,7 +12290,8 @@ const useFormState = (action, initialData = {}) => {
12257
12290
  const nextData = serializeFormData(nextFormData);
12258
12291
  setIsPending(true);
12259
12292
  try {
12260
- setData(await action(data, nextData));
12293
+ const result = await action(data, nextData);
12294
+ setData(result);
12261
12295
  } catch (err) {
12262
12296
  setError(err instanceof Error ? err : new Error(String(err)));
12263
12297
  } finally {
@@ -12492,18 +12526,19 @@ const useRadioGroup = () => {
12492
12526
  const RadioGroup = ({ children, name, onChange, value, ...props }) => {
12493
12527
  const formState = useContext(FormContext);
12494
12528
  const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
12495
- return /* @__PURE__ */ jsx(RadioGroupContext, {
12496
- value: useMemo(() => {
12497
- return {
12498
- name,
12499
- onChange,
12500
- value: derivedValue
12501
- };
12502
- }, [
12529
+ const context = useMemo(() => {
12530
+ return {
12503
12531
  name,
12504
- derivedValue,
12505
- onChange
12506
- ]),
12532
+ onChange,
12533
+ value: derivedValue
12534
+ };
12535
+ }, [
12536
+ name,
12537
+ derivedValue,
12538
+ onChange
12539
+ ]);
12540
+ return /* @__PURE__ */ jsx(RadioGroupContext, {
12541
+ value: context,
12507
12542
  children: /* @__PURE__ */ jsx(FormGroup, {
12508
12543
  ...props,
12509
12544
  role: "radiogroup",
@@ -12560,12 +12595,14 @@ const GridComponent = ({ ref, children, columns = "auto", minChildWidth = "auto"
12560
12595
  column: responsiveGap,
12561
12596
  row: responsiveGap
12562
12597
  };
12598
+ const responsiveColumns = useResponsiveProp(columns);
12599
+ const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
12563
12600
  return /* @__PURE__ */ jsx(StyledGrid, {
12564
12601
  ref,
12565
12602
  $columnGap: column,
12566
12603
  $expandItems: expandItems,
12567
- $maxColumns: useResponsiveProp(columns),
12568
- $minChildWidth: useResponsiveProp(minChildWidth),
12604
+ $maxColumns: responsiveColumns,
12605
+ $minChildWidth: responsiveMinChildWidth,
12569
12606
  $rowGap: row,
12570
12607
  as: renderAs ?? DEFAULT_ELEMENT,
12571
12608
  ...props,
@@ -13193,10 +13230,11 @@ const useInputDuration = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeV
13193
13230
  if (anyKeyIsDownRef.current) return;
13194
13231
  const { selectionStart, selectionEnd } = event.currentTarget;
13195
13232
  if (selectionStart === null || selectionEnd === null) return;
13196
- selectUnit(getUnitForSelectionIndices({
13233
+ const unitToSelect = getUnitForSelectionIndices({
13197
13234
  selectionStart,
13198
13235
  selectionEnd
13199
- }));
13236
+ });
13237
+ selectUnit(unitToSelect);
13200
13238
  }, [getUnitForSelectionIndices, selectUnit]);
13201
13239
  const onFocus = useCallback(() => {
13202
13240
  const selectFirstUnitIfAllTextIsSelected = () => {
@@ -13697,14 +13735,15 @@ const renderListComponent = (listItems, variant, { ...otherProps }) => {
13697
13735
  };
13698
13736
  const renderListFromArray = (listItems, variant, otherProps) => {
13699
13737
  let itemCount = 0;
13700
- return renderListComponent(listItems.map((listItem, i) => {
13738
+ const items = listItems.map((listItem, i) => {
13701
13739
  const item = listItem;
13702
13740
  const nextItem = listItems[i + 1];
13703
13741
  const key = `item-${itemCount += 1}`;
13704
13742
  if (Array.isArray(nextItem)) return /* @__PURE__ */ jsxs(ListItem, { children: [item, renderListFromArray(nextItem, variant, otherProps)] }, key);
13705
13743
  if (Array.isArray(item)) return null;
13706
13744
  return /* @__PURE__ */ jsx(ListItem, { children: item }, key);
13707
- }), variant, otherProps);
13745
+ });
13746
+ return renderListComponent(items, variant, otherProps);
13708
13747
  };
13709
13748
  /**
13710
13749
  * A `List` groups related items in bulleted, ordered, or separator-based layouts, composed with `ListItem` children or a flat/nested `items` array.
@@ -13873,8 +13912,9 @@ const StyledMarkdownWrapper = styled.div`
13873
13912
  * This is a simple wrapper around `react-markdown` that applies some basic styles.
13874
13913
  */
13875
13914
  const Markdown = ({ children, textSize = "body2", ...otherProps }) => {
13915
+ const responsiveTextSize = useResponsiveProp(textSize);
13876
13916
  return /* @__PURE__ */ jsx(StyledMarkdownWrapper, {
13877
- $textSize: useResponsiveProp(textSize),
13917
+ $textSize: responsiveTextSize,
13878
13918
  ...otherProps,
13879
13919
  children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
13880
13920
  });
@@ -15263,11 +15303,12 @@ const SelectedItemStyleProvider = ({ children }) => {
15263
15303
  transform: `translateX(${selectedItemMeasurements.offsetLeft}px) translateY(-50%)`,
15264
15304
  width: `${selectedItemMeasurements.offsetWidth}px`
15265
15305
  } : void 0, [selectedItemMeasurements]);
15306
+ const contextValue = useMemo(() => ({
15307
+ setSelectedItemMeasurements,
15308
+ selectedItemIndicatorStyle
15309
+ }), [selectedItemIndicatorStyle]);
15266
15310
  return /* @__PURE__ */ jsx(SelectedItemStyleContext, {
15267
- value: useMemo(() => ({
15268
- setSelectedItemMeasurements,
15269
- selectedItemIndicatorStyle
15270
- }), [selectedItemIndicatorStyle]),
15311
+ value: contextValue,
15271
15312
  children
15272
15313
  });
15273
15314
  };
@@ -16407,7 +16448,8 @@ const ThumbnailStoryboardViewer = ({ storyboardUrl, storyboardHeight, storyboard
16407
16448
  };
16408
16449
  const { scaledHeight, scaledWidth } = getScaledDimensions(originalAspectRatio, effectiveTargetAspectRatio, viewerDimensions.viewerWidth, viewerDimensions.viewerHeight);
16409
16450
  const coverProps = getCoverProps(viewerDimensions.viewerWidth, viewerDimensions.viewerHeight, scaledWidth, scaledHeight);
16410
- const backgroundPosition = getFramePosition(Math.floor(percent * frameCount), framesPerRow, coverProps.width, coverProps.height, scaleFactor, frameCount, calculatedHeight);
16451
+ const frameIndex = Math.floor(percent * frameCount);
16452
+ const backgroundPosition = getFramePosition(frameIndex, framesPerRow, coverProps.width, coverProps.height, scaleFactor, frameCount, calculatedHeight);
16411
16453
  const scaleFactorFromAspectRatioFit = coverProps.height / frameHeight;
16412
16454
  const backgroundSize = `${storyboardWidth * scaleFactorFromAspectRatioFit * scaleFactor}px ${Math.floor(storyboardHeight * scaleFactorFromAspectRatioFit * scaleFactor)}px`;
16413
16455
  const backgroundImage = `url(${storyboardUrl})`;