@wistia/ui 0.14.1-beta.90ac0e7a.3d2272d → 0.14.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.1-beta.90ac0e7a.3d2272d
+ * @license @wistia/ui v0.14.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9658,7 +9658,7 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/ColorPicker/ColorGrid.tsx
 var import_react42 = require("react");
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_styled_components47 = __toESM(require("styled-components"));
 var import_react_radio_group = require("@radix-ui/react-radio-group");
 
 // src/components/ColorPicker/ColorPickerContext.tsx
@@ -10172,86 +10172,17 @@ var useColorPickerState = () => {
   return context;
 };
 
-// src/components/Label/Label.tsx
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components47.css`
-  &::after {
-    color: var(--wui-color-text-error);
-    display: inline;
-    padding-left: var(--wui-space-01);
-    content: '*';
-  }
-`;
-var disabledStyle3 = import_styled_components47.css`
-  color: var(--wui-color-text-disabled);
-`;
-var StyledLabel2 = import_styled_components47.default.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__ */ (0, import_jsx_runtime226.jsx)(
-    StyledLabel2,
-    {
-      ...props,
-      $disabled: disabled,
-      $required: required,
-      $screenReaderOnly: screenReaderOnly,
-      htmlFor,
-      children
-    }
-  );
-};
-Label.displayName = "Label_UI";
-
 // src/components/ColorPicker/ColorGrid.tsx
-var import_jsx_runtime227 = require("react/jsx-runtime");
-var Container = import_styled_components48.default.div`
-  display: grid;
-  gap: var(--wui-space-01);
-  grid-template-columns: minmax(0, 1fr);
-  padding: var(--wui-space-02);
-`;
-var LabelContainer = import_styled_components48.default.div`
-  padding-top: var(--wui-space-01);
-`;
-var ItemsContainer = (0, import_styled_components48.default)(import_react_radio_group.Root)`
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var Container = (0, import_styled_components47.default)(import_react_radio_group.Root)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: start;
-  padding: var(--wui-space-01) 6px;
+  padding: var(--wui-space-02) 14px;
   gap: var(--wui-space-02);
 `;
-var ColorGrid = ({ children, label }) => {
+var ColorGrid = ({ children }) => {
   const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
   const onValueChange = (0, import_react42.useCallback)(
     (value) => {
@@ -10260,29 +10191,26 @@ var ColorGrid = ({ children, label }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(Container, { children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(LabelContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Label, { children: label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
-      ItemsContainer,
-      {
-        onValueChange,
-        value: valueAsHex,
-        children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+    Container,
+    {
+      onValueChange,
+      value: valueAsHex,
+      children
+    }
+  );
 };
 ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
+var import_styled_components50 = __toESM(require("styled-components"));
 var import_react_radio_group2 = require("@radix-ui/react-radio-group");
 var import_fn5 = require("culori/fn");
 
 // src/components/ColorPicker/ColorSwatch.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var ColorSwatchDiv = import_styled_components49.default.div`
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var ColorSwatchDiv = import_styled_components48.default.div`
   aspect-ratio: 1;
   width: ${({ $diameterPx }) => `${$diameterPx}px`};
   border-radius: var(--wui-border-radius-rounded);
@@ -10301,7 +10229,7 @@ var ColorSwatchDiv = import_styled_components49.default.div`
   outline-offset: 2px;
   transform: ${({ $selected }) => $selected ? "scale(0.9)" : "scale(1)"};
 `;
-var DerivativeHalfCircle = import_styled_components49.default.div`
+var DerivativeHalfCircle = import_styled_components48.default.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -10318,7 +10246,7 @@ var ColorSwatch = ({
   value
 }) => {
   const { valueAsHex: colorPickerValueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
     ColorSwatchDiv,
     {
       $diameterPx: diameterPx,
@@ -10329,7 +10257,7 @@ var ColorSwatch = ({
         backgroundColor: value
       },
       children: [
-        derivativeIsSelected ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
+        derivativeIsSelected ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(DerivativeHalfCircle, { $color: colorPickerValueAsHex }) : null,
         children
       ]
     }
@@ -10338,9 +10266,9 @@ var ColorSwatch = ({
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime229 = require("react/jsx-runtime");
-var hide = import_styled_components50.keyframes`
+var import_styled_components49 = __toESM(require("styled-components"));
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var hide = import_styled_components49.keyframes`
   from {
     opacity: 1;
   }
@@ -10348,7 +10276,7 @@ var hide = import_styled_components50.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components50.keyframes`
+var slideDownAndFade = import_styled_components49.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -10358,7 +10286,7 @@ var slideDownAndFade = import_styled_components50.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components50.keyframes`
+var slideLeftAndFade = import_styled_components49.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -10368,7 +10296,7 @@ var slideLeftAndFade = import_styled_components50.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components50.keyframes`
+var slideUpAndFade = import_styled_components49.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -10378,7 +10306,7 @@ var slideUpAndFade = import_styled_components50.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components50.keyframes`
+var slideRightAndFade = import_styled_components49.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -10388,7 +10316,7 @@ var slideRightAndFade = import_styled_components50.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components50.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components49.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -10450,21 +10378,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -10473,7 +10401,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("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__ */ (0, import_jsx_runtime228.jsx)("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
             ]
@@ -10486,8 +10414,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-var import_jsx_runtime230 = require("react/jsx-runtime");
-var Container2 = (0, import_styled_components51.default)(import_react_radio_group2.Item)`
+var import_jsx_runtime229 = require("react/jsx-runtime");
+var Container2 = (0, import_styled_components50.default)(import_react_radio_group2.Item)`
   border: none;
   appearance: none;
   outline: none;
@@ -10502,11 +10430,11 @@ var ColorGridOption = ({ value, name }) => {
   const valueAsHex = (0, import_fn5.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
     Tooltip,
     {
-      content: name ?? /* @__PURE__ */ (0, import_jsx_runtime230.jsx)("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+      content: name ?? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("span", { style: { fontFamily: "var(--wui-typography-family-mono)" }, children: value }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
         Container2,
         {
           "aria-label": value,
@@ -10514,7 +10442,7 @@ var ColorGridOption = ({ value, name }) => {
           role: "option",
           tabIndex: -1,
           value,
-          children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
             ColorSwatch,
             {
               derivativeIsSelected,
@@ -10531,10 +10459,10 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 var import_react43 = require("react");
-var import_styled_components52 = __toESM(require("styled-components"));
+var import_styled_components51 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_jsx_runtime231 = require("react/jsx-runtime");
-var Container3 = (0, import_styled_components52.default)(import_react_toggle_group.Root)`
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var Container3 = (0, import_styled_components51.default)(import_react_toggle_group.Root)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   padding: var(--wui-space-02);
@@ -10551,7 +10479,7 @@ var ColorList = ({ children }) => {
     },
     [onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
     Container3,
     {
       onValueChange,
@@ -10564,29 +10492,29 @@ var ColorList = ({ children }) => {
 ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
-var import_jsx_runtime232 = require("react/jsx-runtime");
-var Container4 = import_styled_components53.default.div`
-  display: grid;
-  gap: var(--wui-space-01);
-  grid-template-columns: minmax(0, 1fr);
-`;
-var ItemsContainer2 = import_styled_components53.default.div`
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var ItemsContainer = import_styled_components52.default.div`
   display: flex;
   flex-direction: column;
 `;
-var LabelContainer2 = import_styled_components53.default.div`
-  padding-top: var(--wui-space-01);
-`;
 var ColorListGroup = ({ label, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
-    Container4,
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
+    "div",
     {
       "aria-label": label,
       role: "group",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(LabelContainer2, { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Label, { children: label }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(ItemsContainer2, { children })
+        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+          Text,
+          {
+            prominence: "secondary",
+            renderAs: "span",
+            variant: "label4",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(ItemsContainer, { children })
       ]
     }
   );
@@ -10594,14 +10522,14 @@ var ColorListGroup = ({ label, children }) => {
 ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
-var import_styled_components54 = __toESM(require("styled-components"));
+var import_styled_components53 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
 var import_fn6 = require("culori/fn");
 
 // src/components/ColorPicker/ColorNameOrHexCode.tsx
-var import_jsx_runtime233 = require("react/jsx-runtime");
+var import_jsx_runtime232 = require("react/jsx-runtime");
 var ColorNameOrHexCode = ({ name, hexCode }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
     Box,
     {
       alignItems: "center",
@@ -10609,7 +10537,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
       grow: 1,
       justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
           Text,
           {
             renderAs: "span",
@@ -10617,7 +10545,7 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
             children: name ?? hexCode
           }
         ),
-        name != null && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+        name != null && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
           Text,
           {
             prominence: "secondary",
@@ -10632,8 +10560,8 @@ var ColorNameOrHexCode = ({ name, hexCode }) => {
 };
 
 // src/components/ColorPicker/ColorListOption.tsx
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var Container5 = (0, import_styled_components54.default)(import_react_toggle_group2.Item)`
+var import_jsx_runtime233 = require("react/jsx-runtime");
+var Container4 = (0, import_styled_components53.default)(import_react_toggle_group2.Item)`
   border: none;
   appearance: none;
   outline: none;
@@ -10660,8 +10588,8 @@ var ColorListOption = ({ value, name }) => {
   const valueAsHex = (0, import_fn6.formatHex)(valueAsHsv);
   const isSelected = valueAsHex === value;
   const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
-    Container5,
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+    Container4,
     {
       "aria-label": value,
       "aria-selected": valueAsHex === value,
@@ -10669,7 +10597,7 @@ var ColorListOption = ({ value, name }) => {
       tabIndex: -1,
       value,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
           ColorSwatch,
           {
             derivativeIsSelected,
@@ -10677,7 +10605,7 @@ var ColorListOption = ({ value, name }) => {
             value
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
           ColorNameOrHexCode,
           {
             hexCode: value,
@@ -10692,7 +10620,7 @@ ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_jsx_runtime235 = require("react/jsx-runtime");
+var import_jsx_runtime234 = require("react/jsx-runtime");
 var ColorPicker = ({
   children,
   colorForComparison = DEFAULT_COLOR_FOR_COMPARISON,
@@ -10701,7 +10629,7 @@ var ColorPicker = ({
   onValueChange,
   value
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(import_react_popover.Root, { modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_popover.Root, { modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     ColorPickerProvider,
     {
       colorForComparison,
@@ -10717,9 +10645,9 @@ ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
-var import_styled_components55 = __toESM(require("styled-components"));
-var import_jsx_runtime236 = require("react/jsx-runtime");
-var StyledPopoverContent = (0, import_styled_components55.default)(import_react_popover2.Content)`
+var import_styled_components54 = __toESM(require("styled-components"));
+var import_jsx_runtime235 = require("react/jsx-runtime");
+var StyledPopoverContent = (0, import_styled_components54.default)(import_react_popover2.Content)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
   border: 1px solid var(--wui-color-border);
@@ -10734,7 +10662,7 @@ var StyledPopoverContent = (0, import_styled_components55.default)(import_react_
 var ColorPickerPopoverContent = ({
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(import_react_popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(import_react_popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
     StyledPopoverContent,
     {
       align: "start",
@@ -10746,40 +10674,40 @@ var ColorPickerPopoverContent = ({
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
-var import_styled_components56 = __toESM(require("styled-components"));
-var import_jsx_runtime237 = require("react/jsx-runtime");
-var Container6 = import_styled_components56.default.div`
+var import_styled_components55 = __toESM(require("styled-components"));
+var import_jsx_runtime236 = require("react/jsx-runtime");
+var Container5 = import_styled_components55.default.div`
   padding: var(--wui-space-02);
 `;
 var ColorPickerSection = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Container6, { children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Stack, { children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Container5, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Stack, { children }) });
 };
 ColorPickerSection.displayName = "ColorPickerSection_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_react44 = require("react");
 var import_react_popover3 = require("@radix-ui/react-popover");
-var import_styled_components57 = __toESM(require("styled-components"));
+var import_styled_components56 = __toESM(require("styled-components"));
 
 // src/components/ColorPicker/ValueSwatch.tsx
-var import_jsx_runtime238 = require("react/jsx-runtime");
+var import_jsx_runtime237 = require("react/jsx-runtime");
 var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorSwatch, { value: valueAsHex });
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ColorSwatch, { value: valueAsHex });
 };
 ValueSwatch.displayName = "ValueSwatch_UI";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
-var import_jsx_runtime239 = require("react/jsx-runtime");
+var import_jsx_runtime238 = require("react/jsx-runtime");
 var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
-  return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
+  return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
 ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
-var import_jsx_runtime240 = require("react/jsx-runtime");
-var StyledPopoverTrigger = (0, import_styled_components57.default)(import_react_popover3.Trigger)`
+var import_jsx_runtime239 = require("react/jsx-runtime");
+var StyledPopoverTrigger = (0, import_styled_components56.default)(import_react_popover3.Trigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
@@ -10790,7 +10718,7 @@ var StyledPopoverTrigger = (0, import_styled_components57.default)(import_react_
     background-color: var(--wui-color-bg-surface-hover);
   }
 `;
-var DefaultTriggerContentContainer = import_styled_components57.default.div`
+var DefaultTriggerContentContainer = import_styled_components56.default.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -10798,19 +10726,19 @@ var DefaultTriggerContentContainer = import_styled_components57.default.div`
   padding-right: var(--wui-space-01);
 `;
 var DefaultTriggerContent = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(DefaultTriggerContentContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ValueSwatch, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ValueNameOrHexCode, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(DefaultTriggerContentContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ValueSwatch, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ValueNameOrHexCode, {})
   ] });
 };
 var ColorPickerTrigger = (0, import_react44.forwardRef)(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
       StyledPopoverTrigger,
       {
         ref: forwardedRef,
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(DefaultTriggerContent, {})
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(DefaultTriggerContent, {})
       }
     );
   }
@@ -10818,9 +10746,9 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
 ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
-var import_styled_components58 = __toESM(require("styled-components"));
-var import_jsx_runtime241 = require("react/jsx-runtime");
-var Container7 = import_styled_components58.default.div`
+var import_styled_components57 = __toESM(require("styled-components"));
+var import_jsx_runtime240 = require("react/jsx-runtime");
+var Container6 = import_styled_components57.default.div`
   display: flex;
   flex-direction: row;
   justify-content: end;
@@ -10832,8 +10760,8 @@ var floorToTenth = (value) => {
 var ContrastIndicator = () => {
   const { currentContrastRatio, minimumContrastRatio } = useColorPickerState();
   const isContrastSufficient = currentContrastRatio >= minimumContrastRatio;
-  const label = /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+  const label = /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
       Text,
       {
         renderAs: "span",
@@ -10842,7 +10770,7 @@ var ContrastIndicator = () => {
       }
     ),
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(
       Text,
       {
         renderAs: "span",
@@ -10854,19 +10782,19 @@ var ContrastIndicator = () => {
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Container7, { children: isContrastSufficient ? /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Container6, { children: isContrastSufficient ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
     Badge,
     {
       colorScheme: "success",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Icon, { type: "checkmark" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Icon, { type: "checkmark" }),
       label,
       variant: "outline"
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
     Badge,
     {
       colorScheme: "warning",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(Icon, { type: "error" }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Icon, { type: "error" }),
       label,
       variant: "outline"
     }
@@ -10878,10 +10806,10 @@ var import_react46 = require("react");
 
 // src/components/Switch/Switch.tsx
 var import_react45 = require("react");
-var import_styled_components59 = __toESM(require("styled-components"));
+var import_styled_components58 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
-var import_jsx_runtime242 = require("react/jsx-runtime");
-var sizeSmall2 = import_styled_components59.css`
+var import_jsx_runtime241 = require("react/jsx-runtime");
+var sizeSmall2 = import_styled_components58.css`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -10896,7 +10824,7 @@ var sizeSmall2 = import_styled_components59.css`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium2 = import_styled_components59.css`
+var sizeMedium2 = import_styled_components58.css`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -10911,7 +10839,7 @@ var sizeMedium2 = import_styled_components59.css`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge2 = import_styled_components59.css`
+var sizeLarge2 = import_styled_components58.css`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -10931,14 +10859,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledSwitchWrapper = import_styled_components59.default.div`
+var StyledSwitchWrapper = import_styled_components58.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = import_styled_components59.default.div`
+var StyledSwitchInput = import_styled_components58.default.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10966,7 +10894,7 @@ var StyledSwitchInput = import_styled_components59.default.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = import_styled_components59.default.input`
+var StyledHiddenSwitchInput = import_styled_components58.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color and toggle position */
@@ -11000,8 +10928,8 @@ var Switch = (0, import_react45.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react45.useId)();
     const computedId = (0, import_type_guards34.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
         StyledHiddenSwitchInput,
         {
           ...props,
@@ -11016,11 +10944,11 @@ var Switch = (0, import_react45.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
         FormControlLabel,
         {
           align,
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
             StyledSwitchInput,
             {
               $disabled: disabled,
@@ -11042,7 +10970,7 @@ var Switch = (0, import_react45.forwardRef)(
 Switch.displayName = "Switch_UI";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
-var import_jsx_runtime243 = require("react/jsx-runtime");
+var import_jsx_runtime242 = require("react/jsx-runtime");
 var ContrastEnforcerSwitch = () => {
   const { setShouldEnforceMinContrast, shouldEnforceMinContrast, hasAccessibleDerivatives: hasAccessibleDerivatives2 } = useColorPickerState();
   const onChangeContrastLimitedSwitch = (0, import_react46.useCallback)(
@@ -11058,48 +10986,48 @@ var ContrastEnforcerSwitch = () => {
   if (!hasAccessibleDerivatives2) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
     Switch,
     {
       align: "right",
       checked: shouldEnforceMinContrast,
-      label: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { variant: "label3", children: "Limit to high-contrast colors" }),
+      label: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Text, { variant: "label3", children: "Limit to high-contrast colors" }),
       onChange: onChangeContrastLimitedSwitch
     }
   );
 };
 
 // src/components/ColorPicker/ContrastPreview.tsx
-var import_jsx_runtime244 = require("react/jsx-runtime");
+var import_jsx_runtime243 = require("react/jsx-runtime");
 var ContrastPreview = () => {
   const { valueAsHex, colorForComparison } = useColorPickerState();
-  return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
     ColorSwatch,
     {
       diameterPx: 36,
       value: valueAsHex,
-      children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Text, { style: { color: colorForComparison }, children: "Aa" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(Text, { style: { color: colorForComparison }, children: "Aa" })
     }
   );
 };
 
 // src/components/ColorPicker/ContrastControls.tsx
-var import_jsx_runtime245 = require("react/jsx-runtime");
+var import_jsx_runtime244 = require("react/jsx-runtime");
 var ContrastControls = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(ColorPickerSection, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(ColorPickerSection, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
       Box,
       {
         alignItems: "center",
         direction: "row",
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ContrastPreview, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ContrastIndicator, {})
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastPreview, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastIndicator, {})
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ContrastEnforcerSwitch, {})
+    /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastEnforcerSwitch, {})
   ] });
 };
 ContrastControls.displayName = "ContrastControls_UI";
@@ -11110,12 +11038,12 @@ var import_fn7 = require("culori/fn");
 
 // src/components/Input/Input.tsx
 var import_react47 = require("react");
-var import_styled_components61 = __toESM(require("styled-components"));
+var import_styled_components60 = __toESM(require("styled-components"));
 var import_type_guards35 = require("@wistia/type-guards");
 
 // src/css/inputCss.ts
-var import_styled_components60 = require("styled-components");
-var inputCss = import_styled_components60.css`
+var import_styled_components59 = require("styled-components");
+var inputCss = import_styled_components59.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -11141,8 +11069,8 @@ var inputCss = import_styled_components60.css`
 `;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime246 = require("react/jsx-runtime");
-var inputStyles = import_styled_components61.css`
+var import_jsx_runtime245 = require("react/jsx-runtime");
+var inputStyles = import_styled_components60.css`
   ${inputCss}
   input,
   textarea {
@@ -11177,7 +11105,7 @@ var inputStyles = import_styled_components61.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components61.default.div`
+var StyledInputContainer = import_styled_components60.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -11258,7 +11186,7 @@ var Input = (0, import_react47.forwardRef)(
     const ref = (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon, { type: "search" });
     }
     if ((0, import_type_guards35.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react47.cloneElement)(leftIconToDisplay, {
@@ -11283,21 +11211,21 @@ var Input = (0, import_react47.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
             "input",
             {
               ...props,
@@ -11315,7 +11243,7 @@ var Input = (0, import_react47.forwardRef)(
 Input.displayName = "Input_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
-var import_jsx_runtime247 = require("react/jsx-runtime");
+var import_jsx_runtime246 = require("react/jsx-runtime");
 var SIX_DIGIT_HEX_CODE_LENGTH = 7;
 var isValidHexChar = (char) => {
   return /^[0-9a-fA-F]$/.test(char);
@@ -11455,7 +11383,7 @@ var HexColorInput = ({ autoFocus = true }) => {
   (0, import_react48.useEffect)(() => {
     setTextInputValue(valueAsHex);
   }, [valueAsHex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
     Input,
     {
       ref: inputRef,
@@ -11480,15 +11408,15 @@ HexColorInput.displayName = "HexColorInput_UI";
 // src/components/ColorPicker/HueSlider.tsx
 var import_react50 = require("react");
 var import_react_slider = require("@radix-ui/react-slider");
-var import_styled_components63 = __toESM(require("styled-components"));
+var import_styled_components62 = __toESM(require("styled-components"));
 var import_fn9 = require("culori/fn");
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 var import_react49 = require("react");
-var import_styled_components62 = __toESM(require("styled-components"));
+var import_styled_components61 = __toESM(require("styled-components"));
 var import_fn8 = require("culori/fn");
-var import_jsx_runtime248 = require("react/jsx-runtime");
-var Canvas = import_styled_components62.default.canvas`
+var import_jsx_runtime247 = require("react/jsx-runtime");
+var Canvas = import_styled_components61.default.canvas`
   display: block;
   height: 100%;
   width: 100%;
@@ -11516,7 +11444,7 @@ var HSVHueCanvas = ({ hsv }) => {
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, width, height);
   }, [hsv.s, hsv.v]);
-  return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
     Canvas,
     {
       ref: canvasRef,
@@ -11526,9 +11454,9 @@ var HSVHueCanvas = ({ hsv }) => {
 };
 
 // src/components/ColorPicker/HueSlider.tsx
-var import_jsx_runtime249 = require("react/jsx-runtime");
+var import_jsx_runtime248 = require("react/jsx-runtime");
 var TWENTY_FOUR = 24;
-var Container8 = import_styled_components63.default.div`
+var Container7 = import_styled_components62.default.div`
   border-radius: var(--wui-border-radius-rounded);
   border: 1px solid var(--wui-color-border);
   height: ${TWENTY_FOUR}px;
@@ -11536,7 +11464,7 @@ var Container8 = import_styled_components63.default.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-var Root = (0, import_styled_components63.default)(import_react_slider.Root)`
+var Root = (0, import_styled_components62.default)(import_react_slider.Root)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -11545,11 +11473,11 @@ var Root = (0, import_styled_components63.default)(import_react_slider.Root)`
   width: calc(100% - var(--wui-space-05));
   height: 16px;
 `;
-var Track = (0, import_styled_components63.default)(import_react_slider.Track)`
+var Track = (0, import_styled_components62.default)(import_react_slider.Track)`
   width: 100%;
 `;
-var Thumb = (0, import_styled_components63.default)(import_react_slider.Thumb)``;
-var ThumbInner = import_styled_components63.default.div`
+var Thumb = (0, import_styled_components62.default)(import_react_slider.Thumb)``;
+var ThumbInner = import_styled_components62.default.div`
   cursor: pointer;
   display: block;
   border-radius: var(--wui-border-radius-rounded);
@@ -11593,8 +11521,8 @@ var HueSlider = () => {
     },
     [nonDerivedValueAsHsv, onChangeNonDerivedValueAsHsv]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(Container8, { style: containerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime249.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(Container7, { style: containerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
       Root,
       {
         max: THREE_SIXTY,
@@ -11604,23 +11532,23 @@ var HueSlider = () => {
         step: 1,
         value: [nonDerivedValueAsHsv.h ?? 0],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Track, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(ThumbInner, { style: thumbInnerStyle }) })
+          /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Track, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Thumb, { "aria-label": "Hue slider", children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(ThumbInner, { style: thumbInnerStyle }) })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
+    /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
 HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 var import_react52 = require("react");
-var import_styled_components65 = __toESM(require("styled-components"));
+var import_styled_components64 = __toESM(require("styled-components"));
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 var import_react51 = require("react");
-var import_styled_components64 = __toESM(require("styled-components"));
+var import_styled_components63 = __toESM(require("styled-components"));
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -11649,8 +11577,8 @@ var drawSmoothCurve = (context, points) => {
 };
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
-var import_jsx_runtime250 = require("react/jsx-runtime");
-var Canvas2 = import_styled_components64.default.canvas`
+var import_jsx_runtime249 = require("react/jsx-runtime");
+var Canvas2 = import_styled_components63.default.canvas`
   display: block;
   width: 100%;
 `;
@@ -11757,7 +11685,7 @@ var HSVSaturationValueCanvas = ({
     colorForComparison,
     opacityForContrastCalculation
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     Canvas2,
     {
       ref: canvasRef,
@@ -11768,16 +11696,16 @@ var HSVSaturationValueCanvas = ({
 };
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
-var import_jsx_runtime251 = require("react/jsx-runtime");
+var import_jsx_runtime250 = require("react/jsx-runtime");
 var SATURATION_NUDGE = 0.02;
 var VALUE_NUDGE = 0.02;
-var Container9 = import_styled_components65.default.div`
+var Container8 = import_styled_components64.default.div`
   border-radius: var(--wui-border-radius-02);
   box-shadow: 0 0 0 1px var(--wui-color-border);
   overflow: hidden;
   position: relative;
 `;
-var Thumb2 = import_styled_components65.default.button.attrs({ type: "button" })`
+var Thumb2 = import_styled_components64.default.button.attrs({ type: "button" })`
   appearance: none;
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -11937,14 +11865,14 @@ var SaturationAndValuePicker = ({
   }, [onWindowMouseMove, onWindowMouseUp]);
   return (
     // eslint-disable-next-line styled-components-a11y/no-static-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
-      Container9,
+    /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(
+      Container8,
       {
         ref: containerRef,
         "data-testid": dataTestId,
         onMouseDown: onContainerMouseDown,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
             Thumb2,
             {
               ref: thumbRef,
@@ -11956,7 +11884,7 @@ var SaturationAndValuePicker = ({
               tabIndex: 0
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
             HSVSaturationValueCanvas,
             {
               colorForComparison,
@@ -11966,8 +11894,8 @@ var SaturationAndValuePicker = ({
               shouldShowContrastCurve: shouldEnforceMinContrast
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
-          /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(ScreenReaderOnly, { "aria-live": "polite", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(ScreenReaderOnly, { id: instructionsId, children: "Move right to increase saturation, left to decrease saturation, up to increase value, and down to decrease value." }),
+          /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(ScreenReaderOnly, { "aria-live": "polite", children: [
             "Current color: ",
             valueAsHex,
             ". Hue: ",
@@ -11990,14 +11918,14 @@ SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 var Ariakit = __toESM(require("@ariakit/react"));
 var import_react54 = require("react");
 var import_match_sorter = require("match-sorter");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_styled_components66 = __toESM(require("styled-components"));
 
 // src/components/Tag/Tag.tsx
 var import_react53 = require("react");
-var import_styled_components66 = __toESM(require("styled-components"));
+var import_styled_components65 = __toESM(require("styled-components"));
 var import_type_guards36 = require("@wistia/type-guards");
-var import_jsx_runtime252 = require("react/jsx-runtime");
-var TagLabel = import_styled_components66.default.a`
+var import_jsx_runtime251 = require("react/jsx-runtime");
+var TagLabel = import_styled_components65.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12032,14 +11960,14 @@ var TagLabel = import_styled_components66.default.a`
     background: var(--wui-color-bg-surface-secondary-active);
   }
 `;
-var TagDivider = import_styled_components66.default.div`
+var TagDivider = import_styled_components65.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components66.default.button`
+var StyledRemoveButton = import_styled_components65.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12067,7 +11995,7 @@ var StyledRemoveButton = import_styled_components66.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components66.default.div`
+var StyledTag = import_styled_components65.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12088,23 +12016,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(import_jsx_runtime252.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(import_jsx_runtime251.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -12114,14 +12042,14 @@ var Tag = (0, import_react53.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = (0, import_type_guards36.isNotNil)(icon);
     const labelProps = (0, import_type_guards36.isNotNil)(href) && (0, import_type_guards36.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
             TagLabel,
             {
               ...labelProps,
@@ -12132,7 +12060,7 @@ var Tag = (0, import_react53.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -12148,8 +12076,8 @@ var Tag = (0, import_react53.forwardRef)(
 Tag.displayName = "Tag_UI";
 
 // src/components/Combobox/Combobox.tsx
-var import_jsx_runtime253 = require("react/jsx-runtime");
-var ComboboxWapper = import_styled_components67.default.div`
+var import_jsx_runtime252 = require("react/jsx-runtime");
+var ComboboxWapper = import_styled_components66.default.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -12198,7 +12126,7 @@ var ComboboxWapper = import_styled_components67.default.div`
     }
   }
 `;
-var ComboboxInput = (0, import_styled_components67.default)(Ariakit.Combobox)`
+var ComboboxInput = (0, import_styled_components66.default)(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -12213,7 +12141,7 @@ var ComboboxInput = (0, import_styled_components67.default)(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = (0, import_styled_components67.default)(Ariakit.Popover)`
+var ComboboxPopover = (0, import_styled_components66.default)(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);
@@ -12238,7 +12166,7 @@ var ComboboxPopover = (0, import_styled_components67.default)(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = (0, import_styled_components67.default)(Ariakit.ComboboxItem)`
+var ComboboxItem2 = (0, import_styled_components66.default)(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -12263,12 +12191,12 @@ var ComboboxItem2 = (0, import_styled_components67.default)(Ariakit.ComboboxItem
     background-color: transparent;
   }
 `;
-var NoResults = import_styled_components67.default.div`
+var NoResults = import_styled_components66.default.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
 var ComboboxOption = ({ value, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -12321,7 +12249,7 @@ var Combobox2 = ({
   const matches = (0, import_react54.useMemo)(() => {
     return (0, import_match_sorter.matchSorter)(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
     Ariakit.ComboboxProvider,
     {
       selectedValue: value,
@@ -12332,13 +12260,13 @@ var Combobox2 = ({
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
           ComboboxWapper,
           {
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
                 Tag,
                 {
                   href: "https://example.com",
@@ -12348,11 +12276,11 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(ComboboxInput, { placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(ComboboxInput, { placeholder })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
           ComboboxPopover,
           {
             "aria-busy": isPending,
@@ -12362,14 +12290,14 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
+              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
                       Icon,
                       {
                         size: "sm",
@@ -12384,7 +12312,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -12395,10 +12323,10 @@ var Combobox2 = ({
 
 // src/components/DataCards/DataCard.tsx
 var import_react55 = require("react");
-var import_styled_components68 = __toESM(require("styled-components"));
+var import_styled_components67 = __toESM(require("styled-components"));
 var import_type_guards37 = require("@wistia/type-guards");
-var import_jsx_runtime254 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components68.default.div`
+var import_jsx_runtime253 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components67.default.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);
@@ -12472,7 +12400,7 @@ var StyledDataCard = import_styled_components68.default.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components68.keyframes`
+var shimmer = import_styled_components67.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -12480,7 +12408,7 @@ var shimmer = import_styled_components68.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components68.default.div`
+var LoadingBackground = import_styled_components67.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -12491,32 +12419,32 @@ var LoadingBackground = import_styled_components68.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components68.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components67.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components68.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components67.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = (0, import_styled_components68.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components67.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components68.default)(Heading)`
+var StyledValue = (0, import_styled_components67.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components68.default.div`
+var StyledSlot = import_styled_components67.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components68.default.div`
+var StyledDataCardTrendContainer = import_styled_components67.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
-var StyledSubtitle = (0, import_styled_components68.default)(Text)`
+var StyledSubtitle = (0, import_styled_components67.default)(Text)`
   grid-area: subtitle;
 `;
 var DataCardInner = ({
@@ -12528,30 +12456,30 @@ var DataCardInner = ({
   trend,
   subtitle,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
-        StyledLabel3,
+      /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+        StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards37.isNotNil)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards37.isNotNil)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+      (0, import_type_guards37.isNotNil)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards37.isNotNil)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
         StyledSubtitle,
         {
           "data-wui-data-card-subtitle": true,
@@ -12559,7 +12487,7 @@ var DataCardInner = ({
           children: subtitle
         }
       ),
-      (0, import_type_guards37.isNotNil)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards37.isNotNil)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -12567,12 +12495,12 @@ var DataCard = (props) => {
   const ref = (0, import_react55.useRef)(null);
   if ((0, import_type_guards37.isNotNil)(props.href) || (0, import_type_guards37.isNotNil)(props.onClick)) {
     const { "aria-pressed": ariaPressed, ...dataCardProps } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot,
         ...dataCardProps,
-        label: /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+        label: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
           Button,
           {
             ref,
@@ -12589,14 +12517,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(DataCardInner, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components69 = __toESM(require("styled-components"));
-var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components69.default)(Box)`
+var import_styled_components68 = __toESM(require("styled-components"));
+var import_jsx_runtime254 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components68.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -12610,7 +12538,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -12629,9 +12557,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components70 = __toESM(require("styled-components"));
-var import_jsx_runtime256 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components70.default.div`
+var import_styled_components69 = __toESM(require("styled-components"));
+var import_jsx_runtime255 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components69.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -12646,8 +12574,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime255.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
       Icon,
       {
         size: "md",
@@ -12655,7 +12583,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -12667,15 +12595,15 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-var import_styled_components71 = __toESM(require("styled-components"));
-var import_jsx_runtime257 = require("react/jsx-runtime");
-var StyledIconContainer = import_styled_components71.default.div`
+var import_styled_components70 = __toESM(require("styled-components"));
+var import_jsx_runtime256 = require("react/jsx-runtime");
+var StyledIconContainer = import_styled_components70.default.div`
   display: flex;
   align-items: center;
   align-self: center;
   height: 0;
 `;
-var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -12685,22 +12613,22 @@ var DataCardHoverArrow = () => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(St
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components72 = __toESM(require("styled-components"));
-var import_jsx_runtime258 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components72.css`
+var import_styled_components71 = __toESM(require("styled-components"));
+var import_jsx_runtime257 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components71.css`
   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 = import_styled_components72.css`
+var verticalBorderCss = import_styled_components71.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components72.default.div`
+var DividerComponent = import_styled_components71.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -12712,7 +12640,7 @@ var DividerComponent = import_styled_components72.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -12725,10 +12653,10 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components72 = __toESM(require("styled-components"));
 var import_react56 = require("react");
-var import_jsx_runtime259 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components73.default)(Input)`
+var import_jsx_runtime258 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components72.default)(Input)`
   &:not([rows]) {
     min-height: unset;
   }
@@ -12748,7 +12676,7 @@ var StyledInput = (0, import_styled_components73.default)(Input)`
     min-height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components73.css`
+var editableStyles = import_styled_components72.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -12758,7 +12686,7 @@ var editableStyles = import_styled_components73.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components73.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components72.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -12813,7 +12741,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -12827,7 +12755,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -12846,9 +12774,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(import_jsx_runtime259.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(import_jsx_runtime258.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -12898,9 +12826,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 var import_react58 = require("react");
 var import_type_guards38 = require("@wistia/type-guards");
-var import_jsx_runtime260 = require("react/jsx-runtime");
+var import_jsx_runtime259 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = (0, import_react58.useRef)(null);
@@ -12909,10 +12837,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards38.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards38.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards38.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards38.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
         ErrorItem,
         {
           error: err,
@@ -12920,7 +12848,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -12937,6 +12865,68 @@ var FormErrorSummary = ({ description }) => {
 var import_react59 = require("react");
 var import_styled_components74 = __toESM(require("styled-components"));
 var import_type_guards39 = require("@wistia/type-guards");
+
+// src/components/Label/Label.tsx
+var import_styled_components73 = __toESM(require("styled-components"));
+var import_jsx_runtime260 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components73.css`
+  &::after {
+    color: var(--wui-color-text-error);
+    display: inline;
+    padding-left: var(--wui-space-01);
+    content: '*';
+  }
+`;
+var disabledStyle3 = import_styled_components73.css`
+  color: var(--wui-color-text-disabled);
+`;
+var StyledLabel3 = import_styled_components73.default.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__ */ (0, import_jsx_runtime260.jsx)(
+    StyledLabel3,
+    {
+      ...props,
+      $disabled: disabled,
+      $required: required,
+      $screenReaderOnly: screenReaderOnly,
+      htmlFor,
+      children
+    }
+  );
+};
+Label.displayName = "Label_UI";
+
+// src/components/FormField/FormField.tsx
 var import_jsx_runtime261 = require("react/jsx-runtime");
 var StyledFormField = import_styled_components74.default.div`
   --form-field-spacing: var(--wui-space-01);