@wistia/ui 1.4.1 → 1.4.2

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v1.4.1
+ * @license @wistia/ui v1.4.2
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -68,11 +68,8 @@ const clickRegionGlobalStyles = css`
 //#region src/css/designTokens/index.tsx
 const designTokens = css`
   ${"/* -------------------------------------------\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"}
-  :root,
-  [data-wui-theme='true'] {
-    ${"/*\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"}
-    ${"/*\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"}
-  }
+  ${"/*\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"}
+  ${"/*\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"}
 `;
 //#endregion
 //#region src/css/GlobalStyle.tsx
@@ -5503,12 +5500,15 @@ const Link = ({ beforeAction, children, type, disabled = false, colorScheme = "i
 			as: "a",
 			href: to
 		};
-		return /* @__PURE__ */ jsxs(StyledLink, {
+		const combinedProps = {
 			ref,
 			...props,
 			...commonProps,
 			...externalLinkProps,
-			...routerSpecificProps,
+			...routerSpecificProps
+		};
+		return /* @__PURE__ */ jsxs(StyledLink, {
+			...combinedProps,
 			role: role ?? (disabled ? "link" : void 0),
 			children: [
 				leftIcon ?? null,
@@ -6115,8 +6115,9 @@ const Avatar = ({ imageUrl, heightAndWidth, name, size = "md", onImageLoad, ...p
 		});
 	};
 	const avatarSize = heightAndWidth ?? avatarSizeMap[size];
+	const avatarColor = useMemo(() => chooseColorScheme(name), [name]);
 	return /* @__PURE__ */ jsxs(AvatarWrapper, {
-		$colorScheme: useMemo(() => chooseColorScheme(name), [name]),
+		$colorScheme: avatarColor,
 		$heightAndWidth: avatarSize,
 		...props,
 		children: [/* @__PURE__ */ jsx(Initial, { initial: formatNameForDisplay(name) }), isNotNil(imageUrl) && imageLoadState !== "error" && /* @__PURE__ */ jsx(Image, {
@@ -7059,13 +7060,16 @@ const StyledStack = styled.div`
 const StackComponent = ({ ref, renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", padding, ...props }) => {
 	const responsiveGap = useResponsiveProp(gap);
 	const responsiveDirection = useResponsiveProp(direction);
+	const responsiveAlignItems = useResponsiveProp(alignItems);
+	const responsivePaddingX = useResponsiveProp(padding?.x);
+	const responsivePaddingY = useResponsiveProp(padding?.y);
 	return /* @__PURE__ */ jsx(StyledStack, {
 		ref,
-		$alignItems: useResponsiveProp(alignItems),
+		$alignItems: responsiveAlignItems,
 		$direction: responsiveDirection,
 		$gap: responsiveGap,
-		$paddingX: useResponsiveProp(padding?.x),
-		$paddingY: useResponsiveProp(padding?.y),
+		$paddingX: responsivePaddingX,
+		$paddingY: responsivePaddingY,
 		as: renderAs ?? DEFAULT_ELEMENT$1,
 		...props
 	});
@@ -7140,22 +7144,23 @@ const Form = ({ children, action, values = DEFAULT_VALUES, labelPosition = "bloc
 		if (props.onReset) props.onReset(event);
 		if (action) action(null);
 	};
-	return /* @__PURE__ */ jsx(FormContext, {
-		value: useMemo(() => {
-			return {
-				values,
-				errors,
-				hasSubmitted,
-				formId: id,
-				labelPosition
-			};
-		}, [
-			labelPosition,
+	const context = useMemo(() => {
+		return {
 			values,
 			errors,
-			id,
-			hasSubmitted
-		]),
+			hasSubmitted,
+			formId: id,
+			labelPosition
+		};
+	}, [
+		labelPosition,
+		values,
+		errors,
+		id,
+		hasSubmitted
+	]);
+	return /* @__PURE__ */ jsx(FormContext, {
+		value: context,
 		children: /* @__PURE__ */ jsx(Stack, {
 			...props,
 			ref,
@@ -7225,18 +7230,19 @@ const useCheckboxGroup = () => {
 const CheckboxGroup = ({ children, name, onChange, value, ...props }) => {
 	const formState = useContext(FormContext);
 	const derivedValue = isArray(formState.values[name]) ? formState.values[name] : value;
+	const context = useMemo(() => {
+		return {
+			name: `${name}[]`,
+			onChange,
+			value: derivedValue
+		};
+	}, [
+		name,
+		derivedValue,
+		onChange
+	]);
 	return /* @__PURE__ */ jsx(CheckboxGroupContext, {
-		value: useMemo(() => {
-			return {
-				name: `${name}[]`,
-				onChange,
-				value: derivedValue
-			};
-		}, [
-			name,
-			derivedValue,
-			onChange
-		]),
+		value: context,
 		children: /* @__PURE__ */ jsx(FormGroup, {
 			...props,
 			children
@@ -7659,7 +7665,8 @@ const getAccessibleColorByValueChannelChange = ({ originalColor, colorForCompari
 	let searchHigh = highValue;
 	let bestSoFar = extremeVariant;
 	for (let i = 0; i < maxIterations; i++) {
-		const midValue = snapValueToEdges((searchLow + searchHigh) / 2);
+		const rawMidValue = (searchLow + searchHigh) / 2;
+		const midValue = snapValueToEdges(rawMidValue);
 		const candidateHsv = {
 			h: originalHsv.h ?? 0,
 			s: originalHsv.s,
@@ -7765,26 +7772,29 @@ const getAccessibleColorInDirection = ({ originalColor, colorForComparison, minC
 * brighter and darker variants and choosing the one with the smallest change in value.
 */
 const getAccessibleColor = ({ originalColor, colorForComparison, minContrast, maxIterations = 50, opacityForContrastCalculation }) => {
+	const originalColorAsHsv = convertToHsv(originalColor);
 	if (calculateContrast({
-		backgroundColor: formatHex(convertToHsv(originalColor)),
+		backgroundColor: formatHex(originalColorAsHsv),
 		foregroundColor: colorForComparison,
 		backgroundOpacity: opacityForContrastCalculation
 	}) >= minContrast) return convertToHsv(originalColor);
-	const result = chooseClosestDerivativeToOriginal(getAccessibleColorInDirection({
+	const brighterOption = getAccessibleColorInDirection({
 		originalColor,
 		colorForComparison,
 		minContrast,
 		maxIterations,
 		direction: "brighter",
 		opacityForContrastCalculation
-	}), getAccessibleColorInDirection({
+	});
+	const darkerOption = getAccessibleColorInDirection({
 		originalColor,
 		colorForComparison,
 		minContrast,
 		maxIterations,
 		direction: "darker",
 		opacityForContrastCalculation
-	}), originalColor);
+	});
+	const result = chooseClosestDerivativeToOriginal(brighterOption, darkerOption, originalColor);
 	if (result == null) throw new Error(`Unable to get accessible derivative for ${formatHex(originalColor)} at minimum contrast ratio ${minContrast}`);
 	return result;
 };
@@ -7793,8 +7803,9 @@ const getAccessibleColor = ({ originalColor, colorForComparison, minContrast, ma
 * Returns true if at least one accessible color can be found by going brighter or darker.
 */
 const hasAccessibleDerivatives = ({ originalColor, colorForComparison, minContrast, opacityForContrastCalculation }) => {
+	const originalColorAsHsv = convertToHsv(originalColor);
 	if (calculateContrast({
-		backgroundColor: formatHex(convertToHsv(originalColor)),
+		backgroundColor: formatHex(originalColorAsHsv),
 		foregroundColor: colorForComparison,
 		backgroundOpacity: opacityForContrastCalculation
 	}) >= minContrast) return true;
@@ -7838,7 +7849,8 @@ const transitionBetweenColors = (fromHsv, toHsv, onColorStep, onTransitionEnd) =
 			return;
 		}
 		if (now - lastTime >= intervalMs) {
-			onColorStep(interpolator(count / steps));
+			const animationProgress = count / steps;
+			onColorStep(interpolator(animationProgress));
 			count++;
 			lastTime = now;
 		}
@@ -7936,42 +7948,43 @@ const ColorPickerProvider = ({ children, colorForComparison, minimumContrastRati
 		valueAsHsvConvertedToHex,
 		whatValueAsHexShouldBe
 	]);
+	const contextValue = useMemo(() => ({
+		colorForComparison,
+		commitValue,
+		currentContrastRatio,
+		getAccessibleDerivativeColor,
+		hasAccessibleDerivatives: hasAccessibleDerivativesValue,
+		isDragging,
+		isTransitioning,
+		minimumContrastRatio,
+		nonDerivedValueAsHex: formatHex(nonDerivedValueAsHsv),
+		nonDerivedValueAsHsv,
+		onChangeNonDerivedValueAsHsv,
+		opacityForContrastCalculation,
+		setIsDragging,
+		setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
+		shouldEnforceMinContrast,
+		valueAsHex,
+		valueAsHsv
+	}), [
+		colorForComparison,
+		commitValue,
+		currentContrastRatio,
+		getAccessibleDerivativeColor,
+		hasAccessibleDerivativesValue,
+		isDragging,
+		isTransitioning,
+		minimumContrastRatio,
+		nonDerivedValueAsHsv,
+		onChangeNonDerivedValueAsHsv,
+		opacityForContrastCalculation,
+		setShouldEnforceMinContrastWrapped,
+		shouldEnforceMinContrast,
+		valueAsHex,
+		valueAsHsv
+	]);
 	return /* @__PURE__ */ jsx(ColorPickerContext, {
-		value: useMemo(() => ({
-			colorForComparison,
-			commitValue,
-			currentContrastRatio,
-			getAccessibleDerivativeColor,
-			hasAccessibleDerivatives: hasAccessibleDerivativesValue,
-			isDragging,
-			isTransitioning,
-			minimumContrastRatio,
-			nonDerivedValueAsHex: formatHex(nonDerivedValueAsHsv),
-			nonDerivedValueAsHsv,
-			onChangeNonDerivedValueAsHsv,
-			opacityForContrastCalculation,
-			setIsDragging,
-			setShouldEnforceMinContrast: setShouldEnforceMinContrastWrapped,
-			shouldEnforceMinContrast,
-			valueAsHex,
-			valueAsHsv
-		}), [
-			colorForComparison,
-			commitValue,
-			currentContrastRatio,
-			getAccessibleDerivativeColor,
-			hasAccessibleDerivativesValue,
-			isDragging,
-			isTransitioning,
-			minimumContrastRatio,
-			nonDerivedValueAsHsv,
-			onChangeNonDerivedValueAsHsv,
-			opacityForContrastCalculation,
-			setShouldEnforceMinContrastWrapped,
-			shouldEnforceMinContrast,
-			valueAsHex,
-			valueAsHsv
-		]),
+		value: contextValue,
 		children
 	});
 };
@@ -8003,10 +8016,14 @@ const ItemsContainer$1 = styled(RadioGroup$1)`
 * as children and pass an optional `label` for a heading.
 */
 const ColorGrid = ({ children, label }) => {
-	const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+	const { valueAsHex, commitValue, onChangeNonDerivedValueAsHsv } = useColorPickerState();
 	const onValueChange = useCallback((value) => {
-		if (typeof value === "string") onChangeNonDerivedValueAsHsv(convertToHsv(value));
-	}, [onChangeNonDerivedValueAsHsv]);
+		if (typeof value === "string") {
+			const hsv = convertToHsv(value);
+			onChangeNonDerivedValueAsHsv(hsv);
+			commitValue(value);
+		}
+	}, [commitValue, onChangeNonDerivedValueAsHsv]);
 	return /* @__PURE__ */ jsxs(Container$9, { children: [label != null && /* @__PURE__ */ jsx(LabelContainer$1, { children: /* @__PURE__ */ jsx(Label, { children: label }) }), /* @__PURE__ */ jsx(ItemsContainer$1, {
 		onValueChange,
 		value: valueAsHex,
@@ -8264,13 +8281,16 @@ const Container$7 = styled(ToggleGroup)`
 * `ColorListOption` for individual items.
 */
 const ColorList = ({ children }) => {
-	const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+	const { valueAsHex, commitValue, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+	const onValueChange = useCallback((newValue) => {
+		const value = newValue[0];
+		if (value === void 0 || value === "") return;
+		const hsv = convertToHsv(value);
+		onChangeNonDerivedValueAsHsv(hsv);
+		commitValue(value);
+	}, [commitValue, onChangeNonDerivedValueAsHsv]);
 	return /* @__PURE__ */ jsx(Container$7, {
-		onValueChange: useCallback((newValue) => {
-			const value = newValue[0];
-			if (value === void 0 || value === "") return;
-			onChangeNonDerivedValueAsHsv(convertToHsv(value));
-		}, [onChangeNonDerivedValueAsHsv]),
+		onValueChange,
 		value: [valueAsHex],
 		children
 	});
@@ -9009,7 +9029,8 @@ const HexColorInput = ({ autoFocus = true }) => {
 		setTextInputValue(newValue);
 		if (!Boolean(parseHex(newValue))) return;
 		if (newValue.length < SIX_DIGIT_HEX_CODE_LENGTH) return;
-		onChangeNonDerivedValueAsHsv(convertToHsv(newValue));
+		const newValueAsHsv = convertToHsv(newValue);
+		onChangeNonDerivedValueAsHsv(newValueAsHsv);
 		commitValue(newValue);
 	}, [onChangeNonDerivedValueAsHsv, commitValue]);
 	const onCopy = useCallback((event) => {
@@ -9038,10 +9059,11 @@ const HexColorInput = ({ autoFocus = true }) => {
 			const currentHsv = convertToHsv(valueAsHex);
 			const saturationNudge = .02;
 			const newSaturation = Math.max(0, Math.min(1, key === "ArrowUp" ? currentHsv.s + saturationNudge : currentHsv.s - saturationNudge));
-			onChangeNonDerivedValueAsHsv({
+			const newHsv = {
 				...nonDerivedValueAsHsv,
 				s: newSaturation
-			});
+			};
+			onChangeNonDerivedValueAsHsv(newHsv);
 			return;
 		}
 		if (key.length > 1) return;
@@ -9057,11 +9079,13 @@ const HexColorInput = ({ autoFocus = true }) => {
 	]);
 	const onPaste = useCallback((event) => {
 		event.preventDefault();
-		const normalizedValue = normalizeHexInput(event.clipboardData.getData("text"));
+		const pastedText = event.clipboardData.getData("text");
+		const normalizedValue = normalizeHexInput(pastedText);
 		const isValidHexValue = Boolean(parseHex(normalizedValue));
 		setTextInputValue(normalizedValue);
 		if (!isValidHexValue) return;
-		onChangeNonDerivedValueAsHsv(convertToHsv(normalizedValue));
+		const newValueAsHsv = convertToHsv(normalizedValue);
+		onChangeNonDerivedValueAsHsv(newValueAsHsv);
 		commitValue(normalizedValue);
 	}, [commitValue, onChangeNonDerivedValueAsHsv]);
 	const selectAllButTheHash = useCallback(() => {
@@ -11550,8 +11574,9 @@ const DividerComponent = styled.div`
 */
 const Divider = ({ orientation = "horizontal", inset = "space-00", ...props }) => {
 	const responsiveOrientation = useResponsiveProp(orientation);
+	const responsiveInset = useResponsiveProp(inset);
 	return /* @__PURE__ */ jsx(DividerComponent, {
-		$inset: useResponsiveProp(inset),
+		$inset: responsiveInset,
 		$orientation: responsiveOrientation,
 		"aria-orientation": responsiveOrientation,
 		role: "separator",
@@ -11820,6 +11845,7 @@ const StyledEditableTextDisplay = styled.div`
     }
   }
 `;
+const StyledHiddenTriggerButton = styled.button({ ...visuallyHiddenStyle });
 const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) => {
 	const context = useContext(EditableTextContext);
 	if (!context) throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
@@ -11842,10 +11868,9 @@ const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) =>
 			as: elementType,
 			"data-wui-editable-text-display": isPlaceholderVisible ? "placeholder" : "value",
 			...props,
-			children: [displayText, /* @__PURE__ */ jsx("button", {
+			children: [displayText, /* @__PURE__ */ jsx(StyledHiddenTriggerButton, {
 				ref: triggerButtonRef,
 				onClick: handleTriggerClick,
-				style: { ...visuallyHiddenStyle },
 				type: "button",
 				children: "Edit text"
 			})]
@@ -12257,7 +12282,8 @@ const useFormState = (action, initialData = {}) => {
 		const nextData = serializeFormData(nextFormData);
 		setIsPending(true);
 		try {
-			setData(await action(data, nextData));
+			const result = await action(data, nextData);
+			setData(result);
 		} catch (err) {
 			setError(err instanceof Error ? err : new Error(String(err)));
 		} finally {
@@ -12492,18 +12518,19 @@ const useRadioGroup = () => {
 const RadioGroup = ({ children, name, onChange, value, ...props }) => {
 	const formState = useContext(FormContext);
 	const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
-	return /* @__PURE__ */ jsx(RadioGroupContext, {
-		value: useMemo(() => {
-			return {
-				name,
-				onChange,
-				value: derivedValue
-			};
-		}, [
+	const context = useMemo(() => {
+		return {
 			name,
-			derivedValue,
-			onChange
-		]),
+			onChange,
+			value: derivedValue
+		};
+	}, [
+		name,
+		derivedValue,
+		onChange
+	]);
+	return /* @__PURE__ */ jsx(RadioGroupContext, {
+		value: context,
 		children: /* @__PURE__ */ jsx(FormGroup, {
 			...props,
 			role: "radiogroup",
@@ -12560,12 +12587,14 @@ const GridComponent = ({ ref, children, columns = "auto", minChildWidth = "auto"
 		column: responsiveGap,
 		row: responsiveGap
 	};
+	const responsiveColumns = useResponsiveProp(columns);
+	const responsiveMinChildWidth = useResponsiveProp(minChildWidth);
 	return /* @__PURE__ */ jsx(StyledGrid, {
 		ref,
 		$columnGap: column,
 		$expandItems: expandItems,
-		$maxColumns: useResponsiveProp(columns),
-		$minChildWidth: useResponsiveProp(minChildWidth),
+		$maxColumns: responsiveColumns,
+		$minChildWidth: responsiveMinChildWidth,
 		$rowGap: row,
 		as: renderAs ?? DEFAULT_ELEMENT,
 		...props,
@@ -13193,10 +13222,11 @@ const useInputDuration = ({ decimalUnitLength, maxSeconds, minSeconds, onChangeV
 		if (anyKeyIsDownRef.current) return;
 		const { selectionStart, selectionEnd } = event.currentTarget;
 		if (selectionStart === null || selectionEnd === null) return;
-		selectUnit(getUnitForSelectionIndices({
+		const unitToSelect = getUnitForSelectionIndices({
 			selectionStart,
 			selectionEnd
-		}));
+		});
+		selectUnit(unitToSelect);
 	}, [getUnitForSelectionIndices, selectUnit]);
 	const onFocus = useCallback(() => {
 		const selectFirstUnitIfAllTextIsSelected = () => {
@@ -13697,14 +13727,15 @@ const renderListComponent = (listItems, variant, { ...otherProps }) => {
 };
 const renderListFromArray = (listItems, variant, otherProps) => {
 	let itemCount = 0;
-	return renderListComponent(listItems.map((listItem, i) => {
+	const items = listItems.map((listItem, i) => {
 		const item = listItem;
 		const nextItem = listItems[i + 1];
 		const key = `item-${itemCount += 1}`;
 		if (Array.isArray(nextItem)) return /* @__PURE__ */ jsxs(ListItem, { children: [item, renderListFromArray(nextItem, variant, otherProps)] }, key);
 		if (Array.isArray(item)) return null;
 		return /* @__PURE__ */ jsx(ListItem, { children: item }, key);
-	}), variant, otherProps);
+	});
+	return renderListComponent(items, variant, otherProps);
 };
 /**
 * A `List` groups related items in bulleted, ordered, or separator-based layouts, composed with `ListItem` children or a flat/nested `items` array.
@@ -13873,8 +13904,9 @@ const StyledMarkdownWrapper = styled.div`
 * This is a simple wrapper around `react-markdown` that applies some basic styles.
 */
 const Markdown = ({ children, textSize = "body2", ...otherProps }) => {
+	const responsiveTextSize = useResponsiveProp(textSize);
 	return /* @__PURE__ */ jsx(StyledMarkdownWrapper, {
-		$textSize: useResponsiveProp(textSize),
+		$textSize: responsiveTextSize,
 		...otherProps,
 		children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
 	});
@@ -15263,11 +15295,12 @@ const SelectedItemStyleProvider = ({ children }) => {
 		transform: `translateX(${selectedItemMeasurements.offsetLeft}px) translateY(-50%)`,
 		width: `${selectedItemMeasurements.offsetWidth}px`
 	} : void 0, [selectedItemMeasurements]);
+	const contextValue = useMemo(() => ({
+		setSelectedItemMeasurements,
+		selectedItemIndicatorStyle
+	}), [selectedItemIndicatorStyle]);
 	return /* @__PURE__ */ jsx(SelectedItemStyleContext, {
-		value: useMemo(() => ({
-			setSelectedItemMeasurements,
-			selectedItemIndicatorStyle
-		}), [selectedItemIndicatorStyle]),
+		value: contextValue,
 		children
 	});
 };
@@ -16407,7 +16440,8 @@ const ThumbnailStoryboardViewer = ({ storyboardUrl, storyboardHeight, storyboard
 	};
 	const { scaledHeight, scaledWidth } = getScaledDimensions(originalAspectRatio, effectiveTargetAspectRatio, viewerDimensions.viewerWidth, viewerDimensions.viewerHeight);
 	const coverProps = getCoverProps(viewerDimensions.viewerWidth, viewerDimensions.viewerHeight, scaledWidth, scaledHeight);
-	const backgroundPosition = getFramePosition(Math.floor(percent * frameCount), framesPerRow, coverProps.width, coverProps.height, scaleFactor, frameCount, calculatedHeight);
+	const frameIndex = Math.floor(percent * frameCount);
+	const backgroundPosition = getFramePosition(frameIndex, framesPerRow, coverProps.width, coverProps.height, scaleFactor, frameCount, calculatedHeight);
 	const scaleFactorFromAspectRatioFit = coverProps.height / frameHeight;
 	const backgroundSize = `${storyboardWidth * scaleFactorFromAspectRatioFit * scaleFactor}px ${Math.floor(storyboardHeight * scaleFactorFromAspectRatioFit * scaleFactor)}px`;
 	const backgroundImage = `url(${storyboardUrl})`;