@wistia/ui 0.6.33 → 0.6.34

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.33
+ * @license @wistia/ui v0.6.34
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7552,23 +7552,54 @@ var Card = ({
 );
 Card.displayName = "Card";
 
+// src/components/Center/Center.tsx
+import { forwardRef as forwardRef6 } from "react";
+import styled15 from "styled-components";
+import { jsx as jsx203 } from "react/jsx-runtime";
+var StyledCenter = styled15.div`
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: ${({ $maxWidth }) => $maxWidth};
+  ${({ $gutterWidth }) => $gutterWidth && `padding: 0 var(--wui-${$gutterWidth.toString()});`}
+  ${({ $intrinsic }) => $intrinsic && `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `}
+`;
+var Center = forwardRef6(
+  ({ maxWidth = "100%", gutterWidth = "space-00", intrinsic = false, children, ...props }, ref) => /* @__PURE__ */ jsx203(
+    StyledCenter,
+    {
+      ref,
+      $gutterWidth: gutterWidth,
+      $intrinsic: intrinsic,
+      $maxWidth: maxWidth,
+      ...props,
+      children
+    }
+  )
+);
+Center.displayName = "Center";
+
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef6, useId } from "react";
-import styled18, { css as css19 } from "styled-components";
+import { forwardRef as forwardRef7, useId } from "react";
+import styled19, { css as css19 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import styled17, { css as css18 } from "styled-components";
+import styled18, { css as css18 } from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil9 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import styled15, { css as css17 } from "styled-components";
+import styled16, { css as css17 } from "styled-components";
 import { isNil as isNil11 } from "@wistia/type-guards";
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx204 } from "react/jsx-runtime";
 var disabledStyle = css17`
   color: var(--wui-color-text-disabled);
 `;
-var StyledFormControlLabelDescription = styled15.div`
+var StyledFormControlLabelDescription = styled16.div`
   color: var(--wui-color-text-secondary);
   display: block;
   font-size: var(--wui-typography-body-4-size);
@@ -7586,7 +7617,7 @@ var FormControlLabelDescription = ({
   if (isNil11(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx203(
+  return /* @__PURE__ */ jsx204(
     StyledFormControlLabelDescription,
     {
       ...props,
@@ -7598,11 +7629,11 @@ var FormControlLabelDescription = ({
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled16 from "styled-components";
+import styled17 from "styled-components";
 import { isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { jsx as jsx204 } from "react/jsx-runtime";
-var VisuallyHidden = styled16.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled16.div({
+import { jsx as jsx205 } from "react/jsx-runtime";
+var VisuallyHidden = styled17.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled17.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7613,23 +7644,23 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil8(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx204(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx205(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx204(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx205(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import { jsx as jsx205, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx206, jsxs as jsxs13 } from "react/jsx-runtime";
 var disabledStyle2 = css18`
   cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = styled17.div`
+var StyledLabelWrapper = styled18.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = styled17.label`
+var StyledFormControlLabel = styled18.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7654,9 +7685,9 @@ var FormControlLabel = ({
   if (isNil12(label)) {
     return null;
   }
-  const labelContent = hideLabel ? /* @__PURE__ */ jsx205(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs13(StyledLabelWrapper, { children: [
+  const labelContent = hideLabel ? /* @__PURE__ */ jsx206(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs13(StyledLabelWrapper, { children: [
     label,
-    /* @__PURE__ */ jsx205(FormControlLabelDescription, { children: description })
+    /* @__PURE__ */ jsx206(FormControlLabelDescription, { children: description })
   ] });
   return /* @__PURE__ */ jsxs13(
     StyledFormControlLabel,
@@ -7674,8 +7705,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx206, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx206(
+import { jsx as jsx207, jsxs as jsxs14 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx207(
   "svg",
   {
     fill: "inherit",
@@ -7683,7 +7714,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx206(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx206(
+    children: /* @__PURE__ */ jsx207(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -7730,14 +7761,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = styled18.div`
+var StyledCheckboxWrapper = styled19.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = styled18.div`
+var StyledCheckboxInput = styled19.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -7759,7 +7790,7 @@ var StyledCheckboxInput = styled18.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = styled18.input`
+var StyledHiddenCheckboxInput = styled19.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -7773,7 +7804,7 @@ var StyledHiddenCheckboxInput = styled18.input`
     display: block;
   }
 `;
-var Checkbox = forwardRef6(
+var Checkbox = forwardRef7(
   ({
     checked,
     disabled = false,
@@ -7791,7 +7822,7 @@ var Checkbox = forwardRef6(
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     return /* @__PURE__ */ jsxs14(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ jsx206(
+      /* @__PURE__ */ jsx207(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -7806,16 +7837,16 @@ var Checkbox = forwardRef6(
           value
         }
       ),
-      /* @__PURE__ */ jsx206(
+      /* @__PURE__ */ jsx207(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ jsx206(
+          controlSlot: /* @__PURE__ */ jsx207(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ jsx206(CheckIcon, {})
+              children: /* @__PURE__ */ jsx207(CheckIcon, {})
             }
           ),
           description,
@@ -7868,9 +7899,9 @@ ClickRegion.displayName = "ClickRegion";
 // src/components/Collapsible/Collapsible.tsx
 import { Root } from "@radix-ui/react-collapsible";
 import { isNotNil as isNotNil10 } from "@wistia/type-guards";
-import styled19 from "styled-components";
-import { jsx as jsx207 } from "react/jsx-runtime";
-var StyledRoot = styled19(Root)`
+import styled20 from "styled-components";
+import { jsx as jsx208 } from "react/jsx-runtime";
+var StyledRoot = styled20(Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7886,45 +7917,45 @@ var Collapsible = ({
   const controlProps = {
     ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx207(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx208(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import { jsx as jsx208 } from "react/jsx-runtime";
+import { jsx as jsx209 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx208(Trigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx209(Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled20 from "styled-components";
+import styled21 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx209, jsxs as jsxs15 } from "react/jsx-runtime";
-var ClampedContent = styled20.div.attrs({ "data-wui-collapsible-content": true })`
+import { Fragment as Fragment4, jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
+var ClampedContent = styled21.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if (isNotUndefined5(clamp)) {
-    return /* @__PURE__ */ jsx209(ClampedContent, { $clamp: clamp, children });
+    return /* @__PURE__ */ jsx210(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ jsx209(Content, { children: /* @__PURE__ */ jsxs15(Fragment4, { children: [
+  return /* @__PURE__ */ jsx210(Content, { children: /* @__PURE__ */ jsxs15(Fragment4, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-import styled22, { keyframes } from "styled-components";
+import styled23, { keyframes } from "styled-components";
 import { isNotNull } from "@wistia/type-guards";
 
 // src/components/Heading/Heading.tsx
-import { forwardRef as forwardRef7 } from "react";
-import styled21, { css as css20 } from "styled-components";
-import { jsx as jsx210 } from "react/jsx-runtime";
+import { forwardRef as forwardRef8 } from "react";
+import styled22, { css as css20 } from "styled-components";
+import { jsx as jsx211 } from "react/jsx-runtime";
 var heroStyle = css20`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
@@ -7977,7 +8008,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = styled21.div`
+var StyledHeading = styled22.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8009,7 +8040,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = forwardRef7(
+var HeadingComponent = forwardRef8(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -8020,7 +8051,7 @@ var HeadingComponent = forwardRef7(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx210(
+  }, ref) => /* @__PURE__ */ jsx211(
     StyledHeading,
     {
       ref,
@@ -8040,8 +8071,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-import { jsx as jsx211, jsxs as jsxs16 } from "react/jsx-runtime";
-var StyledDataCard = styled22.div`
+import { jsx as jsx212, jsxs as jsxs16 } from "react/jsx-runtime";
+var StyledDataCard = styled23.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -8062,7 +8093,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled22.div`
+var LoadingBackground = styled23.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8073,27 +8104,27 @@ var LoadingBackground = styled22.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled22(LoadingBackground)`
+var StyledLoadingLabel = styled23(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled22(LoadingBackground)`
+var StyledLoadingValue = styled23(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = styled22(Heading)`
+var StyledLabel2 = styled23(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled22(Heading)`
+var StyledValue = styled23(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled22.div`
+var StyledSlot = styled23.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled22.div`
+var StyledDataCardTrendContainer = styled23.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8112,33 +8143,33 @@ var DataCard = ({
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx211(
+      /* @__PURE__ */ jsx212(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx211(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx212(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx211(
+      /* @__PURE__ */ jsx212(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx211(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx212(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx211(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx211(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx212(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx212(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled23 from "styled-components";
-import { jsx as jsx212 } from "react/jsx-runtime";
-var StyledDataCards = styled23(Box)`
+import styled24 from "styled-components";
+import { jsx as jsx213 } from "react/jsx-runtime";
+var StyledDataCards = styled24(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8152,7 +8183,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx212(
+  return /* @__PURE__ */ jsx213(
     StyledDataCards,
     {
       ...props,
@@ -8170,12 +8201,12 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled25 from "styled-components";
+import styled26 from "styled-components";
 
 // src/components/Text/Text.tsx
-import { forwardRef as forwardRef8 } from "react";
-import styled24, { css as css21 } from "styled-components";
-import { jsx as jsx213 } from "react/jsx-runtime";
+import { forwardRef as forwardRef9 } from "react";
+import styled25, { css as css21 } from "styled-components";
+import { jsx as jsx214 } from "react/jsx-runtime";
 var bodyBoldStyles = css21`
   > strong,
   b {
@@ -8295,7 +8326,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = styled24.div`
+var StyledText = styled25.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8339,7 +8370,7 @@ var StyledText = styled24.div`
       }
     `}
 `;
-var TextComponent = forwardRef8(
+var TextComponent = forwardRef9(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -8352,7 +8383,7 @@ var TextComponent = forwardRef8(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx213(
+    return /* @__PURE__ */ jsx214(
       StyledText,
       {
         ref,
@@ -8374,8 +8405,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx214, jsxs as jsxs17 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled25.div`
+import { jsx as jsx215, jsxs as jsxs17 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled26.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8391,7 +8422,7 @@ var DataCardTrend = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs17(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx214(
+    /* @__PURE__ */ jsx215(
       Icon,
       {
         size: "md",
@@ -8399,7 +8430,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx214(
+    /* @__PURE__ */ jsx215(
       Text,
       {
         prominence: "secondary",
@@ -8411,8 +8442,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled26, { css as css22 } from "styled-components";
-import { jsx as jsx215 } from "react/jsx-runtime";
+import styled27, { css as css22 } from "styled-components";
+import { jsx as jsx216 } from "react/jsx-runtime";
 var horizontalBorderCss = css22`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -8426,7 +8457,7 @@ var verticalBorderCss = css22`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled26.div`
+var DividerComponent = styled27.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8441,7 +8472,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx215(
+  return /* @__PURE__ */ jsx216(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8454,7 +8485,7 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled29, { css as css25 } from "styled-components";
+import styled30, { css as css25 } from "styled-components";
 import { useState as useState6, useRef as useRef4 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
@@ -8465,8 +8496,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled27, { css as css23 } from "styled-components";
-import { jsx as jsx216, jsxs as jsxs18 } from "react/jsx-runtime";
+import styled28, { css as css23 } from "styled-components";
+import { jsx as jsx217, jsxs as jsxs18 } from "react/jsx-runtime";
 var CompactTooltipStyles = css23`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8474,7 +8505,7 @@ var CompactTooltipStyles = css23`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled27(TooltipContent)`
+var StyledContent = styled28(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8539,8 +8570,8 @@ var Tooltip = ({
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx216(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx216(TooltipPortal, { children: /* @__PURE__ */ jsxs18(
+        /* @__PURE__ */ jsx217(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx217(TooltipPortal, { children: /* @__PURE__ */ jsxs18(
           StyledContent,
           {
             $compact: compact,
@@ -8548,7 +8579,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx216(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx216(
+              !hideArrow ? /* @__PURE__ */ jsx217(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx217(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8557,7 +8588,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx216("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__ */ jsx217("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
             ]
@@ -8570,10 +8601,10 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef9, cloneElement as cloneElement4, useRef as useRef3 } from "react";
-import styled28, { css as css24 } from "styled-components";
+import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef3 } from "react";
+import styled29, { css as css24 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil11, isRecord as isRecord4 } from "@wistia/type-guards";
-import { jsx as jsx217, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
 var inputStyles = css24`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -8615,7 +8646,7 @@ var inputStyles = css24`
     }
   }
 `;
-var StyledInputContainer = styled28.div`
+var StyledInputContainer = styled29.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -8659,7 +8690,7 @@ var StyledInputContainer = styled28.div`
     padding-right: 32px;
   }
 `;
-var Input = forwardRef9(
+var Input = forwardRef10(
   ({
     fullWidth = true,
     monospace = false,
@@ -8676,7 +8707,7 @@ var Input = forwardRef9(
     );
     let leftIconToDisplay = leftIcon;
     if (isNil13(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx217(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx218(Icon, { type: "search" });
     }
     if (isNotNil11(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
@@ -8708,14 +8739,14 @@ var Input = forwardRef9(
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx217(
+          type === "multiline" ? /* @__PURE__ */ jsx218(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ jsx217(
+          ) : /* @__PURE__ */ jsx218(
             "input",
             {
               ...props,
@@ -8733,8 +8764,8 @@ var Input = forwardRef9(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { Fragment as Fragment5, jsx as jsx218, jsxs as jsxs20 } from "react/jsx-runtime";
-var StyledInput = styled29(Input)`
+import { Fragment as Fragment5, jsx as jsx219, jsxs as jsxs20 } from "react/jsx-runtime";
+var StyledInput = styled30(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -8764,7 +8795,7 @@ var editableStyles = css25`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled29(Heading)`
+var StyledHeading2 = styled30(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -8818,7 +8849,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx218(
+  const HeadingComponent2 = /* @__PURE__ */ jsx219(
     StyledHeading2,
     {
       ref: headingRef,
@@ -8832,7 +8863,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ jsx218(
+    return /* @__PURE__ */ jsx219(
       StyledInput,
       {
         $height: headingHeight,
@@ -8851,7 +8882,7 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsx218(
+    /* @__PURE__ */ jsx219(
       Tooltip,
       {
         compact: true,
@@ -8859,7 +8890,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ jsx218(ScreenReaderOnly, { children: /* @__PURE__ */ jsx218(
+    /* @__PURE__ */ jsx219(ScreenReaderOnly, { children: /* @__PURE__ */ jsx219(
       "button",
       {
         "aria-label": ariaLabel,
@@ -8871,27 +8902,27 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef11, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
-import styled31 from "styled-components";
+import { forwardRef as forwardRef12, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
+import styled32 from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef10 } from "react";
-import styled30 from "styled-components";
-import { jsx as jsx219 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11 } from "react";
+import styled31 from "styled-components";
+import { jsx as jsx220 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = styled30.div`
+var StyledStack = styled31.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
   align-items: ${({ $alignItems }) => $alignItems};
 `;
-var StackComponent = forwardRef10(
+var StackComponent = forwardRef11(
   ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ jsx219(
+    return /* @__PURE__ */ jsx220(
       StyledStack,
       {
         ref,
@@ -8908,8 +8939,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-import { jsx as jsx220 } from "react/jsx-runtime";
-var StyledForm = styled31.form`
+import { jsx as jsx221 } from "react/jsx-runtime";
+var StyledForm = styled32.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -8988,7 +9019,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx220(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx220(
+    /* @__PURE__ */ jsx221(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx221(
       Stack,
       {
         ...props,
@@ -9006,7 +9037,7 @@ var FormComponent = ({
   );
 };
 FormComponent.displayName = "Form";
-var Form = forwardRef11(FormComponent);
+var Form = forwardRef12(FormComponent);
 
 // src/components/Form/useFormState.tsx
 import { useCallback as useCallback6, useState as useState8 } from "react";
@@ -9047,9 +9078,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef6 } from "react";
 import { isArray, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
-import { jsx as jsx221, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs21 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx221("li", { children: /* @__PURE__ */ jsx221(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx222("li", { children: /* @__PURE__ */ jsx222(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef6(null);
@@ -9059,9 +9090,9 @@ var FormErrorSummary = ({ description }) => {
     return null;
   }
   return /* @__PURE__ */ jsxs21("div", { ref, children: [
-    /* @__PURE__ */ jsx221("p", { children: description }),
-    /* @__PURE__ */ jsx221("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined7(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx221(
+    /* @__PURE__ */ jsx222("p", { children: description }),
+    /* @__PURE__ */ jsx222("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined7(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx222(
         ErrorItem,
         {
           error: err,
@@ -9069,7 +9100,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx221(
+      )) : /* @__PURE__ */ jsx222(
         ErrorItem,
         {
           error: error ?? "",
@@ -9084,12 +9115,12 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
-import styled34 from "styled-components";
+import styled35 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil12, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled32, { css as css26 } from "styled-components";
-import { jsx as jsx222 } from "react/jsx-runtime";
+import styled33, { css as css26 } from "styled-components";
+import { jsx as jsx223 } from "react/jsx-runtime";
 var requiredStyle = css26`
   &::after {
     color: var(--wui-color-text-error);
@@ -9101,7 +9132,7 @@ var requiredStyle = css26`
 var disabledStyle3 = css26`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = styled32.label`
+var StyledLabel3 = styled33.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9133,7 +9164,7 @@ var Label = ({
   screenReaderOnly = false,
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx222(
+  return /* @__PURE__ */ jsx223(
     StyledLabel3,
     {
       ...otherProps,
@@ -9151,13 +9182,13 @@ Label.displayName = "Label";
 import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled33 from "styled-components";
+import styled34 from "styled-components";
 import { useRef as useRef7 } from "react";
-import { jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
-var StyledFieldset = styled33.fieldset`
+import { jsx as jsx224, jsxs as jsxs22 } from "react/jsx-runtime";
+var StyledFieldset = styled34.fieldset`
   border: 0;
 `;
-var StyledLegend = styled33.legend`
+var StyledLegend = styled34.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
@@ -9169,7 +9200,7 @@ var FormGroup = ({ children, label, ...props }) => {
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx223(
+        /* @__PURE__ */ jsx224(
           Heading,
           {
             renderAs: StyledLegend,
@@ -9185,7 +9216,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx224 } from "react/jsx-runtime";
+import { jsx as jsx225 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
@@ -9200,13 +9231,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx224(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx224(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx225(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx225(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { Fragment as Fragment6, jsx as jsx225, jsxs as jsxs23 } from "react/jsx-runtime";
-var StyledFormField = styled34.div`
+import { Fragment as Fragment6, jsx as jsx226, jsxs as jsxs23 } from "react/jsx-runtime";
+var StyledFormField = styled35.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -9236,7 +9267,7 @@ var StyledFormField = styled34.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = styled34.ul`
+var StyledErrorList = styled35.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9246,7 +9277,7 @@ var StyledErrorList = styled34.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = isArray2(errors);
-  return isMultipleErrors ? /* @__PURE__ */ jsx225(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx225(
+  return isMultipleErrors ? /* @__PURE__ */ jsx226(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx226(
     Text,
     {
       colorScheme: "error",
@@ -9256,7 +9287,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ jsx225(
+  )) }) : /* @__PURE__ */ jsx226(
     Text,
     {
       colorScheme: "error",
@@ -9325,12 +9356,12 @@ var FormField = ({
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx225(Label, { htmlFor: computedId, children: label }),
-        isNotNil12(description) ? /* @__PURE__ */ jsx225(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        !isIntegratedLabel && /* @__PURE__ */ jsx226(Label, { htmlFor: computedId, children: label }),
+        isNotNil12(description) ? /* @__PURE__ */ jsx226(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
         isNotNil12(computedError) ? /* @__PURE__ */ jsxs23(Fragment6, { children: [
-          /* @__PURE__ */ jsx225("div", {}),
-          /* @__PURE__ */ jsx225(
+          /* @__PURE__ */ jsx226("div", {}),
+          /* @__PURE__ */ jsx226(
             ErrorMessages,
             {
               errors: computedError,
@@ -9346,7 +9377,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext4, useMemo as useMemo6 } from "react";
-import { jsx as jsx226 } from "react/jsx-runtime";
+import { jsx as jsx227 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
@@ -9361,15 +9392,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx226(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx226(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx227(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx227(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-import { Children as Children6, cloneElement as cloneElement6, forwardRef as forwardRef12 } from "react";
-import styled35 from "styled-components";
-import { jsx as jsx227 } from "react/jsx-runtime";
-var StyledButton2 = styled35(Button)`
+import { Children as Children6, cloneElement as cloneElement6, forwardRef as forwardRef13 } from "react";
+import styled36 from "styled-components";
+import { jsx as jsx228 } from "react/jsx-runtime";
+var StyledButton2 = styled36(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9383,10 +9414,10 @@ var StyledButton2 = styled35(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = forwardRef12(
+var IconButton = forwardRef13(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx227(
+    return /* @__PURE__ */ jsx228(
       StyledButton2,
       {
         ...props,
@@ -9404,9 +9435,9 @@ var IconButton = forwardRef12(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import styled36 from "styled-components";
+import styled37 from "styled-components";
 import { isNotNil as isNotNil13 } from "@wistia/type-guards";
-import { jsx as jsx228 } from "react/jsx-runtime";
+import { jsx as jsx229 } from "react/jsx-runtime";
 var getFillStyle2 = (fillContainer) => {
   if (fillContainer === "horizontal") {
     return "width: 100%;";
@@ -9422,7 +9453,7 @@ var getFillStyle2 = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = styled36.img`
+var StyledImage = styled37.img`
   border-radius: ${({ $borderRadius }) => isNotNil13($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle2($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
@@ -9437,7 +9468,7 @@ var Image = ({
   loading = "lazy",
   position: objPosition,
   ...otherProps
-}) => /* @__PURE__ */ jsx228(
+}) => /* @__PURE__ */ jsx229(
   StyledImage,
   {
     $borderRadius: borderRadius,
@@ -9453,7 +9484,7 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-import styled37, { css as css27, keyframes as keyframes2 } from "styled-components";
+import styled38, { css as css27, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9469,7 +9500,7 @@ var MenuContext = createContext5({ compact: false });
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx229, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx230, jsxs as jsxs24 } from "react/jsx-runtime";
 var open = keyframes2`
   from {
     opacity: 0;
@@ -9554,7 +9585,7 @@ var menuContentCss = css27`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled37(DropdownMenuContent)`
+var MenuContent = styled38(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -9580,24 +9611,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx229(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx230(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs24(
     DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx229(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx229(
+        /* @__PURE__ */ jsx230(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx230(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx229(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx230(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx229(DropdownMenuPortal, { children: /* @__PURE__ */ jsx229(
+        /* @__PURE__ */ jsx230(DropdownMenuPortal, { children: /* @__PURE__ */ jsx230(
           MenuContent,
           {
             ...props,
@@ -9617,19 +9648,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled38 from "styled-components";
+import styled39 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx230 } from "react/jsx-runtime";
-var StyledMenuLabel = styled38(DropdownMenuLabel)`
+import { jsx as jsx231 } from "react/jsx-runtime";
+var StyledMenuLabel = styled39(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx230(
+  return /* @__PURE__ */ jsx231(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx230(
+      children: /* @__PURE__ */ jsx231(
         Heading,
         {
           renderAs: "span",
@@ -9645,7 +9676,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState9 } from "react";
-import styled41 from "styled-components";
+import styled42 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -9657,11 +9688,11 @@ import {
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
-import { forwardRef as forwardRef13 } from "react";
-import styled39 from "styled-components";
+import { forwardRef as forwardRef14 } from "react";
+import styled40 from "styled-components";
 import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
-import { jsx as jsx231, jsxs as jsxs25 } from "react/jsx-runtime";
-var StyledButton3 = styled39(Button)`
+import { jsx as jsx232, jsxs as jsxs25 } from "react/jsx-runtime";
+var StyledButton3 = styled40(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -9700,7 +9731,7 @@ var StyledButton3 = styled39(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled39.div`
+var StyledLeftIconContainer = styled40.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -9711,7 +9742,7 @@ var StyledLeftIconContainer = styled39.div`
     }
   }
 `;
-var StyledRightIconContainer = styled39.div`
+var StyledRightIconContainer = styled40.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -9722,19 +9753,19 @@ var StyledRightIconContainer = styled39.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = styled39.div`
+var StyledLabelAndDescriptionContainer = styled40.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled39.div`
+var StyledBadgeContainer = styled40.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = forwardRef14(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if (isNotUndefined10(colorScheme)) {
@@ -9743,7 +9774,7 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx231(
+    badge = /* @__PURE__ */ jsx232(
       Icon,
       {
         colorScheme: "purple",
@@ -9765,10 +9796,10 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx231(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx231(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil15(badge) || isNotNil15(command) ? /* @__PURE__ */ jsx231(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx231(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ jsx232(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx232(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil15(badge) || isNotNil15(command) ? /* @__PURE__ */ jsx232(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx232(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -9776,33 +9807,33 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled40 from "styled-components";
-import { jsx as jsx232 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled40.span``;
-var StyledMenuItemDescription = styled40(Text).attrs({
+import styled41 from "styled-components";
+import { jsx as jsx233 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled41.span``;
+var StyledMenuItemDescription = styled41(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx232(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx233(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx232(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx233(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx233, jsxs as jsxs26 } from "react/jsx-runtime";
-var SubMenuContent = styled41(DropdownMenuSubContent)`
+import { jsx as jsx234, jsxs as jsxs26 } from "react/jsx-runtime";
+var SubMenuContent = styled42(DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled41.div`
+var StyledMobileSubMenuItems = styled42.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled41(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled42(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -9813,12 +9844,12 @@ var StyledSubTrigger = styled41(DropdownMenuSubTrigger)`
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
   const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx233(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsx234(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx234(
     MenuItemButton,
     {
       ...props,
       leftIcon: icon,
-      rightIcon: /* @__PURE__ */ jsx233(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx234(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -9834,10 +9865,10 @@ var SubMenu = ({
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs26(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs26(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx233(MenuItemLabel, { children: label }),
-      isNotNil16(description) ? /* @__PURE__ */ jsx233(MenuItemDescription, { children: description }) : null
+      /* @__PURE__ */ jsx234(MenuItemLabel, { children: label }),
+      isNotNil16(description) ? /* @__PURE__ */ jsx234(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx233(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx233(SubMenuContent, { $compact: compact, children }) })
+    /* @__PURE__ */ jsx234(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx234(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs26(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs26(
       SubMenuTrigger,
@@ -9848,28 +9879,28 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx233(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx233(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx234(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx234(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx233(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx234(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx234 } from "react/jsx-runtime";
-var MenuItem = forwardRef14(
+import { jsx as jsx235 } from "react/jsx-runtime";
+var MenuItem = forwardRef15(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx234(
+    return /* @__PURE__ */ jsx235(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx234(
+        children: /* @__PURE__ */ jsx235(
           MenuItemButton,
           {
             ...props,
@@ -9887,10 +9918,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx235, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx236, jsxs as jsxs27 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs27(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx235(MenuLabel, { children: label }),
+    /* @__PURE__ */ jsx236(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -9901,11 +9932,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx236 } from "react/jsx-runtime";
+import { jsx as jsx237 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx236(
+  indicator = /* @__PURE__ */ jsx237(
     Icon,
     {
       size: "sm",
@@ -9915,17 +9946,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx236(
+  return /* @__PURE__ */ jsx237(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx236(
+      children: /* @__PURE__ */ jsx237(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx236(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx237(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -9937,7 +9968,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx237, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs28 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs28(
     "svg",
@@ -9949,14 +9980,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx237(
+        /* @__PURE__ */ jsx238(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ jsx237(
+        /* @__PURE__ */ jsx238(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -9975,14 +10006,14 @@ var CheckboxIndicator = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx237(
+        /* @__PURE__ */ jsx238(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ jsx237(
+        /* @__PURE__ */ jsx238(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -9999,18 +10030,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx237(
+  return /* @__PURE__ */ jsx238(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx237(
+      children: /* @__PURE__ */ jsx238(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx237(CheckboxIndicator, { checked })
+          leftIcon: /* @__PURE__ */ jsx238(CheckboxIndicator, { checked })
         }
       )
     }
@@ -10019,37 +10050,37 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-import { forwardRef as forwardRef17 } from "react";
-import styled46 from "styled-components";
+import { forwardRef as forwardRef18 } from "react";
+import styled47 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled43 from "styled-components";
+import styled44 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled42 from "styled-components";
+import styled43 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx238 } from "react/jsx-runtime";
-var CloseButton = styled42(DialogClose)`
+import { jsx as jsx239 } from "react/jsx-runtime";
+var CloseButton = styled43(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx238(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx238(
+  return /* @__PURE__ */ jsx239(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx239(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx238(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx239(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx239, jsxs as jsxs29 } from "react/jsx-runtime";
-var Header = styled43.header`
+import { jsx as jsx240, jsxs as jsxs29 } from "react/jsx-runtime";
+var Header = styled44.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -10060,7 +10091,7 @@ var Header = styled43.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = styled43(DialogTitle)`
+var Title = styled44(DialogTitle)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -10071,16 +10102,16 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx239(ScreenReaderOnly, { children: /* @__PURE__ */ jsx239(Title, { children: title }) }) : /* @__PURE__ */ jsx239(Title, { children: title });
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx240(ScreenReaderOnly, { children: /* @__PURE__ */ jsx240(Title, { children: title }) }) : /* @__PURE__ */ jsx240(Title, { children: title });
   return /* @__PURE__ */ jsxs29(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
-    hideCloseButton ? null : /* @__PURE__ */ jsx239(ModalCloseButton, {})
+    hideCloseButton ? null : /* @__PURE__ */ jsx240(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
-import { forwardRef as forwardRef15 } from "react";
-import styled44 from "styled-components";
+import { forwardRef as forwardRef16 } from "react";
+import styled45 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -10103,8 +10134,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx240 } from "react/jsx-runtime";
-var StyledModalContent = styled44(DialogContent)`
+import { jsx as jsx241 } from "react/jsx-runtime";
+var StyledModalContent = styled45(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -10145,10 +10176,10 @@ var StyledModalContent = styled44(DialogContent)`
     }
   }
 `;
-var ModalContent = forwardRef15(
+var ModalContent = forwardRef16(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx240(
+    return /* @__PURE__ */ jsx241(
       StyledModalContent,
       {
         ref,
@@ -10163,9 +10194,9 @@ var ModalContent = forwardRef15(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-import { forwardRef as forwardRef16 } from "react";
-import styled45 from "styled-components";
-import { jsx as jsx241 } from "react/jsx-runtime";
+import { forwardRef as forwardRef17 } from "react";
+import styled46 from "styled-components";
+import { jsx as jsx242 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -10178,7 +10209,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled45.div`
+var BackdropComponent = styled46.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -10201,8 +10232,8 @@ var BackdropComponent = styled45.div`
     }
   }
 `;
-var Backdrop = forwardRef16(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx241(
+var Backdrop = forwardRef17(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx242(
     BackdropComponent,
     {
       ref,
@@ -10216,14 +10247,14 @@ var Backdrop = forwardRef16(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx242, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx243, jsxs as jsxs30 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = styled46.div`
+var ModalBody = styled47.div`
   flex-direction: column;
   display: flex;
   order: 2;
 `;
-var Modal = forwardRef17(
+var Modal = forwardRef18(
   ({
     children,
     fullHeight = false,
@@ -10236,7 +10267,7 @@ var Modal = forwardRef17(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx242(
+    return /* @__PURE__ */ jsx243(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -10246,7 +10277,7 @@ var Modal = forwardRef17(
         },
         open: isOpen,
         children: /* @__PURE__ */ jsxs30(DialogPortal, { children: [
-          /* @__PURE__ */ jsx242(Backdrop, {}),
+          /* @__PURE__ */ jsx243(Backdrop, {}),
           /* @__PURE__ */ jsxs30(
             ModalContent,
             {
@@ -10263,8 +10294,8 @@ var Modal = forwardRef17(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx242(ModalBody, { children }),
-                /* @__PURE__ */ jsx242(
+                /* @__PURE__ */ jsx243(ModalBody, { children }),
+                /* @__PURE__ */ jsx243(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -10284,7 +10315,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled47, { css as css28 } from "styled-components";
+import styled48, { css as css28 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil19 } from "@wistia/type-guards";
@@ -10293,8 +10324,8 @@ var getControlProps = (isOpen, onOpenChange) => {
 };
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx243, jsxs as jsxs31 } from "react/jsx-runtime";
-var StyledContent2 = styled47(Content2)`
+import { jsx as jsx244, jsxs as jsxs31 } from "react/jsx-runtime";
+var StyledContent2 = styled48(Content2)`
   ${({ $unstyled }) => !$unstyled && css28`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
@@ -10320,24 +10351,24 @@ var Popover = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs31(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx243(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx243(Portal, { children: /* @__PURE__ */ jsxs31(
+    /* @__PURE__ */ jsx244(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx244(Portal, { children: /* @__PURE__ */ jsxs31(
       StyledContent2,
       {
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx243(Close, { asChild: true, children: /* @__PURE__ */ jsx243(
+          !hideCloseButton && /* @__PURE__ */ jsx244(Close, { asChild: true, children: /* @__PURE__ */ jsx244(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx243(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx244(Icon, { type: "close" })
             }
           ) }),
-          /* @__PURE__ */ jsx243("div", { children })
+          /* @__PURE__ */ jsx244("div", { children })
         ]
       }
     ) })
@@ -10346,11 +10377,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import styled48 from "styled-components";
+import styled49 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil20 } from "@wistia/type-guards";
-import { jsx as jsx244, jsxs as jsxs32 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled48.div`
+import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled49.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -10366,7 +10397,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled48.div`
+var ProgressBarLabel = styled49.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10374,7 +10405,7 @@ var ProgressBarLabel = styled48.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled48(ProgressIndicator)`
+var StyledProgressIndicator = styled49(ProgressIndicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10383,7 +10414,7 @@ var StyledProgressIndicator = styled48(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled48(ProgressRoot)`
+var StyledProgressBar = styled49(ProgressRoot)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10403,14 +10434,14 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs32(ProgressBarWrapper, { children: [
-    isNotNil20(labelLeft) ? /* @__PURE__ */ jsx244(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx244(
+    isNotNil20(labelLeft) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx245(
       StyledProgressBar,
       {
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx244(
+        children: /* @__PURE__ */ jsx245(
           StyledProgressIndicator,
           {
             $max: max,
@@ -10419,17 +10450,17 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil20(labelRight) ? /* @__PURE__ */ jsx244(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil20(labelRight) ? /* @__PURE__ */ jsx245(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
-import { forwardRef as forwardRef18, useId as useId3 } from "react";
-import styled49, { css as css29 } from "styled-components";
+import { forwardRef as forwardRef19, useId as useId3 } from "react";
+import styled50, { css as css29 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx245, jsxs as jsxs33 } from "react/jsx-runtime";
-var RadioIcon = () => /* @__PURE__ */ jsx245(
+import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
+var RadioIcon = () => /* @__PURE__ */ jsx246(
   "svg",
   {
     fill: "inherit",
@@ -10437,7 +10468,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx245(
     viewBox: "0 0 1 1",
     width: "1",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx245(
+    children: /* @__PURE__ */ jsx246(
       "circle",
       {
         cx: "0.5",
@@ -10486,14 +10517,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = styled49.div`
+var StyledRadioWrapper = styled50.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = styled49.div`
+var StyledRadioInput = styled50.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10515,7 +10546,7 @@ var StyledRadioInput = styled49.div`
     }
   }
 `;
-var StyledHiddenRadioInput = styled49.input`
+var StyledHiddenRadioInput = styled50.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input border-color */
@@ -10528,7 +10559,7 @@ var StyledHiddenRadioInput = styled49.input`
     display: block;
   }
 `;
-var Radio = forwardRef18(
+var Radio = forwardRef19(
   ({
     checked,
     disabled = false,
@@ -10551,7 +10582,7 @@ var Radio = forwardRef18(
         $disabled: disabled,
         "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx245(
+          /* @__PURE__ */ jsx246(
             StyledHiddenRadioInput,
             {
               ...props,
@@ -10566,16 +10597,16 @@ var Radio = forwardRef18(
               value
             }
           ),
-          /* @__PURE__ */ jsx245(
+          /* @__PURE__ */ jsx246(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx245(
+              controlSlot: /* @__PURE__ */ jsx246(
                 StyledRadioInput,
                 {
                   $disabled: disabled,
                   $size: size,
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx245(RadioIcon, {})
+                  children: /* @__PURE__ */ jsx246(RadioIcon, {})
                 }
               ),
               description,
@@ -10593,14 +10624,14 @@ var Radio = forwardRef18(
 Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef19 } from "react";
-import styled51, { css as css30 } from "styled-components";
+import { forwardRef as forwardRef20 } from "react";
+import styled52, { css as css30 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
 import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState10 } from "react";
-import { jsx as jsx246 } from "react/jsx-runtime";
+import { jsx as jsx247 } from "react/jsx-runtime";
 var SelectedItemMeasurementsContext = createContext6(
   null
 );
@@ -10615,7 +10646,7 @@ var SelectedItemMeasurementsProvider = ({
     }),
     [selectedItemMeasurements]
   );
-  return /* @__PURE__ */ jsx246(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx247(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemMeasurements = () => {
   const context = useContext5(SelectedItemMeasurementsContext);
@@ -10629,7 +10660,7 @@ var useSelectedItemMeasurements = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { useMemo as useMemo9 } from "react";
-import styled50 from "styled-components";
+import styled51 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 import { createContext as createContext7, useContext as useContext6 } from "react";
@@ -10644,8 +10675,8 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx247 } from "react/jsx-runtime";
-var SelectedItemIndicatorDiv = styled50.div`
+import { jsx as jsx248 } from "react/jsx-runtime";
+var SelectedItemIndicatorDiv = styled51.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -10671,7 +10702,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx248(
     SelectedItemIndicatorDiv,
     {
       style: {
@@ -10684,7 +10715,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx248, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs34 } from "react/jsx-runtime";
 var segmentedControlStyles = css30`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -10695,10 +10726,10 @@ var segmentedControlStyles = css30`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled51(ToggleGroupRoot)`
+var StyledSegmentedControl = styled52(ToggleGroupRoot)`
   ${segmentedControlStyles}
 `;
-var SegmentedControl = forwardRef19(
+var SegmentedControl = forwardRef20(
   ({
     children,
     disabled = false,
@@ -10710,7 +10741,7 @@ var SegmentedControl = forwardRef19(
     if (isNil14(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx248(
+    return /* @__PURE__ */ jsx249(
       StyledSegmentedControl,
       {
         ref,
@@ -10722,8 +10753,8 @@ var SegmentedControl = forwardRef19(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx248(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs34(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ jsx248(SelectedItemIndicator, {}),
+        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs34(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ jsx249(SelectedItemIndicator, {}),
           children
         ] }) })
       }
@@ -10733,8 +10764,8 @@ var SegmentedControl = forwardRef19(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef20, useEffect as useEffect6, useRef as useRef9 } from "react";
-import styled52, { css as css31 } from "styled-components";
+import { forwardRef as forwardRef21, useEffect as useEffect6, useRef as useRef9 } from "react";
+import styled53, { css as css31 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
@@ -10813,10 +10844,10 @@ var segmentedControlItemStyles = css31`
     }
   }
 `;
-var StyledSegmentedControlItem = styled52(ToggleGroupItem)`
+var StyledSegmentedControlItem = styled53(ToggleGroupItem)`
   ${segmentedControlItemStyles}
 `;
-var SegmentedControlItem = forwardRef20(
+var SegmentedControlItem = forwardRef21(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
@@ -10884,10 +10915,10 @@ import {
   Value,
   ScrollDownButton
 } from "@radix-ui/react-select";
-import { forwardRef as forwardRef21 } from "react";
-import styled53 from "styled-components";
-import { jsx as jsx249, jsxs as jsxs36 } from "react/jsx-runtime";
-var StyledTrigger = styled53(Trigger3)`
+import { forwardRef as forwardRef22 } from "react";
+import styled54 from "styled-components";
+import { jsx as jsx250, jsxs as jsxs36 } from "react/jsx-runtime";
+var StyledTrigger = styled54(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-select-color-bg: var(--wui-color-bg-surface);
   --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -10935,7 +10966,7 @@ var StyledTrigger = styled53(Trigger3)`
     background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var StyledContent3 = styled53(Content3)`
+var StyledContent3 = styled54(Content3)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -10953,7 +10984,7 @@ var StyledContent3 = styled53(Content3)`
   max-height: var(--radix-select-content-available-height);
   z-index: var(--wui-zindex-select);
 `;
-var Select = forwardRef21(
+var Select = forwardRef22(
   ({
     colorScheme = "inherit",
     children,
@@ -10977,8 +11008,8 @@ var Select = forwardRef21(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ jsx249(Value, { placeholder }),
-                /* @__PURE__ */ jsx249(
+                /* @__PURE__ */ jsx250(Value, { placeholder }),
+                /* @__PURE__ */ jsx250(
                   Icon,
                   {
                     size: "md",
@@ -10988,10 +11019,10 @@ var Select = forwardRef21(
               ]
             }
           ),
-          /* @__PURE__ */ jsx249(Portal2, { children: /* @__PURE__ */ jsxs36(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ jsx249(ScrollUpButton, { children: /* @__PURE__ */ jsx249(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ jsx249(Viewport, { children }),
-            /* @__PURE__ */ jsx249(ScrollDownButton, { children: /* @__PURE__ */ jsx249(Icon, { type: "caret-down" }) })
+          /* @__PURE__ */ jsx250(Portal2, { children: /* @__PURE__ */ jsxs36(StyledContent3, { position: "popper", children: [
+            /* @__PURE__ */ jsx250(ScrollUpButton, { children: /* @__PURE__ */ jsx250(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ jsx250(Viewport, { children }),
+            /* @__PURE__ */ jsx250(ScrollDownButton, { children: /* @__PURE__ */ jsx250(Icon, { type: "caret-down" }) })
           ] }) })
         ]
       }
@@ -11002,10 +11033,10 @@ Select.displayName = "Select";
 
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
-import { forwardRef as forwardRef22 } from "react";
-import styled54 from "styled-components";
-import { jsx as jsx250, jsxs as jsxs37 } from "react/jsx-runtime";
-var StyledItem = styled54(Item)`
+import { forwardRef as forwardRef23 } from "react";
+import styled55 from "styled-components";
+import { jsx as jsx251, jsxs as jsxs37 } from "react/jsx-runtime";
+var StyledItem = styled55(Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -11028,10 +11059,10 @@ var StyledItem = styled54(Item)`
     background-color: transparent;
   }
 `;
-var StyledIconContainer = styled54.span`
+var StyledIconContainer = styled55.span`
   width: 12px;
 `;
-var SelectOption = forwardRef22(
+var SelectOption = forwardRef23(
   ({ children, ...props }, forwardedRef) => {
     return /* @__PURE__ */ jsxs37(
       StyledItem,
@@ -11039,14 +11070,14 @@ var SelectOption = forwardRef22(
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx250(StyledIconContainer, { children: /* @__PURE__ */ jsx250(ItemIndicator, { children: /* @__PURE__ */ jsx250(
+          /* @__PURE__ */ jsx251(StyledIconContainer, { children: /* @__PURE__ */ jsx251(ItemIndicator, { children: /* @__PURE__ */ jsx251(
             Icon,
             {
               size: "sm",
               type: "checkmark"
             }
           ) }) }),
-          /* @__PURE__ */ jsx250(ItemText, { children })
+          /* @__PURE__ */ jsx251(ItemText, { children })
         ]
       }
     );
@@ -11056,14 +11087,14 @@ SelectOption.displayName = "Option";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label2 } from "@radix-ui/react-select";
-import styled55 from "styled-components";
-import { jsx as jsx251, jsxs as jsxs38 } from "react/jsx-runtime";
-var StyledLabel4 = styled55(Label2)`
+import styled56 from "styled-components";
+import { jsx as jsx252, jsxs as jsxs38 } from "react/jsx-runtime";
+var StyledLabel4 = styled56(Label2)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs38(Group, { ...props, children: [
-    /* @__PURE__ */ jsx251(StyledLabel4, { children: /* @__PURE__ */ jsx251(
+    /* @__PURE__ */ jsx252(StyledLabel4, { children: /* @__PURE__ */ jsx252(
       Text,
       {
         prominence: "secondary",
@@ -11076,10 +11107,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef23, useId as useId4 } from "react";
-import styled56, { css as css32 } from "styled-components";
+import { forwardRef as forwardRef24, useId as useId4 } from "react";
+import styled57, { css as css32 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx252, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs39 } from "react/jsx-runtime";
 var sizeSmall3 = css32`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
@@ -11130,14 +11161,14 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge3;
   return sizeMedium3;
 };
-var StyledSwitchWrapper = styled56.div`
+var StyledSwitchWrapper = styled57.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = styled56.div`
+var StyledSwitchInput = styled57.div`
   ${({ $size }) => getSizeCss3($size)}
   line-height: 0;
   margin: 0;
@@ -11165,7 +11196,7 @@ var StyledSwitchInput = styled56.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = styled56.input`
+var StyledHiddenSwitchInput = styled57.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color and toggle position */
@@ -11181,7 +11212,7 @@ var StyledHiddenSwitchInput = styled56.input`
     }
   }
 `;
-var Switch = forwardRef23(
+var Switch = forwardRef24(
   ({
     checked,
     disabled = false,
@@ -11199,7 +11230,7 @@ var Switch = forwardRef23(
     const generatedId = useId4();
     const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ jsxs39(StyledSwitchWrapper, { $disabled: disabled, children: [
-      /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(
         StyledHiddenSwitchInput,
         {
           ...props,
@@ -11214,10 +11245,10 @@ var Switch = forwardRef23(
           value
         }
       ),
-      /* @__PURE__ */ jsx252(
+      /* @__PURE__ */ jsx253(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ jsx252(
+          controlSlot: /* @__PURE__ */ jsx253(
             StyledSwitchInput,
             {
               $disabled: disabled,
@@ -11239,9 +11270,9 @@ var Switch = forwardRef23(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import styled57, { css as css33 } from "styled-components";
-import { jsx as jsx253 } from "react/jsx-runtime";
-var StyledTable = styled57.table`
+import styled58, { css as css33 } from "styled-components";
+import { jsx as jsx254 } from "react/jsx-runtime";
+var StyledTable = styled58.table`
   width: 100%;
   border-collapse: collapse;
 
@@ -11263,7 +11294,7 @@ var Table = ({
   divided = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx253(
+  return /* @__PURE__ */ jsx254(
     StyledTable,
     {
       $divided: divided,
@@ -11275,35 +11306,35 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import styled58 from "styled-components";
+import styled59 from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
 import { createContext as createContext8 } from "react";
 var TableSectionContext = createContext8(null);
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx254 } from "react/jsx-runtime";
-var StyledTbody = styled58.tbody``;
+import { jsx as jsx255 } from "react/jsx-runtime";
+var StyledTbody = styled59.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx254(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx254(StyledTbody, { ...props, children }) });
+  return /* @__PURE__ */ jsx255(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx255(StyledTbody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled59, { css as css34 } from "styled-components";
-import { jsx as jsx255 } from "react/jsx-runtime";
+import styled60, { css as css34 } from "styled-components";
+import { jsx as jsx256 } from "react/jsx-runtime";
 var sharedStyles = css34`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled59.th`
+var StyledTh = styled60.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = styled59.td`
+var StyledTd = styled60.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -11312,51 +11343,51 @@ var StyledTd = styled59.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext7(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx255(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx256(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx255(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx256(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFooter.tsx
-import styled60 from "styled-components";
-import { jsx as jsx256 } from "react/jsx-runtime";
-var StyledTfoot = styled60.tfoot``;
+import styled61 from "styled-components";
+import { jsx as jsx257 } from "react/jsx-runtime";
+var StyledTfoot = styled61.tfoot``;
 var TableFooter = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx256(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx256(StyledTfoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx257(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx257(StyledTfoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-import styled61 from "styled-components";
-import { jsx as jsx257 } from "react/jsx-runtime";
-var StyledThead = styled61.thead``;
+import styled62 from "styled-components";
+import { jsx as jsx258 } from "react/jsx-runtime";
+var StyledThead = styled62.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx257(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx257(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx258(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx258(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-import styled62 from "styled-components";
-import { jsx as jsx258 } from "react/jsx-runtime";
-var StyledTr = styled62.tr``;
+import styled63 from "styled-components";
+import { jsx as jsx259 } from "react/jsx-runtime";
+var StyledTr = styled63.tr``;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx258(StyledTr, { ...props, children });
+  return /* @__PURE__ */ jsx259(StyledTr, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef25, useState as useState11 } from "react";
+import { forwardRef as forwardRef26, useState as useState11 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil24, isNil as isNil15 } from "@wistia/type-guards";
-import styled67 from "styled-components";
+import styled68 from "styled-components";
 
 // src/components/Tabs/TabPanel.tsx
-import styled63 from "styled-components";
+import styled64 from "styled-components";
 import { Content as TabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx259 } from "react/jsx-runtime";
-var StyledTabPanel = styled63(TabsContent)`
+import { jsx as jsx260 } from "react/jsx-runtime";
+var StyledTabPanel = styled64(TabsContent)`
   display: flex;
   flex-direction: column;
 `;
 var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ jsx259(
+  return /* @__PURE__ */ jsx260(
     StyledTabPanel,
     {
       value,
@@ -11368,10 +11399,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-import styled64 from "styled-components";
+import styled65 from "styled-components";
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { jsx as jsx260 } from "react/jsx-runtime";
-var StyledTabList = styled64(RadixTabList)`
+import { jsx as jsx261 } from "react/jsx-runtime";
+var StyledTabList = styled65(RadixTabList)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -11384,7 +11415,7 @@ var TabList = ({
   ariaLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx260(
+  return /* @__PURE__ */ jsx261(
     StyledTabList,
     {
       $fullWidth: fullWidth,
@@ -11397,8 +11428,8 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect7, useRef as useRef10 } from "react";
-import styled65 from "styled-components";
+import { forwardRef as forwardRef25, useEffect as useEffect7, useRef as useRef10 } from "react";
+import styled66 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 
@@ -11416,14 +11447,14 @@ var useTabsValue = () => {
 
 // src/components/Tabs/TabItem.tsx
 import { jsxs as jsxs40 } from "react/jsx-runtime";
-var StyledTabItem = styled65(RadixTab)`
+var StyledTabItem = styled66(RadixTab)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
     outline: none;
   }
 `;
-var TabItem = forwardRef24(
+var TabItem = forwardRef25(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
@@ -11496,9 +11527,9 @@ var extractTabItems = (children) => {
 
 // src/components/Tabs/SelectedItemIndicator.tsx
 import { useMemo as useMemo10 } from "react";
-import styled66 from "styled-components";
-import { jsx as jsx261 } from "react/jsx-runtime";
-var TabsSelectedItemIndicatorDiv = styled66(SelectedItemIndicatorDiv)`
+import styled67 from "styled-components";
+import { jsx as jsx262 } from "react/jsx-runtime";
+var TabsSelectedItemIndicatorDiv = styled67(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11517,7 +11548,7 @@ var SelectedItemIndicator2 = () => {
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx261(
+  return /* @__PURE__ */ jsx262(
     TabsSelectedItemIndicatorDiv,
     {
       style: {
@@ -11530,24 +11561,24 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx262, jsxs as jsxs41 } from "react/jsx-runtime";
-var TabsContainer = styled67.div`
+import { jsx as jsx263, jsxs as jsxs41 } from "react/jsx-runtime";
+var TabsContainer = styled68.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = styled67.div`
+var StickyTabContent = styled68.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = styled67(TabsRoot)`
+var StyledTabsRoot = styled68(TabsRoot)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
 `;
-var Tabs = forwardRef25(
+var Tabs = forwardRef26(
   ({
     children,
     fullWidth = true,
@@ -11565,7 +11596,7 @@ var Tabs = forwardRef25(
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
     const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ jsx262(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx262(
+    return /* @__PURE__ */ jsx263(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx263(
       StyledTabsRoot,
       {
         ref,
@@ -11573,14 +11604,14 @@ var Tabs = forwardRef25(
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ jsx262(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs41(SelectedItemMeasurementsProvider, { children: [
+        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs41(SelectedItemMeasurementsProvider, { children: [
           /* @__PURE__ */ jsxs41(
             TabList,
             {
               ariaLabel,
               fullWidth,
               children: [
-                /* @__PURE__ */ jsx262(SelectedItemIndicator2, {}),
+                /* @__PURE__ */ jsx263(SelectedItemIndicator2, {}),
                 tabItems.map((tab) => {
                   const {
                     value,
@@ -11590,7 +11621,7 @@ var Tabs = forwardRef25(
                     "aria-label": ariaLabelForTab
                   } = tab.props;
                   if (isNil15(icon)) {
-                    return /* @__PURE__ */ jsx262(
+                    return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
                         disabled,
@@ -11601,7 +11632,7 @@ var Tabs = forwardRef25(
                     );
                   }
                   if (isNotNil24(label)) {
-                    return /* @__PURE__ */ jsx262(
+                    return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
                         disabled,
@@ -11613,7 +11644,7 @@ var Tabs = forwardRef25(
                     );
                   }
                   if (isNotNil24(ariaLabelForTab)) {
-                    return /* @__PURE__ */ jsx262(
+                    return /* @__PURE__ */ jsx263(
                       TabItem,
                       {
                         "aria-label": ariaLabelForTab,
@@ -11629,7 +11660,7 @@ var Tabs = forwardRef25(
               ]
             }
           ),
-          /* @__PURE__ */ jsx262(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx262(
+          /* @__PURE__ */ jsx263(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx263(
             TabPanel,
             {
               value: tab.props.value,
@@ -11645,19 +11676,19 @@ var Tabs = forwardRef25(
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx263 } from "react/jsx-runtime";
-var Tab = forwardRef26(({ children }, ref) => {
-  return /* @__PURE__ */ jsx263("div", { ref, children });
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx264 } from "react/jsx-runtime";
+var Tab = forwardRef27(({ children }, ref) => {
+  return /* @__PURE__ */ jsx264("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef27 } from "react";
-import styled68 from "styled-components";
+import { forwardRef as forwardRef28 } from "react";
+import styled69 from "styled-components";
 import { isNil as isNil16, isNotNil as isNotNil25, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx264, jsxs as jsxs42 } from "react/jsx-runtime";
-var TagLabel = styled68.a`
+import { Fragment as Fragment8, jsx as jsx265, jsxs as jsxs42 } from "react/jsx-runtime";
+var TagLabel = styled69.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -11692,14 +11723,14 @@ var TagLabel = styled68.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled68.div`
+var TagDivider = styled69.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled68.button`
+var StyledRemoveButton = styled69.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11727,7 +11758,7 @@ var StyledRemoveButton = styled68.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled68.div`
+var StyledTag = styled69.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11749,7 +11780,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     );
   }
   return /* @__PURE__ */ jsxs42(Fragment8, { children: [
-    /* @__PURE__ */ jsx264(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsx265(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs42(
       StyledRemoveButton,
       {
@@ -11757,20 +11788,20 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx264(
+          /* @__PURE__ */ jsx265(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx264(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx265(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef27(
+var Tag = forwardRef28(
   ({
     onClickRemove,
     colorScheme = "inherit",
@@ -11800,7 +11831,7 @@ var Tag = forwardRef27(
               ]
             }
           ),
-          /* @__PURE__ */ jsx264(
+          /* @__PURE__ */ jsx265(
             RemoveButton,
             {
               colorScheme,
@@ -11816,26 +11847,26 @@ var Tag = forwardRef27(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled69, { css as css35 } from "styled-components";
+import styled70, { css as css35 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
-import { jsx as jsx265, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx265(
+    return /* @__PURE__ */ jsx266(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx265("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ jsx266("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ jsx265(
+  return /* @__PURE__ */ jsx266(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx265("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ jsx266("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -11843,12 +11874,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx265(
+  return /* @__PURE__ */ jsx266(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx265("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ jsx266("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -11858,7 +11889,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled69.svg`
+var WistiaLogoComponent = styled70.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -11929,14 +11960,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx265("title", { children: title }),
-        isNotNil26(description) ? /* @__PURE__ */ jsx265("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx266("title", { children: title }),
+        isNotNil26(description) ? /* @__PURE__ */ jsx266("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx265("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx266("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 export {
@@ -11949,6 +11980,7 @@ export {
   Button,
   ButtonGroup,
   Card,
+  Center,
   Checkbox,
   CheckboxGroup,
   CheckboxMenuItem,