@primer/react 38.19.0-rc.c09ee891a → 38.19.0-rc.f678a3d2b

package/dist/deprecated/DialogV1/Dialog.js

@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
 import React, { forwardRef, useRef } from 'react';
 import { IconButton } from '../../Button/IconButton.js';
 import useDialog from '../../hooks/useDialog.js';
-import { useRefObjectAsForwardedRef } from '../../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../../hooks/useMergedRefs.js';
 import { XIcon } from '@primer/octicons-react';
 import { clsx } from 'clsx';
 import classes from './Dialog.module.css.js';
@@ -78,7 +78,7 @@ function _temp(ch) {
   return typeof ch === "string";
 }
 const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(25);
+  const $ = c(26);
   let children;
   let className;
   let initialFocusRef;
@@ -121,7 +121,7 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const Component = t2 === undefined ? "div" : t2;
   const overlayRef = useRef(null);
   const modalRef = useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, modalRef);
+  const mergedRef = useMergedRefs(forwardedRef, modalRef);
   const closeButtonRef = useRef(null);
   let t3;
   if ($[9] !== onDismiss || $[10] !== returnFocusRef) {
@@ -161,14 +161,14 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     getDialogProps
   } = useDialog(t4);
   let t5;
-  if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== onCloseClick || $[23] !== props) {
+  if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== mergedRef || $[23] !== onCloseClick || $[24] !== props) {
     t5 = isOpen ? /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx("span", {
         className: classes.Overlay,
         ref: overlayRef
       }), /*#__PURE__*/jsxs(Component, {
         tabIndex: -1,
-        ref: modalRef,
+        ref: mergedRef,
         role: "dialog",
         "aria-modal": "true",
         ...props,
@@ -190,11 +190,12 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[19] = className;
     $[20] = getDialogProps;
     $[21] = isOpen;
-    $[22] = onCloseClick;
-    $[23] = props;
-    $[24] = t5;
+    $[22] = mergedRef;
+    $[23] = onCloseClick;
+    $[24] = props;
+    $[25] = t5;
   } else {
-    t5 = $[24];
+    t5 = $[25];
   }
   return t5;
 });

package/dist/hooks/useAnchoredPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAKvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA6EA"}
+{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA4GA"}

package/dist/hooks/useAnchoredPosition.js

@@ -4,6 +4,26 @@ import { useProvidedRefOrCreate } from './useProvidedRefOrCreate.js';
 import { useResizeObserver } from './useResizeObserver.js';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 
+/**
+ * Returns all scrollable ancestor elements of the given element, plus the window.
+ * An element is scrollable if its computed overflow/overflow-x/overflow-y is
+ * 'auto', 'scroll', or 'overlay'.
+ */
+function getScrollableAncestors(element) {
+  const scrollables = [];
+  let current = element.parentElement;
+  while (current) {
+    const style = getComputedStyle(current);
+    const overflowY = style.overflowY;
+    const overflowX = style.overflowX;
+    if (/auto|scroll|overlay/.test(overflowY) || /auto|scroll|overlay/.test(overflowX)) {
+      scrollables.push(current);
+    }
+    current = current.parentElement;
+  }
+  scrollables.push(window);
+  return scrollables;
+}
 /**
  * Calculates the top and left values for an absolutely-positioned floating element
  * to be anchored to some anchor element. Returns refs for the floating element
@@ -76,6 +96,33 @@ function useAnchoredPosition(settings, dependencies = []) {
   useResizeObserver(updatePosition); // watches for changes in window size
   useResizeObserver(updatePosition, floatingElementRef); // watches for changes in floating element size
 
+  // Recalculate position when any scrollable ancestor of the anchor scrolls.
+  // Uses requestAnimationFrame to avoid layout thrashing during scroll.
+  React.useEffect(() => {
+    const anchorEl = anchorElementRef.current;
+    if (!anchorEl) return;
+    let rafId = null;
+    const handleScroll = () => {
+      if (rafId !== null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        updatePosition();
+      });
+    };
+    const scrollables = getScrollableAncestors(anchorEl);
+    for (const scrollable of scrollables) {
+      // eslint-disable-next-line github/prefer-observers -- IntersectionObserver cannot detect continuous scroll position changes needed for repositioning
+      scrollable.addEventListener('scroll', handleScroll);
+    }
+    return () => {
+      for (const scrollable of scrollables) {
+        scrollable.removeEventListener('scroll', handleScroll);
+      }
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
+    };
+  }, [anchorElementRef, updatePosition]);
   return {
     floatingElementRef,
     anchorElementRef,

package/dist/hooks/useMergedRefs.d.ts

@@ -15,18 +15,18 @@ import type { ForwardedRef, Ref as StandardRef } from 'react';
  * // React 18
  * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(forwardedRef, ref)
+ *  const mergedRef = useMergedRefs(forwardedRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * })
  *
  * @example
  * // React 19
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(externalRef, ref)
+ *  const mergedRef = useMergedRefs(externalRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * }
  */
 export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => () => void;

package/dist/hooks/useMergedRefs.js

@@ -17,18 +17,18 @@ import 'react';
  * // React 18
  * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(forwardedRef, ref)
+ *  const mergedRef = useMergedRefs(forwardedRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * })
  *
  * @example
  * // React 19
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
  *  const ref = useRef<HTMLButtonElement>(null)
- *  const combinedRef = useMergedRefs(externalRef, ref)
+ *  const mergedRef = useMergedRefs(externalRef, ref)
  *
- *  return <button ref={combinedRef} />
+ *  return <button ref={mergedRef} />
  * }
  */
 function useMergedRefs(refA, refB) {

package/generated/components.json

@@ -7009,6 +7009,18 @@
           "id": "components-stack--default",
           "code": "() => (\n  <Stack>\n    <div\n      style={{\n        background: 'var(--display-lemon-bgColor-muted)',\n        borderRadius: 'var(--borderRadius-medium)',\n        padding: 'var(--base-size-8)',\n      }}\n    >\n      First\n    </div>\n    <div\n      style={{\n        background: 'var(--display-olive-bgColor-muted)',\n        borderRadius: 'var(--borderRadius-medium)',\n        padding: 'var(--base-size-8)',\n      }}\n    >\n      Second\n    </div>\n    <div\n      style={{\n        background: 'var(--display-lime-bgColor-muted)',\n        borderRadius: 'var(--borderRadius-medium)',\n        padding: 'var(--base-size-8)',\n      }}\n    >\n      Third\n    </div>\n  </Stack>\n)"
         },
+        {
+          "id": "components-stack-features--gap-scale",
+          "code": "() => (\n  <Stack gap=\"spacious\">\n    {(\n      ['none', 'tight', 'condensed', 'cozy', 'normal', 'spacious'] as const\n    ).map((gap) => (\n      <Stack key={gap}>\n        <span\n          style={{\n            fontSize: 'var(--text-body-size-small)',\n            color: 'var(--fgColor-muted)',\n          }}\n        >\n          gap=&quot;{gap}&quot;\n        </span>\n        <Stack direction=\"horizontal\" gap={gap}>\n          <Placeholder label=\"A\" />\n          <Placeholder label=\"B\" />\n          <Placeholder label=\"C\" />\n        </Stack>\n      </Stack>\n    ))}\n  </Stack>\n)"
+        },
+        {
+          "id": "components-stack-features--directional-padding",
+          "code": "() => (\n  <Stack gap=\"normal\">\n    <Stack\n      padding=\"normal\"\n      style={{\n        backgroundColor: 'var(--bgColor-muted)',\n      }}\n    >\n      <Placeholder label='padding=\"normal\" (all sides)' />\n    </Stack>\n    <Stack\n      padding=\"normal\"\n      paddingInline=\"spacious\"\n      style={{\n        backgroundColor: 'var(--bgColor-muted)',\n      }}\n    >\n      <Placeholder label='padding=\"normal\" paddingInline=\"spacious\"' />\n    </Stack>\n    <Stack\n      paddingBlock=\"condensed\"\n      paddingInline=\"spacious\"\n      style={{\n        backgroundColor: 'var(--bgColor-muted)',\n      }}\n    >\n      <Placeholder label='paddingBlock=\"condensed\" paddingInline=\"spacious\"' />\n    </Stack>\n  </Stack>\n)"
+        },
+        {
+          "id": "components-stack-features--padding-scale",
+          "code": "() => (\n  <Stack gap=\"spacious\">\n    {(\n      ['none', 'tight', 'condensed', 'cozy', 'normal', 'spacious'] as const\n    ).map((padding) => (\n      <Stack key={padding}>\n        <span\n          style={{\n            fontSize: 'var(--text-body-size-small)',\n            color: 'var(--fgColor-muted)',\n          }}\n        >\n          padding=&quot;{padding}&quot;\n        </span>\n        <Stack\n          padding={padding}\n          style={{\n            backgroundColor: 'var(--bgColor-muted)',\n          }}\n        >\n          <Placeholder label=\"Content\" />\n        </Stack>\n      </Stack>\n    ))}\n  </Stack>\n)"
+        },
         {
           "id": "components-stack-features--shrinking-stack-items",
           "code": "() => (\n  <div\n    style={{\n      maxWidth: '200px',\n      padding: 'var(--base-size-8)',\n    }}\n  >\n    <Stack direction=\"horizontal\" gap=\"condensed\">\n      <Stack.Item shrink={false}>\n        <ShieldLockIcon size=\"small\" />\n      </Stack.Item>\n      <Stack.Item>\n        This stack has the leading icon set to prevent shrinking\n      </Stack.Item>\n    </Stack>\n    <Stack direction=\"horizontal\" gap=\"condensed\">\n      <Stack.Item shrink={true}>\n        <ShieldLockIcon size=\"small\" />\n      </Stack.Item>\n      <Stack.Item>\n        This stack item does not have the icon set to prevent shrinking\n      </Stack.Item>\n    </Stack>\n  </div>\n)"
@@ -7018,7 +7030,7 @@
       "props": [
         {
           "name": "gap",
-          "type": "'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>",
+          "type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
           "description": "Specify the gap between children elements in the stack."
         },
         {
@@ -7043,9 +7055,19 @@
         },
         {
           "name": "padding",
-          "type": "'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>",
+          "type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
           "description": "Specify the padding of the stack container."
         },
+        {
+          "name": "paddingBlock",
+          "type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
+          "description": "Specify the block (vertical) padding of the stack container. Overrides the block axis of padding when both are set."
+        },
+        {
+          "name": "paddingInline",
+          "type": "'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'tight' | 'condensed' | 'cozy' | 'normal' | 'spacious'>",
+          "description": "Specify the inline (horizontal) padding of the stack container. Overrides the inline axis of padding when both are set."
+        },
         {
           "name": "className",
           "type": "string"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.19.0-rc.c09ee891a",
+  "version": "38.19.0-rc.f678a3d2b",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/Stack/Stack-9e7b935d.css

@@ -1,2 +0,0 @@
-.prc-Stack-Stack-UQ9k6{align-content:flex-start;align-items:stretch;display:flex;flex-flow:column;gap:var(--stack-gap,var(--stack-gap-normal,1rem))}.prc-Stack-Stack-UQ9k6[data-padding-narrow=none],.prc-Stack-Stack-UQ9k6[data-padding=none]{padding:0}.prc-Stack-Stack-UQ9k6[data-padding-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-padding=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=normal],.prc-Stack-Stack-UQ9k6[data-padding=normal]{padding:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-padding=spacious]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-narrow=horizontal],.prc-Stack-Stack-UQ9k6[data-direction=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-narrow=vertical],.prc-Stack-Stack-UQ9k6[data-direction=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-narrow=none],.prc-Stack-Stack-UQ9k6[data-gap=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-narrow=condensed],.prc-Stack-Stack-UQ9k6[data-gap=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=normal],.prc-Stack-Stack-UQ9k6[data-gap=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-narrow=spacious],.prc-Stack-Stack-UQ9k6[data-gap=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-narrow=start],.prc-Stack-Stack-UQ9k6[data-align=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-narrow=center],.prc-Stack-Stack-UQ9k6[data-align=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-narrow=end],.prc-Stack-Stack-UQ9k6[data-align=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-narrow=baseline],.prc-Stack-Stack-UQ9k6[data-align=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-narrow=start],.prc-Stack-Stack-UQ9k6[data-justify=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-narrow=center],.prc-Stack-Stack-UQ9k6[data-justify=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-narrow=end],.prc-Stack-Stack-UQ9k6[data-justify=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-narrow=space-between],.prc-Stack-Stack-UQ9k6[data-justify=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-narrow=space-evenly],.prc-Stack-Stack-UQ9k6[data-justify=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-narrow=wrap],.prc-Stack-Stack-UQ9k6[data-wrap=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-narrow=nowrap],.prc-Stack-Stack-UQ9k6[data-wrap=nowrap]{flex-wrap:nowrap}@media (min-width:48rem){.prc-Stack-Stack-UQ9k6[data-padding-regular=none]{padding:0}.prc-Stack-Stack-UQ9k6[data-padding-regular=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=normal]{padding:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-regular=spacious]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-regular=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-regular=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-regular=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-regular=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-regular=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-regular=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-regular=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-regular=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-regular=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-regular=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-regular=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-regular=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-regular=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-regular=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-regular=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-regular=nowrap]{flex-wrap:nowrap}}@media (min-width:87.5rem){.prc-Stack-Stack-UQ9k6[data-padding-wide=none]{padding:0}.prc-Stack-Stack-UQ9k6[data-padding-wide=condensed]{padding:var(--stack-padding-condensed,.5rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=normal]{padding:var(--stack-padding-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-padding-wide=spacious]{padding:var(--stack-padding-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-direction-wide=horizontal]{flex-flow:row}.prc-Stack-Stack-UQ9k6[data-direction-wide=vertical]{flex-flow:column}.prc-Stack-Stack-UQ9k6[data-gap-wide=none]{--stack-gap:0}.prc-Stack-Stack-UQ9k6[data-gap-wide=condensed]{--stack-gap:var(--stack-gap-condensed,0.5rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=normal]{--stack-gap:var(--stack-gap-normal,1rem)}.prc-Stack-Stack-UQ9k6[data-gap-wide=spacious]{--stack-gap:var(--stack-gap-spacious,1.5rem)}.prc-Stack-Stack-UQ9k6[data-align-wide=start]{align-items:flex-start}.prc-Stack-Stack-UQ9k6[data-align-wide=center]{align-items:center}.prc-Stack-Stack-UQ9k6[data-align-wide=end]{align-items:flex-end}.prc-Stack-Stack-UQ9k6[data-align-wide=baseline]{align-items:baseline}.prc-Stack-Stack-UQ9k6[data-justify-wide=start]{justify-content:flex-start}.prc-Stack-Stack-UQ9k6[data-justify-wide=center]{justify-content:center}.prc-Stack-Stack-UQ9k6[data-justify-wide=end]{justify-content:flex-end}.prc-Stack-Stack-UQ9k6[data-justify-wide=space-between]{justify-content:space-between}.prc-Stack-Stack-UQ9k6[data-justify-wide=space-evenly]{justify-content:space-evenly}.prc-Stack-Stack-UQ9k6[data-wrap-wide=wrap]{flex-wrap:wrap}.prc-Stack-Stack-UQ9k6[data-wrap-wide=nowrap]{flex-wrap:nowrap}}.prc-Stack-StackItem-TzbLx{flex:0 1 auto;min-inline-size:0}.prc-Stack-StackItem-TzbLx[data-shrink-narrow=false],.prc-Stack-StackItem-TzbLx[data-shrink=false]{flex-shrink:0}.prc-Stack-StackItem-TzbLx[data-grow-narrow=true],.prc-Stack-StackItem-TzbLx[data-grow=true]{flex-grow:1}@media (min-width:48rem){.prc-Stack-StackItem-TzbLx[data-grow-regular=true]{flex-grow:1}.prc-Stack-StackItem-TzbLx[data-grow-regular=false]{flex-grow:0}.prc-Stack-StackItem-TzbLx[data-shrink-regular=true]{flex-shrink:1}.prc-Stack-StackItem-TzbLx[data-shrink-regular=false]{flex-shrink:0}}@media (min-width:87.5rem){.prc-Stack-StackItem-TzbLx[data-grow-wide=true]{flex-grow:1}.prc-Stack-StackItem-TzbLx[data-grow-wide=false]{flex-grow:0}.prc-Stack-StackItem-TzbLx[data-shrink-wide=true]{flex-shrink:1}.prc-Stack-StackItem-TzbLx[data-shrink-wide=false]{flex-shrink:0}}
-/*# sourceMappingURL=Stack-9e7b935d.css.map */

package/dist/Stack/Stack-9e7b935d.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Stack/Stack.module.css.js"],"names":[],"mappings":"AAAA,uBAIE,wBAAyB,CADzB,mBAAoB,CAFpB,YAAa,CACb,gBAAiB,CAGjB,iDA+RF,CA7RE,2FAEE,SACF,CAEA,qGAGE,4CACF,CAEA,+FAGE,wCACF,CAEA,mGAGE,4CACF,CAEA,2GAEE,aACF,CAEA,uGAEE,gBACF,CAEA,mFAEE,aACF,CAEA,6FAEE,6CACF,CAEA,uFAEE,wCACF,CAEA,2FAEE,4CACF,CAEA,yFAEE,sBACF,CAEA,2FAEE,kBACF,CAEA,qFAEE,oBACF,CAEA,+FAEE,oBACF,CAEA,6FAEE,0BACF,CAEA,+FAEE,sBACF,CAEA,yFAEE,wBACF,CAEA,6GAEE,6BACF,CAEA,2GAEE,4BACF,CAEA,qFAEE,cACF,CAEA,yFAEE,gBACF,CAEA,yBACE,kDACE,SACF,CAEA,uDAEE,4CACF,CAEA,oDAEE,wCACF,CAEA,sDAEE,4CACF,CAEA,0DACE,aACF,CAEA,wDACE,gBACF,CAEA,8CACE,aACF,CAEA,mDACE,6CACF,CAEA,gDACE,wCACF,CAEA,kDACE,4CACF,CAEA,iDACE,sBACF,CAEA,kDACE,kBACF,CAEA,+CACE,oBACF,CAEA,oDACE,oBACF,CAEA,mDACE,0BACF,CAEA,oDACE,sBACF,CAEA,iDACE,wBACF,CAEA,2DACE,6BACF,CAEA,0DACE,4BACF,CAEA,+CACE,cACF,CAEA,iDACE,gBACF,CACF,CAEA,2BACE,+CACE,SACF,CAEA,oDAEE,4CACF,CAEA,iDAEE,wCACF,CAEA,mDAEE,4CACF,CAEA,uDACE,aACF,CAEA,qDACE,gBACF,CAEA,2CACE,aACF,CAEA,gDACE,6CACF,CAEA,6CACE,wCACF,CAEA,+CACE,4CACF,CAEA,8CACE,sBACF,CAEA,+CACE,kBACF,CAEA,4CACE,oBACF,CAEA,iDACE,oBACF,CAEA,gDACE,0BACF,CAEA,iDACE,sBACF,CAEA,8CACE,wBACF,CAEA,wDACE,6BACF,CAEA,uDACE,4BACF,CAEA,4CACE,cACF,CAEA,8CACE,gBACF,CACF,CAGF,2BACE,aAAc,CACd,iBA+CF,CA7CE,mGAEE,aACF,CAEA,6FAEE,WACF,CAEA,yBACE,mDACE,WACF,CAEA,oDACE,WACF,CAEA,qDACE,aACF,CAEA,sDACE,aACF,CACF,CAEA,2BACE,gDACE,WACF,CAEA,iDACE,WACF,CAEA,kDACE,aACF,CAEA,mDACE,aACF,CACF","file":"Stack-9e7b935d.css","sourcesContent":[".Stack {\n  display: flex;\n  flex-flow: column;\n  align-items: stretch;\n  align-content: flex-start;\n  gap: var(--stack-gap, var(--stack-gap-normal));\n\n  &[data-padding='none'],\n  &[data-padding-narrow='none'] {\n    padding: 0;\n  }\n\n  &[data-padding='condensed'],\n  &[data-padding-narrow='condensed'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-condensed);\n  }\n\n  &[data-padding='normal'],\n  &[data-padding-narrow='normal'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-normal);\n  }\n\n  &[data-padding='spacious'],\n  &[data-padding-narrow='spacious'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding: var(--stack-padding-spacious);\n  }\n\n  &[data-direction='horizontal'],\n  &[data-direction-narrow='horizontal'] {\n    flex-flow: row;\n  }\n\n  &[data-direction='vertical'],\n  &[data-direction-narrow='vertical'] {\n    flex-flow: column;\n  }\n\n  &[data-gap='none'],\n  &[data-gap-narrow='none'] {\n    --stack-gap: 0;\n  }\n\n  &[data-gap='condensed'],\n  &[data-gap-narrow='condensed'] {\n    --stack-gap: var(--stack-gap-condensed);\n  }\n\n  &[data-gap='normal'],\n  &[data-gap-narrow='normal'] {\n    --stack-gap: var(--stack-gap-normal);\n  }\n\n  &[data-gap='spacious'],\n  &[data-gap-narrow='spacious'] {\n    --stack-gap: var(--stack-gap-spacious);\n  }\n\n  &[data-align='start'],\n  &[data-align-narrow='start'] {\n    align-items: flex-start;\n  }\n\n  &[data-align='center'],\n  &[data-align-narrow='center'] {\n    align-items: center;\n  }\n\n  &[data-align='end'],\n  &[data-align-narrow='end'] {\n    align-items: flex-end;\n  }\n\n  &[data-align='baseline'],\n  &[data-align-narrow='baseline'] {\n    align-items: baseline;\n  }\n\n  &[data-justify='start'],\n  &[data-justify-narrow='start'] {\n    justify-content: flex-start;\n  }\n\n  &[data-justify='center'],\n  &[data-justify-narrow='center'] {\n    justify-content: center;\n  }\n\n  &[data-justify='end'],\n  &[data-justify-narrow='end'] {\n    justify-content: flex-end;\n  }\n\n  &[data-justify='space-between'],\n  &[data-justify-narrow='space-between'] {\n    justify-content: space-between;\n  }\n\n  &[data-justify='space-evenly'],\n  &[data-justify-narrow='space-evenly'] {\n    justify-content: space-evenly;\n  }\n\n  &[data-wrap='wrap'],\n  &[data-wrap-narrow='wrap'] {\n    flex-wrap: wrap;\n  }\n\n  &[data-wrap='nowrap'],\n  &[data-wrap-narrow='nowrap'] {\n    flex-wrap: nowrap;\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-padding-regular='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-regular='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed);\n    }\n\n    &[data-padding-regular='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal);\n    }\n\n    &[data-padding-regular='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious);\n    }\n\n    &[data-direction-regular='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-regular='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-regular='none'] {\n      --stack-gap: 0;\n    }\n\n    &[data-gap-regular='condensed'] {\n      --stack-gap: var(--stack-gap-condensed);\n    }\n\n    &[data-gap-regular='normal'] {\n      --stack-gap: var(--stack-gap-normal);\n    }\n\n    &[data-gap-regular='spacious'] {\n      --stack-gap: var(--stack-gap-spacious);\n    }\n\n    &[data-align-regular='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-regular='center'] {\n      align-items: center;\n    }\n\n    &[data-align-regular='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-regular='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-regular='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-regular='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-regular='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-regular='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-regular='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-regular='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-regular='nowrap'] {\n      flex-wrap: nowrap;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-padding-wide='none'] {\n      padding: 0;\n    }\n\n    &[data-padding-wide='condensed'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-condensed);\n    }\n\n    &[data-padding-wide='normal'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-normal);\n    }\n\n    &[data-padding-wide='spacious'] {\n      /* stylelint-disable-next-line primer/spacing */\n      padding: var(--stack-padding-spacious);\n    }\n\n    &[data-direction-wide='horizontal'] {\n      flex-flow: row;\n    }\n\n    &[data-direction-wide='vertical'] {\n      flex-flow: column;\n    }\n\n    &[data-gap-wide='none'] {\n      --stack-gap: 0;\n    }\n\n    &[data-gap-wide='condensed'] {\n      --stack-gap: var(--stack-gap-condensed);\n    }\n\n    &[data-gap-wide='normal'] {\n      --stack-gap: var(--stack-gap-normal);\n    }\n\n    &[data-gap-wide='spacious'] {\n      --stack-gap: var(--stack-gap-spacious);\n    }\n\n    &[data-align-wide='start'] {\n      align-items: flex-start;\n    }\n\n    &[data-align-wide='center'] {\n      align-items: center;\n    }\n\n    &[data-align-wide='end'] {\n      align-items: flex-end;\n    }\n\n    &[data-align-wide='baseline'] {\n      align-items: baseline;\n    }\n\n    &[data-justify-wide='start'] {\n      justify-content: flex-start;\n    }\n\n    &[data-justify-wide='center'] {\n      justify-content: center;\n    }\n\n    &[data-justify-wide='end'] {\n      justify-content: flex-end;\n    }\n\n    &[data-justify-wide='space-between'] {\n      justify-content: space-between;\n    }\n\n    &[data-justify-wide='space-evenly'] {\n      justify-content: space-evenly;\n    }\n\n    &[data-wrap-wide='wrap'] {\n      flex-wrap: wrap;\n    }\n\n    &[data-wrap-wide='nowrap'] {\n      flex-wrap: nowrap;\n    }\n  }\n}\n\n.StackItem {\n  flex: 0 1 auto;\n  min-inline-size: 0;\n\n  &[data-shrink='false'],\n  &[data-shrink-narrow='false'] {\n    flex-shrink: 0;\n  }\n\n  &[data-grow='true'],\n  &[data-grow-narrow='true'] {\n    flex-grow: 1;\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-grow-regular='true'] {\n      flex-grow: 1;\n    }\n\n    &[data-grow-regular='false'] {\n      flex-grow: 0;\n    }\n\n    &[data-shrink-regular='true'] {\n      flex-shrink: 1;\n    }\n\n    &[data-shrink-regular='false'] {\n      flex-shrink: 0;\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-grow-wide='true'] {\n      flex-grow: 1;\n    }\n\n    &[data-grow-wide='false'] {\n      flex-grow: 0;\n    }\n\n    &[data-shrink-wide='true'] {\n      flex-shrink: 1;\n    }\n\n    &[data-shrink-wide='false'] {\n      flex-shrink: 0;\n    }\n  }\n}\n"]}