@wistia/ui 0.20.11 → 0.20.12-beta.526de0e5.34a21cc

package/dist/index.d.ts

@@ -3877,6 +3877,14 @@ type StackProps = {
      * @type 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | ResponsiveObject<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>
      */
     alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
+    /**
+     * Padding to apply to the stack container. Use `x` for horizontal (left/right) padding and `y` for vertical (top/bottom) padding.
+     * Each value can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     */
+    padding?: {
+        x?: ResponsiveObject<Spacings> | Spacings;
+        y?: ResponsiveObject<Spacings> | Spacings;
+    };
     renderAs?: ElementType;
 };
 /**

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.11
+ * @license @wistia/ui v0.20.12-beta.526de0e5.34a21cc
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -10050,12 +10050,23 @@ var StyledStack = styled26.div`
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
   align-items: ${({ $alignItems }) => $alignItems};
+  ${({ $paddingX }) => $paddingX && `padding-left: var(--wui-${$paddingX}); padding-right: var(--wui-${$paddingX});`}
+  ${({ $paddingY }) => $paddingY && `padding-top: var(--wui-${$paddingY}); padding-bottom: var(--wui-${$paddingY});`}
 `;
 var StackComponent = forwardRef10(
-  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
+  ({
+    renderAs,
+    direction = "vertical",
+    gap = "space-02",
+    alignItems = "stretch",
+    padding,
+    ...props
+  }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
+    const responsivePaddingX = useResponsiveProp(padding?.x);
+    const responsivePaddingY = useResponsiveProp(padding?.y);
     return /* @__PURE__ */ jsx240(
       StyledStack,
       {
@@ -10063,6 +10074,8 @@ var StackComponent = forwardRef10(
         $alignItems: responsiveAlignItems,
         $direction: responsiveDirection,
         $gap: responsiveGap,
+        $paddingX: responsivePaddingX,
+        $paddingY: responsivePaddingY,
         as: renderAs ?? DEFAULT_ELEMENT4,
         ...props
       }