@wistia/ui 0.8.14 → 0.8.15

package/dist/index.d.mts

@@ -598,6 +598,7 @@ type Gap = {
     column: Spacings;
     row: Spacings;
 };
+type ResponsiveGap = ResponsiveObject<Gap | Spacings>;
 type FlexModeType = 'equal' | 'fluid' | 'grow' | 'initial' | 'rigid';
 declare const DEFAULT_ELEMENT$1 = "div";
 /**
@@ -614,17 +615,18 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     /**
      * Specifies how the browser distributes space between and around
      * items along the cross-axis of their container; has no effect on
-     * single line flexible boxes
+     * single line flexible boxes. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    alignContent?: AlignContentType;
+    alignContent?: AlignContentType | ResponsiveObject<AlignContentType>;
     /**
      * Specifies how the browser distributes space between and around
      * items along the cross-axis of their container; the difference
      * to the alignContent prop is that alignItems specifies the
      * alignment of the items within the current container's line,
-     * whereas alignContent specifies the alignment of the lines themselves
+     * whereas alignContent specifies the alignment of the lines themselves.
+     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    alignItems?: AlignItemsType;
+    alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
     /**
      * Specifies how the browser aligns items of the current line, overriding the
      * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
@@ -646,18 +648,19 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      */
     children?: ReactNode;
     /**
-     * Specifies the main axis of the container
+     * Specifies the main axis of the container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    direction?: DirectionType;
+    direction?: DirectionType | ResponsiveObject<DirectionType>;
     /**
      * Specifies whether the width and/or height should fill the container.
+     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      *
      * *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;
+    fill?: FillType | ResponsiveObject<FillType>;
     /**
      * Specifies whether the width and/or height should fill the viewport.
      *
@@ -678,9 +681,13 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      */
     flexMode?: FlexModeType;
     /**
-     * Specifies the gaps (gutters) between rows and columns
+     * Specifies the gaps (gutters) between rows and columns.
+     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     *
+     * Can be either a single spacing value that applies to both row and column gaps,
+     * or an object specifying different values for row and column gaps.
      */
-    gap?: Gap | Spacings;
+    gap?: Gap | ResponsiveGap | Spacings;
     /**
      * Specifies what amount of space inside the flex container the item should take up
      *
@@ -706,9 +713,9 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     inline?: boolean;
     /**
      * Specifies how the browser distributes space between and around
-     * items along the main axis of their container
+     * items along the main axis of their container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    justifyContent?: JustifyContentType;
+    justifyContent?: JustifyContentType | ResponsiveObject<JustifyContentType>;
     /**
      * Specifies the order used to lay out an item in its container. Items within the same
      * container are rendered in ascending order according to their order values.
@@ -760,7 +767,7 @@ declare const Breadcrumbs: {
 
 type BreadcrumbProps = ButtonAsLinkProps & {
     /**
-     * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
+     * An [Icon]() to show at the beginning of the breadcrumb
      */
     icon?: ButtonAsLinkProps['leftIcon'];
     /**

package/dist/index.d.ts

@@ -598,6 +598,7 @@ type Gap = {
     column: Spacings;
     row: Spacings;
 };
+type ResponsiveGap = ResponsiveObject<Gap | Spacings>;
 type FlexModeType = 'equal' | 'fluid' | 'grow' | 'initial' | 'rigid';
 declare const DEFAULT_ELEMENT$1 = "div";
 /**
@@ -614,17 +615,18 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     /**
      * Specifies how the browser distributes space between and around
      * items along the cross-axis of their container; has no effect on
-     * single line flexible boxes
+     * single line flexible boxes. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    alignContent?: AlignContentType;
+    alignContent?: AlignContentType | ResponsiveObject<AlignContentType>;
     /**
      * Specifies how the browser distributes space between and around
      * items along the cross-axis of their container; the difference
      * to the alignContent prop is that alignItems specifies the
      * alignment of the items within the current container's line,
-     * whereas alignContent specifies the alignment of the lines themselves
+     * whereas alignContent specifies the alignment of the lines themselves.
+     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    alignItems?: AlignItemsType;
+    alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
     /**
      * Specifies how the browser aligns items of the current line, overriding the
      * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
@@ -646,18 +648,19 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      */
     children?: ReactNode;
     /**
-     * Specifies the main axis of the container
+     * Specifies the main axis of the container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    direction?: DirectionType;
+    direction?: DirectionType | ResponsiveObject<DirectionType>;
     /**
      * Specifies whether the width and/or height should fill the container.
+     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      *
      * *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;
+    fill?: FillType | ResponsiveObject<FillType>;
     /**
      * Specifies whether the width and/or height should fill the viewport.
      *
@@ -678,9 +681,13 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      */
     flexMode?: FlexModeType;
     /**
-     * Specifies the gaps (gutters) between rows and columns
+     * Specifies the gaps (gutters) between rows and columns.
+     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     *
+     * Can be either a single spacing value that applies to both row and column gaps,
+     * or an object specifying different values for row and column gaps.
      */
-    gap?: Gap | Spacings;
+    gap?: Gap | ResponsiveGap | Spacings;
     /**
      * Specifies what amount of space inside the flex container the item should take up
      *
@@ -706,9 +713,9 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     inline?: boolean;
     /**
      * Specifies how the browser distributes space between and around
-     * items along the main axis of their container
+     * items along the main axis of their container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
-    justifyContent?: JustifyContentType;
+    justifyContent?: JustifyContentType | ResponsiveObject<JustifyContentType>;
     /**
      * Specifies the order used to lay out an item in its container. Items within the same
      * container are rendered in ascending order according to their order values.
@@ -760,7 +767,7 @@ declare const Breadcrumbs: {
 
 type BreadcrumbProps = ButtonAsLinkProps & {
     /**
-     * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
+     * An [Icon]() to show at the beginning of the breadcrumb
      */
     icon?: ButtonAsLinkProps['leftIcon'];
     /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.14
+ * @license @wistia/ui v0.8.15
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7743,8 +7743,14 @@ var BoxComponent = forwardRef5(
     flexMode,
     ...props
   }, ref) => {
+    const responsiveAlignContent = useResponsiveProp(alignContent);
+    const responsiveAlignItems = useResponsiveProp(alignItems);
+    const responsiveDirection = useResponsiveProp(direction);
+    const responsiveFill = useResponsiveProp(fill);
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveJustifyContent = useResponsiveProp(justifyContent);
     if (isNotUndefined5(height)) {
-      if (fill === true || fill === "vertical") {
+      if (responsiveFill === true || responsiveFill === "vertical") {
         throw new Error('Cannot use height prop with fill="vertical" or fill={true}');
       }
       if (fillViewport === true || fillViewport === "vertical") {
@@ -7754,7 +7760,7 @@ var BoxComponent = forwardRef5(
       }
     }
     if (isNotUndefined5(width)) {
-      if (fill === true || fill === "horizontal") {
+      if (responsiveFill === true || responsiveFill === "horizontal") {
         throw new Error('Cannot use width prop with fill="horizontal" or fill={true}');
       }
       if (fillViewport === true || fillViewport === "horizontal") {
@@ -7767,19 +7773,19 @@ var BoxComponent = forwardRef5(
       StyledBoxComponent,
       {
         ref,
-        $alignContent: alignContent,
-        $alignItems: alignItems,
+        $alignContent: responsiveAlignContent,
+        $alignItems: responsiveAlignItems,
         $alignSelf: alignSelf,
         $basis: basis,
-        $fillBox: fill,
+        $fillBox: responsiveFill,
         $fillViewport: fillViewport,
-        $flexDirection: direction,
+        $flexDirection: responsiveDirection,
         $flexMode: flexMode,
-        $gap: gap,
+        $gap: responsiveGap,
         $grow: grow,
         $height: height,
         $inline: inline,
-        $justifyContent: justifyContent,
+        $justifyContent: responsiveJustifyContent,
         $order: order,
         $shrink: shrink,
         $width: width,
@@ -11575,7 +11581,7 @@ var SelectOption = forwardRef24(
     );
   }
 );
-SelectOption.displayName = "Option";
+SelectOption.displayName = "SelectOption";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label2 } from "@radix-ui/react-select";