@wistia/ui 0.0.6 → 0.0.8

package/dist/{index.d.cts → index.d.mts}

@@ -155,6 +155,9 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
      */
     wrapItems?: boolean;
 };
+/**
+ * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
+ */
 declare const Box: {
     ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
     displayName: string;
@@ -328,6 +331,10 @@ type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
      */
     fullWidth?: boolean;
 };
+/**
+ * ButtonGroup is a layout component that groups buttons together,
+ * with a standardized gap between them.
+ */
 declare const ButtonGroup: {
     ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
     displayName: string;
@@ -341,6 +348,9 @@ type DividerProps = ComponentPropsWithoutRef<'hr'> & {
      */
     size?: ResponsiveObject<'lg' | 'sm'> | 'lg' | 'sm';
 };
+/**
+ * A line used to visually separate content
+ */
 declare const Divider: {
     ({ size, ...otherProps }: DividerProps): JSX.Element;
     displayName: string;
@@ -358,6 +368,9 @@ type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
      */
     lines?: number;
 };
+/**
+ * Truncate text with an ellispsis visble at the end
+ */
 declare const Ellipsis: {
     ({ children, lines, ...otherProps }: EllipsisProps): JSX.Element;
     displayName: string;
@@ -432,6 +445,9 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
      */
     variant?: keyof typeof variantStyleMap$1;
 };
+/**
+ * Displaying heading text, both visually and semantically
+ */
 declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLHeadingElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
@@ -680,6 +696,11 @@ declare const iconSizeMap: {
     xxl: string;
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Is Icon on a filled background?
      */
@@ -697,8 +718,12 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
      */
     type: IconNameType;
 };
+/**
+ * A component that renders any of our available icons. Note that icons should not be used directly
+ * for interactivity. If you need an interactive element, use [IconButton](?path=/docs/ui-components-iconbutton--docs).
+ */
 declare const Icon: {
-    ({ invertColor, size, style, type, ...otherProps }: IconProps): JSX.Element;
+    ({ invertColor, colorScheme, size, style, type, ...otherProps }: IconProps): JSX.Element;
     displayName: string;
 };
 
@@ -715,7 +740,8 @@ type IconButtonProps = {
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
 /**
- * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
+ * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs),
+ * but only accepts an [Icon](?path=/docs/ui-components-icon--docs) as a child.
  */
 declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
@@ -756,6 +782,9 @@ type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
      */
     text?: ReactNode;
 };
+/**
+ * Used to hide content from the visual client, but keep it readable for screen readers.
+ */
 declare const ScreenReaderOnly: {
     ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -779,6 +808,10 @@ type StackProps = {
     direction?: 'horizontal' | 'vertical';
     renderAs?: ElementType$1;
 };
+/**
+ * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
+ * This allows for layouting children in a consistent way without needing to manually add margins or padding.
+ */
 declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
     renderAs?: any;
 } & StackProps & {
@@ -850,6 +883,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      */
     variant?: keyof typeof variantStyleMap | undefined;
 };
+/**
+ * Used for rending paragraphs and inline text.
+ */
 declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect" | "prominence"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -975,6 +1011,8 @@ type TooltipProps = {
 };
 /**
  * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
+ * For elements that are not interactive, consider using a [Popover](/docs/ui-docs-popover--docs) instead.
+ * TODO - add link to Popover docs when they exist
  */
 declare const Tooltip: {
     ({ delay, direction, content, children, forceOpen, compact, hideArrow, }: TooltipProps): JSX.Element;

package/dist/index.d.ts

@@ -155,6 +155,9 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
      */
     wrapItems?: boolean;
 };
+/**
+ * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
+ */
 declare const Box: {
     ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
     displayName: string;
@@ -328,6 +331,10 @@ type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
      */
     fullWidth?: boolean;
 };
+/**
+ * ButtonGroup is a layout component that groups buttons together,
+ * with a standardized gap between them.
+ */
 declare const ButtonGroup: {
     ({ children, align, fullWidth, ...otherProps }: ButtonGroupProps): JSX.Element | null;
     displayName: string;
@@ -341,6 +348,9 @@ type DividerProps = ComponentPropsWithoutRef<'hr'> & {
      */
     size?: ResponsiveObject<'lg' | 'sm'> | 'lg' | 'sm';
 };
+/**
+ * A line used to visually separate content
+ */
 declare const Divider: {
     ({ size, ...otherProps }: DividerProps): JSX.Element;
     displayName: string;
@@ -358,6 +368,9 @@ type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
      */
     lines?: number;
 };
+/**
+ * Truncate text with an ellispsis visble at the end
+ */
 declare const Ellipsis: {
     ({ children, lines, ...otherProps }: EllipsisProps): JSX.Element;
     displayName: string;
@@ -432,6 +445,9 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
      */
     variant?: keyof typeof variantStyleMap$1;
 };
+/**
+ * Displaying heading text, both visually and semantically
+ */
 declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLHeadingElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
@@ -680,6 +696,11 @@ declare const iconSizeMap: {
     xxl: string;
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Is Icon on a filled background?
      */
@@ -697,8 +718,12 @@ type IconProps = ComponentPropsWithoutRef<'svg'> & {
      */
     type: IconNameType;
 };
+/**
+ * A component that renders any of our available icons. Note that icons should not be used directly
+ * for interactivity. If you need an interactive element, use [IconButton](?path=/docs/ui-components-iconbutton--docs).
+ */
 declare const Icon: {
-    ({ invertColor, size, style, type, ...otherProps }: IconProps): JSX.Element;
+    ({ invertColor, colorScheme, size, style, type, ...otherProps }: IconProps): JSX.Element;
     displayName: string;
 };
 
@@ -715,7 +740,8 @@ type IconButtonProps = {
     children: JSX.Element;
 } & (Omit<ButtonAsButtonProps, 'fullWidth' | 'leftIcon' | 'rightIcon'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'leftIcon' | 'rightIcon'>);
 /**
- * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs), but only accepts an Icon as a child.
+ * IconButton behaves like a [Button](?path=/docs/ui-components-button--docs),
+ * but only accepts an [Icon](?path=/docs/ui-components-icon--docs) as a child.
  */
 declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
@@ -756,6 +782,9 @@ type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
      */
     text?: ReactNode;
 };
+/**
+ * Used to hide content from the visual client, but keep it readable for screen readers.
+ */
 declare const ScreenReaderOnly: {
     ({ text, children, focusable, ...otherProps }: ScreenReaderOnlyProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -779,6 +808,10 @@ type StackProps = {
     direction?: 'horizontal' | 'vertical';
     renderAs?: ElementType$1;
 };
+/**
+ * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
+ * This allows for layouting children in a consistent way without needing to manually add margins or padding.
+ */
 declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
     renderAs?: any;
 } & StackProps & {
@@ -850,6 +883,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      */
     variant?: keyof typeof variantStyleMap | undefined;
 };
+/**
+ * Used for rending paragraphs and inline text.
+ */
 declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect" | "prominence"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -975,6 +1011,8 @@ type TooltipProps = {
 };
 /**
  * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
+ * For elements that are not interactive, consider using a [Popover](/docs/ui-docs-popover--docs) instead.
+ * TODO - add link to Popover docs when they exist
  */
 declare const Tooltip: {
     ({ delay, direction, content, children, forceOpen, compact, hideArrow, }: TooltipProps): JSX.Element;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.6
+ * @license @wistia/ui v0.0.8
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -1488,8 +1488,8 @@ Box.displayName = "Box";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { isNotNil as isNotNil4, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
-import styled3 from "styled-components";
+import { isNotNil as isNotNil3, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
+import styled4 from "styled-components";
 
 // src/css/buttonResetCss.tsx
 import { css as css9 } from "styled-components";
@@ -1693,7 +1693,7 @@ var buttonSizeStyles = {
   hero: buttonHeroStyles
 };
 
-// src/private/getColorScheme/getColorScheme.ts
+// src/private/helpers/getColorScheme/getColorScheme.ts
 import { css as css11 } from "styled-components";
 var colorSchemeSchema = [
   { token: "bg-surface", step: "surface" },
@@ -1749,7 +1749,8 @@ var getColorScheme = (colorScheme) => {
 };
 
 // src/components/Icon/Icon.tsx
-import { isNil as isNil4, isNotNil as isNotNil2 } from "@wistia/type-guards";
+import { isNil as isNil4 } from "@wistia/type-guards";
+import styled2 from "styled-components";
 
 // src/components/Icon/icons/AbTestIcon.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
@@ -4905,8 +4906,12 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
+var StyledIcon = styled2.svg`
+  ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
+`;
 var Icon = ({
   invertColor,
+  colorScheme = "inherit",
   size = "lg",
   style,
   type,
@@ -4930,21 +4935,20 @@ var Icon = ({
     ...style
   };
   const iconColor = invertColor ? "var(--color-icon-on-fill)" : "var(--color-icon)";
-  if (isNotNil2(otherProps.color)) {
-    delete otherProps.color;
-  }
   return /* @__PURE__ */ jsx156(
-    IconElement,
+    StyledIcon,
     {
+      $colorScheme: colorScheme,
       "aria-hidden": "true",
-      color: iconColor,
+      as: IconElement,
       height: `${iconSizeMap[responsiveSize]}px`,
       role: "presentation",
       style: defaultStyle,
       viewBox: "0 0 24 24",
       width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
-      ...otherProps
+      ...otherProps,
+      color: iconColor
     }
   );
 };
@@ -4952,8 +4956,8 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-import { isNil as isNil5, isNotNil as isNotNil3, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
-import styled2 from "styled-components";
+import { isNil as isNil5, isNotNil as isNotNil2, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
+import styled3 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
 import { jsx as jsx157 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
@@ -4971,7 +4975,7 @@ var generateHref = (href, type, disabled) => {
 };
 var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined2(props.href);
-var StyledLink = styled2.a`
+var StyledLink = styled3.a`
   ${({ href }) => isNil5(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
@@ -5003,7 +5007,7 @@ var Link = forwardRef(
         } finally {
           if (routingCallback !== null) {
             routingCallback();
-          } else if (isNotNil3(to)) {
+          } else if (isNotNil2(to)) {
             window.location.assign(to);
           } else {
           }
@@ -5063,7 +5067,7 @@ Link.displayName = "Link";
 // src/components/Button/Button.tsx
 import { Fragment, jsx as jsx158, jsxs as jsxs3 } from "react/jsx-runtime";
 var isLink2 = (props) => isNotUndefined3(props.href);
-var StyledButton = styled3.button`
+var StyledButton = styled4.button`
   ${buttonResetCss}
   ${({ colorScheme }) => getColorScheme(colorScheme)}
   ${({ size }) => buttonSizeStyles[size]}
@@ -5072,20 +5076,23 @@ var StyledButton = styled3.button`
   ${({ fullWidth }) => fullWidth && "width: 100%;"}
   position: relative;
 `;
-var StyledButtonContent = styled3.div`
+var StyledButtonContent = styled4.div`
   align-items: center;
   display: inline-flex;
   flex-grow: 1;
   justify-content: center;
-  opacity: ${({ isLoading }) => isLoading ? 0 : 1};
+  opacity: ${({ $isLoading }) => $isLoading ? 0 : 1};
   padding: 0 var(--button-label-padding-horizontal);
   gap: var(--button-label-gap);
+
+  ${({ $hasLeftIcon }) => $hasLeftIcon && "padding-left: 0;"}
+  ${({ $hasRightIcon }) => $hasRightIcon && "padding-right: 0;"}
 `;
-var StyledButtonContentLabel = styled3.span`
+var StyledButtonContentLabel = styled4.span`
   flex: 1;
   text-align: center;
 `;
-var StyledButtonLoading = styled3.div`
+var StyledButtonLoading = styled4.div`
   position: absolute;
   display: flex;
 `;
@@ -5097,11 +5104,19 @@ var ButtonContent = ({
 }) => {
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     isLoading ? /* @__PURE__ */ jsx158(StyledButtonLoading, { children: /* @__PURE__ */ jsx158(Icon, { type: "spinner" }) }) : null,
-    /* @__PURE__ */ jsxs3(StyledButtonContent, { isLoading, children: [
-      leftIcon ?? null,
-      /* @__PURE__ */ jsx158(StyledButtonContentLabel, { children }),
-      rightIcon ?? null
-    ] })
+    /* @__PURE__ */ jsxs3(
+      StyledButtonContent,
+      {
+        $hasLeftIcon: isNotNil3(leftIcon),
+        $hasRightIcon: isNotNil3(rightIcon),
+        $isLoading: isLoading,
+        children: [
+          leftIcon ?? null,
+          /* @__PURE__ */ jsx158(StyledButtonContentLabel, { children }),
+          rightIcon ?? null
+        ]
+      }
+    )
   ] });
 };
 var Button = forwardRef2(
@@ -5163,7 +5178,7 @@ var Button = forwardRef2(
         event.preventDefault();
         return;
       }
-      if (isNotNil4(onClick)) {
+      if (isNotNil3(onClick)) {
         onClick(event);
       }
     };
@@ -5191,7 +5206,7 @@ var Button = forwardRef2(
 Button.displayName = "Button";
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled4 from "styled-components";
+import styled5 from "styled-components";
 import { isNil as isNil6 } from "@wistia/type-guards";
 import { jsx as jsx159 } from "react/jsx-runtime";
 var getAlignment = (align) => {
@@ -5206,7 +5221,7 @@ var getAlignment = (align) => {
   }
   return void 0;
 };
-var ButtonGroupComponent = styled4.div`
+var ButtonGroupComponent = styled5.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -5248,13 +5263,13 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Divider/Divider.tsx
-import styled5 from "styled-components";
+import styled6 from "styled-components";
 import { jsx as jsx160 } from "react/jsx-runtime";
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = styled5.hr`
+var DividerComponent = styled6.hr`
   background: none;
   border-bottom: none;
   border-left: none;
@@ -5280,8 +5295,8 @@ var Divider = ({ size = "sm", ...otherProps }) => {
 Divider.displayName = "Divider";
 
 // src/components/Ellipsis/Ellipsis.tsx
-import { isNotNil as isNotNil5 } from "@wistia/type-guards";
-import styled6, { css as css12 } from "styled-components";
+import { isNotNil as isNotNil4 } from "@wistia/type-guards";
+import styled7, { css as css12 } from "styled-components";
 import { jsx as jsx161 } from "react/jsx-runtime";
 var ellipsisStyle = css12`
   overflow: hidden;
@@ -5309,10 +5324,10 @@ var ellipsisStyle = css12`
 var ellipsisFlexParentStyle = css12`
   min-width: 0;
 `;
-var EllipsisComponent = styled6.div`
+var EllipsisComponent = styled7.div`
   ${ellipsisStyle};
   ${({ lines }) => {
-  if (isNotNil5(lines)) {
+  if (isNotNil4(lines)) {
     return css12`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${lines};
@@ -5335,7 +5350,7 @@ Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled7, { css as css13 } from "styled-components";
+import styled8, { css as css13 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5396,7 +5411,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = styled7.div`
+var StyledHeading = styled8.div`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -5460,7 +5475,7 @@ 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";
+import styled10 from "styled-components";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -5470,7 +5485,7 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled8, { css as css14 } from "styled-components";
+import styled9, { 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);
@@ -5479,7 +5494,7 @@ var CompactTooltipStyles = css14`
   --tooltip-horizontal-padding: var(--space-02);
   --tooltip-vertical-padding: var(--space-03);
 `;
-var StyledContent = styled8(Content)`
+var StyledContent = styled9(Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -5581,7 +5596,7 @@ var buttonIconSizeMap = {
   large: "lg",
   hero: "xl"
 };
-var StyledButton2 = styled9(Button)`
+var StyledButton2 = styled10(Button)`
   --icon-button-size-small: 24px;
   --icon-button-size-medium: 32px;
   --icon-button-size-large: 40px;
@@ -5620,11 +5635,11 @@ var IconButton = forwardRef4(
 IconButton.displayName = "IconButton";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled10 from "styled-components";
-import { isNotNil as isNotNil6 } from "@wistia/type-guards";
+import styled11 from "styled-components";
+import { isNotNil as isNotNil5 } from "@wistia/type-guards";
 import { jsx as jsx165 } from "react/jsx-runtime";
-var VisuallyHidden = styled10.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled10.div({
+var VisuallyHidden = styled11.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled11.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -5633,7 +5648,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil6(text) ? text : children;
+  const accessibleText = isNotNil5(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ jsx165(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -5643,10 +5658,10 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled11 from "styled-components";
+import styled12 from "styled-components";
 import { jsx as jsx166 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled11.div`
+var StyledStack = styled12.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ gap }) => `var(--${gap})`};
@@ -5676,7 +5691,7 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled12, { css as css15 } from "styled-components";
+import styled13, { css as css15 } from "styled-components";
 import { jsx as jsx167 } from "react/jsx-runtime";
 var bodyBoldStyles = css15`
   > strong,
@@ -5790,7 +5805,7 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = styled12.div`
+var StyledText = styled13.div`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -5854,8 +5869,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled13 from "styled-components";
-import { isNotNil as isNotNil7 } from "@wistia/type-guards";
+import styled14 from "styled-components";
+import { isNotNil as isNotNil6 } from "@wistia/type-guards";
 import { jsx as jsx168, jsxs as jsxs5 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -5875,7 +5890,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled13.svg`
+var WistiaLogoComponent = styled14.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -5928,7 +5943,7 @@ var WistiaLogo = ({
       ...otherProps,
       children: [
         /* @__PURE__ */ jsx168("title", { children: title }),
-        isNotNil7(description) ? /* @__PURE__ */ jsx168("desc", { children: description }) : null,
+        isNotNil6(description) ? /* @__PURE__ */ jsx168("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]