@wistia/ui 0.18.10-beta.85f50c74.84b332c → 0.18.10-beta.8a03a833.0d3d223

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.10-beta.85f50c74.84b332c
+ * @license @wistia/ui v0.18.10-beta.8a03a833.0d3d223
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2988,26 +2988,11 @@ var useForceUpdate = () => {
 var import_react11 = require("react");
 var useIsHovered = () => {
   const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
-  const onFocus = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(true);
-  };
-  const onMouseEnter = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(true);
-  };
-  const onMouseMove = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(true);
-  };
-  const onBlur = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(false);
-  };
-  const onMouseLeave = (event) => {
-    if (event.target !== event.currentTarget) return;
-    setIsHovered(false);
-  };
+  const onFocus = () => setIsHovered(true);
+  const onMouseEnter = () => setIsHovered(true);
+  const onMouseMove = () => setIsHovered(true);
+  const onBlur = () => setIsHovered(false);
+  const onMouseLeave = () => setIsHovered(false);
   const hoverProps = {
     onFocus,
     onMouseEnter,
@@ -15146,20 +15131,8 @@ var import_react73 = require("react");
 var import_styled_components86 = require("styled-components");
 var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime288 = require("react/jsx-runtime");
-var inlineErrorStyles = import_styled_components86.css`
-  grid-template-rows: 1fr auto;
-  grid-template-areas: 'label-description input' '. error';
-`;
-var inlineBaseGridAreaStyles = import_styled_components86.css`
-  grid-template-rows: 1fr;
-  grid-template-areas: 'label-description input';
-`;
-var blockGridErrorStyles = import_styled_components86.css`
-  grid-template-rows: auto 1fr auto;
-  grid-template-areas: 'label-description' 'input' 'error';
-`;
 var StyledFormField = import_styled_components86.styled.div`
-  --form-field-spacing: var(--wui-space-02);
+  --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);
 
@@ -15173,28 +15146,21 @@ var StyledFormField = import_styled_components86.styled.div`
   &[data-label-position='inline-compact'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: auto 1fr;
-    ${inlineBaseGridAreaStyles}
-    ${({ $hasError }) => $hasError && inlineErrorStyles}
+    grid-template-rows: 1fr auto;
   }
 
   &[data-label-position='inline'] {
     gap: var(--form-field-spacing-inline);
     grid-template-columns: minmax(auto, 1fr) 1fr;
-    ${inlineBaseGridAreaStyles}
-    ${({ $hasError }) => $hasError && inlineErrorStyles}
+    grid-template-rows: 1fr auto;
   }
 
   &[data-label-position='block'] {
     gap: var(--form-field-spacing);
     grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr;
-    grid-template-areas: 'label-description' 'input';
-    ${({ $hasError }) => $hasError && blockGridErrorStyles}
+    grid-template-rows: 1fr;
   }
 `;
-var ErrorText = (0, import_styled_components86.styled)(Text)`
-  grid-area: error;
-`;
 var StyledErrorList = import_styled_components86.styled.ul`
   margin: 0;
   padding: 0;
@@ -15202,19 +15168,17 @@ var StyledErrorList = import_styled_components86.styled.ul`
   display: flex;
   flex-direction: column;
   gap: var(--wui-space-01);
-  grid-area: error;
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isErrorArray = (0, import_type_guards49.isArray)(errors);
   const isMultipleErrors = isErrorArray && errors.length > 1;
   if (!isErrorArray) {
     return /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
         prominence: "secondary",
-        style: { gridArea: "error" },
         variant: "label4",
         children: errors
       },
@@ -15223,12 +15187,11 @@ var ErrorMessages = ({ errors, id }) => {
   }
   if (!isMultipleErrors) {
     return /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-      ErrorText,
+      Text,
       {
         colorScheme: "error",
         id,
         prominence: "secondary",
-        style: { gridArea: "error" },
         variant: "label4",
         children: errors[0]
       },
@@ -15269,16 +15232,12 @@ var FormField = ({
   const descriptionId = `${computedId}-description`;
   const errorId = `${computedId}-error`;
   const ariaDescribedby = [descriptionId, errorId].filter(Boolean).join(" ") || void 0;
-  const hasDescription = (0, import_type_guards49.isNotNil)(description);
-  const hasError = (0, import_type_guards49.isNotNil)(computedError);
-  const shouldRenderLabelDescriptionWrapper = !isIntegratedLabel || hasDescription;
   let childProps = {
     name,
     id: computedId,
     label: isIntegratedLabel ? label : void 0,
     "aria-describedby": ariaDescribedby,
-    "aria-invalid": hasError,
-    style: { gridArea: "input" },
+    "aria-invalid": (0, import_type_guards49.isNotNil)(computedError),
     ...props
   };
   if ((0, import_type_guards49.isUndefined)(value) && (0, import_type_guards49.isNotUndefined)(defaultValue)) {
@@ -15308,38 +15267,28 @@ var FormField = ({
     StyledFormField,
     {
       ...props,
-      $hasError: hasError,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        shouldRenderLabelDescriptionWrapper ? /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(
-          Stack,
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+          Label,
           {
-            direction: "vertical",
-            gap: "space-01",
-            style: {
-              gridArea: "label-description"
-            },
-            children: [
-              !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-                Label,
-                {
-                  htmlFor: computedId,
-                  required,
-                  children: label
-                }
-              ),
-              hasDescription ? /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null
-            ]
+            htmlFor: computedId,
+            required,
+            children: label
           }
-        ) : null,
+        ),
+        (0, import_type_guards49.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react73.cloneElement)(children, childProps),
-        hasError ? /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
-          ErrorMessages,
-          {
-            errors: computedError,
-            id: errorId
-          }
-        ) : null
+        (0, import_type_guards49.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime288.jsxs)(import_jsx_runtime288.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime288.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
+            ErrorMessages,
+            {
+              errors: computedError,
+              id: errorId
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -17722,7 +17671,6 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_react93 = require("react");
 var import_styled_components116 = require("styled-components");
 
 // src/components/Table/TableSectionContext.ts
@@ -17737,7 +17685,7 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-var import_react94 = require("react");
+var import_react93 = require("react");
 var import_styled_components117 = require("styled-components");
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var sharedStyles = import_styled_components117.css`
@@ -17758,7 +17706,7 @@ var StyledTd = import_styled_components117.styled.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = (0, import_react94.useContext)(TableSectionContext);
+  const section = (0, import_react93.useContext)(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(StyledTh, { ...props, children });
   }
@@ -17766,7 +17714,6 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFoot.tsx
-var import_react95 = require("react");
 var import_styled_components118 = require("styled-components");
 var import_jsx_runtime322 = require("react/jsx-runtime");
 var StyledTableFoot = import_styled_components118.styled.tfoot``;
@@ -17775,7 +17722,6 @@ var TableFoot = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableHead.tsx
-var import_react96 = require("react");
 var import_styled_components119 = require("styled-components");
 var import_jsx_runtime323 = require("react/jsx-runtime");
 var StyledThead = import_styled_components119.styled.thead``;
@@ -17793,15 +17739,15 @@ var TableRow = ({ children, ...props }) => {
 
 // src/components/Tabs/Tabs.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
-var import_react98 = require("react");
+var import_react95 = require("react");
 var import_type_guards68 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
-var import_react97 = require("react");
-var TabsValueContext = (0, import_react97.createContext)(null);
+var import_react94 = require("react");
+var TabsValueContext = (0, import_react94.createContext)(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = (0, import_react97.useContext)(TabsValueContext);
+  const context = (0, import_react94.useContext)(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }
@@ -17817,8 +17763,8 @@ var Tabs = ({
   defaultValue,
   ...props
 }) => {
-  const [value, setValue] = (0, import_react98.useState)(valueProp ?? defaultValue);
-  const onValueChange = (0, import_react98.useCallback)(
+  const [value, setValue] = (0, import_react95.useState)(valueProp ?? defaultValue);
+  const onValueChange = (0, import_react95.useCallback)(
     (newValue) => {
       setValue(newValue);
       if (onValueChangeProp) {
@@ -17902,7 +17848,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
 TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
-var import_react99 = require("react");
+var import_react96 = require("react");
 var import_type_guards70 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
@@ -17918,13 +17864,13 @@ var StyledRadixTabsTrigger = (0, import_styled_components123.styled)(import_reac
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_jsx_runtime329 = require("react/jsx-runtime");
-var TabsTrigger = (0, import_react99.forwardRef)(
+var TabsTrigger = (0, import_react96.forwardRef)(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
-    const buttonRef = (0, import_react99.useRef)(null);
+    const buttonRef = (0, import_react96.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    (0, import_react99.useEffect)(() => {
+    (0, import_react96.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -18006,7 +17952,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
 ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
-var import_react100 = require("react");
+var import_react97 = require("react");
 var import_styled_components127 = require("styled-components");
 var import_type_guards74 = require("@wistia/type-guards");
 
@@ -18388,7 +18334,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
 var hasValidThumbnailUrl = (thumbnailUrl) => {
   return (0, import_type_guards74.isNotNil)(thumbnailUrl) && (0, import_type_guards74.isNonEmptyString)(thumbnailUrl);
 };
-var Thumbnail = (0, import_react100.forwardRef)(
+var Thumbnail = (0, import_react97.forwardRef)(
   ({
     gradientBackground = "defaultMidOne",
     thumbnailImageType = "wide",
@@ -18400,17 +18346,17 @@ var Thumbnail = (0, import_react100.forwardRef)(
     aspectRatio = "wide",
     ...props
   }, ref) => {
-    const [percent, setPercent] = (0, import_react100.useState)(0);
-    const [isMouseOver, setIsMouseOver] = (0, import_react100.useState)(false);
-    const [isStoryboardReady, setIsStoryboardReady] = (0, import_react100.useState)(false);
-    const storyboardElementRef = (0, import_react100.useRef)(null);
-    const [cursorPosition, setCursorPosition] = (0, import_react100.useState)(null);
-    const backgroundUrl = (0, import_react100.useMemo)(
+    const [percent, setPercent] = (0, import_react97.useState)(0);
+    const [isMouseOver, setIsMouseOver] = (0, import_react97.useState)(false);
+    const [isStoryboardReady, setIsStoryboardReady] = (0, import_react97.useState)(false);
+    const storyboardElementRef = (0, import_react97.useRef)(null);
+    const [cursorPosition, setCursorPosition] = (0, import_react97.useState)(null);
+    const backgroundUrl = (0, import_react97.useMemo)(
       () => thumbnailImageType === "square" && hasValidThumbnailUrl(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
     const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
-    const trackStoryboardLoadStatus = (0, import_react100.useCallback)(() => {
+    const trackStoryboardLoadStatus = (0, import_react97.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
       }
@@ -18420,7 +18366,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
       storyboardElementRef.current = asset;
       return storyboardElementRef.current;
     }, [storyboard]);
-    const handleMouseMove = (0, import_react100.useCallback)(
+    const handleMouseMove = (0, import_react97.useCallback)(
       (mouseEvent) => {
         if (!isScrubbable) return;
         const elem = mouseEvent.currentTarget;
@@ -18433,12 +18379,12 @@ var Thumbnail = (0, import_react100.forwardRef)(
       },
       [isScrubbable, trackStoryboardLoadStatus]
     );
-    const handleMouseOut = (0, import_react100.useCallback)(() => {
+    const handleMouseOut = (0, import_react97.useCallback)(() => {
       if (!isScrubbable) return;
       setIsMouseOver(false);
       setCursorPosition(null);
     }, [isScrubbable]);
-    const shouldRenderStoryboard = (0, import_react100.useMemo)(() => {
+    const shouldRenderStoryboard = (0, import_react97.useMemo)(() => {
       if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
         return false;
       }
@@ -18500,7 +18446,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
 Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-var import_react101 = __toESM(require("react"));
+var import_react98 = require("react");
 var import_styled_components128 = require("styled-components");
 var import_type_guards75 = require("@wistia/type-guards");
 var import_jsx_runtime333 = (
@@ -18562,10 +18508,10 @@ var ThumbnailCollage = ({
   gradientBackground = "defaultMidOne",
   ...props
 }) => {
-  const thumbnailArray = import_react101.default.Children.toArray(children);
+  const thumbnailArray = import_react98.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
   const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
-    return import_react101.default.cloneElement(child, {
+    return (0, import_react98.cloneElement)(child, {
       ...child.props,
       children: void 0
     });
@@ -18718,7 +18664,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 // src/components/SplitButton/SplitButton.tsx
 var import_styled_components130 = require("styled-components");
 var import_type_guards77 = require("@wistia/type-guards");
-var import_react102 = require("react");
+var import_react99 = require("react");
 var import_jsx_runtime335 = require("react/jsx-runtime");
 var StyledSplitButton = import_styled_components130.styled.span`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -18783,7 +18729,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    (0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    (0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react99.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";