@wistia/ui 0.14.1 → 0.14.2-beta.9eaa334e.773c63d

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.1
+ * @license @wistia/ui v0.14.2-beta.9eaa334e.773c63d
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9497,7 +9497,7 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/ColorPicker/ColorGrid.tsx
 import { useCallback as useCallback10 } from "react";
-import styled31 from "styled-components";
+import styled32 from "styled-components";
 import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
@@ -9964,7 +9964,7 @@ var ColorPickerProvider = ({
   );
   const whatValuePropShouldBe = shouldEnforceMinContrast ? formatHex2(getAccessibleDerivativeColor(formatHex2(nonDerivedValueAsHsv))) : formatHex2(nonDerivedValueAsHsv);
   useEffect10(() => {
-    if (valueAsHex.toLocaleLowerCase() !== whatValuePropShouldBe.toLocaleLowerCase() && !isTransitioning) {
+    if (valueAsHex !== whatValuePropShouldBe && !isTransitioning) {
       onValueChange(whatValuePropShouldBe);
     }
   }, [valueAsHex, whatValuePropShouldBe, isTransitioning, onValueChange]);
@@ -10011,17 +10011,86 @@ var useColorPickerState = () => {
   return context;
 };
 
-// src/components/ColorPicker/ColorGrid.tsx
+// src/components/Label/Label.tsx
+import styled31, { css as css26 } from "styled-components";
 import { jsx as jsx226 } from "react/jsx-runtime";
-var Container = styled31(RadioGroupRoot)`
+var requiredStyle = css26`
+  &::after {
+    color: var(--wui-color-text-error);
+    display: inline;
+    padding-left: var(--wui-space-01);
+    content: '*';
+  }
+`;
+var disabledStyle3 = css26`
+  color: var(--wui-color-text-disabled);
+`;
+var StyledLabel2 = styled31.label`
+  display: block;
+  width: 100%;
+  color: var(--wui-color-text);
+  font-family: var(--wui-typography-heading-6-family);
+  line-height: var(--wui-typography-heading-6-line-height);
+  font-size: var(--wui-typography-heading-6-size);
+  font-weight: var(--wui-typography-heading-6-weight);
+
+  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
+  > input,
+  > textarea,
+  > select {
+    display: block;
+  }
+
+  > label {
+    font-weight: normal;
+  }
+
+  ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
+  ${({ $disabled }) => $disabled && disabledStyle3}
+  ${({ $required }) => $required && requiredStyle}
+`;
+var Label = ({
+  children,
+  disabled = false,
+  htmlFor,
+  required = false,
+  screenReaderOnly = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx226(
+    StyledLabel2,
+    {
+      ...props,
+      $disabled: disabled,
+      $required: required,
+      $screenReaderOnly: screenReaderOnly,
+      htmlFor,
+      children
+    }
+  );
+};
+Label.displayName = "Label_UI";
+
+// src/components/ColorPicker/ColorGrid.tsx
+import { jsx as jsx227, jsxs as jsxs20 } from "react/jsx-runtime";
+var Container = styled32.div`
+  display: grid;
+  gap: var(--wui-space-01);
+  grid-template-columns: minmax(0, 1fr);
+  padding: var(--wui-space-02);
+`;
+var LabelContainer = styled32.div`
+  padding-top: var(--wui-space-01);
+`;
+var ItemsContainer = styled32(RadioGroupRoot)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: start;
-  padding: var(--wui-space-02) 14px;
+  padding: var(--wui-space-01) 6px;
   gap: var(--wui-space-02);
 `;
-var ColorGrid = ({ children }) => {
+var ColorGrid = ({ children, label }) => {
   const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const onValueChange = useCallback10(
     (value) => {
@@ -10030,26 +10099,29 @@ var ColorGrid = ({ children }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ jsx226(
-    Container,
-    {
-      onValueChange,
-      value: valueAsHex,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsxs20(Container, { children: [
+    label != null && /* @__PURE__ */ jsx227(LabelContainer, { children: /* @__PURE__ */ jsx227(Label, { children: label }) }),
+    /* @__PURE__ */ jsx227(
+      ItemsContainer,
+      {
+        onValueChange,
+        value: valueAsHex,
+        children
+      }
+    )
+  ] });
 };
 ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-import styled34 from "styled-components";
+import styled35 from "styled-components";
 import { Item as RadioGroupItem } from "@radix-ui/react-radio-group";
 import { formatHex as formatHex3 } from "culori/fn";
 
 // src/components/ColorPicker/ColorSwatch.tsx
-import styled32 from "styled-components";
-import { jsx as jsx227, jsxs as jsxs20 } from "react/jsx-runtime";
-var ColorSwatchDiv = styled32.div`
+import styled33 from "styled-components";
+import { jsx as jsx228, jsxs as jsxs21 } from "react/jsx-runtime";
+var ColorSwatchDiv = styled33.div`
   aspect-ratio: 1;
   width: ${({ $diameterPx }) => `${$diameterPx}px`};
   border-radius: var(--wui-border-radius-rounded);
@@ -10068,7 +10140,7 @@ var ColorSwatchDiv = styled32.div`
   outline-offset: 2px;
   transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
 `;
-var DerivativeHalfCircle = styled32.div`
+var DerivativeHalfCircle = styled33.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -10085,7 +10157,7 @@ var ColorSwatch = ({
   value
 }) => {
   const { valueAsHex: colorPickerValueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     ColorSwatchDiv,
     {
       $diameterPx: diameterPx,
@@ -10096,7 +10168,7 @@ var ColorSwatch = ({
         backgroundColor: value
       },
       children: [
-        derivativeIsSelected ? /* @__PURE__ */ jsx227(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
+        derivativeIsSelected ? /* @__PURE__ */ jsx228(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
         children
       ]
     }
@@ -10111,8 +10183,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled33, { keyframes } from "styled-components";
-import { jsx as jsx228, jsxs as jsxs21 } from "react/jsx-runtime";
+import styled34, { keyframes } from "styled-components";
+import { jsx as jsx229, jsxs as jsxs22 } from "react/jsx-runtime";
 var hide = keyframes`
   from {
     opacity: 1;
@@ -10161,7 +10233,7 @@ var slideRightAndFade = keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = styled33(TooltipContent)`
+var StyledContent = styled34(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -10223,21 +10295,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     TooltipRoot,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx228(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx228(TooltipPortal, { children: /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsx229(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx229(TooltipPortal, { children: /* @__PURE__ */ jsxs22(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx228(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx228(
+              !hideArrow ? /* @__PURE__ */ jsx229(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx229(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -10246,7 +10318,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx228("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ jsx229("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -10259,8 +10331,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-import { jsx as jsx229 } from "react/jsx-runtime";
-var Container2 = styled34(RadioGroupItem)`
+import { jsx as jsx230 } from "react/jsx-runtime";
+var Container2 = styled35(RadioGroupItem)`
   border: none;
   appearance: none;
   outline: none;
@@ -10270,16 +10342,17 @@ var Container2 = styled34(RadioGroupItem)`
   cursor: pointer;
   user-select: none;
 `;
-var ColorGridOption = ({ value, name }) => {
+var ColorGridOption = ({ value: rawValue, name }) => {
+  const value = rawValue.toLocaleLowerCase();
   const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
   const valueAsHex = formatHex3(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
-  return /* @__PURE__ */ jsx229(
+  return /* @__PURE__ */ jsx230(
     Tooltip,
     {
-      content: name ?? /* @__PURE__ */ jsx229("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
-      children: /* @__PURE__ */ jsx229(
+      content: name ?? /* @__PURE__ */ jsx230("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
+      children: /* @__PURE__ */ jsx230(
         Container2,
         {
           "aria-label": value,
@@ -10287,7 +10360,7 @@ var ColorGridOption = ({ value, name }) => {
           role: "option",
           tabIndex: -1,
           value,
-          children: /* @__PURE__ */ jsx229(
+          children: /* @__PURE__ */ jsx230(
             ColorSwatch,
             {
               derivativeIsSelected,
@@ -10304,10 +10377,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 import { useCallback as useCallback11 } from "react";
-import styled35 from "styled-components";
+import styled36 from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
-import { jsx as jsx230 } from "react/jsx-runtime";
-var Container3 = styled35(ToggleGroupRoot)`
+import { jsx as jsx231 } from "react/jsx-runtime";
+var Container3 = styled36(ToggleGroupRoot)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   padding: var(--wui-space-02);
@@ -10324,7 +10397,7 @@ var ColorList = ({ children }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ jsx230(
+  return /* @__PURE__ */ jsx231(
     Container3,
     {
       onValueChange,
@@ -10337,29 +10410,29 @@ var ColorList = ({ children }) => {
 ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
-import styled36 from "styled-components";
-import { jsx as jsx231, jsxs as jsxs22 } from "react/jsx-runtime";
-var ItemsContainer = styled36.div`
+import styled37 from "styled-components";
+import { jsx as jsx232, jsxs as jsxs23 } from "react/jsx-runtime";
+var Container4 = styled37.div`
+  display: grid;
+  gap: var(--wui-space-01);
+  grid-template-columns: minmax(0, 1fr);
+`;
+var ItemsContainer2 = styled37.div`
   display: flex;
   flex-direction: column;
 `;
+var LabelContainer2 = styled37.div`
+  padding-top: var(--wui-space-01);
+`;
 var ColorListGroup = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs22(
-    "div",
+  return /* @__PURE__ */ jsxs23(
+    Container4,
     {
       "aria-label": label,
       role: "group",
       children: [
-        /* @__PURE__ */ jsx231(
-          Text,
-          {
-            prominence: "secondary",
-            renderAs: "span",
-            variant: "label4",
-            children: label
-          }
-        ),
-        /* @__PURE__ */ jsx231(ItemsContainer, { children })
+        /* @__PURE__ */ jsx232(LabelContainer2, { children: /* @__PURE__ */ jsx232(Label, { children: label }) }),
+        /* @__PURE__ */ jsx232(ItemsContainer2, { children })
       ]
     }
   );
@@ -10367,14 +10440,14 @@ var ColorListGroup = ({ label, children }) => {
 ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
-import styled37 from "styled-components";
+import styled38 from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { formatHex as formatHex4 } from "culori/fn";
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
-import { jsx as jsx232, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx233, jsxs as jsxs24 } from "react/jsx-runtime";
 var ColorNameOrHexCode = ({ name, hexCode }) => {
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     Box,
     {
       alignItems: "center",
@@ -10382,7 +10455,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
       grow: 1,
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ jsx232(
+        /* @__PURE__ */ jsx233(
           Text,
           {
             renderAs: "span",
@@ -10390,7 +10463,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
             children: name ?? hexCode
           }
         ),
-        name != null && /* @__PURE__ */ jsx232(
+        name != null && /* @__PURE__ */ jsx233(
           Text,
           {
             prominence: "secondary",
@@ -10405,8 +10478,8 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 };
 
 // src/components/ColorPicker/ColorListOption.tsx
-import { jsx as jsx233, jsxs as jsxs24 } from "react/jsx-runtime";
-var Container4 = styled37(ToggleGroupItem)`
+import { jsx as jsx234, jsxs as jsxs25 } from "react/jsx-runtime";
+var Container5 = styled38(ToggleGroupItem)`
   border: none;
   appearance: none;
   outline: none;
@@ -10428,13 +10501,14 @@ var Container4 = styled37(ToggleGroupItem)`
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 `;
-var ColorListOption = ({ value, name }) => {
+var ColorListOption = ({ value: rawValue, name }) => {
+  const value = rawValue.toLocaleLowerCase();
   const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
   const valueAsHex = formatHex4(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
-  return /* @__PURE__ */ jsxs24(
-    Container4,
+  return /* @__PURE__ */ jsxs25(
+    Container5,
     {
       "aria-label": value,
       "aria-selected": valueAsHex === value,
@@ -10442,7 +10516,7 @@ var ColorListOption = ({ value, name }) => {
       tabIndex: -1,
       value,
       children: [
-        /* @__PURE__ */ jsx233(
+        /* @__PURE__ */ jsx234(
           ColorSwatch,
           {
             derivativeIsSelected,
@@ -10450,7 +10524,7 @@ var ColorListOption = ({ value, name }) => {
             value
           }
         ),
-        /* @__PURE__ */ jsx233(
+        /* @__PURE__ */ jsx234(
           ColorNameOrHexCode,
           {
             hexCode: value,
@@ -10465,7 +10539,7 @@ ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
 import { Root as PopoverRoot } from "@radix-ui/react-popover";
-import { jsx as jsx234 } from "react/jsx-runtime";
+import { jsx as jsx235 } from "react/jsx-runtime";
 var ColorPicker = ({
   children,
   colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
@@ -10474,14 +10548,14 @@ var ColorPicker = ({
   onValueChange,
   value
 }) => {
-  return /* @__PURE__ */ jsx234(PopoverRoot, { modal: false, children: /* @__PURE__ */ jsx234(
+  return /* @__PURE__ */ jsx235(PopoverRoot, { modal: false, children: /* @__PURE__ */ jsx235(
     ColorPickerProvider,
     {
       colorForComparison,
       minimumContrastRatio,
       onValueChange,
       opacityForContrastCalculation,
-      value,
+      value: value.toLocaleLowerCase(),
       children
     }
   ) });
@@ -10490,9 +10564,9 @@ ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 import { Content as PopoverContent, Portal as PopoverPortal } from "@radix-ui/react-popover";
-import styled38 from "styled-components";
-import { jsx as jsx235 } from "react/jsx-runtime";
-var StyledPopoverContent = styled38(PopoverContent)`
+import styled39 from "styled-components";
+import { jsx as jsx236 } from "react/jsx-runtime";
+var StyledPopoverContent = styled39(PopoverContent)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
   border: 1px solid var(--wui-color-border);
@@ -10507,7 +10581,7 @@ var StyledPopoverContent = styled38(PopoverContent)`
 var ColorPickerPopoverContent = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx235(PopoverPortal, { children: /* @__PURE__ */ jsx235(
+  return /* @__PURE__ */ jsx236(PopoverPortal, { children: /* @__PURE__ */ jsx236(
     StyledPopoverContent,
     {
       align: "start",
@@ -10519,40 +10593,40 @@ var ColorPickerPopoverContent = ({
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
-import styled39 from "styled-components";
-import { jsx as jsx236 } from "react/jsx-runtime";
-var Container5 = styled39.div`
+import styled40 from "styled-components";
+import { jsx as jsx237 } from "react/jsx-runtime";
+var Container6 = styled40.div`
   padding: var(--wui-space-02);
 `;
 var ColorPickerSection = ({ children }) => {
-  return /* @__PURE__ */ jsx236(Container5, { children: /* @__PURE__ */ jsx236(Stack, { children }) });
+  return /* @__PURE__ */ jsx237(Container6, { children: /* @__PURE__ */ jsx237(Stack, { children }) });
 };
 ColorPickerSection.displayName = "ColorPickerSection_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { Trigger as PopoverTrigger } from "@radix-ui/react-popover";
-import styled40 from "styled-components";
+import styled41 from "styled-components";
 
 // src/components/ColorPicker/ValueSwatch.tsx
-import { jsx as jsx237 } from "react/jsx-runtime";
+import { jsx as jsx238 } from "react/jsx-runtime";
 var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsx237(ColorSwatch, { value: valueAsHex });
+  return /* @__PURE__ */ jsx238(ColorSwatch, { value: valueAsHex });
 };
 ValueSwatch.displayName = "ValueSwatch_UI";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
-import { jsx as jsx238 } from "react/jsx-runtime";
+import { jsx as jsx239 } from "react/jsx-runtime";
 var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ jsx238(ColorNameOrHexCode, { hexCode: valueAsHex });
+  return /* @__PURE__ */ jsx239(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
 ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
-import { jsx as jsx239, jsxs as jsxs25 } from "react/jsx-runtime";
-var StyledPopoverTrigger = styled40(PopoverTrigger)`
+import { jsx as jsx240, jsxs as jsxs26 } from "react/jsx-runtime";
+var StyledPopoverTrigger = styled41(PopoverTrigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
@@ -10563,7 +10637,7 @@ var StyledPopoverTrigger = styled40(PopoverTrigger)`
     background-color: var(--wui-color-bg-surface-hover);
   }
 `;
-var DefaultTriggerContentContainer = styled40.div`
+var DefaultTriggerContentContainer = styled41.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -10571,19 +10645,19 @@ var DefaultTriggerContentContainer = styled40.div`
   padding-right: var(--wui-space-01);
 `;
 var DefaultTriggerContent = () => {
-  return /* @__PURE__ */ jsxs25(DefaultTriggerContentContainer, { children: [
-    /* @__PURE__ */ jsx239(ValueSwatch, {}),
-    /* @__PURE__ */ jsx239(ValueNameOrHexCode, {})
+  return /* @__PURE__ */ jsxs26(DefaultTriggerContentContainer, { children: [
+    /* @__PURE__ */ jsx240(ValueSwatch, {}),
+    /* @__PURE__ */ jsx240(ValueNameOrHexCode, {})
   ] });
 };
 var ColorPickerTrigger = forwardRef13(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsx239(
+    return /* @__PURE__ */ jsx240(
       StyledPopoverTrigger,
       {
         ref: forwardedRef,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx239(DefaultTriggerContent, {})
+        children: children ?? /* @__PURE__ */ jsx240(DefaultTriggerContent, {})
       }
     );
   }
@@ -10591,9 +10665,9 @@ var ColorPickerTrigger = forwardRef13(
 ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
-import styled41 from "styled-components";
-import { jsx as jsx240, jsxs as jsxs26 } from "react/jsx-runtime";
-var Container6 = styled41.div`
+import styled42 from "styled-components";
+import { jsx as jsx241, jsxs as jsxs27 } from "react/jsx-runtime";
+var Container7 = styled42.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -10605,8 +10679,8 @@ var floorToTenth = (value) => {
 var ContrastIndicator = () => {
   const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
   const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
-  const label = /* @__PURE__ */ jsxs26("div", { children: [
-    /* @__PURE__ */ jsx240(
+  const label = /* @__PURE__ */ jsxs27("div", { children: [
+    /* @__PURE__ */ jsx241(
       Text,
       {
         renderAs: "span",
@@ -10615,7 +10689,7 @@ var ContrastIndicator = () => {
       }
     ),
     " ",
-    /* @__PURE__ */ jsxs26(
+    /* @__PURE__ */ jsxs27(
       Text,
       {
         renderAs: "span",
@@ -10627,19 +10701,19 @@ var ContrastIndicator = () => {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx240(Container6, { children: isContrastSufficient ? /* @__PURE__ */ jsx240(
+  return /* @__PURE__ */ jsx241(Container7, { children: isContrastSufficient ? /* @__PURE__ */ jsx241(
     Badge,
     {
       colorScheme: "success",
-      icon: /* @__PURE__ */ jsx240(Icon, { type: "checkmark" }),
+      icon: /* @__PURE__ */ jsx241(Icon, { type: "checkmark" }),
       label,
       variant: "outline"
     }
-  ) : /* @__PURE__ */ jsx240(
+  ) : /* @__PURE__ */ jsx241(
     Badge,
     {
       colorScheme: "warning",
-      icon: /* @__PURE__ */ jsx240(Icon, { type: "error" }),
+      icon: /* @__PURE__ */ jsx241(Icon, { type: "error" }),
       label,
       variant: "outline"
     }
@@ -10651,10 +10725,10 @@ import { useCallback as useCallback12 } from "react";
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef14, useId as useId3 } from "react";
-import styled42, { css as css26 } from "styled-components";
+import styled43, { css as css27 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx241, jsxs as jsxs27 } from "react/jsx-runtime";
-var sizeSmall2 = css26`
+import { jsx as jsx242, jsxs as jsxs28 } from "react/jsx-runtime";
+var sizeSmall2 = css27`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -10669,7 +10743,7 @@ var sizeSmall2 = css26`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium2 = css26`
+var sizeMedium2 = css27`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -10684,7 +10758,7 @@ var sizeMedium2 = css26`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge2 = css26`
+var sizeLarge2 = css27`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -10704,14 +10778,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledSwitchWrapper = styled42.div`
+var StyledSwitchWrapper = styled43.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = styled42.div`
+var StyledSwitchInput = styled43.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10739,7 +10813,7 @@ var StyledSwitchInput = styled42.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = styled42.input`
+var StyledHiddenSwitchInput = styled43.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color and toggle position */
@@ -10773,8 +10847,8 @@ var Switch = forwardRef14(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ jsxs27(StyledSwitchWrapper, { $disabled: disabled, children: [
-      /* @__PURE__ */ jsx241(
+    return /* @__PURE__ */ jsxs28(StyledSwitchWrapper, { $disabled: disabled, children: [
+      /* @__PURE__ */ jsx242(
         StyledHiddenSwitchInput,
         {
           ...props,
@@ -10789,11 +10863,11 @@ var Switch = forwardRef14(
           value
         }
       ),
-      /* @__PURE__ */ jsx241(
+      /* @__PURE__ */ jsx242(
         FormControlLabel,
         {
           align,
-          controlSlot: /* @__PURE__ */ jsx241(
+          controlSlot: /* @__PURE__ */ jsx242(
             StyledSwitchInput,
             {
               $disabled: disabled,
@@ -10815,7 +10889,7 @@ var Switch = forwardRef14(
 Switch.displayName = "Switch_UI";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
-import { jsx as jsx242 } from "react/jsx-runtime";
+import { jsx as jsx243 } from "react/jsx-runtime";
 var ContrastEnforcerSwitch = () => {
   const { setShouldEnforceMinContrast, shouldEnforceMinContrast, hasAccessibleDerivatives: hasAccessibleDerivatives2 } = useColorPickerState();
   const onChangeContrastLimitedSwitch = useCallback12(
@@ -10831,48 +10905,48 @@ var ContrastEnforcerSwitch = () => {
   if (!hasAccessibleDerivatives2) {
     return null;
   }
-  return /* @__PURE__ */ jsx242(
+  return /* @__PURE__ */ jsx243(
     Switch,
     {
       align: "right",
       checked: shouldEnforceMinContrast,
-      label: /* @__PURE__ */ jsx242(Text, { variant: "label3", children: "Limit to high-contrast colors" }),
+      label: /* @__PURE__ */ jsx243(Text, { variant: "label3", children: "Limit to high-contrast colors" }),
       onChange: onChangeContrastLimitedSwitch
     }
   );
 };
 
 // src/components/ColorPicker/ContrastPreview.tsx
-import { jsx as jsx243 } from "react/jsx-runtime";
+import { jsx as jsx244 } from "react/jsx-runtime";
 var ContrastPreview = () => {
   const { valueAsHex, colorForComparison } = useColorPickerState();
-  return /* @__PURE__ */ jsx243(
+  return /* @__PURE__ */ jsx244(
     ColorSwatch,
     {
       diameterPx: 36,
       value: valueAsHex,
-      children: /* @__PURE__ */ jsx243(Text, { style: { color: colorForComparison }, children: "Aa" })
+      children: /* @__PURE__ */ jsx244(Text, { style: { color: colorForComparison }, children: "Aa" })
     }
   );
 };
 
 // src/components/ColorPicker/ContrastControls.tsx
-import { jsx as jsx244, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs29 } from "react/jsx-runtime";
 var ContrastControls = () => {
-  return /* @__PURE__ */ jsxs28(ColorPickerSection, { children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(ColorPickerSection, { children: [
+    /* @__PURE__ */ jsxs29(
       Box,
       {
         alignItems: "center",
         direction: "row",
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ jsx244(ContrastPreview, {}),
-          /* @__PURE__ */ jsx244(ContrastIndicator, {})
+          /* @__PURE__ */ jsx245(ContrastPreview, {}),
+          /* @__PURE__ */ jsx245(ContrastIndicator, {})
         ]
       }
     ),
-    /* @__PURE__ */ jsx244(ContrastEnforcerSwitch, {})
+    /* @__PURE__ */ jsx245(ContrastEnforcerSwitch, {})
   ] });
 };
 ContrastControls.displayName = "ContrastControls_UI";
@@ -10883,12 +10957,12 @@ import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef9 } from "react";
-import styled43, { css as css28 } from "styled-components";
+import styled44, { css as css29 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil18, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/inputCss.ts
-import { css as css27 } from "styled-components";
-var inputCss = css27`
+import { css as css28 } from "styled-components";
+var inputCss = css28`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -10914,8 +10988,8 @@ var inputCss = css27`
 `;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx245, jsxs as jsxs29 } from "react/jsx-runtime";
-var inputStyles = css28`
+import { jsx as jsx246, jsxs as jsxs30 } from "react/jsx-runtime";
+var inputStyles = css29`
   ${inputCss}
   input,
   textarea {
@@ -10950,7 +11024,7 @@ var inputStyles = css28`
     }
   }
 `;
-var StyledInputContainer = styled43.div`
+var StyledInputContainer = styled44.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -11031,7 +11105,7 @@ var Input = forwardRef15(
     const ref = isNotNil18(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil13(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx245(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx246(Icon, { type: "search" });
     }
     if (isNotNil18(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
@@ -11056,21 +11130,21 @@ var Input = forwardRef15(
         });
       }
     };
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx245(
+          type === "multiline" ? /* @__PURE__ */ jsx246(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ jsx245(
+          ) : /* @__PURE__ */ jsx246(
             "input",
             {
               ...props,
@@ -11088,7 +11162,7 @@ var Input = forwardRef15(
 Input.displayName = "Input_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-import { jsx as jsx246 } from "react/jsx-runtime";
+import { jsx as jsx247 } from "react/jsx-runtime";
 var SIX_DIGIT_HEX_CODE_LENGTH = 7;
 var isValidHexChar = (char) => {
   return /^[0-9a-fA-F]$/.test(char);
@@ -11228,7 +11302,7 @@ var HexColorInput = ({ autoFocus = true }) => {
   useEffect11(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
-  return /* @__PURE__ */ jsx246(
+  return /* @__PURE__ */ jsx247(
     Input,
     {
       ref: inputRef,
@@ -11257,15 +11331,15 @@ import {
   Track as SliderTrack,
   Thumb as SliderThumb
 } from "@radix-ui/react-slider";
-import styled45 from "styled-components";
+import styled46 from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 import { useEffect as useEffect12, useRef as useRef11 } from "react";
-import styled44 from "styled-components";
+import styled45 from "styled-components";
 import { formatHex as formatHex5 } from "culori/fn";
-import { jsx as jsx247 } from "react/jsx-runtime";
-var Canvas = styled44.canvas`
+import { jsx as jsx248 } from "react/jsx-runtime";
+var Canvas = styled45.canvas`
   display: block;
   height: 100%;
   width: 100%;
@@ -11293,7 +11367,7 @@ var HSVHueCanvas = ({ hsv }) => {
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, width, height);
   }, [hsv.s, hsv.v]);
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx248(
     Canvas,
     {
       ref: canvasRef,
@@ -11303,9 +11377,9 @@ var HSVHueCanvas = ({ hsv }) => {
 };
 
 // src/components/ColorPicker/HueSlider.tsx
-import { jsx as jsx248, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs31 } from "react/jsx-runtime";
 var TWENTY_FOUR = 24;
-var Container7 = styled45.div`
+var Container8 = styled46.div`
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
   height: ${TWENTY_FOUR}px;
@@ -11313,7 +11387,7 @@ var Container7 = styled45.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-var Root = styled45(SliderRoot)`
+var Root = styled46(SliderRoot)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -11322,11 +11396,11 @@ var Root = styled45(SliderRoot)`
   width: calc(100% - var(--wui-space-05));
   height: 16px;
 `;
-var Track = styled45(SliderTrack)`
+var Track = styled46(SliderTrack)`
   width: 100%;
 `;
-var Thumb = styled45(SliderThumb)``;
-var ThumbInner = styled45.div`
+var Thumb = styled46(SliderThumb)``;
+var ThumbInner = styled46.div`
   cursor: pointer;
   display: block;
   border-radius: var(--wui-border-radius-rounded);
@@ -11370,8 +11444,8 @@ var HueSlider = () => {
     },
     [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ jsxs30(Container7, { style: containerStyle, children: [
-    /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(Container8, { style: containerStyle, children: [
+    /* @__PURE__ */ jsxs31(
       Root,
       {
         max: THREE_SIXTY,
@@ -11381,23 +11455,23 @@ var HueSlider = () => {
         step: 1,
         value: [nonDerivedValueAsHsv.h ?? 0],
         children: [
-          /* @__PURE__ */ jsx248(Track, {}),
-          /* @__PURE__ */ jsx248(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ jsx248(ThumbInner, { style: thumbInnerStyle }) })
+          /* @__PURE__ */ jsx249(Track, {}),
+          /* @__PURE__ */ jsx249(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ jsx249(ThumbInner, { style: thumbInnerStyle }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx248(HSVHueCanvas, { hsv: valueAsHsv })
+    /* @__PURE__ */ jsx249(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
 HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
-import styled47 from "styled-components";
+import styled48 from "styled-components";
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
-import styled46 from "styled-components";
+import styled47 from "styled-components";
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -11426,8 +11500,8 @@ var drawSmoothCurve = (context, points) => {
 };
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
-import { jsx as jsx249 } from "react/jsx-runtime";
-var Canvas2 = styled46.canvas`
+import { jsx as jsx250 } from "react/jsx-runtime";
+var Canvas2 = styled47.canvas`
   display: block;
   width: 100%;
 `;
@@ -11534,7 +11608,7 @@ var HSVSaturationValueCanvas = ({
     colorForComparison,
     opacityForContrastCalculation
   ]);
-  return /* @__PURE__ */ jsx249(
+  return /* @__PURE__ */ jsx250(
     Canvas2,
     {
       ref: canvasRef,
@@ -11545,16 +11619,16 @@ var HSVSaturationValueCanvas = ({
 };
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-import { jsx as jsx250, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx251, jsxs as jsxs32 } from "react/jsx-runtime";
 var SATURATION_NUDGE = 0.02;
 var VALUE_NUDGE = 0.02;
-var Container8 = styled47.div`
+var Container9 = styled48.div`
   border-radius: var(--wui-border-radius-02);
   box-shadow: 0 0 0 1px var(--wui-color-border);
   overflow: hidden;
   position: relative;
 `;
-var Thumb2 = styled47.button.attrs({ type: "button" })`
+var Thumb2 = styled48.button.attrs({ type: "button" })`
   appearance: none;
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -11714,14 +11788,14 @@ var SaturationAndValuePicker = ({
   }, [onWindowMouseMove, onWindowMouseUp]);
   return (
     // eslint-disable-next-line styled-components-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxs31(
-      Container8,
+    /* @__PURE__ */ jsxs32(
+      Container9,
       {
         ref: containerRef,
         "data-testid": dataTestId,
         onMouseDown: onContainerMouseDown,
         children: [
-          /* @__PURE__ */ jsx250(
+          /* @__PURE__ */ jsx251(
             Thumb2,
             {
               ref: thumbRef,
@@ -11733,7 +11807,7 @@ var SaturationAndValuePicker = ({
               tabIndex: 0
             }
           ),
-          /* @__PURE__ */ jsx250(
+          /* @__PURE__ */ jsx251(
             HSVSaturationValueCanvas,
             {
               colorForComparison,
@@ -11743,8 +11817,8 @@ var SaturationAndValuePicker = ({
               shouldShowContrastCurve: shouldEnforceMinContrast
             }
           ),
-          /* @__PURE__ */ jsx250(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
-          /* @__PURE__ */ jsxs31(ScreenReaderOnly, { "aria-live": "polite", children: [
+          /* @__PURE__ */ jsx251(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
+          /* @__PURE__ */ jsxs32(ScreenReaderOnly, { "aria-live": "polite", children: [
             "Current color: ",
             valueAsHex,
             ". Hue: ",
@@ -11775,14 +11849,14 @@ import {
   isValidElement as isValidElement2
 } from "react";
 import { matchSorter } from "match-sorter";
-import styled49 from "styled-components";
+import styled50 from "styled-components";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled48 from "styled-components";
+import styled49 from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment6, jsx as jsx251, jsxs as jsxs32 } from "react/jsx-runtime";
-var TagLabel = styled48.a`
+import { Fragment as Fragment6, jsx as jsx252, jsxs as jsxs33 } from "react/jsx-runtime";
+var TagLabel = styled49.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -11817,14 +11891,14 @@ var TagLabel = styled48.a`
     background: var(--wui-color-bg-surface-secondary-active);
   }
 `;
-var TagDivider = styled48.div`
+var TagDivider = styled49.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled48.button`
+var StyledRemoveButton = styled49.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11852,7 +11926,7 @@ var StyledRemoveButton = styled48.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled48.div`
+var StyledTag = styled49.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11873,23 +11947,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs32(Fragment6, { children: [
-    /* @__PURE__ */ jsx251(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(Fragment6, { children: [
+    /* @__PURE__ */ jsx252(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs33(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx251(
+          /* @__PURE__ */ jsx252(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx251(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx252(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -11899,14 +11973,14 @@ var Tag = forwardRef16(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil19(icon);
     const labelProps = isNotNil19(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs32(
+          /* @__PURE__ */ jsxs33(
             TagLabel,
             {
               ...labelProps,
@@ -11917,7 +11991,7 @@ var Tag = forwardRef16(
               ]
             }
           ),
-          /* @__PURE__ */ jsx251(
+          /* @__PURE__ */ jsx252(
             RemoveButton,
             {
               colorScheme,
@@ -11933,8 +12007,8 @@ var Tag = forwardRef16(
 Tag.displayName = "Tag_UI";
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx252, jsxs as jsxs33 } from "react/jsx-runtime";
-var ComboboxWapper = styled49.div`
+import { jsx as jsx253, jsxs as jsxs34 } from "react/jsx-runtime";
+var ComboboxWapper = styled50.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -11983,7 +12057,7 @@ var ComboboxWapper = styled49.div`
     }
   }
 `;
-var ComboboxInput = styled49(Ariakit.Combobox)`
+var ComboboxInput = styled50(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -11998,7 +12072,7 @@ var ComboboxInput = styled49(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = styled49(Ariakit.Popover)`
+var ComboboxPopover = styled50(Ariakit.Popover)`
   --wui-combobox-content-border: var(--wui-color-border);
   --wui-combobox-content-bg: var(--wui-color-bg-surface);
   --wui-combobox-content-border-radius: var(--wui-border-radius-02);
@@ -12023,7 +12097,7 @@ var ComboboxPopover = styled49(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = styled49(Ariakit.ComboboxItem)`
+var ComboboxItem2 = styled50(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -12048,12 +12122,12 @@ var ComboboxItem2 = styled49(Ariakit.ComboboxItem)`
     background-color: transparent;
   }
 `;
-var NoResults = styled49.div`
+var NoResults = styled50.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
 var ComboboxOption = ({ value, children }) => {
-  return /* @__PURE__ */ jsx252(
+  return /* @__PURE__ */ jsx253(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -12106,7 +12180,7 @@ var Combobox2 = ({
   const matches = useMemo11(() => {
     return matchSorter(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     Ariakit.ComboboxProvider,
     {
       selectedValue: value,
@@ -12117,13 +12191,13 @@ var Combobox2 = ({
         });
       },
       children: [
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs34(
           ComboboxWapper,
           {
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ jsx252(
+              value.map((selectedValue) => /* @__PURE__ */ jsx253(
                 Tag,
                 {
                   href: "https://example.com",
@@ -12133,11 +12207,11 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ jsx252(ComboboxInput, { placeholder })
+              /* @__PURE__ */ jsx253(ComboboxInput, { placeholder })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs34(
           ComboboxPopover,
           {
             "aria-busy": isPending,
@@ -12147,14 +12221,14 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ jsxs33(
+              matches.map((match) => /* @__PURE__ */ jsxs34(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ jsx252(
+                    /* @__PURE__ */ jsx253(
                       Icon,
                       {
                         size: "sm",
@@ -12169,7 +12243,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ jsx252(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ jsx253(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -12180,10 +12254,10 @@ var Combobox2 = ({
 
 // src/components/DataCards/DataCard.tsx
 import { useRef as useRef15 } from "react";
-import styled50, { keyframes as keyframes2 } from "styled-components";
+import styled51, { keyframes as keyframes2 } from "styled-components";
 import { isNotNil as isNotNil20 } from "@wistia/type-guards";
-import { jsx as jsx253, jsxs as jsxs34 } from "react/jsx-runtime";
-var StyledDataCard = styled50.div`
+import { jsx as jsx254, jsxs as jsxs35 } from "react/jsx-runtime";
+var StyledDataCard = styled51.div`
   --wui-data-card-text: var(--wui-color-text-button);
   --wui-color-text: var(--wui-data-card-text);
   --wui-data-card-background: var(--wui-color-bg-surface-secondary);
@@ -12265,7 +12339,7 @@ var shimmer = keyframes2`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled50.div`
+var LoadingBackground = styled51.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -12276,32 +12350,32 @@ var LoadingBackground = styled50.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled50(LoadingBackground)`
+var StyledLoadingLabel = styled51(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled50(LoadingBackground)`
+var StyledLoadingValue = styled51(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = styled50(Heading)`
+var StyledLabel3 = styled51(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled50(Heading)`
+var StyledValue = styled51(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled50.div`
+var StyledSlot = styled51.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled50.div`
+var StyledDataCardTrendContainer = styled51.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = styled50(Text)`
+var StyledSubtitle = styled51(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -12313,30 +12387,30 @@ var DataCardInner = ({
   trend,
   subtitle,
   ...props
-}) => /* @__PURE__ */ jsxs34(
+}) => /* @__PURE__ */ jsxs35(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx253(
-        StyledLabel2,
+      /* @__PURE__ */ jsx254(
+        StyledLabel3,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx253(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx254(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx253(
+      /* @__PURE__ */ jsx254(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx253(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx254(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNil20(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx253(StyledSlot, { children: upperRightSlot }),
-      isNotNil20(subtitle) && !isLoading && /* @__PURE__ */ jsx253(
+      isNotNil20(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx254(StyledSlot, { children: upperRightSlot }),
+      isNotNil20(subtitle) && !isLoading && /* @__PURE__ */ jsx254(
         StyledSubtitle,
         {
           "data-wui-data-card-subtitle": true,
@@ -12344,7 +12418,7 @@ var DataCardInner = ({
           children: subtitle
         }
       ),
-      isNotNil20(trend) && !isLoading && /* @__PURE__ */ jsx253(StyledDataCardTrendContainer, { children: trend })
+      isNotNil20(trend) && !isLoading && /* @__PURE__ */ jsx254(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -12352,12 +12426,12 @@ var DataCard = (props) => {
   const ref = useRef15(null);
   if (isNotNil20(props.href) || isNotNil20(props.onClick)) {
     const { "aria-pressed": ariaPressed, ...dataCardProps } = props;
-    return /* @__PURE__ */ jsx253(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx253(
+    return /* @__PURE__ */ jsx254(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx254(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot,
         ...dataCardProps,
-        label: /* @__PURE__ */ jsx253(
+        label: /* @__PURE__ */ jsx254(
           Button,
           {
             ref,
@@ -12374,14 +12448,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx253(DataCardInner, { ...props });
+  return /* @__PURE__ */ jsx254(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-import styled51 from "styled-components";
-import { jsx as jsx254 } from "react/jsx-runtime";
-var StyledDataCards = styled51(Box)`
+import styled52 from "styled-components";
+import { jsx as jsx255 } from "react/jsx-runtime";
+var StyledDataCards = styled52(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -12395,7 +12469,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx254(
+  return /* @__PURE__ */ jsx255(
     StyledDataCards,
     {
       ...props,
@@ -12414,9 +12488,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled52 from "styled-components";
-import { jsx as jsx255, jsxs as jsxs35 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled52.div`
+import styled53 from "styled-components";
+import { jsx as jsx256, jsxs as jsxs36 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled53.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -12431,8 +12505,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs35(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx255(
+  return /* @__PURE__ */ jsxs36(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ jsx256(
       Icon,
       {
         size: "md",
@@ -12440,7 +12514,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx255(
+    /* @__PURE__ */ jsx256(
       Text,
       {
         prominence: "secondary",
@@ -12452,15 +12526,15 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-import styled53 from "styled-components";
-import { jsx as jsx256 } from "react/jsx-runtime";
-var StyledIconContainer = styled53.div`
+import styled54 from "styled-components";
+import { jsx as jsx257 } from "react/jsx-runtime";
+var StyledIconContainer = styled54.div`
   display: flex;
   align-items: center;
   align-self: center;
   height: 0;
 `;
-var DataCardHoverArrow = () => /* @__PURE__ */ jsx256(StyledIconContainer, { children: /* @__PURE__ */ jsx256(
+var DataCardHoverArrow = () => /* @__PURE__ */ jsx257(StyledIconContainer, { children: /* @__PURE__ */ jsx257(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -12470,22 +12544,22 @@ var DataCardHoverArrow = () => /* @__PURE__ */ jsx256(StyledIconContainer, { chi
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/Divider/Divider.tsx
-import styled54, { css as css29 } from "styled-components";
-import { jsx as jsx257 } from "react/jsx-runtime";
-var horizontalBorderCss = css29`
+import styled55, { css as css30 } from "styled-components";
+import { jsx as jsx258 } from "react/jsx-runtime";
+var horizontalBorderCss = css30`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = css29`
+var verticalBorderCss = css30`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled54.div`
+var DividerComponent = styled55.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -12497,7 +12571,7 @@ var DividerComponent = styled54.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ jsx257(
+  return /* @__PURE__ */ jsx258(
     DividerComponent,
     {
       $orientation: orientation,
@@ -12510,10 +12584,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled55, { css as css30 } from "styled-components";
+import styled56, { css as css31 } from "styled-components";
 import { useState as useState16, useRef as useRef16 } from "react";
-import { Fragment as Fragment7, jsx as jsx258, jsxs as jsxs36 } from "react/jsx-runtime";
-var StyledInput = styled55(Input)`
+import { Fragment as Fragment7, jsx as jsx259, jsxs as jsxs37 } from "react/jsx-runtime";
+var StyledInput = styled56(Input)`
   &:not([rows]) {
     min-height: unset;
   }
@@ -12533,7 +12607,7 @@ var StyledInput = styled55(Input)`
     min-height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = css30`
+var editableStyles = css31`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -12543,7 +12617,7 @@ var editableStyles = css30`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled55(Heading)`
+var StyledHeading2 = styled56(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -12598,7 +12672,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx258(
+  const HeadingComponent2 = /* @__PURE__ */ jsx259(
     StyledHeading2,
     {
       ref: headingRef,
@@ -12612,7 +12686,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ jsx258(
+    return /* @__PURE__ */ jsx259(
       StyledInput,
       {
         $height: headingHeight,
@@ -12631,9 +12705,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs36(Fragment7, { children: [
-    /* @__PURE__ */ jsx258(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ jsx258(ScreenReaderOnly, { children: /* @__PURE__ */ jsx258(
+  return /* @__PURE__ */ jsxs37(Fragment7, { children: [
+    /* @__PURE__ */ jsx259(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx259(ScreenReaderOnly, { children: /* @__PURE__ */ jsx259(
       "button",
       {
         "aria-label": ariaLabel,
@@ -12683,9 +12757,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext5, useRef as useRef17 } from "react";
 import { isArray as isArray2, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
-import { jsx as jsx259, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx260, jsxs as jsxs38 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx259("li", { children: /* @__PURE__ */ jsx259(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx260("li", { children: /* @__PURE__ */ jsx260(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef17(null);
@@ -12694,10 +12768,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs37("div", { ref, children: [
-    /* @__PURE__ */ jsx259("p", { children: description }),
-    /* @__PURE__ */ jsx259("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined9(error)).map(
-      ([name, error]) => isArray2(error) ? error.map((err) => /* @__PURE__ */ jsx259(
+  return /* @__PURE__ */ jsxs38("div", { ref, children: [
+    /* @__PURE__ */ jsx260("p", { children: description }),
+    /* @__PURE__ */ jsx260("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined9(error)).map(
+      ([name, error]) => isArray2(error) ? error.map((err) => /* @__PURE__ */ jsx260(
         ErrorItem,
         {
           error: err,
@@ -12705,7 +12779,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx259(
+      )) : /* @__PURE__ */ jsx260(
         ErrorItem,
         {
           error: error ?? "",
@@ -12722,69 +12796,7 @@ var FormErrorSummary = ({ description }) => {
 import { Children as Children6, cloneElement as cloneElement5, useContext as useContext6 } from "react";
 import styled57 from "styled-components";
 import { isArray as isArray3, isNotNil as isNotNil21, isNotUndefined as isNotUndefined10, isUndefined as isUndefined4 } from "@wistia/type-guards";
-
-// src/components/Label/Label.tsx
-import styled56, { css as css31 } from "styled-components";
-import { jsx as jsx260 } from "react/jsx-runtime";
-var requiredStyle = css31`
-  &::after {
-    color: var(--wui-color-text-error);
-    display: inline;
-    padding-left: var(--wui-space-01);
-    content: '*';
-  }
-`;
-var disabledStyle3 = css31`
-  color: var(--wui-color-text-disabled);
-`;
-var StyledLabel3 = styled56.label`
-  display: block;
-  width: 100%;
-  color: var(--wui-color-text);
-  font-family: var(--wui-typography-heading-6-family);
-  line-height: var(--wui-typography-heading-6-line-height);
-  font-size: var(--wui-typography-heading-6-size);
-  font-weight: var(--wui-typography-heading-6-weight);
-
-  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
-  > input,
-  > textarea,
-  > select {
-    display: block;
-  }
-
-  > label {
-    font-weight: normal;
-  }
-
-  ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ $disabled }) => $disabled && disabledStyle3}
-  ${({ $required }) => $required && requiredStyle}
-`;
-var Label = ({
-  children,
-  disabled = false,
-  htmlFor,
-  required = false,
-  screenReaderOnly = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx260(
-    StyledLabel3,
-    {
-      ...props,
-      $disabled: disabled,
-      $required: required,
-      $screenReaderOnly: screenReaderOnly,
-      htmlFor,
-      children
-    }
-  );
-};
-Label.displayName = "Label_UI";
-
-// src/components/FormField/FormField.tsx
-import { Fragment as Fragment8, jsx as jsx261, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx261, jsxs as jsxs39 } from "react/jsx-runtime";
 var StyledFormField = styled57.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
@@ -12916,7 +12928,7 @@ var FormField = ({
     };
   }
   Children6.only(children);
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     StyledFormField,
     {
       ...props,
@@ -12925,7 +12937,7 @@ var FormField = ({
         !isIntegratedLabel && /* @__PURE__ */ jsx261(Label, { htmlFor: computedId, children: label }),
         isNotNil21(description) ? /* @__PURE__ */ jsx261(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
-        isNotNil21(computedError) ? /* @__PURE__ */ jsxs38(Fragment8, { children: [
+        isNotNil21(computedError) ? /* @__PURE__ */ jsxs39(Fragment8, { children: [
           /* @__PURE__ */ jsx261("div", {}),
           /* @__PURE__ */ jsx261(
             ErrorMessages,
@@ -13110,7 +13122,7 @@ InputClickToCopy.displayName = "InputClickToCopy_UI";
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 import styled60 from "styled-components";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
-import { jsx as jsx265, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx265, jsxs as jsxs40 } from "react/jsx-runtime";
 var StyledKeyboardShortcut = styled60.div`
   align-items: center;
   display: flex;
@@ -13197,7 +13209,7 @@ var KeyboardShortcut = ({
   keyboardKeys,
   fullWidth = false,
   ...otherProps
-}) => /* @__PURE__ */ jsxs39(
+}) => /* @__PURE__ */ jsxs40(
   StyledKeyboardShortcut,
   {
     $fullWidth: fullWidth,
@@ -13236,7 +13248,7 @@ var ListItem = ({ children }) => {
 ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
-import { jsx as jsx267, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx267, jsxs as jsxs41 } from "react/jsx-runtime";
 var spacesStyle = css33`
   overflow: hidden;
   padding-left: 0;
@@ -13339,7 +13351,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     const nextItem = listItems[i + 1];
     const key = `item-${itemCount += 1}`;
     if (Array.isArray(nextItem)) {
-      return /* @__PURE__ */ jsxs40(ListItem, { children: [
+      return /* @__PURE__ */ jsxs41(ListItem, { children: [
         item,
         renderListFromArray(nextItem, variant, otherProps)
       ] }, key);
@@ -13391,7 +13403,7 @@ var MenuContext = createContext7({ compact: false });
 var useMenuContext = () => useContext8(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx268, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx268, jsxs as jsxs42 } from "react/jsx-runtime";
 var open = keyframes3`
   from {
     opacity: 0;
@@ -13504,7 +13516,7 @@ var Menu = forwardRef19(
         onOpenChange: () => null
       };
     }
-    return /* @__PURE__ */ jsx268(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs41(
+    return /* @__PURE__ */ jsx268(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs42(
       DropdownMenu,
       {
         modal: false,
@@ -13589,7 +13601,7 @@ import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 import { forwardRef as forwardRef20 } from "react";
 import styled65 from "styled-components";
 import { isNotNil as isNotNil25, isNotUndefined as isNotUndefined12 } from "@wistia/type-guards";
-import { jsx as jsx270, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs43 } from "react/jsx-runtime";
 var StyledButton3 = styled65(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
@@ -13684,7 +13696,7 @@ var MenuItemButton = forwardRef20(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     StyledButton3,
     {
       ...props,
@@ -13724,7 +13736,7 @@ var MenuItemDescription = ({ children }) => {
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx272, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs44 } from "react/jsx-runtime";
 var SubMenuContent = styled67(DropdownMenuSubContent)`
   ${menuContentCss}
 
@@ -13765,14 +13777,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState19(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs43(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs43(SubMenuTrigger, { ...props, children: [
+  return isSmAndUp ? /* @__PURE__ */ jsxs44(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs44(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx272(MenuItemLabel, { children: label }),
       isNotNil26(description) ? /* @__PURE__ */ jsx272(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx272(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx272(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs43(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs43(
+  ] }) : /* @__PURE__ */ jsxs44(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs44(
       SubMenuTrigger,
       {
         ...props,
@@ -13869,9 +13881,9 @@ import {
   DropdownMenuItemIndicator as DropdownMenuItemIndicator2
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsx as jsx276, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx276, jsxs as jsxs45 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs44(
+  return checked ? /* @__PURE__ */ jsxs45(
     "svg",
     {
       ...props,
@@ -13897,7 +13909,7 @@ var CheckboxIndicator = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs44(
+  ) : /* @__PURE__ */ jsxs45(
     "svg",
     {
       ...props,
@@ -13954,11 +13966,11 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 // src/components/Menu/FilterMenu.tsx
 import { Children as Children7, forwardRef as forwardRef22 } from "react";
 import { DropdownMenuItem as DropdownMenuItem3 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx277, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx277, jsxs as jsxs46 } from "react/jsx-runtime";
 var FilterMenuItem = CheckboxMenuItem;
 var FilterMenu = forwardRef22(
   ({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs46(
       Menu,
       {
         ...props,
@@ -14083,7 +14095,7 @@ var ModalCloseButton = () => {
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx279, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx279, jsxs as jsxs47 } from "react/jsx-runtime";
 var Header = styled69.header`
   display: flex;
   order: 1;
@@ -14107,7 +14119,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleComponent = hideTitle ? /* @__PURE__ */ jsx279(ScreenReaderOnly, { children: /* @__PURE__ */ jsx279(Title, { children: title }) }) : /* @__PURE__ */ jsx279(Title, { children: title });
-  return /* @__PURE__ */ jsxs46(Header, { $hideTitle: hideTitle, children: [
+  return /* @__PURE__ */ jsxs47(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
     hideCloseButton ? null : /* @__PURE__ */ jsx279(ModalCloseButton, {})
   ] });
@@ -14315,7 +14327,7 @@ var ModalOverlay = styled71(DialogOverlay)`
 `;
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx281, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx281, jsxs as jsxs48 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
 var ModalBody = styled72.div`
   flex-direction: column;
@@ -14345,9 +14357,9 @@ var Modal = forwardRef24(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs47(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs48(DialogPortal, { children: [
           /* @__PURE__ */ jsx281(ModalOverlay, {}),
-          /* @__PURE__ */ jsxs47(
+          /* @__PURE__ */ jsxs48(
             ModalContent,
             {
               ref,
@@ -14395,7 +14407,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
 import styled73, { css as css36, keyframes as keyframes6 } from "styled-components";
-import { jsx as jsx282, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx282, jsxs as jsxs49 } from "react/jsx-runtime";
 var StyledPath = styled73.path`
   fill: var(--wui-color-border-secondary);
 `;
@@ -14434,7 +14446,7 @@ var StyledCircle = styled73.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx282(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsx282(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs49(
     "svg",
     {
       fill: "none",
@@ -14473,7 +14485,7 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx283, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx283, jsxs as jsxs50 } from "react/jsx-runtime";
 var StyledContent2 = styled74(Content2)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -14513,9 +14525,9 @@ var Popover2 = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs49(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
+  return /* @__PURE__ */ jsxs50(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
     /* @__PURE__ */ jsx283(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx283(Portal, { children: /* @__PURE__ */ jsxs49(
+    /* @__PURE__ */ jsx283(Portal, { children: /* @__PURE__ */ jsxs50(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -14546,7 +14558,7 @@ Popover2.displayName = "Popover_UI";
 import styled75 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil31 } from "@wistia/type-guards";
-import { jsx as jsx284, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx284, jsxs as jsxs51 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled75.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
@@ -14599,7 +14611,7 @@ var ProgressBar = ({
   labelRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs50(ProgressBarWrapper, { children: [
+  return /* @__PURE__ */ jsxs51(ProgressBarWrapper, { children: [
     isNotNil31(labelLeft) ? /* @__PURE__ */ jsx284(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx284(
       StyledProgressBar,
@@ -14625,7 +14637,7 @@ ProgressBar.displayName = "ProgressBar_UI";
 import { forwardRef as forwardRef25, useId as useId4 } from "react";
 import styled76, { css as css38 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString6, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
-import { jsx as jsx285, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx285, jsxs as jsxs52 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx285(
   "svg",
   {
@@ -14749,7 +14761,7 @@ var Radio = forwardRef25(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const defaultChecked = isNotUndefined13(value) && isNotUndefined13(contextValue) ? contextValue.includes(value) : void 0;
-    return /* @__PURE__ */ jsxs51(
+    return /* @__PURE__ */ jsxs52(
       StyledRadioWrapper,
       {
         $disabled: disabled,
@@ -14803,7 +14815,7 @@ import { forwardRef as forwardRef27 } from "react";
 import { forwardRef as forwardRef26, useId as useId5 } from "react";
 import styled77, { css as css39 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
-import { jsx as jsx286, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx286, jsxs as jsxs53 } from "react/jsx-runtime";
 var checkedStyles = css39`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
   --wui-color-icon: var(--wui-color-icon-selected);
@@ -14931,7 +14943,7 @@ var RadioCardRoot = forwardRef26(
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
     const defaultChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue.includes(value) : void 0;
-    return /* @__PURE__ */ jsxs52(
+    return /* @__PURE__ */ jsxs53(
       StyledCard2,
       {
         $aspectRatio: aspectRatio,
@@ -15015,7 +15027,7 @@ var RadioCardIndicator = styled78.div`
 RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import { jsx as jsx287, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx287, jsxs as jsxs54 } from "react/jsx-runtime";
 var StyledCardContent = styled79.div`
   display: grid;
   grid-auto-flow: column;
@@ -15035,11 +15047,11 @@ var RadioCardDefaultLayout = ({
   description,
   showIndicator = true
 }) => {
-  return /* @__PURE__ */ jsxs53(StyledCardContent, { children: [
+  return /* @__PURE__ */ jsxs54(StyledCardContent, { children: [
     showIndicator ? /* @__PURE__ */ jsx287(StyledIndicatorContainer, { $hasIcon: isNotNil32(icon), children: /* @__PURE__ */ jsx287(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
-    /* @__PURE__ */ jsxs53(Stack, { gap: "space-02", children: [
+    /* @__PURE__ */ jsxs54(Stack, { gap: "space-02", children: [
       isNotNil32(icon) && /* @__PURE__ */ jsx287(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
-      /* @__PURE__ */ jsxs53(
+      /* @__PURE__ */ jsxs54(
         Stack,
         {
           gap: "space-01",
@@ -15202,7 +15214,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx292, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx292, jsxs as jsxs55 } from "react/jsx-runtime";
 var segmentedControlStyles = css41`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -15241,7 +15253,7 @@ var SegmentedControl = forwardRef29(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx292(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs54(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx292(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs55(SelectedItemStyleProvider, { children: [
           children,
           /* @__PURE__ */ jsx292(SelectedItemIndicator, {})
         ] }) })
@@ -15256,7 +15268,7 @@ import { forwardRef as forwardRef30, useEffect as useEffect18, useRef as useRef1
 import styled82, { css as css42 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
-import { jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsxs as jsxs56 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css42`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -15365,7 +15377,7 @@ var SegmentedControlItem = forwardRef30(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs55(
+    return /* @__PURE__ */ jsxs56(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
@@ -15398,7 +15410,7 @@ import {
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef31 } from "react";
 import styled83 from "styled-components";
-import { jsx as jsx293, jsxs as jsxs56 } from "react/jsx-runtime";
+import { jsx as jsx293, jsxs as jsxs57 } from "react/jsx-runtime";
 var StyledTrigger2 = styled83(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
@@ -15471,13 +15483,13 @@ var Select = forwardRef31(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs56(
+    return /* @__PURE__ */ jsxs57(
       Root3,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ jsxs56(
+          /* @__PURE__ */ jsxs57(
             StyledTrigger2,
             {
               ref: forwardedRef,
@@ -15496,7 +15508,7 @@ var Select = forwardRef31(
               ]
             }
           ),
-          /* @__PURE__ */ jsx293(Portal2, { children: /* @__PURE__ */ jsxs56(StyledContent3, { position: "popper", children: [
+          /* @__PURE__ */ jsx293(Portal2, { children: /* @__PURE__ */ jsxs57(StyledContent3, { position: "popper", children: [
             /* @__PURE__ */ jsx293(ScrollUpButton, { children: /* @__PURE__ */ jsx293(Icon, { type: "caret-up" }) }),
             /* @__PURE__ */ jsx293(Viewport, { children }),
             /* @__PURE__ */ jsx293(ScrollDownButton, { children: /* @__PURE__ */ jsx293(Icon, { type: "caret-down" }) })
@@ -15513,7 +15525,7 @@ import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef32 } from "react";
 import styled84 from "styled-components";
 import { isNotNil as isNotNil34 } from "@wistia/type-guards";
-import { jsx as jsx294, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx294, jsxs as jsxs58 } from "react/jsx-runtime";
 var StyledItem = styled84(Item)`
   ${variantStyleMap2.body3};
   display: flex;
@@ -15543,7 +15555,7 @@ var StyledIconContainer2 = styled84.span`
 `;
 var SelectOption = forwardRef32(
   ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs57(
+    return /* @__PURE__ */ jsxs58(
       StyledItem,
       {
         ...props,
@@ -15556,7 +15568,7 @@ var SelectOption = forwardRef32(
               type: "checkmark"
             }
           ) }) }),
-          isNotNil34(selectedDisplayValue) ? /* @__PURE__ */ jsxs57("div", { children: [
+          isNotNil34(selectedDisplayValue) ? /* @__PURE__ */ jsxs58("div", { children: [
             children,
             /* @__PURE__ */ jsx294("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx294(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx294(ItemText, { children })
@@ -15570,12 +15582,12 @@ SelectOption.displayName = "SelectOption_UI";
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
 import styled85 from "styled-components";
-import { jsx as jsx295, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx295, jsxs as jsxs59 } from "react/jsx-runtime";
 var StyledLabel4 = styled85(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs58(Group, { ...props, children: [
+  return /* @__PURE__ */ jsxs59(Group, { ...props, children: [
     /* @__PURE__ */ jsx295(StyledLabel4, { children: /* @__PURE__ */ jsx295(
       Text,
       {
@@ -15597,7 +15609,7 @@ import {
 } from "@radix-ui/react-slider";
 import styled86 from "styled-components";
 import { isNonEmptyString as isNonEmptyString8 } from "@wistia/type-guards";
-import { jsx as jsx296, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx296, jsxs as jsxs60 } from "react/jsx-runtime";
 var SliderContainer = styled86.div`
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
@@ -15691,7 +15703,7 @@ var Slider = ({
     {
       ...otherProps,
       "data-testid": dataTestId,
-      children: /* @__PURE__ */ jsxs59(
+      children: /* @__PURE__ */ jsxs60(
         StyledSliderRoot,
         {
           "aria-label": ariaLabel,
@@ -15922,12 +15934,12 @@ var SelectedTabIndicator = () => {
 };
 
 // src/components/Tabs/TabsList.tsx
-import { jsx as jsx306, jsxs as jsxs60 } from "react/jsx-runtime";
+import { jsx as jsx306, jsxs as jsxs61 } from "react/jsx-runtime";
 var StyledRadixTabsList = styled94(RadixTabList)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
-  return /* @__PURE__ */ jsxs60(
+  return /* @__PURE__ */ jsxs61(
     StyledRadixTabsList,
     {
       $fullWidth: fullWidth,
@@ -15957,7 +15969,7 @@ var StyledRadixTabsTrigger = styled95(RadixTabsTrigger)`
 `;
 
 // src/components/Tabs/TabsTrigger.tsx
-import { jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsxs as jsxs62 } from "react/jsx-runtime";
 var TabsTrigger = forwardRef33(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
@@ -15989,7 +16001,7 @@ var TabsTrigger = forwardRef33(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs61(
+    return /* @__PURE__ */ jsxs62(
       StyledRadixTabsTrigger,
       {
         ...otherProps,
@@ -16011,7 +16023,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled96 from "styled-components";
 import { isNotNil as isNotNil37 } from "@wistia/type-guards";
-import { jsx as jsx307, jsxs as jsxs62 } from "react/jsx-runtime";
+import { jsx as jsx307, jsxs as jsxs63 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled96.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
@@ -16037,7 +16049,7 @@ var StyledThumbnailBadge = styled96.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs62(StyledThumbnailBadge, { ...props, children: [
+  return /* @__PURE__ */ jsxs63(StyledThumbnailBadge, { ...props, children: [
     isNotNil37(icon) && icon,
     /* @__PURE__ */ jsx307("span", { children: label })
   ] });
@@ -16184,7 +16196,7 @@ var getBackgroundGradient = (gradientName = void 0) => {
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 import styled97 from "styled-components";
 import { isNotNil as isNotNil39 } from "@wistia/type-guards";
-import { jsx as jsx308, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx308, jsxs as jsxs64 } from "react/jsx-runtime";
 var ScrubLine = styled97.div`
   position: absolute;
   top: 0;
@@ -16288,7 +16300,7 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ jsxs63(
+  return /* @__PURE__ */ jsxs64(
     "div",
     {
       ...props,
@@ -16309,7 +16321,7 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx309, jsxs as jsxs64 } from "react/jsx-runtime";
+import { jsx as jsx309, jsxs as jsxs65 } from "react/jsx-runtime";
 var WideThumbnailImage = styled98.img`
   height: 100%;
   object-fit: cover;
@@ -16464,7 +16476,7 @@ var Thumbnail = forwardRef34(
     } else {
       thumbnailContent = null;
     }
-    return /* @__PURE__ */ jsxs64(
+    return /* @__PURE__ */ jsxs65(
       StyledThumbnail,
       {
         ref,
@@ -16597,7 +16609,7 @@ var ThumbnailCollage = ({
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled100, { css as css46 } from "styled-components";
 import { isNotNil as isNotNil41 } from "@wistia/type-guards";
-import { jsx as jsx311, jsxs as jsxs65 } from "react/jsx-runtime";
+import { jsx as jsx311, jsxs as jsxs66 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx311(
@@ -16695,7 +16707,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs65(
+  const Logo = /* @__PURE__ */ jsxs66(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,