@wistia/ui 0.0.1 → 0.0.3

package/dist/index.mjs

@@ -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.
  *
@@ -1015,7 +1015,7 @@ var spacingTokens = css6`
 import { css as css7 } from "styled-components";
 var typographyTokens = css7`
   --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 */
@@ -1243,6 +1243,52 @@ var copyToClipboard = async (textToCopy) => {
   });
 };
 
+// src/helpers/mq/mq.ts
+import { getValueAndUnit } from "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] = 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
 import { isBoolean } from "@wistia/type-guards";
 
@@ -1273,20 +1319,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 = () => {
@@ -1661,7 +1693,7 @@ var buttonSizeStyles = {
   hero: buttonHeroStyles
 };
 
-// src/helpers/getColorScheme/getColorScheme.ts
+// src/private/getColorScheme/getColorScheme.ts
 import { css as css11 } from "styled-components";
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
@@ -4941,7 +4973,7 @@ var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined2(props.href);
 var StyledLink = styled2.a`
   ${({ href }) => isNil5(href) && buttonResetCss};
-  ${({ colorScheme }) => getColorScheme(colorScheme)}
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--typography-family-default);
   color: var(--color-text-link);
@@ -4980,7 +5012,7 @@ var Link = forwardRef(
       }
     };
     const commonProps = {
-      colorScheme,
+      $colorScheme: colorScheme,
       $underline: underline,
       onClick: handleClick
     };
@@ -4999,14 +5031,25 @@ var Link = forwardRef(
     }
     if (isLink(props)) {
       const externalLinkProps = type === "external" ? { target: "_blank", rel: "noopener noreferrer" } : null;
-      return /* @__PURE__ */ jsx157(
+      const combinedProps = {
+        ref,
+        ...props,
+        ...commonProps,
+        ...externalLinkProps
+      };
+      return inRouterContext ? /* @__PURE__ */ jsx157(
         StyledLink,
         {
-          ref,
-          as: inRouterContext ? RouterLink : "a",
-          ...props,
-          ...commonProps,
-          ...externalLinkProps,
+          as: RouterLink,
+          ...combinedProps,
+          to: to ?? "",
+          children
+        }
+      ) : /* @__PURE__ */ jsx157(
+        StyledLink,
+        {
+          as: "a",
+          ...combinedProps,
           href: to,
           children
         }
@@ -5150,38 +5193,6 @@ Button.displayName = "Button";
 // src/components/ButtonGroup/ButtonGroup.tsx
 import styled4 from "styled-components";
 import { isNil as isNil6 } from "@wistia/type-guards";
-
-// src/helpers/mq/mq.ts
-import { getValueAndUnit } from "polished";
-var getMaxWidth = (breakpoint) => {
-  const breakpointBuffer = 25e-4;
-  const [value, unit] = 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
 import { jsx as jsx159 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
@@ -5447,12 +5458,173 @@ var HeadingComponent = forwardRef3(
 HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
+// src/components/IconButton/IconButton.tsx
+import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef4 } from "react";
+import styled9 from "styled-components";
+
+// src/components/Tooltip/Tooltip.tsx
+import {
+  Root,
+  Content,
+  Trigger,
+  Portal,
+  Arrow
+} from "@radix-ui/react-tooltip";
+import styled8, { css as css14 } from "styled-components";
+import { jsx as jsx163, jsxs as jsxs4 } from "react/jsx-runtime";
+var CompactTooltipStyles = css14`
+  --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 = styled8(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__ */ jsxs4(
+    Root,
+    {
+      delayDuration: delay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ jsx163(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx163(Portal, { children: /* @__PURE__ */ jsxs4(
+          StyledContent,
+          {
+            $compact: compact,
+            side: direction,
+            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
+            children: [
+              content,
+              !hideArrow ? /* @__PURE__ */ jsx163(Arrow, { asChild: true, children: /* @__PURE__ */ jsx163(
+                "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__ */ jsx163("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                }
+              ) }) : null
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/IconButton/IconButton.tsx
+import { jsx as jsx164 } from "react/jsx-runtime";
+var buttonIconSizeMap = {
+  small: "sm",
+  medium: "md",
+  large: "lg",
+  hero: "xl"
+};
+var StyledButton2 = styled9(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 = forwardRef4(
+  ({ children, label, disableTooltip = false, size = "medium", ...props }, ref) => {
+    const responsiveSize = useResponsiveProp(size);
+    const button = /* @__PURE__ */ jsx164(
+      StyledButton2,
+      {
+        ...props,
+        ref,
+        "aria-label": label,
+        "data-wistia-ui-icon-button": true,
+        size: responsiveSize,
+        children: cloneElement2(Children2.only(children), {
+          size: buttonIconSizeMap[responsiveSize]
+        })
+      }
+    );
+    if (disableTooltip) {
+      return button;
+    }
+    return /* @__PURE__ */ jsx164(Tooltip, { content: label, children: button });
+  }
+);
+IconButton.displayName = "IconButton";
+
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled8 from "styled-components";
+import styled10 from "styled-components";
 import { isNotNil as isNotNil6 } from "@wistia/type-guards";
-import { jsx as jsx163 } from "react/jsx-runtime";
-var VisuallyHidden = styled8.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled8.div({
+import { jsx as jsx165 } from "react/jsx-runtime";
+var VisuallyHidden = styled10.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled10.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5463,18 +5635,18 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil6(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx163(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx165(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx163(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx165(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef4 } from "react";
-import styled9 from "styled-components";
-import { jsx as jsx164 } from "react/jsx-runtime";
+import { forwardRef as forwardRef5 } from "react";
+import styled11 from "styled-components";
+import { jsx as jsx166 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled9.div`
+var StyledStack = styled11.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ gap }) => `var(--${gap})`};
@@ -5483,11 +5655,11 @@ var StyledStack = styled9.div`
     flex: 1;
   }
 `;
-var StackComponent = forwardRef4(
+var StackComponent = forwardRef5(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx164(
+    return /* @__PURE__ */ jsx166(
       StyledStack,
       {
         ref,
@@ -5503,90 +5675,90 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Text/Text.tsx
-import { forwardRef as forwardRef5 } from "react";
-import styled10, { css as css14 } from "styled-components";
-import { jsx as jsx165 } from "react/jsx-runtime";
-var bodyBoldStyles = css14`
+import { forwardRef as forwardRef6 } from "react";
+import styled12, { css as css15 } from "styled-components";
+import { jsx as jsx167 } from "react/jsx-runtime";
+var bodyBoldStyles = css15`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css14`
+var labelBoldStyles = css15`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css14`
+var body1TextStyle = css15`
   --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 = css14`
+var body2TextStyle = css15`
   --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 = css14`
+var body3TextStyle = css15`
   --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 = css14`
+var body4TextStyle = css15`
   --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 = css14`
+var label1TextStyle = css15`
   --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 = css14`
+var label2TextStyle = css15`
   --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 = css14`
+var label3TextStyle = css15`
   --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 = css14`
+var label4TextStyle = css15`
   --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 = css14`
+var body1MonoTextStyle = css15`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = css14`
+var body2MonoTextStyle = css15`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = css14`
+var body3MonoTextStyle = css15`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = css14`
+var body4MonoTextStyle = css15`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -5604,46 +5776,50 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var primaryProminenceStyle = css14`
-  --color-text: var(--color-text);
+var highContrastProminenceStyle = css15`
+  --text-color: var(--color-text-high-contrast);
 `;
-var secondaryProminenceStyle = css14`
-  --color-text: var(--color-text-secondary);
+var vibrantProminenceStyle = css15`
+  --text-color: var(--color-text);
+`;
+var secondaryProminenceStyle = css15`
+  --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
-  primary: primaryProminenceStyle,
+  highContrast: highContrastProminenceStyle,
+  vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = styled10.div`
+var StyledText = styled12.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 && css14`
+  ${({ inline }) => inline && css15`
       display: inline-block;
     `}
-  ${({ disabled }) => disabled && css14`
-      --color-text: var(--color-text-disabled);
+  ${({ disabled }) => disabled && css15`
+      --text-color: var(--color-text-disabled);
     `}
-  ${({ preventUserSelect }) => preventUserSelect && css14`
+  ${({ preventUserSelect }) => preventUserSelect && css15`
       user-select: none;
     `}
-  ${({ align }) => css14`
+  ${({ align }) => css15`
     text-align: ${align};
   `}
-  ${({ as }) => as === "p" && css14`
+  ${({ as }) => as === "p" && css15`
       display: block;
     `}
 `;
 var DEFAULT_ELEMENT3 = "div";
-var TextComponent = forwardRef5(
+var TextComponent = forwardRef6(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -5651,12 +5827,12 @@ var TextComponent = forwardRef5(
     ellipsis = false,
     inline = false,
     preventUserSelect = false,
-    prominence = "primary",
+    prominence = "highContrast",
     variant = "body2",
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx165(
+    return /* @__PURE__ */ jsx167(
       StyledText,
       {
         ref,
@@ -5678,20 +5854,20 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled11 from "styled-components";
+import styled13 from "styled-components";
 import { isNotNil as isNotNil7 } from "@wistia/type-guards";
-import { jsx as jsx166, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx168, jsxs as jsxs5 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx166("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx166("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__ */ jsx168("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx168("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__ */ jsx166("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx166("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__ */ jsx168("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx168("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__ */ jsx166("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx166("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__ */ jsx168("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx168("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) {
@@ -5699,7 +5875,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled11.svg`
+var WistiaLogoComponent = styled13.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -5741,7 +5917,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs4(
+  const Logo = /* @__PURE__ */ jsxs5(
     WistiaLogoComponent,
     {
       height,
@@ -5751,175 +5927,16 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx166("title", { children: title }),
-        isNotNil7(description) ? /* @__PURE__ */ jsx166("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx168("title", { children: title }),
+        isNotNil7(description) ? /* @__PURE__ */ jsx168("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx166("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx168("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// src/components/Tooltip/Tooltip.tsx
-import {
-  Root,
-  Content,
-  Trigger,
-  Portal,
-  Arrow
-} from "@radix-ui/react-tooltip";
-import styled12, { css as css15 } from "styled-components";
-import { jsx as jsx167, jsxs as jsxs5 } from "react/jsx-runtime";
-var CompactTooltipStyles = css15`
-  --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 = styled12(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__ */ jsxs5(
-    Root,
-    {
-      delayDuration: delay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsx167(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx167(Portal, { children: /* @__PURE__ */ jsxs5(
-          StyledContent,
-          {
-            $compact: compact,
-            side: direction,
-            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-            children: [
-              content,
-              !hideArrow ? /* @__PURE__ */ jsx167(Arrow, { asChild: true, children: /* @__PURE__ */ jsx167(
-                "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__ */ jsx167("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
-                }
-              ) }) : null
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-};
-Tooltip.displayName = "Tooltip";
-
-// src/components/IconButton/IconButton.tsx
-import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef6 } from "react";
-import styled13 from "styled-components";
-import { jsx as jsx168 } from "react/jsx-runtime";
-var buttonIconSizeMap = {
-  small: "sm",
-  medium: "md",
-  large: "lg",
-  hero: "xl"
-};
-var StyledButton2 = styled13(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 = forwardRef6(
-  ({ children, label, disableTooltip = false, size = "medium", ...props }, ref) => {
-    const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ jsx168(
-      StyledButton2,
-      {
-        ...props,
-        ref,
-        "aria-label": label,
-        "data-wistia-ui-icon-button": true,
-        size: responsiveSize,
-        children: cloneElement2(Children2.only(children), {
-          size: buttonIconSizeMap[responsiveSize]
-        })
-      }
-    );
-    if (disableTooltip) {
-      return button;
-    }
-    return /* @__PURE__ */ jsx168(Tooltip, { content: label, children: button });
-  }
-);
-IconButton.displayName = "IconButton";
 export {
   Box,
   Button,
@@ -5929,6 +5946,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Link,
   ScreenReaderOnly,
   Stack,
   Text,
@@ -5939,6 +5957,7 @@ export {
   ellipsisFlexParentStyle,
   ellipsisStyle,
   iconSizeMap,
+  mq,
   useActiveMq,
   useAriaLive,
   useMq,