@wistia/ui 0.6.32 → 0.6.33-beta.b2bac018.87d0c22

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.32
+ * @license @wistia/ui v0.6.33-beta.b2bac018.87d0c22
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7357,6 +7357,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};
@@ -7366,6 +7398,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};
 
@@ -7373,7 +7407,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};
 `;
@@ -7416,6 +7449,7 @@ var BoxComponent = (0, import_react17.forwardRef)(
     shrink,
     width,
     wrapItems = false,
+    flexMode,
     ...otherProps
   }, ref) => {
     if ((0, import_type_guards17.isNotUndefined)(height)) {
@@ -7449,6 +7483,7 @@ var BoxComponent = (0, import_react17.forwardRef)(
         $fillBox: fill,
         $fillViewport: fillViewport,
         $flexDirection: direction,
+        $flexMode: flexMode,
         $gap: gap,
         $grow: grow,
         $height: height,
@@ -8030,7 +8065,7 @@ var CollapsibleContent = ({ clamp, children }) => {
   if ((0, import_type_guards24.isNotUndefined)(clamp)) {
     return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_collapsible3.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(import_jsx_runtime209.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(import_jsx_runtime209.Fragment, { children: [
     children,
     " "
   ] }) });