@wistia/ui 0.0.25 → 0.1.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.25
+ * @license @wistia/ui v0.1.0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -148,7 +148,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 +1276,15 @@ 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-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 +1293,13 @@ var colorTokens = css8`
   } */
   ${colorAliasTokens}
 `;
-var designTokens = css8`
+var designTokens = css9`
   :root {
     ${colorTokens}
     ${spacingTokens}
     ${borderRadiusTokens}
     ${typographyTokens}
+    ${zIndexTokens}
   }
 `;
 
@@ -1534,9 +1542,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 +1567,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 +1595,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 +1622,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 +1648,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 +1699,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 +2169,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 +2215,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 +2227,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 +2238,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 +2249,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 +2260,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 +2295,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 +2303,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 +5916,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 +5929,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 +5990,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 +6045,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 +6053,7 @@ var requiredStyle = css14`
     content: '*';
   }
 `;
-var disabledStyle = css14`
+var disabledStyle = css15`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel = styled12(Heading).attrs({
@@ -6490,89 +6498,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 +6598,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 +6624,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 +6855,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 +6872,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 +6887,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 +6900,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 +6929,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 +6941,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 +6959,7 @@ var menuContentCss = css17`
     margin: var(--wui-space-02) 0;
   }
 `;
-var MenuContent = styled23(DropdownMenuContent)`
+var MenuContent = styled22(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -7083,23 +6973,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 +7008,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 +7035,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 +7047,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 +7067,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 +7076,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 +7095,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 +7106,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 +7116,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 +7129,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 +7145,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 +7159,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 +7176,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 +7192,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 +7205,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 +7231,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 +7245,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 +7259,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 +7280,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 +7292,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 +7315,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs16(
+  ) : /* @__PURE__ */ jsxs15(
     "svg",
     {
       ...props,
@@ -7435,14 +7325,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 +7349,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 })
         }
       )
     }
@@ -7479,15 +7369,15 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef12, useId as useId3 } from "react";
-import styled28, { css as css18 } from "styled-components";
+import styled27, { 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 jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled27.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled28.input`
+var StyledRadio = styled27.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 +7419,7 @@ var defaultHoverStyle = css18`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled28.div`
+var StyledRadioWrapper = styled27.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -7567,13 +7457,13 @@ var Radio = forwardRef12(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs16(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx192(
+          /* @__PURE__ */ jsx191(
             StyledRadio,
             {
               ref,
@@ -7588,8 +7478,8 @@ var Radio = forwardRef12(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs17(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx192(
+          /* @__PURE__ */ jsxs16(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ jsx191(
               Label,
               {
                 disabled,
@@ -7598,7 +7488,7 @@ var Radio = forwardRef12(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx192(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx191(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -7608,11 +7498,11 @@ var Radio = forwardRef12(
 Radio.displayName = "Radio";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled29 from "styled-components";
+import styled28 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({
+import { jsx as jsx192 } from "react/jsx-runtime";
+var VisuallyHidden = styled28.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled28.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7623,18 +7513,18 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil10(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx193(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx192(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx193(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx192(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef13 } from "react";
-import styled30 from "styled-components";
+import styled29 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 { Fragment as Fragment2, jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
+var TagLabel = styled29.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -7662,14 +7552,14 @@ var TagLabel = styled30.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled30.div`
+var TagDivider = styled29.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled30.button`
+var StyledRemoveButton = styled29.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -7697,7 +7587,7 @@ var StyledRemoveButton = styled30.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled30.div`
+var StyledTag = styled29.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7714,23 +7604,23 @@ 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__ */ jsxs17(Fragment2, { children: [
+    /* @__PURE__ */ jsx193(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs17(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx194(
+          /* @__PURE__ */ jsx193(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx194(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx193(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -7739,14 +7629,14 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 var Tag = forwardRef13(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = isNotNil11(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs17(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx194(
+          /* @__PURE__ */ jsx193(
             TagLabel,
             {
               ...labelProps,
@@ -7754,7 +7644,7 @@ var Tag = forwardRef13(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx194(
+          /* @__PURE__ */ jsx193(
             RemoveButton,
             {
               colorScheme,
@@ -7769,6 +7659,117 @@ var Tag = forwardRef13(
 );
 Tag.displayName = "Tag";
 
+// src/components/Tooltip/Tooltip.tsx
+import {
+  Root,
+  Content,
+  Trigger,
+  Portal,
+  Arrow
+} from "@radix-ui/react-tooltip";
+import styled30, { css as css19 } from "styled-components";
+import { jsx as jsx194, jsxs as jsxs18 } 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 = styled30(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__ */ jsxs18(
+    Root,
+    {
+      delayDuration: delay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ jsx194(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx194(Portal, { children: /* @__PURE__ */ jsxs18(
+          StyledContent,
+          {
+            $compact: compact,
+            side: direction,
+            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
+            children: [
+              content,
+              !hideArrow ? /* @__PURE__ */ jsx194(Arrow, { asChild: true, children: /* @__PURE__ */ jsx194(
+                "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__ */ jsx194("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";
@@ -7877,10 +7878,10 @@ 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 styled32, { css as css20 } 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`
+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);