@wistia/ui 0.6.17 → 0.6.18

package/dist/index.cjs

@@ -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.
  *
@@ -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,