@wistia/ui 0.0.25 → 0.1.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.25
+ * @license @wistia/ui v0.1.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -71,12 +71,13 @@ var resetCss = css`
   }
 
   /* Balance text wrapping on headings */
-  h1,
+
+  /* h1,
   h2,
   h3,
   h4 {
     text-wrap: balance;
-  }
+  } */
 
   /* A elements that don't have a class get default styles */
   a:not([class]) {
@@ -148,7 +149,7 @@ var globalStyleAdjustmentsCss = css2`
 `;
 
 // src/css/designTokens/index.tsx
-import { css as css8 } from "styled-components";
+import { css as css9 } from "styled-components";
 
 // src/css/designTokens/colorGlobal.tsx
 import { css as css3 } from "styled-components";
@@ -1276,8 +1277,16 @@ var typographyTokens = css7`
   --wui-typography-label-4-weight: var(--wui-typography-weight-label);
 `;
 
+// src/css/designTokens/zIndex.tsx
+import { css as css8 } from "styled-components";
+var zIndexTokens = css8`
+  --wui-zindex-backdrop: 100;
+  --wui-zindex-modal: 100;
+  --wui-zindex-menu: 500;
+`;
+
 // src/css/designTokens/index.tsx
-var colorTokens = css8`
+var colorTokens = css9`
   ${lightGlobalTokens}
   /* Dark mode is disabled until we have a more robust plan for supporting it */
 
@@ -1286,12 +1295,13 @@ var colorTokens = css8`
   } */
   ${colorAliasTokens}
 `;
-var designTokens = css8`
+var designTokens = css9`
   :root {
     ${colorTokens}
     ${spacingTokens}
     ${borderRadiusTokens}
     ${typographyTokens}
+    ${zIndexTokens}
   }
 `;
 
@@ -1534,9 +1544,9 @@ import { isNotNil as isNotNil2 } from "@wistia/type-guards";
 
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil } from "@wistia/type-guards";
-import styled, { css as css9 } from "styled-components";
+import styled, { css as css10 } from "styled-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
-var ellipsisStyle = css9`
+var ellipsisStyle = css10`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1559,14 +1569,14 @@ var ellipsisStyle = css9`
     }
   }
 `;
-var ellipsisFlexParentStyle = css9`
+var ellipsisFlexParentStyle = css10`
   min-width: 0;
 `;
 var EllipsisComponent = styled.div`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if (isNotNil($lines)) {
-    return css9`
+    return css10`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
         display: -webkit-box;
@@ -1587,7 +1597,7 @@ var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx4(
 Ellipsis.displayName = "Ellipsis";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
-import { css as css10 } from "styled-components";
+import { css as css11 } from "styled-components";
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
   { token: "bg-surface-hover", step: "3" },
@@ -1614,7 +1624,7 @@ var colorSchemeSchema = [
   { token: "icon-on-fill", step: "contrast" },
   { token: "focus-ring", step: "9" }
 ];
-var defaultScheme = css10`
+var defaultScheme = css11`
   --wui-color-bg-surface: var(--wui-gray-surface);
   --wui-color-bg-surface-hover: var(--wui-gray-3);
   --wui-color-bg-surface-active: var(--wui-gray-4);
@@ -1640,7 +1650,7 @@ var defaultScheme = css10`
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
-var navScheme = css10`
+var navScheme = css11`
   --wui-color-bg-fill-active: var(--wui-blue-5);
   --wui-color-bg-fill-hover: var(--wui-blue-4);
   --wui-color-bg-fill: var(--wui-blue-1);
@@ -1691,7 +1701,7 @@ var getColorScheme = (colorScheme) => {
   if (colorScheme === "default") {
     return defaultScheme;
   }
-  return css10`
+  return css11`
     ${colorSchemeSchema.map(({ token, step }) => {
     return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
   }).join("")}
@@ -2161,8 +2171,8 @@ import styled9 from "styled-components";
 import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
-import { css as css11 } from "styled-components";
-var buttonResetCss = css11`
+import { css as css12 } from "styled-components";
+var buttonResetCss = css12`
   align-items: center;
   background-color: transparent;
   background-image: none;
@@ -2207,8 +2217,8 @@ var buttonResetCss = css11`
 `;
 
 // src/components/Button/buttonStyles.tsx
-import { css as css12 } from "styled-components";
-var buttonSmallStyles = css12`
+import { css as css13 } from "styled-components";
+var buttonSmallStyles = css13`
   --button-padding-vertical: var(--wui-space-01);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-01);
@@ -2219,7 +2229,7 @@ var buttonSmallStyles = css12`
   --button-icon-size: 12px;
   --button-label-gap: 4px;
 `;
-var buttonMediumStyles = css12`
+var buttonMediumStyles = css13`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: 6px;
@@ -2230,7 +2240,7 @@ var buttonMediumStyles = css12`
   --button-icon-size: 16px;
   --button-label-gap: 6px;
 `;
-var buttonLargeStyles = css12`
+var buttonLargeStyles = css13`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2241,7 +2251,7 @@ var buttonLargeStyles = css12`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonExtraLargeStyles = css12`
+var buttonExtraLargeStyles = css13`
   --button-padding-vertical: var(--wui-space-03);
   --button-padding-horizontal: var(--wui-space-03);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2252,34 +2262,34 @@ var buttonExtraLargeStyles = css12`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var ghostButtonVariant = css12`
+var ghostButtonVariant = css13`
   --button-color-bg: transparent;
   --button-color-bg-hover: var(--wui-color-bg-surface-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-active);
   --button-color-text: var(--wui-color-text);
   --button-color-icon: var(--wui-color-icon);
 `;
-var outlineButtonVariant = css12`
+var outlineButtonVariant = css13`
   ${ghostButtonVariant};
   --button-color-border: var(--wui-color-border);
 
   box-shadow: 0 0 0 2px var(--button-color-border) inset;
 `;
-var softButtonVariant = css12`
+var softButtonVariant = css13`
   --button-color-bg: var(--wui-color-bg-surface-secondary);
   --button-color-bg-hover: var(--wui-color-bg-surface-secondary-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-secondary-active);
   --button-color-text: var(--wui-color-text);
   --button-color-icon: var(--wui-color-icon);
 `;
-var solidButtonVariant = css12`
+var solidButtonVariant = css13`
   --button-color-bg: var(--wui-color-bg-fill);
   --button-color-bg-hover: var(--wui-color-bg-fill-hover);
   --button-color-bg-active: var(--wui-color-bg-fill-active);
   --button-color-text: var(--wui-color-text-on-fill);
   --button-color-icon: var(--wui-color-icon-on-fill);
 `;
-var disabledButtonVariant = css12`
+var disabledButtonVariant = css13`
   --button-color-bg: var(--wui-color-bg-surface-disabled);
   --button-color-bg-hover: var(--wui-color-bg-surface-disabled);
   --button-color-bg-active: var(--wui-color-bg-surface-disabled);
@@ -2287,7 +2297,7 @@ var disabledButtonVariant = css12`
   --button-color-icon: var(--wui-color-icon-disabled);
   --button-color-border: var(--wui-color-border-disabled);
 `;
-var pressedButtonVariant = css12`
+var pressedButtonVariant = css13`
   --button-color-bg: var(--wui-color-bg-surface-selected);
   --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
   --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
@@ -2295,7 +2305,7 @@ var pressedButtonVariant = css12`
   --button-color-icon: var(--wui-color-icon-selected);
   --button-color-border: var(--wui-color-border-selected);
 `;
-var buttonBaseStyles = css12`
+var buttonBaseStyles = css13`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
   font-size: var(--button-typography-size);
@@ -5908,11 +5918,11 @@ import styled14 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled12, { css as css14 } from "styled-components";
+import styled12, { css as css15 } from "styled-components";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled11, { css as css13 } from "styled-components";
+import styled11, { css as css14 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5921,43 +5931,43 @@ var makePolymorphic = (component) => {
 
 // src/components/Heading/Heading.tsx
 import { jsx as jsx168 } from "react/jsx-runtime";
-var heroStyle = css13`
+var heroStyle = css14`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = css13`
+var heading1TextStyle = css14`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = css13`
+var heading2TextStyle = css14`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = css13`
+var heading3TextStyle = css14`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = css13`
+var heading4TextStyle = css14`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = css13`
+var heading5TextStyle = css14`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = css13`
+var heading6TextStyle = css14`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -5982,16 +5992,16 @@ var StyledHeading = styled11.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css13`
+  ${({ $inline }) => $inline && css14`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css13`
+  ${({ $disabled }) => $disabled && css14`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css13`
+  ${({ $preventUserSelect }) => $preventUserSelect && css14`
       user-select: none;
     `}
-  ${({ $align }) => css13`
+  ${({ $align }) => css14`
     text-align: ${$align};
   `}
   margin: 0;
@@ -6037,7 +6047,7 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Label/Label.tsx
 import { jsx as jsx169 } from "react/jsx-runtime";
-var requiredStyle = css14`
+var requiredStyle = css15`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -6045,7 +6055,7 @@ var requiredStyle = css14`
     content: '*';
   }
 `;
-var disabledStyle = css14`
+var disabledStyle = css15`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel = styled12(Heading).attrs({
@@ -6490,89 +6500,89 @@ import { isArray as isArray2, isNotNil as isNotNil7, isNotUndefined as isNotUnde
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled18, { css as css15 } from "styled-components";
+import styled18, { css as css16 } from "styled-components";
 import { jsx as jsx176 } from "react/jsx-runtime";
-var bodyBoldStyles = css15`
+var bodyBoldStyles = css16`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css15`
+var labelBoldStyles = css16`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css15`
+var body1TextStyle = css16`
   --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 = css15`
+var body2TextStyle = css16`
   --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 = css15`
+var body3TextStyle = css16`
   --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 = css15`
+var body4TextStyle = css16`
   --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 = css15`
+var label1TextStyle = css16`
   --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 = css15`
+var label2TextStyle = css16`
   --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 = css15`
+var label3TextStyle = css16`
   --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 = css15`
+var label4TextStyle = css16`
   --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 = css15`
+var body1MonoTextStyle = css16`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css15`
+var body2MonoTextStyle = css16`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css15`
+var body3MonoTextStyle = css16`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css15`
+var body4MonoTextStyle = css16`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -6590,13 +6600,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = css15`
+var highContrastProminenceStyle = css16`
   --text-color: var(--wui-color-text-high-contrast);
 `;
-var vibrantProminenceStyle = css15`
+var vibrantProminenceStyle = css16`
   --text-color: var(--wui-color-text);
 `;
-var secondaryProminenceStyle = css15`
+var secondaryProminenceStyle = css16`
   --text-color: var(--wui-color-text-secondary);
 `;
 var prominenceMap = {
@@ -6616,19 +6626,19 @@ var StyledText = styled18.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css15`
+  ${({ $inline }) => $inline && css16`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css15`
+  ${({ $disabled }) => $disabled && css16`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css15`
+  ${({ $preventUserSelect }) => $preventUserSelect && css16`
       user-select: none;
     `}
-  ${({ $align }) => css15`
+  ${({ $align }) => css16`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css15`
+  ${({ as }) => as === "p" && css16`
       display: block;
     `}
 `;
@@ -6847,122 +6857,9 @@ RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef9 } from "react";
-import styled22 from "styled-components";
-
-// src/components/Tooltip/Tooltip.tsx
-import {
-  Root,
-  Content,
-  Trigger,
-  Portal,
-  Arrow
-} from "@radix-ui/react-tooltip";
-import styled21, { css as css16 } from "styled-components";
-import { jsx as jsx181, jsxs as jsxs11 } from "react/jsx-runtime";
-var CompactTooltipStyles = css16`
-  --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 = styled21(Content)`
-  --tooltip-font-family: var(--wui-typography-family-default);
-  --tooltip-border-radius: var(--wui-border-radius-05);
-  --tooltip-bg: var(--wui-color-bg-tooltip);
-  --tooltip-color: var(--wui-color-text-on-fill);
-  --tooltip-font-size: var(--wui-typography-label-3-size);
-  --tooltip-line-height: var(--wui-typography-label-3-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-3-weight);
-  --tooltip-horizontal-padding: var(--wui-space-03);
-  --tooltip-vertical-padding: var(--wui-space-03);
-
-  ${({ $compact }) => Boolean($compact) && CompactTooltipStyles};
-
-  font-family: var(--tooltip-font-family);
-  font-size: var(--tooltip-font-size);
-  border-radius: var(--tooltip-border-radius);
-  padding: var(--tooltip-horizontal-padding) var(--tooltip-vertical-padding);
-  background-color: var(--tooltip-bg);
-  color: var(--tooltip-color);
-  user-select: none;
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-  max-width: 30em;
-
-  &[data-state='delayed-open'][data-side='top'] {
-    animation-name: slideDownAndFade;
-  }
-
-  &[data-state='delayed-open'][data-side='right'] {
-    animation-name: slideLeftAndFade;
-  }
-
-  &[data-state='delayed-open'][data-side='bottom'] {
-    animation-name: slideUpAndFade;
-  }
-
-  &[data-state='delayed-open'][data-side='left'] {
-    animation-name: slideRightAndFade;
-  }
-`;
-var VISUAL_OFFSET = 6;
-var Tooltip = ({
-  delay = 700,
-  direction = "top",
-  content,
-  children,
-  forceOpen,
-  compact = false,
-  hideArrow = false
-}) => {
-  const rootProps = {};
-  if (content === "" || content === null) {
-    rootProps.open = false;
-  }
-  if (forceOpen === true) {
-    rootProps.open = true;
-  }
-  return /* @__PURE__ */ jsxs11(
-    Root,
-    {
-      delayDuration: delay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsx181(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx181(Portal, { children: /* @__PURE__ */ jsxs11(
-          StyledContent,
-          {
-            $compact: compact,
-            side: direction,
-            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-            children: [
-              content,
-              !hideArrow ? /* @__PURE__ */ jsx181(Arrow, { asChild: true, children: /* @__PURE__ */ jsx181(
-                "svg",
-                {
-                  fill: "var(--tooltip-bg)",
-                  height: "8",
-                  style: { transform: "translateY(-2px)" },
-                  viewBox: "0 0 12 8",
-                  width: "12",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx181("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
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-};
-Tooltip.displayName = "Tooltip";
-
-// src/components/IconButton/IconButton.tsx
-import { jsx as jsx182 } from "react/jsx-runtime";
-var StyledButton2 = styled22(Button)`
+import styled21 from "styled-components";
+import { jsx as jsx181 } from "react/jsx-runtime";
+var StyledButton2 = styled21(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -6977,9 +6874,9 @@ var StyledButton2 = styled22(Button)`
   line-height: 1;
 `;
 var IconButton = forwardRef9(
-  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
+  ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ jsx182(
+    return /* @__PURE__ */ jsx181(
       StyledButton2,
       {
         ...props,
@@ -6992,16 +6889,12 @@ var IconButton = forwardRef9(
         })
       }
     );
-    if (disableTooltip) {
-      return button;
-    }
-    return /* @__PURE__ */ jsx182(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
 // src/components/Menu/Menu.tsx
-import styled23, { css as css17, keyframes } from "styled-components";
+import styled22, { css as css17, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7009,7 +6902,7 @@ import {
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil8, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
-import { jsx as jsx183, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs11 } from "react/jsx-runtime";
 var open = keyframes`
   from {
     opacity: 0;
@@ -7038,7 +6931,6 @@ var menuContentCss = css17`
   --menu-padding: var(--wui-space-03);
   --menu-min-width: 120px;
   --menu-max-width: 284px;
-  --menu-zindex: 500; /* TODO - need z-index token */
 
   animation: ${open}; /* TODO - need easing tokens */
   font-family: var(--menu-font-family);
@@ -7051,7 +6943,7 @@ var menuContentCss = css17`
   overflow: auto;
   padding: var(--menu-padding);
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-  z-index: var(--menu-zindex);
+  z-index: var(--wui-zindex-menu);
 
   &[data-state='closed'] {
     animation: ${close}; /* TODO - need easing tokens */
@@ -7069,7 +6961,7 @@ var menuContentCss = css17`
     margin: var(--wui-space-02) 0;
   }
 `;
-var MenuContent = styled23(DropdownMenuContent)`
+var MenuContent = styled22(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -7083,23 +6975,23 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     DropdownMenu,
     {
       modal: false,
       ...isNotNil8(onOpenChange) && isNotNil8(isOpen) ? { open: isOpen, onOpenChange } : {},
       children: [
-        /* @__PURE__ */ jsx183(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx183(
+        /* @__PURE__ */ jsx182(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx182(
           Button,
           {
             "aria-expanded": isOpen,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx183(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx182(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx183(DropdownMenuPortal, { children: /* @__PURE__ */ jsx183(
+        /* @__PURE__ */ jsx182(DropdownMenuPortal, { children: /* @__PURE__ */ jsx182(
           MenuContent,
           {
             ...props,
@@ -7118,19 +7010,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled24 from "styled-components";
+import styled23 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx184 } from "react/jsx-runtime";
-var StyledMenuLabel = styled24(DropdownMenuLabel)`
+import { jsx as jsx183 } from "react/jsx-runtime";
+var StyledMenuLabel = styled23(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx184(
+  return /* @__PURE__ */ jsx183(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx184(
+      children: /* @__PURE__ */ jsx183(
         Text,
         {
           variant: "label3",
@@ -7145,7 +7037,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState6 } from "react";
-import styled27 from "styled-components";
+import styled26 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -7157,10 +7049,10 @@ import {
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef10 } from "react";
-import styled25 from "styled-components";
+import styled24 from "styled-components";
 import { isNotNil as isNotNil9, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
-var StyledButton3 = styled25(Button)`
+import { jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
+var StyledButton3 = styled24(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);
@@ -7177,7 +7069,7 @@ var StyledButton3 = styled25(Button)`
 
   ${({ $isGated }) => isNotUndefined8($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
 `;
-var StyledMenuContent = styled25.div`
+var StyledMenuContent = styled24.div`
   display: grid;
   grid-template-areas:
     'label badge'
@@ -7186,7 +7078,7 @@ var StyledMenuContent = styled25.div`
   position: relative;
   align-content: center;
 `;
-var StyledBadgeContainer = styled25.div`
+var StyledBadgeContainer = styled24.div`
   grid-area: badge;
   align-self: start;
   justify-self: end;
@@ -7205,9 +7097,9 @@ var MenuItemButton = forwardRef10(({ children, appearance, command, ...props },
       console.warn("colorScheme prop is ignored when appearance is gated");
     }
     colorScheme = "purple";
-    badge = /* @__PURE__ */ jsx185(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ jsx184(Icon, { type: "sparkle" });
   }
-  return /* @__PURE__ */ jsx185(
+  return /* @__PURE__ */ jsx184(
     StyledButton3,
     {
       ...props,
@@ -7216,9 +7108,9 @@ var MenuItemButton = forwardRef10(({ children, appearance, command, ...props },
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
       variant: "ghost",
-      children: /* @__PURE__ */ jsxs13(StyledMenuContent, { children: [
+      children: /* @__PURE__ */ jsxs12(StyledMenuContent, { children: [
         children,
-        isNotNil9(badge) || isNotNil9(command) ? /* @__PURE__ */ jsx185(StyledBadgeContainer, { children: badge ?? command }) : null
+        isNotNil9(badge) || isNotNil9(command) ? /* @__PURE__ */ jsx184(StyledBadgeContainer, { children: badge ?? command }) : null
       ] })
     }
   );
@@ -7226,12 +7118,12 @@ var MenuItemButton = forwardRef10(({ children, appearance, command, ...props },
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled26 from "styled-components";
-import { jsx as jsx186 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled26(Text).attrs({ variant: "label3" })`
+import styled25 from "styled-components";
+import { jsx as jsx185 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled25(Text).attrs({ variant: "label3" })`
   grid-area: label;
 `;
-var StyledMenuItemDescription = styled26(Text).attrs({
+var StyledMenuItemDescription = styled25(Text).attrs({
   variant: "label4",
   prominence: "secondary"
 })`
@@ -7239,15 +7131,15 @@ var StyledMenuItemDescription = styled26(Text).attrs({
   grid-area: description;
 `;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx186(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx185(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx186(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx185(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
-var SubMenuContent = styled27(DropdownMenuSubContent)`
+import { jsx as jsx186, jsxs as jsxs13 } from "react/jsx-runtime";
+var SubMenuContent = styled26(DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -7255,10 +7147,10 @@ var SubMenuContent = styled27(DropdownMenuSubContent)`
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled27.div`
+var StyledMobileSubMenuItems = styled26.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled27(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled26(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -7269,11 +7161,11 @@ var StyledSubTrigger = styled27(DropdownMenuSubTrigger)`
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx187(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx187(
+  return /* @__PURE__ */ jsx186(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx186(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ jsx187(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx186(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -7286,14 +7178,14 @@ var SubMenu = ({
 }) => {
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState6(false);
-  return isSmAndUp ? /* @__PURE__ */ jsxs14(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs14(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx187(MenuItemLabel, { children: label }),
-      /* @__PURE__ */ jsx187(MenuItemDescription, { children: description })
+  return isSmAndUp ? /* @__PURE__ */ jsxs13(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs13(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ jsx186(MenuItemLabel, { children: label }),
+      /* @__PURE__ */ jsx186(MenuItemDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx187(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx187(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ jsxs14(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsx186(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx186(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ jsxs13(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs13(
       SubMenuTrigger,
       {
         ...props,
@@ -7302,12 +7194,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx187(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx187(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx186(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx186(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx187(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx186(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -7315,15 +7207,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef11 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx188 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 var MenuItem = forwardRef11(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx188(
+    return /* @__PURE__ */ jsx187(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx188(
+        children: /* @__PURE__ */ jsx187(
           MenuItemButton,
           {
             ...props,
@@ -7341,10 +7233,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx188, jsxs as jsxs14 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs15(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx189(MenuLabel, { children: label }),
+  return /* @__PURE__ */ jsxs14(DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ jsx188(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -7355,11 +7247,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx190 } from "react/jsx-runtime";
+import { jsx as jsx189 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx190(
+  indicator = /* @__PURE__ */ jsx189(
     Icon,
     {
       size: "sm",
@@ -7369,16 +7261,16 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx190(
+  return /* @__PURE__ */ jsx189(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       value,
-      children: /* @__PURE__ */ jsx190(
+      children: /* @__PURE__ */ jsx189(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx190(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx189(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -7390,9 +7282,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs15 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs16(
+  return checked ? /* @__PURE__ */ jsxs15(
     "svg",
     {
       ...props,
@@ -7402,21 +7294,21 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "16",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx191(
+        /* @__PURE__ */ jsx190(
           "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__ */ jsx191(
+        /* @__PURE__ */ jsx190(
           "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__ */ jsx191(
+        /* @__PURE__ */ jsx190(
           "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",
@@ -7425,7 +7317,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs16(
+  ) : /* @__PURE__ */ jsxs15(
     "svg",
     {
       ...props,
@@ -7435,14 +7327,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "16",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx191(
+        /* @__PURE__ */ jsx190(
           "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"
           }
         ),
-        /* @__PURE__ */ jsx191(
+        /* @__PURE__ */ jsx190(
           "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",
@@ -7459,17 +7351,17 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx191(
+  return /* @__PURE__ */ jsx190(
     DropdownMenuCheckboxItem,
     {
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx191(
+      children: /* @__PURE__ */ jsx190(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx191(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx190(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -7477,17 +7369,300 @@ var CheckboxMenuItem = ({
 };
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
+// src/components/Modal/Modal.tsx
+import { forwardRef as forwardRef13 } from "react";
+import styled31 from "styled-components";
+import {
+  Root as DialogRoot,
+  Content as DialogContent,
+  Portal as DialogPortal
+} from "@radix-ui/react-dialog";
+import { isNotNil as isNotNil12 } from "@wistia/type-guards";
+
+// src/components/Modal/ModalHeader.tsx
+import styled29 from "styled-components";
+import { Title as DialogTitle } from "@radix-ui/react-dialog";
+
+// src/components/Modal/ModalCloseButton.tsx
+import styled27 from "styled-components";
+import { Close as DialogClose } from "@radix-ui/react-dialog";
+import { jsx as jsx191 } from "react/jsx-runtime";
+var CloseButton = styled27(DialogClose)`
+  align-self: start;
+`;
+var ModalCloseButton = () => {
+  return /* @__PURE__ */ jsx191(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx191(
+    IconButton,
+    {
+      disableTooltip: true,
+      label: "Dismiss modal",
+      size: "sm",
+      variant: "ghost",
+      children: /* @__PURE__ */ jsx191(Icon, { type: "close" })
+    }
+  ) });
+};
+
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+import styled28 from "styled-components";
+import { isNotNil as isNotNil10 } from "@wistia/type-guards";
+import { jsx as jsx192 } from "react/jsx-runtime";
+var VisuallyHidden = styled28.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled28.div({
+  "&:not(:focus-within)": visuallyHiddenStyle
+});
+var ScreenReaderOnly = ({
+  text,
+  children,
+  focusable = false,
+  ...otherProps
+}) => {
+  const accessibleText = isNotNil10(text) ? text : children;
+  if (focusable) {
+    return /* @__PURE__ */ jsx192(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+  }
+  return /* @__PURE__ */ jsx192(VisuallyHidden, { ...otherProps, children: accessibleText });
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly";
+
+// src/components/Modal/ModalHeader.tsx
+import { jsx as jsx193, jsxs as jsxs16 } from "react/jsx-runtime";
+var Header = styled29.header`
+  display: flex;
+  order: 1;
+  gap: var(--wui-space-01);
+  margin-bottom: var(--wui-space-03);
+  justify-content: space-between;
+
+  /* DialogTitle creates an h2 element which inherits some margin */
+  h2 {
+    margin-top: 0;
+  }
+`;
+var Title = styled29(DialogTitle)`
+  font-family: var(--wui-typography-heading-2-family);
+  line-height: var(--wui-typography-heading-2-line-height);
+  font-size: var(--wui-typography-heading-2-size);
+  font-weight: var(--wui-typography-heading-2-weight);
+`;
+var ModalHeader = ({
+  title,
+  hideTitle,
+  hideCloseButton
+}) => {
+  const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
+  return /* @__PURE__ */ jsxs16(Header, { children: [
+    /* @__PURE__ */ jsx193(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ jsx193(ModalCloseButton, {})
+  ] });
+};
+
+// src/private/components/Backdrop/Backdrop.tsx
+import { forwardRef as forwardRef12 } from "react";
+import styled30 from "styled-components";
+import { jsx as jsx194 } 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 = styled30.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 = forwardRef12(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx194(
+    BackdropComponent,
+    {
+      ref,
+      $alignHorizontal: alignHorizontal,
+      $alignVertical: alignVertical,
+      ...otherProps,
+      children
+    }
+  )
+);
+Backdrop.displayName = "Backdrop";
+
+// src/private/hooks/useFocusRestore/useFocusRestore.ts
+import { useRef as useRef5, useEffect as useEffect2 } from "react";
+import { isNotNil as isNotNil11 } from "@wistia/type-guards";
+var useFocusRestore = () => {
+  const previouslyFocusedRef = useRef5(null);
+  useEffect2(() => {
+    previouslyFocusedRef.current = document.activeElement;
+  }, []);
+  useEffect2(() => {
+    return () => {
+      if (isNotNil11(previouslyFocusedRef.current)) {
+        setTimeout(() => {
+          previouslyFocusedRef.current?.focus();
+        }, 0);
+      }
+    };
+  }, []);
+};
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx195, jsxs as jsxs17 } from "react/jsx-runtime";
+var StyledModalContent = styled31(DialogContent)`
+  background-color: var(--wui-color-bg-app);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  left: 0;
+  overflow: auto;
+  padding: var(--wui-space-05);
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: var(--wui-zindex-modal);
+
+  ${mq.smAndUp} {
+    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+    border-radius: var(--wui-border-radius-03);
+    left: 50%;
+    margin: var(--wui-space-02);
+    height: ${({ $fullHeight }) => $fullHeight ? "min-content" : "auto"};
+    max-height: 90vh;
+    ${({ $fullHeight }) => $fullHeight ? "min-height: calc(100vh - 48px);" : ""}
+    max-width: 90vw;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    min-width: ${({ $width }) => $width ?? "80vw"};
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+var ModalContent = forwardRef13(
+  ({ fullHeight, width, children, ...otherProps }, ref) => {
+    useFocusRestore();
+    return /* @__PURE__ */ jsx195(
+      StyledModalContent,
+      {
+        ref,
+        $fullHeight: fullHeight,
+        $width: width,
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
+ModalContent.displayName = "ModalContent";
+var ModalBody = styled31.div`
+  flex-direction: column;
+  display: flex;
+  order: 2;
+`;
+var Modal = forwardRef13(
+  ({
+    children,
+    fullHeight = false,
+    hideCloseButton = false,
+    hideTitle = false,
+    initialFocusRef,
+    isOpen,
+    onRequestClose,
+    title,
+    width,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx195(
+      DialogRoot,
+      {
+        onOpenChange: (open2) => {
+          if (!open2 && isNotNil12(onRequestClose)) {
+            onRequestClose();
+          }
+        },
+        open: isOpen,
+        children: /* @__PURE__ */ jsxs17(DialogPortal, { children: [
+          /* @__PURE__ */ jsx195(Backdrop, {}),
+          /* @__PURE__ */ jsxs17(
+            ModalContent,
+            {
+              ref,
+              "aria-describedby": void 0,
+              fullHeight,
+              onOpenAutoFocus: (event) => {
+                if (isNotNil12(initialFocusRef) && initialFocusRef.current) {
+                  event.preventDefault();
+                  requestAnimationFrame(() => {
+                    initialFocusRef.current?.focus();
+                  });
+                }
+              },
+              width,
+              ...props,
+              children: [
+                /* @__PURE__ */ jsx195(ModalBody, { children }),
+                /* @__PURE__ */ jsx195(
+                  ModalHeader,
+                  {
+                    hideCloseButton,
+                    hideTitle,
+                    title
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+
 // src/components/Radio/Radio.tsx
-import { forwardRef as forwardRef12, useId as useId3 } from "react";
-import styled28, { css as css18 } from "styled-components";
+import { forwardRef as forwardRef14, useId as useId3 } from "react";
+import styled32, { css as css18 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx192, jsxs as jsxs17 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled28.div`
+import { jsx as jsx196, jsxs as jsxs18 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled32.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled28.input`
+var StyledRadio = styled32.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -7529,7 +7704,7 @@ var defaultHoverStyle = css18`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled28.div`
+var StyledRadioWrapper = styled32.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -7552,7 +7727,7 @@ var StyledRadioWrapper = styled28.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = forwardRef12(
+var Radio = forwardRef14(
   ({
     checked,
     disabled = false,
@@ -7567,13 +7742,13 @@ var Radio = forwardRef12(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx192(
+          /* @__PURE__ */ jsx196(
             StyledRadio,
             {
               ref,
@@ -7588,8 +7763,8 @@ var Radio = forwardRef12(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs17(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx192(
+          /* @__PURE__ */ jsxs18(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ jsx196(
               Label,
               {
                 disabled,
@@ -7598,7 +7773,7 @@ var Radio = forwardRef12(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx192(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx196(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -7607,34 +7782,12 @@ var Radio = forwardRef12(
 );
 Radio.displayName = "Radio";
 
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled29 from "styled-components";
-import { isNotNil as isNotNil10 } from "@wistia/type-guards";
-import { jsx as jsx193 } from "react/jsx-runtime";
-var VisuallyHidden = styled29.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled29.div({
-  "&:not(:focus-within)": visuallyHiddenStyle
-});
-var ScreenReaderOnly = ({
-  text,
-  children,
-  focusable = false,
-  ...otherProps
-}) => {
-  const accessibleText = isNotNil10(text) ? text : children;
-  if (focusable) {
-    return /* @__PURE__ */ jsx193(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
-  }
-  return /* @__PURE__ */ jsx193(VisuallyHidden, { ...otherProps, children: accessibleText });
-};
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
-
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef13 } from "react";
-import styled30 from "styled-components";
-import { isNil as isNil10, isNotNil as isNotNil11, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment2, jsx as jsx194, jsxs as jsxs18 } from "react/jsx-runtime";
-var TagLabel = styled30.a`
+import { forwardRef as forwardRef15 } from "react";
+import styled33 from "styled-components";
+import { isNil as isNil10, isNotNil as isNotNil13, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { Fragment as Fragment2, jsx as jsx197, jsxs as jsxs19 } from "react/jsx-runtime";
+var TagLabel = styled33.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -7662,14 +7815,14 @@ var TagLabel = styled30.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled30.div`
+var TagDivider = styled33.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled30.button`
+var StyledRemoveButton = styled33.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -7697,7 +7850,7 @@ var StyledRemoveButton = styled30.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled30.div`
+var StyledTag = styled33.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7714,39 +7867,39 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs18(Fragment2, { children: [
-    /* @__PURE__ */ jsx194(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(Fragment2, { children: [
+    /* @__PURE__ */ jsx197(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs19(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx194(
+          /* @__PURE__ */ jsx197(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx194(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx197(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef13(
+var Tag = forwardRef15(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil11(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs18(
+    const labelProps = isNotNil13(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ jsxs19(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx194(
+          /* @__PURE__ */ jsx197(
             TagLabel,
             {
               ...labelProps,
@@ -7754,7 +7907,7 @@ var Tag = forwardRef13(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx194(
+          /* @__PURE__ */ jsx197(
             RemoveButton,
             {
               colorScheme,
@@ -7769,27 +7922,138 @@ var Tag = forwardRef13(
 );
 Tag.displayName = "Tag";
 
+// src/components/Tooltip/Tooltip.tsx
+import {
+  Root,
+  Content,
+  Trigger,
+  Portal,
+  Arrow
+} from "@radix-ui/react-tooltip";
+import styled34, { css as css19 } from "styled-components";
+import { jsx as jsx198, jsxs as jsxs20 } from "react/jsx-runtime";
+var CompactTooltipStyles = css19`
+  --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 = styled34(Content)`
+  --tooltip-font-family: var(--wui-typography-family-default);
+  --tooltip-border-radius: var(--wui-border-radius-05);
+  --tooltip-bg: var(--wui-color-bg-tooltip);
+  --tooltip-color: var(--wui-color-text-on-fill);
+  --tooltip-font-size: var(--wui-typography-label-3-size);
+  --tooltip-line-height: var(--wui-typography-label-3-line-height);
+  --tooltip-font-weight: var(--wui-typography-label-3-weight);
+  --tooltip-horizontal-padding: var(--wui-space-03);
+  --tooltip-vertical-padding: var(--wui-space-03);
+
+  ${({ $compact }) => Boolean($compact) && CompactTooltipStyles};
+
+  font-family: var(--tooltip-font-family);
+  font-size: var(--tooltip-font-size);
+  border-radius: var(--tooltip-border-radius);
+  padding: var(--tooltip-horizontal-padding) var(--tooltip-vertical-padding);
+  background-color: var(--tooltip-bg);
+  color: var(--tooltip-color);
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+  max-width: 30em;
+
+  &[data-state='delayed-open'][data-side='top'] {
+    animation-name: slideDownAndFade;
+  }
+
+  &[data-state='delayed-open'][data-side='right'] {
+    animation-name: slideLeftAndFade;
+  }
+
+  &[data-state='delayed-open'][data-side='bottom'] {
+    animation-name: slideUpAndFade;
+  }
+
+  &[data-state='delayed-open'][data-side='left'] {
+    animation-name: slideRightAndFade;
+  }
+`;
+var VISUAL_OFFSET = 6;
+var Tooltip = ({
+  delay = 700,
+  direction = "top",
+  content,
+  children,
+  forceOpen,
+  compact = false,
+  hideArrow = false
+}) => {
+  const rootProps = {};
+  if (content === "" || content === null) {
+    rootProps.open = false;
+  }
+  if (forceOpen === true) {
+    rootProps.open = true;
+  }
+  return /* @__PURE__ */ jsxs20(
+    Root,
+    {
+      delayDuration: delay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ jsx198(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx198(Portal, { children: /* @__PURE__ */ jsxs20(
+          StyledContent,
+          {
+            $compact: compact,
+            side: direction,
+            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
+            children: [
+              content,
+              !hideArrow ? /* @__PURE__ */ jsx198(Arrow, { asChild: true, children: /* @__PURE__ */ jsx198(
+                "svg",
+                {
+                  fill: "var(--tooltip-bg)",
+                  height: "8",
+                  style: { transform: "translateY(-2px)" },
+                  viewBox: "0 0 12 8",
+                  width: "12",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ jsx198("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
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tooltip.displayName = "Tooltip";
+
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled31 from "styled-components";
-import { isNotNil as isNotNil12 } from "@wistia/type-guards";
-import { jsx as jsx195, jsxs as jsxs19 } from "react/jsx-runtime";
+import styled35 from "styled-components";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
+import { jsx as jsx199, jsxs as jsxs21 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx195(
+    return /* @__PURE__ */ jsx199(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx195("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__ */ jsx199("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__ */ jsx195(
+  return /* @__PURE__ */ jsx199(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx195("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__ */ jsx199("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" })
     }
   );
 };
@@ -7797,12 +8061,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx195(
+  return /* @__PURE__ */ jsx199(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx195("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__ */ jsx199("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" })
     }
   );
 };
@@ -7812,7 +8076,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled31.svg`
+var WistiaLogoComponent = styled35.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -7854,7 +8118,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs19(
+  const Logo = /* @__PURE__ */ jsxs21(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -7864,23 +8128,23 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx195("title", { children: title }),
-        isNotNil12(description) ? /* @__PURE__ */ jsx195("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx199("title", { children: title }),
+        isNotNil14(description) ? /* @__PURE__ */ jsx199("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx195("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx199("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef14, cloneElement as cloneElement5 } from "react";
-import styled32, { css as css19 } from "styled-components";
-import { isNil as isNil11, isNotNil as isNotNil13 } from "@wistia/type-guards";
-import { jsx as jsx196, jsxs as jsxs20 } from "react/jsx-runtime";
-var inputStyles = css19`
+import { forwardRef as forwardRef16, cloneElement as cloneElement5 } from "react";
+import styled36, { css as css20 } from "styled-components";
+import { isNil as isNil11, isNotNil as isNotNil15 } from "@wistia/type-guards";
+import { jsx as jsx200, jsxs as jsxs22 } from "react/jsx-runtime";
+var inputStyles = css20`
   --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);
@@ -7921,7 +8185,7 @@ var inputStyles = css19`
     }
   }
 `;
-var StyledInputContainer = styled32.div`
+var StyledInputContainer = styled36.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7965,7 +8229,7 @@ var StyledInputContainer = styled32.div`
     padding-right: 32px;
   }
 `;
-var Input = forwardRef14(
+var Input = forwardRef16(
   ({
     fullWidth = false,
     monospace = false,
@@ -7976,35 +8240,35 @@ var Input = forwardRef14(
   }, ref) => {
     let leftIconToDisplay = leftIcon;
     if (isNil11(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx196(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx200(Icon, { type: "search" });
     }
-    if (isNotNil13(leftIconToDisplay)) {
+    if (isNotNil15(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement5(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil13(rightIconToDisplay)) {
+    if (isNotNil15(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement5(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs22(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx196(
+          type === "multiline" ? /* @__PURE__ */ jsx200(
             "textarea",
             {
               ...props,
               ref
             }
-          ) : /* @__PURE__ */ jsx196(
+          ) : /* @__PURE__ */ jsx200(
             "input",
             {
               ...props,
@@ -8047,6 +8311,7 @@ export {
   MenuItemLabel,
   MenuLabel,
   MenuRadioGroup,
+  Modal,
   Radio,
   RadioGroup,
   RadioMenuItem,