@primer/react 36.14.0 → 36.15.0

package/lib/drafts/index.js

@@ -19,7 +19,8 @@ var NavList = require('../NavList/NavList.js');
 var SelectPanel = require('./SelectPanel2/SelectPanel.js');
 var TabPanels = require('./TabPanels/TabPanels.js');
 var Tooltip = require('../TooltipV2/Tooltip.js');
-require('./ActionBar/index.js');
+var index$2 = require('./ActionBar/index.js');
+var index$3 = require('../Stack/index.js');
 var DataTable = require('../DataTable/DataTable.js');
 var column = require('../DataTable/column.js');
 
@@ -45,5 +46,7 @@ exports.SelectPanel = SelectPanel.SelectPanel;
 exports.TabPanels = TabPanels;
 exports.Tooltip = Tooltip.Tooltip;
 exports.TooltipContext = Tooltip.TooltipContext;
+exports.ActionBar = index$2;
+exports.Stack = index$3.Stack;
 exports.DataTable = DataTable.DataTable;
 exports.createColumnHelper = column.createColumnHelper;

package/lib/experimental/index.d.ts

@@ -1,2 +1,4 @@
 export * from '../drafts';
+export { FeatureFlags } from '../FeatureFlags';
+export type { FeatureFlagsProps } from '../FeatureFlags';
 //# sourceMappingURL=index.d.ts.map

package/lib/experimental/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAEA,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAEA,cAAc,WAAW,CAAA;AACzB,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,iBAAiB,CAAA"}

package/lib/experimental/index.js

@@ -19,7 +19,11 @@ var NavList = require('../NavList/NavList.js');
 var SelectPanel = require('../drafts/SelectPanel2/SelectPanel.js');
 var TabPanels = require('../drafts/TabPanels/TabPanels.js');
 var Tooltip = require('../TooltipV2/Tooltip.js');
-require('../drafts/ActionBar/index.js');
+var index$2 = require('../drafts/ActionBar/index.js');
+var index$3 = require('../Stack/index.js');
+var FeatureFlags = require('../FeatureFlags/FeatureFlags.js');
+require('react');
+require('../FeatureFlags/DefaultFeatureFlags.js');
 var DataTable = require('../DataTable/DataTable.js');
 var column = require('../DataTable/column.js');
 
@@ -45,5 +49,8 @@ exports.SelectPanel = SelectPanel.SelectPanel;
 exports.TabPanels = TabPanels;
 exports.Tooltip = Tooltip.Tooltip;
 exports.TooltipContext = Tooltip.TooltipContext;
+exports.ActionBar = index$2;
+exports.Stack = index$3.Stack;
+exports.FeatureFlags = FeatureFlags.FeatureFlags;
 exports.DataTable = DataTable.DataTable;
 exports.createColumnHelper = column.createColumnHelper;

package/lib/internal/utils/__tests__/getResponsiveAttributes.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=getResponsiveAttributes.test.d.ts.map

package/lib/internal/utils/__tests__/getResponsiveAttributes.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getResponsiveAttributes.test.d.ts","sourceRoot":"","sources":["../../../../src/internal/utils/__tests__/getResponsiveAttributes.test.ts"],"names":[],"mappings":""}

package/lib/internal/utils/getResponsiveAttributes.d.ts

@@ -0,0 +1,19 @@
+import type { ResponsiveValue } from '../../hooks/useResponsiveValue';
+/**
+ * Transform the given property and values in to corresponding data attributes
+ * to be placed on a container. This function is helpful for coordinating
+ * between responsive prop values and the corresponding styles in CSS.
+ *
+ * @param property - The name that will be given to the data attribute. For
+ * example, a property of "gap" will be transformed to `data-gap`.
+ *
+ * If responsive values are used, then the breakpoint name will be appended to
+ * the data attribute name. For example, `data-gap-narrow`.
+ *
+ * @param values - The value, or responsive values, that will be set as the
+ * value of the data property set by `property`. These values should typically
+ * be a `string` or `boolean`. For boolean values, the data attribute will be
+ * set when the value is `true` and will not be set when the value is `false`.
+ */
+export declare function getResponsiveAttributes<T>(property: string, values?: T | ResponsiveValue<T>): Record<string, T extends boolean ? '' : T> | undefined;
+//# sourceMappingURL=getResponsiveAttributes.d.ts.map

package/lib/internal/utils/getResponsiveAttributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getResponsiveAttributes.d.ts","sourceRoot":"","sources":["../../../src/internal/utils/getResponsiveAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAEnE;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,uBAAuB,CAAC,CAAC,EACvC,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,GAC9B,MAAM,CAAC,MAAM,EAAE,CAAC,SAAS,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,SAAS,CAcxD"}

package/lib/internal/utils/getResponsiveAttributes.js

@@ -0,0 +1,40 @@
+'use strict';
+
+/**
+ * Transform the given property and values in to corresponding data attributes
+ * to be placed on a container. This function is helpful for coordinating
+ * between responsive prop values and the corresponding styles in CSS.
+ *
+ * @param property - The name that will be given to the data attribute. For
+ * example, a property of "gap" will be transformed to `data-gap`.
+ *
+ * If responsive values are used, then the breakpoint name will be appended to
+ * the data attribute name. For example, `data-gap-narrow`.
+ *
+ * @param values - The value, or responsive values, that will be set as the
+ * value of the data property set by `property`. These values should typically
+ * be a `string` or `boolean`. For boolean values, the data attribute will be
+ * set when the value is `true` and will not be set when the value is `false`.
+ */
+function getResponsiveAttributes(property, values) {
+  if (values === undefined || values === null) {
+    return;
+  }
+  if (typeof values == 'object') {
+    return Object.fromEntries(Object.entries(values).map(([key, value]) => {
+      return serialize(`data-${property}-${key}`, value);
+    }));
+  }
+  return Object.fromEntries([serialize(`data-${property}`, values)]);
+}
+function serialize(property, value) {
+  if (typeof value === 'boolean') {
+    if (value) {
+      return [property, ''];
+    }
+    return [];
+  }
+  return [property, value];
+}
+
+exports.getResponsiveAttributes = getResponsiveAttributes;

package/lib/internal/utils/getResponsiveControlValues.d.ts

@@ -0,0 +1,8 @@
+import type { ResponsiveValue } from '../../hooks/useResponsiveValue';
+/**
+ * Helper utility to get the value for a prop based on control args. This is
+ * helpful when an arg can have both responsive values and a plain value. In
+ * cases where both are defined, responsive values will take preference
+ */
+export declare function getResponsiveControlValues<T>(value: T, responsiveValue: ResponsiveValue<T>): T | ResponsiveValue<T>;
+//# sourceMappingURL=getResponsiveControlValues.d.ts.map

package/lib/internal/utils/getResponsiveControlValues.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getResponsiveControlValues.d.ts","sourceRoot":"","sources":["../../../src/internal/utils/getResponsiveControlValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,0BAQ1F"}

package/lib-esm/ActionList/Item.js

@@ -295,7 +295,8 @@ const Item = /*#__PURE__*/React.forwardRef(({
     sx: {
       flexGrow: slots.inlineDescription ? 0 : 1,
       fontWeight: slots.inlineDescription || slots.blockDescription || active ? 'bold' : 'normal',
-      marginBlockEnd: slots.blockDescription ? '4px' : undefined
+      marginBlockEnd: slots.blockDescription ? '4px' : undefined,
+      wordBreak: 'break-word'
     }
   }, childrenWithoutSlots), slots.inlineDescription),
   // If we're showing an inactive indicator and a leading visual has NOT been passed,

package/lib-esm/FeatureFlags/DefaultFeatureFlags.d.ts

@@ -0,0 +1,3 @@
+import { FeatureFlagScope } from './FeatureFlagScope';
+export declare const DefaultFeatureFlags: FeatureFlagScope;
+//# sourceMappingURL=DefaultFeatureFlags.d.ts.map

package/lib-esm/FeatureFlags/DefaultFeatureFlags.js

@@ -0,0 +1,5 @@
+import { FeatureFlagScope } from './FeatureFlagScope.js';
+
+const DefaultFeatureFlags = FeatureFlagScope.create();
+
+export { DefaultFeatureFlags };

package/lib-esm/FeatureFlags/FeatureFlagContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { FeatureFlagScope } from './FeatureFlagScope';
+export declare const FeatureFlagContext: import("react").Context<FeatureFlagScope>;
+//# sourceMappingURL=FeatureFlagContext.d.ts.map

package/lib-esm/FeatureFlags/FeatureFlagContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+import { DefaultFeatureFlags } from './DefaultFeatureFlags.js';
+
+const FeatureFlagContext = /*#__PURE__*/createContext(DefaultFeatureFlags);
+
+export { FeatureFlagContext };

package/lib-esm/FeatureFlags/FeatureFlagScope.d.ts

@@ -0,0 +1,22 @@
+export type FeatureFlags = {
+    [key: string]: boolean;
+};
+export declare class FeatureFlagScope {
+    static create(flags?: FeatureFlags): FeatureFlagScope;
+    static merge(a: FeatureFlagScope, b: FeatureFlagScope): FeatureFlagScope;
+    flags: Map<string, boolean>;
+    constructor(flags?: FeatureFlags);
+    /**
+     * Enable a feature flag
+     */
+    enable(name: string): void;
+    /**
+     * Disable a feature flag
+     */
+    disable(name: string): void;
+    /**
+     * Check if a feature flag is enabled
+     */
+    enabled(name: string): boolean;
+}
+//# sourceMappingURL=FeatureFlagScope.d.ts.map

package/lib-esm/FeatureFlags/FeatureFlagScope.js

@@ -0,0 +1,42 @@
+class FeatureFlagScope {
+  static create(flags) {
+    return new FeatureFlagScope(flags);
+  }
+  static merge(a, b) {
+    const merged = new FeatureFlagScope();
+    for (const [key, value] of a.flags) {
+      merged.flags.set(key, value);
+    }
+    for (const [key, value] of b.flags) {
+      merged.flags.set(key, value);
+    }
+    return merged;
+  }
+  constructor(flags = {}) {
+    this.flags = new Map(Object.entries(flags));
+  }
+
+  /**
+   * Enable a feature flag
+   */
+  enable(name) {
+    this.flags.set(name, true);
+  }
+
+  /**
+   * Disable a feature flag
+   */
+  disable(name) {
+    this.flags.set(name, false);
+  }
+
+  /**
+   * Check if a feature flag is enabled
+   */
+  enabled(name) {
+    var _this$flags$get;
+    return (_this$flags$get = this.flags.get(name)) !== null && _this$flags$get !== void 0 ? _this$flags$get : false;
+  }
+}
+
+export { FeatureFlagScope };

package/lib-esm/FeatureFlags/FeatureFlags.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type FeatureFlags } from './FeatureFlagScope';
+export type FeatureFlagsProps = React.PropsWithChildren<{
+    flags: FeatureFlags;
+}>;
+export declare function FeatureFlags({ children, flags }: FeatureFlagsProps): React.JSX.Element;
+//# sourceMappingURL=FeatureFlags.d.ts.map

package/lib-esm/FeatureFlags/FeatureFlags.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+import { FeatureFlagContext } from './FeatureFlagContext.js';
+import { FeatureFlagScope } from './FeatureFlagScope.js';
+import { DefaultFeatureFlags } from './DefaultFeatureFlags.js';
+
+function FeatureFlags({
+  children,
+  flags
+}) {
+  const value = useMemo(() => {
+    const scope = FeatureFlagScope.merge(DefaultFeatureFlags, FeatureFlagScope.create(flags));
+    return scope;
+  }, [flags]);
+  return /*#__PURE__*/React.createElement(FeatureFlagContext.Provider, {
+    value: value
+  }, children);
+}
+FeatureFlags.displayName = "FeatureFlags";
+
+export { FeatureFlags };

package/lib-esm/FeatureFlags/index.d.ts

@@ -0,0 +1,4 @@
+export { FeatureFlags } from './FeatureFlags';
+export type { FeatureFlagsProps } from './FeatureFlags';
+export { useFeatureFlag } from './useFeatureFlag';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/FeatureFlags/useFeatureFlag.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Check if the given feature flag is enabled
+ */
+export declare function useFeatureFlag(flag: string): boolean;
+//# sourceMappingURL=useFeatureFlag.d.ts.map

package/lib-esm/Stack/Stack.d.ts

@@ -0,0 +1,65 @@
+import React, { type ElementType } from 'react';
+import type { ResponsiveValue } from '../hooks/useResponsiveValue';
+type GapScale = 'none' | 'condensed' | 'normal' | 'spacious';
+type Gap = GapScale | ResponsiveValue<GapScale>;
+type DirectionScale = 'horizontal' | 'vertical';
+type Direction = DirectionScale | ResponsiveValue<DirectionScale>;
+type AlignScale = 'stretch' | 'start' | 'center' | 'end' | 'baseline';
+type Align = AlignScale | ResponsiveValue<AlignScale>;
+type WrapScale = 'wrap' | 'nowrap';
+type Wrap = WrapScale | ResponsiveValue<WrapScale>;
+type JustifyScale = 'start' | 'center' | 'end' | 'space-between' | 'space-evenly';
+type Justify = JustifyScale | ResponsiveValue<JustifyScale>;
+type PaddingScale = 'none' | 'condensed' | 'normal' | 'spacious';
+type Padding = PaddingScale | ResponsiveValue<PaddingScale>;
+type StackProps<As> = React.PropsWithChildren<{
+    /**
+     * Customize the element type of the rendered container
+     */
+    as?: As;
+    /**
+     * Specify the gap between children elements in the stack
+     */
+    gap?: Gap;
+    /**
+     * Specify the orientation for the stack container
+     * @default vertical
+     */
+    direction?: Direction;
+    /**
+     * Specify the alignment between items in the cross-axis of the orientation
+     * @default stretch
+     */
+    align?: Align;
+    /**
+     * Specify whether items are forced onto one line or can wrap onto multiple lines
+     * @default nowrap
+     */
+    wrap?: Wrap;
+    /**
+     * Specify how items will be distributed in the stacking direction
+     * @default start
+     */
+    justify?: Justify;
+    /**
+     * Specify the padding of the stack container
+     * @default none
+     */
+    padding?: Padding;
+}>;
+declare function Stack<As extends ElementType>({ as, children, align, direction, gap, justify, padding, wrap, ...rest }: StackProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>): React.JSX.Element;
+type StackItemProps<As> = React.PropsWithChildren<{
+    /**
+     * Customize the element type of the rendered container
+     */
+    as?: As;
+    /**
+     * Allow item to keep size or expand to fill the available space
+     * @default false
+     */
+    grow?: boolean | ResponsiveValue<boolean>;
+}>;
+declare function StackItem<As extends ElementType>({ as, children, grow, ...rest }: StackItemProps<As> & React.ComponentPropsWithoutRef<ElementType extends As ? As : 'div'>): React.JSX.Element;
+export { Stack, StackItem };
+export type { StackProps, StackItemProps };
+//# sourceMappingURL=Stack.d.ts.map

package/lib-esm/Stack/Stack.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getResponsiveAttributes } from '../internal/utils/getResponsiveAttributes.js';
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const StyledStack = styled.div.withConfig({
+  displayName: "Stack__StyledStack",
+  componentId: "sc-x3xa2i-0"
+})(["--Stack-gap-whenRegular:var(--stack-gap-normal,16px);--Stack-gap-whenNarrow:var(--stack-gap-normal,16px);--Stack-gap-whenWide:var(--Stack-gap-whenRegular);display:flex;flex-flow:column;align-items:stretch;align-content:flex-start;gap:var(--Stack-gap-whenNarrow);&[data-padding='none'],&[data-padding-narrow='none']{padding:0;}&[data-padding='condensed'],&[data-padding-narrow='condensed']{padding:var(--stack-padding-condensed,8px);}&[data-padding='normal'],&[data-padding-narrow='normal']{padding:var(--stack-padding-normal,16px);}&[data-padding='spacious'],&[data-padding-narrow='spacious']{padding:var(--stack-padding-spacious,24px);}&[data-orientation='horizontal'],&[data-orientation-narrow='horizontal']{flex-flow:row;}&[data-orientation='vertical'],&[data-orientation-narrow='vertical']{flex-flow:column;}&[data-gap='none'],&[data-gap-narrow='none']{--Stack-gap-whenNarrow:0;}&[data-gap='condensed'],&[data-gap-narrow='condensed']{--Stack-gap-whenNarrow:var(--stack-gap-condensed,8px);}&[data-gap='normal'],&[data-gap-narrow='normal']{--Stack-gap-whenNarrow:var(--stack-gap-normal,16px);}&[data-align='start'],&[data-align-narrow='start']{align-items:flex-start;}&[data-align='center'],&[data-align-narrow='center']{align-items:center;}&[data-align='end'],&[data-align-narrow='end']{align-items:flex-end;}&[data-align='baseline'],&[data-align-narrow='baseline']{align-items:baseline;}&[data-spread='start'],&[data-spread-narrow='start']{justify-content:flex-start;}&[data-spread='center'],&[data-spread-narrow='center']{justify-content:center;}&[data-spread='end'],&[data-spread-narrow='end']{justify-content:flex-end;}&[data-spread='space-between'],&[data-spread-narrow='space-between']{justify-content:space-between;}&[data-spread='space-evenly'],&[data-spread-narrow='space-evenly']{justify-content:space-evenly;}&[data-wrap='wrap'],&[data-wrap-narrow='wrap']{flex-wrap:wrap;}&[data-wrap='nowrap'],&[data-wrap-narrow='nowrap']{flex-wrap:nowrap;}@media (min-width:48rem){&[data-padding-regular='none']{padding:0;}&[data-padding-regular='condensed']{padding:var(--stack-padding-condensed,8px);}&[data-padding-regular='normal']{padding:var(--stack-padding-normal,16px);}&[data-padding-regular='spacious']{padding:var(--stack-padding-spacious,24px);}&[data-orientation-regular='horizontal']{flex-flow:row;}&[data-orientation-regular='vertical']{flex-flow:column;}&[data-gap-regular='none']{--Stack-gap-whenRegular:0;}&[data-gap-regular='condensed']{--Stack-gap-whenRegular:var(--stack-gap-condensed,8px);}&[data-gap-regular='normal']{--Stack-gap-whenRegular:var(--stack-gap-normal,16px);}&[data-gap-regular='spacious']{--Stack-gap-whenRegular:var(--stack-gap-spacious,24px);}&[data-align-regular='start']{align-items:flex-start;}&[data-align-regular='center']{align-items:center;}&[data-align-regular='end']{align-items:flex-end;}&[data-align-regular='baseline']{align-items:baseline;}&[data-spread-regular='start']{justify-content:flex-start;}&[data-spread-regular='center']{justify-content:center;}&[data-spread-regular='end']{justify-content:flex-end;}&[data-spread-regular='space-between']{justify-content:space-between;}&[data-spread-regular='space-evenly']{justify-content:space-evenly;}&[data-wrap-regular='wrap']{flex-wrap:wrap;}&[data-wrap-regular='nowrap']{flex-wrap:nowrap;}}@media (min-width:87.5rem){gap:var(--Stack-gap-whenWide);&[data-padding-wide='none']{padding:0;}&[data-padding-wide='condensed']{padding:var(--stack-padding-condensed,8px);}&[data-padding-wide='normal']{padding:var(--stack-padding-normal,16px);}&[data-padding-wide='spacious']{padding:var(--stack-padding-spacious,24px);}&[data-orientation-wide='horizontal']{flex-flow:row;}&[data-orientation-wide='vertical']{flex-flow:column;}&[data-gap-wide='none']{--Stack-gap-whenWide:0;}&[data-gap-wide='condensed']{--Stack-gap-whenWide:var(--stack-gap-condensed,8px);}&[data-gap-wide='normal']{--Stack-gap-whenWide:var(--stack-gap-normal,16px);}&[data-gap-wide='spacious']{--Stack-gap-whenWide:var(--stack-gap-spacious,24px);}&[data-align-wide='start']{align-items:flex-start;}&[data-align-wide='center']{align-items:center;}&[data-align-wide='end']{align-items:flex-end;}&[data-align-wide='baseline']{align-items:baseline;}&[data-spread-wide='start']{justify-content:flex-start;}&[data-spread-wide='center']{justify-content:center;}&[data-spread-wide='end']{justify-content:flex-end;}&[data-spread-wide='space-between']{justify-content:space-between;}&[data-spread-wide='space-evenly']{justify-content:space-evenly;}}"]);
+function Stack({
+  as,
+  children,
+  align = 'stretch',
+  direction = 'vertical',
+  gap,
+  justify = 'start',
+  padding = 'none',
+  wrap = 'nowrap',
+  ...rest
+}) {
+  const BaseComponent = as !== null && as !== void 0 ? as : 'div';
+  return /*#__PURE__*/React.createElement(StyledStack, _extends({}, rest, {
+    as: BaseComponent
+  }, getResponsiveAttributes('gap', gap), getResponsiveAttributes('direction', direction), getResponsiveAttributes('align', align), getResponsiveAttributes('wrap', wrap), getResponsiveAttributes('justify', justify), getResponsiveAttributes('padding', padding)), children);
+}
+Stack.displayName = "Stack";
+const StyledStackItem = styled.div.withConfig({
+  displayName: "Stack__StyledStackItem",
+  componentId: "sc-x3xa2i-1"
+})(["flex:0 1 auto;min-inline-size:0;&[data-grow],&[data-grow-narrow]{flex-grow:1;}@media (min-width:48rem){&[data-grow-regular]{flex-grow:1;}}@media (min-width:87.5rem){&[data-grow-wide]{flex-grow:1;}}"]);
+function StackItem({
+  as,
+  children,
+  grow = false,
+  ...rest
+}) {
+  const BaseComponent = as !== null && as !== void 0 ? as : 'div';
+  return /*#__PURE__*/React.createElement(StyledStackItem, _extends({}, rest, {
+    as: BaseComponent
+  }, getResponsiveAttributes('grow', grow)), children);
+}
+StackItem.displayName = "StackItem";
+
+export { Stack, StackItem };

package/lib-esm/Stack/index.d.ts

@@ -0,0 +1,6 @@
+import { Stack as StackImpl, StackItem } from './Stack';
+export declare const Stack: typeof StackImpl & {
+    Item: typeof StackItem;
+};
+export type { StackProps, StackItemProps } from './Stack';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/Stack/index.js

@@ -0,0 +1,7 @@
+import { Stack as Stack$1, StackItem } from './Stack.js';
+
+const Stack = Object.assign(Stack$1, {
+  Item: StackItem
+});
+
+export { Stack };

package/lib-esm/drafts/ActionBar/ActionBar.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
 import type { IconButtonProps } from '../../Button';
 type Size = 'small' | 'medium' | 'large';
+type A11yProps = {
+    'aria-label': React.AriaAttributes['aria-label'];
+    'aria-labelledby'?: undefined;
+} | {
+    'aria-label'?: undefined;
+    'aria-labelledby': React.AriaAttributes['aria-labelledby'];
+};
 export type ActionBarProps = {
     size?: Size;
-    'aria-label'?: React.AriaAttributes['aria-label'];
     children: React.ReactNode;
-};
+} & A11yProps;
 export type ActionBarIconButtonProps = IconButtonProps;
 export declare const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>>;
 export declare const ActionBarIconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<unknown>>;

package/lib-esm/drafts/ActionBar/ActionBar.js

@@ -35,6 +35,7 @@ const NavigationList = styled.div.withConfig({
 const GAP = 8;
 const listStyles = {
   display: 'flex',
+  minWidth: 0,
   listStyle: 'none',
   whiteSpace: 'nowrap',
   paddingY: 0,

package/lib-esm/drafts/ActionBar/index.js

@@ -1,6 +1,8 @@
-import { ActionBar, ActionBarIconButton, VerticalDivider } from './ActionBar.js';
+import { ActionBar as ActionBar$1, ActionBarIconButton, VerticalDivider } from './ActionBar.js';
 
-Object.assign(ActionBar, {
+const ActionBar = Object.assign(ActionBar$1, {
   IconButton: ActionBarIconButton,
   Divider: VerticalDivider
 });
+
+export { ActionBar as default };

package/lib-esm/drafts/index.d.ts

@@ -25,5 +25,8 @@ export * from './SelectPanel2';
 export { default as TabPanels } from './TabPanels';
 export type { TabPanelsProps, TabPanelsTabProps, TabPanelsPanelProps } from './TabPanels';
 export * from '../TooltipV2';
+export { default as ActionBar } from './ActionBar';
 export * from './ActionBar';
+export { Stack } from '../Stack';
+export type { StackProps, StackItemProps } from '../Stack';
 //# sourceMappingURL=index.d.ts.map

package/lib-esm/drafts/index.js

@@ -17,6 +17,7 @@ export { NavList } from '../NavList/NavList.js';
 export { SelectPanel } from './SelectPanel2/SelectPanel.js';
 export { default as TabPanels } from './TabPanels/TabPanels.js';
 export { Tooltip, TooltipContext } from '../TooltipV2/Tooltip.js';
-import './ActionBar/index.js';
+export { default as ActionBar } from './ActionBar/index.js';
+export { Stack } from '../Stack/index.js';
 export { DataTable } from '../DataTable/DataTable.js';
 export { createColumnHelper } from '../DataTable/column.js';

package/lib-esm/experimental/index.d.ts

@@ -1,2 +1,4 @@
 export * from '../drafts';
+export { FeatureFlags } from '../FeatureFlags';
+export type { FeatureFlagsProps } from '../FeatureFlags';
 //# sourceMappingURL=index.d.ts.map

package/lib-esm/experimental/index.js

@@ -17,6 +17,10 @@ export { NavList } from '../NavList/NavList.js';
 export { SelectPanel } from '../drafts/SelectPanel2/SelectPanel.js';
 export { default as TabPanels } from '../drafts/TabPanels/TabPanels.js';
 export { Tooltip, TooltipContext } from '../TooltipV2/Tooltip.js';
-import '../drafts/ActionBar/index.js';
+export { default as ActionBar } from '../drafts/ActionBar/index.js';
+export { Stack } from '../Stack/index.js';
+export { FeatureFlags } from '../FeatureFlags/FeatureFlags.js';
+import 'react';
+import '../FeatureFlags/DefaultFeatureFlags.js';
 export { DataTable } from '../DataTable/DataTable.js';
 export { createColumnHelper } from '../DataTable/column.js';

package/lib-esm/internal/utils/__tests__/getResponsiveAttributes.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=getResponsiveAttributes.test.d.ts.map

package/lib-esm/internal/utils/getResponsiveAttributes.d.ts

@@ -0,0 +1,19 @@
+import type { ResponsiveValue } from '../../hooks/useResponsiveValue';
+/**
+ * Transform the given property and values in to corresponding data attributes
+ * to be placed on a container. This function is helpful for coordinating
+ * between responsive prop values and the corresponding styles in CSS.
+ *
+ * @param property - The name that will be given to the data attribute. For
+ * example, a property of "gap" will be transformed to `data-gap`.
+ *
+ * If responsive values are used, then the breakpoint name will be appended to
+ * the data attribute name. For example, `data-gap-narrow`.
+ *
+ * @param values - The value, or responsive values, that will be set as the
+ * value of the data property set by `property`. These values should typically
+ * be a `string` or `boolean`. For boolean values, the data attribute will be
+ * set when the value is `true` and will not be set when the value is `false`.
+ */
+export declare function getResponsiveAttributes<T>(property: string, values?: T | ResponsiveValue<T>): Record<string, T extends boolean ? '' : T> | undefined;
+//# sourceMappingURL=getResponsiveAttributes.d.ts.map

package/lib-esm/internal/utils/getResponsiveAttributes.js

@@ -0,0 +1,38 @@
+/**
+ * Transform the given property and values in to corresponding data attributes
+ * to be placed on a container. This function is helpful for coordinating
+ * between responsive prop values and the corresponding styles in CSS.
+ *
+ * @param property - The name that will be given to the data attribute. For
+ * example, a property of "gap" will be transformed to `data-gap`.
+ *
+ * If responsive values are used, then the breakpoint name will be appended to
+ * the data attribute name. For example, `data-gap-narrow`.
+ *
+ * @param values - The value, or responsive values, that will be set as the
+ * value of the data property set by `property`. These values should typically
+ * be a `string` or `boolean`. For boolean values, the data attribute will be
+ * set when the value is `true` and will not be set when the value is `false`.
+ */
+function getResponsiveAttributes(property, values) {
+  if (values === undefined || values === null) {
+    return;
+  }
+  if (typeof values == 'object') {
+    return Object.fromEntries(Object.entries(values).map(([key, value]) => {
+      return serialize(`data-${property}-${key}`, value);
+    }));
+  }
+  return Object.fromEntries([serialize(`data-${property}`, values)]);
+}
+function serialize(property, value) {
+  if (typeof value === 'boolean') {
+    if (value) {
+      return [property, ''];
+    }
+    return [];
+  }
+  return [property, value];
+}
+
+export { getResponsiveAttributes };

package/lib-esm/internal/utils/getResponsiveControlValues.d.ts

@@ -0,0 +1,8 @@
+import type { ResponsiveValue } from '../../hooks/useResponsiveValue';
+/**
+ * Helper utility to get the value for a prop based on control args. This is
+ * helpful when an arg can have both responsive values and a plain value. In
+ * cases where both are defined, responsive values will take preference
+ */
+export declare function getResponsiveControlValues<T>(value: T, responsiveValue: ResponsiveValue<T>): T | ResponsiveValue<T>;
+//# sourceMappingURL=getResponsiveControlValues.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "36.14.0",
+  "version": "36.15.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",