@wistia/ui 0.6.4-beta.a8418872.2e6b4be → 0.6.6-beta.8a5013fa.ed1975e

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.4-beta.a8418872.2e6b4be
+ * @license @wistia/ui v0.6.6-beta.8a5013fa.ed1975e
  *
  * 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,
@@ -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
@@ -10344,6 +10355,21 @@ var WistiaLogoComponent = import_styled_components70.default.svg`
       ${({ $hoverColor }) => $hoverColor !== void 0 ? `fill: ${$hoverColor}` : null};
     }
   }
+
+  ${({ $opticallyCentered, $iconOnly }) => {
+  if ($opticallyCentered) {
+    if ($iconOnly) {
+      return import_styled_components70.css`
+          aspect-ratio: 1;
+          padding: 11.85% 3.12% 13.91%;
+        `;
+    }
+    return import_styled_components70.css`
+        aspect-ratio: 127 / 32;
+      `;
+  }
+  return null;
+}}
 `;
 var WistiaLogo = ({
   description = void 0,
@@ -10351,6 +10377,7 @@ var WistiaLogo = ({
   hoverColor = void 0,
   href = void 0,
   iconOnly = false,
+  opticallyCentered = false,
   title = "Wistia Logo",
   variant = "standard",
   ...otherProps
@@ -10378,7 +10405,10 @@ var WistiaLogo = ({
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
+      $iconOnly: iconOnly,
+      $opticallyCentered: opticallyCentered,
       height,
+      preserveAspectRatio: opticallyCentered ? "xMidYMin" : void 0,
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",
@@ -10652,6 +10682,9 @@ Image.displayName = "Image";
   Divider,
   EditableHeading,
   Ellipsis,
+  FileAmountLimitValidator,
+  FileSizeValidator,
+  FileTypeValidator,
   Form,
   FormErrorSummary,
   FormField,
@@ -10660,6 +10693,7 @@ Image.displayName = "Image";
   Icon,
   IconButton,
   Image,
+  ImageDimensionsValidator,
   Input,
   Label,
   Link,
@@ -10670,6 +10704,7 @@ Image.displayName = "Image";
   MenuLabel,
   MenuRadioGroup,
   Modal,
+  PersistentFileAmountLimitValidator,
   Popover,
   Radio,
   RadioGroup,
@@ -10699,7 +10734,9 @@ Image.displayName = "Image";
   useActiveMq,
   useAriaLive,
   useBoolean,
+  useFilePicker,
   useFormState,
+  useImperativeFilePicker,
   useKey,
   useMq,
   useToast,