@wistia/ui 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.1
+ * @license @wistia/ui v0.0.3
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -47,6 +47,7 @@ __export(src_exports, {
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  Link: () => Link,
   ScreenReaderOnly: () => ScreenReaderOnly,
   Stack: () => Stack,
   Text: () => Text,
@@ -57,6 +58,7 @@ __export(src_exports, {
   ellipsisFlexParentStyle: () => ellipsisFlexParentStyle,
   ellipsisStyle: () => ellipsisStyle,
   iconSizeMap: () => iconSizeMap,
+  mq: () => mq,
   useActiveMq: () => useActiveMq,
   useAriaLive: () => useAriaLive,
   useMq: () => useMq,
@@ -1071,7 +1073,7 @@ var spacingTokens = import_styled_components6.css`
 var import_styled_components7 = require("styled-components");
 var typographyTokens = import_styled_components7.css`
   --typography-family-default: intervariable, sans-serif;
-  --typography-family-brand: walsheim, sans-serif;
+  --typography-family-brand: 'GT Walsheim', sans-serif;
   --typography-family-mono: 'IBM Plex Mono', monospace;
 
   /* Brand Weights */
@@ -1299,6 +1301,52 @@ var copyToClipboard = async (textToCopy) => {
   });
 };
 
+// src/helpers/mq/mq.ts
+var import_polished = require("polished");
+
+// src/css/breakpoints.ts
+var breakpoints = {
+  xs: "0em",
+  // 0px
+  sm: "37.5em",
+  // 600px
+  md: "56.5625em",
+  // ~904px
+  lg: "77.5em",
+  // 1240px
+  xl: "90em"
+  // 1440px
+};
+
+// src/helpers/mq/mq.ts
+var getMaxWidth = (breakpoint) => {
+  const breakpointBuffer = 25e-4;
+  const [value, unit] = (0, import_polished.getValueAndUnit)(breakpoint);
+  return `@media (max-width: ${Math.max(value - breakpointBuffer, 0)}${unit})`;
+};
+var xsAndUp = () => `@media (min-width: ${breakpoints.xs})`;
+var smAndUp = () => `@media (min-width: ${breakpoints.sm})`;
+var mdAndUp = () => `@media (min-width: ${breakpoints.md})`;
+var lgAndUp = () => `@media (min-width: ${breakpoints.lg})`;
+var xlAndUp = () => `@media (min-width: ${breakpoints.xl})`;
+var xsAndDown = () => getMaxWidth(breakpoints.xs);
+var smAndDown = () => getMaxWidth(breakpoints.sm);
+var mdAndDown = () => getMaxWidth(breakpoints.md);
+var lgAndDown = () => getMaxWidth(breakpoints.lg);
+var xlAndDown = () => getMaxWidth(breakpoints.xl);
+var mq = {
+  xsAndUp,
+  smAndUp,
+  mdAndUp,
+  lgAndUp,
+  xlAndUp,
+  xsAndDown,
+  smAndDown,
+  mdAndDown,
+  lgAndDown,
+  xlAndDown
+};
+
 // src/hooks/useMq/useMq.ts
 var import_type_guards3 = require("@wistia/type-guards");
 
@@ -1329,20 +1377,6 @@ var useWindowSize = (interval = 0) => {
   return dimensions;
 };
 
-// src/css/breakpoints.ts
-var breakpoints = {
-  xs: "0em",
-  // 0px
-  sm: "37.5em",
-  // 600px
-  md: "56.5625em",
-  // ~904px
-  lg: "77.5em",
-  // 1240px
-  xl: "90em"
-  // 1440px
-};
-
 // src/hooks/useMq/useMq.ts
 var REM_SIZE = 16;
 var useMq = () => {
@@ -1717,7 +1751,7 @@ var buttonSizeStyles = {
   hero: buttonHeroStyles
 };
 
-// src/helpers/getColorScheme/getColorScheme.ts
+// src/private/getColorScheme/getColorScheme.ts
 var import_styled_components13 = require("styled-components");
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
@@ -4997,7 +5031,7 @@ var isButton = (props) => (0, import_type_guards8.isUndefined)(props.href);
 var isLink = (props) => (0, import_type_guards8.isNotUndefined)(props.href);
 var StyledLink = import_styled_components14.default.a`
   ${({ href }) => (0, import_type_guards8.isNil)(href) && buttonResetCss};
-  ${({ colorScheme }) => getColorScheme(colorScheme)}
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--typography-family-default);
   color: var(--color-text-link);
@@ -5036,7 +5070,7 @@ var Link = (0, import_react7.forwardRef)(
       }
     };
     const commonProps = {
-      colorScheme,
+      $colorScheme: colorScheme,
       $underline: underline,
       onClick: handleClick
     };
@@ -5055,14 +5089,25 @@ var Link = (0, import_react7.forwardRef)(
     }
     if (isLink(props)) {
       const externalLinkProps = type === "external" ? { target: "_blank", rel: "noopener noreferrer" } : null;
-      return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+      const combinedProps = {
+        ref,
+        ...props,
+        ...commonProps,
+        ...externalLinkProps
+      };
+      return inRouterContext ? /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
         StyledLink,
         {
-          ref,
-          as: inRouterContext ? import_react_router_dom.Link : "a",
-          ...props,
-          ...commonProps,
-          ...externalLinkProps,
+          as: import_react_router_dom.Link,
+          ...combinedProps,
+          to: to ?? "",
+          children
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+        StyledLink,
+        {
+          as: "a",
+          ...combinedProps,
           href: to,
           children
         }
@@ -5206,38 +5251,6 @@ Button.displayName = "Button";
 // src/components/ButtonGroup/ButtonGroup.tsx
 var import_styled_components16 = __toESM(require("styled-components"), 1);
 var import_type_guards10 = require("@wistia/type-guards");
-
-// src/helpers/mq/mq.ts
-var import_polished = require("polished");
-var getMaxWidth = (breakpoint) => {
-  const breakpointBuffer = 25e-4;
-  const [value, unit] = (0, import_polished.getValueAndUnit)(breakpoint);
-  return `@media (max-width: ${Math.max(value - breakpointBuffer, 0)}${unit})`;
-};
-var xsAndUp = () => `@media (min-width: ${breakpoints.xs})`;
-var smAndUp = () => `@media (min-width: ${breakpoints.sm})`;
-var mdAndUp = () => `@media (min-width: ${breakpoints.md})`;
-var lgAndUp = () => `@media (min-width: ${breakpoints.lg})`;
-var xlAndUp = () => `@media (min-width: ${breakpoints.xl})`;
-var xsAndDown = () => getMaxWidth(breakpoints.xs);
-var smAndDown = () => getMaxWidth(breakpoints.sm);
-var mdAndDown = () => getMaxWidth(breakpoints.md);
-var lgAndDown = () => getMaxWidth(breakpoints.lg);
-var xlAndDown = () => getMaxWidth(breakpoints.xl);
-var mq = {
-  xsAndUp,
-  smAndUp,
-  mdAndUp,
-  lgAndUp,
-  xlAndUp,
-  xsAndDown,
-  smAndDown,
-  mdAndDown,
-  lgAndDown,
-  xlAndDown
-};
-
-// src/components/ButtonGroup/ButtonGroup.tsx
 var import_jsx_runtime159 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
@@ -5503,12 +5516,167 @@ var HeadingComponent = (0, import_react9.forwardRef)(
 HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+// src/components/IconButton/IconButton.tsx
+var import_react10 = require("react");
+var import_styled_components21 = __toESM(require("styled-components"), 1);
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react_tooltip2 = require("@radix-ui/react-tooltip");
 var import_styled_components20 = __toESM(require("styled-components"), 1);
-var import_type_guards12 = require("@wistia/type-guards");
 var import_jsx_runtime163 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components20.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components20.default.div({
+var CompactTooltipStyles = import_styled_components20.css`
+  --tooltip-font-size: var(--typography-label-4-size);
+  --tooltip-line-height: var(--typography-label-4-line-height);
+  --tooltip-font-weight: var(--typography-label-4-weight);
+  --tooltip-horizontal-padding: var(--space-02);
+  --tooltip-vertical-padding: var(--space-03);
+`;
+var StyledContent = (0, import_styled_components20.default)(import_react_tooltip2.Content)`
+  --tooltip-font-family: var(--typography-family-default);
+  --tooltip-border-radius: var(--border-radius-05);
+  --tooltip-bg: var(--color-bg-tooltip);
+  --tooltip-color: var(--color-text-on-fill);
+  --tooltip-font-size: var(--typography-label-3-size);
+  --tooltip-line-height: var(--typography-label-3-line-height);
+  --tooltip-font-weight: var(--typography-label-3-weight);
+  --tooltip-horizontal-padding: var(--space-03);
+  --tooltip-vertical-padding: var(--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_runtime163.jsxs)(
+    import_react_tooltip2.Root,
+    {
+      delayDuration: delay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
+          StyledContent,
+          {
+            $compact: compact,
+            side: direction,
+            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
+            children: [
+              content,
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime163.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_runtime163.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_runtime164 = require("react/jsx-runtime");
+var buttonIconSizeMap = {
+  small: "sm",
+  medium: "md",
+  large: "lg",
+  hero: "xl"
+};
+var StyledButton2 = (0, import_styled_components21.default)(Button)`
+  --icon-button-size-small: 24px;
+  --icon-button-size-medium: 32px;
+  --icon-button-size-large: 40px;
+  --icon-button-size-hero: 48px;
+
+  border-radius: 50%;
+  height: ${({ size }) => `var(--icon-button-size-${size})`};
+  width: ${({ size }) => `var(--icon-button-size-${size})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+`;
+var IconButton = (0, import_react10.forwardRef)(
+  ({ children, label, disableTooltip = false, size = "medium", ...props }, ref) => {
+    const responsiveSize = useResponsiveProp(size);
+    const button = /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+      StyledButton2,
+      {
+        ...props,
+        ref,
+        "aria-label": label,
+        "data-wistia-ui-icon-button": true,
+        size: responsiveSize,
+        children: (0, import_react10.cloneElement)(import_react10.Children.only(children), {
+          size: buttonIconSizeMap[responsiveSize]
+        })
+      }
+    );
+    if (disableTooltip) {
+      return button;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(Tooltip, { content: label, children: button });
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+var import_styled_components22 = __toESM(require("styled-components"), 1);
+var import_type_guards12 = require("@wistia/type-guards");
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components22.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components22.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5519,18 +5687,18 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = (0, import_type_guards12.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
-var import_react10 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime164 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_styled_components23 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime166 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components21.default.div`
+var StyledStack = import_styled_components23.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ gap }) => `var(--${gap})`};
@@ -5539,11 +5707,11 @@ var StyledStack = import_styled_components21.default.div`
     flex: 1;
   }
 `;
-var StackComponent = (0, import_react10.forwardRef)(
+var StackComponent = (0, import_react11.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
       StyledStack,
       {
         ref,
@@ -5559,90 +5727,90 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Text/Text.tsx
-var import_react11 = require("react");
-var import_styled_components22 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime165 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components22.css`
+var import_react12 = require("react");
+var import_styled_components24 = __toESM(require("styled-components"), 1);
+var import_jsx_runtime167 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components24.css`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components22.css`
+var labelBoldStyles = import_styled_components24.css`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components22.css`
+var body1TextStyle = import_styled_components24.css`
   --font-family: var(--typography-body-1-family);
   --font-size: var(--typography-body-1-size);
   --font-weight: var(--typography-body-1-weight);
   --line-height: var(--typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components22.css`
+var body2TextStyle = import_styled_components24.css`
   --font-family: var(--typography-body-2-family);
   --font-size: var(--typography-body-2-size);
   --font-weight: var(--typography-body-2-weight);
   --line-height: var(--typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components22.css`
+var body3TextStyle = import_styled_components24.css`
   --font-family: var(--typography-body-3-family);
   --font-size: var(--typography-body-3-size);
   --font-weight: var(--typography-body-3-weight);
   --line-height: var(--typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components22.css`
+var body4TextStyle = import_styled_components24.css`
   --font-family: var(--typography-body-4-family);
   --font-size: var(--typography-body-4-size);
   --font-weight: var(--typography-body-4-weight);
   --line-height: var(--typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components22.css`
+var label1TextStyle = import_styled_components24.css`
   --font-family: var(--typography-label-1-family);
   --font-size: var(--typography-label-1-size);
   --font-weight: var(--typography-label-1-weight);
   --line-height: var(--typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components22.css`
+var label2TextStyle = import_styled_components24.css`
   --font-family: var(--typography-label-2-family);
   --font-size: var(--typography-label-2-size);
   --font-weight: var(--typography-label-2-weight);
   --line-height: var(--typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components22.css`
+var label3TextStyle = import_styled_components24.css`
   --font-family: var(--typography-label-3-family);
   --font-size: var(--typography-label-3-size);
   --font-weight: var(--typography-label-3-weight);
   --line-height: var(--typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components22.css`
+var label4TextStyle = import_styled_components24.css`
   --font-family: var(--typography-label-4-family);
   --font-size: var(--typography-label-4-size);
   --font-weight: var(--typography-label-4-weight);
   --line-height: var(--typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components22.css`
+var body1MonoTextStyle = import_styled_components24.css`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components22.css`
+var body2MonoTextStyle = import_styled_components24.css`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components22.css`
+var body3MonoTextStyle = import_styled_components24.css`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components22.css`
+var body4MonoTextStyle = import_styled_components24.css`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -5660,46 +5828,50 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var primaryProminenceStyle = import_styled_components22.css`
-  --color-text: var(--color-text);
+var highContrastProminenceStyle = import_styled_components24.css`
+  --text-color: var(--color-text-high-contrast);
+`;
+var vibrantProminenceStyle = import_styled_components24.css`
+  --text-color: var(--color-text);
 `;
-var secondaryProminenceStyle = import_styled_components22.css`
-  --color-text: var(--color-text-secondary);
+var secondaryProminenceStyle = import_styled_components24.css`
+  --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
-  primary: primaryProminenceStyle,
+  highContrast: highContrastProminenceStyle,
+  vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = import_styled_components22.default.div`
+var StyledText = import_styled_components24.default.div`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
-  color: var(--color-text);
+  color: var(--text-color);
   font-style: normal;
   margin: 0;
   ${({ variant }) => variantStyleMap2[variant]}
   ${({ prominence }) => prominenceMap[prominence]}
   ${({ ellipsis }) => ellipsis && ellipsisStyle};
-  ${({ inline }) => inline && import_styled_components22.css`
+  ${({ inline }) => inline && import_styled_components24.css`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && import_styled_components22.css`
-      --color-text: var(--color-text-disabled);
+  ${({ disabled }) => disabled && import_styled_components24.css`
+      --text-color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && import_styled_components22.css`
+  ${({ preventUserSelect }) => preventUserSelect && import_styled_components24.css`
       user-select: none;
     `}
-  ${({ align }) => import_styled_components22.css`
+  ${({ align }) => import_styled_components24.css`
     text-align: ${align};
   `}
-  ${({ as }) => as === "p" && import_styled_components22.css`
+  ${({ as }) => as === "p" && import_styled_components24.css`
       display: block;
     `}
 `;
 var DEFAULT_ELEMENT3 = "div";
-var TextComponent = (0, import_react11.forwardRef)(
+var TextComponent = (0, import_react12.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -5707,12 +5879,12 @@ var TextComponent = (0, import_react11.forwardRef)(
     ellipsis = false,
     inline = false,
     preventUserSelect = false,
-    prominence = "primary",
+    prominence = "highContrast",
     variant = "body2",
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
       StyledText,
       {
         ref,
@@ -5734,20 +5906,20 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components23 = __toESM(require("styled-components"), 1);
+var import_styled_components25 = __toESM(require("styled-components"), 1);
 var import_type_guards13 = require("@wistia/type-guards");
-var import_jsx_runtime166 = require("react/jsx-runtime");
+var import_jsx_runtime168 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
 };
 var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
 };
 var computedViewBox = (iconOnly) => {
   if (iconOnly) {
@@ -5755,7 +5927,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components23.default.svg`
+var WistiaLogoComponent = import_styled_components25.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -5797,7 +5969,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
     WistiaLogoComponent,
     {
       height,
@@ -5807,169 +5979,16 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("title", { children: title }),
-        (0, import_type_guards13.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("title", { children: title }),
+        (0, import_type_guards13.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// src/components/Tooltip/Tooltip.tsx
-var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components24 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime167 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components24.css`
-  --tooltip-font-size: var(--typography-label-4-size);
-  --tooltip-line-height: var(--typography-label-4-line-height);
-  --tooltip-font-weight: var(--typography-label-4-weight);
-  --tooltip-horizontal-padding: var(--space-02);
-  --tooltip-vertical-padding: var(--space-03);
-`;
-var StyledContent = (0, import_styled_components24.default)(import_react_tooltip2.Content)`
-  --tooltip-font-family: var(--typography-family-default);
-  --tooltip-border-radius: var(--border-radius-05);
-  --tooltip-bg: var(--color-bg-tooltip);
-  --tooltip-color: var(--color-text-on-fill);
-  --tooltip-font-size: var(--typography-label-3-size);
-  --tooltip-line-height: var(--typography-label-3-line-height);
-  --tooltip-font-weight: var(--typography-label-3-weight);
-  --tooltip-horizontal-padding: var(--space-03);
-  --tooltip-vertical-padding: var(--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_runtime167.jsxs)(
-    import_react_tooltip2.Root,
-    {
-      delayDuration: delay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
-          StyledContent,
-          {
-            $compact: compact,
-            side: direction,
-            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-            children: [
-              content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime167.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_runtime167.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_react12 = require("react");
-var import_styled_components25 = __toESM(require("styled-components"), 1);
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var buttonIconSizeMap = {
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  hero: "xl"
-};
-var StyledButton2 = (0, import_styled_components25.default)(Button)`
-  --icon-button-size-small: 24px;
-  --icon-button-size-medium: 32px;
-  --icon-button-size-large: 40px;
-  --icon-button-size-hero: 48px;
-
-  border-radius: 50%;
-  height: ${({ size }) => `var(--icon-button-size-${size})`};
-  width: ${({ size }) => `var(--icon-button-size-${size})`};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 1;
-`;
-var IconButton = (0, import_react12.forwardRef)(
-  ({ children, label, disableTooltip = false, size = "medium", ...props }, ref) => {
-    const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
-      StyledButton2,
-      {
-        ...props,
-        ref,
-        "aria-label": label,
-        "data-wistia-ui-icon-button": true,
-        size: responsiveSize,
-        children: (0, import_react12.cloneElement)(import_react12.Children.only(children), {
-          size: buttonIconSizeMap[responsiveSize]
-        })
-      }
-    );
-    if (disableTooltip) {
-      return button;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Tooltip, { content: label, children: button });
-  }
-);
-IconButton.displayName = "IconButton";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -5980,6 +5999,7 @@ IconButton.displayName = "IconButton";
   Heading,
   Icon,
   IconButton,
+  Link,
   ScreenReaderOnly,
   Stack,
   Text,
@@ -5990,6 +6010,7 @@ IconButton.displayName = "IconButton";
   ellipsisFlexParentStyle,
   ellipsisStyle,
   iconSizeMap,
+  mq,
   useActiveMq,
   useAriaLive,
   useMq,