npm - @wistia/ui - Versions diffs - 1.4.0 → 1.4.1-beta.00bbf92d.6138863 - Mend

@wistia/ui 1.4.0 → 1.4.1-beta.00bbf92d.6138863

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

package/dist/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /*
- * @license @wistia/ui v1.4.0
+ * @license @wistia/ui v1.4.1-beta.00bbf92d.6138863
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -13,12 +13,6 @@ import { createGlobalStyle, css, keyframes, styled } from "styled-components";
 import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "sonner";
-import { isPast } from "date-fns/isPast";
-import { isValid } from "date-fns/isValid";
-import { parse } from "date-fns/parse";
-import { startOfDay } from "date-fns/startOfDay";
-import { startOfToday } from "date-fns/startOfToday";
-import { startOfTomorrow } from "date-fns/startOfTomorrow";
 import { getValueAndUnit } from "polished";
 import { useFilePicker as useFilePicker$1, useImperativeFilePicker as useImperativeFilePicker$1 } from "use-file-picker";
 import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
@@ -74,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
@@ -736,17 +727,69 @@ const MONTH_NAMES = [
 	"November",
 	"December"
 ];
-const DATE_FORMATS = [
-	"MMM d, yyyy",
-	"MMM d",
-	"MMMM d, yyyy",
-	"MMMM d",
-	"M/d/yyyy",
-	"M/d",
-	"M-d-yyyy",
-	"M-d",
-	"yyyy-MM-dd"
+const MONTH_ABBREVIATIONS = MONTH_NAMES.map((name) => name.slice(0, 3));
+const startOfDay = (date) => {
+	const result = new Date(date);
+	result.setHours(0, 0, 0, 0);
+	return result;
+};
+const startOfToday = () => startOfDay(/* @__PURE__ */ new Date());
+const startOfTomorrow = () => {
+	const tomorrow = startOfToday();
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	return tomorrow;
+};
+const monthIndexIn = (names, value) => names.findIndex((name) => name.toLowerCase() === value.toLowerCase());
+const toNumberOrUndefined = (value) => value === void 0 ? void 0 : Number(value);
+const DATE_PATTERNS = [
+	{
+		regex: new RegExp(`^(${MONTH_ABBREVIATIONS.join("|")}) (\\d{1,2})(?:, (\\d{1,4}))?$`, "i"),
+		toParts: ([, month, day, year]) => ({
+			monthIndex: monthIndexIn(MONTH_ABBREVIATIONS, month ?? ""),
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: new RegExp(`^(${MONTH_NAMES.join("|")}) (\\d{1,2})(?:, (\\d{1,4}))?$`, "i"),
+		toParts: ([, month, day, year]) => ({
+			monthIndex: monthIndexIn(MONTH_NAMES, month ?? ""),
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: /^(\d{1,2})\/(\d{1,2})(?:\/(\d{1,4}))?$/,
+		toParts: ([, month, day, year]) => ({
+			monthIndex: Number(month) - 1,
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: /^(\d{1,2})-(\d{1,2})(?:-(\d{1,4}))?$/,
+		toParts: ([, month, day, year]) => ({
+			monthIndex: Number(month) - 1,
+			day: Number(day),
+			year: toNumberOrUndefined(year)
+		})
+	},
+	{
+		regex: /^(\d{1,4})-(\d{1,2})-(\d{1,2})$/,
+		toParts: ([, year, month, day]) => ({
+			monthIndex: Number(month) - 1,
+			day: Number(day),
+			year: Number(year)
+		})
+	}
 ];
+const toValidDate = ({ monthIndex, day, year }, referenceDate) => {
+	if (year === 0) return null;
+	const resolvedYear = year ?? referenceDate.getFullYear();
+	const date = new Date(referenceDate.getFullYear(), 0, 1);
+	date.setFullYear(resolvedYear, monthIndex, day);
+	return date.getFullYear() === resolvedYear && date.getMonth() === monthIndex && date.getDate() === day ? date : null;
+};
 const parseDateString = (str) => {
 	const trimmed = str.trim();
 	if (!trimmed) return null;
@@ -757,14 +800,19 @@ const parseDateString = (str) => {
 	if (monthIndex !== -1) {
 		const today = startOfToday();
 		let date = new Date(today.getFullYear(), monthIndex, 1);
-		if (isPast(date)) date = new Date(today.getFullYear() + 1, monthIndex, 1);
-		return startOfDay(date);
+		if (date.getTime() < Date.now()) date = new Date(today.getFullYear() + 1, monthIndex, 1);
+		return date;
 	}
 	const referenceDate = /* @__PURE__ */ new Date();
-	const parsedDate = DATE_FORMATS.map((fmt) => parse(trimmed, fmt, referenceDate)).find((date) => isValid(date));
-	if (parsedDate !== void 0) return startOfDay(parsedDate);
+	for (const { regex, toParts } of DATE_PATTERNS) {
+		const match = trimmed.match(regex);
+		if (match) {
+			const parsed = toValidDate(toParts(match), referenceDate);
+			if (parsed !== null) return parsed;
+		}
+	}
 	const native = new Date(trimmed);
-	if (isValid(native)) return startOfDay(native);
+	if (!Number.isNaN(native.getTime())) return startOfDay(native);
 	return null;
 };
 //#endregion
@@ -811,7 +859,7 @@ const getLocalDateParts = (date) => {
 //#region src/helpers/dateTime/differenceInCalendarDays.ts
 /**
 * Returns the difference in calendar days between two dates in local time,
-* ignoring the time of day. Essentially replicates date-fns/differenceInCalendarDays.
+* ignoring the time of day.
 *
 * @param {Date|number} dateLeft  - The later date (or timestamp).
 * @param {Date|number} dateRight - The earlier date (or timestamp).
@@ -1426,7 +1474,7 @@ const useFocusTrap = (active = true, options = {}) => {
 			setTimeout(() => {
 				if (node.ownerDocument) processNode(node);
 				if (!node.ownerDocument) console.warn("[useFocusTrap]: The focus trap is not part of the DOM yet, so it is unable to correctly set focus. Make sure to render the ref node.", node);
-			});
+			}, 0);
 			ref.current = node;
 		} else ref.current = null;
 	}, [
@@ -5347,6 +5395,9 @@ const IconComponent = ({ useInlineStyles = true, invertColor, colorScheme = "inh
 	});
 };
 IconComponent.displayName = "Icon_UI";
+/**
+* An `Icon` displays a visual symbol to represent an action, concept, or entity, rendering the SVG registered for its `type` at a fixed or responsive `size`.
+*/
 const Icon = IconComponent;
 //#endregion
 //#region src/components/Link/Link.tsx
@@ -5449,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,
@@ -5928,6 +5982,9 @@ const StyledImage = styled.img`
   object-fit: ${({ $objFit }) => $objFit};
   object-position: ${({ $objPosition }) => $objPosition};
 `;
+/**
+* An `Image` displays a photo or graphic inline, with controls for border radius, object fit, and how it fills its container. It lazy-loads by default via the native `loading` attribute.
+*/
 const Image = ({ src, alt, borderRadius, fill: fillContainer = false, fit: objFit, loading = "lazy", position: objPosition, onLoad, onError, ...props }) => /* @__PURE__ */ jsx(StyledImage, {
 	$borderRadius: borderRadius,
 	$fillContainer: fillContainer,
@@ -6058,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, {
@@ -7002,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
 	});
@@ -7083,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,
@@ -7168,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
@@ -7285,6 +7348,9 @@ const StyledHiddenCheckboxInput = styled.input`
   ${visuallyHiddenStyle}
   position: relative;
 `;
+/**
+* A `Checkbox` lets users select one or more options from a set, or toggle a single option on or off. It supports both standalone controlled usage and grouped usage via `CheckboxGroup`.
+*/
 const Checkbox = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-checkbox-${generatedId}`;
@@ -7599,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,
@@ -7705,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;
 };
@@ -7733,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;
@@ -7778,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;
 		}
@@ -7876,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
 	});
 };
@@ -7945,7 +8018,10 @@ const ItemsContainer$1 = styled(RadioGroup$1)`
 const ColorGrid = ({ children, label }) => {
 	const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
 	const onValueChange = useCallback((value) => {
-		if (typeof value === "string") onChangeNonDerivedValueAsHsv(convertToHsv(value));
+		if (typeof value === "string") {
+			const hsv = convertToHsv(value);
+			onChangeNonDerivedValueAsHsv(hsv);
+		}
 	}, [onChangeNonDerivedValueAsHsv]);
 	return /* @__PURE__ */ jsxs(Container$9, { children: [label != null && /* @__PURE__ */ jsx(LabelContainer$1, { children: /* @__PURE__ */ jsx(Label, { children: label }) }), /* @__PURE__ */ jsx(ItemsContainer$1, {
 		onValueChange,
@@ -8205,12 +8281,14 @@ const Container$7 = styled(ToggleGroup)`
 */
 const ColorList = ({ children }) => {
 	const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
+	const onValueChange = useCallback((newValue) => {
+		const value = newValue[0];
+		if (value === void 0 || value === "") return;
+		const hsv = convertToHsv(value);
+		onChangeNonDerivedValueAsHsv(hsv);
+	}, [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
 	});
@@ -8550,6 +8628,9 @@ const StyledSwitchThumb = styled.div`
 const StyledHiddenSwitchInput = styled.input`
   ${visuallyHiddenStyle}
 `;
+/**
+* A `Switch` allows users to toggle between two mutually exclusive states, such as on and off.
+*/
 const Switch = ({ align = "left", checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-switch-${generatedId}`;
@@ -8946,7 +9027,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) => {
@@ -8975,10 +9057,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;
@@ -8994,11 +9077,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(() => {
@@ -9766,6 +9851,9 @@ const defaultDisplayValues = (values, onRemove) => {
 		onClickRemoveLabel: `Remove ${selectedValue}`
 	}, selectedValue));
 };
+/**
+* A `Combobox` is a searchable single- or multi-select input. Users can filter options by typing, and selected values in multi-select mode are displayed as removable `Tag` components.
+*/
 const Combobox = ({ placeholder, value, onChange, searchValue, onSearchValueChange, displayValues = defaultDisplayValues, children, flipPopover = true, fullWidth = true }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isPending, startTransition] = useTransition();
@@ -9991,13 +10079,13 @@ const ContextMenuPopup = styled(Menu$1.Popup)`
   ${menuContentCss}
   outline: none;
 `;
+const NOOP$4 = () => null;
 /**
 * The ContextMenu is an extended implementation of the [Menu](/components/Menu) component that allows for right-click context menus.
 * It can be used in two ways:
 * 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
 * 2. By providing a `position` prop, which will render the menu at the specified coordinates.
 */
-const NOOP$4 = () => null;
 const ContextMenu = ({ position, triggerRef, children, side = "bottom", onRequestClose = NOOP$4, compact = false }) => {
 	const [isRightClicked, setIsRightClicked] = useState(false);
 	const [menuPosition, setMenuPosition] = useState(position ?? {
@@ -11484,8 +11572,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",
@@ -11754,6 +11843,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");
@@ -11776,10 +11866,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"
 			})]
@@ -12191,7 +12280,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 {
@@ -12426,18 +12516,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",
@@ -12494,18 +12585,23 @@ 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,
 		children
 	});
 };
+/**
+* A `Grid` arranges its children in a CSS grid layout with configurable `columns`, `gap`, and responsive breakpoint support.
+*/
 const Grid = makePolymorphic(GridComponent);
 //#endregion
 //#region src/components/PreviewCard/PreviewCard.tsx
@@ -13124,10 +13220,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 = () => {
@@ -13514,6 +13611,9 @@ const keyToString = (key) => {
 		default: return key.toUpperCase();
 	}
 };
+/**
+* A `KeyboardShortcut` displays one or more keyboard keys with an optional label, rendering each key in a styled `kbd` element. Platform-specific keys like `Cmd`/`Meta` are rendered with the appropriate symbol for the detected operating system.
+*/
 const KeyboardShortcut = ({ label, keyboardKeys, fullWidth = false, ...otherProps }) => /* @__PURE__ */ jsxs(StyledKeyboardShortcut, {
 	$fullWidth: fullWidth,
 	...otherProps,
@@ -13625,15 +13725,19 @@ 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.
+*/
 const List = ({ children, items, variant, ...otherProps }) => {
 	const listVariant = variant ?? "bullets";
 	if (isNotNil(children)) {
@@ -13798,8 +13902,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 })
 	});
@@ -14749,6 +14854,9 @@ const StyledRadioInput = styled.div`
 const StyledHiddenRadioInput = styled.input`
   ${visuallyHiddenStyle}
 `;
+/**
+* A `Radio` lets users select exactly one option from a visible set of choices.
+*/
 const Radio = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value = "false", required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-radio-${generatedId}`;
@@ -15032,6 +15140,9 @@ const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 //#endregion
 //#region src/components/RadioCard/RadioCard.tsx
+/**
+* A `RadioCard` lets users select exactly one option from a set of visually rich, card-based choices.
+*/
 const RadioCard = ({ icon, label, description, showIndicator, isGated, children, ref, ...rootProps }) => {
 	return /* @__PURE__ */ jsx(RadioCardRoot, {
 		ref,
@@ -15182,11 +15293,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
 	});
 };
@@ -15652,6 +15764,9 @@ const StyledSidebar = styled.nav`
   overflow: hidden;
   border-right: 1px solid var(--wui-color-border);
 `;
+/**
+* The `Sidebar` provides vertical navigation with a composable header, scrollable content area, and footer.
+*/
 const Sidebar = ({ children, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledSidebar, {
 		ref,
@@ -15895,6 +16010,9 @@ const StyledSliderThumb = styled(Slider$1.Thumb)`
   }
 `;
 const DEFAULT_INITIAL_VALUE = [0];
+/**
+* A `Slider` lets users select a value or range from a continuous scale via a draggable thumb.
+*/
 const Slider = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled = false, initialValue = DEFAULT_INITIAL_VALUE, max = 100, min = 0, onChange, onValueCommitted, step = 1, value, "data-testid": dataTestId = "ui-slider", ...otherProps }) => {
 	if (!(isNonEmptyString(ariaLabel) || isNonEmptyString(ariaLabelledby))) throw new Error("UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop.");
 	const values = value ?? initialValue;
@@ -16122,6 +16240,9 @@ const useTabsValue = () => {
 };
 //#endregion
 //#region src/components/Tabs/Tabs.tsx
+/**
+* The `Tabs` component lets users switch between panels of content. It is composed from the `TabsList`, `TabsTrigger`, and `TabsContent` subcomponents.
+*/
 const Tabs = ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }) => {
 	const [internalValue, setInternalValue] = useState(valueProp ?? defaultValue);
 	const isControlled = isNotNil(valueProp);
@@ -16317,7 +16438,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})`;