@primer/components 31.2.0-rc.fbb10090 → 31.2.1-rc.32ed6e21

package/lib/ActionList/List.jsx

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const react_1 = __importDefault(require("react"));
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const focusZone_1 = require("../behaviors/focusZone");
+/**
+ * Asserts that the given value fulfills the `GroupedListProps` contract.
+ * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
+ */
+function isGroupedListProps(props) {
+    return 'groupMetadata' in props;
+}
+const StyledList = styled_components_1.default.div `
+  font-size: ${constants_1.get('fontSizes.1')};
+  /* 14px font-size * 1.428571429 = 20px line height
+   *
+   * TODO: When rem-based spacing on a 4px scale lands, replace
+   * hardcoded '20px'
+   */
+  line-height: 20px;
+
+  &[${focusZone_1.hasActiveDescendantAttribute}], &:focus-within {
+    --item-hover-bg-override: none;
+    --item-hover-divider-border-color-override: ${constants_1.get('colors.border.muted')};
+  }
+`;
+/**
+ * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * @param variant `List` style variation.
+ */
+function useListVariant(variant = 'inset') {
+    switch (variant) {
+        case 'full':
+            return {
+                headerStyle: { paddingX: constants_1.get('space.2') },
+                itemStyle: { borderRadius: 0 }
+            };
+        default:
+            return {
+                firstGroupStyle: { marginTop: constants_1.get('space.2') },
+                lastGroupStyle: { marginBottom: constants_1.get('space.2') },
+                itemStyle: { marginX: constants_1.get('space.2') }
+            };
+    }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+exports.List = react_1.default.forwardRef((props, forwardedRef) => {
+    // Get `sx` prop values for `List` children matching the given `List` style variation.
+    const { firstGroupStyle, lastGroupStyle, headerStyle, itemStyle } = useListVariant(props.variant);
+    /**
+     * Render a `Group` using the first of the following renderers that is defined:
+     * A `Group`-level or `List`-level custom `Group` renderer, or
+     * the default `Group` renderer.
+     */
+    const renderGroup = (groupProps) => {
+        const GroupComponent = (('renderGroup' in groupProps && groupProps.renderGroup) ?? props.renderGroup) || Group_1.Group;
+        return <GroupComponent {...groupProps} key={groupProps.groupId}/>;
+    };
+    /**
+     * Render an `Item` using the first of the following renderers that is defined:
+     * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+     * or the default `Item` renderer.
+     */
+    const renderItem = (itemProps, item, itemIndex) => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item_1.Item;
+        const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString();
+        return (<ItemComponent showDivider={props.showItemDividers} selectionVariant={props.selectionVariant} {...itemProps} key={key} sx={{ ...itemStyle, ...itemProps.sx }} item={item}/>);
+    };
+    /**
+     * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+     */
+    let groups = [];
+    // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+    if (!isGroupedListProps(props)) {
+        // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+        groups = [{ items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0' }];
+    }
+    else {
+        // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+        /**
+         * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+         */
+        const groupMap = props.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
+        for (const itemProps of props.items) {
+            // Look up the group associated with the current item.
+            const group = groupMap.get(itemProps.groupId);
+            const itemIndex = group?.items?.length ?? 0;
+            // Upsert the group to include the current item (rendered).
+            groupMap.set(itemProps.groupId, {
+                ...group,
+                items: [
+                    ...(group?.items ?? []),
+                    renderItem({
+                        showDivider: group?.showItemDividers,
+                        ...(group && 'renderItem' in group && { renderItem: group.renderItem }),
+                        ...itemProps
+                    }, itemProps, itemIndex)
+                ]
+            });
+        }
+        groups = [...groupMap.values()];
+    }
+    return (<StyledList {...props} ref={forwardedRef}>
+      {groups.map(({ header, ...groupProps }, index) => {
+            const hasFilledHeader = header?.variant === 'filled';
+            const shouldShowDivider = index > 0 && !hasFilledHeader;
+            return (<react_1.default.Fragment key={groupProps.groupId}>
+            {shouldShowDivider ? <Divider_1.Divider key={`${groupProps.groupId}-divider`}/> : null}
+            {renderGroup({
+                    sx: {
+                        ...(index === 0 && firstGroupStyle),
+                        ...(index === groups.length - 1 && lastGroupStyle),
+                        ...(index > 0 && !shouldShowDivider && { mt: 2 })
+                    },
+                    ...(header && {
+                        header: {
+                            ...header,
+                            sx: { ...headerStyle, ...header.sx }
+                        }
+                    }),
+                    ...groupProps
+                })}
+          </react_1.default.Fragment>);
+        })}
+    </StyledList>);
+});
+exports.List.displayName = 'ActionList';

package/lib/ActionList/index.js

@@ -1,29 +1,18 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionList = void 0;
-
-var _List = require("./List");
-
-var _Group = require("./Group");
-
-var _Item = require("./Item");
-
-var _Divider = require("./Divider");
-
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
 /**
  * Collection of list-related components.
  */
-const ActionList = Object.assign(_List.List, {
-  /** Collects related `Items` in an `ActionList`. */
-  Group: _Group.Group,
-
-  /** An actionable or selectable `Item` with an optional icon and description. */
-  Item: _Item.Item,
-
-  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-  Divider: _Divider.Divider
+exports.ActionList = Object.assign(List_1.List, {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: Group_1.Group,
+    /** An actionable or selectable `Item` with an optional icon and description. */
+    Item: Item_1.Item,
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: Divider_1.Divider
 });
-exports.ActionList = ActionList;

package/lib/ActionList2/Description.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SxProp } from '../sx';
+export declare type DescriptionProps = {
+    /**
+     * Secondary text style variations.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    variant?: 'inline' | 'block';
+} & SxProp;
+export declare const Description: React.FC<DescriptionProps>;

package/lib/ActionList2/Description.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Description = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _Truncate = _interopRequireDefault(require("../Truncate"));
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Description = ({
+  variant = 'inline',
+  sx = {},
+  ...props
+}) => {
+  const styles = {
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  };
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
+  }, ({
+    blockDescriptionId,
+    inlineDescriptionId,
+    disabled
+  }) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    id: blockDescriptionId
+  }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
+    id: inlineDescriptionId,
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    title: props.children,
+    inline: true,
+    maxWidth: "100%"
+  }, props.children));
+};
+
+exports.Description = Description;
+Description.displayName = "Description";

package/lib/ActionList2/Description.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const sx_1 = require("../sx");
+const Truncate_1 = __importDefault(require("../Truncate"));
+const Item_1 = require("./Item");
+const Description = ({ variant = 'inline', sx = {}, ...props }) => {
+    const styles = {
+        fontSize: 0,
+        lineHeight: '16px',
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: 0,
+        marginLeft: variant === 'block' ? 0 : 2
+    };
+    return (<Item_1.Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({ blockDescriptionId, inlineDescriptionId, disabled }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} id={blockDescriptionId}>
+            {props.children}
+          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} title={props.children} inline={true} maxWidth="100%">
+            {props.children}
+          </Truncate_1.default>)}
+    </Item_1.Slot>);
+};
+exports.Description = Description;

package/lib/ActionList2/Divider.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare function Divider(): JSX.Element;

package/lib/ActionList2/Divider.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+function Divider() {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "li",
+    role: "separator",
+    sx: {
+      height: 1,
+      backgroundColor: 'actionListItem.inlineDivider',
+      marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
+      marginBottom: 2,
+      listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+
+    },
+    "data-component": "ActionList.Divider"
+  });
+}
+
+Divider.displayName = "Divider";

package/lib/ActionList2/Divider.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const constants_1 = require("../constants");
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+function Divider() {
+    return (<Box_1.default as="li" role="separator" sx={{
+            height: 1,
+            backgroundColor: 'actionListItem.inlineDivider',
+            marginTop: (theme) => `calc(${constants_1.get('space.2')(theme)} - 1px)`,
+            marginBottom: 2,
+            listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+        }} data-component="ActionList.Divider"/>);
+}
+exports.Divider = Divider;

package/lib/ActionList2/Group.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SxProp } from '../sx';
+import { ListProps } from './List';
+import { AriaRole } from '../utils/types';
+export declare type GroupProps = {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title?: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+    /**
+     * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
+     */
+    role?: AriaRole;
+} & SxProp & {
+    /**
+     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
+     */
+    selectionVariant?: ListProps['selectionVariant'] | false;
+};
+declare type ContextProps = Pick<GroupProps, 'selectionVariant'>;
+export declare const GroupContext: React.Context<ContextProps>;
+export declare const Group: React.FC<GroupProps>;
+export declare type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
+    labelId: string;
+};
+export {};

package/lib/ActionList2/Group.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Group = exports.GroupContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ssr = require("@react-aria/ssr");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _List = require("./List");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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 GroupContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.GroupContext = GroupContext;
+
+const Group = ({
+  title,
+  variant = 'subtle',
+  auxiliaryText,
+  selectionVariant,
+  role,
+  sx = {},
+  ...props
+}) => {
+  const labelId = (0, _ssr.useSSRSafeId)();
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "li",
+    sx: {
+      '&:not(:first-child)': {
+        marginTop: 2
+      },
+      listStyle: 'none',
+      // hide the ::marker inserted by browser's stylesheet
+      ...sx
+    }
+  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
+    title: title,
+    variant: variant,
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
+  }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
+    value: {
+      selectionVariant
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "ul",
+    sx: {
+      paddingInlineStart: 0
+    },
+    "aria-labelledby": title ? labelId : undefined,
+    role: role
+  }, props.children)));
+};
+
+exports.Group = Group;
+Group.displayName = "Group";
+
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({
+  variant,
+  title,
+  auxiliaryText,
+  labelId,
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: styles,
+    role: "presentation",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/_react.default.createElement("span", {
+    id: labelId
+  }, title), auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+};
+
+Header.displayName = "Header";

package/lib/ActionList2/Group.jsx

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = exports.GroupContext = void 0;
+const react_1 = __importDefault(require("react"));
+const ssr_1 = require("@react-aria/ssr");
+const Box_1 = __importDefault(require("../Box"));
+const List_1 = require("./List");
+exports.GroupContext = react_1.default.createContext({});
+const Group = ({ title, variant = 'subtle', auxiliaryText, selectionVariant, role, sx = {}, ...props }) => {
+    const labelId = ssr_1.useSSRSafeId();
+    return (<Box_1.default as="li" sx={{
+            '&:not(:first-child)': { marginTop: 2 },
+            listStyle: 'none',
+            ...sx
+        }} {...props}>
+      {title && <Header title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId}/>}
+      <exports.GroupContext.Provider value={{ selectionVariant }}>
+        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }} aria-labelledby={title ? labelId : undefined} role={role}>
+          {props.children}
+        </Box_1.default>
+      </exports.GroupContext.Provider>
+    </Box_1.default>);
+};
+exports.Group = Group;
+/**
+ * Displays the name and description of a `Group`.
+ *
+ * For visual presentation only. It's hidden from screen readers.
+ */
+const Header = ({ variant, title, auxiliaryText, labelId, ...props }) => {
+    const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
+    const styles = {
+        paddingY: '6px',
+        paddingX: listVariant === 'full' ? 2 : 3,
+        fontSize: 0,
+        fontWeight: 'bold',
+        color: 'fg.muted',
+        ...(variant === 'filled' && {
+            backgroundColor: 'canvas.subtle',
+            marginX: 0,
+            marginBottom: 2,
+            borderTop: '1px solid',
+            borderBottom: '1px solid',
+            borderColor: 'neutral.muted'
+        })
+    };
+    return (<Box_1.default sx={styles} role="presentation" aria-hidden="true" {...props}>
+      <span id={labelId}>{title}</span>
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box_1.default>);
+};

package/lib/ActionList2/Header.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export declare type HeaderProps = {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title?: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+} & SxProp;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;

package/lib/ActionList2/Header.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _List = require("./List");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+const Header = ({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  sx = {},
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = _react.default.useContext(_List.ListContext);
+
+  const styles = {
+    paddingY: '6px',
+    paddingX: listVariant === 'full' ? 2 : 3,
+    fontSize: 0,
+    fontWeight: 'bold',
+    color: 'fg.muted',
+    ...(variant === 'filled' && {
+      backgroundColor: 'canvas.subtle',
+      marginX: 0,
+      marginBottom: 2,
+      borderTop: '1px solid',
+      borderBottom: '1px solid',
+      borderColor: 'neutral.muted'
+    }),
+    ...sx
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: styles,
+    role: "heading"
+  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+};
+
+exports.Header = Header;
+Header.displayName = "Header";

package/lib/ActionList2/Header.jsx

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const List_1 = require("./List");
+/**
+ * Displays the name and description of a `Group`.
+ */
+const Header = ({ variant = 'subtle', title, auxiliaryText, sx = {}, ...props }) => {
+    const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
+    const styles = {
+        paddingY: '6px',
+        paddingX: listVariant === 'full' ? 2 : 3,
+        fontSize: 0,
+        fontWeight: 'bold',
+        color: 'fg.muted',
+        ...(variant === 'filled' && {
+            backgroundColor: 'canvas.subtle',
+            marginX: 0,
+            marginBottom: 2,
+            borderTop: '1px solid',
+            borderBottom: '1px solid',
+            borderColor: 'neutral.muted'
+        }),
+        ...sx
+    };
+    return (<Box_1.default sx={styles} role="heading" {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box_1.default>);
+};
+exports.Header = Header;