polaris-react-extended 13.10.3

package/build/cjs/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var options = require('../../utilities/options.js');
+var Autocomplete_module = require('./Autocomplete.css.js');
+var MappedOption = require('./components/MappedOption/MappedOption.js');
+var Listbox = require('../Listbox/Listbox.js');
+var Combobox = require('../Combobox/Combobox.js');
+var MappedAction = require('./components/MappedAction/MappedAction.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+
+// TypeScript can't generate types that correctly infer the typing of
+// subcomponents so explicitly state the subcomponents in the type definition.
+// Letting this be implicit works in this project but fails in projects that use
+// generated *.d.ts files.
+
+const Autocomplete = function Autocomplete({
+  options: options$1,
+  selected,
+  textField,
+  preferredPosition,
+  listTitle,
+  allowMultiple,
+  loading,
+  actionBefore,
+  willLoadMoreResults,
+  emptyState,
+  onSelect,
+  onLoadMoreResults
+}) {
+  const i18n = hooks.useI18n();
+  const buildMappedOptionFromOption = React.useCallback(options => {
+    return options.map(option => /*#__PURE__*/React.createElement(MappedOption.MappedOption, Object.assign({
+      key: option.id || option.value
+    }, option, {
+      selected: selected.includes(option.value),
+      singleSelection: !allowMultiple
+    })));
+  }, [selected, allowMultiple]);
+  const optionsMarkup = React.useMemo(() => {
+    const conditionalOptions = loading && !willLoadMoreResults ? [] : options$1;
+    if (options.isSection(conditionalOptions)) {
+      const noOptionsAvailable = conditionalOptions.every(({
+        options
+      }) => options.length === 0);
+      if (noOptionsAvailable) {
+        return null;
+      }
+      const optionsMarkup = conditionalOptions.map(({
+        options,
+        title
+      }) => {
+        if (options.length === 0) {
+          return null;
+        }
+        const optionMarkup = buildMappedOptionFromOption(options);
+        return /*#__PURE__*/React.createElement(Listbox.Listbox.Section, {
+          divider: false,
+          title: /*#__PURE__*/React.createElement(Listbox.Listbox.Header, null, title),
+          key: title
+        }, optionMarkup);
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: Autocomplete_module.default.SectionWrapper
+      }, optionsMarkup);
+    }
+    const optionList = conditionalOptions.length > 0 ? buildMappedOptionFromOption(conditionalOptions) : null;
+    if (listTitle) {
+      return /*#__PURE__*/React.createElement(Listbox.Listbox.Section, {
+        divider: false,
+        title: /*#__PURE__*/React.createElement(Listbox.Listbox.Header, null, listTitle)
+      }, optionList);
+    }
+    return optionList;
+  }, [listTitle, loading, options$1, willLoadMoreResults, buildMappedOptionFromOption]);
+  const loadingMarkup = loading ? /*#__PURE__*/React.createElement(Listbox.Listbox.Loading, {
+    accessibilityLabel: i18n.translate('Polaris.Autocomplete.spinnerAccessibilityLabel')
+  }) : null;
+  const updateSelection = React.useCallback(newSelection => {
+    if (actionBefore && newSelection === actionBefore.content) {
+      actionBefore.onAction && actionBefore.onAction();
+      return;
+    }
+    if (allowMultiple) {
+      if (selected.includes(newSelection)) {
+        onSelect(selected.filter(option => option !== newSelection));
+      } else {
+        onSelect([...selected, newSelection]);
+      }
+    } else {
+      onSelect([newSelection]);
+    }
+  }, [allowMultiple, onSelect, selected, actionBefore]);
+  const actionMarkup = actionBefore && /*#__PURE__*/React.createElement(MappedAction.MappedAction, actionBefore);
+  const emptyStateMarkup = emptyState && options$1.length < 1 && !loading && /*#__PURE__*/React.createElement("div", {
+    role: "status"
+  }, emptyState);
+  const autoSelection = actionBefore ? Listbox.AutoSelection.First : undefined;
+  return /*#__PURE__*/React.createElement(Combobox.Combobox, {
+    activator: textField,
+    allowMultiple: allowMultiple,
+    onScrolledToBottom: onLoadMoreResults,
+    preferredPosition: preferredPosition,
+    willLoadMoreOptions: willLoadMoreResults
+  }, actionMarkup || optionsMarkup || loadingMarkup || emptyStateMarkup ? /*#__PURE__*/React.createElement(Listbox.Listbox, {
+    autoSelection: autoSelection,
+    onSelect: updateSelection
+  }, actionMarkup, optionsMarkup && (!loading || willLoadMoreResults) ? optionsMarkup : null, loadingMarkup, emptyStateMarkup) : null);
+};
+Autocomplete.TextField = Combobox.Combobox.TextField;
+
+exports.Autocomplete = Autocomplete;

package/build/cjs/components/Autocomplete/components/MappedAction/MappedAction.css.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "ActionContainer": "Polaris-MappedAction__ActionContainer",
+  "Action": "Polaris-MappedAction__Action",
+  "destructive": "Polaris-MappedAction--destructive",
+  "selected": "Polaris-MappedAction--selected",
+  "disabled": "Polaris-MappedAction--disabled",
+  "Prefix": "Polaris-MappedAction__Prefix",
+  "Suffix": "Polaris-MappedAction__Suffix",
+  "Content": "Polaris-MappedAction__Content",
+  "Text": "Polaris-MappedAction__Text"
+};
+
+exports.default = styles;

package/build/cjs/components/Autocomplete/components/MappedAction/MappedAction.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../../../utilities/css.js');
+var MappedAction_module = require('./MappedAction.css.js');
+var hooks = require('../../../../utilities/i18n/hooks.js');
+var Icon = require('../../../Icon/Icon.js');
+var Badge = require('../../../Badge/Badge.js');
+var Text = require('../../../Text/Text.js');
+var context = require('../../../../utilities/autocomplete/context.js');
+var Listbox = require('../../../Listbox/Listbox.js');
+
+function MappedAction({
+  active,
+  content,
+  disabled,
+  icon,
+  image,
+  prefix,
+  suffix,
+  ellipsis,
+  role,
+  url,
+  external,
+  onAction,
+  destructive,
+  badge,
+  helpText,
+  wrapOverflow = false
+}) {
+  const i18n = hooks.useI18n();
+  let prefixMarkup = null;
+  if (prefix) {
+    prefixMarkup = /*#__PURE__*/React.createElement("div", {
+      className: MappedAction_module.default.Prefix
+    }, prefix);
+  } else if (icon) {
+    prefixMarkup = /*#__PURE__*/React.createElement("div", {
+      className: MappedAction_module.default.Prefix
+    }, /*#__PURE__*/React.createElement(Icon.Icon, {
+      source: icon
+    }));
+  } else if (image) {
+    prefixMarkup = /*#__PURE__*/React.createElement("div", {
+      role: "presentation",
+      className: MappedAction_module.default.Prefix,
+      style: {
+        backgroundImage: `url(${image}`
+      }
+    });
+  }
+  const badgeMarkup = badge && /*#__PURE__*/React.createElement("span", {
+    className: MappedAction_module.default.Suffix
+  }, /*#__PURE__*/React.createElement(Badge.Badge, {
+    tone: badge.tone
+  }, badge.content));
+  const suffixMarkup = suffix && /*#__PURE__*/React.createElement("span", {
+    className: MappedAction_module.default.Suffix
+  }, suffix);
+  const contentText = ellipsis && content ? i18n.translate('Polaris.Autocomplete.ellipsis', {
+    content
+  }) : content;
+  const contentMarkup = /*#__PURE__*/React.createElement("div", {
+    className: MappedAction_module.default.Text
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "p",
+    variant: "bodyMd",
+    breakWord: wrapOverflow
+  }, contentText), helpText ? /*#__PURE__*/React.createElement(Text.Text, {
+    as: "p",
+    variant: "bodyMd",
+    tone: "subdued"
+  }, helpText) : null);
+  const context$1 = React.useMemo(() => ({
+    role,
+    url,
+    external,
+    onAction,
+    destructive
+  }), [role, url, external, onAction, destructive]);
+  const actionClassNames = css.classNames(MappedAction_module.default.Action, disabled && MappedAction_module.default.disabled, destructive && MappedAction_module.default.destructive, active && MappedAction_module.default.selected);
+  return /*#__PURE__*/React.createElement(context.MappedActionContext.Provider, {
+    value: context$1
+  }, /*#__PURE__*/React.createElement("div", {
+    className: MappedAction_module.default.ActionContainer
+  }, /*#__PURE__*/React.createElement(Listbox.Listbox.Action, {
+    selected: active,
+    disabled: disabled,
+    value: content || ''
+  }, /*#__PURE__*/React.createElement("div", {
+    className: actionClassNames
+  }, /*#__PURE__*/React.createElement("div", {
+    className: MappedAction_module.default.Content
+  }, prefixMarkup, contentMarkup, badgeMarkup, suffixMarkup)))));
+}
+
+exports.MappedAction = MappedAction;

package/build/cjs/components/Autocomplete/components/MappedOption/MappedOption.css.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Content": "Polaris-MappedOption__Content",
+  "Media": "Polaris-MappedOption__Media",
+  "singleSelectionMedia": "Polaris-MappedOption--singleSelectionMedia",
+  "disabledMedia": "Polaris-MappedOption--disabledMedia"
+};
+
+exports.default = styles;

package/build/cjs/components/Autocomplete/components/MappedOption/MappedOption.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../../../utilities/css.js');
+var MappedOption_module = require('./MappedOption.css.js');
+var Listbox = require('../../../Listbox/Listbox.js');
+
+const MappedOption = /*#__PURE__*/React.memo(function MappedOption({
+  label,
+  value,
+  disabled,
+  media,
+  selected,
+  singleSelection
+}) {
+  const mediaClassNames = css.classNames(MappedOption_module.default.Media, disabled && MappedOption_module.default.disabledMedia, singleSelection && MappedOption_module.default.singleSelectionMedia);
+  const mediaMarkup = media ? /*#__PURE__*/React.createElement("div", {
+    className: mediaClassNames
+  }, media) : null;
+  const accessibilityLabel = typeof label === 'string' ? label : undefined;
+  return /*#__PURE__*/React.createElement(Listbox.Listbox.Option, {
+    accessibilityLabel: accessibilityLabel,
+    key: value,
+    selected: selected,
+    value: value,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Listbox.Listbox.TextOption, {
+    selected: selected,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement("div", {
+    className: MappedOption_module.default.Content
+  }, mediaMarkup, label)));
+});
+
+exports.MappedOption = MappedOption;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Avatar": "Polaris-Avatar",
+  "imageHasLoaded": "Polaris-Avatar--imageHasLoaded",
+  "Text": "Polaris-Avatar__Text",
+  "long": "Polaris-Avatar--long",
+  "hidden": "Polaris-Avatar--hidden",
+  "sizeXs": "Polaris-Avatar--sizeXs",
+  "sizeSm": "Polaris-Avatar--sizeSm",
+  "sizeMd": "Polaris-Avatar--sizeMd",
+  "sizeLg": "Polaris-Avatar--sizeLg",
+  "sizeXl": "Polaris-Avatar--sizeXl",
+  "styleOne": "Polaris-Avatar--styleOne",
+  "styleTwo": "Polaris-Avatar--styleTwo",
+  "styleThree": "Polaris-Avatar--styleThree",
+  "styleFour": "Polaris-Avatar--styleFour",
+  "styleFive": "Polaris-Avatar--styleFive",
+  "styleSix": "Polaris-Avatar--styleSix",
+  "styleSeven": "Polaris-Avatar--styleSeven",
+  "Image": "Polaris-Avatar__Image",
+  "Initials": "Polaris-Avatar__Initials",
+  "Svg": "Polaris-Avatar__Svg"
+};
+
+exports.default = styles;

package/build/cjs/components/Avatar/Avatar.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var useIsAfterInitialMount = require('../../utilities/use-is-after-initial-mount.js');
+var Avatar_module = require('./Avatar.css.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var Image = require('../Image/Image.js');
+
+var Status = /*#__PURE__*/function (Status) {
+  Status["Pending"] = "PENDING";
+  Status["Loaded"] = "LOADED";
+  Status["Errored"] = "ERRORED";
+  return Status;
+}(Status || {});
+const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
+const avatarStrokeWidth = {
+  xs: '3',
+  sm: '2.5',
+  md: '2.5',
+  lg: '2.5',
+  xl: '2'
+};
+
+/**
+ * Computes a rudimentary hash from a string by xoring the character codes
+ * of all characters
+ */
+function xorHash(str) {
+  let hash = 0;
+  for (const char of str) {
+    hash ^= char.charCodeAt(0);
+  }
+  return hash;
+}
+function styleClass(name) {
+  return name ? STYLE_CLASSES[xorHash(name) % STYLE_CLASSES.length] : STYLE_CLASSES[0];
+}
+function Avatar({
+  name,
+  source,
+  onError,
+  initials,
+  customer,
+  size = 'md',
+  accessibilityLabel
+}) {
+  const i18n = hooks.useI18n();
+  const isAfterInitialMount = useIsAfterInitialMount.useIsAfterInitialMount();
+  const [status, setStatus] = React.useState(Status.Pending);
+
+  // If the source changes, set the status back to pending
+  React.useEffect(() => {
+    setStatus(Status.Pending);
+  }, [source]);
+  const handleError = React.useCallback(() => {
+    setStatus(Status.Errored);
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+  const handleLoad = React.useCallback(() => {
+    setStatus(Status.Loaded);
+  }, []);
+  const hasImage = source && status !== Status.Errored;
+  const nameString = name || initials;
+  let label;
+  if (accessibilityLabel) {
+    label = accessibilityLabel;
+  } else if (name) {
+    label = name;
+  } else if (initials) {
+    const splitInitials = initials.split('').join(' ');
+    label = i18n.translate('Polaris.Avatar.labelWithInitials', {
+      initials: splitInitials
+    });
+  }
+  const className = css.classNames(Avatar_module.default.Avatar, size && Avatar_module.default[css.variationName('size', size)], hasImage && status === Status.Loaded && Avatar_module.default.imageHasLoaded, !customer && !hasImage && Avatar_module.default[css.variationName('style', styleClass(nameString))]);
+  const textClassName = css.classNames(Avatar_module.default.Text, (initials?.length || 0) > 2 && Avatar_module.default.long);
+  const imageClassName = css.classNames(Avatar_module.default.Image, status !== Status.Loaded && Avatar_module.default.hidden);
+  const imageMarkUp = source && isAfterInitialMount && status !== Status.Errored ? /*#__PURE__*/React.createElement(Image.Image, {
+    className: imageClassName,
+    source: source,
+    alt: "",
+    role: "presentation",
+    onLoad: handleLoad,
+    onError: handleError
+  }) : null;
+  // Use `dominant-baseline: central` instead of `dy` when Edge supports it.
+  const verticalOffset = '0.35em';
+  const avatarPath = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M25.5 13.5C25.5 16.5376 23.0376 19 20 19C16.9624 19 14.5 16.5376 14.5 13.5C14.5 10.4624 16.9624 8 20 8C23.0376 8 25.5 10.4624 25.5 13.5Z",
+    stroke: "currentColor",
+    strokeWidth: avatarStrokeWidth[size]
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "none",
+    d: "M10.3433 29.682L9.47 31.254C9.03481 32.0373 9.60125 33 10.4974 33H29.5026C30.3988 33 30.9652 32.0373 30.53 31.254L29.6567 29.682C27.7084 26.175 24.0119 24 20 24C15.9882 24 12.2916 26.175 10.3433 29.682Z",
+    stroke: "currentColor",
+    strokeWidth: avatarStrokeWidth[size],
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+  const avatarBody = customer || !initials ? avatarPath : /*#__PURE__*/React.createElement("text", {
+    className: textClassName,
+    x: "50%",
+    y: "50%",
+    dy: verticalOffset,
+    fill: "currentColor",
+    textAnchor: "middle"
+  }, initials);
+  const svgMarkup = hasImage ? null : /*#__PURE__*/React.createElement("span", {
+    className: Avatar_module.default.Initials
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: Avatar_module.default.Svg,
+    viewBox: "0 0 40 40"
+  }, avatarBody));
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-label": label,
+    role: label ? 'img' : 'presentation',
+    className: className
+  }, svgMarkup, imageMarkUp);
+}
+
+exports.Avatar = Avatar;
+exports.STYLE_CLASSES = STYLE_CLASSES;

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

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

package/build/cjs/components/Backdrop/Backdrop.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var Backdrop_module = require('./Backdrop.css.js');
+var ScrollLock = require('../ScrollLock/ScrollLock.js');
+
+function Backdrop(props) {
+  const {
+    onClick,
+    onTouchStart,
+    belowNavigation,
+    transparent,
+    setClosing
+  } = props;
+  const className = css.classNames(Backdrop_module.default.Backdrop, belowNavigation && Backdrop_module.default.belowNavigation, transparent && Backdrop_module.default.transparent);
+  const handleMouseDown = () => {
+    if (setClosing) {
+      setClosing(true);
+    }
+  };
+  const handleClick = () => {
+    if (setClosing) {
+      setClosing(false);
+    }
+    if (onClick) {
+      onClick();
+    }
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollLock.ScrollLock, null), /*#__PURE__*/React.createElement("div", {
+    className: className,
+    onClick: handleClick,
+    onTouchStart: onTouchStart,
+    onMouseDown: handleMouseDown
+  }));
+}
+
+exports.Backdrop = Backdrop;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Badge": "Polaris-Badge",
+  "toneSuccess": "Polaris-Badge--toneSuccess",
+  "toneSuccess-strong": "Polaris-Badge__toneSuccess--strong",
+  "toneInfo": "Polaris-Badge--toneInfo",
+  "toneInfo-strong": "Polaris-Badge__toneInfo--strong",
+  "toneAttention": "Polaris-Badge--toneAttention",
+  "toneAttention-strong": "Polaris-Badge__toneAttention--strong",
+  "toneWarning": "Polaris-Badge--toneWarning",
+  "toneWarning-strong": "Polaris-Badge__toneWarning--strong",
+  "toneCritical": "Polaris-Badge--toneCritical",
+  "toneCritical-strong": "Polaris-Badge__toneCritical--strong",
+  "toneNew": "Polaris-Badge--toneNew",
+  "toneMagic": "Polaris-Badge--toneMagic",
+  "toneRead-only": "Polaris-Badge__toneRead--only",
+  "toneEnabled": "Polaris-Badge--toneEnabled",
+  "sizeLarge": "Polaris-Badge--sizeLarge",
+  "withinFilter": "Polaris-Badge--withinFilter",
+  "Icon": "Polaris-Badge__Icon",
+  "PipContainer": "Polaris-Badge__PipContainer"
+};
+
+exports.default = styles;

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

@@ -0,0 +1,71 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../utilities/css.js');
+var withinFilterContext = require('../../utilities/within-filter-context.js');
+var Badge_module = require('./Badge.css.js');
+var utils = require('./utils.js');
+var Pip = require('./components/Pip/Pip.js');
+var hooks = require('../../utilities/i18n/hooks.js');
+var Icon = require('../Icon/Icon.js');
+var Text = require('../Text/Text.js');
+
+const DEFAULT_SIZE = 'medium';
+const progressIconMap = {
+  complete: () => /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 10c0-.93 0-1.395.102-1.776a3 3 0 0 1 2.121-2.122C8.605 6 9.07 6 10 6c.93 0 1.395 0 1.776.102a3 3 0 0 1 2.122 2.122C14 8.605 14 9.07 14 10s0 1.395-.102 1.777a3 3 0 0 1-2.122 2.12C11.395 14 10.93 14 10 14s-1.395 0-1.777-.102a3 3 0 0 1-2.12-2.121C6 11.395 6 10.93 6 10Z"
+  })),
+  partiallyComplete: () => /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m8.888 6.014-.017-.018-.02.02c-.253.013-.45.038-.628.086a3 3 0 0 0-2.12 2.122C6 8.605 6 9.07 6 10s0 1.395.102 1.777a3 3 0 0 0 2.121 2.12C8.605 14 9.07 14 10 14c.93 0 1.395 0 1.776-.102a3 3 0 0 0 2.122-2.121C14 11.395 14 10.93 14 10c0-.93 0-1.395-.102-1.776a3 3 0 0 0-2.122-2.122C11.395 6 10.93 6 10 6c-.475 0-.829 0-1.112.014ZM8.446 7.34a1.75 1.75 0 0 0-1.041.94l4.314 4.315c.443-.2.786-.576.941-1.042L8.446 7.34Zm4.304 2.536L10.124 7.25c.908.001 1.154.013 1.329.06a1.75 1.75 0 0 1 1.237 1.237c.047.175.059.42.06 1.329ZM8.547 12.69c.182.05.442.06 1.453.06h.106L7.25 9.894V10c0 1.01.01 1.27.06 1.453a1.75 1.75 0 0 0 1.237 1.237Z"
+  })),
+  incomplete: () => /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M8.547 12.69c.183.05.443.06 1.453.06s1.27-.01 1.453-.06a1.75 1.75 0 0 0 1.237-1.237c.05-.182.06-.443.06-1.453s-.01-1.27-.06-1.453a1.75 1.75 0 0 0-1.237-1.237c-.182-.05-.443-.06-1.453-.06s-1.27.01-1.453.06A1.75 1.75 0 0 0 7.31 8.547c-.05.183-.06.443-.06 1.453s.01 1.27.06 1.453a1.75 1.75 0 0 0 1.237 1.237ZM6.102 8.224C6 8.605 6 9.07 6 10s0 1.395.102 1.777a3 3 0 0 0 2.122 2.12C8.605 14 9.07 14 10 14s1.395 0 1.777-.102a3 3 0 0 0 2.12-2.121C14 11.395 14 10.93 14 10c0-.93 0-1.395-.102-1.776a3 3 0 0 0-2.121-2.122C11.395 6 10.93 6 10 6c-.93 0-1.395 0-1.776.102a3 3 0 0 0-2.122 2.122Z"
+  }))
+};
+function Badge({
+  children,
+  tone,
+  progress,
+  icon,
+  size = DEFAULT_SIZE,
+  toneAndProgressLabelOverride
+}) {
+  const i18n = hooks.useI18n();
+  const withinFilter = React.useContext(withinFilterContext.WithinFilterContext);
+  const className = css.classNames(Badge_module.default.Badge, tone && Badge_module.default[css.variationName('tone', tone)], size && size !== DEFAULT_SIZE && Badge_module.default[css.variationName('size', size)], withinFilter && Badge_module.default.withinFilter);
+  const accessibilityLabel = toneAndProgressLabelOverride ? toneAndProgressLabelOverride : utils.getDefaultAccessibilityLabel(i18n, progress, tone);
+  let accessibilityMarkup = Boolean(accessibilityLabel) && /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    visuallyHidden: true
+  }, accessibilityLabel);
+  if (progress && !icon) {
+    accessibilityMarkup = /*#__PURE__*/React.createElement("span", {
+      className: Badge_module.default.Icon
+    }, /*#__PURE__*/React.createElement(Icon.Icon, {
+      accessibilityLabel: accessibilityLabel,
+      source: progressIconMap[progress]
+    }));
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, accessibilityMarkup, icon && /*#__PURE__*/React.createElement("span", {
+    className: Badge_module.default.Icon
+  }, /*#__PURE__*/React.createElement(Icon.Icon, {
+    source: icon
+  })), children && /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    variant: "bodySm",
+    fontWeight: tone === 'new' ? 'medium' : undefined
+  }, children));
+}
+Badge.Pip = Pip.Pip;
+
+exports.Badge = Badge;

package/build/cjs/components/Badge/components/Pip/Pip.css.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = {
+  "Pip": "Polaris-Pip",
+  "toneInfo": "Polaris-Pip--toneInfo",
+  "toneSuccess": "Polaris-Pip--toneSuccess",
+  "toneNew": "Polaris-Pip--toneNew",
+  "toneAttention": "Polaris-Pip--toneAttention",
+  "toneWarning": "Polaris-Pip--toneWarning",
+  "toneCritical": "Polaris-Pip--toneCritical",
+  "progressIncomplete": "Polaris-Pip--progressIncomplete",
+  "progressPartiallyComplete": "Polaris-Pip--progressPartiallyComplete",
+  "progressComplete": "Polaris-Pip--progressComplete"
+};
+
+exports.default = styles;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var css = require('../../../../utilities/css.js');
+var utils = require('../../utils.js');
+var Pip_module = require('./Pip.css.js');
+var hooks = require('../../../../utilities/i18n/hooks.js');
+var Text = require('../../../Text/Text.js');
+
+function Pip({
+  tone,
+  progress = 'complete',
+  accessibilityLabelOverride
+}) {
+  const i18n = hooks.useI18n();
+  const className = css.classNames(Pip_module.default.Pip, tone && Pip_module.default[css.variationName('tone', tone)], progress && Pip_module.default[css.variationName('progress', progress)]);
+  const accessibilityLabel = accessibilityLabelOverride ? accessibilityLabelOverride : utils.getDefaultAccessibilityLabel(i18n, progress, tone);
+  return /*#__PURE__*/React.createElement("span", {
+    className: className
+  }, /*#__PURE__*/React.createElement(Text.Text, {
+    as: "span",
+    visuallyHidden: true
+  }, accessibilityLabel));
+}
+
+exports.Pip = Pip;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+let ToneValue = /*#__PURE__*/function (ToneValue) {
+  ToneValue["Info"] = "info";
+  ToneValue["Success"] = "success";
+  ToneValue["Warning"] = "warning";
+  ToneValue["Critical"] = "critical";
+  ToneValue["Attention"] = "attention";
+  ToneValue["New"] = "new";
+  ToneValue["Magic"] = "magic";
+  ToneValue["InfoStrong"] = "info-strong";
+  ToneValue["SuccessStrong"] = "success-strong";
+  ToneValue["WarningStrong"] = "warning-strong";
+  ToneValue["CriticalStrong"] = "critical-strong";
+  ToneValue["AttentionStrong"] = "attention-strong";
+  ToneValue["ReadOnly"] = "read-only";
+  ToneValue["Enabled"] = "enabled";
+  return ToneValue;
+}({});
+let ProgressValue = /*#__PURE__*/function (ProgressValue) {
+  ProgressValue["Incomplete"] = "incomplete";
+  ProgressValue["PartiallyComplete"] = "partiallyComplete";
+  ProgressValue["Complete"] = "complete";
+  return ProgressValue;
+}({});
+
+exports.ProgressValue = ProgressValue;
+exports.ToneValue = ToneValue;