@wistia/ui 0.6.16 → 0.6.17-beta.6202168.f73ca65

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.16
+ * @license @wistia/ui v0.6.17-beta.6202168.f73ca65
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7224,6 +7224,8 @@ var StyledBoxComponent = import_styled_components26.default.div`
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
+  height: ${({ $height }) => $height ?? null};
+  width: ${({ $width }) => $width ?? null};
 
   /* Box children styles */
   flex-grow: ${({ $grow }) => (0, import_type_guards17.isNotNil)($grow) ? $grow : null};
@@ -7264,14 +7266,36 @@ var BoxComponent = (0, import_react16.forwardRef)(
     grow,
     hasBoxParent = false,
     // eslint-disable-line @typescript-eslint/no-unused-vars
+    height,
     inline = false,
     justifyContent = "flex-start",
     order,
     renderAs,
     shrink,
+    width,
     wrapItems = false,
     ...otherProps
   }, ref) => {
+    if ((0, import_type_guards17.isNotUndefined)(height)) {
+      if ((0, import_type_guards17.isTruthy)(fill) || fill === "vertical") {
+        throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
+      }
+      if ((0, import_type_guards17.isTruthy)(fillViewport) || fillViewport === "vertical") {
+        throw new Error(
+          'Cannot use height prop with fillViewport="vertical" or fillViewport={true}'
+        );
+      }
+    }
+    if ((0, import_type_guards17.isNotUndefined)(width)) {
+      if ((0, import_type_guards17.isTruthy)(fill) || fill === "horizontal") {
+        throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
+      }
+      if ((0, import_type_guards17.isTruthy)(fillViewport) || fillViewport === "horizontal") {
+        throw new Error(
+          'Cannot use width prop with fillViewport="horizontal" or fillViewport={true}'
+        );
+      }
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
       StyledBoxComponent,
       {
@@ -7285,10 +7309,12 @@ var BoxComponent = (0, import_react16.forwardRef)(
         $flexDirection: direction,
         $gap: gap,
         $grow: grow,
+        $height: height,
         $inline: inline,
         $justifyContent: justifyContent,
         $order: order,
         $shrink: shrink,
+        $width: width,
         $wrapItems: wrapItems,
         as: renderAs ?? DEFAULT_ELEMENT,
         ...otherProps,
@@ -7458,6 +7484,8 @@ var StyledCard = (0, import_styled_components30.default)(Box)`
   outline-offset: -2px;
   border-radius: var(--wui-border-radius-02);
   display: flex;
+  height: ${({ $height }) => $height};
+  width: ${({ $width }) => $width};
 `;
 var prominenceMap = {
   default: {
@@ -7481,6 +7509,8 @@ var Card = ({
   colorScheme = "inherit",
   prominence = "secondary",
   border = false,
+  height,
+  width,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
   StyledCard,
@@ -7488,7 +7518,9 @@ var Card = ({
     $backgroundColor: prominenceMap[prominence].backgroundColor,
     $borderColor: border ? prominenceMap[prominence].borderColor : "transparent",
     $colorScheme: colorScheme,
+    $height: height,
     $paddingSize: paddingSize,
+    $width: width,
     direction,
     gap,
     ...props,
@@ -9863,12 +9895,11 @@ var Header = import_styled_components58.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
-  margin-bottom: var(--wui-space-03);
-  justify-content: space-between;
+  justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
 
   /* DialogTitle creates an h2 element which inherits some margin */
   h2 {
-    margin-top: 0;
+    margin: 0 0 var(--wui-space-03);
   }
 `;
 var Title = (0, import_styled_components58.default)(import_react_dialog2.Title)`
@@ -9883,7 +9914,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Title, { children: title });
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(Header, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
     hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ModalCloseButton, {})
   ] });
@@ -10840,14 +10871,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Table/Table.tsx
-var import_react52 = require("react");
 var import_styled_components71 = __toESM(require("styled-components"));
-
-// src/components/Table/TableContext.tsx
-var import_react51 = __toESM(require("react"));
-var TableContext = import_react51.default.createContext({ divided: false });
-
-// src/components/Table/Table.tsx
 var import_jsx_runtime248 = require("react/jsx-runtime");
 var StyledTable = import_styled_components71.default.table`
   width: 100%;
@@ -10858,6 +10882,12 @@ var StyledTable = import_styled_components71.default.table`
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
+
+  ${({ $divided }) => $divided && import_styled_components71.css`
+      tr {
+        border-bottom: 1px solid var(--wui-color-border);
+      }
+    `}
 `;
 var Table = ({
   children,
@@ -10865,23 +10895,23 @@ var Table = ({
   divided = false,
   ...props
 }) => {
-  const contextValue = (0, import_react52.useMemo)(() => ({ divided }), [divided]);
-  return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
     StyledTable,
     {
+      $divided: divided,
       $striped: striped,
       ...props,
       children
     }
-  ) });
+  );
 };
 
 // src/components/Table/TableBody.tsx
 var import_styled_components72 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
-var import_react53 = require("react");
-var TableSectionContext = (0, import_react53.createContext)(null);
+var import_react51 = require("react");
+var TableSectionContext = (0, import_react51.createContext)(null);
 
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime249 = require("react/jsx-runtime");
@@ -10891,7 +10921,7 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-var import_react54 = require("react");
+var import_react52 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
 var import_jsx_runtime250 = require("react/jsx-runtime");
 var sharedStyles = import_styled_components73.css`
@@ -10912,7 +10942,7 @@ var StyledTd = import_styled_components73.default.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = (0, import_react54.useContext)(TableSectionContext);
+  const section = (0, import_react52.useContext)(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTh, { ...props, children });
   }
@@ -10936,26 +10966,15 @@ var TableHead = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableRow.tsx
-var import_react55 = require("react");
 var import_styled_components76 = __toESM(require("styled-components"));
 var import_jsx_runtime253 = require("react/jsx-runtime");
-var StyledTr = import_styled_components76.default.tr`
-  ${({ $divided }) => $divided && `border-bottom: 1px solid var(--wui-color-border);`}
-`;
+var StyledTr = import_styled_components76.default.tr``;
 var TableRow = ({ children, ...props }) => {
-  const { divided = false } = (0, import_react55.useContext)(TableContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
-    StyledTr,
-    {
-      $divided: divided,
-      ...props,
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledTr, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_react60 = require("react");
+var import_react57 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
 var import_type_guards42 = require("@wistia/type-guards");
 var import_styled_components81 = __toESM(require("styled-components"));
@@ -11010,17 +11029,17 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-var import_react57 = require("react");
+var import_react54 = require("react");
 var import_styled_components79 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
 var import_type_guards41 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
-var import_react56 = require("react");
-var TabsValueContext = (0, import_react56.createContext)(null);
+var import_react53 = require("react");
+var TabsValueContext = (0, import_react53.createContext)(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = (0, import_react56.useContext)(TabsValueContext);
+  const context = (0, import_react53.useContext)(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }
@@ -11036,13 +11055,13 @@ var StyledTabItem = (0, import_styled_components79.default)(import_react_tabs3.T
     outline: none;
   }
 `;
-var TabItem = (0, import_react57.forwardRef)(
+var TabItem = (0, import_react54.forwardRef)(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
-    const buttonRef = (0, import_react57.useRef)(null);
+    const buttonRef = (0, import_react54.useRef)(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    (0, import_react57.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11086,16 +11105,16 @@ var TabItem = (0, import_react57.forwardRef)(
 TabItem.displayName = "TabItem";
 
 // src/components/Tabs/extractTabItems.ts
-var import_react58 = require("react");
+var import_react55 = require("react");
 var extractTabItems = (children) => {
   const tabItems = [];
-  import_react58.Children.forEach(children, (child) => {
-    if (!(0, import_react58.isValidElement)(child)) {
+  import_react55.Children.forEach(children, (child) => {
+    if (!(0, import_react55.isValidElement)(child)) {
       return;
     }
     if (typeof child.type !== "string" && child.type.displayName === "Tab") {
       tabItems.push(child);
-    } else if (child.type === import_react58.Fragment) {
+    } else if (child.type === import_react55.Fragment) {
       const fragmentElement = child;
       tabItems.push(...extractTabItems(fragmentElement.props.children));
     } else if ((child.props.children ?? null) != null) {
@@ -11108,7 +11127,7 @@ var extractTabItems = (children) => {
 };
 
 // src/components/Tabs/SelectedItemIndicator.tsx
-var import_react59 = require("react");
+var import_react56 = require("react");
 var import_styled_components80 = __toESM(require("styled-components"));
 var import_jsx_runtime257 = require("react/jsx-runtime");
 var TabsSelectedItemIndicatorDiv = (0, import_styled_components80.default)(SelectedItemIndicatorDiv)`
@@ -11119,7 +11138,7 @@ var TabsSelectedItemIndicatorDiv = (0, import_styled_components80.default)(Selec
 var SelectedItemIndicator2 = () => {
   const { selectedItemMeasurements } = useSelectedItemMeasurements();
   const selectedValue = useTabsValue();
-  const selectedItemIndicatorStyle = (0, import_react59.useMemo)(
+  const selectedItemIndicatorStyle = (0, import_react56.useMemo)(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
       transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
@@ -11160,7 +11179,7 @@ var StyledTabsRoot = (0, import_styled_components81.default)(import_react_tabs4.
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
 `;
-var Tabs = (0, import_react60.forwardRef)(
+var Tabs = (0, import_react57.forwardRef)(
   ({
     children,
     fullWidth = true,
@@ -11172,7 +11191,7 @@ var Tabs = (0, import_react60.forwardRef)(
     ...otherProps
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react60.useState)(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = (0, import_react57.useState)(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
@@ -11258,15 +11277,15 @@ var Tabs = (0, import_react60.forwardRef)(
 Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
-var import_react61 = require("react");
+var import_react58 = require("react");
 var import_jsx_runtime259 = require("react/jsx-runtime");
-var Tab = (0, import_react61.forwardRef)(({ children }, ref) => {
+var Tab = (0, import_react58.forwardRef)(({ children }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
-var import_react62 = require("react");
+var import_react59 = require("react");
 var import_styled_components82 = __toESM(require("styled-components"));
 var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime260 = require("react/jsx-runtime");
@@ -11376,7 +11395,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = (0, import_react62.forwardRef)(
+var Tag = (0, import_react59.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = (0, import_type_guards43.isNotNil)(href) && (0, import_type_guards43.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(