@wistia/ui 0.8.14 → 0.8.15-beta.81e12349.b468043

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.14
+ * @license @wistia/ui v0.8.15-beta.81e12349.b468043
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7870,8 +7870,14 @@ var BoxComponent = (0, import_react23.forwardRef)(
     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 ((0, import_type_guards20.isNotUndefined)(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") {
@@ -7881,7 +7887,7 @@ var BoxComponent = (0, import_react23.forwardRef)(
       }
     }
     if ((0, import_type_guards20.isNotUndefined)(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") {
@@ -7894,19 +7900,19 @@ var BoxComponent = (0, import_react23.forwardRef)(
       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,
@@ -10828,6 +10834,11 @@ var BackdropComponent = import_styled_components64.default.div`
   position: fixed;
   z-index: var(--wui-zindex-backdrop);
 
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 1;
+  }
+
   @keyframes backdropShow {
     from {
       opacity: 0;
@@ -11667,7 +11678,7 @@ var SelectOption = (0, import_react58.forwardRef)(
     );
   }
 );
-SelectOption.displayName = "Option";
+SelectOption.displayName = "SelectOption";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");