@wistia/ui 0.6.34 → 0.6.35

package/dist/index.d.mts

@@ -578,6 +578,7 @@ type Gap = {
     column: Spacings;
     row: Spacings;
 };
+type FlexModeType = 'equal' | 'fluid' | 'grow' | 'initial' | 'rigid';
 declare const DEFAULT_ELEMENT$1 = "div";
 /**
  * CSS property => Box prop:
@@ -615,6 +616,8 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     /**
      * Specifies the initial main size of an item
      *
+     * *Note: Cannot be used with `flexMode` prop.*
+     *
      * *Note: only works for nested `<Box />`*
      */
     basis?: string;
@@ -628,18 +631,32 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     direction?: DirectionType;
     /**
      * 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.
+     *
+     * *Note: 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.
-     * 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.
+     *
+     * *Note: 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;
+    /**
+     * Predefined `flex` behavior patterns:
+     *
+     * - `grow`: fills available space (`flex: 1 0 0`)
+     * - `initial`: default behavior (`flex: 0 1 auto`)
+     * - `equal`: equal space distribution (`flex: 1`)
+     * - `rigid`: fixed size (`flex: 0 0 auto`)
+     * - `fluid`: responsive (`flex: 1 1 auto`)
+     */
+    flexMode?: FlexModeType;
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
@@ -647,6 +664,8 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     /**
      * Specifies what amount of space inside the flex container the item should take up
      *
+     * *Note: Cannot be used with `flexMode` prop.*
+     *
      * *Note: only works for nested `<Box />`*
      */
     grow?: number | string;
@@ -657,6 +676,7 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     hasBoxParent?: boolean;
     /**
      * Specifies the height of the box.
+     *
      * *Note: Cannot be used with fill="vertical" or fillViewport="vertical"*
      */
     height?: string;
@@ -682,6 +702,8 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * Specifies how items will shrink inside the container when the default size of
      * items is larger than their container
      *
+     * *Note: Cannot be used with `flexMode` prop.*
+     *
      * *Note: only works for nested `<Box />`*
      */
     shrink?: number;
@@ -691,6 +713,7 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     wrapItems?: boolean;
     /**
      * Specifies the width of the box.
+     *
      * *Note: Cannot be used with fill="horizontal" or fillViewport="horizontal"*
      */
     width?: string;

package/dist/index.d.ts

@@ -578,6 +578,7 @@ type Gap = {
     column: Spacings;
     row: Spacings;
 };
+type FlexModeType = 'equal' | 'fluid' | 'grow' | 'initial' | 'rigid';
 declare const DEFAULT_ELEMENT$1 = "div";
 /**
  * CSS property => Box prop:
@@ -615,6 +616,8 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     /**
      * Specifies the initial main size of an item
      *
+     * *Note: Cannot be used with `flexMode` prop.*
+     *
      * *Note: only works for nested `<Box />`*
      */
     basis?: string;
@@ -628,18 +631,32 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     direction?: DirectionType;
     /**
      * 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.
+     *
+     * *Note: 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.
-     * 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.
+     *
+     * *Note: 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;
+    /**
+     * Predefined `flex` behavior patterns:
+     *
+     * - `grow`: fills available space (`flex: 1 0 0`)
+     * - `initial`: default behavior (`flex: 0 1 auto`)
+     * - `equal`: equal space distribution (`flex: 1`)
+     * - `rigid`: fixed size (`flex: 0 0 auto`)
+     * - `fluid`: responsive (`flex: 1 1 auto`)
+     */
+    flexMode?: FlexModeType;
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
@@ -647,6 +664,8 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     /**
      * Specifies what amount of space inside the flex container the item should take up
      *
+     * *Note: Cannot be used with `flexMode` prop.*
+     *
      * *Note: only works for nested `<Box />`*
      */
     grow?: number | string;
@@ -657,6 +676,7 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     hasBoxParent?: boolean;
     /**
      * Specifies the height of the box.
+     *
      * *Note: Cannot be used with fill="vertical" or fillViewport="vertical"*
      */
     height?: string;
@@ -682,6 +702,8 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * Specifies how items will shrink inside the container when the default size of
      * items is larger than their container
      *
+     * *Note: Cannot be used with `flexMode` prop.*
+     *
      * *Note: only works for nested `<Box />`*
      */
     shrink?: number;
@@ -691,6 +713,7 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     wrapItems?: boolean;
     /**
      * Specifies the width of the box.
+     *
      * *Note: Cannot be used with fill="horizontal" or fillViewport="horizontal"*
      */
     width?: string;