@wistia/ui 0.2.1 → 0.3.1

package/dist/index.d.mts

@@ -359,6 +359,8 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     label: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
+
 type JustifyContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
 type AlignContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
 type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
@@ -366,8 +368,8 @@ type AlignSelfType = 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start'
 type DirectionType = 'column-reverse' | 'column' | 'row-reverse' | 'row';
 type FillType = boolean | 'horizontal' | 'vertical';
 type Gap = {
-    column: number | string;
-    row: number | string;
+    column: Spacings;
+    row: Spacings;
 };
 /**
  * CSS property => Box prop:
@@ -427,7 +429,7 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
-    gap?: Gap | string;
+    gap?: Gap | Spacings;
     /**
      * Specifies what amount of space inside the flex container the item should take up
      *
@@ -1822,8 +1824,6 @@ declare const ScreenReaderOnly: {
     displayName: string;
 };
 
-type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
-
 type StackProps = {
     /**
      * Optional children

package/dist/index.d.ts

@@ -359,6 +359,8 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     label: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
+type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
+
 type JustifyContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
 type AlignContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
 type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
@@ -366,8 +368,8 @@ type AlignSelfType = 'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start'
 type DirectionType = 'column-reverse' | 'column' | 'row-reverse' | 'row';
 type FillType = boolean | 'horizontal' | 'vertical';
 type Gap = {
-    column: number | string;
-    row: number | string;
+    column: Spacings;
+    row: Spacings;
 };
 /**
  * CSS property => Box prop:
@@ -427,7 +429,7 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Specifies the gaps (gutters) between rows and columns
      */
-    gap?: Gap | string;
+    gap?: Gap | Spacings;
     /**
      * Specifies what amount of space inside the flex container the item should take up
      *
@@ -1822,8 +1824,6 @@ declare const ScreenReaderOnly: {
     displayName: string;
 };
 
-type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
-
 type StackProps = {
     /**
      * Optional children

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.2.1
+ * @license @wistia/ui v0.3.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5881,9 +5881,11 @@ var propsForFlexChildren = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow"
 var getGapStyle = (gap) => {
   if (isNotNil6(gap)) {
     if (isRecord2(gap)) {
-      return Object.entries(gap).map(([key, value]) => `${key}-gap: ${value};`).join("");
+      return Object.entries(gap).map(([key, value]) => {
+        return `${key}-gap: var(--wui-${value})};`;
+      }).join("");
     }
-    return `gap: ${gap.toString()};`;
+    return `gap: var(--wui-${gap.toString()})};`;
   }
   return void 0;
 };
@@ -6013,7 +6015,7 @@ var ButtonGroupComponent = styled11.div`
 
   /* this helps ensure that primary buttons appear at the top of the column */
   flex-direction: ${({ $align }) => $align === "right" ? "column-reverse" : "column"};
-  gap: var(--wui-space-04);
+  gap: var(--wui-space-02);
   align-items: center;
   justify-content: ${({ $align }) => getAlignment($align)};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};