@wistia/ui 0.8.9 → 0.8.10

package/dist/index.d.mts

@@ -202,11 +202,12 @@ 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 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.
+ * 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.
+ *
  * 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>>;
 
@@ -758,7 +759,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
@@ -838,51 +839,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'];
 };
 /**
@@ -1853,7 +1854,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`.
@@ -1893,7 +1894,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
@@ -1978,23 +1979,23 @@ type MenuItemButtonProps = ButtonProps & {
     rightIcon?: ButtonProps['rightIcon'];
     /**
      * @ignore
-     * */
+     */
     fullWidth?: never;
     /**
      * @ignore
-     * */
+     */
     asChild?: never;
     /**
      * @ignore
-     * */
+     */
     variant?: never;
     /**
      * @ignore
-     * */
+     */
     size?: never;
     /**
      * @ignore
-     * */
+     */
     unstyled?: never;
 };
 
@@ -2342,7 +2343,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`.
@@ -2374,7 +2375,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,11 +202,12 @@ 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 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.
+ * 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.
+ *
  * 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>>;
 
@@ -758,7 +759,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
@@ -838,51 +839,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'];
 };
 /**
@@ -1853,7 +1854,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`.
@@ -1893,7 +1894,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
@@ -1978,23 +1979,23 @@ type MenuItemButtonProps = ButtonProps & {
     rightIcon?: ButtonProps['rightIcon'];
     /**
      * @ignore
-     * */
+     */
     fullWidth?: never;
     /**
      * @ignore
-     * */
+     */
     asChild?: never;
     /**
      * @ignore
-     * */
+     */
     variant?: never;
     /**
      * @ignore
-     * */
+     */
     size?: never;
     /**
      * @ignore
-     * */
+     */
     unstyled?: never;
 };
 
@@ -2342,7 +2343,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`.
@@ -2374,7 +2375,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
+ * @license @wistia/ui v0.8.10
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10,6 +10,7 @@
 
 // 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";
@@ -1468,12 +1469,17 @@ 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 }) => {
-  return /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { 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: [
     /* @__PURE__ */ jsx3(GlobalStyle, {}),
     children,
     process.env["NODE_ENV"] !== "test" && /* @__PURE__ */ jsx3(ToastProvider, {})
-  ] }) });
+  ] }) }) });
 };
 
 // src/helpers/copyToClipboard/copyToClipboard.ts
@@ -1941,10 +1947,10 @@ var mq = {
 };
 
 // src/hooks/useAriaLive/useAriaLive.tsx
-import { useContext } from "react";
+import { useContext as useContext2 } from "react";
 import { isNil as isNil4 } from "@wistia/type-guards";
 var useAriaLive = () => {
-  const context = useContext(AriaLiveContext);
+  const context = useContext2(AriaLiveContext);
   if (isNil4(context)) {
     throw new Error("useAriaLive must be used within an AriaLiveProvider");
   }
@@ -6859,31 +6865,29 @@ 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 to = href;
+  let modifiedHref = href;
   if (type === "phone") {
-    to = `tel:${href}`;
+    modifiedHref = `tel:${href}`;
   }
   if (type === "email") {
-    to = `mailto:${href}`;
+    modifiedHref = `mailto:${href}`;
   }
-  return to;
+  return modifiedHref;
 };
 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: pointer;
+  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: var(--wui-typography-family-default);
   color: var(--wui-color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
@@ -6893,8 +6897,8 @@ var StyledLink = styled4.a`
 
   && {
     svg {
-      width: var(--link-icon-size);
-      height: var(--link-icon-size);
+      width: 14px;
+      height: 14px;
     }
   }
 `;
@@ -6939,6 +6943,7 @@ var Link = forwardRef(
     };
     const commonProps = {
       $colorScheme: colorScheme,
+      $disabled: disabled,
       $underline: underline,
       onClick: handleClick
     };
@@ -6957,33 +6962,27 @@ 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
+        ...externalLinkProps,
+        ...routerSpecificProps
       };
-      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 /* @__PURE__ */ jsxs7(StyledLink, { ...combinedProps, children: [
+        leftIcon ?? null,
+        children,
+        rightIcon ?? null
+      ] });
     }
     return null;
   }
@@ -9352,7 +9351,7 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef12, useRef as useRef6, useMemo as useMemo4, createContext as createContext2, useState as useState7, useId as useId2 } from "react";
+import { forwardRef as forwardRef12, useRef as useRef6, useMemo as useMemo4, createContext as createContext3, useState as useState7, useId as useId2 } from "react";
 import styled33 from "styled-components";
 import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -9396,7 +9395,7 @@ var StyledForm = styled33.form`
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = createContext2({
+var FormContext = createContext3({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9526,7 +9525,7 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext2, useRef as useRef7 } from "react";
+import { useContext as useContext3, 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 }) => {
@@ -9534,7 +9533,7 @@ var ErrorItem = ({ name, error, formId }) => {
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef7(null);
-  const { formId, errors, hasSubmitted } = useContext2(FormContext);
+  const { formId, errors, hasSubmitted } = useContext3(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
@@ -9564,7 +9563,7 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
+import { Children as Children5, cloneElement as cloneElement5, useContext as useContext4 } from "react";
 import styled36 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil17, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
@@ -9629,7 +9628,7 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext3, useMemo as useMemo5 } from "react";
+import { createContext as createContext4, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
 import styled35 from "styled-components";
@@ -9667,7 +9666,7 @@ FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
 import { jsx as jsx226 } from "react/jsx-runtime";
-var CheckboxGroupContext = createContext3(null);
+var CheckboxGroupContext = createContext4(null);
 var CheckboxGroup = ({
   children,
   name,
@@ -9760,8 +9759,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = useContext3(FormContext);
-  const checkboxGroup = useContext3(CheckboxGroupContext);
+  const formState = useContext4(FormContext);
+  const checkboxGroup = useContext4(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -9826,9 +9825,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext4, useMemo as useMemo6 } from "react";
+import { createContext as createContext5, useMemo as useMemo6 } from "react";
 import { jsx as jsx228 } from "react/jsx-runtime";
-var RadioGroupContext = createContext4(null);
+var RadioGroupContext = createContext5(null);
 var RadioGroup = ({
   children,
   name,
@@ -9960,9 +9959,9 @@ import { isNotNil as isNotNil18, isNotUndefined as isNotUndefined10 } from "@wis
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
-import { createContext as createContext5, useContext as useContext4 } from "react";
-var MenuContext = createContext5({ compact: false });
-var useMenuContext = () => useContext4(MenuContext);
+import { createContext as createContext6, useContext as useContext5 } from "react";
+var MenuContext = createContext6({ compact: false });
+var useMenuContext = () => useContext5(MenuContext);
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx231, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -11110,9 +11109,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 createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState11 } from "react";
+import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState11 } from "react";
 import { jsx as jsx248 } from "react/jsx-runtime";
-var SelectedItemStyleContext = createContext6(null);
+var SelectedItemStyleContext = createContext7(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
@@ -11137,7 +11136,7 @@ var SelectedItemStyleProvider = ({
   return /* @__PURE__ */ jsx248(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
-  const context = useContext5(SelectedItemStyleContext);
+  const context = useContext6(SelectedItemStyleContext);
   if (context === null) {
     throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
   }
@@ -11148,11 +11147,11 @@ var useSelectedItemStyle = () => {
 import styled52 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
-import { createContext as createContext7, useContext as useContext6 } from "react";
-var SegmentedControlValueContext = createContext7(null);
+import { createContext as createContext8, useContext as useContext7 } from "react";
+var SegmentedControlValueContext = createContext8(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = useContext6(SegmentedControlValueContext);
+  const context = useContext7(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -11764,8 +11763,8 @@ var Table = ({
 import styled60 from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
-import { createContext as createContext8 } from "react";
-var TableSectionContext = createContext8(null);
+import { createContext as createContext9 } from "react";
+var TableSectionContext = createContext9(null);
 
 // src/components/Table/TableBody.tsx
 import { jsx as jsx256 } from "react/jsx-runtime";
@@ -11775,7 +11774,7 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 import styled61, { css as css36 } from "styled-components";
 import { jsx as jsx257 } from "react/jsx-runtime";
 var sharedStyles = css36`
@@ -11796,7 +11795,7 @@ var StyledTd = styled61.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = useContext7(TableSectionContext);
+  const section = useContext8(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ jsx257(StyledTh, { ...props, children });
   }
@@ -11889,11 +11888,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 createContext9, useContext as useContext8 } from "react";
-var TabsValueContext = createContext9(null);
+import { createContext as createContext10, useContext as useContext9 } from "react";
+var TabsValueContext = createContext10(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = useContext8(TabsValueContext);
+  const context = useContext9(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }