polaris-react-extended 13.10.3

package/build/cjs/components/Badge/utils.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var types = require('./types.js');
+
+function getDefaultAccessibilityLabel(i18n, progress, tone) {
+  let progressLabel = '';
+  let toneLabel = '';
+  if (!progress && !tone) {
+    return '';
+  }
+  switch (progress) {
+    case types.ProgressValue.Incomplete:
+      progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.incomplete');
+      break;
+    case types.ProgressValue.PartiallyComplete:
+      progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.partiallyComplete');
+      break;
+    case types.ProgressValue.Complete:
+      progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.complete');
+      break;
+  }
+  switch (tone) {
+    case types.ToneValue.Info:
+    case types.ToneValue.InfoStrong:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.info');
+      break;
+    case types.ToneValue.Success:
+    case types.ToneValue.SuccessStrong:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.success');
+      break;
+    case types.ToneValue.Warning:
+    case types.ToneValue.WarningStrong:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.warning');
+      break;
+    case types.ToneValue.Critical:
+    case types.ToneValue.CriticalStrong:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.critical');
+      break;
+    case types.ToneValue.Attention:
+    case types.ToneValue.AttentionStrong:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.attention');
+      break;
+    case types.ToneValue.New:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.new');
+      break;
+    case types.ToneValue.ReadOnly:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.readOnly');
+      break;
+    case types.ToneValue.Enabled:
+      toneLabel = i18n.translate('Polaris.Badge.TONE_LABELS.enabled');
+      break;
+  }
+  if (!tone && progress) {
+    return progressLabel;
+  } else if (tone && !progress) {
+    return toneLabel;
+  } else {
+    return i18n.translate('Polaris.Badge.progressAndTone', {
+      progressLabel,
+      toneLabel
+    });
+  }
+}
+
+exports.getDefaultAccessibilityLabel = getDefaultAccessibilityLabel;

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Banner": "Polaris-Banner",
+  "keyFocused": "Polaris-Banner--keyFocused",
+  "withinContentContainer": "Polaris-Banner--withinContentContainer",
+  "withinPage": "Polaris-Banner--withinPage",
+  "DismissIcon": "Polaris-Banner__DismissIcon",
+  "text-success-on-bg-fill": "Polaris-Banner--textSuccessOnBgFill",
+  "text-success": "Polaris-Banner__text--success",
+  "text-warning-on-bg-fill": "Polaris-Banner--textWarningOnBgFill",
+  "text-warning": "Polaris-Banner__text--warning",
+  "text-critical-on-bg-fill": "Polaris-Banner--textCriticalOnBgFill",
+  "text-critical": "Polaris-Banner__text--critical",
+  "text-info-on-bg-fill": "Polaris-Banner--textInfoOnBgFill",
+  "text-info": "Polaris-Banner__text--info",
+  "icon-secondary": "Polaris-Banner__icon--secondary"
+};
+
+exports.default = styles;

package/build/cjs/components/Banner/Banner.js

@@ -0,0 +1,234 @@
+'use strict';
+
+var React = require('react');
+var polarisIcons = require('@shopify/polaris-icons');
+var bannerContext = require('../../utilities/banner-context.js');
+var withinContentContext = require('../../utilities/within-content-context.js');
+var css = require('../../utilities/css.js');
+var breakpoints = require('../../utilities/breakpoints.js');
+var useEventListener = require('../../utilities/use-event-listener.js');
+var Banner_module = require('./Banner.css.js');
+var utilities = require('./utilities.js');
+var ButtonGroup = require('../ButtonGroup/ButtonGroup.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var Text = require('../Text/Text.js');
+var Icon = require('../Icon/Icon.js');
+var Button = require('../Button/Button.js');
+var Box = require('../Box/Box.js');
+var BlockStack = require('../BlockStack/BlockStack.js');
+var InlineStack = require('../InlineStack/InlineStack.js');
+
+const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, bannerRef) {
+  const {
+    tone,
+    stopAnnouncements
+  } = props;
+  const withinContentContainer = React.useContext(withinContentContext.WithinContentContext);
+  const {
+    wrapperRef,
+    handleKeyUp,
+    handleBlur,
+    handleMouseUp,
+    shouldShowFocus
+  } = utilities.useBannerFocus(bannerRef);
+  const className = css.classNames(Banner_module.default.Banner, shouldShowFocus && Banner_module.default.keyFocused, withinContentContainer ? Banner_module.default.withinContentContainer : Banner_module.default.withinPage);
+  return /*#__PURE__*/React.createElement(bannerContext.BannerContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: className
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0,
+    ref: wrapperRef,
+    role: tone === 'warning' || tone === 'critical' ? 'alert' : 'status',
+    "aria-live": stopAnnouncements ? 'off' : 'polite',
+    onMouseUp: handleMouseUp,
+    onKeyUp: handleKeyUp,
+    onBlur: handleBlur
+  }, /*#__PURE__*/React.createElement(BannerLayout, props)));
+});
+function BannerLayout({
+  tone = 'info',
+  icon,
+  hideIcon,
+  onDismiss,
+  action,
+  secondaryAction,
+  title,
+  children
+}) {
+  const i18n = hooks.useI18n();
+  const withinContentContainer = React.useContext(withinContentContext.WithinContentContext);
+  const isInlineIconBanner = !title && !withinContentContainer;
+  const bannerTone = Object.keys(utilities.bannerAttributes).includes(tone) ? tone : 'info';
+  const bannerColors = utilities.bannerAttributes[bannerTone][withinContentContainer ? 'withinContentContainer' : 'withinPage'];
+  const sharedBannerProps = {
+    backgroundColor: bannerColors.background,
+    textColor: bannerColors.text,
+    bannerTitle: title ? /*#__PURE__*/React.createElement(Text.Text, {
+      as: "h2",
+      variant: "headingSm",
+      breakWord: true
+    }, title) : null,
+    bannerIcon: hideIcon ? null : /*#__PURE__*/React.createElement("span", {
+      className: Banner_module.default[bannerColors.icon]
+    }, /*#__PURE__*/React.createElement(Icon.Icon, {
+      source: icon ?? utilities.bannerAttributes[bannerTone].icon
+    })),
+    actionButtons: action || secondaryAction ? /*#__PURE__*/React.createElement(ButtonGroup.ButtonGroup, null, action && /*#__PURE__*/React.createElement(Button.Button, Object.assign({
+      onClick: action.onAction
+    }, action), action.content), secondaryAction && /*#__PURE__*/React.createElement(Button.Button, Object.assign({
+      onClick: secondaryAction.onAction
+    }, secondaryAction), secondaryAction.content)) : null,
+    dismissButton: onDismiss ? /*#__PURE__*/React.createElement(Button.Button, {
+      variant: "tertiary",
+      icon: /*#__PURE__*/React.createElement("span", {
+        className: Banner_module.default[isInlineIconBanner ? 'icon-secondary' : bannerColors.icon]
+      }, /*#__PURE__*/React.createElement(Icon.Icon, {
+        source: polarisIcons.XIcon
+      })),
+      onClick: onDismiss,
+      accessibilityLabel: i18n.translate('Polaris.Banner.dismissButton')
+    }) : null
+  };
+  const childrenMarkup = children ? /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodyMd"
+  }, children) : null;
+  if (withinContentContainer) {
+    return /*#__PURE__*/React.createElement(WithinContentContainerBanner, sharedBannerProps, childrenMarkup);
+  }
+  if (isInlineIconBanner) {
+    return /*#__PURE__*/React.createElement(InlineIconBanner, sharedBannerProps, childrenMarkup);
+  }
+  return /*#__PURE__*/React.createElement(DefaultBanner, sharedBannerProps, childrenMarkup);
+}
+function DefaultBanner({
+  backgroundColor,
+  textColor,
+  bannerTitle,
+  bannerIcon,
+  actionButtons,
+  dismissButton,
+  children
+}) {
+  const {
+    smUp
+  } = breakpoints.useBreakpoints();
+  const hasContent = children || actionButtons;
+  return /*#__PURE__*/React.createElement(Box.Box, {
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(BlockStack.BlockStack, {
+    align: "space-between"
+  }, /*#__PURE__*/React.createElement(Box.Box, {
+    background: backgroundColor,
+    color: textColor,
+    borderStartStartRadius: smUp ? '300' : undefined,
+    borderStartEndRadius: smUp ? '300' : undefined,
+    borderEndStartRadius: !hasContent && smUp ? '300' : undefined,
+    borderEndEndRadius: !hasContent && smUp ? '300' : undefined,
+    padding: "300"
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    align: "space-between",
+    blockAlign: "center",
+    gap: "200",
+    wrap: false
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "100",
+    wrap: false
+  }, bannerIcon, bannerTitle), dismissButton)), hasContent && /*#__PURE__*/React.createElement(Box.Box, {
+    padding: {
+      xs: '300',
+      md: '400'
+    },
+    paddingBlockStart: "300"
+  }, /*#__PURE__*/React.createElement(BlockStack.BlockStack, {
+    gap: "200"
+  }, /*#__PURE__*/React.createElement("div", null, children), actionButtons))));
+}
+function InlineIconBanner({
+  backgroundColor,
+  bannerIcon,
+  actionButtons,
+  dismissButton,
+  children
+}) {
+  const [blockAlign, setBlockAlign] = React.useState('center');
+  const contentNode = React.useRef(null);
+  const iconNode = React.useRef(null);
+  const dismissIconNode = React.useRef(null);
+  const handleResize = React.useCallback(() => {
+    const contentHeight = contentNode.current?.offsetHeight;
+    const iconBoxHeight = iconNode.current?.offsetHeight || dismissIconNode.current?.offsetHeight;
+    if (!contentHeight || !iconBoxHeight) return;
+    contentHeight > iconBoxHeight ? setBlockAlign('start') : setBlockAlign('center');
+  }, []);
+  React.useEffect(() => handleResize(), [handleResize]);
+  useEventListener.useEventListener('resize', handleResize);
+  return /*#__PURE__*/React.createElement(Box.Box, {
+    width: "100%",
+    padding: "300",
+    borderRadius: "300"
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    align: "space-between",
+    blockAlign: blockAlign,
+    wrap: false
+  }, /*#__PURE__*/React.createElement(Box.Box, {
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "200",
+    wrap: false,
+    blockAlign: blockAlign
+  }, bannerIcon ? /*#__PURE__*/React.createElement("div", {
+    ref: iconNode
+  }, /*#__PURE__*/React.createElement(Box.Box, {
+    background: backgroundColor,
+    borderRadius: "200",
+    padding: "100"
+  }, bannerIcon)) : null, /*#__PURE__*/React.createElement(Box.Box, {
+    ref: contentNode,
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(BlockStack.BlockStack, {
+    gap: "200"
+  }, /*#__PURE__*/React.createElement("div", null, children), actionButtons)))), /*#__PURE__*/React.createElement("div", {
+    ref: dismissIconNode,
+    className: Banner_module.default.DismissIcon
+  }, dismissButton)));
+}
+function WithinContentContainerBanner({
+  backgroundColor,
+  textColor,
+  bannerTitle,
+  bannerIcon,
+  actionButtons,
+  dismissButton,
+  children
+}) {
+  return /*#__PURE__*/React.createElement(Box.Box, {
+    width: "100%",
+    background: backgroundColor,
+    padding: "200",
+    borderRadius: "200",
+    color: textColor
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    align: "space-between",
+    blockAlign: "start",
+    wrap: false,
+    gap: "200"
+  }, /*#__PURE__*/React.createElement(InlineStack.InlineStack, {
+    gap: "150",
+    wrap: false
+  }, bannerIcon, /*#__PURE__*/React.createElement(Box.Box, {
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(BlockStack.BlockStack, {
+    gap: "200"
+  }, /*#__PURE__*/React.createElement(BlockStack.BlockStack, {
+    gap: "050"
+  }, bannerTitle, /*#__PURE__*/React.createElement("div", null, children)), actionButtons))), dismissButton));
+}
+
+exports.Banner = Banner;
+exports.BannerLayout = BannerLayout;
+exports.DefaultBanner = DefaultBanner;
+exports.InlineIconBanner = InlineIconBanner;
+exports.WithinContentContainerBanner = WithinContentContainerBanner;

package/build/cjs/components/Banner/utilities.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var polarisIcons = require('@shopify/polaris-icons');
+var React = require('react');
+
+const bannerAttributes = {
+  success: {
+    withinPage: {
+      background: 'bg-fill-success',
+      text: 'text-success-on-bg-fill',
+      icon: 'text-success-on-bg-fill'
+    },
+    withinContentContainer: {
+      background: 'bg-surface-success',
+      text: 'text-success',
+      icon: 'text-success'
+    },
+    icon: polarisIcons.CheckIcon
+  },
+  warning: {
+    withinPage: {
+      background: 'bg-fill-warning',
+      text: 'text-warning-on-bg-fill',
+      icon: 'text-warning-on-bg-fill'
+    },
+    withinContentContainer: {
+      background: 'bg-surface-warning',
+      text: 'text-warning',
+      icon: 'text-warning'
+    },
+    icon: polarisIcons.AlertTriangleIcon
+  },
+  critical: {
+    withinPage: {
+      background: 'bg-fill-critical',
+      text: 'text-critical-on-bg-fill',
+      icon: 'text-critical-on-bg-fill'
+    },
+    withinContentContainer: {
+      background: 'bg-surface-critical',
+      text: 'text-critical',
+      icon: 'text-critical'
+    },
+    icon: polarisIcons.AlertDiamondIcon
+  },
+  info: {
+    withinPage: {
+      background: 'bg-fill-info',
+      text: 'text-info-on-bg-fill',
+      icon: 'text-info-on-bg-fill'
+    },
+    withinContentContainer: {
+      background: 'bg-surface-info',
+      text: 'text-info',
+      icon: 'text-info'
+    },
+    icon: polarisIcons.InfoIcon
+  }
+};
+function useBannerFocus(bannerRef) {
+  const wrapperRef = React.useRef(null);
+  const [shouldShowFocus, setShouldShowFocus] = React.useState(false);
+  React.useImperativeHandle(bannerRef, () => ({
+    focus: () => {
+      wrapperRef.current?.focus();
+      setShouldShowFocus(true);
+    }
+  }), []);
+  const handleKeyUp = event => {
+    if (event.target === wrapperRef.current) {
+      setShouldShowFocus(true);
+    }
+  };
+  const handleBlur = () => setShouldShowFocus(false);
+  const handleMouseUp = event => {
+    event.currentTarget.blur();
+    setShouldShowFocus(false);
+  };
+  return {
+    wrapperRef,
+    handleKeyUp,
+    handleBlur,
+    handleMouseUp,
+    shouldShowFocus
+  };
+}
+
+exports.bannerAttributes = bannerAttributes;
+exports.useBannerFocus = useBannerFocus;

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

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

package/build/cjs/components/Bleed/Bleed.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var Bleed_module = require('./Bleed.css.js');
+
+const Bleed = ({
+  marginInline,
+  marginBlock,
+  marginBlockStart,
+  marginBlockEnd,
+  marginInlineStart,
+  marginInlineEnd,
+  children
+}) => {
+  const getNegativeMargins = direction => {
+    const xAxis = ['marginInlineStart', 'marginInlineEnd'];
+    const yAxis = ['marginBlockStart', 'marginBlockEnd'];
+    const directionValues = {
+      marginBlockStart,
+      marginBlockEnd,
+      marginInlineStart,
+      marginInlineEnd,
+      marginInline,
+      marginBlock
+    };
+    if (directionValues[direction]) {
+      return directionValues[direction];
+    } else if (xAxis.includes(direction) && marginInline) {
+      return directionValues.marginInline;
+    } else if (yAxis.includes(direction) && marginBlock) {
+      return directionValues.marginBlock;
+    }
+  };
+  const negativeMarginBlockStart = getNegativeMargins('marginBlockStart');
+  const negativeMarginBlockEnd = getNegativeMargins('marginBlockEnd');
+  const negativeMarginInlineStart = getNegativeMargins('marginInlineStart');
+  const negativeMarginInlineEnd = getNegativeMargins('marginInlineEnd');
+  const style = {
+    ...css.getResponsiveProps('bleed', 'margin-block-start', 'space', negativeMarginBlockStart),
+    ...css.getResponsiveProps('bleed', 'margin-block-end', 'space', negativeMarginBlockEnd),
+    ...css.getResponsiveProps('bleed', 'margin-inline-start', 'space', negativeMarginInlineStart),
+    ...css.getResponsiveProps('bleed', 'margin-inline-end', 'space', negativeMarginInlineEnd)
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: Bleed_module.default.Bleed,
+    style: css.sanitizeCustomProperties(style)
+  }, children);
+};
+
+exports.Bleed = Bleed;

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

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

package/build/cjs/components/BlockStack/BlockStack.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var BlockStack_module = require('./BlockStack.css.js');
+
+const BlockStack = ({
+  as = 'div',
+  children,
+  align,
+  inlineAlign,
+  gap,
+  id,
+  reverseOrder = false,
+  ...restProps
+}) => {
+  const className = css.classNames(BlockStack_module.default.BlockStack, (as === 'ul' || as === 'ol') && BlockStack_module.default.listReset, as === 'fieldset' && BlockStack_module.default.fieldsetReset);
+  const style = {
+    '--pc-block-stack-align': align ? `${align}` : null,
+    '--pc-block-stack-inline-align': inlineAlign ? `${inlineAlign}` : null,
+    '--pc-block-stack-order': reverseOrder ? 'column-reverse' : 'column',
+    ...css.getResponsiveProps('block-stack', 'gap', 'space', gap)
+  };
+  return /*#__PURE__*/React.createElement(as, {
+    className,
+    id,
+    style: css.sanitizeCustomProperties(style),
+    ...restProps
+  }, children);
+};
+
+exports.BlockStack = BlockStack;

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

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

package/build/cjs/components/Box/Box.js

@@ -0,0 +1,114 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var Box_module = require('./Box.css.js');
+
+const Box = /*#__PURE__*/React.forwardRef(({
+  as = 'div',
+  background,
+  borderColor,
+  borderStyle,
+  borderWidth,
+  borderBlockStartWidth,
+  borderBlockEndWidth,
+  borderInlineStartWidth,
+  borderInlineEndWidth,
+  borderRadius,
+  borderEndStartRadius,
+  borderEndEndRadius,
+  borderStartStartRadius,
+  borderStartEndRadius,
+  children,
+  color,
+  id,
+  minHeight,
+  minWidth,
+  maxWidth,
+  overflowX,
+  overflowY,
+  outlineColor,
+  outlineStyle,
+  outlineWidth,
+  padding,
+  paddingBlock,
+  paddingBlockStart,
+  paddingBlockEnd,
+  paddingInline,
+  paddingInlineStart,
+  paddingInlineEnd,
+  role,
+  shadow,
+  tabIndex,
+  width,
+  printHidden,
+  visuallyHidden,
+  position,
+  insetBlockStart,
+  insetBlockEnd,
+  insetInlineStart,
+  insetInlineEnd,
+  zIndex,
+  opacity,
+  className: customClassName,
+  style: customStyle,
+  ...restProps
+}, ref) => {
+  // eslint-disable-next-line no-nested-ternary
+  const borderStyleValue = borderStyle ? borderStyle : borderColor || borderWidth || borderBlockStartWidth || borderBlockEndWidth || borderInlineStartWidth || borderInlineEndWidth ? 'solid' : undefined;
+
+  // eslint-disable-next-line no-nested-ternary
+  const outlineStyleValue = outlineStyle ? outlineStyle : outlineColor || outlineWidth ? 'solid' : undefined;
+  const style = {
+    '--pc-box-color': color ? `var(--p-color-${color})` : undefined,
+    '--pc-box-background': background ? `var(--p-color-${background})` : undefined,
+    // eslint-disable-next-line no-nested-ternary
+    '--pc-box-border-color': borderColor ? borderColor === 'transparent' ? 'transparent' : `var(--p-color-${borderColor})` : undefined,
+    '--pc-box-border-style': borderStyleValue,
+    '--pc-box-border-radius': borderRadius ? `var(--p-border-radius-${borderRadius})` : undefined,
+    '--pc-box-border-end-start-radius': borderEndStartRadius ? `var(--p-border-radius-${borderEndStartRadius})` : undefined,
+    '--pc-box-border-end-end-radius': borderEndEndRadius ? `var(--p-border-radius-${borderEndEndRadius})` : undefined,
+    '--pc-box-border-start-start-radius': borderStartStartRadius ? `var(--p-border-radius-${borderStartStartRadius})` : undefined,
+    '--pc-box-border-start-end-radius': borderStartEndRadius ? `var(--p-border-radius-${borderStartEndRadius})` : undefined,
+    '--pc-box-border-width': borderWidth ? `var(--p-border-width-${borderWidth})` : undefined,
+    '--pc-box-border-block-start-width': borderBlockStartWidth ? `var(--p-border-width-${borderBlockStartWidth})` : undefined,
+    '--pc-box-border-block-end-width': borderBlockEndWidth ? `var(--p-border-width-${borderBlockEndWidth})` : undefined,
+    '--pc-box-border-inline-start-width': borderInlineStartWidth ? `var(--p-border-width-${borderInlineStartWidth})` : undefined,
+    '--pc-box-border-inline-end-width': borderInlineEndWidth ? `var(--p-border-width-${borderInlineEndWidth})` : undefined,
+    '--pc-box-min-height': minHeight,
+    '--pc-box-min-width': minWidth,
+    '--pc-box-max-width': maxWidth,
+    '--pc-box-outline-color': outlineColor ? `var(--p-color-${outlineColor})` : undefined,
+    '--pc-box-outline-style': outlineStyleValue,
+    '--pc-box-outline-width': outlineWidth ? `var(--p-border-width-${outlineWidth})` : undefined,
+    '--pc-box-overflow-x': overflowX,
+    '--pc-box-overflow-y': overflowY,
+    ...css.getResponsiveProps('box', 'padding-block-start', 'space', paddingBlockStart || paddingBlock || padding),
+    ...css.getResponsiveProps('box', 'padding-block-end', 'space', paddingBlockEnd || paddingBlock || padding),
+    ...css.getResponsiveProps('box', 'padding-inline-start', 'space', paddingInlineStart || paddingInline || padding),
+    ...css.getResponsiveProps('box', 'padding-inline-end', 'space', paddingInlineEnd || paddingInline || padding),
+    '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
+    '--pc-box-width': width,
+    position,
+    '--pc-box-inset-block-start': insetBlockStart ? `var(--p-space-${insetBlockStart})` : undefined,
+    '--pc-box-inset-block-end': insetBlockEnd ? `var(--p-space-${insetBlockEnd})` : undefined,
+    '--pc-box-inset-inline-start': insetInlineStart ? `var(--p-space-${insetInlineStart})` : undefined,
+    '--pc-box-inset-inline-end': insetInlineEnd ? `var(--p-space-${insetInlineEnd})` : undefined,
+    zIndex,
+    opacity,
+    ...customStyle
+  };
+  const className = css.classNames(Box_module.default.Box, visuallyHidden && Box_module.default.visuallyHidden, printHidden && Box_module.default.printHidden, as === 'ul' && Box_module.default.listReset, customClassName);
+  return /*#__PURE__*/React.createElement(as, {
+    className,
+    id,
+    ref,
+    style: css.sanitizeCustomProperties(style),
+    role,
+    tabIndex,
+    ...restProps
+  }, children);
+});
+Box.displayName = 'Box';
+
+exports.Box = Box;

package/build/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var polarisIcons = require('@shopify/polaris-icons');
+var focus = require('../../utilities/focus.js');
+var Button = require('../Button/Button.js');
+
+function Breadcrumbs({
+  backAction
+}) {
+  const {
+    content
+  } = backAction;
+  return /*#__PURE__*/React.createElement(Button.Button, {
+    key: content,
+    url: 'url' in backAction ? backAction.url : undefined,
+    onClick: 'onAction' in backAction ? backAction.onAction : undefined,
+    onPointerDown: focus.handleMouseUpByBlurring,
+    icon: polarisIcons.ArrowLeftIcon,
+    accessibilityLabel: backAction.accessibilityLabel ?? content
+  });
+}
+
+exports.Breadcrumbs = Breadcrumbs;