@wistia/ui 0.1.2 → 0.2.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.1.2
+ * @license @wistia/ui v0.2.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -6485,29 +6485,40 @@ 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 sizeToPixelMap = {
-  lg: 4,
-  sm: 1
-};
-var DividerComponent = import_styled_components29.default.hr`
-  background: none;
-  border-bottom: none;
-  border-left: none;
-  border-right: none;
+var horizontalBorderCss = import_styled_components29.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
-  border-top-width: ${({ $borderHeight }) => `${$borderHeight}px`};
-  clear: both;
+  border-top-width: 1px;
+  clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
-  line-height: 0;
-  margin: 0;
 `;
-var Divider = ({ size = "sm", ...otherProps }) => {
-  const responsiveSize = useResponsiveProp(size);
+var verticalBorderCss = import_styled_components29.css`
+  background-color: var(--wui-color-border);
+  max-width: 1px;
+  min-height: 100%;
+  width: 1px;
+`;
+var DividerComponent = import_styled_components29.default.div`
+  ${({ $orientation }) => {
+  switch ($orientation) {
+    case "vertical":
+      return verticalBorderCss;
+    case "horizontal":
+    default:
+      return horizontalBorderCss;
+  }
+}}
+`;
+var Divider = ({
+  orientation = "horizontal",
+  ...otherProps
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
     DividerComponent,
     {
-      $borderHeight: sizeToPixelMap[responsiveSize],
+      $orientation: orientation,
+      "aria-orientation": orientation,
+      role: "separator",
       ...otherProps
     }
   );
@@ -6528,10 +6539,6 @@ var StyledStack = import_styled_components30.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
-
-  > * {
-    flex: 1;
-  }
 `;
 var StackComponent = (0, import_react16.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
@@ -7289,10 +7296,10 @@ var close = import_styled_components37.keyframes`
 `;
 var menuContentCss = import_styled_components37.css`
   --menu-font-family: var(--wui-typography-family-default);
-  --menu-bg: var(--wui-color-bg-fill-white); /* TODO - Not sure what token to use for this */
+  --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
-  --menu-border-radius: var(--wui-border-radius-01);
-  --menu-padding: var(--wui-space-03);
+  --menu-border-radius: var(--wui-border-radius-02);
+  --menu-padding: var(--wui-space-02);
   --menu-min-width: 120px;
   --menu-max-width: 284px;
 
@@ -7308,6 +7315,7 @@ var menuContentCss = import_styled_components37.css`
   padding: var(--menu-padding);
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
   z-index: var(--wui-zindex-menu);
+  border: 1px solid var(--wui-color-border);
 
   &[data-state='closed'] {
     animation: ${close}; /* TODO - need easing tokens */
@@ -7325,12 +7333,35 @@ var menuContentCss = import_styled_components37.css`
     margin: var(--wui-space-02) 0;
   }
 `;
+var menuItemCss = import_styled_components37.css`
+  --menu-label-description-gap: var(--wui-space-01);
+  --menu-item-inner-gap: var(--wui-space-03);
+  --menu-item-left-icon-size: 24px;
+  --menu-item-right-icon-size: 16px;
+  --menu-item-padding: var(--wui-space-02);
+  --menu-label-font-size: var(--wui-typography-label-3-size);
+  --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`
+  --menu-label-description-gap: 0;
+  --menu-item-inner-gap: var(--wui-space-02);
+  --menu-item-left-icon-size: 16px;
+  --menu-item-right-icon-size: 12px;
+  --menu-item-padding: 6px;
+  --menu-label-font-size: var(--wui-typography-label-4-size);
+  --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)`
   ${menuContentCss}
+  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
   children,
+  disabled = false,
+  compact = false,
   trigger,
   label,
   isOpen,
@@ -7339,16 +7370,26 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  let controlProps = {
+    ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+  };
+  if (disabled) {
+    controlProps = {
+      open: false,
+      onOpenChange: () => null
+    };
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
-      ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {},
+      ...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)(
           Button,
           {
             "aria-expanded": isOpen,
+            disabled,
             forceState: isOpen ? "active" : void 0,
             rightIcon: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { type: "caret-down" }),
             ...triggerProps,
@@ -7359,11 +7400,12 @@ var Menu = ({
           MenuContent,
           {
             ...props,
+            $compact: compact,
             align,
+            sideOffset: 6,
             onFocusOutside: (event) => {
               event.preventDefault();
             },
-            sideOffset: 6,
             children
           }
         ) })
@@ -7387,9 +7429,10 @@ var MenuLabel = ({ children, ...props }) => {
       asChild: true,
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-        Text,
+        Heading,
         {
-          variant: "label3",
+          renderAs: "span",
+          variant: "heading6",
           ...props,
           children
         }
@@ -7403,6 +7446,7 @@ MenuLabel.displayName = "MenuLabel";
 var import_react28 = require("react");
 var import_styled_components41 = __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");
@@ -7410,38 +7454,74 @@ var import_styled_components39 = __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)`
-  --menu-item-border-radius: var(--wui-border-radius-01);
-  --menu-item-gap: var(--wui-space-01);
-  --menu-item-inner-gap: var(--wui-space-04);
-  --menu-item-disabled-bg: var(--wui-color-white);
+  ${({ colorScheme }) => getColorScheme(colorScheme)};
 
-  text-align: left;
-  align-items: left;
-  border-radius: var(--menu-item-border-radius);
   display: flex;
+  flex-direction: row;
+  gap: var(--menu-item-inner-gap);
+  padding: var(--menu-item-padding);
+  border-radius: var(--wui-border-radius-01);
+  text-align: left;
+  color: var(--wui-color-text);
+  font-size: var(--menu-label-font-size);
+  font-weight: var(--menu-label-font-weight);
+  line-height: var(--menu-label-line-height);
+
+  :active {
+    background-color: var(--wui-color-bg-surface-active);
+  }
+
+  &[data-highlighted] {
+    outline: none;
+    ${({ $isGated }) => $isGated && getColorScheme("purple")};
+    background-color: var(--wui-color-bg-surface-hover);
+  }
 
   &[aria-disabled='true'] {
-    background-color: var(--menu-item-disabled-bg);
+    --wui-color-text: var(--wui-color-text-disabled);
+    --wui-color-text-secondary: var(--wui-color-text-disabled);
+    --wui-color-icon: var(--wui-color-icon-disabled);
+
+    &[data-highlighted] {
+      background-color: transparent;
+    }
   }
 
-  ${({ $isGated }) => (0, import_type_guards23.isNotUndefined)($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
+  &[role='menuitemradio'] {
+    padding-left: var(--wui-space-04);
+  }
 `;
-var StyledMenuContent = import_styled_components39.default.div`
-  display: grid;
-  grid-template-areas:
-    'label badge'
-    'description badge';
-  grid-template-columns: 1fr auto;
-  position: relative;
-  align-content: center;
+var StyledLeftIconContainer = import_styled_components39.default.div`
+  height: var(--menu-item-left-icon-size);
+  width: var(--menu-item-left-icon-size);
+
+  svg {
+    height: var(--menu-item-left-icon-size);
+    width: var(--menu-item-left-icon-size);
+  }
+`;
+var StyledRightIconContainer = import_styled_components39.default.div`
+  height: var(--menu-item-right-icon-size);
+  width: var(--menu-item-right-icon-size);
+
+  svg {
+    height: var(--menu-item-right-icon-size);
+    width: var(--menu-item-right-icon-size);
+  }
+`;
+var StyledLabelAndDescriptionContainer = import_styled_components39.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-label-description-gap);
+  flex-basis: 100%;
 `;
 var StyledBadgeContainer = import_styled_components39.default.div`
-  grid-area: badge;
   align-self: start;
   justify-self: end;
-  margin-left: var(--menu-item-inner-gap);
+  font-size: var(--wui-typography-label-4-size);
+  color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, command, ...props }, ref) => {
+var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if ((0, import_type_guards23.isNotUndefined)(colorScheme)) {
@@ -7450,13 +7530,19 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    if ((0, import_type_guards23.isNotUndefined)(colorScheme)) {
-      console.warn("colorScheme prop is ignored when appearance is gated");
-    }
-    colorScheme = "purple";
-    badge = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+      Icon,
+      {
+        colorScheme: "purple",
+        style: {
+          height: "16px",
+          width: "16px"
+        },
+        type: "sparkle"
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
     StyledButton3,
     {
       ...props,
@@ -7464,11 +7550,13 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
       $isGated: appearance === "gated",
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
-      variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(StyledMenuContent, { children: [
-        children,
-        (0, import_type_guards23.isNotNil)(badge) || (0, import_type_guards23.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null
-      ] })
+      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
+      ]
     }
   );
 });
@@ -7477,16 +7565,11 @@ 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 = (0, import_styled_components40.default)(Text).attrs({ variant: "label3" })`
-  grid-area: label;
-`;
+var StyledMenuItemLabel = import_styled_components40.default.span``;
 var StyledMenuItemDescription = (0, import_styled_components40.default)(Text).attrs({
-  variant: "label4",
+  variant: "body4",
   prominence: "secondary"
-})`
-  margin-top: var(--menu-item-gap);
-  grid-area: description;
-`;
+})``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledMenuItemLabel, { children });
 };
@@ -7512,7 +7595,7 @@ var StyledSubTrigger = (0, import_styled_components41.default)(import_react_drop
 
   &[data-state='open'],
   &[data-highlighted] {
-    background-color: var(--button-color-bg-hover);
+    background-color: var(--wui-color-bg-surface-hover);
   }
 `;
 var SubMenuTrigger = (props) => {
@@ -7538,7 +7621,7 @@ var SubMenu = ({
   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 }),
-      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemDescription, { children: description })
+      (0, import_type_guards24.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime188.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: [
@@ -7617,6 +7700,7 @@ var RadioMenuItem = ({
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
+      asChild: true,
       value,
       children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
         MenuItemButton,
@@ -7639,30 +7723,23 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
     {
       ...props,
       fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            fill: "#2949E5"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
-          "path",
-          {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            stroke: "#D9D9DE"
+            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)(
           "path",
           {
-            d: "M6.47275 11.1931L3.3775 8.08009C3.19155 7.89306 3.19155 7.58982 3.3775 7.40278L4.05092 6.72547C4.23688 6.53842 4.53841 6.53842 4.72436 6.72547L6.80947 8.82254L11.2755 4.33082C11.4615 4.1438 11.763 4.1438 11.949 4.33082L12.6224 5.00813C12.8083 5.19516 12.8083 5.4984 12.6224 5.68544L7.14618 11.1931C6.96021 11.3802 6.6587 11.3802 6.47275 11.1931Z",
-            fill: "white"
+            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",
+            fill: "#fff"
           }
         )
       ]
@@ -7672,23 +7749,23 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
     {
       ...props,
       fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            fill: "#FCFCFD"
+            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)(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            stroke: "#D9D9DE"
+            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",
+            stroke: "#bbbbc4"
           }
         )
       ]
@@ -7704,6 +7781,7 @@ var CheckboxMenuItem = ({
   return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
+      asChild: true,
       checked,
       onCheckedChange,
       onSelect,
@@ -7720,10 +7798,10 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-var import_react32 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_react_dialog3 = require("@radix-ui/react-dialog");
-var import_type_guards26 = require("@wistia/type-guards");
+var import_react33 = require("react");
+var import_styled_components47 = __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"));
@@ -7750,7 +7828,7 @@ var ModalCloseButton = () => {
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 var import_styled_components43 = __toESM(require("styled-components"));
-var import_type_guards24 = require("@wistia/type-guards");
+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({
@@ -7762,7 +7840,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards24.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -7802,70 +7880,22 @@ var ModalHeader = ({
   ] });
 };
 
-// src/private/components/Backdrop/Backdrop.tsx
-var import_react30 = require("react");
+// src/components/Modal/ModalContent.tsx
+var import_react31 = require("react");
 var import_styled_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime196 = require("react/jsx-runtime");
-var backdropAnimationDuration = 150;
-var alignVerticalMap = {
-  stretch: "normal",
-  top: "start",
-  center: "center",
-  bottom: "end"
-};
-var alignHorizontalMap = {
-  left: "start",
-  center: "center",
-  right: "end"
-};
-var BackdropComponent = import_styled_components45.default.div`
-  align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
-  animation-name: backdropShow;
-  animation-duration: ${() => `${backdropAnimationDuration}ms`};
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  background: var(--wui-color-backdrop);
-  display: flex;
-  inset: 0;
-  justify-content: ${({ $alignHorizontal }) => alignHorizontalMap[$alignHorizontal]};
-  overflow-y: auto;
-  position: fixed;
-  z-index: var(--wui-zindex-backdrop);
-
-  @keyframes backdropShow {
-    from {
-      opacity: 0;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-`;
-var Backdrop = (0, import_react30.forwardRef)(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-    BackdropComponent,
-    {
-      ref,
-      $alignHorizontal: alignHorizontal,
-      $alignVertical: alignVertical,
-      ...otherProps,
-      children
-    }
-  )
-);
-Backdrop.displayName = "Backdrop";
+var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-var import_react31 = require("react");
-var import_type_guards25 = require("@wistia/type-guards");
+var import_react30 = require("react");
+var import_type_guards26 = require("@wistia/type-guards");
 var useFocusRestore = () => {
-  const previouslyFocusedRef = (0, import_react31.useRef)(null);
-  (0, import_react31.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react30.useRef)(null);
+  (0, import_react30.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards25.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards26.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -7874,9 +7904,9 @@ var useFocusRestore = () => {
   }, []);
 };
 
-// src/components/Modal/Modal.tsx
-var import_jsx_runtime197 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components46.default)(import_react_dialog3.Content)`
+// src/components/Modal/ModalContent.tsx
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var StyledModalContent = (0, import_styled_components45.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -7916,10 +7946,10 @@ var StyledModalContent = (0, import_styled_components46.default)(import_react_di
     }
   }
 `;
-var ModalContent = (0, import_react32.forwardRef)(
+var ModalContent = (0, import_react31.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
       StyledModalContent,
       {
         ref,
@@ -7931,13 +7961,68 @@ var ModalContent = (0, import_react32.forwardRef)(
     );
   }
 );
-ModalContent.displayName = "ModalContent";
-var ModalBody = import_styled_components46.default.div`
+
+// 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 backdropAnimationDuration = 150;
+var alignVerticalMap = {
+  stretch: "normal",
+  top: "start",
+  center: "center",
+  bottom: "end"
+};
+var alignHorizontalMap = {
+  left: "start",
+  center: "center",
+  right: "end"
+};
+var BackdropComponent = import_styled_components46.default.div`
+  align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
+  animation-name: backdropShow;
+  animation-duration: ${() => `${backdropAnimationDuration}ms`};
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  background: var(--wui-color-backdrop);
+  display: flex;
+  inset: 0;
+  justify-content: ${({ $alignHorizontal }) => alignHorizontalMap[$alignHorizontal]};
+  overflow-y: auto;
+  position: fixed;
+  z-index: var(--wui-zindex-backdrop);
+
+  @keyframes backdropShow {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+`;
+var Backdrop = (0, import_react32.forwardRef)(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+    BackdropComponent,
+    {
+      ref,
+      $alignHorizontal: alignHorizontal,
+      $alignVertical: alignVertical,
+      ...otherProps,
+      children
+    }
+  )
+);
+Backdrop.displayName = "Backdrop";
+
+// src/components/Modal/Modal.tsx
+var import_jsx_runtime198 = require("react/jsx-runtime");
+var ModalBody = import_styled_components47.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
 `;
-var Modal = (0, import_react32.forwardRef)(
+var Modal = (0, import_react33.forwardRef)(
   ({
     children,
     fullHeight = false,
@@ -7950,25 +8035,25 @@ var Modal = (0, import_react32.forwardRef)(
     width,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
-      import_react_dialog3.Root,
+    return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+      import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards26.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards27.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_react_dialog3.Portal, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Backdrop, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
+        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)(
             ModalContent,
             {
               ref,
               "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards26.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards27.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -7978,8 +8063,8 @@ var Modal = (0, import_react32.forwardRef)(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(ModalBody, { children }),
-                /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(ModalBody, { children }),
+                /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -7998,16 +8083,16 @@ var Modal = (0, import_react32.forwardRef)(
 Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
-var import_react33 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_type_guards27 = require("@wistia/type-guards");
-var import_jsx_runtime198 = require("react/jsx-runtime");
-var StyledLabelWrapper2 = import_styled_components47.default.div`
+var import_react34 = require("react");
+var import_styled_components48 = __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`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = import_styled_components47.default.input`
+var StyledRadio = import_styled_components48.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;
@@ -8033,11 +8118,11 @@ var StyledRadio = import_styled_components47.default.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = import_styled_components47.css`
+var disabledStyle2 = import_styled_components48.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = import_styled_components47.css`
+var errorStyle = import_styled_components48.css`
   /* TODO Lamp to design error state */
   &:hover,
   &:focus,
@@ -8045,11 +8130,11 @@ var errorStyle = import_styled_components47.css`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = import_styled_components47.css`
+var defaultHoverStyle = import_styled_components48.css`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = import_styled_components47.default.div`
+var StyledRadioWrapper = import_styled_components48.default.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8072,7 +8157,7 @@ var StyledRadioWrapper = import_styled_components47.default.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = (0, import_react33.forwardRef)(
+var Radio = (0, import_react34.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8085,15 +8170,15 @@ var Radio = (0, import_react33.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react33.useId)();
-    const computedId = (0, import_type_guards27.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(
+    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)(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
             StyledRadio,
             {
               ref,
@@ -8108,8 +8193,8 @@ var Radio = (0, import_react33.forwardRef)(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
               Label,
               {
                 disabled,
@@ -8118,7 +8203,7 @@ var Radio = (0, import_react33.forwardRef)(
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(LabelDescription, { children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -8128,11 +8213,11 @@ var Radio = (0, import_react33.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
-var import_react34 = require("react");
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime199 = require("react/jsx-runtime");
-var TagLabel = import_styled_components48.default.a`
+var import_react35 = require("react");
+var import_styled_components49 = __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`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8160,14 +8245,14 @@ var TagLabel = import_styled_components48.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components48.default.div`
+var TagDivider = import_styled_components49.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components48.default.button`
+var StyledRemoveButton = import_styled_components49.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8195,7 +8280,7 @@ var StyledRemoveButton = import_styled_components48.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components48.default.div`
+var StyledTag = import_styled_components49.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8204,47 +8289,47 @@ var StyledTag = import_styled_components48.default.div`
   overflow: hidden;
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards28.isNil)(onClickRemove)) {
+  if ((0, import_type_guards29.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards28.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards29.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_jsx_runtime199.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
+  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)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react34.forwardRef)(
+var Tag = (0, import_react35.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = (0, import_type_guards28.isNotNil)(href) && (0, import_type_guards28.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
+    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)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
             TagLabel,
             {
               ...labelProps,
@@ -8252,7 +8337,7 @@ var Tag = (0, import_react34.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -8269,16 +8354,16 @@ Tag.displayName = "Tag";
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime200 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components49.css`
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_jsx_runtime201 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components50.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_components49.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components50.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);
@@ -8336,14 +8421,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+        /* @__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)(
           StyledContent,
           {
             $compact: compact,
@@ -8351,7 +8436,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8360,7 +8445,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime200.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_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" })
                 }
               ) }) : null
             ]
@@ -8373,26 +8458,26 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
-var import_jsx_runtime201 = require("react/jsx-runtime");
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_type_guards30 = require("@wistia/type-guards");
+var import_jsx_runtime202 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime201.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_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" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime201.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_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" })
     }
   );
 };
@@ -8400,12 +8485,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime201.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_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" })
     }
   );
 };
@@ -8415,7 +8500,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components50.default.svg`
+var WistiaLogoComponent = import_styled_components51.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8457,7 +8542,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -8467,14 +8552,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("title", { children: title }),
-        (0, import_type_guards29.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("desc", { children: description }) : null,
+        /* @__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,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 // Annotate the CommonJS export names for ESM import in node: