@wistia/ui 0.4.10-beta.f4fe6fa2.2799dfc → 0.4.10

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.10-beta.f4fe6fa2.2799dfc
+ * @license @wistia/ui v0.4.10
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5975,16 +5975,9 @@ var Badge = forwardRef4(
 Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
-import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
+import { Children, cloneElement as cloneElement2 } from "react";
 import styled10 from "styled-components";
 import { isNotNil as isNotNil7, isNil as isNil7, isRecord as isRecord3 } from "@wistia/type-guards";
-
-// src/private/helpers/makePolymorphic/makePolymorphic.tsx
-var makePolymorphic = (component) => {
-  return component;
-};
-
-// src/components/Box/Box.tsx
 import { jsx as jsx167 } from "react/jsx-runtime";
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
@@ -6028,7 +6021,7 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
-var StyledBoxComponent = styled10.div`
+var BoxComponent = styled10.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
@@ -6062,56 +6055,50 @@ var wrapChildren = (children) => {
   }
   return null;
 };
-var DEFAULT_ELEMENT = "div";
-var BoxComponent = forwardRef5(
-  ({
-    alignContent = "stretch",
-    alignItems = "flex-start",
-    alignSelf,
-    basis,
-    children,
-    direction = "row",
-    fill = false,
-    fillViewport = false,
-    gap,
-    grow,
-    hasBoxParent = false,
-    // eslint-disable-line @typescript-eslint/no-unused-vars
-    inline = false,
-    justifyContent = "flex-start",
-    order,
-    renderAs,
-    shrink,
-    wrapItems = false,
-    ...otherProps
-  }, ref) => {
-    return /* @__PURE__ */ jsx167(
-      StyledBoxComponent,
-      {
-        ref,
-        $alignContent: alignContent,
-        $alignItems: alignItems,
-        $alignSelf: alignSelf,
-        $basis: basis,
-        $fillBox: fill,
-        $fillViewport: fillViewport,
-        $flexDirection: direction,
-        $gap: gap,
-        $grow: grow,
-        $inline: inline,
-        $justifyContent: justifyContent,
-        $order: order,
-        $shrink: shrink,
-        $wrapItems: wrapItems,
-        as: renderAs ?? DEFAULT_ELEMENT,
-        ...otherProps,
-        children: wrapChildren(children)
-      }
-    );
-  }
-);
-BoxComponent.displayName = "Box";
-var Box = makePolymorphic(BoxComponent);
+var Box = ({
+  alignContent = "stretch",
+  alignItems = "flex-start",
+  alignSelf,
+  basis,
+  children,
+  direction = "row",
+  fill = false,
+  fillViewport = false,
+  gap,
+  grow,
+  hasBoxParent = false,
+  // eslint-disable-line @typescript-eslint/no-unused-vars
+  inline = false,
+  justifyContent = "flex-start",
+  order,
+  shrink,
+  wrapItems = false,
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ jsx167(
+    BoxComponent,
+    {
+      $alignContent: alignContent,
+      $alignItems: alignItems,
+      $alignSelf: alignSelf,
+      $basis: basis,
+      $fillBox: fill,
+      $fillViewport: fillViewport,
+      $flexDirection: direction,
+      $gap: gap,
+      $grow: grow,
+      $inline: inline,
+      $justifyContent: justifyContent,
+      $order: order,
+      $shrink: shrink,
+      $wrapItems: wrapItems,
+      as: "div",
+      ...otherProps,
+      children: wrapChildren(children)
+    }
+  );
+};
+Box.displayName = "Box";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import styled11 from "styled-components";
@@ -6270,7 +6257,7 @@ var Card = ({
 Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef7, useId } from "react";
+import { forwardRef as forwardRef6, useId } from "react";
 import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
 import styled17 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
@@ -6279,8 +6266,15 @@ import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 import styled15, { css as css16 } from "styled-components";
 
 // src/components/Heading/Heading.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import styled14, { css as css15 } from "styled-components";
+
+// src/private/helpers/makePolymorphic/makePolymorphic.tsx
+var makePolymorphic = (component) => {
+  return component;
+};
+
+// src/components/Heading/Heading.tsx
 import { jsx as jsx172 } from "react/jsx-runtime";
 var heroStyle = css15`
   --font-family: var(--wui-typography-heading-hero-family);
@@ -6333,7 +6327,7 @@ var variantStyleMap = {
   heading5: heading5TextStyle,
   heading6: heading6TextStyle
 };
-var DEFAULT_ELEMENT2 = "h1";
+var DEFAULT_ELEMENT = "h1";
 var StyledHeading = styled14.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
@@ -6358,15 +6352,15 @@ var StyledHeading = styled14.div`
   margin: 0;
 `;
 var variantElementMap = {
-  hero: DEFAULT_ELEMENT2,
-  heading1: DEFAULT_ELEMENT2,
+  hero: DEFAULT_ELEMENT,
+  heading1: DEFAULT_ELEMENT,
   heading2: "h2",
   heading3: "h3",
   heading4: "h4",
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = forwardRef6(
+var HeadingComponent = forwardRef5(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -6547,7 +6541,7 @@ var StyledLabelWrapper = styled17.div`
   flex-direction: column;
   margin-left: var(--wui-space-02);
 `;
-var Checkbox = forwardRef7(
+var Checkbox = forwardRef6(
   ({
     checked,
     disabled = false,
@@ -6653,21 +6647,21 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef9, useRef as useRef3, useMemo as useMemo4, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
+import { forwardRef as forwardRef8, useRef as useRef3, useMemo as useMemo4, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
 import styled20 from "styled-components";
 import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 import styled19 from "styled-components";
 import { jsx as jsx177 } from "react/jsx-runtime";
-var DEFAULT_ELEMENT3 = "div";
+var DEFAULT_ELEMENT2 = "div";
 var StyledStack = styled19.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
 `;
-var StackComponent = forwardRef8(
+var StackComponent = forwardRef7(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
@@ -6677,7 +6671,7 @@ var StackComponent = forwardRef8(
         ref,
         $direction: responsiveDirection,
         $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT3,
+        as: renderAs ?? DEFAULT_ELEMENT2,
         ...props
       }
     );
@@ -6775,7 +6769,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
   );
 };
 FormComponent.displayName = "Form";
-var Form = forwardRef9(FormComponent);
+var Form = forwardRef8(FormComponent);
 
 // src/components/Form/useFormState.tsx
 import { useCallback as useCallback5, useState as useState6 } from "react";
@@ -6857,7 +6851,7 @@ import styled23 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil8, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Text/Text.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import styled21, { css as css18 } from "styled-components";
 import { jsx as jsx180 } from "react/jsx-runtime";
 var bodyBoldStyles = css18`
@@ -6998,8 +6992,8 @@ var StyledText = styled21.div`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT4 = "div";
-var TextComponent = forwardRef10(
+var DEFAULT_ELEMENT3 = "div";
+var TextComponent = forwardRef9(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -7024,7 +7018,7 @@ var TextComponent = forwardRef10(
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
         $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT4,
+        as: renderAs ?? DEFAULT_ELEMENT3,
         ...otherProps
       }
     );
@@ -7213,7 +7207,7 @@ var RadioGroup = ({
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef11 } from "react";
+import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef10 } from "react";
 import styled24 from "styled-components";
 import { jsx as jsx185 } from "react/jsx-runtime";
 var StyledButton2 = styled24(Button)`
@@ -7230,7 +7224,7 @@ var StyledButton2 = styled24(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = forwardRef11(
+var IconButton = forwardRef10(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
     return /* @__PURE__ */ jsx185(
@@ -7251,7 +7245,7 @@ var IconButton = forwardRef11(
 IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef12, cloneElement as cloneElement5, useRef as useRef6 } from "react";
+import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef6 } from "react";
 import styled25, { css as css19 } from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil9 } from "@wistia/type-guards";
 import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -7343,7 +7337,7 @@ var StyledInputContainer = styled25.div`
 var isValidRef = (ref) => {
   return typeof ref === "object" && ref !== null && "current" in ref && isNotNil9(ref.current);
 };
-var Input = forwardRef12(
+var Input = forwardRef11(
   ({
     fullWidth = false,
     monospace = false,
@@ -7617,7 +7611,7 @@ import {
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import styled28 from "styled-components";
 import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { jsx as jsx189, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -7689,7 +7683,7 @@ var StyledBadgeContainer = styled28.div`
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if (isNotUndefined8(colorScheme)) {
@@ -7813,10 +7807,10 @@ var SubMenu = ({
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx192 } from "react/jsx-runtime";
-var MenuItem = forwardRef14(
+var MenuItem = forwardRef13(
   ({ onSelect = () => null, ...props }, ref) => {
     return /* @__PURE__ */ jsx192(
       DropdownMenuItem2,
@@ -7973,7 +7967,7 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import styled36 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil15 } from "@wistia/type-guards";
@@ -8056,7 +8050,7 @@ var ModalHeader = ({
 };
 
 // src/components/Modal/ModalContent.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import styled34 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
@@ -8121,7 +8115,7 @@ var StyledModalContent = styled34(DialogContent)`
     }
   }
 `;
-var ModalContent = forwardRef15(
+var ModalContent = forwardRef14(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ jsx199(
@@ -8130,7 +8124,6 @@ var ModalContent = forwardRef15(
         ref,
         $fullHeight: fullHeight,
         $width: width,
-        "aria-describedby": void 0,
         ...otherProps,
         children
       }
@@ -8139,7 +8132,7 @@ var ModalContent = forwardRef15(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import styled35 from "styled-components";
 import { jsx as jsx200 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
@@ -8177,7 +8170,7 @@ var BackdropComponent = styled35.div`
     }
   }
 `;
-var Backdrop = forwardRef16(
+var Backdrop = forwardRef15(
   ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx200(
     BackdropComponent,
     {
@@ -8198,7 +8191,7 @@ var ModalBody = styled36.div`
   display: flex;
   order: 2;
 `;
-var Modal = forwardRef17(
+var Modal = forwardRef16(
   ({
     children,
     fullHeight = false,
@@ -8226,6 +8219,7 @@ var Modal = forwardRef17(
             ModalContent,
             {
               ref,
+              "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
                 if (isNotNil15(initialFocusRef) && initialFocusRef.current) {
@@ -8258,7 +8252,7 @@ var Modal = forwardRef17(
 Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
-import { forwardRef as forwardRef18, useId as useId3 } from "react";
+import { forwardRef as forwardRef17, useId as useId3 } from "react";
 import styled37, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -8332,7 +8326,7 @@ var StyledRadioWrapper = styled37.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = forwardRef18(
+var Radio = forwardRef17(
   ({
     checked,
     disabled = false,
@@ -8388,7 +8382,7 @@ var Radio = forwardRef18(
 Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import styled38 from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil11 } from "@wistia/type-guards";
@@ -8401,7 +8395,7 @@ var StyledSegmentedControl = styled38(ToggleGroupRoot)`
   gap: var(--wui-space-01);
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var SegmentedControl = forwardRef19(
+var SegmentedControl = forwardRef18(
   ({
     children,
     disabled = false,
@@ -8433,7 +8427,7 @@ var SegmentedControl = forwardRef19(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import styled39 from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
@@ -8490,7 +8484,7 @@ var StyledSegmentedControlItem = styled39(ToggleGroupItem)`
     }
   }
 `;
-var SegmentedControlItem = forwardRef20(
+var SegmentedControlItem = forwardRef19(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, ref) => {
     const handleClick = (event) => {
       const target = event.target;
@@ -8519,7 +8513,7 @@ var SegmentedControlItem = forwardRef20(
 SegmentedControlItem.displayName = "SegmentedControlItem";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import styled40 from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { Fragment as Fragment3, jsx as jsx204, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -8625,7 +8619,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = forwardRef21(
+var Tag = forwardRef20(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = isNotNil17(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs24(
@@ -8886,7 +8880,7 @@ import {
   Value,
   ScrollDownButton
 } from "@radix-ui/react-select";
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import styled43 from "styled-components";
 import { jsx as jsx207, jsxs as jsxs27 } from "react/jsx-runtime";
 var StyledTrigger = styled43(Trigger2)`
@@ -8946,7 +8940,7 @@ var StyledContent2 = styled43(Content2)`
   padding: var(--wui-select-option-padding);
   min-width: 200px;
 `;
-var Select = forwardRef22(
+var Select = forwardRef21(
   ({
     colorScheme = "inherit",
     children,
@@ -8995,7 +8989,7 @@ Select.displayName = "Select";
 
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import styled44 from "styled-components";
 import { jsx as jsx208, jsxs as jsxs28 } from "react/jsx-runtime";
 var StyledItem = styled44(Item)`
@@ -9024,7 +9018,7 @@ var StyledItem = styled44(Item)`
 var StyledIconContainer = styled44.span`
   width: 12px;
 `;
-var SelectOption = forwardRef23(
+var SelectOption = forwardRef22(
   ({ children, ...props }, forwardedRef) => {
     return /* @__PURE__ */ jsxs28(
       StyledItem,