@wistia/ui 0.6.2 → 0.6.3-beta.3b2445dd.939209b

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.2
+ * @license @wistia/ui v0.6.3-beta.3b2445dd.939209b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -108,7 +108,9 @@ __export(index_exports, {
   useActiveMq: () => useActiveMq,
   useAriaLive: () => useAriaLive,
   useBoolean: () => useBoolean,
+  useFilePicker: () => import_use_file_picker.useFilePicker,
   useFormState: () => useFormState,
+  useImperativeFilePicker: () => import_use_file_picker.useImperativeFilePicker,
   useKey: () => useKey,
   useMq: () => useMq,
   useToast: () => useToast,
@@ -2005,82 +2007,29 @@ var mq = {
   xlAndDown
 };
 
-// src/hooks/useBoolean/useBoolean.ts
+// src/hooks/useAriaLive/useAriaLive.tsx
 var import_react3 = require("react");
-var useBoolean = (initialValue = false) => {
-  const [value, setValue] = (0, import_react3.useState)(initialValue);
-  const toggle = (0, import_react3.useCallback)(() => setValue((val) => !val), []);
-  const setTrue = (0, import_react3.useCallback)(() => setValue(true), []);
-  const setFalse = (0, import_react3.useCallback)(() => setValue(false), []);
-  return [value, toggle, setTrue, setFalse, setValue];
-};
-
-// src/hooks/useMq/useMq.ts
 var import_type_guards5 = require("@wistia/type-guards");
+var useAriaLive = () => {
+  const context = (0, import_react3.useContext)(AriaLiveContext);
+  if ((0, import_type_guards5.isNil)(context)) {
+    throw new Error("useAriaLive must be used within an AriaLiveProvider");
+  }
+  return context;
+};
 
-// src/hooks/useWindowSize/useWindowSize.ts
+// src/hooks/useBoolean/useBoolean.ts
 var import_react4 = require("react");
-var import_throttle_debounce = require("throttle-debounce");
-
-// src/private/helpers/isClient/isClient.ts
-var isClient = () => typeof window !== "undefined" && typeof document !== "undefined";
-
-// src/hooks/useWindowSize/useWindowSize.ts
-var useWindowSize = (interval = 0) => {
-  const [dimensions, setDimensions] = (0, import_react4.useState)({
-    width: isClient() ? window.innerWidth : 0,
-    height: isClient() ? window.innerHeight : 0
-  });
-  (0, import_react4.useLayoutEffect)(() => {
-    const handleResize = (0, import_throttle_debounce.debounce)(
-      interval,
-      () => setDimensions({
-        width: window.innerWidth,
-        height: window.innerHeight
-      })
-    );
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [interval]);
-  return dimensions;
+var useBoolean = (initialValue = false) => {
+  const [value, setValue] = (0, import_react4.useState)(initialValue);
+  const toggle = (0, import_react4.useCallback)(() => setValue((val) => !val), []);
+  const setTrue = (0, import_react4.useCallback)(() => setValue(true), []);
+  const setFalse = (0, import_react4.useCallback)(() => setValue(false), []);
+  return [value, toggle, setTrue, setFalse, setValue];
 };
 
-// src/hooks/useMq/useMq.ts
-var REM_SIZE = 16;
-var useMq = () => {
-  const { width } = useWindowSize();
-  const viewportWidth = width / REM_SIZE;
-  const isXsAndUp = true;
-  const isSmAndUp = viewportWidth >= Number.parseFloat(breakpoints.sm);
-  const isMdAndUp = viewportWidth >= Number.parseFloat(breakpoints.md);
-  const isLgAndUp = viewportWidth >= Number.parseFloat(breakpoints.lg);
-  const isXlAndUp = viewportWidth >= Number.parseFloat(breakpoints.xl);
-  const isXsAndDown = viewportWidth < Number.parseFloat(breakpoints.sm);
-  const isSmAndDown = viewportWidth < Number.parseFloat(breakpoints.md);
-  const isMdAndDown = viewportWidth < Number.parseFloat(breakpoints.lg);
-  const isLgAndDown = viewportWidth < Number.parseFloat(breakpoints.xl);
-  const isXlAndDown = true;
-  return {
-    isXlAndUp,
-    isLgAndUp,
-    isMdAndUp,
-    isSmAndUp,
-    isXsAndUp,
-    isXsAndDown,
-    isSmAndDown,
-    isMdAndDown,
-    isLgAndDown,
-    isXlAndDown
-  };
-};
-var useActiveMq = () => {
-  const mq2 = useMq();
-  const keys = Object.keys(mq2);
-  return keys.filter((key) => {
-    const value = mq2[key];
-    return (0, import_type_guards5.isBoolean)(value) && value;
-  });
-};
+// src/hooks/useFilePicker/index.ts
+var import_use_file_picker = require("use-file-picker");
 
 // src/hooks/useKey/useKey.ts
 var import_react6 = require("react");
@@ -2154,15 +2103,71 @@ var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOpti
   useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
 };
 
-// src/hooks/useAriaLive/useAriaLive.tsx
-var import_react7 = require("react");
+// src/hooks/useMq/useMq.ts
 var import_type_guards7 = require("@wistia/type-guards");
-var useAriaLive = () => {
-  const context = (0, import_react7.useContext)(AriaLiveContext);
-  if ((0, import_type_guards7.isNil)(context)) {
-    throw new Error("useAriaLive must be used within an AriaLiveProvider");
-  }
-  return context;
+
+// src/hooks/useWindowSize/useWindowSize.ts
+var import_react7 = require("react");
+var import_throttle_debounce = require("throttle-debounce");
+
+// src/private/helpers/isClient/isClient.ts
+var isClient = () => typeof window !== "undefined" && typeof document !== "undefined";
+
+// src/hooks/useWindowSize/useWindowSize.ts
+var useWindowSize = (interval = 0) => {
+  const [dimensions, setDimensions] = (0, import_react7.useState)({
+    width: isClient() ? window.innerWidth : 0,
+    height: isClient() ? window.innerHeight : 0
+  });
+  (0, import_react7.useLayoutEffect)(() => {
+    const handleResize = (0, import_throttle_debounce.debounce)(
+      interval,
+      () => setDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight
+      })
+    );
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [interval]);
+  return dimensions;
+};
+
+// src/hooks/useMq/useMq.ts
+var REM_SIZE = 16;
+var useMq = () => {
+  const { width } = useWindowSize();
+  const viewportWidth = width / REM_SIZE;
+  const isXsAndUp = true;
+  const isSmAndUp = viewportWidth >= Number.parseFloat(breakpoints.sm);
+  const isMdAndUp = viewportWidth >= Number.parseFloat(breakpoints.md);
+  const isLgAndUp = viewportWidth >= Number.parseFloat(breakpoints.lg);
+  const isXlAndUp = viewportWidth >= Number.parseFloat(breakpoints.xl);
+  const isXsAndDown = viewportWidth < Number.parseFloat(breakpoints.sm);
+  const isSmAndDown = viewportWidth < Number.parseFloat(breakpoints.md);
+  const isMdAndDown = viewportWidth < Number.parseFloat(breakpoints.lg);
+  const isLgAndDown = viewportWidth < Number.parseFloat(breakpoints.xl);
+  const isXlAndDown = true;
+  return {
+    isXlAndUp,
+    isLgAndUp,
+    isMdAndUp,
+    isSmAndUp,
+    isXsAndUp,
+    isXsAndDown,
+    isSmAndDown,
+    isMdAndDown,
+    isLgAndDown,
+    isXlAndDown
+  };
+};
+var useActiveMq = () => {
+  const mq2 = useMq();
+  const keys = Object.keys(mq2);
+  return keys.filter((key) => {
+    const value = mq2[key];
+    return (0, import_type_guards7.isBoolean)(value) && value;
+  });
 };
 
 // src/hooks/useToast/useToast.tsx
@@ -8146,9 +8151,18 @@ var FormContext = (0, import_react25.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
-  formId: ""
+  formId: "",
+  labelPosition: "block"
 });
-var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
+var FormComponent = ({
+  children,
+  action,
+  values = {},
+  labelPosition = "block",
+  validate,
+  fullWidth = false,
+  ...props
+}, forwardedRef) => {
   const [errors, setErrors] = (0, import_react25.useState)({});
   const [hasSubmitted, setHasSubmitted] = (0, import_react25.useState)(false);
   const innerRef = (0, import_react25.useRef)();
@@ -8200,19 +8214,20 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       values,
       errors,
       hasSubmitted,
-      formId: id
+      formId: id,
+      labelPosition
     };
-  }, [values, errors, id, hasSubmitted]);
+  }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
     /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
       Stack,
       {
-        gap: "space-05",
         ...props,
         ref,
         $fullWidth: fullWidth,
         as: StyledForm,
+        gap: "space-05",
         id,
         onBlur: handleBlur,
         onReset: handleReset,
@@ -8266,7 +8281,7 @@ var import_react27 = require("react");
 var import_type_guards27 = require("@wistia/type-guards");
 var import_jsx_runtime190 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = (0, import_react27.useRef)(null);
@@ -8365,11 +8380,27 @@ CheckboxGroup.displayName = "CheckboxGroup";
 var import_jsx_runtime193 = require("react/jsx-runtime");
 var StyledFormField = import_styled_components48.default.div`
   --form-field-spacing: var(--wui-space-01);
+  --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--form-field-spacing);
+  justify-content: flex-start;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+
+  &[data-label-position='inline'] {
+    gap: var(--form-field-spacing-inline);
+    grid-template-columns: minmax(auto, 1fr) 1fr;
+    grid-template-rows: 1fr auto;
+  }
+
+  &[data-label-position='block'] {
+    gap: var(--form-field-spacing);
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
 `;
 var StyledErrorList = import_styled_components48.default.ul`
   margin: 0;
@@ -8409,18 +8440,20 @@ var FormField = ({
   name,
   error,
   value,
+  labelPosition,
+  id,
   ...props
 }) => {
   const formState = (0, import_react30.useContext)(FormContext);
   const checkboxGroup = (0, import_react30.useContext)(CheckboxGroupContext);
-  const id = props.id ?? `${formState.formId}-${name}`;
-  const isInlineLabel = children.type === Checkbox;
+  const isIntegratedLabel = children.type === Checkbox;
+  const computedId = id ?? `${formState.formId}-${name}`;
   const computedError = error ?? formState.errors[name];
   const defaultValue = formState.values[name];
   let childProps = {
     name,
-    id,
-    label: isInlineLabel ? label : void 0,
+    id: computedId,
+    label: isIntegratedLabel ? label : void 0,
     ...props
   };
   if ((0, import_type_guards28.isUndefined)(value) && (0, import_type_guards28.isNotUndefined)(defaultValue)) {
@@ -8444,21 +8477,31 @@ var FormField = ({
       name: computedName,
       onChange: handleChange,
       "aria-invalid": (0, import_type_guards28.isNotNil)(error),
-      "aria-describedby": (0, import_type_guards28.isNotNil)(error) ? `${id}-error` : void 0
+      "aria-describedby": (0, import_type_guards28.isNotNil)(error) ? `${computedId}-error` : void 0
     };
   }
   import_react30.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Label, { htmlFor: id, children: label }),
-    (0, import_react30.cloneElement)(children, childProps),
-    (0, import_type_guards28.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
-      ErrorMessages,
-      {
-        errors: computedError,
-        id: `${id}-error`
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
+    StyledFormField,
+    {
+      ...props,
+      "data-label-position": labelPosition ?? formState.labelPosition,
+      children: [
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(Label, { htmlFor: computedId, children: label }),
+        (0, import_react30.cloneElement)(children, childProps),
+        (0, import_type_guards28.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_jsx_runtime193.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+            ErrorMessages,
+            {
+              errors: computedError,
+              id: `${computedId}-error`
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
 };
 FormField.displayName = "FormField";
 
@@ -10414,6 +10457,7 @@ var StyledContent3 = (0, import_styled_components71.default)(import_react_select
   border-radius: var(--wui-select-content-border-radius);
   padding: var(--wui-select-option-padding);
   min-width: 200px;
+  z-index: var(--wui-zindex-menu);
 `;
 var Select = (0, import_react55.forwardRef)(
   ({
@@ -10656,7 +10700,9 @@ Image.displayName = "Image";
   useActiveMq,
   useAriaLive,
   useBoolean,
+  useFilePicker,
   useFormState,
+  useImperativeFilePicker,
   useKey,
   useMq,
   useToast,