@wistia/ui 0.6.34 → 0.6.35

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.34
+ * @license @wistia/ui v0.6.35
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7358,6 +7358,38 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
+var getFlexStyle = (flexMode) => {
+  if (!flexMode) return null;
+  switch (flexMode) {
+    // grows to fill space, won't shrink, starts at 0
+    case "grow":
+      return import_styled_components25.css`
+        flex: 1 0 0;
+      `;
+    // default behavior, can shrink but won't grow
+    case "initial":
+      return import_styled_components25.css`
+        flex: 0 1 auto;
+      `;
+    // equal distribution of space
+    case "equal":
+      return import_styled_components25.css`
+        flex: 1;
+      `;
+    // won't grow or shrink
+    case "rigid":
+      return import_styled_components25.css`
+        flex: 0 0 auto;
+      `;
+    // can grow and shrink from content size
+    case "fluid":
+      return import_styled_components25.css`
+        flex: 1 1 auto;
+      `;
+    default:
+      return null;
+  }
+};
 var StyledBoxComponent = import_styled_components25.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
@@ -7367,6 +7399,8 @@ var StyledBoxComponent = import_styled_components25.default.div`
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
+  ${({ $flexMode }) => getFlexStyle($flexMode)};
+  ${({ $gap }) => getGapStyle($gap)};
   height: ${({ $height }) => $height ?? null};
   width: ${({ $width }) => $width ?? null};
 
@@ -7374,7 +7408,6 @@ var StyledBoxComponent = import_styled_components25.default.div`
   flex-grow: ${({ $grow }) => (0, import_type_guards17.isNotNil)($grow) ? $grow : null};
   flex-shrink: ${({ $shrink }) => (0, import_type_guards17.isNotNil)($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
-  ${({ $gap }) => getGapStyle($gap)};
   justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => (0, import_type_guards17.isNotNil)($order) ? $order : null};
 `;
@@ -7417,6 +7450,7 @@ var BoxComponent = (0, import_react17.forwardRef)(
     shrink,
     width,
     wrapItems = false,
+    flexMode,
     ...otherProps
   }, ref) => {
     if ((0, import_type_guards17.isNotUndefined)(height)) {
@@ -7450,6 +7484,7 @@ var BoxComponent = (0, import_react17.forwardRef)(
         $fillBox: fill,
         $fillViewport: fillViewport,
         $flexDirection: direction,
+        $flexMode: flexMode,
         $gap: gap,
         $grow: grow,
         $height: height,