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

package/dist/index.mjs

@@ -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.
  *
@@ -6053,18 +6053,69 @@ var ButtonGroup = ({
 };
 ButtonGroup.displayName = "ButtonGroup";
 
+// src/components/Card/Card.tsx
+import styled12 from "styled-components";
+import { jsx as jsx169 } from "react/jsx-runtime";
+var StyledCard = styled12(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__ */ jsx169(
+  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
 import { forwardRef as forwardRef6, useId } from "react";
 import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
-import styled15 from "styled-components";
+import styled16 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled13, { css as css16 } from "styled-components";
+import styled14, { css as css16 } from "styled-components";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled12, { css as css15 } from "styled-components";
+import styled13, { css as css15 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -6072,7 +6123,7 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx169 } from "react/jsx-runtime";
+import { jsx as jsx170 } from "react/jsx-runtime";
 var heroStyle = css15`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
@@ -6125,7 +6176,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = styled12.div`
+var StyledHeading = styled13.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6168,7 +6219,7 @@ var HeadingComponent = forwardRef5(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx169(
+  }, ref) => /* @__PURE__ */ jsx170(
     StyledHeading,
     {
       ref,
@@ -6188,7 +6239,7 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Label/Label.tsx
-import { jsx as jsx170 } from "react/jsx-runtime";
+import { jsx as jsx171 } from "react/jsx-runtime";
 var requiredStyle = css16`
   &::after {
     color: var(--wui-color-text-error);
@@ -6200,7 +6251,7 @@ var requiredStyle = css16`
 var disabledStyle = css16`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = styled13(Heading).attrs({
+var StyledLabel2 = styled14(Heading).attrs({
   variant: "heading6",
   renderAs: "label"
 })`
@@ -6229,7 +6280,7 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ jsx170(
+}) => /* @__PURE__ */ jsx171(
   StyledLabel2,
   {
     ...otherProps,
@@ -6243,10 +6294,10 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-import styled14 from "styled-components";
+import styled15 from "styled-components";
 import { isNil as isNil9 } from "@wistia/type-guards";
-import { jsx as jsx171 } from "react/jsx-runtime";
-var StyledLabelDescription = styled14.div`
+import { jsx as jsx172 } from "react/jsx-runtime";
+var StyledLabelDescription = styled15.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -6259,13 +6310,13 @@ var LabelDescription = ({
   if (isNil9(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx171(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ jsx172(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx172, jsxs as jsxs8 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx172(
+import { jsx as jsx173, jsxs as jsxs8 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx173(
   "svg",
   {
     fill: "inherit",
@@ -6273,7 +6324,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx172(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx172(
+    children: /* @__PURE__ */ jsx173(
       "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",
@@ -6282,7 +6333,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx172(
     )
   }
 );
-var StyledCheckboxWrapper = styled15.div`
+var StyledCheckboxWrapper = styled16.div`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -6296,7 +6347,7 @@ var StyledCheckboxWrapper = styled15.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = styled15(CheckboxRoot)`
+var StyledCheckboxRoot = styled16(CheckboxRoot)`
   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;
@@ -6330,10 +6381,10 @@ var StyledCheckboxRoot = styled15(CheckboxRoot)`
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = styled15(CheckboxIndicator)`
+var StyledCheckboxIndicator = styled16(CheckboxIndicator)`
   display: flex;
 `;
-var StyledLabelWrapper = styled15.div`
+var StyledLabelWrapper = styled16.div`
   display: flex;
   flex-direction: column;
   margin-left: var(--wui-space-02);
@@ -6355,7 +6406,7 @@ var Checkbox = forwardRef6(
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
     return /* @__PURE__ */ jsxs8(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ jsx172(
+      /* @__PURE__ */ jsx173(
         StyledCheckboxRoot,
         {
           ref,
@@ -6380,11 +6431,11 @@ var Checkbox = forwardRef6(
           required,
           value,
           ...otherProps,
-          children: /* @__PURE__ */ jsx172(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx172(CheckIcon, {}) })
+          children: /* @__PURE__ */ jsx173(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx173(CheckIcon, {}) })
         }
       ),
       /* @__PURE__ */ jsxs8(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ jsx172(
+        /* @__PURE__ */ jsx173(
           Label,
           {
             disabled,
@@ -6393,7 +6444,7 @@ var Checkbox = forwardRef6(
             children: label
           }
         ),
-        /* @__PURE__ */ jsx172(LabelDescription, { children: description })
+        /* @__PURE__ */ jsx173(LabelDescription, { children: description })
       ] })
     ] });
   }
@@ -6401,8 +6452,8 @@ var Checkbox = forwardRef6(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-import styled16, { css as css17 } from "styled-components";
-import { jsx as jsx173 } from "react/jsx-runtime";
+import styled17, { css as css17 } from "styled-components";
+import { jsx as jsx174 } from "react/jsx-runtime";
 var horizontalBorderCss = css17`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -6416,7 +6467,7 @@ var verticalBorderCss = css17`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled16.div`
+var DividerComponent = styled17.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -6431,7 +6482,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx173(
+  return /* @__PURE__ */ jsx174(
     DividerComponent,
     {
       $orientation: orientation,
@@ -6445,15 +6496,15 @@ Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef8, useRef as useRef2, useMemo as useMemo4, createContext as createContext2, useState as useState4, useId as useId2 } from "react";
-import styled18 from "styled-components";
+import styled19 from "styled-components";
 import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled17 from "styled-components";
-import { jsx as jsx174 } from "react/jsx-runtime";
+import styled18 from "styled-components";
+import { jsx as jsx175 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled17.div`
+var StyledStack = styled18.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -6462,7 +6513,7 @@ var StackComponent = forwardRef7(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx174(
+    return /* @__PURE__ */ jsx175(
       StyledStack,
       {
         ref,
@@ -6478,8 +6529,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-import { jsx as jsx175 } from "react/jsx-runtime";
-var StyledForm = styled18.form`
+import { jsx as jsx176 } from "react/jsx-runtime";
+var StyledForm = styled19.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -6548,7 +6599,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__ */ jsx175(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx175(
+    /* @__PURE__ */ jsx176(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx176(
       Stack,
       {
         gap: "space-05",
@@ -6607,9 +6658,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef3 } from "react";
 import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { jsx as jsx176, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs9 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx176("li", { children: /* @__PURE__ */ jsx176(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx177("li", { children: /* @__PURE__ */ jsx177(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef3(null);
@@ -6619,9 +6670,9 @@ var FormErrorSummary = ({ description }) => {
     return null;
   }
   return /* @__PURE__ */ jsxs9("div", { ref, children: [
-    /* @__PURE__ */ jsx176("p", { children: description }),
-    /* @__PURE__ */ jsx176("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx176(
+    /* @__PURE__ */ jsx177("p", { children: description }),
+    /* @__PURE__ */ jsx177("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx177(
         ErrorItem,
         {
           error: err,
@@ -6629,7 +6680,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx176(
+      )) : /* @__PURE__ */ jsx177(
         ErrorItem,
         {
           error: error ?? "",
@@ -6644,13 +6695,13 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children2, cloneElement as cloneElement3, useContext as useContext3 } from "react";
-import styled21 from "styled-components";
+import styled22 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil7, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled19, { css as css18 } from "styled-components";
-import { jsx as jsx177 } from "react/jsx-runtime";
+import styled20, { css as css18 } from "styled-components";
+import { jsx as jsx178 } from "react/jsx-runtime";
 var bodyBoldStyles = css18`
   > strong,
   b {
@@ -6749,7 +6800,7 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var StyledText = styled19.div`
+var StyledText = styled20.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -6803,7 +6854,7 @@ var TextComponent = forwardRef9(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx177(
+    return /* @__PURE__ */ jsx178(
       StyledText,
       {
         ref,
@@ -6828,13 +6879,13 @@ var Text = makePolymorphic(TextComponent);
 import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled20 from "styled-components";
+import styled21 from "styled-components";
 import { useRef as useRef4 } from "react";
-import { jsx as jsx178, jsxs as jsxs10 } from "react/jsx-runtime";
-var StyledFieldset = styled20.fieldset`
+import { jsx as jsx179, jsxs as jsxs10 } from "react/jsx-runtime";
+var StyledFieldset = styled21.fieldset`
   border: 0;
 `;
-var StyledLegend = styled20.legend`
+var StyledLegend = styled21.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
@@ -6846,7 +6897,7 @@ var FormGroup = ({ children, label, ...props }) => {
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx178(
+        /* @__PURE__ */ jsx179(
           Heading,
           {
             renderAs: StyledLegend,
@@ -6862,7 +6913,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
+import { jsx as jsx180 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
@@ -6877,13 +6928,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx179(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx179(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx180(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx180(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { jsx as jsx180, jsxs as jsxs11 } from "react/jsx-runtime";
-var StyledFormField = styled21.div`
+import { jsx as jsx181, jsxs as jsxs11 } from "react/jsx-runtime";
+var StyledFormField = styled22.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -6891,7 +6942,7 @@ var StyledFormField = styled21.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = styled21.ul`
+var StyledErrorList = styled22.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -6901,7 +6952,7 @@ var StyledErrorList = styled21.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = isArray2(errors);
-  return isMultipleErrors ? /* @__PURE__ */ jsx180(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx180(
+  return isMultipleErrors ? /* @__PURE__ */ jsx181(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx181(
     Text,
     {
       colorScheme: "error",
@@ -6911,7 +6962,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ jsx180(
+  )) }) : /* @__PURE__ */ jsx181(
     Text,
     {
       colorScheme: "error",
@@ -6969,9 +7020,9 @@ var FormField = ({
   }
   Children2.only(children);
   return /* @__PURE__ */ jsxs11(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ jsx180(Label, { htmlFor: id, children: label }),
+    !isInlineLabel && /* @__PURE__ */ jsx181(Label, { htmlFor: id, children: label }),
     cloneElement3(children, childProps),
-    isNotNil7(computedError) ? /* @__PURE__ */ jsx180(
+    isNotNil7(computedError) ? /* @__PURE__ */ jsx181(
       ErrorMessages,
       {
         errors: computedError,
@@ -6984,7 +7035,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext4, useMemo as useMemo6 } from "react";
-import { jsx as jsx181 } from "react/jsx-runtime";
+import { jsx as jsx182 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
@@ -6999,15 +7050,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx181(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx181(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx182(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx182(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef10 } from "react";
-import styled22 from "styled-components";
-import { jsx as jsx182 } from "react/jsx-runtime";
-var StyledButton2 = styled22(Button)`
+import styled23 from "styled-components";
+import { jsx as jsx183 } from "react/jsx-runtime";
+var StyledButton2 = styled23(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -7024,7 +7075,7 @@ var StyledButton2 = styled22(Button)`
 var IconButton = forwardRef10(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx182(
+    return /* @__PURE__ */ jsx183(
       StyledButton2,
       {
         ...props,
@@ -7042,10 +7093,10 @@ var IconButton = forwardRef10(
 IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef11, cloneElement as cloneElement5 } from "react";
-import styled23, { css as css19 } from "styled-components";
+import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef5 } from "react";
+import styled24, { css as css19 } from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { jsx as jsx183, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
 var inputStyles = css19`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -7087,7 +7138,7 @@ var inputStyles = css19`
     }
   }
 `;
-var StyledInputContainer = styled23.div`
+var StyledInputContainer = styled24.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7131,18 +7182,24 @@ var StyledInputContainer = styled23.div`
     padding-right: 32px;
   }
 `;
+var isValidRef = (ref) => {
+  return typeof ref === "object" && ref !== null && "current" in ref && isNotNil8(ref.current);
+};
 var Input = forwardRef11(
   ({
     fullWidth = false,
     monospace = false,
     type = "text",
+    autoSelect = false,
     leftIcon,
     rightIcon,
     ...props
-  }, ref) => {
+  }, externalRef) => {
+    const internalRef = useRef5();
+    const ref = isValidRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil10(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx183(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx184(Icon, { type: "search" });
     }
     if (isNotNil8(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement5(leftIconToDisplay, {
@@ -7157,6 +7214,16 @@ var Input = forwardRef11(
         className: "wui-input-right-icon"
       });
     }
+    const handleFocus = (event) => {
+      if (isNotNil8(props.onFocus)) {
+        props.onFocus(event);
+      }
+      if (autoSelect && ref && "current" in ref) {
+        requestAnimationFrame(() => {
+          ref.current?.select();
+        });
+      }
+    };
     return /* @__PURE__ */ jsxs12(
       StyledInputContainer,
       {
@@ -7164,17 +7231,19 @@ var Input = forwardRef11(
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx183(
+          type === "multiline" ? /* @__PURE__ */ jsx184(
             "textarea",
             {
               ...props,
-              ref
+              ref,
+              onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ jsx183(
+          ) : /* @__PURE__ */ jsx184(
             "input",
             {
               ...props,
               ref,
+              onFocus: handleFocus,
               type
             }
           ),
@@ -7187,7 +7256,7 @@ var Input = forwardRef11(
 Input.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-import styled24, { css as css20, keyframes } from "styled-components";
+import styled25, { css as css20, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7195,7 +7264,7 @@ import {
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil9, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
-import { jsx as jsx184, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
 var open = keyframes`
   from {
     opacity: 0;
@@ -7275,7 +7344,7 @@ var compactMenuItemCss = css20`
   --menu-label-font-weight: var(--wui-typography-label-4-weight);
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
 `;
-var MenuContent = styled24(DropdownMenuContent)`
+var MenuContent = styled25(DropdownMenuContent)`
   ${menuContentCss}
   ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
@@ -7307,18 +7376,18 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx184(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx184(
+        /* @__PURE__ */ jsx185(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx185(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx184(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx185(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx184(DropdownMenuPortal, { children: /* @__PURE__ */ jsx184(
+        /* @__PURE__ */ jsx185(DropdownMenuPortal, { children: /* @__PURE__ */ jsx185(
           MenuContent,
           {
             ...props,
@@ -7338,19 +7407,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled25 from "styled-components";
+import styled26 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx185 } from "react/jsx-runtime";
-var StyledMenuLabel = styled25(DropdownMenuLabel)`
+import { jsx as jsx186 } from "react/jsx-runtime";
+var StyledMenuLabel = styled26(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx185(
+  return /* @__PURE__ */ jsx186(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx185(
+      children: /* @__PURE__ */ jsx186(
         Heading,
         {
           renderAs: "span",
@@ -7366,7 +7435,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState6 } from "react";
-import styled28 from "styled-components";
+import styled29 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -7379,10 +7448,10 @@ import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef12 } from "react";
-import styled26 from "styled-components";
+import styled27 from "styled-components";
 import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
-var StyledButton3 = styled26(Button)`
+import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
+var StyledButton3 = styled27(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -7420,7 +7489,7 @@ var StyledButton3 = styled26(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled26.div`
+var StyledLeftIconContainer = styled27.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -7429,7 +7498,7 @@ var StyledLeftIconContainer = styled26.div`
     width: var(--menu-item-left-icon-size);
   }
 `;
-var StyledRightIconContainer = styled26.div`
+var StyledRightIconContainer = styled27.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -7438,13 +7507,13 @@ var StyledRightIconContainer = styled26.div`
     width: var(--menu-item-right-icon-size);
   }
 `;
-var StyledLabelAndDescriptionContainer = styled26.div`
+var StyledLabelAndDescriptionContainer = styled27.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled26.div`
+var StyledBadgeContainer = styled27.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -7459,7 +7528,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx186(
+    badge = /* @__PURE__ */ jsx187(
       Icon,
       {
         colorScheme: "purple",
@@ -7481,10 +7550,10 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx186(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx186(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx186(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx186(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ jsx187(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx187(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx187(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx187(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -7492,23 +7561,23 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled27 from "styled-components";
-import { jsx as jsx187 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled27.span``;
-var StyledMenuItemDescription = styled27(Text).attrs({
+import styled28 from "styled-components";
+import { jsx as jsx188 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled28.span``;
+var StyledMenuItemDescription = styled28(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx187(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx188(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx187(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx188(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx188, jsxs as jsxs15 } from "react/jsx-runtime";
-var SubMenuContent = styled28(DropdownMenuSubContent)`
+import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
+var SubMenuContent = styled29(DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -7516,10 +7585,10 @@ var SubMenuContent = styled28(DropdownMenuSubContent)`
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled28.div`
+var StyledMobileSubMenuItems = styled29.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled28(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled29(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -7530,11 +7599,11 @@ var StyledSubTrigger = styled28(DropdownMenuSubTrigger)`
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx188(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx188(
+  return /* @__PURE__ */ jsx189(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx189(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ jsx188(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx189(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -7549,10 +7618,10 @@ var SubMenu = ({
   const [isExpanded, setIsExpanded] = useState6(false);
   return isSmAndUp ? /* @__PURE__ */ jsxs15(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs15(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx188(MenuItemLabel, { children: label }),
-      isNotNil11(description) ? /* @__PURE__ */ jsx188(MenuItemDescription, { children: description }) : null
+      /* @__PURE__ */ jsx189(MenuItemLabel, { children: label }),
+      isNotNil11(description) ? /* @__PURE__ */ jsx189(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx188(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx188(SubMenuContent, { children }) })
+    /* @__PURE__ */ jsx189(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx189(SubMenuContent, { children }) })
   ] }) : /* @__PURE__ */ jsxs15(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs15(
       SubMenuTrigger,
@@ -7563,12 +7632,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx188(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx188(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx189(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx189(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx188(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx189(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -7576,15 +7645,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx189 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
 var MenuItem = forwardRef13(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx189(
+    return /* @__PURE__ */ jsx190(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx189(
+        children: /* @__PURE__ */ jsx190(
           MenuItemButton,
           {
             ...props,
@@ -7602,10 +7671,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx190, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs16(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx190(MenuLabel, { children: label }),
+    /* @__PURE__ */ jsx191(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -7616,11 +7685,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx191 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx191(
+  indicator = /* @__PURE__ */ jsx192(
     Icon,
     {
       size: "sm",
@@ -7630,17 +7699,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx191(
+  return /* @__PURE__ */ jsx192(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx191(
+      children: /* @__PURE__ */ jsx192(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx191(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx192(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -7652,7 +7721,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx192, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs17(
     "svg",
@@ -7664,14 +7733,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx192(
+        /* @__PURE__ */ jsx193(
           "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__ */ jsx192(
+        /* @__PURE__ */ jsx193(
           "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",
@@ -7690,14 +7759,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx192(
+        /* @__PURE__ */ jsx193(
           "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__ */ jsx192(
+        /* @__PURE__ */ jsx193(
           "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",
@@ -7714,18 +7783,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx192(
+  return /* @__PURE__ */ jsx193(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx192(
+      children: /* @__PURE__ */ jsx193(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx192(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx193(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -7735,39 +7804,39 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled34 from "styled-components";
+import styled35 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled31 from "styled-components";
+import styled32 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled29 from "styled-components";
+import styled30 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx193 } from "react/jsx-runtime";
-var CloseButton = styled29(DialogClose)`
+import { jsx as jsx194 } from "react/jsx-runtime";
+var CloseButton = styled30(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx193(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx193(
+  return /* @__PURE__ */ jsx194(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx194(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx193(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx194(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled30 from "styled-components";
+import styled31 from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
-import { jsx as jsx194 } from "react/jsx-runtime";
-var VisuallyHidden = styled30.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled30.div({
+import { jsx as jsx195 } from "react/jsx-runtime";
+var VisuallyHidden = styled31.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled31.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7778,15 +7847,15 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil12(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx194(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx195(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx194(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx195(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx195, jsxs as jsxs18 } from "react/jsx-runtime";
-var Header = styled31.header`
+import { jsx as jsx196, jsxs as jsxs18 } from "react/jsx-runtime";
+var Header = styled32.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -7798,7 +7867,7 @@ var Header = styled31.header`
     margin-top: 0;
   }
 `;
-var Title = styled31(DialogTitle)`
+var Title = styled32(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);
@@ -7811,21 +7880,21 @@ var ModalHeader = ({
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
   return /* @__PURE__ */ jsxs18(Header, { children: [
-    /* @__PURE__ */ jsx195(TitleWrapper, { children: title }),
-    hideCloseButton ? null : /* @__PURE__ */ jsx195(ModalCloseButton, {})
+    /* @__PURE__ */ jsx196(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ jsx196(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef14 } from "react";
-import styled32 from "styled-components";
+import styled33 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef5, useEffect as useEffect2 } from "react";
+import { useRef as useRef6, useEffect as useEffect2 } from "react";
 import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 var useFocusRestore = () => {
-  const previouslyFocusedRef = useRef5(null);
+  const previouslyFocusedRef = useRef6(null);
   useEffect2(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
@@ -7841,8 +7910,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx196 } from "react/jsx-runtime";
-var StyledModalContent = styled32(DialogContent)`
+import { jsx as jsx197 } from "react/jsx-runtime";
+var StyledModalContent = styled33(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -7885,7 +7954,7 @@ var StyledModalContent = styled32(DialogContent)`
 var ModalContent = forwardRef14(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx196(
+    return /* @__PURE__ */ jsx197(
       StyledModalContent,
       {
         ref,
@@ -7900,8 +7969,8 @@ var ModalContent = forwardRef14(
 
 // src/private/components/Backdrop/Backdrop.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled33 from "styled-components";
-import { jsx as jsx197 } from "react/jsx-runtime";
+import styled34 from "styled-components";
+import { jsx as jsx198 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -7914,7 +7983,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled33.div`
+var BackdropComponent = styled34.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -7938,7 +8007,7 @@ var BackdropComponent = styled33.div`
   }
 `;
 var Backdrop = forwardRef15(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx197(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx198(
     BackdropComponent,
     {
       ref,
@@ -7952,8 +8021,8 @@ var Backdrop = forwardRef15(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx198, jsxs as jsxs19 } from "react/jsx-runtime";
-var ModalBody = styled34.div`
+import { jsx as jsx199, jsxs as jsxs19 } from "react/jsx-runtime";
+var ModalBody = styled35.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -7971,7 +8040,7 @@ var Modal = forwardRef16(
     width,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx198(
+    return /* @__PURE__ */ jsx199(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -7981,7 +8050,7 @@ var Modal = forwardRef16(
         },
         open: isOpen,
         children: /* @__PURE__ */ jsxs19(DialogPortal, { children: [
-          /* @__PURE__ */ jsx198(Backdrop, {}),
+          /* @__PURE__ */ jsx199(Backdrop, {}),
           /* @__PURE__ */ jsxs19(
             ModalContent,
             {
@@ -7999,8 +8068,8 @@ var Modal = forwardRef16(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx198(ModalBody, { children }),
-                /* @__PURE__ */ jsx198(
+                /* @__PURE__ */ jsx199(ModalBody, { children }),
+                /* @__PURE__ */ jsx199(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -8020,15 +8089,15 @@ Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef17, useId as useId3 } from "react";
-import styled35, { css as css21 } from "styled-components";
+import styled36, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx199, jsxs as jsxs20 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled35.div`
+import { jsx as jsx200, jsxs as jsxs20 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled36.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled35.input`
+var StyledRadio = styled36.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -8070,7 +8139,7 @@ var defaultHoverStyle = css21`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled35.div`
+var StyledRadioWrapper = styled36.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8114,7 +8183,7 @@ var Radio = forwardRef17(
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx199(
+          /* @__PURE__ */ jsx200(
             StyledRadio,
             {
               ref,
@@ -8130,7 +8199,7 @@ var Radio = forwardRef17(
             }
           ),
           /* @__PURE__ */ jsxs20(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx199(
+            /* @__PURE__ */ jsx200(
               Label,
               {
                 disabled,
@@ -8139,7 +8208,7 @@ var Radio = forwardRef17(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx199(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx200(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -8150,10 +8219,10 @@ Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef18 } from "react";
-import styled36 from "styled-components";
+import styled37 from "styled-components";
 import { isNil as isNil11, isNotNil as isNotNil15, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment2, jsx as jsx200, jsxs as jsxs21 } from "react/jsx-runtime";
-var TagLabel = styled36.a`
+import { Fragment as Fragment2, jsx as jsx201, jsxs as jsxs21 } from "react/jsx-runtime";
+var TagLabel = styled37.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8181,14 +8250,14 @@ var TagLabel = styled36.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled36.div`
+var TagDivider = styled37.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled36.button`
+var StyledRemoveButton = styled37.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8216,7 +8285,7 @@ var StyledRemoveButton = styled36.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled36.div`
+var StyledTag = styled37.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8234,7 +8303,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     );
   }
   return /* @__PURE__ */ jsxs21(Fragment2, { children: [
-    /* @__PURE__ */ jsx200(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsx201(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs21(
       StyledRemoveButton,
       {
@@ -8242,14 +8311,14 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx200(
+          /* @__PURE__ */ jsx201(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx200(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx201(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -8265,7 +8334,7 @@ var Tag = forwardRef18(
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx200(
+          /* @__PURE__ */ jsx201(
             TagLabel,
             {
               ...labelProps,
@@ -8273,7 +8342,7 @@ var Tag = forwardRef18(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx200(
+          /* @__PURE__ */ jsx201(
             RemoveButton,
             {
               colorScheme,
@@ -8296,8 +8365,8 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled37, { css as css22 } from "styled-components";
-import { jsx as jsx201, jsxs as jsxs22 } from "react/jsx-runtime";
+import styled38, { css as css22 } from "styled-components";
+import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
 var CompactTooltipStyles = css22`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8305,7 +8374,7 @@ var CompactTooltipStyles = css22`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled37(Content)`
+var StyledContent = styled38(Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8369,8 +8438,8 @@ var Tooltip = ({
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx201(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx201(Portal, { children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx202(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx202(Portal, { children: /* @__PURE__ */ jsxs22(
           StyledContent,
           {
             $compact: compact,
@@ -8378,7 +8447,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx201(Arrow, { asChild: true, children: /* @__PURE__ */ jsx201(
+              !hideArrow ? /* @__PURE__ */ jsx202(Arrow, { asChild: true, children: /* @__PURE__ */ jsx202(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8387,7 +8456,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx201("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__ */ jsx202("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
             ]
@@ -8400,26 +8469,26 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled38 from "styled-components";
+import styled39 from "styled-components";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsx as jsx202, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx203, jsxs as jsxs23 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx202(
+    return /* @__PURE__ */ jsx203(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx202("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__ */ jsx203("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__ */ jsx202(
+  return /* @__PURE__ */ jsx203(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx202("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__ */ jsx203("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" })
     }
   );
 };
@@ -8427,12 +8496,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx202(
+  return /* @__PURE__ */ jsx203(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx202("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__ */ jsx203("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" })
     }
   );
 };
@@ -8442,7 +8511,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled38.svg`
+var WistiaLogoComponent = styled39.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8494,21 +8563,21 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx202("title", { children: title }),
-        isNotNil16(description) ? /* @__PURE__ */ jsx202("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx203("title", { children: title }),
+        isNotNil16(description) ? /* @__PURE__ */ jsx203("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx202("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx203("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import styled39 from "styled-components";
-import { jsx as jsx203 } from "react/jsx-runtime";
-var StyledBreadcrumbs = styled39.nav`
+import styled40 from "styled-components";
+import { jsx as jsx204 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled40.nav`
   display: flex;
   align-items: center;
   gap: var(--wui-space-01);
@@ -8518,7 +8587,7 @@ var StyledBreadcrumbs = styled39.nav`
   }
 `;
 var Breadcrumbs = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx203(
+  return /* @__PURE__ */ jsx204(
     StyledBreadcrumbs,
     {
       "aria-label": "Breadcrumbs",
@@ -8530,10 +8599,10 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx205, jsxs as jsxs24 } from "react/jsx-runtime";
 var Breadcrumb = ({ icon, href, children }) => {
   return /* @__PURE__ */ jsxs24(Fragment3, { children: [
-    /* @__PURE__ */ jsx204(
+    /* @__PURE__ */ jsx205(
       Button,
       {
         href,
@@ -8542,7 +8611,7 @@ var Breadcrumb = ({ icon, href, children }) => {
         children
       }
     ),
-    /* @__PURE__ */ jsx204(
+    /* @__PURE__ */ jsx205(
       Icon,
       {
         size: "sm",
@@ -8551,6 +8620,9 @@ var Breadcrumb = ({ icon, href, children }) => {
     )
   ] });
 };
+
+// src/index.ts
+console.log("test");
 export {
   ActionButton,
   Avatar,
@@ -8560,6 +8632,7 @@ export {
   Breadcrumbs,
   Button,
   ButtonGroup,
+  Card,
   Checkbox,
   CheckboxGroup,
   CheckboxMenuItem,