@wistia/ui 0.14.18 → 0.14.19-beta.cea11903.1bed8cb

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.18
+ * @license @wistia/ui v0.14.19-beta.cea11903.1bed8cb
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1629,7 +1629,7 @@ var AriaLiveProvider = ({ children, debug = false }) => {
     []
   );
   const value = (0, import_react2.useMemo)(() => ({ announce }), [announce]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AriaLiveContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AriaLiveContext, { value, children });
 };
 
 // src/providers/UIProvider/ToastProvider.tsx
@@ -1651,11 +1651,11 @@ var ToastProvider = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_so
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var UIProviderNestingContext = (0, import_react3.createContext)(false);
 var UIProvider = ({ children }) => {
-  const isNested = (0, import_react3.useContext)(UIProviderNestingContext);
+  const isNested = (0, import_react3.use)(UIProviderNestingContext);
   if (isNested) {
     console.warn("UIProvider is nested. Only one instance of UIProvider.");
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIProviderNestingContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AriaLiveProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_tooltip.Provider, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIProviderNestingContext, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AriaLiveProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_tooltip.Provider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlobalStyle, {}),
     children,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToastProvider, {})
@@ -2129,7 +2129,7 @@ var mq = {
 var import_react4 = require("react");
 var import_type_guards6 = require("@wistia/type-guards");
 var useAriaLive = () => {
-  const context = (0, import_react4.useContext)(AriaLiveContext);
+  const context = (0, import_react4.use)(AriaLiveContext);
   if ((0, import_type_guards6.isNil)(context)) {
     throw new Error("useAriaLive must be used within an AriaLiveProvider");
   }
@@ -2153,7 +2153,7 @@ var import_react7 = require("react");
 var import_react6 = require("react");
 var useTimedToggle = (initialValue) => {
   const [value, setValue] = (0, import_react6.useState)(false);
-  const timeoutRef = (0, import_react6.useRef)();
+  const timeoutRef = (0, import_react6.useRef)(void 0);
   const initialValueRef = (0, import_react6.useRef)(initialValue);
   const toggleValue = (timeout) => {
     clearTimeout(timeoutRef.current);
@@ -2519,8 +2519,8 @@ var isEventTargetSupported = (eventTarget) => (
   Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener)
 );
 var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
-  const savedEventHandler = (0, import_react12.useRef)();
-  const savedEventOptions = (0, import_react12.useRef)();
+  const savedEventHandler = (0, import_react12.useRef)(void 0);
+  const savedEventOptions = (0, import_react12.useRef)(void 0);
   (0, import_react12.useEffect)(() => {
     savedEventHandler.current = eventHandler;
   }, [eventHandler]);
@@ -2713,7 +2713,7 @@ var useOnClickOutside = (ref, handler, eventTypes = ["mousedown", "touchend"]) =
 // src/hooks/usePreviousValue/usePreviousValue.ts
 var import_react18 = require("react");
 var usePreviousValue = (value) => {
-  const ref = (0, import_react18.useRef)();
+  const ref = (0, import_react18.useRef)(void 0);
   (0, import_react18.useEffect)(() => {
     ref.current = value;
   });
@@ -9322,7 +9322,7 @@ var Form = (0, import_react36.forwardRef)(
     }, [labelPosition, values, errors, id, hasSubmitted]);
     return (
       // @ts-expect-error - generic context providers are a giant pain
-      /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormContext, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
         Stack,
         {
           ...props,
@@ -9346,7 +9346,7 @@ var Form = (0, import_react36.forwardRef)(
 var import_jsx_runtime220 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react37.createContext)(null);
 var useCheckboxGroup = () => {
-  return (0, import_react37.useContext)(CheckboxGroupContext);
+  return (0, import_react37.use)(CheckboxGroupContext);
 };
 var CheckboxGroup = ({
   children,
@@ -9355,7 +9355,7 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const formState = (0, import_react37.useContext)(FormContext);
+  const formState = (0, import_react37.use)(FormContext);
   const derivedValue = (0, import_type_guards30.isArray)(formState.values[name]) ? formState.values[name] : value;
   const context = (0, import_react37.useMemo)(() => {
     return {
@@ -9364,7 +9364,7 @@ var CheckboxGroup = ({
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(CheckboxGroupContext, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup_UI";
 
@@ -10224,7 +10224,7 @@ var ColorPickerProvider = ({
       valueAsHsv
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(ColorPickerContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(ColorPickerContext, { value: contextValue, children });
 };
 var useColorPickerState = () => {
   const context = (0, import_react41.useContext)(ColorPickerContext);
@@ -11300,7 +11300,7 @@ var Input = (0, import_react47.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react47.useRef)();
+    const internalRef = (0, import_react47.useRef)(null);
     const ref = (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
@@ -11323,7 +11323,7 @@ var Input = (0, import_react47.forwardRef)(
       if ((0, import_type_guards35.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
-      if (autoSelect && isValidRef(ref) && "current" in ref) {
+      if (autoSelect && type !== "multiline" && ref.current instanceof HTMLInputElement) {
         requestAnimationFrame(() => {
           ref.current?.select();
         });
@@ -12951,7 +12951,7 @@ var ErrorItem = ({ name, error, formId }) => {
 };
 var FormErrorSummary = ({ description }) => {
   const ref = (0, import_react58.useRef)(null);
-  const { formId, errors, hasSubmitted } = (0, import_react58.useContext)(FormContext);
+  const { formId, errors, hasSubmitted } = (0, import_react58.use)(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
@@ -13076,8 +13076,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = (0, import_react59.useContext)(FormContext);
-  const checkboxGroup = (0, import_react59.useContext)(CheckboxGroupContext);
+  const formState = (0, import_react59.use)(FormContext);
+  const checkboxGroup = (0, import_react59.use)(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -13146,7 +13146,7 @@ var import_react60 = require("react");
 var import_jsx_runtime263 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react60.createContext)(null);
 var useRadioGroup = () => {
-  return (0, import_react60.useContext)(RadioGroupContext);
+  return (0, import_react60.use)(RadioGroupContext);
 };
 var RadioGroup = ({
   children,
@@ -13155,7 +13155,7 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const formState = (0, import_react60.useContext)(FormContext);
+  const formState = (0, import_react60.use)(FormContext);
   const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
   const context = (0, import_react60.useMemo)(() => {
     return {
@@ -13164,7 +13164,7 @@ var RadioGroup = ({
       value: derivedValue
     };
   }, [name, derivedValue, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(RadioGroupContext, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup_UI";
 
@@ -13589,7 +13589,7 @@ var import_type_guards45 = require("@wistia/type-guards");
 // src/components/Menu/MenuContext.tsx
 var import_react63 = require("react");
 var MenuContext = (0, import_react63.createContext)({ compact: false });
-var useMenuContext = () => (0, import_react63.useContext)(MenuContext);
+var useMenuContext = () => (0, import_react63.use)(MenuContext);
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime269 = require("react/jsx-runtime");
@@ -13704,7 +13704,7 @@ var Menu = (0, import_react64.forwardRef)(
         onOpenChange: () => null
       };
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime269.jsx)(MenuContext, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(
       import_react_dropdown_menu.DropdownMenu,
       {
         modal: false,
@@ -15328,7 +15328,7 @@ var SelectedItemStyleProvider = ({
     }),
     [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime291.jsx)(SelectedItemStyleContext, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
   const context = (0, import_react76.useContext)(SelectedItemStyleContext);
@@ -15347,7 +15347,7 @@ var import_react77 = require("react");
 var SegmentedControlValueContext = (0, import_react77.createContext)(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = (0, import_react77.useContext)(SegmentedControlValueContext);
+  const context = (0, import_react77.use)(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -15946,7 +15946,7 @@ var TableSectionContext = (0, import_react82.createContext)(null);
 var import_jsx_runtime300 = require("react/jsx-runtime");
 var StyledTableBody = import_styled_components106.default.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(StyledTableBody, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(TableSectionContext, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
@@ -15971,7 +15971,7 @@ var StyledTd = import_styled_components107.default.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = (0, import_react83.useContext)(TableSectionContext);
+  const section = (0, import_react83.use)(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(StyledTh, { ...props, children });
   }
@@ -15983,7 +15983,7 @@ var import_styled_components108 = __toESM(require("styled-components"));
 var import_jsx_runtime302 = require("react/jsx-runtime");
 var StyledTableFoot = import_styled_components108.default.tfoot``;
 var TableFoot = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledTableFoot, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(TableSectionContext, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
@@ -15991,7 +15991,7 @@ var import_styled_components109 = __toESM(require("styled-components"));
 var import_jsx_runtime303 = require("react/jsx-runtime");
 var StyledThead = import_styled_components109.default.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(TableSectionContext, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
@@ -16012,7 +16012,7 @@ var import_react84 = require("react");
 var TabsValueContext = (0, import_react84.createContext)(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = (0, import_react84.useContext)(TabsValueContext);
+  const context = (0, import_react84.use)(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }