@wistia/ui 0.6.3 → 0.6.4-beta.64ad51b3.cce4025

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.3
+ * @license @wistia/ui v0.6.4-beta.64ad51b3.cce4025
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -61,6 +61,9 @@ __export(index_exports, {
   Divider: () => Divider,
   EditableHeading: () => EditableHeading,
   Ellipsis: () => Ellipsis,
+  FileAmountLimitValidator: () => import_validators.FileAmountLimitValidator,
+  FileSizeValidator: () => import_validators.FileSizeValidator,
+  FileTypeValidator: () => import_validators.FileTypeValidator,
   Form: () => Form,
   FormErrorSummary: () => FormErrorSummary,
   FormField: () => FormField,
@@ -69,6 +72,7 @@ __export(index_exports, {
   Icon: () => Icon,
   IconButton: () => IconButton,
   Image: () => Image,
+  ImageDimensionsValidator: () => import_validators.ImageDimensionsValidator,
   Input: () => Input,
   Label: () => Label,
   Link: () => Link,
@@ -79,6 +83,7 @@ __export(index_exports, {
   MenuLabel: () => MenuLabel,
   MenuRadioGroup: () => MenuRadioGroup,
   Modal: () => Modal,
+  PersistentFileAmountLimitValidator: () => import_validators.PersistentFileAmountLimitValidator,
   Popover: () => Popover,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
@@ -108,7 +113,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,
@@ -1300,7 +1307,7 @@ var typographyTokens = import_styled_components7.css`
   --wui-typography-heading-2-family: var(--wui-typography-family-brand);
   --wui-typography-heading-2-line-height: 38px;
   --wui-typography-heading-2-size: 32px;
-  --wui-typography-heading-2-weight: var(--wui-typography-weight-brand-bold);
+  --wui-typography-heading-2-weight: var(--wui-typography-weight-brand-black);
 
   /* Heading 3 */
   --wui-typography-heading-3-family: var(--wui-typography-family-brand);
@@ -2005,82 +2012,30 @@ 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");
+var import_validators = require("use-file-picker/validators");
 
 // src/hooks/useKey/useKey.ts
 var import_react6 = require("react");
@@ -2154,15 +2109,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
@@ -5967,13 +5978,17 @@ var Link = (0, import_react11.forwardRef)(
         } catch (error) {
           console.error(error);
         } finally {
-          if (routingCallback !== null) {
+          if ((0, import_type_guards12.isFunction)(props.onClick)) {
+            props.onClick(event);
+          } else if (routingCallback !== null) {
             routingCallback();
           } else if ((0, import_type_guards12.isNotNil)(to)) {
             window.location.assign(to);
           } else {
           }
         }
+      } else if ((0, import_type_guards12.isFunction)(props.onClick)) {
+        props.onClick(event);
       } else {
       }
     };
@@ -10648,6 +10663,9 @@ Image.displayName = "Image";
   Divider,
   EditableHeading,
   Ellipsis,
+  FileAmountLimitValidator,
+  FileSizeValidator,
+  FileTypeValidator,
   Form,
   FormErrorSummary,
   FormField,
@@ -10656,6 +10674,7 @@ Image.displayName = "Image";
   Icon,
   IconButton,
   Image,
+  ImageDimensionsValidator,
   Input,
   Label,
   Link,
@@ -10666,6 +10685,7 @@ Image.displayName = "Image";
   MenuLabel,
   MenuRadioGroup,
   Modal,
+  PersistentFileAmountLimitValidator,
   Popover,
   Radio,
   RadioGroup,
@@ -10695,7 +10715,9 @@ Image.displayName = "Image";
   useActiveMq,
   useAriaLive,
   useBoolean,
+  useFilePicker,
   useFormState,
+  useImperativeFilePicker,
   useKey,
   useMq,
   useToast,