@wistia/ui 0.8.9-beta.8e513df6.87f52b0 → 0.8.9

package/dist/index.d.mts

@@ -202,12 +202,11 @@ type LinkAsButtonProps = BaseProps$2 & ComponentPropsWithRef<'button'> & {
 };
 type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
 /**
- * Links are used for navigation. If no `href` is supplied, a button that is visually styled to appear as a link
- * is rendered. If used in a `react-router` context, their [Link](https://reactrouter.com/en/main/components/link).
- * component is used, otherwise a native `a` element.
- *
+ * Links are used for navigation. If no `href` is supplied, a button that is visually styled to apper as a link
+ * is used. If used in a react-router context, their [Link](https://reactrouter.com/en/main/components/link). component is used, otherwise a native a tag.
  * This means in addition to its own props, `Link` can use props from `react-router-dom`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
  * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
+ *
  */
 declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
@@ -759,7 +758,7 @@ declare const Breadcrumbs: {
 type BreadcrumbProps = ButtonAsLinkProps & {
     /**
      * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
-     */
+     * */
     icon?: ButtonAsLinkProps['leftIcon'];
     /**
      * The text of the breadcrumb link
@@ -839,51 +838,51 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
     width?: string;
     /**
      * @ignore
-     */
+     * */
     alignContent?: BoxProps['alignContent'];
     /**
      * @ignore
-     */
+     * */
     alignItems?: BoxProps['alignItems'];
     /**
      * @ignore
-     */
+     * */
     alignSelf?: BoxProps['alignSelf'];
     /**
      * @ignore
-     */
+     * */
     basis?: BoxProps['basis'];
     /**
      * @ignore
-     */
+     * */
     fill?: BoxProps['fill'];
     /**
      * @ignore
-     */
+     * */
     fillViewport?: BoxProps['fillViewport'];
     /**
      * @ignore
-     */
+     * */
     grow?: BoxProps['grow'];
     /**
      * @ignore
-     */
+     * */
     inline?: BoxProps['inline'];
     /**
      * @ignore
-     */
+     * */
     justifyContent?: BoxProps['justifyContent'];
     /**
      * @ignore
-     */
+     * */
     order?: BoxProps['order'];
     /**
      * @ignore
-     */
+     * */
     shrink?: BoxProps['shrink'];
     /**
      * @ignore
-     */
+     * */
     wrapItems?: BoxProps['wrapItems'];
 };
 /**
@@ -1854,7 +1853,7 @@ type ControlledMenuProps = {
     /**
      * Is the menu open.
      * Must be used with `onOpenChange`.
-     */
+     * */
     isOpen: boolean;
     /** When an attempt to toggle the menu is triggered.
      *  Must be used with `isOpen`.
@@ -1894,7 +1893,7 @@ type MenuProps = MenuControlProps & {
     onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
     /**
      * Replace the default trigger with a custom button or other element
-     */
+     * */
     trigger?: ReactNode;
     /**
      * Props to pass to the trigger component, the default trigger is Button
@@ -1979,23 +1978,23 @@ type MenuItemButtonProps = ButtonProps & {
     rightIcon?: ButtonProps['rightIcon'];
     /**
      * @ignore
-     */
+     * */
     fullWidth?: never;
     /**
      * @ignore
-     */
+     * */
     asChild?: never;
     /**
      * @ignore
-     */
+     * */
     variant?: never;
     /**
      * @ignore
-     */
+     * */
     size?: never;
     /**
      * @ignore
-     */
+     * */
     unstyled?: never;
 };
 
@@ -2343,7 +2342,7 @@ type ControlledPopoverProps = {
     /**
      * Is the popover open.
      * Must be used with `onOpenChange`.
-     */
+     * */
     isOpen: boolean;
     /** When an attempt to toggle the popover is triggered.
      *  Must be used with `isOpen`.
@@ -2375,7 +2374,7 @@ type PopoverProps = ContentProps & PopoverControlProps & {
     hideCloseButton?: boolean;
     /**
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
-     */
+     * */
     trigger: JSX.Element;
     /**
      * If true, the popover will use the unstyled Content component instead of StyledContent

package/dist/index.d.ts

@@ -202,12 +202,11 @@ type LinkAsButtonProps = BaseProps$2 & ComponentPropsWithRef<'button'> & {
 };
 type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
 /**
- * Links are used for navigation. If no `href` is supplied, a button that is visually styled to appear as a link
- * is rendered. If used in a `react-router` context, their [Link](https://reactrouter.com/en/main/components/link).
- * component is used, otherwise a native `a` element.
- *
+ * Links are used for navigation. If no `href` is supplied, a button that is visually styled to apper as a link
+ * is used. If used in a react-router context, their [Link](https://reactrouter.com/en/main/components/link). component is used, otherwise a native a tag.
  * This means in addition to its own props, `Link` can use props from `react-router-dom`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
  * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
+ *
  */
 declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
@@ -759,7 +758,7 @@ declare const Breadcrumbs: {
 type BreadcrumbProps = ButtonAsLinkProps & {
     /**
      * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
-     */
+     * */
     icon?: ButtonAsLinkProps['leftIcon'];
     /**
      * The text of the breadcrumb link
@@ -839,51 +838,51 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
     width?: string;
     /**
      * @ignore
-     */
+     * */
     alignContent?: BoxProps['alignContent'];
     /**
      * @ignore
-     */
+     * */
     alignItems?: BoxProps['alignItems'];
     /**
      * @ignore
-     */
+     * */
     alignSelf?: BoxProps['alignSelf'];
     /**
      * @ignore
-     */
+     * */
     basis?: BoxProps['basis'];
     /**
      * @ignore
-     */
+     * */
     fill?: BoxProps['fill'];
     /**
      * @ignore
-     */
+     * */
     fillViewport?: BoxProps['fillViewport'];
     /**
      * @ignore
-     */
+     * */
     grow?: BoxProps['grow'];
     /**
      * @ignore
-     */
+     * */
     inline?: BoxProps['inline'];
     /**
      * @ignore
-     */
+     * */
     justifyContent?: BoxProps['justifyContent'];
     /**
      * @ignore
-     */
+     * */
     order?: BoxProps['order'];
     /**
      * @ignore
-     */
+     * */
     shrink?: BoxProps['shrink'];
     /**
      * @ignore
-     */
+     * */
     wrapItems?: BoxProps['wrapItems'];
 };
 /**
@@ -1854,7 +1853,7 @@ type ControlledMenuProps = {
     /**
      * Is the menu open.
      * Must be used with `onOpenChange`.
-     */
+     * */
     isOpen: boolean;
     /** When an attempt to toggle the menu is triggered.
      *  Must be used with `isOpen`.
@@ -1894,7 +1893,7 @@ type MenuProps = MenuControlProps & {
     onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
     /**
      * Replace the default trigger with a custom button or other element
-     */
+     * */
     trigger?: ReactNode;
     /**
      * Props to pass to the trigger component, the default trigger is Button
@@ -1979,23 +1978,23 @@ type MenuItemButtonProps = ButtonProps & {
     rightIcon?: ButtonProps['rightIcon'];
     /**
      * @ignore
-     */
+     * */
     fullWidth?: never;
     /**
      * @ignore
-     */
+     * */
     asChild?: never;
     /**
      * @ignore
-     */
+     * */
     variant?: never;
     /**
      * @ignore
-     */
+     * */
     size?: never;
     /**
      * @ignore
-     */
+     * */
     unstyled?: never;
 };
 
@@ -2343,7 +2342,7 @@ type ControlledPopoverProps = {
     /**
      * Is the popover open.
      * Must be used with `onOpenChange`.
-     */
+     * */
     isOpen: boolean;
     /** When an attempt to toggle the popover is triggered.
      *  Must be used with `isOpen`.
@@ -2375,7 +2374,7 @@ type PopoverProps = ContentProps & PopoverControlProps & {
     hideCloseButton?: boolean;
     /**
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
-     */
+     * */
     trigger: JSX.Element;
     /**
      * If true, the popover will use the unstyled Content component instead of StyledContent

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.9-beta.8e513df6.87f52b0
+ * @license @wistia/ui v0.8.9
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10,7 +10,6 @@
 
 // src/providers/UIProvider/UIProvider.tsx
 import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
-import { createContext as createContext2, useContext } from "react";
 
 // src/css/GlobalStyle.tsx
 import { createGlobalStyle } from "styled-components";
@@ -1469,17 +1468,12 @@ var ToastProvider = () => /* @__PURE__ */ jsx2(Toaster, { ...toastConfig });
 
 // src/providers/UIProvider/UIProvider.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var UIProviderNestingContext = createContext2(false);
 var UIProvider = ({ children }) => {
-  const isNested = useContext(UIProviderNestingContext);
-  if (isNested) {
-    console.warn("UIProvider is nested. Only one instance of UIProvider.");
-  }
-  return /* @__PURE__ */ jsx3(UIProviderNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+  return /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsx3(GlobalStyle, {}),
     children,
     process.env["NODE_ENV"] !== "test" && /* @__PURE__ */ jsx3(ToastProvider, {})
-  ] }) }) });
+  ] }) });
 };
 
 // src/helpers/copyToClipboard/copyToClipboard.ts
@@ -1947,10 +1941,10 @@ var mq = {
 };
 
 // src/hooks/useAriaLive/useAriaLive.tsx
-import { useContext as useContext2 } from "react";
+import { useContext } from "react";
 import { isNil as isNil4 } from "@wistia/type-guards";
 var useAriaLive = () => {
-  const context = useContext2(AriaLiveContext);
+  const context = useContext(AriaLiveContext);
   if (isNil4(context)) {
     throw new Error("useAriaLive must be used within an AriaLiveProvider");
   }
@@ -6865,29 +6859,31 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
+import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined3, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import styled4 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
-import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined3, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import { jsx as jsx192, jsxs as jsxs7 } from "react/jsx-runtime";
 var generateHref = (href, type, disabled) => {
   if (disabled || isNil6(href)) {
     return void 0;
   }
-  let modifiedHref = href;
+  let to = href;
   if (type === "phone") {
-    modifiedHref = `tel:${href}`;
+    to = `tel:${href}`;
   }
   if (type === "email") {
-    modifiedHref = `mailto:${href}`;
+    to = `mailto:${href}`;
   }
-  return modifiedHref;
+  return to;
 };
 var isButton = (props) => isUndefined2(props.href);
 var isLink = (props) => isNotUndefined3(props.href);
 var StyledLink = styled4.a`
+  --link-icon-size: 14px;
+
   ${({ href }) => isNil6(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
-  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
+  cursor: pointer;
   font-family: var(--wui-typography-family-default);
   color: var(--wui-color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
@@ -6897,8 +6893,8 @@ var StyledLink = styled4.a`
 
   && {
     svg {
-      width: 14px;
-      height: 14px;
+      width: var(--link-icon-size);
+      height: var(--link-icon-size);
     }
   }
 `;
@@ -6943,7 +6939,6 @@ var Link = forwardRef(
     };
     const commonProps = {
       $colorScheme: colorScheme,
-      $disabled: disabled,
       $underline: underline,
       onClick: handleClick
     };
@@ -6962,27 +6957,33 @@ var Link = forwardRef(
     }
     if (isLink(props)) {
       const externalLinkProps = type === "external" ? { target: "_blank", rel: "noopener noreferrer" } : null;
-      const routerSpecificProps = shouldUseReactRouterLink ? {
-        // TODO: Using 'any' here due to styled-components typing limitations with RouterLink
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
-        as: RouterLink,
-        to: to ?? ""
-      } : {
-        as: "a",
-        href: to
-      };
       const combinedProps = {
         ref,
         ...props,
         ...commonProps,
-        ...externalLinkProps,
-        ...routerSpecificProps
+        ...externalLinkProps
       };
-      return /* @__PURE__ */ jsxs7(StyledLink, { ...combinedProps, children: [
-        leftIcon ?? null,
-        children,
-        rightIcon ?? null
-      ] });
+      return shouldUseReactRouterLink ? /* @__PURE__ */ jsx192(
+        StyledLink,
+        {
+          as: RouterLink,
+          ...combinedProps,
+          to: to ?? "",
+          children
+        }
+      ) : /* @__PURE__ */ jsxs7(
+        StyledLink,
+        {
+          as: "a",
+          ...combinedProps,
+          href: to,
+          children: [
+            leftIcon ?? null,
+            children,
+            rightIcon ?? null
+          ]
+        }
+      );
     }
     return null;
   }
@@ -9351,7 +9352,7 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef12, useRef as useRef6, useMemo as useMemo4, createContext as createContext3, useState as useState7, useId as useId2 } from "react";
+import { forwardRef as forwardRef12, useRef as useRef6, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
 import styled33 from "styled-components";
 import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -9395,7 +9396,7 @@ var StyledForm = styled33.form`
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = createContext3({
+var FormContext = createContext2({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9525,7 +9526,7 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext3, useRef as useRef7 } from "react";
+import { useContext as useContext2, useRef as useRef7 } from "react";
 import { isArray, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
@@ -9533,7 +9534,7 @@ var ErrorItem = ({ name, error, formId }) => {
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef7(null);
-  const { formId, errors, hasSubmitted } = useContext3(FormContext);
+  const { formId, errors, hasSubmitted } = useContext2(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
@@ -9563,7 +9564,7 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-import { Children as Children5, cloneElement as cloneElement5, useContext as useContext4 } from "react";
+import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
 import styled36 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil17, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
@@ -9628,7 +9629,7 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext4, useMemo as useMemo5 } from "react";
+import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
 import styled35 from "styled-components";
@@ -9666,7 +9667,7 @@ FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
 import { jsx as jsx226 } from "react/jsx-runtime";
-var CheckboxGroupContext = createContext4(null);
+var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
   name,
@@ -9759,8 +9760,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = useContext4(FormContext);
-  const checkboxGroup = useContext4(CheckboxGroupContext);
+  const formState = useContext3(FormContext);
+  const checkboxGroup = useContext3(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -9825,9 +9826,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext5, useMemo as useMemo6 } from "react";
+import { createContext as createContext4, useMemo as useMemo6 } from "react";
 import { jsx as jsx228 } from "react/jsx-runtime";
-var RadioGroupContext = createContext5(null);
+var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
   name,
@@ -9959,9 +9960,9 @@ import { isNotNil as isNotNil18, isNotUndefined as isNotUndefined10 } from "@wis
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
-import { createContext as createContext6, useContext as useContext5 } from "react";
-var MenuContext = createContext6({ compact: false });
-var useMenuContext = () => useContext5(MenuContext);
+import { createContext as createContext5, useContext as useContext4 } from "react";
+var MenuContext = createContext5({ compact: false });
+var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx231, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -11109,9 +11110,9 @@ import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
-import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState11 } from "react";
+import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState11 } from "react";
 import { jsx as jsx248 } from "react/jsx-runtime";
-var SelectedItemStyleContext = createContext7(null);
+var SelectedItemStyleContext = createContext6(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
@@ -11136,7 +11137,7 @@ var SelectedItemStyleProvider = ({
   return /* @__PURE__ */ jsx248(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
-  const context = useContext6(SelectedItemStyleContext);
+  const context = useContext5(SelectedItemStyleContext);
   if (context === null) {
     throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
   }
@@ -11147,11 +11148,11 @@ var useSelectedItemStyle = () => {
 import styled52 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
-import { createContext as createContext8, useContext as useContext7 } from "react";
-var SegmentedControlValueContext = createContext8(null);
+import { createContext as createContext7, useContext as useContext6 } from "react";
+var SegmentedControlValueContext = createContext7(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = useContext7(SegmentedControlValueContext);
+  const context = useContext6(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -11763,8 +11764,8 @@ var Table = ({
 import styled60 from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
-import { createContext as createContext9 } from "react";
-var TableSectionContext = createContext9(null);
+import { createContext as createContext8 } from "react";
+var TableSectionContext = createContext8(null);
 
 // src/components/Table/TableBody.tsx
 import { jsx as jsx256 } from "react/jsx-runtime";
@@ -11774,7 +11775,7 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-import { useContext as useContext8 } from "react";
+import { useContext as useContext7 } from "react";
 import styled61, { css as css36 } from "styled-components";
 import { jsx as jsx257 } from "react/jsx-runtime";
 var sharedStyles = css36`
@@ -11795,7 +11796,7 @@ var StyledTd = styled61.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = useContext8(TableSectionContext);
+  const section = useContext7(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ jsx257(StyledTh, { ...props, children });
   }
@@ -11888,11 +11889,11 @@ import { Trigger as RadixTab } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil28 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
-import { createContext as createContext10, useContext as useContext9 } from "react";
-var TabsValueContext = createContext10(null);
+import { createContext as createContext9, useContext as useContext8 } from "react";
+var TabsValueContext = createContext9(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = useContext9(TabsValueContext);
+  const context = useContext8(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }