polaris-react-extended 13.10.3

package/LICENSE.md

@@ -0,0 +1,27 @@
+Copyright (c) 2017-present Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The rights granted above may only be exercised to develop and distribute
+applications that integrate or interoperate with Shopify software or services,
+and in the case of external, stand-alone applications that do not embed
+directly inside Shopify, the rights granted above may only be exercised to
+develop and distribute applications that are dissimilar and visually distinct
+from Shopify products and services (including the internal administration page
+of a Shopify merchant store), as determined by Shopify in its sole discretion.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# [Polaris React](https://polaris.shopify.com/)
+
+Polaris React is a component library designed to help developers create the best experience for merchants who use Shopify. Visit the [Polaris style guide](https://polaris.shopify.com) to learn more.
+
+## Using the React components
+
+While we do offer a CSS-only version, **we strongly recommend using the React versions of our components**. It’s the version that we use at Shopify. It allows for rich, complex components like Tabs and Popovers, and will not have as many breaking changes as the CSS-only version.
+
+### Installation
+
+Run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install @shopify/polaris --save
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
+
+```bash
+yarn add @shopify/polaris
+```
+
+### Usage
+
+1.  Import the CSS directly into your project if your asset packager supports it:
+
+```js
+import '@shopify/polaris/build/esm/styles.css';
+```
+
+Otherwise include the CSS in your HTML. We suggest copying the latest [styles file](https://unpkg.com/@shopify/polaris@latest/build/esm/styles.css) into your own project. This will need to be updated with future releases.
+
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+2.  Include the translations and any of the provided components in your project:
+
+```js
+import enTranslations from '@shopify/polaris/locales/en.json';
+import {AppProvider, Page, LegacyCard, Button} from '@shopify/polaris';
+```
+
+3.  Tell React to render the element in the DOM:
+
+```js
+ReactDOM.render(
+  <AppProvider i18n={enTranslations}>
+    <Page title="Example app">
+      <LegacyCard sectioned>
+        <Button onClick={() => alert('Button clicked!')}>Example button</Button>
+      </LegacyCard>
+    </Page>
+  </AppProvider>,
+  document.querySelector('#app'),
+);
+```
+
+4. Load the web font [Inter](https://github.com/rsms/inter).
+
+```html
+<link rel="preconnect" href="https://cdn.shopify.com/" />
+<link
+  rel="stylesheet"
+  href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"
+/>
+```
+
+## Using the CSS components
+
+If React doesn’t make sense for your application, you can use a CSS-only version of our components. This includes all the styles you need for every component in the library, but you’ll be responsible for writing the correct markup and updating classes and DOM attributes in response to user events.
+
+### Usage
+
+1. Include the CSS in your HTML. We suggest copying the latest [styles file](https://unpkg.com/@shopify/polaris@latest/build/esm/styles.css) into your own project. This will need to be updated with future releases.
+
+```html
+<link rel="stylesheet" href="styles.css" />
+```
+
+2. Include the markup and associated classes in your HTML document:
+
+```html
+<button class="Polaris-Button">Example button</button>
+```
+
+## Development
+
+We use Storybook to create a simple, hot-reloading playground for development on these components. You can edit the `playground/Playground.tsx` file to import the components you are working on, and run `yarn dev` in order to start the development server. Please do not commit your work on the playground so that it remains pristine for other developers to work on.
+
+### Testing on mobile or a virtual machine
+
+To test the changes on a mobile or virtual machine, you will need to open the source of the iFrame, to do this:
+
+1.  Run `yarn dev`
+1.  Make sure your virtual machine and mobile device are on the same network
+1.  Open http://YOUR_IP_ADDRESS:ASSIGNED_PORT/iframe.html?path=/story/playground-playground--playground in your mobile device or virtual machine
+
+### Testing in a consuming project
+
+The `/snapit` GitHub comment command in pull requests will publish a snapshot NPM package for testing. Read the [release documentation](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#snapshot-release) for more information.
+
+#### Manual visual regression testing
+
+To start a server for manually viewing the visual regression testing examples, run `yarn run dev`.
+
+## Learning resources
+
+If you’re new to React, we recommend you start with the [official React Getting Started documentation](https://facebook.github.io/react/docs/hello-world.html). As you read through the topics we suggest you follow along using their [React Hello World CodePen example](http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010).
+
+Additional resources:
+
+- Online training courses at [reacttraining.com](http://reacttraining.com), [buildwithreact.com](http://buildwithreact.com), and [reactforbeginners.com](http://reactforbeginners.com).
+- The community resources in [Awesome React](https://github.com/enaqx/awesome-react).
+- As questions and find answers in the various [React support communities](https://facebook.github.io/react/community/support.html).
+
+## Methodology
+
+We set out to make our components easy to use. Each of our components has a well-documented (and fully typed) public interface with strong, consistently-applied conventions. This way, developers don’t need to worry about the underlying implementation. Instead, they can focus on creating amazing merchant experiences.
+
+We ensure that our components are made for everyone. They meet accessibility standards and are responsive to any screen or device. We also put a lot of effort into optimizing the performance of the components, so everyone can build inclusive experiences that work.
+
+We make our components flexible enough to meet diverse needs. They present the information you pass in and give you smart callbacks when something has changed, but they don’t enforce any structure beyond that. No matter what type of experience you’re creating, you can use components as the building blocks of your product or feature.
+
+## Contributing
+
+Pull requests are welcome. See the [contribution guidelines](https://github.com/Shopify/polaris-react/blob/main/.github/CONTRIBUTING.md) for more information.
+
+## Licenses
+
+- Source code is under a [custom license](https://github.com/Shopify/polaris-react/blob/main/LICENSE.md) based on MIT. The license restricts Polaris usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.
+- All icons and images are licensed under the [Polaris Design Guidelines License Agreement](https://polaris.shopify.com/legal/license)

package/build/cjs/components/AccountConnection/AccountConnection.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var React = require('react');
+var breakpoints = require('../../utilities/breakpoints.js');
+var utils = require('../Button/utils.js');
+var Card = require('../Card/Card.js');
+var SettingAction = require('../SettingAction/SettingAction.js');
+var InlineStack = require('../InlineStack/InlineStack.js');
+var BlockStack = require('../BlockStack/BlockStack.js');
+var Avatar = require('../Avatar/Avatar.js');
+var Box = require('../Box/Box.js');
+var Text = require('../Text/Text.js');
+
+function AccountConnection({
+  connected = false,
+  action,
+  avatarUrl,
+  accountName = '',
+  title,
+  details,
+  termsOfService
+}) {
+  const breakpoints$1 = breakpoints.useBreakpoints();
+  const initials = accountName ? accountName.split(/\s+/).map(name => name[0]).join('') : undefined;
+  const avatarMarkup = connected ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Avatar.Avatar, {
+    accessibilityLabel: "",
+    name: accountName,
+    initials: initials,
+    source: avatarUrl
+  })) : null;
+  const titleContent = title ? title : accountName;
+  const titleMarkup = /*#__PURE__*/React.createElement(Text.Text, {
+    as: "h2",
+    variant: "headingSm"
+  }, titleContent);
+  const detailsMarkup = details ? /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodyMd",
+    tone: "subdued"
+  }, details) : null;
+  const termsOfServiceMarkup = termsOfService ? /*#__PURE__*/React.createElement(Box.Box, {
+    paddingBlockStart: breakpoints$1.mdUp ? '400' : '500'
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodyMd"
+  }, termsOfService)) : null;
+  const actionElement = action ? utils.buttonFrom(action, {
+    variant: connected ? undefined : 'primary'
+  }) : null;
+  return /*#__PURE__*/React.createElement(Card.Card, null, /*#__PURE__*/React.createElement(SettingAction.SettingAction, {
+    action: actionElement
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "400"
+  }, avatarMarkup, /*#__PURE__*/React.createElement(BlockStack.BlockStack, {
+    gap: "100"
+  }, titleMarkup, detailsMarkup))), termsOfServiceMarkup);
+}
+
+exports.AccountConnection = AccountConnection;

package/build/cjs/components/ActionList/ActionList.css.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Item": "Polaris-ActionList__Item",
+  "default": "Polaris-ActionList--default",
+  "active": "Polaris-ActionList--active",
+  "destructive": "Polaris-ActionList--destructive",
+  "disabled": "Polaris-ActionList--disabled",
+  "Prefix": "Polaris-ActionList__Prefix",
+  "Suffix": "Polaris-ActionList__Suffix",
+  "indented": "Polaris-ActionList--indented",
+  "menu": "Polaris-ActionList--menu",
+  "Text": "Polaris-ActionList__Text"
+};
+
+exports.default = styles;

package/build/cjs/components/ActionList/ActionList.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var polarisIcons = require('@shopify/polaris-icons');
+var types = require('../../types.js');
+var focus = require('../../utilities/focus.js');
+var FilterActionsProvider = require('../FilterActionsProvider/FilterActionsProvider.js');
+var Section = require('./components/Section/Section.js');
+var KeypressListener = require('../KeypressListener/KeypressListener.js');
+var TextField = require('../TextField/TextField.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var Box = require('../Box/Box.js');
+var Icon = require('../Icon/Icon.js');
+var Item = require('./components/Item/Item.js');
+
+const FILTER_ACTIONS_THRESHOLD = 8;
+function ActionList({
+  items,
+  sections = [],
+  actionRole,
+  allowFiltering,
+  onActionAnyItem,
+  filterLabel
+}) {
+  const i18n = hooks.useI18n();
+  const filterActions = React.useContext(FilterActionsProvider.FilterActionsContext);
+  let finalSections = [];
+  const actionListRef = React.useRef(null);
+  const [searchText, setSearchText] = React.useState('');
+  if (items) {
+    finalSections = [{
+      items
+    }, ...sections];
+  } else if (sections) {
+    finalSections = sections;
+  }
+  const isFilterable = finalSections?.some(section => section.items.some(item => typeof item.content === 'string'));
+  const hasMultipleSections = finalSections.length > 1;
+  const elementRole = hasMultipleSections && actionRole === 'menuitem' ? 'menu' : undefined;
+  const elementTabIndex = hasMultipleSections && actionRole === 'menuitem' ? -1 : undefined;
+  const filteredSections = finalSections?.map(section => ({
+    ...section,
+    items: section.items.filter(({
+      content
+    }) => typeof content === 'string' ? content?.toLowerCase().includes(searchText.toLowerCase()) : content)
+  }));
+  const sectionMarkup = filteredSections.map((section, index) => {
+    return section.items.length > 0 ? /*#__PURE__*/React.createElement(Section.Section, {
+      key: typeof section.title === 'string' ? section.title : index,
+      section: section,
+      hasMultipleSections: hasMultipleSections,
+      actionRole: actionRole,
+      onActionAnyItem: onActionAnyItem,
+      isFirst: index === 0
+    }) : null;
+  });
+  const handleFocusPreviousItem = evt => {
+    evt.preventDefault();
+    if (actionListRef.current && evt.target) {
+      if (actionListRef.current.contains(evt.target)) {
+        focus.wrapFocusPreviousFocusableMenuItem(actionListRef.current, evt.target);
+      }
+    }
+  };
+  const handleFocusNextItem = evt => {
+    evt.preventDefault();
+    if (actionListRef.current && evt.target) {
+      if (actionListRef.current.contains(evt.target)) {
+        focus.wrapFocusNextFocusableMenuItem(actionListRef.current, evt.target);
+      }
+    }
+  };
+  const listeners = actionRole === 'menuitem' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(KeypressListener.KeypressListener, {
+    keyEvent: "keydown",
+    keyCode: types.Key.DownArrow,
+    handler: handleFocusNextItem
+  }), /*#__PURE__*/React.createElement(KeypressListener.KeypressListener, {
+    keyEvent: "keydown",
+    keyCode: types.Key.UpArrow,
+    handler: handleFocusPreviousItem
+  })) : null;
+  const totalFilteredActions = React.useMemo(() => {
+    const totalSectionItems = filteredSections?.reduce((acc, section) => acc + section.items.length, 0) || 0;
+    return totalSectionItems;
+  }, [filteredSections]);
+  const totalActions = finalSections?.reduce((acc, section) => acc + section.items.length, 0) || 0;
+  const hasManyActions = totalActions >= FILTER_ACTIONS_THRESHOLD;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (allowFiltering || filterActions) && hasManyActions && isFilterable && /*#__PURE__*/React.createElement(Box.Box, {
+    padding: "200",
+    paddingBlockEnd: totalFilteredActions > 0 ? '0' : '200'
+  }, /*#__PURE__*/React.createElement(TextField.TextField, {
+    clearButton: true,
+    labelHidden: true,
+    label: filterLabel ? filterLabel : i18n.translate('Polaris.ActionList.SearchField.placeholder'),
+    placeholder: filterLabel ? filterLabel : i18n.translate('Polaris.ActionList.SearchField.placeholder'),
+    autoComplete: "off",
+    value: searchText,
+    onChange: value => setSearchText(value),
+    prefix: /*#__PURE__*/React.createElement(Icon.Icon, {
+      source: polarisIcons.SearchIcon
+    }),
+    onClearButtonClick: () => setSearchText('')
+  })), /*#__PURE__*/React.createElement(Box.Box, {
+    as: hasMultipleSections ? 'ul' : 'div',
+    ref: actionListRef,
+    role: elementRole,
+    tabIndex: elementTabIndex
+  }, listeners, sectionMarkup));
+}
+ActionList.Item = Item.Item;
+
+exports.ActionList = ActionList;

package/build/cjs/components/ActionList/components/Item/Item.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../../../utilities/css.js');
+var ActionList_module = require('../../ActionList.css.js');
+var focus = require('../../../../utilities/focus.js');
+var useIsomorphicLayoutEffect = require('../../../../utilities/use-isomorphic-layout-effect.js');
+var useTheme = require('../../../../utilities/use-theme.js');
+var Badge = require('../../../Badge/Badge.js');
+var Tooltip = require('../../../Tooltip/Tooltip.js');
+var Icon = require('../../../Icon/Icon.js');
+var Box = require('../../../Box/Box.js');
+var Text = require('../../../Text/Text.js');
+var Scrollable = require('../../../Scrollable/Scrollable.js');
+var UnstyledLink = require('../../../UnstyledLink/UnstyledLink.js');
+var InlineStack = require('../../../InlineStack/InlineStack.js');
+
+function Item({
+  id,
+  badge,
+  content,
+  accessibilityLabel,
+  helpText,
+  url,
+  onAction,
+  onMouseEnter,
+  icon,
+  image,
+  prefix,
+  suffix,
+  disabled,
+  external,
+  destructive,
+  ellipsis,
+  truncate,
+  active,
+  role,
+  variant = 'default'
+}) {
+  const className = css.classNames(ActionList_module.default.Item, disabled && ActionList_module.default.disabled, destructive && ActionList_module.default.destructive, active && ActionList_module.default.active, variant === 'default' && ActionList_module.default.default, variant === 'indented' && ActionList_module.default.indented, variant === 'menu' && ActionList_module.default.menu);
+  let prefixMarkup = null;
+  if (prefix) {
+    prefixMarkup = /*#__PURE__*/React.createElement("span", {
+      className: ActionList_module.default.Prefix
+    }, prefix);
+  } else if (icon) {
+    prefixMarkup = /*#__PURE__*/React.createElement("span", {
+      className: ActionList_module.default.Prefix
+    }, /*#__PURE__*/React.createElement(Icon.Icon, {
+      source: icon
+    }));
+  } else if (image) {
+    prefixMarkup = /*#__PURE__*/React.createElement("span", {
+      role: "presentation",
+      className: ActionList_module.default.Prefix,
+      style: {
+        backgroundImage: `url(${image}`
+      }
+    });
+  }
+  let contentText = content || '';
+  if (truncate && content) {
+    contentText = /*#__PURE__*/React.createElement(TruncateText, null, content);
+  } else if (ellipsis) {
+    contentText = `${content}…`;
+  }
+  const contentMarkup = helpText ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box.Box, null, contentText), /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodySm",
+    tone: active || disabled ? undefined : 'subdued'
+  }, helpText)) : /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodyMd",
+    fontWeight: active ? 'semibold' : 'regular'
+  }, contentText);
+  const badgeMarkup = badge && /*#__PURE__*/React.createElement("span", {
+    className: ActionList_module.default.Suffix
+  }, /*#__PURE__*/React.createElement(Badge.Badge, {
+    tone: badge.tone
+  }, badge.content));
+  const suffixMarkup = suffix && /*#__PURE__*/React.createElement(Box.Box, null, /*#__PURE__*/React.createElement("span", {
+    className: ActionList_module.default.Suffix
+  }, suffix));
+  const textMarkup = /*#__PURE__*/React.createElement("span", {
+    className: ActionList_module.default.Text
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodyMd",
+    fontWeight: active ? 'semibold' : 'regular'
+  }, contentMarkup));
+  const contentElement = /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    blockAlign: "center",
+    gap: "150",
+    wrap: false
+  }, prefixMarkup, textMarkup, badgeMarkup, suffixMarkup);
+  const contentWrapper = /*#__PURE__*/React.createElement(Box.Box, {
+    width: "100%"
+  }, contentElement);
+  const scrollMarkup = active ? /*#__PURE__*/React.createElement(Scrollable.Scrollable.ScrollTo, null) : null;
+  const control = url ? /*#__PURE__*/React.createElement(UnstyledLink.UnstyledLink, {
+    id: id,
+    url: disabled ? null : url,
+    className: className,
+    external: external,
+    "aria-label": accessibilityLabel,
+    onClick: disabled ? null : onAction,
+    role: role
+  }, contentWrapper) : /*#__PURE__*/React.createElement("button", {
+    id: id,
+    type: "button",
+    className: className,
+    disabled: disabled,
+    "aria-label": accessibilityLabel,
+    onClick: onAction,
+    onMouseUp: focus.handleMouseUpByBlurring,
+    role: role,
+    onMouseEnter: onMouseEnter
+  }, contentWrapper);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, scrollMarkup, control);
+}
+const TruncateText = ({
+  children
+}) => {
+  const theme = useTheme.useTheme();
+  const textRef = React.useRef(null);
+  const [isOverflowing, setIsOverflowing] = React.useState(false);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (textRef.current) {
+      setIsOverflowing(textRef.current.scrollWidth > textRef.current.offsetWidth);
+    }
+  }, [children]);
+  const text = /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    truncate: true
+  }, /*#__PURE__*/React.createElement(Box.Box, {
+    width: "100%",
+    ref: textRef
+  }, children));
+  return isOverflowing ? /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
+    zIndexOverride: Number(theme.zIndex['z-index-11']),
+    preferredPosition: "above",
+    hoverDelay: 1000,
+    content: children,
+    dismissOnMouseOut: true
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    truncate: true
+  }, children)) : text;
+};
+
+exports.Item = Item;
+exports.TruncateText = TruncateText;

package/build/cjs/components/ActionList/components/Section/Section.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var React = require('react');
+var Item = require('../Item/Item.js');
+var Box = require('../../../Box/Box.js');
+var InlineStack = require('../../../InlineStack/InlineStack.js');
+var Text = require('../../../Text/Text.js');
+var BlockStack = require('../../../BlockStack/BlockStack.js');
+
+function Section({
+  section,
+  hasMultipleSections,
+  isFirst,
+  actionRole,
+  onActionAnyItem
+}) {
+  const handleAction = itemOnAction => {
+    return () => {
+      if (itemOnAction) {
+        itemOnAction();
+      }
+      if (onActionAnyItem) {
+        onActionAnyItem();
+      }
+    };
+  };
+  const actionMarkup = section.items.map(({
+    content,
+    helpText,
+    onAction,
+    ...item
+  }, index) => {
+    const itemMarkup = /*#__PURE__*/React.createElement(Item.Item, Object.assign({
+      content: content,
+      helpText: helpText,
+      role: actionRole,
+      onAction: handleAction(onAction)
+    }, item));
+    return /*#__PURE__*/React.createElement(Box.Box, {
+      as: "li",
+      key: `${content}-${index}`,
+      role: actionRole === 'menuitem' ? 'presentation' : undefined
+    }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+      wrap: false
+    }, itemMarkup));
+  });
+  let titleMarkup = null;
+  if (section.title) {
+    titleMarkup = typeof section.title === 'string' ? /*#__PURE__*/React.createElement(Box.Box, {
+      paddingBlockStart: "300",
+      paddingBlockEnd: "100",
+      paddingInlineStart: "300",
+      paddingInlineEnd: "300"
+    }, /*#__PURE__*/React.createElement(Text.Text, {
+      as: "p",
+      variant: "headingSm"
+    }, section.title)) : /*#__PURE__*/React.createElement(Box.Box, {
+      padding: "200",
+      paddingInlineEnd: "150"
+    }, section.title);
+  }
+  let sectionRole;
+  switch (actionRole) {
+    case 'option':
+      sectionRole = 'presentation';
+      break;
+    case 'menuitem':
+      sectionRole = !hasMultipleSections ? 'menu' : 'presentation';
+      break;
+    default:
+      sectionRole = undefined;
+      break;
+  }
+  const sectionMarkup = /*#__PURE__*/React.createElement(React.Fragment, null, titleMarkup, /*#__PURE__*/React.createElement(Box.Box, Object.assign({
+    as: "div",
+    padding: "150"
+  }, hasMultipleSections && {
+    paddingBlockStart: '0'
+  }, {
+    tabIndex: !hasMultipleSections ? -1 : undefined
+  }), /*#__PURE__*/React.createElement(BlockStack.BlockStack, Object.assign({
+    gap: "050",
+    as: "ul"
+  }, sectionRole && {
+    role: sectionRole
+  }), actionMarkup)));
+  return hasMultipleSections ? /*#__PURE__*/React.createElement(Box.Box, Object.assign({
+    as: "li",
+    role: "presentation",
+    borderColor: "border-secondary"
+  }, !isFirst && {
+    borderBlockStartWidth: '025'
+  }, !section.title && {
+    paddingBlockStart: '150'
+  }), sectionMarkup) : sectionMarkup;
+}
+
+exports.Section = Section;

package/build/cjs/components/ActionMenu/ActionMenu.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "ActionMenu": "Polaris-ActionMenu"
+};
+
+exports.default = styles;

package/build/cjs/components/ActionMenu/ActionMenu.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var ActionMenu_module = require('./ActionMenu.css.js');
+var RollupActions = require('./components/RollupActions/RollupActions.js');
+var Actions = require('./components/Actions/Actions.js');
+
+function ActionMenu({
+  actions = [],
+  groups = [],
+  rollup,
+  rollupActionsLabel,
+  onActionRollup
+}) {
+  if (actions.length === 0 && groups.length === 0) {
+    return null;
+  }
+  const actionMenuClassNames = css.classNames(ActionMenu_module.default.ActionMenu, rollup && ActionMenu_module.default.rollup);
+  const rollupSections = groups.map(group => convertGroupToSection(group));
+  return /*#__PURE__*/React.createElement("div", {
+    className: actionMenuClassNames
+  }, rollup ? /*#__PURE__*/React.createElement(RollupActions.RollupActions, {
+    accessibilityLabel: rollupActionsLabel,
+    items: actions,
+    sections: rollupSections
+  }) : /*#__PURE__*/React.createElement(Actions.Actions, {
+    actions: actions,
+    groups: groups,
+    onActionRollup: onActionRollup
+  }));
+}
+function hasGroupsWithActions(groups = []) {
+  return groups.length === 0 ? false : groups.some(group => group.actions.length > 0);
+}
+function convertGroupToSection({
+  title,
+  actions,
+  disabled
+}) {
+  return {
+    title,
+    items: actions.map(action => ({
+      ...action,
+      disabled: disabled || action.disabled
+    }))
+  };
+}
+
+exports.ActionMenu = ActionMenu;
+exports.hasGroupsWithActions = hasGroupsWithActions;

package/build/cjs/components/ActionMenu/components/Actions/Actions.css.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "ActionsLayoutOuter": "Polaris-Actions__ActionsLayoutOuter",
+  "ActionsLayout": "Polaris-Actions__ActionsLayout",
+  "ActionsLayout--measuring": "Polaris-Actions--actionsLayoutMeasuring",
+  "ActionsLayoutMeasurer": "Polaris-Actions__ActionsLayoutMeasurer"
+};
+
+exports.default = styles;