@primer/react 36.7.2 → 36.8.0

package/lib/drafts/MarkdownEditor/Toolbar.js

@@ -5,44 +5,15 @@ var octiconsReact = require('@primer/octicons-react');
 var React = require('react');
 var utils = require('@primer/behaviors/utils');
 var Box = require('../../Box/Box.js');
-var IconButton = require('../../Button/IconButton.js');
-require('@styled-system/css');
-require('deepmerge');
-require('../../ThemeProvider.js');
-require('../../Button/types.js');
-require('../../utils/defaultSxProp.js');
-require('../../CounterLabel/CounterLabel.js');
-require('../../Button/Button.js');
 var useFocusZone = require('../../hooks/useFocusZone.js');
 var _MarkdownEditorContext = require('./_MarkdownEditorContext.js');
 var _SavedReplies = require('./_SavedReplies.js');
+var _ToolbarButton = require('./_ToolbarButton.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-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 ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    disabled,
-    condensed
-  } = React.useContext(_MarkdownEditorContext.MarkdownEditorContext);
-  return /*#__PURE__*/React__default.default.createElement(IconButton.IconButton, _extends({
-    ref: ref,
-    size: condensed ? 'small' : 'medium',
-    variant: "invisible",
-    disabled: disabled
-    // Prevent focus leaving input:
-    ,
-    onMouseDown: e => e.preventDefault()
-  }, props, {
-    sx: {
-      color: 'fg.muted',
-      ...props.sx
-    }
-  }));
-});
-ToolbarButton.displayName = 'MarkdownEditor.ToolbarButton';
 const Divider = () => {
   return /*#__PURE__*/React__default.default.createElement(Box, {
     sx: {
@@ -62,77 +33,77 @@ const DefaultToolbarButtons = /*#__PURE__*/React.memo(() => {
   const cmdOrCtrl = utils.isMacOS() ? 'Cmd' : 'Ctrl';
 
   // Important: do not replace `() => ref.current?.format()` with `ref.current?.format` - it will refer to an outdated ref.current!
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c;
       return (_formattingToolsRef$c = formattingToolsRef.current) === null || _formattingToolsRef$c === void 0 ? void 0 : _formattingToolsRef$c.header();
     },
     icon: octiconsReact.HeadingIcon,
     "aria-label": "Add header text"
-  }), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  }), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c2;
       return (_formattingToolsRef$c2 = formattingToolsRef.current) === null || _formattingToolsRef$c2 === void 0 ? void 0 : _formattingToolsRef$c2.bold();
     },
     icon: octiconsReact.BoldIcon,
     "aria-label": `Bold (${cmdOrCtrl} + B)`
-  }), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  }), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c3;
       return (_formattingToolsRef$c3 = formattingToolsRef.current) === null || _formattingToolsRef$c3 === void 0 ? void 0 : _formattingToolsRef$c3.italic();
     },
     icon: octiconsReact.ItalicIcon,
     "aria-label": `Italic (${cmdOrCtrl} + I)`
-  })), /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(Divider, null), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  })), /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(Divider, null), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c4;
       return (_formattingToolsRef$c4 = formattingToolsRef.current) === null || _formattingToolsRef$c4 === void 0 ? void 0 : _formattingToolsRef$c4.quote();
     },
     icon: octiconsReact.QuoteIcon,
     "aria-label": `Insert a quote (${cmdOrCtrl} + Shift + .)`
-  }), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  }), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c5;
       return (_formattingToolsRef$c5 = formattingToolsRef.current) === null || _formattingToolsRef$c5 === void 0 ? void 0 : _formattingToolsRef$c5.code();
     },
     icon: octiconsReact.CodeIcon,
     "aria-label": `Insert code (${cmdOrCtrl} + E)`
-  }), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  }), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c6;
       return (_formattingToolsRef$c6 = formattingToolsRef.current) === null || _formattingToolsRef$c6 === void 0 ? void 0 : _formattingToolsRef$c6.link();
     },
     icon: octiconsReact.LinkIcon,
     "aria-label": `Add a link (${cmdOrCtrl} + K)`
-  })), /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(Divider, null), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  })), /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(Divider, null), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c7;
       return (_formattingToolsRef$c7 = formattingToolsRef.current) === null || _formattingToolsRef$c7 === void 0 ? void 0 : _formattingToolsRef$c7.unorderedList();
     },
     icon: octiconsReact.ListUnorderedIcon,
     "aria-label": `Add a bulleted list (${cmdOrCtrl} + 8)`
-  }), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  }), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c8;
       return (_formattingToolsRef$c8 = formattingToolsRef.current) === null || _formattingToolsRef$c8 === void 0 ? void 0 : _formattingToolsRef$c8.orderedList();
     },
     icon: octiconsReact.ListOrderedIcon,
     "aria-label": `Add a numbered list (${cmdOrCtrl} + Shift + 7)`
-  }), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  }), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c9;
       return (_formattingToolsRef$c9 = formattingToolsRef.current) === null || _formattingToolsRef$c9 === void 0 ? void 0 : _formattingToolsRef$c9.taskList();
     },
     icon: octiconsReact.TasklistIcon,
     "aria-label": `Add a task list (${cmdOrCtrl} + Shift + L)`
-  })), !condensed && /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(Divider, null), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  })), !condensed && /*#__PURE__*/React__default.default.createElement(Box, null, /*#__PURE__*/React__default.default.createElement(Divider, null), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c10;
       return (_formattingToolsRef$c10 = formattingToolsRef.current) === null || _formattingToolsRef$c10 === void 0 ? void 0 : _formattingToolsRef$c10.mention();
     },
     icon: octiconsReact.MentionIcon,
     "aria-label": "Mention a user or team (@)"
-  }), /*#__PURE__*/React__default.default.createElement(ToolbarButton, {
+  }), /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, {
     onClick: () => {
       var _formattingToolsRef$c11;
       return (_formattingToolsRef$c11 = formattingToolsRef.current) === null || _formattingToolsRef$c11 === void 0 ? void 0 : _formattingToolsRef$c11.reference();
@@ -177,7 +148,7 @@ const Toolbar = ({
 Toolbar.displayName = "Toolbar";
 Toolbar.displayName = 'MarkdownEditor.Toolbar';
 
+exports.ToolbarButton = _ToolbarButton.ToolbarButton;
 exports.CoreToolbar = CoreToolbar;
 exports.DefaultToolbarButtons = DefaultToolbarButtons;
 exports.Toolbar = Toolbar;
-exports.ToolbarButton = ToolbarButton;

package/lib/drafts/MarkdownEditor/_SavedReplies.js

@@ -3,7 +3,7 @@
 var octiconsReact = require('@primer/octicons-react');
 var React = require('react');
 var SelectPanel = require('../../SelectPanel/SelectPanel.js');
-var Toolbar = require('./Toolbar.js');
+var _ToolbarButton = require('./_ToolbarButton.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -61,7 +61,7 @@ const SavedRepliesButton = () => {
     }
   };
   return items ? /*#__PURE__*/React__default.default.createElement(SelectPanel.SelectPanel, {
-    renderAnchor: props => /*#__PURE__*/React__default.default.createElement(Toolbar.ToolbarButton, _extends({}, props, {
+    renderAnchor: props => /*#__PURE__*/React__default.default.createElement(_ToolbarButton.ToolbarButton, _extends({}, props, {
       icon: octiconsReact.ReplyIcon,
       "aria-label": "Add saved reply (Ctrl + .)",
       "aria-labelledby": undefined

package/lib/drafts/MarkdownEditor/_ToolbarButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconButtonProps } from '../../Button';
+export declare const ToolbarButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=_ToolbarButton.d.ts.map

package/lib/drafts/MarkdownEditor/_ToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_ToolbarButton.d.ts","sourceRoot":"","sources":["../../../src/drafts/MarkdownEditor/_ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AACnD,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAA;AAGxD,eAAO,MAAM,aAAa,2FAexB,CAAA"}

package/lib/drafts/MarkdownEditor/_ToolbarButton.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var IconButton = require('../../Button/IconButton.js');
+require('../../Box/Box.js');
+require('@styled-system/css');
+require('deepmerge');
+require('../../ThemeProvider.js');
+require('../../Button/types.js');
+require('../../utils/defaultSxProp.js');
+require('../../CounterLabel/CounterLabel.js');
+require('../../Button/Button.js');
+var _MarkdownEditorContext = require('./_MarkdownEditorContext.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+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 ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    condensed
+  } = React.useContext(_MarkdownEditorContext.MarkdownEditorContext);
+  return /*#__PURE__*/React__default.default.createElement(IconButton.IconButton, _extends({
+    ref: ref,
+    size: condensed ? 'small' : 'medium',
+    variant: "invisible",
+    disabled: disabled
+    // Prevent focus leaving input:
+    ,
+    onMouseDown: e => e.preventDefault()
+  }, props, {
+    sx: {
+      color: 'fg.muted',
+      ...props.sx
+    }
+  }));
+});
+ToolbarButton.displayName = 'MarkdownEditor.ToolbarButton';
+
+exports.ToolbarButton = ToolbarButton;

package/lib/drafts/MarkdownEditor/index.js

@@ -5,6 +5,7 @@ var Toolbar = require('./Toolbar.js');
 var Actions = require('./Actions.js');
 var Footer = require('./Footer.js');
 var Label = require('./Label.js');
+var _ToolbarButton = require('./_ToolbarButton.js');
 
 /** @deprecated Will be removed in v37 (https://github.com/primer/react/issues/3604) */
 const MarkdownEditor = Object.assign(MarkdownEditor$1, {
@@ -20,7 +21,7 @@ const MarkdownEditor = Object.assign(MarkdownEditor$1, {
    * A custom toolbar button. This takes `IconButton` props. Every toolbar button should
    * have an `aria-label` defined.
    */
-  ToolbarButton: Toolbar.ToolbarButton,
+  ToolbarButton: _ToolbarButton.ToolbarButton,
   /**
    * The full set of default toolbar buttons. This is all the basic formatting tools in a
    * standardized order.

package/lib-esm/ActionList/Group.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SxProp } from '../sx';
-import { ActionListProps } from './List';
+import { type ActionListProps } from './shared';
 import { AriaRole } from '../utils/types';
 import type { ActionListHeadingProps } from './Heading';
 export type ActionListGroupProps = {

package/lib-esm/ActionList/Group.js

@@ -3,7 +3,7 @@ import { useId } from '../hooks/useId.js';
 import Box from '../Box/Box.js';
 import '@styled-system/css';
 import merge from 'deepmerge';
-import { ListContext } from './List.js';
+import { ListContext } from './shared.js';
 import Heading from '../Heading/Heading.js';
 import { useSlots } from '../hooks/useSlots.js';
 import { defaultSxProp } from '../utils/defaultSxProp.js';

package/lib-esm/ActionList/Heading.js

@@ -6,7 +6,7 @@ import '@primer/behaviors/utils';
 import '@primer/behaviors';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import Heading$1 from '../Heading/Heading.js';
-import { ListContext } from './List.js';
+import { ListContext } from './shared.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import { ActionListContainerContext } from './ActionListContainerContext.js';
 import { invariant } from '../utils/invariant.js';

package/lib-esm/ActionList/Item.js

@@ -11,9 +11,8 @@ import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { ActionListContainerContext } from './ActionListContainerContext.js';
 import { Description } from './Description.js';
 import { GroupContext } from './Group.js';
-import { ListContext } from './List.js';
+import { ListContext, TEXT_ROW_HEIGHT, getVariantStyles, ItemContext } from './shared.js';
 import { Selection } from './Selection.js';
-import { TEXT_ROW_HEIGHT, getVariantStyles, ItemContext } from './shared.js';
 import { LeadingVisual, TrailingVisual } from './Visuals.js';
 import merge from 'deepmerge';
 

package/lib-esm/ActionList/LinkItem.js

@@ -3,78 +3,7 @@ import Link from '../Link/Link.js';
 import '@styled-system/css';
 import merge from 'deepmerge';
 import { Item } from './Item.js';
-import '../theme.js';
-import '../constants.js';
-import '../BaseStyles.js';
-import '../ThemeProvider.js';
 import Box from '../Box/Box.js';
-import '../Button/types.js';
-import '../utils/defaultSxProp.js';
-import '../CounterLabel/CounterLabel.js';
-import '../Button/Button.js';
-import '../PageLayout/PageLayout.js';
-import '../SplitPageLayout/SplitPageLayout.js';
-import '@primer/behaviors/utils';
-import '../ConfirmationDialog/ConfirmationDialog.js';
-import '@primer/behaviors';
-import '../hooks/useMedia.js';
-import '../Radio/Radio.js';
-import './index.js';
-import '../ActionMenu/ActionMenu.js';
-import '../AnchoredOverlay/AnchoredOverlay.js';
-import '../Autocomplete/Autocomplete.js';
-import '../Avatar/Avatar.js';
-import '../AvatarPair/AvatarPair.js';
-import '../AvatarStack/AvatarStack.js';
-import '../BranchName/BranchName.js';
-import '../Breadcrumbs/Breadcrumbs.js';
-import '../ButtonGroup/ButtonGroup.js';
-import '../Caret.js';
-import '../CircleOcticon/CircleOcticon.js';
-import '../CheckboxGroup/CheckboxGroup.js';
-import '../CircleBadge/CircleBadge.js';
-import '../Details/Details.js';
-import '../Dialog.js';
-import '../Flash/Flash.js';
-import '../FormControl/_FormControlContext.js';
-import '../FormControl/FormControl.js';
-import '../Header/Header.js';
-import '../Heading/Heading.js';
-import '../Label/Label.js';
-import '../LabelGroup/LabelGroup.js';
-import '../NavList/NavList.js';
-import '../Octicon/Octicon.js';
-import '../Overlay/Overlay.js';
-import '../Pagehead/Pagehead.js';
-import '../Pagination/Pagination.js';
-import '../PointerBox/PointerBox.js';
-import '../Popover/Popover.js';
-import 'react-dom';
-import '../ProgressBar/index.js';
-import '../RadioGroup/RadioGroup.js';
-import '../RelativeTime/RelativeTime.js';
-import '../SegmentedControl/SegmentedControl.js';
-import '../Select.js';
-import '../SelectPanel/SelectPanel.js';
-import '../SideNav.js';
-import '../Spinner/Spinner.js';
-import '../StateLabel/StateLabel.js';
-import '../SubNav/SubNav.js';
-import '../ToggleSwitch/ToggleSwitch.js';
-import '../TabNav/TabNav.js';
-import '../TextInput/TextInput.js';
-import '../TextInputWithTokens/TextInputWithTokens.js';
-import '../Text/Text.js';
-import '../Timeline/Timeline.js';
-import '../Token/Token.js';
-import '../Token/IssueLabelToken.js';
-import '../Token/AvatarToken.js';
-import '../Tooltip/Tooltip.js';
-import '../Truncate/Truncate.js';
-import '../Checkbox/Checkbox.js';
-import '../Textarea/Textarea.js';
-import '../TreeView/TreeView.js';
-import '../UnderlineNav/index.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); }
 

package/lib-esm/ActionList/List.d.ts

@@ -1,29 +1,4 @@
-import React from 'react';
 import { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import { SxProp } from '../sx';
-import { AriaRole } from '../utils/types';
-export type ActionListProps = React.PropsWithChildren<{
-    /**
-     * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
-     */
-    variant?: 'inset' | 'full';
-    /**
-     * Whether multiple Items or a single Item can be selected.
-     */
-    selectionVariant?: 'single' | 'multiple';
-    /**
-     * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
-     */
-    showDividers?: boolean;
-    /**
-     * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
-     */
-    role?: AriaRole;
-}> & SxProp;
-type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'> & {
-    headingId?: string;
-};
-export declare const ListContext: React.Context<ContextProps>;
+import { type ActionListProps } from './shared';
 export declare const List: PolymorphicForwardRefComponent<"ul", ActionListProps>;
-export {};
 //# sourceMappingURL=List.d.ts.map

package/lib-esm/ActionList/List.js

@@ -6,10 +6,10 @@ import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { useSlots } from '../hooks/useSlots.js';
 import { Heading } from './Heading.js';
 import { useId } from '../hooks/useId.js';
+import { ListContext } from './shared.js';
 import merge from 'deepmerge';
 
 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 ListContext = /*#__PURE__*/React.createContext({});
 const ListBox = styled.ul.withConfig({
   displayName: "List__ListBox",
   componentId: "sc-1x7olzq-0"
@@ -59,4 +59,4 @@ const List = /*#__PURE__*/React.forwardRef(({
 });
 List.displayName = 'ActionList';
 
-export { List, ListContext };
+export { List };

package/lib-esm/ActionList/Selection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ActionListItemProps } from './shared';
+import { type ActionListItemProps } from './shared';
 type SelectionProps = Pick<ActionListItemProps, 'selected'>;
 export declare const Selection: React.FC<React.PropsWithChildren<SelectionProps>>;
 export {};

package/lib-esm/ActionList/Selection.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckIcon } from '@primer/octicons-react';
-import { ListContext } from './List.js';
 import { GroupContext } from './Group.js';
+import { ListContext } from './shared.js';
 import { LeadingVisualContainer } from './Visuals.js';
 import Box from '../Box/Box.js';
 

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type { ActionListProps } from './List';
+export type { ActionListProps } from './shared';
 export type { ActionListGroupProps } from './Group';
 export type { ActionListItemProps } from './shared';
 export type { ActionListLinkItemProps } from './LinkItem';
@@ -10,7 +10,7 @@ export type { ActionListHeadingProps } from './Heading';
 /**
  * Collection of list-related components.
  */
-export declare const ActionList: import("../utils/polymorphic").ForwardRefComponent<"ul", import("./List").ActionListProps> & {
+export declare const ActionList: import("../utils/polymorphic").ForwardRefComponent<"ul", import("./shared").ActionListProps> & {
     /** Collects related `Items` in an `ActionList`. */
     Group: import("react").FC<import("react").PropsWithChildren<import("./Group").ActionListGroupProps>>;
     /** An actionable or selectable `Item` */

package/lib-esm/ActionList/shared.d.ts

@@ -75,5 +75,27 @@ export declare const getVariantStyles: (variant: ActionListItemProps['variant'],
     hoverColor: string;
 };
 export declare const TEXT_ROW_HEIGHT = "20px";
+export type ActionListProps = React.PropsWithChildren<{
+    /**
+     * `inset` children are offset (vertically and horizontally) from `List`’s edges, `full` children are flush (vertically and horizontally) with `List` edges
+     */
+    variant?: 'inset' | 'full';
+    /**
+     * Whether multiple Items or a single Item can be selected.
+     */
+    selectionVariant?: 'single' | 'multiple';
+    /**
+     * Display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+     */
+    showDividers?: boolean;
+    /**
+     * The ARIA role describing the function of `List` component. `listbox` or `menu` are a common values.
+     */
+    role?: AriaRole;
+}> & SxProp;
+type ContextProps = Pick<ActionListProps, 'variant' | 'selectionVariant' | 'showDividers' | 'role'> & {
+    headingId?: string;
+};
+export declare const ListContext: React.Context<ContextProps>;
 export {};
 //# sourceMappingURL=shared.d.ts.map

package/lib-esm/ActionList/shared.js

@@ -35,4 +35,6 @@ const getVariantStyles = (variant, disabled, inactive) => {
 };
 const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
 
-export { ItemContext, TEXT_ROW_HEIGHT, getVariantStyles };
+const ListContext = /*#__PURE__*/React.createContext({});
+
+export { ItemContext, ListContext, TEXT_ROW_HEIGHT, getVariantStyles };

package/lib-esm/ButtonGroup/ButtonGroup.js

@@ -5,6 +5,6 @@ import sx from '../sx.js';
 const ButtonGroup = styled.div.withConfig({
   displayName: "ButtonGroup",
   componentId: "sc-1gxhls1-0"
-})(["display:inline-flex;vertical-align:middle;isolation:isolate;&& > *{margin-inline-end:-1px;position:relative;border-radius:0;:first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}:last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}:focus,:active,:hover{z-index:1;}}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx);
+})(["display:inline-flex;vertical-align:middle;isolation:isolate;&& > [type='button'],&& > span[role='tooltip'] > [type='button']{margin-inline-end:-1px;position:relative;border-radius:0;:focus,:active,:hover{z-index:1;}}&& > [type='button']:first-child,&& > span[role='tooltip']:first-of-type > [type='button']{border-top-left-radius:", ";border-bottom-left-radius:", ";}&& > [type='button']:last-of-type,&& > span[role='tooltip']:last-of-type > [type='button']{border-top-right-radius:", ";border-bottom-right-radius:", ";}", ";"], get('radii.2'), get('radii.2'), get('radii.2'), get('radii.2'), sx);
 
 export { ButtonGroup as default };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ButtonProps } from '../Button';
 import { SxProp } from '../sx';
+import { ResponsiveValue } from '../hooks/useResponsiveValue';
 /**
  * Props that characterize a button to be rendered into the footer of
  * a Dialog.
@@ -95,6 +96,10 @@ export interface DialogProps extends SxProp {
      * auto: variable based on contents
      */
     height?: DialogHeight;
+    /**
+     * The position of the dialog
+     */
+    position?: 'center' | 'left' | 'right' | ResponsiveValue<'left' | 'right' | 'bottom' | 'fullscreen' | 'center'>;
 }
 /**
  * Props that are passed to a component that serves as a dialog header

package/lib-esm/Dialog/Dialog.js

@@ -25,8 +25,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /* Dialog Version 2 */
 
-const ANIMATION_DURATION = '200ms';
-
 /**
  * Props that characterize a button to be rendered into the footer of
  * a Dialog.
@@ -43,7 +41,7 @@ const ANIMATION_DURATION = '200ms';
 const Backdrop = styled('div').withConfig({
   displayName: "Dialog__Backdrop",
   componentId: "sc-uaxjsn-0"
-})(["position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;background-color:", ";animation:dialog-backdrop-appear ", " ", ";@keyframes dialog-backdrop-appear{0%{opacity:0;}100%{opacity:1;}}"], get('colors.primer.canvas.backdrop'), ANIMATION_DURATION, get('animation.easeOutCubic'));
+})(["position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;background-color:", ";animation:dialog-backdrop-appear 200ms ", ";&[data-position-regular='center']{align-items:center;justify-content:center;}&[data-position-regular='left']{align-items:center;justify-content:flex-start;}&[data-position-regular='right']{align-items:center;justify-content:flex-end;}.DialogOverflowWrapper{flex-grow:1;}@media (max-width:767px){&[data-position-narrow='center']{align-items:center;justify-content:center;}&[data-position-narrow='bottom']{align-items:end;justify-content:center;}}@keyframes dialog-backdrop-appear{0%{opacity:0;}100%{opacity:1;}}"], get('colors.primer.canvas.backdrop'), get('animation.easeOutCubic'));
 const heightMap = {
   small: '480px',
   large: '640px',
@@ -58,13 +56,19 @@ const widthMap = {
 const StyledDialog = styled.div.withConfig({
   displayName: "Dialog__StyledDialog",
   componentId: "sc-uaxjsn-1"
-})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);width:", ";height:", ";border-radius:12px;opacity:1;animation:overlay--dialog-appear ", " ", ";@keyframes overlay--dialog-appear{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => {
+})(["display:flex;flex-direction:column;background-color:", ";box-shadow:", ";width:", ";height:", ";min-width:296px;max-width:calc(100vw - 64px);max-height:calc(100vh - 64px);border-radius:12px;opacity:1;@media screen and (prefers-reduced-motion:no-preference){animation:Overlay--motion-scaleFade 0.2s cubic-bezier(0.33,1,0.68,1) 0s 1 normal none running;}&[data-position-regular='center']{border-radius:var(--borderRadius-large,0.75rem);@media screen and (prefers-reduced-motion:no-preference){animation:Overlay--motion-scaleFade 0.2s cubic-bezier(0.33,1,0.68,1) 0s 1 normal none running;}}&[data-position-regular='left']{height:100vh;max-height:unset;border-radius:var(--borderRadius-large,0.75rem);border-top-left-radius:0;border-bottom-left-radius:0;@media screen and (prefers-reduced-motion:no-preference){animation:Overlay--motion-slideInRight 0.25s cubic-bezier(0.33,1,0.68,1) 0s 1 normal none running;}}&[data-position-regular='right']{height:100vh;max-height:unset;border-radius:var(--borderRadius-large,0.75rem);border-top-right-radius:0;border-bottom-right-radius:0;@media screen and (prefers-reduced-motion:no-preference){animation:Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33,1,0.68,1) 0s 1 normal none running;}}@media (max-width:767px){&[data-position-narrow='center']{border-radius:var(--borderRadius-large,0.75rem);width:", ";height:", ";}&[data-position-narrow='bottom']{width:100vw;height:auto;max-width:100vw;max-height:calc(100vh - 64px);border-radius:var(--borderRadius-large,0.75rem);border-bottom-right-radius:0;border-bottom-left-radius:0;@media screen and (prefers-reduced-motion:no-preference){animation:Overlay--motion-slideUp 0.25s cubic-bezier(0.33,1,0.68,1) 0s 1 normal none running;}}&[data-position-narrow='fullscreen']{width:100%;max-width:100vw;height:100%;max-height:100vh;border-radius:unset !important;flex-grow:1;@media screen and (prefers-reduced-motion:no-preference){animation:Overlay--motion-scaleFade 0.2s cubic-bezier(0.33,1,0.68,1) 0s 1 normal none running;}}}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(0.5);}100%{opacity:1;transform:scale(1);}}@keyframes Overlay--motion-slideUp{from{transform:translateY(100%);}}@keyframes Overlay--motion-slideInRight{from{transform:translateX(-100%);}}@keyframes Overlay--motion-slideInLeft{from{transform:translateX(100%);}}", ";"], get('colors.canvas.overlay'), get('shadows.overlay.shadow'), props => {
   var _props$width;
   return widthMap[(_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'xlarge'];
 }, props => {
   var _props$height;
   return heightMap[(_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : 'auto'];
-}, ANIMATION_DURATION, get('animation.easeOutCubic'), sx);
+}, props => {
+  var _props$width2;
+  return widthMap[(_props$width2 = props.width) !== null && _props$width2 !== void 0 ? _props$width2 : 'xlarge'];
+}, props => {
+  var _props$height2;
+  return heightMap[(_props$height2 = props.height) !== null && _props$height2 !== void 0 ? _props$height2 : 'auto'];
+}, sx);
 const DefaultHeader = ({
   dialogLabelId,
   title,
@@ -113,6 +117,10 @@ const DefaultFooter = ({
     buttons: footerButtons
   })) : null;
 };
+const defaultPosition = {
+  narrow: 'center',
+  regular: 'center'
+};
 const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const {
     title = 'Dialog',
@@ -125,6 +133,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     width = 'xlarge',
     height = 'auto',
     footerButtons = [],
+    position = defaultPosition,
     sx
   } = props;
   const dialogLabelId = useId();
@@ -171,18 +180,24 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
   const header = (renderHeader !== null && renderHeader !== void 0 ? renderHeader : DefaultHeader)(defaultedProps);
   const body = (renderBody !== null && renderBody !== void 0 ? renderBody : DefaultBody)(defaultedProps);
   const footer = (renderFooter !== null && renderFooter !== void 0 ? renderFooter : DefaultFooter)(defaultedProps);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Backdrop, {
+  const positionDataAttributes = typeof position === 'string' ? {
+    'data-position-regular': position
+  } : Object.fromEntries(Object.entries(position).map(([key, value]) => {
+    return [`data-position-${key}`, value];
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Backdrop, _extends({
     ref: backdropRef
-  }, /*#__PURE__*/React.createElement(StyledDialog, {
+  }, positionDataAttributes), /*#__PURE__*/React.createElement(StyledDialog, _extends({
     width: width,
     height: height,
     ref: dialogRef,
     role: role,
     "aria-labelledby": dialogLabelId,
     "aria-describedby": dialogDescriptionId,
-    "aria-modal": true,
+    "aria-modal": true
+  }, positionDataAttributes, {
     sx: sx
-  }, header, /*#__PURE__*/React.createElement(ScrollableRegion, {
+  }), header, /*#__PURE__*/React.createElement(ScrollableRegion, {
     "aria-labelledby": dialogLabelId,
     className: "DialogOverflowWrapper"
   }, body), footer))));