@wistia/ui 0.4.0 → 0.4.2-beta.1edded51.b4258de

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.0
+ * @license @wistia/ui v0.4.2-beta.1edded51.b4258de
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -47,6 +47,7 @@ __export(index_exports, {
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
+  Card: () => Card,
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
   CheckboxMenuItem: () => CheckboxMenuItem,
@@ -6141,18 +6142,69 @@ var ButtonGroup = ({
 };
 ButtonGroup.displayName = "ButtonGroup";
 
+// src/components/Card/Card.tsx
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_jsx_runtime169 = require("react/jsx-runtime");
+var StyledCard = (0, import_styled_components25.default)(Box)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  box-sizing: border-box;
+  padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
+  outline: 2px solid ${({ $borderColor }) => $borderColor};
+  outline-offset: -2px;
+  border-radius: var(--wui-border-radius-02);
+  display: flex;
+`;
+var prominenceMap = {
+  default: {
+    backgroundColor: "var(--wui-color-bg-surface)",
+    borderColor: "var(--wui-color-border)"
+  },
+  secondary: {
+    backgroundColor: "var(--wui-color-bg-surface-secondary)",
+    borderColor: "var(--wui-color-border-secondary)"
+  },
+  tertiary: {
+    backgroundColor: "var(--wui-color-bg-surface-tertiary)",
+    borderColor: "var(--wui-color-border-secondary)"
+  }
+};
+var Card = ({
+  children,
+  paddingSize = "space-03",
+  gap = "space-03",
+  direction = "column",
+  colorScheme = "inherit",
+  prominence = "secondary",
+  border = false,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+  StyledCard,
+  {
+    $backgroundColor: prominenceMap[prominence].backgroundColor,
+    $borderColor: border ? prominenceMap[prominence].borderColor : "transparent",
+    $colorScheme: colorScheme,
+    $paddingSize: paddingSize,
+    direction,
+    gap,
+    ...props,
+    children
+  }
+);
+Card.displayName = "Card";
+
 // src/components/Checkbox/Checkbox.tsx
 var import_react15 = require("react");
 var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_styled_components28 = __toESM(require("styled-components"));
+var import_styled_components29 = __toESM(require("styled-components"));
 var import_type_guards17 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components26 = __toESM(require("styled-components"));
+var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/components/Heading/Heading.tsx
 var import_react14 = require("react");
-var import_styled_components25 = __toESM(require("styled-components"));
+var import_styled_components26 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -6160,44 +6212,44 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-var import_jsx_runtime169 = require("react/jsx-runtime");
-var heroStyle = import_styled_components25.css`
+var import_jsx_runtime170 = require("react/jsx-runtime");
+var heroStyle = import_styled_components26.css`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components25.css`
+var heading1TextStyle = import_styled_components26.css`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components25.css`
+var heading2TextStyle = import_styled_components26.css`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components25.css`
+var heading3TextStyle = import_styled_components26.css`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components25.css`
+var heading4TextStyle = import_styled_components26.css`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components25.css`
+var heading5TextStyle = import_styled_components26.css`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components25.css`
+var heading6TextStyle = import_styled_components26.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -6213,7 +6265,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components25.default.div`
+var StyledHeading = import_styled_components26.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6222,16 +6274,16 @@ var StyledHeading = import_styled_components25.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components25.css`
+  ${({ $inline }) => $inline && import_styled_components26.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components25.css`
+  ${({ $disabled }) => $disabled && import_styled_components26.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components25.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components26.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components25.css`
+  ${({ $align }) => import_styled_components26.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -6256,7 +6308,7 @@ var HeadingComponent = (0, import_react14.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
     StyledHeading,
     {
       ref,
@@ -6276,8 +6328,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Label/Label.tsx
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components26.css`
+var import_jsx_runtime171 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components27.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -6285,10 +6337,10 @@ var requiredStyle = import_styled_components26.css`
     content: '*';
   }
 `;
-var disabledStyle = import_styled_components26.css`
+var disabledStyle = import_styled_components27.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = (0, import_styled_components26.default)(Heading).attrs({
+var StyledLabel2 = (0, import_styled_components27.default)(Heading).attrs({
   variant: "heading6",
   renderAs: "label"
 })`
@@ -6317,7 +6369,7 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
   StyledLabel2,
   {
     ...otherProps,
@@ -6331,10 +6383,10 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
+var import_styled_components28 = __toESM(require("styled-components"));
 var import_type_guards16 = require("@wistia/type-guards");
-var import_jsx_runtime171 = require("react/jsx-runtime");
-var StyledLabelDescription = import_styled_components27.default.div`
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var StyledLabelDescription = import_styled_components28.default.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -6347,13 +6399,13 @@ var LabelDescription = ({
   if ((0, import_type_guards16.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime172 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+var import_jsx_runtime173 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -6361,7 +6413,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
       "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",
@@ -6370,7 +6422,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
     )
   }
 );
-var StyledCheckboxWrapper = import_styled_components28.default.div`
+var StyledCheckboxWrapper = import_styled_components29.default.div`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -6384,7 +6436,7 @@ var StyledCheckboxWrapper = import_styled_components28.default.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = (0, import_styled_components28.default)(import_react_checkbox.Root)`
+var StyledCheckboxRoot = (0, import_styled_components29.default)(import_react_checkbox.Root)`
   all: unset; /* CheckboxRoot renders as a button element, so we need to reset all styles */
   background-color: var(--wui-color-bg-fill-white);
   min-width: 16px;
@@ -6418,10 +6470,10 @@ var StyledCheckboxRoot = (0, import_styled_components28.default)(import_react_ch
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = (0, import_styled_components28.default)(import_react_checkbox.Indicator)`
+var StyledCheckboxIndicator = (0, import_styled_components29.default)(import_react_checkbox.Indicator)`
   display: flex;
 `;
-var StyledLabelWrapper = import_styled_components28.default.div`
+var StyledLabelWrapper = import_styled_components29.default.div`
   display: flex;
   flex-direction: column;
   margin-left: var(--wui-space-02);
@@ -6442,8 +6494,8 @@ var Checkbox = (0, import_react15.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react15.useId)();
     const computedId = (0, import_type_guards17.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(StyledCheckboxWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
         StyledCheckboxRoot,
         {
           ref,
@@ -6468,11 +6520,11 @@ var Checkbox = (0, import_react15.forwardRef)(
           required,
           value,
           ...otherProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(CheckIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(CheckIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(StyledLabelWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
           Label,
           {
             disabled,
@@ -6481,7 +6533,7 @@ var Checkbox = (0, import_react15.forwardRef)(
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(LabelDescription, { children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(LabelDescription, { children: description })
       ] })
     ] });
   }
@@ -6489,22 +6541,22 @@ var Checkbox = (0, import_react15.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
-var import_jsx_runtime173 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components29.css`
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_jsx_runtime174 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components30.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components29.css`
+var verticalBorderCss = import_styled_components30.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components29.default.div`
+var DividerComponent = import_styled_components30.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -6519,7 +6571,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -6533,15 +6585,15 @@ Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
 var import_react17 = require("react");
-var import_styled_components31 = __toESM(require("styled-components"));
+var import_styled_components32 = __toESM(require("styled-components"));
 var import_type_guards18 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react16 = require("react");
-var import_styled_components30 = __toESM(require("styled-components"));
-var import_jsx_runtime174 = require("react/jsx-runtime");
+var import_styled_components31 = __toESM(require("styled-components"));
+var import_jsx_runtime175 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components30.default.div`
+var StyledStack = import_styled_components31.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -6550,7 +6602,7 @@ var StackComponent = (0, import_react16.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
       StyledStack,
       {
         ref,
@@ -6566,8 +6618,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime175 = require("react/jsx-runtime");
-var StyledForm = import_styled_components31.default.form`
+var import_jsx_runtime176 = require("react/jsx-runtime");
+var StyledForm = import_styled_components32.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -6636,7 +6688,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
   }, [values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
       Stack,
       {
         gap: "space-05",
@@ -6695,9 +6747,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 var import_react19 = require("react");
 var import_type_guards19 = require("@wistia/type-guards");
-var import_jsx_runtime176 = require("react/jsx-runtime");
+var import_jsx_runtime177 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = (0, import_react19.useRef)(null);
@@ -6706,10 +6758,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards19.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards19.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards19.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards19.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
         ErrorItem,
         {
           error: err,
@@ -6717,7 +6769,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -6732,94 +6784,94 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react23 = require("react");
-var import_styled_components34 = __toESM(require("styled-components"));
+var import_styled_components35 = __toESM(require("styled-components"));
 var import_type_guards20 = require("@wistia/type-guards");
 
 // src/components/Text/Text.tsx
 var import_react20 = require("react");
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime177 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components32.css`
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_jsx_runtime178 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components33.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components32.css`
+var labelBoldStyles = import_styled_components33.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components32.css`
+var body1TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
   --line-height: var(--wui-typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components32.css`
+var body2TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
   --line-height: var(--wui-typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components32.css`
+var body3TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
   --line-height: var(--wui-typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components32.css`
+var body4TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
   --line-height: var(--wui-typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components32.css`
+var label1TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components32.css`
+var label2TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components32.css`
+var label3TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components32.css`
+var label4TextStyle = import_styled_components33.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components32.css`
+var body1MonoTextStyle = import_styled_components33.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components32.css`
+var body2MonoTextStyle = import_styled_components33.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components32.css`
+var body3MonoTextStyle = import_styled_components33.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components32.css`
+var body4MonoTextStyle = import_styled_components33.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -6837,7 +6889,7 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var StyledText = import_styled_components32.default.div`
+var StyledText = import_styled_components33.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -6861,19 +6913,19 @@ var StyledText = import_styled_components32.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components32.css`
+  ${({ $inline }) => $inline && import_styled_components33.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components32.css`
+  ${({ $disabled }) => $disabled && import_styled_components33.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components32.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components33.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components32.css`
+  ${({ $align }) => import_styled_components33.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components32.css`
+  ${({ as }) => as === "p" && import_styled_components33.css`
       display: block;
     `}
 `;
@@ -6891,7 +6943,7 @@ var TextComponent = (0, import_react20.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
       StyledText,
       {
         ref,
@@ -6916,25 +6968,25 @@ var Text = makePolymorphic(TextComponent);
 var import_react22 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
+var import_styled_components34 = __toESM(require("styled-components"));
 var import_react21 = require("react");
-var import_jsx_runtime178 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components33.default.fieldset`
+var import_jsx_runtime179 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components34.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components33.default.legend`
+var StyledLegend = import_styled_components34.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = (0, import_react21.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
           Heading,
           {
             renderAs: StyledLegend,
@@ -6950,7 +7002,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime179 = require("react/jsx-runtime");
+var import_jsx_runtime180 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react22.createContext)(null);
 var CheckboxGroup = ({
   children,
@@ -6965,13 +7017,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-var import_jsx_runtime180 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components34.default.div`
+var import_jsx_runtime181 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components35.default.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -6979,7 +7031,7 @@ var StyledFormField = import_styled_components34.default.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = import_styled_components34.default.ul`
+var StyledErrorList = import_styled_components35.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -6989,7 +7041,7 @@ var StyledErrorList = import_styled_components34.default.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = (0, import_type_guards20.isArray)(errors);
-  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -6999,7 +7051,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -7056,10 +7108,10 @@ var FormField = ({
     };
   }
   import_react23.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Label, { htmlFor: id, children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Label, { htmlFor: id, children: label }),
     (0, import_react23.cloneElement)(children, childProps),
-    (0, import_type_guards20.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+    (0, import_type_guards20.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       ErrorMessages,
       {
         errors: computedError,
@@ -7072,7 +7124,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react24 = require("react");
-var import_jsx_runtime181 = require("react/jsx-runtime");
+var import_jsx_runtime182 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react24.createContext)(null);
 var RadioGroup = ({
   children,
@@ -7087,15 +7139,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 var import_react25 = require("react");
-var import_styled_components35 = __toESM(require("styled-components"));
-var import_jsx_runtime182 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components35.default)(Button)`
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_jsx_runtime183 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components36.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -7112,7 +7164,7 @@ var StyledButton2 = (0, import_styled_components35.default)(Button)`
 var IconButton = (0, import_react25.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
       StyledButton2,
       {
         ...props,
@@ -7131,10 +7183,10 @@ IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
 var import_react26 = require("react");
-var import_styled_components36 = __toESM(require("styled-components"));
+var import_styled_components37 = __toESM(require("styled-components"));
 var import_type_guards21 = require("@wistia/type-guards");
-var import_jsx_runtime183 = require("react/jsx-runtime");
-var inputStyles = import_styled_components36.css`
+var import_jsx_runtime184 = require("react/jsx-runtime");
+var inputStyles = import_styled_components37.css`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border);
@@ -7175,7 +7227,7 @@ var inputStyles = import_styled_components36.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components36.default.div`
+var StyledInputContainer = import_styled_components37.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7219,18 +7271,24 @@ var StyledInputContainer = import_styled_components36.default.div`
     padding-right: 32px;
   }
 `;
+var isValidRef = (ref) => {
+  return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards21.isNotNil)(ref.current);
+};
 var Input = (0, import_react26.forwardRef)(
   ({
     fullWidth = false,
     monospace = false,
     type = "text",
+    autoSelect = false,
     leftIcon,
     rightIcon,
     ...props
-  }, ref) => {
+  }, externalRef) => {
+    const internalRef = (0, import_react26.useRef)();
+    const ref = isValidRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards21.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { type: "search" });
     }
     if ((0, import_type_guards21.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react26.cloneElement)(leftIconToDisplay, {
@@ -7245,24 +7303,36 @@ var Input = (0, import_react26.forwardRef)(
         className: "wui-input-right-icon"
       });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
+    const handleFocus = (event) => {
+      if ((0, import_type_guards21.isNotNil)(props.onFocus)) {
+        props.onFocus(event);
+      }
+      if (autoSelect && ref && "current" in ref) {
+        requestAnimationFrame(() => {
+          ref.current?.select();
+        });
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
             "textarea",
             {
               ...props,
-              ref
+              ref,
+              onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
             "input",
             {
               ...props,
               ref,
+              onFocus: handleFocus,
               type
             }
           ),
@@ -7275,11 +7345,11 @@ var Input = (0, import_react26.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_styled_components38 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards22 = require("@wistia/type-guards");
-var import_jsx_runtime184 = require("react/jsx-runtime");
-var open = import_styled_components37.keyframes`
+var import_jsx_runtime185 = require("react/jsx-runtime");
+var open = import_styled_components38.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -7289,7 +7359,7 @@ var open = import_styled_components37.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components37.keyframes`
+var close = import_styled_components38.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -7299,7 +7369,7 @@ var close = import_styled_components37.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuContentCss = import_styled_components37.css`
+var menuContentCss = import_styled_components38.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
@@ -7338,7 +7408,7 @@ var menuContentCss = import_styled_components37.css`
     margin: var(--wui-space-02) 0;
   }
 `;
-var menuItemCss = import_styled_components37.css`
+var menuItemCss = import_styled_components38.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -7348,7 +7418,7 @@ var menuItemCss = import_styled_components37.css`
   --menu-label-font-weight: var(--wui-typography-label-3-weight);
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
 `;
-var compactMenuItemCss = import_styled_components37.css`
+var compactMenuItemCss = import_styled_components38.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -7358,7 +7428,7 @@ var compactMenuItemCss = import_styled_components37.css`
   --menu-label-font-weight: var(--wui-typography-label-4-weight);
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
 `;
-var MenuContent = (0, import_styled_components37.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components38.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
   ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
@@ -7384,24 +7454,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards22.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards22.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
           MenuContent,
           {
             ...props,
@@ -7421,19 +7491,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_styled_components39 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime185 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components38.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var import_jsx_runtime186 = require("react/jsx-runtime");
+var StyledMenuLabel = (0, import_styled_components39.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
         Heading,
         {
           renderAs: "span",
@@ -7449,16 +7519,16 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 var import_react28 = require("react");
-var import_styled_components41 = __toESM(require("styled-components"));
+var import_styled_components42 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards24 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react27 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
+var import_styled_components40 = __toESM(require("styled-components"));
 var import_type_guards23 = require("@wistia/type-guards");
-var import_jsx_runtime186 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components39.default)(Button)`
+var import_jsx_runtime187 = require("react/jsx-runtime");
+var StyledButton3 = (0, import_styled_components40.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -7496,7 +7566,7 @@ var StyledButton3 = (0, import_styled_components39.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components39.default.div`
+var StyledLeftIconContainer = import_styled_components40.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -7505,7 +7575,7 @@ var StyledLeftIconContainer = import_styled_components39.default.div`
     width: var(--menu-item-left-icon-size);
   }
 `;
-var StyledRightIconContainer = import_styled_components39.default.div`
+var StyledRightIconContainer = import_styled_components40.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -7514,13 +7584,13 @@ var StyledRightIconContainer = import_styled_components39.default.div`
     width: var(--menu-item-right-icon-size);
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components39.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components40.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components39.default.div`
+var StyledBadgeContainer = import_styled_components40.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -7535,7 +7605,7 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+    badge = /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
       Icon,
       {
         colorScheme: "purple",
@@ -7547,7 +7617,7 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
     StyledButton3,
     {
       ...props,
@@ -7557,10 +7627,10 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards23.isNotNil)(badge) || (0, import_type_guards23.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledLabelAndDescriptionContainer, { children }),
+        (0, import_type_guards23.isNotNil)(badge) || (0, import_type_guards23.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -7568,23 +7638,23 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components40 = __toESM(require("styled-components"));
-var import_jsx_runtime187 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components40.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components40.default)(Text).attrs({
+var import_styled_components41 = __toESM(require("styled-components"));
+var import_jsx_runtime188 = require("react/jsx-runtime");
+var StyledMenuItemLabel = import_styled_components41.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components41.default)(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-var import_jsx_runtime188 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components41.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var import_jsx_runtime189 = require("react/jsx-runtime");
+var SubMenuContent = (0, import_styled_components42.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -7592,10 +7662,10 @@ var SubMenuContent = (0, import_styled_components41.default)(import_react_dropdo
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components41.default.div`
+var StyledMobileSubMenuItems = import_styled_components42.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components41.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components42.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -7606,11 +7676,11 @@ var StyledSubTrigger = (0, import_styled_components41.default)(import_react_drop
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -7623,14 +7693,14 @@ var SubMenu = ({
 }) => {
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = (0, import_react28.useState)(false);
-  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards24.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemDescription, { children: description }) : null
+  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemLabel, { children: label }),
+      (0, import_type_guards24.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
       SubMenuTrigger,
       {
         ...props,
@@ -7639,12 +7709,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemDescription, { children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -7652,15 +7722,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 var import_react29 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime189 = require("react/jsx-runtime");
+var import_jsx_runtime190 = require("react/jsx-runtime");
 var MenuItem = (0, import_react29.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           MenuItemButton,
           {
             ...props,
@@ -7676,10 +7746,10 @@ MenuItem.displayName = "MenuItem";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime190 = require("react/jsx-runtime");
+var import_jsx_runtime191 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(MenuLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -7687,11 +7757,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime191 = require("react/jsx-runtime");
+var import_jsx_runtime192 = require("react/jsx-runtime");
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
     Icon,
     {
       size: "sm",
@@ -7701,17 +7771,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -7721,9 +7791,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
     "svg",
     {
       ...props,
@@ -7733,14 +7803,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           "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__ */ (0, import_jsx_runtime192.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           "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",
@@ -7749,7 +7819,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
     "svg",
     {
       ...props,
@@ -7759,14 +7829,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           "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__ */ (0, import_jsx_runtime192.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           "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",
@@ -7783,18 +7853,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -7804,39 +7874,39 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 var import_react33 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
+var import_styled_components48 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
 var import_type_guards27 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components44 = __toESM(require("styled-components"));
+var import_styled_components45 = __toESM(require("styled-components"));
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
+var import_styled_components43 = __toESM(require("styled-components"));
 var import_react_dialog = require("@radix-ui/react-dialog");
-var import_jsx_runtime193 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components42.default)(import_react_dialog.Close)`
+var import_jsx_runtime194 = require("react/jsx-runtime");
+var CloseButton = (0, import_styled_components43.default)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Icon, { type: "close" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components43 = __toESM(require("styled-components"));
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_type_guards25 = require("@wistia/type-guards");
-var import_jsx_runtime194 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components43.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components43.default.div({
+var import_jsx_runtime195 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components44.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components44.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7847,15 +7917,15 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Modal/ModalHeader.tsx
-var import_jsx_runtime195 = require("react/jsx-runtime");
-var Header = import_styled_components44.default.header`
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var Header = import_styled_components45.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -7867,7 +7937,7 @@ var Header = import_styled_components44.default.header`
     margin-top: 0;
   }
 `;
-var Title = (0, import_styled_components44.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components45.default)(import_react_dialog2.Title)`
   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);
@@ -7879,15 +7949,15 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(Header, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(TitleWrapper, { children: title }),
-    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(ModalCloseButton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(Header, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 var import_react31 = require("react");
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components46 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -7910,8 +7980,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_jsx_runtime196 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components45.default)(import_react_dialog3.Content)`
+var import_jsx_runtime197 = require("react/jsx-runtime");
+var StyledModalContent = (0, import_styled_components46.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -7954,7 +8024,7 @@ var StyledModalContent = (0, import_styled_components45.default)(import_react_di
 var ModalContent = (0, import_react31.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
       StyledModalContent,
       {
         ref,
@@ -7969,8 +8039,8 @@ var ModalContent = (0, import_react31.forwardRef)(
 
 // src/private/components/Backdrop/Backdrop.tsx
 var import_react32 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_jsx_runtime197 = require("react/jsx-runtime");
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime198 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -7983,7 +8053,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components46.default.div`
+var BackdropComponent = import_styled_components47.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -8007,7 +8077,7 @@ var BackdropComponent = import_styled_components46.default.div`
   }
 `;
 var Backdrop = (0, import_react32.forwardRef)(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
     BackdropComponent,
     {
       ref,
@@ -8021,8 +8091,8 @@ var Backdrop = (0, import_react32.forwardRef)(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime198 = require("react/jsx-runtime");
-var ModalBody = import_styled_components47.default.div`
+var import_jsx_runtime199 = require("react/jsx-runtime");
+var ModalBody = import_styled_components48.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -8040,7 +8110,7 @@ var Modal = (0, import_react33.forwardRef)(
     width,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
@@ -8049,9 +8119,9 @@ var Modal = (0, import_react33.forwardRef)(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(import_react_dialog4.Portal, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(Backdrop, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_react_dialog4.Portal, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Backdrop, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
             ModalContent,
             {
               ref,
@@ -8068,8 +8138,8 @@ var Modal = (0, import_react33.forwardRef)(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(ModalBody, { children }),
-                /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ModalBody, { children }),
+                /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -8089,15 +8159,15 @@ Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
 var import_react34 = require("react");
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_styled_components49 = __toESM(require("styled-components"));
 var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime199 = require("react/jsx-runtime");
-var StyledLabelWrapper2 = import_styled_components48.default.div`
+var import_jsx_runtime200 = require("react/jsx-runtime");
+var StyledLabelWrapper2 = import_styled_components49.default.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = import_styled_components48.default.input`
+var StyledRadio = import_styled_components49.default.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -8123,11 +8193,11 @@ var StyledRadio = import_styled_components48.default.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = import_styled_components48.css`
+var disabledStyle2 = import_styled_components49.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = import_styled_components48.css`
+var errorStyle = import_styled_components49.css`
   /* TODO Lamp to design error state */
   &:hover,
   &:focus,
@@ -8135,11 +8205,11 @@ var errorStyle = import_styled_components48.css`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = import_styled_components48.css`
+var defaultHoverStyle = import_styled_components49.css`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = import_styled_components48.default.div`
+var StyledRadioWrapper = import_styled_components49.default.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8177,13 +8247,13 @@ var Radio = (0, import_react34.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react34.useId)();
     const computedId = (0, import_type_guards28.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
             StyledRadio,
             {
               ref,
@@ -8198,8 +8268,8 @@ var Radio = (0, import_react34.forwardRef)(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
               Label,
               {
                 disabled,
@@ -8208,7 +8278,7 @@ var Radio = (0, import_react34.forwardRef)(
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(LabelDescription, { children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -8219,10 +8289,10 @@ Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
 var import_react35 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
+var import_styled_components50 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
-var import_jsx_runtime200 = require("react/jsx-runtime");
-var TagLabel = import_styled_components49.default.a`
+var import_jsx_runtime201 = require("react/jsx-runtime");
+var TagLabel = import_styled_components50.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8250,14 +8320,14 @@ var TagLabel = import_styled_components49.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components49.default.div`
+var TagDivider = import_styled_components50.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components49.default.button`
+var StyledRemoveButton = import_styled_components50.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8285,7 +8355,7 @@ var StyledRemoveButton = import_styled_components49.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components49.default.div`
+var StyledTag = import_styled_components50.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8302,23 +8372,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(import_jsx_runtime200.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(import_jsx_runtime201.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -8327,14 +8397,14 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 var Tag = (0, import_react35.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = (0, import_type_guards29.isNotNil)(href) && (0, import_type_guards29.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
             TagLabel,
             {
               ...labelProps,
@@ -8342,7 +8412,7 @@ var Tag = (0, import_react35.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -8359,16 +8429,16 @@ Tag.displayName = "Tag";
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime201 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components50.css`
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_jsx_runtime202 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components51.css`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
   --tooltip-font-weight: var(--wui-typography-label-4-weight);
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = (0, import_styled_components50.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components51.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8426,14 +8496,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -8441,7 +8511,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8450,7 +8520,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -8463,26 +8533,26 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
+var import_styled_components52 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime202 = require("react/jsx-runtime");
+var import_jsx_runtime203 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("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__ */ (0, import_jsx_runtime203.jsx)("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__ */ (0, import_jsx_runtime202.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("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__ */ (0, import_jsx_runtime203.jsx)("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" })
     }
   );
 };
@@ -8490,12 +8560,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("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__ */ (0, import_jsx_runtime203.jsx)("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" })
     }
   );
 };
@@ -8505,7 +8575,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components51.default.svg`
+var WistiaLogoComponent = import_styled_components52.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8547,7 +8617,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -8557,21 +8627,21 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("title", { children: title }),
-        (0, import_type_guards30.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("title", { children: title }),
+        (0, import_type_guards30.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_jsx_runtime203 = require("react/jsx-runtime");
-var StyledBreadcrumbs = import_styled_components52.default.nav`
+var import_styled_components53 = __toESM(require("styled-components"));
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var StyledBreadcrumbs = import_styled_components53.default.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -8581,7 +8651,7 @@ var StyledBreadcrumbs = import_styled_components52.default.nav`
   }
 `;
 var Breadcrumbs = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
     StyledBreadcrumbs,
     {
       "aria-label": "Breadcrumbs",
@@ -8593,10 +8663,10 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-var import_jsx_runtime204 = require("react/jsx-runtime");
+var import_jsx_runtime205 = require("react/jsx-runtime");
 var Breadcrumb = ({ icon, href, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(import_jsx_runtime204.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(import_jsx_runtime205.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
       Button,
       {
         href,
@@ -8605,7 +8675,7 @@ var Breadcrumb = ({ icon, href, children }) => {
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
       Icon,
       {
         size: "sm",
@@ -8614,6 +8684,9 @@ var Breadcrumb = ({ icon, href, children }) => {
     )
   ] });
 };
+
+// src/index.ts
+console.log("test");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -8624,6 +8697,7 @@ var Breadcrumb = ({ icon, href, children }) => {
   Breadcrumbs,
   Button,
   ButtonGroup,
+  Card,
   Checkbox,
   CheckboxGroup,
   CheckboxMenuItem,