@wistia/ui 0.6.17 → 0.6.18

package/dist/index.d.mts

@@ -582,11 +582,17 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      */
     direction?: DirectionType;
     /**
-     * Specifies whether the width and/or height should fill the container
+     * Specifies whether the width and/or height should fill the container.
+     * Cannot be used with height/width props when setting the corresponding dimension.
+     * For example, fill="vertical" or fill={true} cannot be used with the height prop,
+     * and fill="horizontal" or fill={true} cannot be used with the width prop.
      */
     fill?: FillType;
     /**
-     * Specifies whether the width and/or height should fill the viewport
+     * Specifies whether the width and/or height should fill the viewport.
+     * Cannot be used with height/width props when setting the corresponding dimension.
+     * For example, fillViewport="vertical" or fillViewport={true} cannot be used with the height prop,
+     * and fillViewport="horizontal" or fillViewport={true} cannot be used with the width prop.
      */
     fillViewport?: FillType;
     /**
@@ -604,6 +610,11 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * Used internally to track if a Box is a child of another Box component
      */
     hasBoxParent?: boolean;
+    /**
+     * Specifies the height of the box.
+     * *Note: Cannot be used with fill="vertical" or fillViewport="vertical"*
+     */
+    height?: string;
     /**
      * Make Layout behave like an inline element but still lay out its content according to flexbox model
      */
@@ -633,6 +644,11 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
      */
     wrapItems?: boolean;
+    /**
+     * Specifies the width of the box.
+     * *Note: Cannot be used with fill="horizontal" or fillViewport="horizontal"*
+     */
+    width?: string;
 };
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
@@ -727,6 +743,14 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * Specifies the gaps (gutters) between rows and columns
      */
     gap?: BoxProps['gap'];
+    /**
+     * Specifies the height of the card.
+     */
+    height?: string;
+    /**
+     * Specifies the width of the card.
+     */
+    width?: string;
     /**
      * @ignore
      * */
@@ -781,7 +805,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
  * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
  */
 declare const Card: {
-    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, ...props }: CardProps): JSX.Element;
+    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, height, width, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -582,11 +582,17 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      */
     direction?: DirectionType;
     /**
-     * Specifies whether the width and/or height should fill the container
+     * Specifies whether the width and/or height should fill the container.
+     * Cannot be used with height/width props when setting the corresponding dimension.
+     * For example, fill="vertical" or fill={true} cannot be used with the height prop,
+     * and fill="horizontal" or fill={true} cannot be used with the width prop.
      */
     fill?: FillType;
     /**
-     * Specifies whether the width and/or height should fill the viewport
+     * Specifies whether the width and/or height should fill the viewport.
+     * Cannot be used with height/width props when setting the corresponding dimension.
+     * For example, fillViewport="vertical" or fillViewport={true} cannot be used with the height prop,
+     * and fillViewport="horizontal" or fillViewport={true} cannot be used with the width prop.
      */
     fillViewport?: FillType;
     /**
@@ -604,6 +610,11 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * Used internally to track if a Box is a child of another Box component
      */
     hasBoxParent?: boolean;
+    /**
+     * Specifies the height of the box.
+     * *Note: Cannot be used with fill="vertical" or fillViewport="vertical"*
+     */
+    height?: string;
     /**
      * Make Layout behave like an inline element but still lay out its content according to flexbox model
      */
@@ -633,6 +644,11 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
      */
     wrapItems?: boolean;
+    /**
+     * Specifies the width of the box.
+     * *Note: Cannot be used with fill="horizontal" or fillViewport="horizontal"*
+     */
+    width?: string;
 };
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
@@ -727,6 +743,14 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
      * Specifies the gaps (gutters) between rows and columns
      */
     gap?: BoxProps['gap'];
+    /**
+     * Specifies the height of the card.
+     */
+    height?: string;
+    /**
+     * Specifies the width of the card.
+     */
+    width?: string;
     /**
      * @ignore
      * */
@@ -781,7 +805,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
  * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
  */
 declare const Card: {
-    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, ...props }: CardProps): JSX.Element;
+    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, height, width, ...props }: CardProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.17
+ * @license @wistia/ui v0.6.18
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7047,7 +7047,7 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
 import styled10 from "styled-components";
-import { isNotNil as isNotNil7, isNil as isNil9, isRecord as isRecord3 } from "@wistia/type-guards";
+import { isNotNil as isNotNil7, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined4, isTruthy } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -7107,6 +7107,8 @@ var StyledBoxComponent = styled10.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 }) => isNotNil7($grow) ? $grow : null};
@@ -7147,14 +7149,36 @@ var BoxComponent = forwardRef5(
     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 (isNotUndefined4(height)) {
+      if (isTruthy(fill) || fill === "vertical") {
+        throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
+      }
+      if (isTruthy(fillViewport) || fillViewport === "vertical") {
+        throw new Error(
+          'Cannot use height prop with fillViewport="vertical" or fillViewport={true}'
+        );
+      }
+    }
+    if (isNotUndefined4(width)) {
+      if (isTruthy(fill) || fill === "horizontal") {
+        throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
+      }
+      if (isTruthy(fillViewport) || fillViewport === "horizontal") {
+        throw new Error(
+          'Cannot use width prop with fillViewport="horizontal" or fillViewport={true}'
+        );
+      }
+    }
     return /* @__PURE__ */ jsx194(
       StyledBoxComponent,
       {
@@ -7168,10 +7192,12 @@ var BoxComponent = forwardRef5(
         $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,
@@ -7341,6 +7367,8 @@ var StyledCard = styled14(Box)`
   outline-offset: -2px;
   border-radius: var(--wui-border-radius-02);
   display: flex;
+  height: ${({ $height }) => $height};
+  width: ${({ $width }) => $width};
 `;
 var prominenceMap = {
   default: {
@@ -7364,6 +7392,8 @@ var Card = ({
   colorScheme = "inherit",
   prominence = "secondary",
   border = false,
+  height,
+  width,
   ...props
 }) => /* @__PURE__ */ jsx198(
   StyledCard,
@@ -7371,7 +7401,9 @@ var Card = ({
     $backgroundColor: prominenceMap[prominence].backgroundColor,
     $borderColor: border ? prominenceMap[prominence].borderColor : "transparent",
     $colorScheme: colorScheme,
+    $height: height,
     $paddingSize: paddingSize,
+    $width: width,
     direction,
     gap,
     ...props,
@@ -7792,13 +7824,13 @@ var CollapsibleTrigger = ({ children }) => {
 // src/components/Collapsible/CollapsibleContent.tsx
 import styled20 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
-import { isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
+import { isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 import { Fragment as Fragment4, jsx as jsx205, jsxs as jsxs13 } from "react/jsx-runtime";
 var ClampedContent = styled20.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if (isNotUndefined4(clamp)) {
+  if (isNotUndefined5(clamp)) {
     return /* @__PURE__ */ jsx205(ClampedContent, { $clamp: clamp, children });
   }
   return /* @__PURE__ */ jsx205(Content, { asChild: true, children: /* @__PURE__ */ jsxs13(Fragment4, { children: [
@@ -8665,7 +8697,7 @@ var EditableHeading = ({
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef11, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState6, useId as useId2 } from "react";
 import styled31 from "styled-components";
-import { isNotUndefined as isNotUndefined5, isUndefined as isUndefined3 } from "@wistia/type-guards";
+import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
@@ -8738,7 +8770,7 @@ var FormComponent = ({
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if (isNotUndefined5(validate)) {
+    if (isNotUndefined6(validate)) {
       handleValidate(formData);
     }
   };
@@ -8835,7 +8867,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef6 } from "react";
-import { isArray, isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
+import { isArray, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { jsx as jsx217, jsxs as jsxs19 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx217("li", { children: /* @__PURE__ */ jsx217(Link, { href: `#${formId}-${name}`, children: error }) }, name);
@@ -8849,7 +8881,7 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ jsxs19("div", { ref, children: [
     /* @__PURE__ */ jsx217("p", { children: description }),
-    /* @__PURE__ */ jsx217("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined6(error)).map(
+    /* @__PURE__ */ jsx217("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined7(error)).map(
       ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx217(
         ErrorItem,
         {
@@ -8874,7 +8906,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
 import styled33 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil11, isNotUndefined as isNotUndefined7, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { isArray as isArray2, isNotNil as isNotNil11, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/FormGroup/CheckboxGroup.tsx
 import { createContext as createContext3, useMemo as useMemo5 } from "react";
@@ -9013,7 +9045,7 @@ var FormField = ({
     label: isIntegratedLabel ? label : void 0,
     ...props
   };
-  if (isUndefined4(value) && isNotUndefined7(defaultValue)) {
+  if (isUndefined4(value) && isNotUndefined8(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
@@ -9022,10 +9054,10 @@ var FormField = ({
   if (isNotNil11(checkboxGroup)) {
     const computedName = isNotNil11(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if (isNotUndefined7(props.onChange)) {
+      if (isNotUndefined8(props.onChange)) {
         props.onChange(event);
       }
-      if (isNotUndefined7(checkboxGroup.onChange)) {
+      if (isNotUndefined8(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -9178,7 +9210,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil13, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
+import { isNotNil as isNotNil13, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -9304,7 +9336,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx224(DropdownMenuTrigger, { asChild: true, children: isNotUndefined8(trigger) ? trigger : /* @__PURE__ */ jsx224(
+        /* @__PURE__ */ jsx224(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx224(
           Button,
           {
             "aria-expanded": isOpen,
@@ -9377,7 +9409,7 @@ import { isNotNil as isNotNil15 } from "@wistia/type-guards";
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef13 } from "react";
 import styled38 from "styled-components";
-import { isNotNil as isNotNil14, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
+import { isNotNil as isNotNil14, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
 import { jsx as jsx226, jsxs as jsxs23 } from "react/jsx-runtime";
 var StyledButton3 = styled38(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -9455,7 +9487,7 @@ var StyledBadgeContainer = styled38.div`
 var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if (isNotUndefined9(colorScheme)) {
+    if (isNotUndefined10(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";