@wistia/ui 0.0.24 → 0.1.0

package/dist/index.cjs

@@ -1,8 +1,8 @@
 
 /*
- * @license @wistia/ui v0.0.24
+ * @license @wistia/ui v0.1.0
  *
- * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
+ * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
  * This source code is unlicensed, all rights reserved.
  */
@@ -37,8 +37,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Avatar: () => Avatar,
   Badge: () => Badge,
   Box: () => Box,
@@ -57,6 +57,7 @@ __export(src_exports, {
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Input: () => Input,
   Label: () => Label,
   Link: () => Link,
   Menu: () => Menu,
@@ -89,13 +90,13 @@ __export(src_exports, {
   useToast: () => useToast,
   useWindowSize: () => useWindowSize
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/providers/UIProvider/UIProvider.tsx
 var import_react_tooltip = require("@radix-ui/react-tooltip");
 
 // src/css/GlobalStyle.tsx
-var import_styled_components9 = require("styled-components");
+var import_styled_components10 = require("styled-components");
 
 // src/css/resetCss.tsx
 var import_styled_components = require("styled-components");
@@ -231,7 +232,7 @@ var globalStyleAdjustmentsCss = import_styled_components2.css`
 `;
 
 // src/css/designTokens/index.tsx
-var import_styled_components8 = require("styled-components");
+var import_styled_components9 = require("styled-components");
 
 // src/css/designTokens/colorGlobal.tsx
 var import_styled_components3 = require("styled-components");
@@ -1197,7 +1198,7 @@ var colorAliasTokens = import_styled_components4.css`
   --wui-color-bg-fill-white: #ffffff;
   --wui-color-focus-color: var(--wui-blue-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
-  --wui-color-overlay: var(--wui-gray-alpha-9);
+  --wui-color-backdrop: var(--wui-gray-alpha-9);
   --wui-color-segmented-control-checked-background: var(--wui-bg-app);
   --wui-color-text-on-fill-white-selected: var(--wui-blue-9);
   --wui-color-bg-tooltip: #242528;
@@ -1359,8 +1360,15 @@ var typographyTokens = import_styled_components7.css`
   --wui-typography-label-4-weight: var(--wui-typography-weight-label);
 `;
 
+// src/css/designTokens/zIndex.tsx
+var import_styled_components8 = require("styled-components");
+var zIndexTokens = import_styled_components8.css`
+  --wui-zindex-backdrop: 100;
+  --wui-zindex-menu: 500;
+`;
+
 // src/css/designTokens/index.tsx
-var colorTokens = import_styled_components8.css`
+var colorTokens = import_styled_components9.css`
   ${lightGlobalTokens}
   /* Dark mode is disabled until we have a more robust plan for supporting it */
 
@@ -1369,17 +1377,18 @@ var colorTokens = import_styled_components8.css`
   } */
   ${colorAliasTokens}
 `;
-var designTokens = import_styled_components8.css`
+var designTokens = import_styled_components9.css`
   :root {
     ${colorTokens}
     ${spacingTokens}
     ${borderRadiusTokens}
     ${typographyTokens}
+    ${zIndexTokens}
   }
 `;
 
 // src/css/GlobalStyle.tsx
-var GlobalStyle = import_styled_components9.createGlobalStyle`
+var GlobalStyle = import_styled_components10.createGlobalStyle`
   ${resetCss}
   ${globalStyleAdjustmentsCss}
   ${designTokens}
@@ -1612,14 +1621,14 @@ var import_sonner2 = require("sonner");
 
 // src/private/components/Toast/Toast.tsx
 var import_react4 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_type_guards5 = require("@wistia/type-guards");
 
 // src/components/Ellipsis/Ellipsis.tsx
 var import_type_guards4 = require("@wistia/type-guards");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var ellipsisStyle = import_styled_components10.css`
+var ellipsisStyle = import_styled_components11.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1642,14 +1651,14 @@ var ellipsisStyle = import_styled_components10.css`
     }
   }
 `;
-var ellipsisFlexParentStyle = import_styled_components10.css`
+var ellipsisFlexParentStyle = import_styled_components11.css`
   min-width: 0;
 `;
-var EllipsisComponent = import_styled_components10.default.div`
+var EllipsisComponent = import_styled_components11.default.div`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if ((0, import_type_guards4.isNotNil)($lines)) {
-    return import_styled_components10.css`
+    return import_styled_components11.css`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
         display: -webkit-box;
@@ -1670,7 +1679,7 @@ var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, impor
 Ellipsis.displayName = "Ellipsis";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
-var import_styled_components11 = require("styled-components");
+var import_styled_components12 = require("styled-components");
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
   { token: "bg-surface-hover", step: "3" },
@@ -1697,7 +1706,7 @@ var colorSchemeSchema = [
   { token: "icon-on-fill", step: "contrast" },
   { token: "focus-ring", step: "9" }
 ];
-var defaultScheme = import_styled_components11.css`
+var defaultScheme = import_styled_components12.css`
   --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);
@@ -1723,7 +1732,7 @@ var defaultScheme = import_styled_components11.css`
   --wui-color-icon-on-fill: var(--wui-gray-contrast);
   --wui-color-focus-ring: var(--wui-blue-9);
 `;
-var navScheme = import_styled_components11.css`
+var navScheme = import_styled_components12.css`
   --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);
@@ -1774,7 +1783,7 @@ var getColorScheme = (colorScheme) => {
   if (colorScheme === "default") {
     return defaultScheme;
   }
-  return import_styled_components11.css`
+  return import_styled_components12.css`
     ${colorSchemeSchema.map(({ token, step }) => {
     return `--wui-color-${token}: var(--wui-${colorScheme === "info" ? "blue" : colorScheme}-${step});`;
   }).join("")}
@@ -1783,12 +1792,12 @@ var getColorScheme = (colorScheme) => {
 
 // src/private/components/Toast/Toast.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var Message = (0, import_styled_components12.default)(Ellipsis)`
+var Message = (0, import_styled_components13.default)(Ellipsis)`
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
 `;
-var MessageWrapper = import_styled_components12.default.div`
+var MessageWrapper = import_styled_components13.default.div`
   display: flex;
   flex-grow: 1;
   flex-shrink: 1;
@@ -1801,13 +1810,13 @@ var MessageWrapper = import_styled_components12.default.div`
     margin-right: var(--wui-space-02); /* space between icon & message */
   }
 `;
-var ActionWrapper = import_styled_components12.default.div`
+var ActionWrapper = import_styled_components13.default.div`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
   margin-right: var(--wui-space-03);
 `;
-var StyledToast = import_styled_components12.default.div`
+var StyledToast = import_styled_components13.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   display: flex;
   align-items: center;
@@ -1904,10 +1913,10 @@ var useAriaLive = () => {
 // src/components/Avatar/Avatar.tsx
 var import_react7 = require("react");
 var import_type_guards8 = require("@wistia/type-guards");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var colorSchemeOptions = [
   "inherit",
@@ -1926,7 +1935,7 @@ var colorSchemeOptions = [
   "vendor-marketo",
   "vendor-pardot"
 ];
-var StyledColorSchemeWrapper = import_styled_components13.default.div`
+var StyledColorSchemeWrapper = import_styled_components14.default.div`
   ${({ $colorScheme, $nav }) => getColorScheme($nav ? "nav" : $colorScheme)};
 `;
 var ColorSchemeWrapper = ({
@@ -1961,7 +1970,7 @@ var formatNameForDisplay = (name) => {
 
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var AvatarImage = import_styled_components14.default.img`
+var AvatarImage = import_styled_components15.default.img`
   align-items: center;
   background-color: white;
   border-radius: 50%;
@@ -1988,7 +1997,7 @@ var avatarSizeMap = {
   lg: 32
 };
 var fontSizeScaleMultiplier = 0.55;
-var InitialsContainer = import_styled_components14.default.div`
+var InitialsContainer = import_styled_components15.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-fill);
@@ -2010,7 +2019,7 @@ var InitialsContainer = import_styled_components14.default.div`
     box-shadow: inset 0 0 0 2px rgb(0 0 0 / 50%);
   }
 `;
-var AvatarWrapper = import_styled_components14.default.div`
+var AvatarWrapper = import_styled_components15.default.div`
   max-height: ${({ $maxHeight }) => $maxHeight}px;
 `;
 var chooseColorScheme = (name) => {
@@ -2074,10 +2083,10 @@ Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
 var import_react8 = require("react");
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_styled_components16 = __toESM(require("styled-components"));
 var import_type_guards9 = require("@wistia/type-guards");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var StyledBadge = import_styled_components15.default.div`
+var StyledBadge = import_styled_components16.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -2119,7 +2128,7 @@ Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
 var import_react9 = require("react");
-var import_styled_components16 = __toESM(require("styled-components"));
+var import_styled_components17 = __toESM(require("styled-components"));
 var import_type_guards10 = require("@wistia/type-guards");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
@@ -2163,7 +2172,7 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
-var BoxComponent = import_styled_components16.default.div`
+var BoxComponent = import_styled_components17.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
@@ -2240,12 +2249,12 @@ Box.displayName = "Box";
 
 // src/components/Button/Button.tsx
 var import_react12 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
+var import_styled_components22 = __toESM(require("styled-components"));
 var import_type_guards14 = require("@wistia/type-guards");
 
 // src/css/buttonResetCss.tsx
-var import_styled_components17 = require("styled-components");
-var buttonResetCss = import_styled_components17.css`
+var import_styled_components18 = require("styled-components");
+var buttonResetCss = import_styled_components18.css`
   align-items: center;
   background-color: transparent;
   background-image: none;
@@ -2290,8 +2299,8 @@ var buttonResetCss = import_styled_components17.css`
 `;
 
 // src/components/Button/buttonStyles.tsx
-var import_styled_components18 = require("styled-components");
-var buttonSmallStyles = import_styled_components18.css`
+var import_styled_components19 = require("styled-components");
+var buttonSmallStyles = import_styled_components19.css`
   --button-padding-vertical: var(--wui-space-01);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-01);
@@ -2302,7 +2311,7 @@ var buttonSmallStyles = import_styled_components18.css`
   --button-icon-size: 12px;
   --button-label-gap: 4px;
 `;
-var buttonMediumStyles = import_styled_components18.css`
+var buttonMediumStyles = import_styled_components19.css`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: 6px;
@@ -2313,7 +2322,7 @@ var buttonMediumStyles = import_styled_components18.css`
   --button-icon-size: 16px;
   --button-label-gap: 6px;
 `;
-var buttonLargeStyles = import_styled_components18.css`
+var buttonLargeStyles = import_styled_components19.css`
   --button-padding-vertical: var(--wui-space-02);
   --button-padding-horizontal: var(--wui-space-02);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2324,7 +2333,7 @@ var buttonLargeStyles = import_styled_components18.css`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var buttonExtraLargeStyles = import_styled_components18.css`
+var buttonExtraLargeStyles = import_styled_components19.css`
   --button-padding-vertical: var(--wui-space-03);
   --button-padding-horizontal: var(--wui-space-03);
   --button-label-padding-horizontal: var(--wui-space-02);
@@ -2335,34 +2344,34 @@ var buttonExtraLargeStyles = import_styled_components18.css`
   --button-icon-size: 24px;
   --button-label-gap: 8px;
 `;
-var ghostButtonVariant = import_styled_components18.css`
+var ghostButtonVariant = import_styled_components19.css`
   --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 = import_styled_components18.css`
+var outlineButtonVariant = import_styled_components19.css`
   ${ghostButtonVariant};
   --button-color-border: var(--wui-color-border);
 
   box-shadow: 0 0 0 2px var(--button-color-border) inset;
 `;
-var softButtonVariant = import_styled_components18.css`
+var softButtonVariant = import_styled_components19.css`
   --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 = import_styled_components18.css`
+var solidButtonVariant = import_styled_components19.css`
   --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 = import_styled_components18.css`
+var disabledButtonVariant = import_styled_components19.css`
   --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);
@@ -2370,7 +2379,7 @@ var disabledButtonVariant = import_styled_components18.css`
   --button-color-icon: var(--wui-color-icon-disabled);
   --button-color-border: var(--wui-color-border-disabled);
 `;
-var pressedButtonVariant = import_styled_components18.css`
+var pressedButtonVariant = import_styled_components19.css`
   --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);
@@ -2378,7 +2387,7 @@ var pressedButtonVariant = import_styled_components18.css`
   --button-color-icon: var(--wui-color-icon-selected);
   --button-color-border: var(--wui-color-border-selected);
 `;
-var buttonBaseStyles = import_styled_components18.css`
+var buttonBaseStyles = import_styled_components19.css`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
   font-size: var(--button-typography-size);
@@ -2445,7 +2454,7 @@ var buttonSizeStyles = {
 
 // src/components/Icon/Icon.tsx
 var import_type_guards12 = require("@wistia/type-guards");
-var import_styled_components19 = __toESM(require("styled-components"));
+var import_styled_components20 = __toESM(require("styled-components"));
 
 // src/components/Icon/icons/AbTestIcon.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -5630,7 +5639,7 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
-var StyledIcon = import_styled_components19.default.svg`
+var StyledIcon = import_styled_components20.default.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
 `;
 var Icon = ({
@@ -5681,7 +5690,7 @@ Icon.displayName = "Icon";
 // src/components/Link/Link.tsx
 var import_react11 = require("react");
 var import_type_guards13 = require("@wistia/type-guards");
-var import_styled_components20 = __toESM(require("styled-components"));
+var import_styled_components21 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime165 = require("react/jsx-runtime");
 var generateHref = (href, type, disabled) => {
@@ -5699,7 +5708,7 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => (0, import_type_guards13.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards13.isNotUndefined)(props.href);
-var StyledLink = import_styled_components20.default.a`
+var StyledLink = import_styled_components21.default.a`
   ${({ href }) => (0, import_type_guards13.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
@@ -5791,7 +5800,7 @@ Link.displayName = "Link";
 // src/components/Button/Button.tsx
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var isLink2 = (props) => (0, import_type_guards14.isNotUndefined)(props.href);
-var StyledButton = import_styled_components21.default.button`
+var StyledButton = import_styled_components22.default.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   ${({ $size }) => buttonSizeStyles[$size]}
@@ -5801,7 +5810,7 @@ var StyledButton = import_styled_components21.default.button`
   position: relative;
   text-align: center;
 `;
-var StyledButtonContent = import_styled_components21.default.div`
+var StyledButtonContent = import_styled_components22.default.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
@@ -5813,10 +5822,10 @@ var StyledButtonContent = import_styled_components21.default.div`
   ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
   ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = import_styled_components21.default.span`
+var StyledButtonContentLabel = import_styled_components22.default.span`
   flex: 1;
 `;
-var StyledButtonLoading = import_styled_components21.default.div`
+var StyledButtonLoading = import_styled_components22.default.div`
   position: absolute;
   display: flex;
 `;
@@ -5928,7 +5937,7 @@ var Button = (0, import_react12.forwardRef)(
 Button.displayName = "Button";
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-var import_styled_components22 = __toESM(require("styled-components"));
+var import_styled_components23 = __toESM(require("styled-components"));
 var import_type_guards15 = require("@wistia/type-guards");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var getAlignment = (align) => {
@@ -5943,7 +5952,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = import_styled_components22.default.div`
+var ButtonGroupComponent = import_styled_components23.default.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -5987,15 +5996,15 @@ ButtonGroup.displayName = "ButtonGroup";
 // src/components/Checkbox/Checkbox.tsx
 var import_react14 = require("react");
 var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_styled_components26 = __toESM(require("styled-components"));
+var import_styled_components27 = __toESM(require("styled-components"));
 var import_type_guards17 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
+var import_styled_components25 = __toESM(require("styled-components"));
 
 // src/components/Heading/Heading.tsx
 var import_react13 = require("react");
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_styled_components24 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -6004,43 +6013,43 @@ var makePolymorphic = (component) => {
 
 // src/components/Heading/Heading.tsx
 var import_jsx_runtime168 = require("react/jsx-runtime");
-var heroStyle = import_styled_components23.css`
+var heroStyle = import_styled_components24.css`
   --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 = import_styled_components23.css`
+var heading1TextStyle = import_styled_components24.css`
   --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 = import_styled_components23.css`
+var heading2TextStyle = import_styled_components24.css`
   --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 = import_styled_components23.css`
+var heading3TextStyle = import_styled_components24.css`
   --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 = import_styled_components23.css`
+var heading4TextStyle = import_styled_components24.css`
   --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 = import_styled_components23.css`
+var heading5TextStyle = import_styled_components24.css`
   --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 = import_styled_components23.css`
+var heading6TextStyle = import_styled_components24.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -6056,7 +6065,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components23.default.div`
+var StyledHeading = import_styled_components24.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6065,16 +6074,16 @@ var StyledHeading = import_styled_components23.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components23.css`
+  ${({ $inline }) => $inline && import_styled_components24.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components23.css`
+  ${({ $disabled }) => $disabled && import_styled_components24.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components23.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components24.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components23.css`
+  ${({ $align }) => import_styled_components24.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -6120,7 +6129,7 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Label/Label.tsx
 var import_jsx_runtime169 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components24.css`
+var requiredStyle = import_styled_components25.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -6128,10 +6137,10 @@ var requiredStyle = import_styled_components24.css`
     content: '*';
   }
 `;
-var disabledStyle = import_styled_components24.css`
+var disabledStyle = import_styled_components25.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel = (0, import_styled_components24.default)(Heading).attrs({
+var StyledLabel = (0, import_styled_components25.default)(Heading).attrs({
   variant: "heading6",
   renderAs: "label"
 })`
@@ -6174,10 +6183,10 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-var import_styled_components25 = __toESM(require("styled-components"));
+var import_styled_components26 = __toESM(require("styled-components"));
 var import_type_guards16 = require("@wistia/type-guards");
 var import_jsx_runtime170 = require("react/jsx-runtime");
-var StyledLabelDescription = import_styled_components25.default.div`
+var StyledLabelDescription = import_styled_components26.default.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -6213,7 +6222,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
     )
   }
 );
-var StyledCheckboxWrapper = import_styled_components26.default.div`
+var StyledCheckboxWrapper = import_styled_components27.default.div`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -6227,7 +6236,7 @@ var StyledCheckboxWrapper = import_styled_components26.default.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = (0, import_styled_components26.default)(import_react_checkbox.Root)`
+var StyledCheckboxRoot = (0, import_styled_components27.default)(import_react_checkbox.Root)`
   all: unset; /* CheckboxRoot renders as a button element, so we need to reset all styles */
   background-color: var(--wui-color-bg-fill-white);
   min-width: 16px;
@@ -6261,10 +6270,10 @@ var StyledCheckboxRoot = (0, import_styled_components26.default)(import_react_ch
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = (0, import_styled_components26.default)(import_react_checkbox.Indicator)`
+var StyledCheckboxIndicator = (0, import_styled_components27.default)(import_react_checkbox.Indicator)`
   display: flex;
 `;
-var StyledLabelWrapper = import_styled_components26.default.div`
+var StyledLabelWrapper = import_styled_components27.default.div`
   display: flex;
   flex-direction: column;
   margin-left: var(--wui-space-02);
@@ -6332,13 +6341,13 @@ var Checkbox = (0, import_react14.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
+var import_styled_components28 = __toESM(require("styled-components"));
 var import_jsx_runtime172 = require("react/jsx-runtime");
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = import_styled_components27.default.hr`
+var DividerComponent = import_styled_components28.default.hr`
   background: none;
   border-bottom: none;
   border-left: none;
@@ -6365,15 +6374,15 @@ Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
 var import_react16 = require("react");
-var import_styled_components29 = __toESM(require("styled-components"));
+var import_styled_components30 = __toESM(require("styled-components"));
 var import_type_guards18 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react15 = require("react");
-var import_styled_components28 = __toESM(require("styled-components"));
+var import_styled_components29 = __toESM(require("styled-components"));
 var import_jsx_runtime173 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components28.default.div`
+var StyledStack = import_styled_components29.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -6403,11 +6412,11 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
 var import_jsx_runtime174 = require("react/jsx-runtime");
-var StyledForm = import_styled_components29.default.form`
+var StyledForm = import_styled_components30.default.form`
   --form-default-width: 690px;
 
-  max-width: ${({ fullWidth }) => fullWidth ? "auto" : "var(--form-default-width)"};
-  align-items: ${({ fullWidth }) => fullWidth ? "stretch" : "flex-start"};
+  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
+  align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
 var FormContext = (0, import_react16.createContext)({
   values: {},
@@ -6478,8 +6487,8 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
         gap: "space-05",
         ...props,
         ref,
+        $fullWidth: fullWidth,
         as: StyledForm,
-        fullWidth,
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -6568,94 +6577,94 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react22 = require("react");
-var import_styled_components32 = __toESM(require("styled-components"));
+var import_styled_components33 = __toESM(require("styled-components"));
 var import_type_guards20 = require("@wistia/type-guards");
 
 // src/components/Text/Text.tsx
 var import_react19 = require("react");
-var import_styled_components30 = __toESM(require("styled-components"));
+var import_styled_components31 = __toESM(require("styled-components"));
 var import_jsx_runtime176 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components30.css`
+var bodyBoldStyles = import_styled_components31.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components30.css`
+var labelBoldStyles = import_styled_components31.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components30.css`
+var body1TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var body2TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var body3TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var body4TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var label1TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var label2TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var label3TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var label4TextStyle = import_styled_components31.css`
   --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 = import_styled_components30.css`
+var body1MonoTextStyle = import_styled_components31.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components30.css`
+var body2MonoTextStyle = import_styled_components31.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components30.css`
+var body3MonoTextStyle = import_styled_components31.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components30.css`
+var body4MonoTextStyle = import_styled_components31.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -6673,13 +6682,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = import_styled_components30.css`
+var highContrastProminenceStyle = import_styled_components31.css`
   --text-color: var(--wui-color-text-high-contrast);
 `;
-var vibrantProminenceStyle = import_styled_components30.css`
+var vibrantProminenceStyle = import_styled_components31.css`
   --text-color: var(--wui-color-text);
 `;
-var secondaryProminenceStyle = import_styled_components30.css`
+var secondaryProminenceStyle = import_styled_components31.css`
   --text-color: var(--wui-color-text-secondary);
 `;
 var prominenceMap = {
@@ -6687,7 +6696,7 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = import_styled_components30.default.div`
+var StyledText = import_styled_components31.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6699,19 +6708,19 @@ var StyledText = import_styled_components30.default.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components30.css`
+  ${({ $inline }) => $inline && import_styled_components31.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components30.css`
+  ${({ $disabled }) => $disabled && import_styled_components31.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components31.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components30.css`
+  ${({ $align }) => import_styled_components31.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components30.css`
+  ${({ as }) => as === "p" && import_styled_components31.css`
       display: block;
     `}
 `;
@@ -6754,13 +6763,13 @@ var Text = makePolymorphic(TextComponent);
 var import_react21 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
+var import_styled_components32 = __toESM(require("styled-components"));
 var import_react20 = require("react");
 var import_jsx_runtime177 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components31.default.fieldset`
+var StyledFieldset = import_styled_components32.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components31.default.legend`
+var StyledLegend = import_styled_components32.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
@@ -6809,7 +6818,7 @@ CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime179 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components32.default.div`
+var StyledFormField = import_styled_components33.default.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-error);
 
@@ -6817,7 +6826,7 @@ var StyledFormField = import_styled_components32.default.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = import_styled_components32.default.ul`
+var StyledErrorList = import_styled_components33.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -6931,114 +6940,7 @@ RadioGroup.displayName = "RadioGroup";
 // src/components/IconButton/IconButton.tsx
 var import_react24 = require("react");
 var import_styled_components34 = __toESM(require("styled-components"));
-
-// src/components/Tooltip/Tooltip.tsx
-var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components33 = __toESM(require("styled-components"));
 var import_jsx_runtime181 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components33.css`
-  --tooltip-font-size: var(--wui-typography-label-4-size);
-  --tooltip-line-height: var(--wui-typography-label-4-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-4-weight);
-  --tooltip-horizontal-padding: var(--wui-space-02);
-  --tooltip-vertical-padding: var(--wui-space-03);
-`;
-var StyledContent = (0, import_styled_components33.default)(import_react_tooltip2.Content)`
-  --tooltip-font-family: var(--wui-typography-family-default);
-  --tooltip-border-radius: var(--wui-border-radius-05);
-  --tooltip-bg: var(--wui-color-bg-tooltip);
-  --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__ */ (0, import_jsx_runtime181.jsxs)(
-    import_react_tooltip2.Root,
-    {
-      delayDuration: delay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(
-          StyledContent,
-          {
-            $compact: compact,
-            side: direction,
-            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-            children: [
-              content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
-                "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__ */ (0, import_jsx_runtime181.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
-                }
-              ) }) : null
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-};
-Tooltip.displayName = "Tooltip";
-
-// src/components/IconButton/IconButton.tsx
-var import_jsx_runtime182 = require("react/jsx-runtime");
 var StyledButton2 = (0, import_styled_components34.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
@@ -7054,9 +6956,9 @@ var StyledButton2 = (0, import_styled_components34.default)(Button)`
   line-height: 1;
 `;
 var IconButton = (0, import_react24.forwardRef)(
-  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
+  ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       StyledButton2,
       {
         ...props,
@@ -7069,10 +6971,6 @@ var IconButton = (0, import_react24.forwardRef)(
         })
       }
     );
-    if (disableTooltip) {
-      return button;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
@@ -7081,7 +6979,7 @@ IconButton.displayName = "IconButton";
 var import_styled_components35 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards21 = require("@wistia/type-guards");
-var import_jsx_runtime183 = require("react/jsx-runtime");
+var import_jsx_runtime182 = require("react/jsx-runtime");
 var open = import_styled_components35.keyframes`
   from {
     opacity: 0;
@@ -7110,7 +7008,6 @@ var menuContentCss = import_styled_components35.css`
   --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);
@@ -7123,7 +7020,7 @@ var menuContentCss = import_styled_components35.css`
   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 */
@@ -7155,23 +7052,23 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
       ...(0, import_type_guards21.isNotNil)(onOpenChange) && (0, import_type_guards21.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {},
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards21.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards21.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
           MenuContent,
           {
             ...props,
@@ -7192,17 +7089,17 @@ Menu.displayName = "Menu";
 // src/components/Menu/MenuLabel.tsx
 var import_styled_components36 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime184 = require("react/jsx-runtime");
+var import_jsx_runtime183 = require("react/jsx-runtime");
 var StyledMenuLabel = (0, import_styled_components36.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
         Text,
         {
           variant: "label3",
@@ -7224,7 +7121,7 @@ var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_react25 = require("react");
 var import_styled_components37 = __toESM(require("styled-components"));
 var import_type_guards22 = require("@wistia/type-guards");
-var import_jsx_runtime185 = require("react/jsx-runtime");
+var import_jsx_runtime184 = require("react/jsx-runtime");
 var StyledButton3 = (0, import_styled_components37.default)(Button)`
   --menu-item-border-radius: var(--wui-border-radius-01);
   --menu-item-gap: var(--wui-space-01);
@@ -7270,9 +7167,9 @@ var MenuItemButton = (0, import_react25.forwardRef)(({ children, appearance, com
       console.warn("colorScheme prop is ignored when appearance is gated");
     }
     colorScheme = "purple";
-    badge = /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { type: "sparkle" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
     StyledButton3,
     {
       ...props,
@@ -7281,9 +7178,9 @@ var MenuItemButton = (0, import_react25.forwardRef)(({ children, appearance, com
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
       variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(StyledMenuContent, { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(StyledMenuContent, { children: [
         children,
-        (0, import_type_guards22.isNotNil)(badge) || (0, import_type_guards22.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null
+        (0, import_type_guards22.isNotNil)(badge) || (0, import_type_guards22.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null
       ] })
     }
   );
@@ -7292,7 +7189,7 @@ MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
 var import_styled_components38 = __toESM(require("styled-components"));
-var import_jsx_runtime186 = require("react/jsx-runtime");
+var import_jsx_runtime185 = require("react/jsx-runtime");
 var StyledMenuItemLabel = (0, import_styled_components38.default)(Text).attrs({ variant: "label3" })`
   grid-area: label;
 `;
@@ -7304,14 +7201,14 @@ var StyledMenuItemDescription = (0, import_styled_components38.default)(Text).at
   grid-area: description;
 `;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-var import_jsx_runtime187 = require("react/jsx-runtime");
+var import_jsx_runtime186 = require("react/jsx-runtime");
 var SubMenuContent = (0, import_styled_components39.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
@@ -7334,11 +7231,11 @@ var StyledSubTrigger = (0, import_styled_components39.default)(import_react_drop
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -7351,14 +7248,14 @@ var SubMenu = ({
 }) => {
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = (0, import_react26.useState)(false);
-  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(MenuItemLabel, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(MenuItemDescription, { children: description })
+  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(MenuItemLabel, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(MenuItemDescription, { children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
       SubMenuTrigger,
       {
         ...props,
@@ -7367,12 +7264,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(MenuItemDescription, { children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -7380,15 +7277,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 var import_react27 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime188 = require("react/jsx-runtime");
+var import_jsx_runtime187 = require("react/jsx-runtime");
 var MenuItem = (0, import_react27.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
           MenuItemButton,
           {
             ...props,
@@ -7404,10 +7301,10 @@ MenuItem.displayName = "MenuItem";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime189 = require("react/jsx-runtime");
+var import_jsx_runtime188 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -7415,11 +7312,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime190 = require("react/jsx-runtime");
+var import_jsx_runtime189 = require("react/jsx-runtime");
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
     Icon,
     {
       size: "sm",
@@ -7429,16 +7326,16 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
       value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -7448,9 +7345,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime191 = require("react/jsx-runtime");
+var import_jsx_runtime190 = require("react/jsx-runtime");
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
     "svg",
     {
       ...props,
@@ -7460,21 +7357,21 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "16",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           "path",
           {
             d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
             fill: "#2949E5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           "path",
           {
             d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
             stroke: "#D9D9DE"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           "path",
           {
             d: "M6.47275 11.1931L3.3775 8.08009C3.19155 7.89306 3.19155 7.58982 3.3775 7.40278L4.05092 6.72547C4.23688 6.53842 4.53841 6.53842 4.72436 6.72547L6.80947 8.82254L11.2755 4.33082C11.4615 4.1438 11.763 4.1438 11.949 4.33082L12.6224 5.00813C12.8083 5.19516 12.8083 5.4984 12.6224 5.68544L7.14618 11.1931C6.96021 11.3802 6.6587 11.3802 6.47275 11.1931Z",
@@ -7483,7 +7380,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
     "svg",
     {
       ...props,
@@ -7493,14 +7390,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "16",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           "path",
           {
             d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
             fill: "#FCFCFD"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           "path",
           {
             d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
@@ -7517,17 +7414,17 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -7539,7 +7436,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 var import_react28 = require("react");
 var import_styled_components40 = __toESM(require("styled-components"));
 var import_type_guards23 = require("@wistia/type-guards");
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime191 = require("react/jsx-runtime");
 var StyledLabelWrapper2 = import_styled_components40.default.div`
   display: flex;
   flex-direction: column;
@@ -7625,13 +7522,13 @@ var Radio = (0, import_react28.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react28.useId)();
     const computedId = (0, import_type_guards23.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
             StyledRadio,
             {
               ref,
@@ -7646,8 +7543,8 @@ var Radio = (0, import_react28.forwardRef)(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
               Label,
               {
                 disabled,
@@ -7656,7 +7553,7 @@ var Radio = (0, import_react28.forwardRef)(
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(LabelDescription, { children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -7668,7 +7565,7 @@ Radio.displayName = "Radio";
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 var import_styled_components41 = __toESM(require("styled-components"));
 var import_type_guards24 = require("@wistia/type-guards");
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_jsx_runtime192 = require("react/jsx-runtime");
 var VisuallyHidden = import_styled_components41.default.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = import_styled_components41.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
@@ -7681,9 +7578,9 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = (0, import_type_guards24.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
@@ -7691,7 +7588,7 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 var import_react29 = require("react");
 var import_styled_components42 = __toESM(require("styled-components"));
 var import_type_guards25 = require("@wistia/type-guards");
-var import_jsx_runtime194 = require("react/jsx-runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var TagLabel = import_styled_components42.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -7772,23 +7669,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(import_jsx_runtime194.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -7797,14 +7694,14 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 var Tag = (0, import_react29.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = (0, import_type_guards25.isNotNil)(href) && (0, import_type_guards25.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
             TagLabel,
             {
               ...labelProps,
@@ -7812,7 +7709,7 @@ var Tag = (0, import_react29.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -7827,8 +7724,113 @@ var Tag = (0, import_react29.forwardRef)(
 );
 Tag.displayName = "Tag";
 
-// src/components/WistiaLogo/WistiaLogo.tsx
+// src/components/Tooltip/Tooltip.tsx
+var import_react_tooltip2 = require("@radix-ui/react-tooltip");
 var import_styled_components43 = __toESM(require("styled-components"));
+var import_jsx_runtime194 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components43.css`
+  --tooltip-font-size: var(--wui-typography-label-4-size);
+  --tooltip-line-height: var(--wui-typography-label-4-line-height);
+  --tooltip-font-weight: var(--wui-typography-label-4-weight);
+  --tooltip-horizontal-padding: var(--wui-space-02);
+  --tooltip-vertical-padding: var(--wui-space-03);
+`;
+var StyledContent = (0, import_styled_components43.default)(import_react_tooltip2.Content)`
+  --tooltip-font-family: var(--wui-typography-family-default);
+  --tooltip-border-radius: var(--wui-border-radius-05);
+  --tooltip-bg: var(--wui-color-bg-tooltip);
+  --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__ */ (0, import_jsx_runtime194.jsxs)(
+    import_react_tooltip2.Root,
+    {
+      delayDuration: delay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(
+          StyledContent,
+          {
+            $compact: compact,
+            side: direction,
+            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
+            children: [
+              content,
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+                "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__ */ (0, import_jsx_runtime194.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                }
+              ) }) : null
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/WistiaLogo/WistiaLogo.tsx
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -7870,7 +7872,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components43.default.svg`
+var WistiaLogoComponent = import_styled_components44.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -7932,6 +7934,151 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Input/Input.tsx
+var import_react30 = require("react");
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_type_guards27 = require("@wistia/type-guards");
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var inputStyles = import_styled_components45.css`
+  --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);
+  --wui-input-color-border-focus: var(--wui-color-border-active);
+  --wui-input-color-border-error: var(--wui-color-border-error);
+  --wui-input-color-border-disabled: var(--wui-color-border-disabled);
+  --wui-input-border-radius: var(--wui-border-radius-rounded);
+  --wui-input-multiline-border-radius: var(--wui-border-radius-02);
+  --wui-input-vertical-padding: var(--wui-space-02);
+  --wui-input-horizontal-padding: var(--wui-space-03);
+  --wui-input-placeholder: var(--wui-gray-10);
+  --wui-input-color-text-error: var(--wui-color-text-error);
+
+  input,
+  textarea {
+    padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
+    background-color: var(--wui-input-color-bg);
+    border: 1px solid var(--wui-input-color-border);
+    border-radius: var(--wui-input-border-radius);
+
+    &::placeholder {
+      color: var(--wui-input-placeholder);
+      opacity: 1; /* Firefox */
+    }
+
+    &:focus {
+      border-color: var(--wui-input-color-border-focus);
+    }
+
+    &[aria-invalid='true'] {
+      border-color: var(--wui-input-color-border-error);
+      color: var(--wui-input-color-text-error);
+    }
+
+    &:disabled {
+      border-color: var(--wui-color-bg-surface-disabled);
+      background-color: var(--wui-color-bg-surface-disabled);
+    }
+  }
+`;
+var StyledInputContainer = import_styled_components45.default.div`
+  display: inline-flex;
+  position: relative;
+  ${inputStyles};
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+
+  input,
+  textarea {
+    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+    ${({ $monospace }) => $monospace && "font-family: var(--wui-typography-family-mono);"}
+  }
+
+  textarea {
+    border-radius: var(--wui-input-multiline-border-radius);
+  }
+
+  .wui-input-left-icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: var(--wui-input-horizontal-padding);
+    transform: translateY(-50%);
+  }
+
+  :has(.wui-input-left-icon) input,
+  :has(.wui-input-left-icon) textarea {
+    padding-left: 32px;
+  }
+
+  .wui-input-right-icon {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    right: var(--wui-input-horizontal-padding);
+    transform: translateY(-50%);
+  }
+
+  :has(.wui-input-right-icon) input,
+  :has(.wui-input-right-icon) textarea {
+    padding-right: 32px;
+  }
+`;
+var Input = (0, import_react30.forwardRef)(
+  ({
+    fullWidth = false,
+    monospace = false,
+    type = "text",
+    leftIcon,
+    rightIcon,
+    ...props
+  }, ref) => {
+    let leftIconToDisplay = leftIcon;
+    if ((0, import_type_guards27.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { type: "search" });
+    }
+    if ((0, import_type_guards27.isNotNil)(leftIconToDisplay)) {
+      leftIconToDisplay = (0, import_react30.cloneElement)(leftIconToDisplay, {
+        size: "md",
+        className: "wui-input-left-icon"
+      });
+    }
+    let rightIconToDisplay = rightIcon;
+    if ((0, import_type_guards27.isNotNil)(rightIconToDisplay)) {
+      rightIconToDisplay = (0, import_react30.cloneElement)(rightIconToDisplay, {
+        size: "md",
+        className: "wui-input-right-icon"
+      });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(
+      StyledInputContainer,
+      {
+        $fullWidth: fullWidth,
+        $monospace: monospace,
+        children: [
+          leftIconToDisplay ?? null,
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            "textarea",
+            {
+              ...props,
+              ref
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            "input",
+            {
+              ...props,
+              ref,
+              type
+            }
+          ),
+          rightIconToDisplay ?? null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -7952,6 +8099,7 @@ WistiaLogo.displayName = "WistiaLogo";
   Heading,
   Icon,
   IconButton,
+  Input,
   Label,
   Link,
   Menu,