@wistia/ui 0.1.2 → 0.2.1

package/dist/index.mjs

@@ -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.
  *
@@ -6397,31 +6397,42 @@ var Checkbox = forwardRef6(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-import styled16 from "styled-components";
+import styled16, { css as css17 } from "styled-components";
 import { jsx as jsx173 } from "react/jsx-runtime";
-var sizeToPixelMap = {
-  lg: 4,
-  sm: 1
-};
-var DividerComponent = styled16.hr`
-  background: none;
-  border-bottom: none;
-  border-left: none;
-  border-right: none;
+var horizontalBorderCss = css17`
   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 = css17`
+  background-color: var(--wui-color-border);
+  max-width: 1px;
+  min-height: 100%;
+  width: 1px;
+`;
+var DividerComponent = styled16.div`
+  ${({ $orientation }) => {
+  switch ($orientation) {
+    case "vertical":
+      return verticalBorderCss;
+    case "horizontal":
+    default:
+      return horizontalBorderCss;
+  }
+}}
+`;
+var Divider = ({
+  orientation = "horizontal",
+  ...otherProps
+}) => {
   return /* @__PURE__ */ jsx173(
     DividerComponent,
     {
-      $borderHeight: sizeToPixelMap[responsiveSize],
+      $orientation: orientation,
+      "aria-orientation": orientation,
+      role: "separator",
       ...otherProps
     }
   );
@@ -6442,10 +6453,6 @@ var StyledStack = styled17.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
-
-  > * {
-    flex: 1;
-  }
 `;
 var StackComponent = forwardRef7(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
@@ -6638,89 +6645,89 @@ import { isArray as isArray2, isNotNil as isNotNil7, isNotUndefined as isNotUnde
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled19, { css as css17 } from "styled-components";
+import styled19, { css as css18 } from "styled-components";
 import { jsx as jsx177 } from "react/jsx-runtime";
-var bodyBoldStyles = css17`
+var bodyBoldStyles = css18`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css17`
+var labelBoldStyles = css18`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css17`
+var body1TextStyle = css18`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
   --line-height: var(--wui-typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css17`
+var body2TextStyle = css18`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
   --line-height: var(--wui-typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css17`
+var body3TextStyle = css18`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
   --line-height: var(--wui-typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css17`
+var body4TextStyle = css18`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
   --line-height: var(--wui-typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css17`
+var label1TextStyle = css18`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = css17`
+var label2TextStyle = css18`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = css17`
+var label3TextStyle = css18`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = css17`
+var label4TextStyle = css18`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = css17`
+var body1MonoTextStyle = css18`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css17`
+var body2MonoTextStyle = css18`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css17`
+var body3MonoTextStyle = css18`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css17`
+var body4MonoTextStyle = css18`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -6738,13 +6745,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = css17`
+var highContrastProminenceStyle = css18`
   --text-color: var(--wui-color-text-high-contrast);
 `;
-var vibrantProminenceStyle = css17`
+var vibrantProminenceStyle = css18`
   --text-color: var(--wui-color-text);
 `;
-var secondaryProminenceStyle = css17`
+var secondaryProminenceStyle = css18`
   --text-color: var(--wui-color-text-secondary);
 `;
 var prominenceMap = {
@@ -6764,19 +6771,19 @@ var StyledText = styled19.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css17`
+  ${({ $inline }) => $inline && css18`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css17`
+  ${({ $disabled }) => $disabled && css18`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css17`
+  ${({ $preventUserSelect }) => $preventUserSelect && css18`
       user-select: none;
     `}
-  ${({ $align }) => css17`
+  ${({ $align }) => css18`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css17`
+  ${({ as }) => as === "p" && css18`
       display: block;
     `}
 `;
@@ -7033,10 +7040,10 @@ IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef11, cloneElement as cloneElement5 } from "react";
-import styled23, { css as css18 } from "styled-components";
+import styled23, { 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";
-var inputStyles = css18`
+var inputStyles = css19`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border);
@@ -7177,7 +7184,7 @@ var Input = forwardRef11(
 Input.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-import styled24, { css as css19, keyframes } from "styled-components";
+import styled24, { css as css20, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7206,12 +7213,12 @@ var close = keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuContentCss = css19`
+var menuContentCss = css20`
   --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;
 
@@ -7227,6 +7234,7 @@ var menuContentCss = css19`
   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 */
@@ -7244,12 +7252,35 @@ var menuContentCss = css19`
     margin: var(--wui-space-02) 0;
   }
 `;
+var menuItemCss = css20`
+  --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 = css20`
+  --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 = styled24(DropdownMenuContent)`
   ${menuContentCss}
+  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
   children,
+  disabled = false,
+  compact = false,
   trigger,
   label,
   isOpen,
@@ -7258,16 +7289,26 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  let controlProps = {
+    ...isNotNil9(onOpenChange) && isNotNil9(isOpen) ? { open: isOpen, onOpenChange } : {}
+  };
+  if (disabled) {
+    controlProps = {
+      open: false,
+      onOpenChange: () => null
+    };
+  }
   return /* @__PURE__ */ jsxs13(
     DropdownMenu,
     {
       modal: false,
-      ...isNotNil9(onOpenChange) && isNotNil9(isOpen) ? { open: isOpen, onOpenChange } : {},
+      ...controlProps,
       children: [
         /* @__PURE__ */ jsx184(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx184(
           Button,
           {
             "aria-expanded": isOpen,
+            disabled,
             forceState: isOpen ? "active" : void 0,
             rightIcon: /* @__PURE__ */ jsx184(Icon, { type: "caret-down" }),
             ...triggerProps,
@@ -7278,11 +7319,12 @@ var Menu = ({
           MenuContent,
           {
             ...props,
+            $compact: compact,
             align,
+            sideOffset: 6,
             onFocusOutside: (event) => {
               event.preventDefault();
             },
-            sideOffset: 6,
             children
           }
         ) })
@@ -7306,9 +7348,10 @@ var MenuLabel = ({ children, ...props }) => {
       asChild: true,
       ...props,
       children: /* @__PURE__ */ jsx185(
-        Text,
+        Heading,
         {
-          variant: "label3",
+          renderAs: "span",
+          variant: "heading6",
           ...props,
           children
         }
@@ -7329,6 +7372,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
+import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef12 } from "react";
@@ -7336,38 +7380,74 @@ import styled26 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)`
-  --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 }) => isNotUndefined8($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
+  &[role='menuitemradio'] {
+    padding-left: var(--wui-space-04);
+  }
 `;
-var StyledMenuContent = styled26.div`
-  display: grid;
-  grid-template-areas:
-    'label badge'
-    'description badge';
-  grid-template-columns: 1fr auto;
-  position: relative;
-  align-content: center;
+var StyledLeftIconContainer = styled26.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 = styled26.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 = styled26.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-label-description-gap);
+  flex-basis: 100%;
 `;
 var StyledBadgeContainer = styled26.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 = forwardRef12(({ children, appearance, command, ...props }, ref) => {
+var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if (isNotUndefined8(colorScheme)) {
@@ -7376,13 +7456,19 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, ...props },
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    if (isNotUndefined8(colorScheme)) {
-      console.warn("colorScheme prop is ignored when appearance is gated");
-    }
-    colorScheme = "purple";
-    badge = /* @__PURE__ */ jsx186(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ jsx186(
+      Icon,
+      {
+        colorScheme: "purple",
+        style: {
+          height: "16px",
+          width: "16px"
+        },
+        type: "sparkle"
+      }
+    );
   }
-  return /* @__PURE__ */ jsx186(
+  return /* @__PURE__ */ jsxs14(
     StyledButton3,
     {
       ...props,
@@ -7390,11 +7476,13 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, ...props },
       $isGated: appearance === "gated",
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
-      variant: "ghost",
-      children: /* @__PURE__ */ jsxs14(StyledMenuContent, { children: [
-        children,
-        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx186(StyledBadgeContainer, { children: badge ?? command }) : null
-      ] })
+      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
+      ]
     }
   );
 });
@@ -7403,16 +7491,11 @@ MenuItemButton.displayName = "MenuItemButton";
 // src/components/Menu/MenuItemLabelDescription.tsx
 import styled27 from "styled-components";
 import { jsx as jsx187 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled27(Text).attrs({ variant: "label3" })`
-  grid-area: label;
-`;
+var StyledMenuItemLabel = styled27.span``;
 var StyledMenuItemDescription = styled27(Text).attrs({
-  variant: "label4",
+  variant: "body4",
   prominence: "secondary"
-})`
-  margin-top: var(--menu-item-gap);
-  grid-area: description;
-`;
+})``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ jsx187(StyledMenuItemLabel, { children });
 };
@@ -7438,7 +7521,7 @@ var StyledSubTrigger = styled28(DropdownMenuSubTrigger)`
 
   &[data-state='open'],
   &[data-highlighted] {
-    background-color: var(--button-color-bg-hover);
+    background-color: var(--wui-color-bg-surface-hover);
   }
 `;
 var SubMenuTrigger = (props) => {
@@ -7464,7 +7547,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ jsxs15(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs15(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx188(MenuItemLabel, { children: label }),
-      /* @__PURE__ */ jsx188(MenuItemDescription, { children: description })
+      isNotNil11(description) ? /* @__PURE__ */ jsx188(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx188(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx188(SubMenuContent, { children }) })
   ] }) : /* @__PURE__ */ jsxs15(DropdownMenuGroup, { children: [
@@ -7548,6 +7631,7 @@ var RadioMenuItem = ({
     DropdownMenuRadioItem,
     {
       ...extraProps,
+      asChild: true,
       value,
       children: /* @__PURE__ */ jsx191(
         MenuItemButton,
@@ -7572,30 +7656,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__ */ jsx192(
           "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"
+            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(
           "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"
-          }
-        ),
-        /* @__PURE__ */ jsx192(
-          "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"
           }
         )
       ]
@@ -7605,23 +7682,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__ */ jsx192(
           "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__ */ jsx192(
           "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"
           }
         )
       ]
@@ -7637,6 +7714,7 @@ var CheckboxMenuItem = ({
   return /* @__PURE__ */ jsx192(
     DropdownMenuCheckboxItem,
     {
+      asChild: true,
       checked,
       onCheckedChange,
       onSelect,
@@ -7653,14 +7731,10 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-import { forwardRef as forwardRef15 } from "react";
-import styled33 from "styled-components";
-import {
-  Root as DialogRoot,
-  Content as DialogContent,
-  Portal as DialogPortal
-} from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { forwardRef as forwardRef16 } from "react";
+import styled34 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";
@@ -7687,7 +7761,7 @@ var ModalCloseButton = () => {
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 import styled30 from "styled-components";
-import { isNotNil as isNotNil11 } from "@wistia/type-guards";
+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({
@@ -7699,7 +7773,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil11(text) ? text : children;
+  const accessibleText = isNotNil12(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ jsx194(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -7739,62 +7813,14 @@ var ModalHeader = ({
   ] });
 };
 
-// src/private/components/Backdrop/Backdrop.tsx
+// src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef14 } from "react";
 import styled32 from "styled-components";
-import { jsx as jsx196 } from "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 = styled32.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 = forwardRef14(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx196(
-    BackdropComponent,
-    {
-      ref,
-      $alignHorizontal: alignHorizontal,
-      $alignVertical: alignVertical,
-      ...otherProps,
-      children
-    }
-  )
-);
-Backdrop.displayName = "Backdrop";
+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 { isNotNil as isNotNil12 } from "@wistia/type-guards";
+import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef5(null);
   useEffect2(() => {
@@ -7802,7 +7828,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect2(() => {
     return () => {
-      if (isNotNil12(previouslyFocusedRef.current)) {
+      if (isNotNil13(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -7811,9 +7837,9 @@ var useFocusRestore = () => {
   }, []);
 };
 
-// src/components/Modal/Modal.tsx
-import { jsx as jsx197, jsxs as jsxs19 } from "react/jsx-runtime";
-var StyledModalContent = styled33(DialogContent)`
+// src/components/Modal/ModalContent.tsx
+import { jsx as jsx196 } from "react/jsx-runtime";
+var StyledModalContent = styled32(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -7853,10 +7879,10 @@ var StyledModalContent = styled33(DialogContent)`
     }
   }
 `;
-var ModalContent = forwardRef15(
+var ModalContent = forwardRef14(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx197(
+    return /* @__PURE__ */ jsx196(
       StyledModalContent,
       {
         ref,
@@ -7868,13 +7894,68 @@ var ModalContent = forwardRef15(
     );
   }
 );
-ModalContent.displayName = "ModalContent";
-var ModalBody = styled33.div`
+
+// 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";
+var backdropAnimationDuration = 150;
+var alignVerticalMap = {
+  stretch: "normal",
+  top: "start",
+  center: "center",
+  bottom: "end"
+};
+var alignHorizontalMap = {
+  left: "start",
+  center: "center",
+  right: "end"
+};
+var BackdropComponent = styled33.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 = forwardRef15(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx197(
+    BackdropComponent,
+    {
+      ref,
+      $alignHorizontal: alignHorizontal,
+      $alignVertical: alignVertical,
+      ...otherProps,
+      children
+    }
+  )
+);
+Backdrop.displayName = "Backdrop";
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx198, jsxs as jsxs19 } from "react/jsx-runtime";
+var ModalBody = styled34.div`
   flex-direction: column;
   display: flex;
   order: 2;
 `;
-var Modal = forwardRef15(
+var Modal = forwardRef16(
   ({
     children,
     fullHeight = false,
@@ -7887,17 +7968,17 @@ var Modal = forwardRef15(
     width,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx197(
+    return /* @__PURE__ */ jsx198(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil13(onRequestClose)) {
+          if (!open2 && isNotNil14(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
         children: /* @__PURE__ */ jsxs19(DialogPortal, { children: [
-          /* @__PURE__ */ jsx197(Backdrop, {}),
+          /* @__PURE__ */ jsx198(Backdrop, {}),
           /* @__PURE__ */ jsxs19(
             ModalContent,
             {
@@ -7905,7 +7986,7 @@ var Modal = forwardRef15(
               "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil13(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil14(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -7915,8 +7996,8 @@ var Modal = forwardRef15(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx197(ModalBody, { children }),
-                /* @__PURE__ */ jsx197(
+                /* @__PURE__ */ jsx198(ModalBody, { children }),
+                /* @__PURE__ */ jsx198(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -7935,16 +8016,16 @@ var Modal = forwardRef15(
 Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
-import { forwardRef as forwardRef16, useId as useId3 } from "react";
-import styled34, { css as css20 } from "styled-components";
+import { forwardRef as forwardRef17, useId as useId3 } from "react";
+import styled35, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx198, jsxs as jsxs20 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled34.div`
+import { jsx as jsx199, jsxs as jsxs20 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled35.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled34.input`
+var StyledRadio = styled35.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -7970,11 +8051,11 @@ var StyledRadio = styled34.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = css20`
+var disabledStyle2 = css21`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = css20`
+var errorStyle = css21`
   /* TODO Lamp to design error state */
   &:hover,
   &:focus,
@@ -7982,11 +8063,11 @@ var errorStyle = css20`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = css20`
+var defaultHoverStyle = css21`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled34.div`
+var StyledRadioWrapper = styled35.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8009,7 +8090,7 @@ var StyledRadioWrapper = styled34.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = forwardRef16(
+var Radio = forwardRef17(
   ({
     checked,
     disabled = false,
@@ -8030,7 +8111,7 @@ var Radio = forwardRef16(
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx198(
+          /* @__PURE__ */ jsx199(
             StyledRadio,
             {
               ref,
@@ -8046,7 +8127,7 @@ var Radio = forwardRef16(
             }
           ),
           /* @__PURE__ */ jsxs20(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx198(
+            /* @__PURE__ */ jsx199(
               Label,
               {
                 disabled,
@@ -8055,7 +8136,7 @@ var Radio = forwardRef16(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx198(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx199(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -8065,11 +8146,11 @@ var Radio = forwardRef16(
 Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef17 } from "react";
-import styled35 from "styled-components";
-import { isNil as isNil11, isNotNil as isNotNil14, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment2, jsx as jsx199, jsxs as jsxs21 } from "react/jsx-runtime";
-var TagLabel = styled35.a`
+import { forwardRef as forwardRef18 } from "react";
+import styled36 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`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8097,14 +8178,14 @@ var TagLabel = styled35.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled35.div`
+var TagDivider = styled36.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled35.button`
+var StyledRemoveButton = styled36.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8132,7 +8213,7 @@ var StyledRemoveButton = styled35.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled35.div`
+var StyledTag = styled36.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8150,7 +8231,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     );
   }
   return /* @__PURE__ */ jsxs21(Fragment2, { children: [
-    /* @__PURE__ */ jsx199(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsx200(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs21(
       StyledRemoveButton,
       {
@@ -8158,22 +8239,22 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx199(
+          /* @__PURE__ */ jsx200(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx199(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx200(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef17(
+var Tag = forwardRef18(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil14(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    const labelProps = isNotNil15(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs21(
       StyledTag,
       {
@@ -8181,7 +8262,7 @@ var Tag = forwardRef17(
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx199(
+          /* @__PURE__ */ jsx200(
             TagLabel,
             {
               ...labelProps,
@@ -8189,7 +8270,7 @@ var Tag = forwardRef17(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx199(
+          /* @__PURE__ */ jsx200(
             RemoveButton,
             {
               colorScheme,
@@ -8212,16 +8293,16 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled36, { css as css21 } from "styled-components";
-import { jsx as jsx200, jsxs as jsxs22 } from "react/jsx-runtime";
-var CompactTooltipStyles = css21`
+import styled37, { css as css22 } from "styled-components";
+import { jsx as jsx201, 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);
   --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 = styled36(Content)`
+var StyledContent = styled37(Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8285,8 +8366,8 @@ var Tooltip = ({
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx200(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx200(Portal, { children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx201(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx201(Portal, { children: /* @__PURE__ */ jsxs22(
           StyledContent,
           {
             $compact: compact,
@@ -8294,7 +8375,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx200(Arrow, { asChild: true, children: /* @__PURE__ */ jsx200(
+              !hideArrow ? /* @__PURE__ */ jsx201(Arrow, { asChild: true, children: /* @__PURE__ */ jsx201(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8303,7 +8384,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx200("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__ */ 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" })
                 }
               ) }) : null
             ]
@@ -8316,26 +8397,26 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled37 from "styled-components";
-import { isNotNil as isNotNil15 } from "@wistia/type-guards";
-import { jsx as jsx201, jsxs as jsxs23 } from "react/jsx-runtime";
+import styled38 from "styled-components";
+import { isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { jsx as jsx202, jsxs as jsxs23 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx201(
+    return /* @__PURE__ */ jsx202(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx201("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__ */ 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" })
       }
     );
   }
-  return /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx202(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx201("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__ */ 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" })
     }
   );
 };
@@ -8343,12 +8424,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx201(
+  return /* @__PURE__ */ jsx202(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx201("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__ */ 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" })
     }
   );
 };
@@ -8358,7 +8439,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled37.svg`
+var WistiaLogoComponent = styled38.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8410,14 +8491,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx201("title", { children: title }),
-        isNotNil15(description) ? /* @__PURE__ */ jsx201("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx202("title", { children: title }),
+        isNotNil16(description) ? /* @__PURE__ */ jsx202("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx201("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx202("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 export {