@shopify/polaris/index.js

Shopify’s product component library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var tslib = require('tslib');
var polarisIcons = require('@shopify/polaris-icons');
var focus = require('@shopify/javascript-utilities/focus');
var debounce = _interopDefault(require('lodash/debounce'));
var events = require('@shopify/javascript-utilities/events');
var dom = require('@shopify/javascript-utilities/dom');
var geometry = require('@shopify/javascript-utilities/geometry');
var tokens = require('@shopify/polaris-tokens');
var tokens__default = _interopDefault(tokens);
var reactDom = require('react-dom');
var other = require('@shopify/javascript-utilities/other');
var hsluv = require('hsluv');
var math = require('@shopify/javascript-utilities/math');
var fastdom = require('@shopify/javascript-utilities/fastdom');
var createApp = require('@shopify/app-bridge');
var createApp__default = _interopDefault(createApp);
var isEqual = _interopDefault(require('lodash/isEqual'));
var hoistStatics = _interopDefault(require('hoist-non-react-statics'));
var dates = require('@shopify/javascript-utilities/dates');
var reactTransitionGroup = require('@material-ui/react-transition-group');
var actions = require('@shopify/app-bridge/actions');

if (typeof window !== 'undefined') {
  window.Polaris = window.Polaris || {};
  window.Polaris.VERSION = '4.11.0';
}

var polarisVersion = '4.11.0';

(function (Key) {
  Key[Key["Backspace"] = 8] = "Backspace";
  Key[Key["Tab"] = 9] = "Tab";
  Key[Key["Enter"] = 13] = "Enter";
  Key[Key["Shift"] = 16] = "Shift";
  Key[Key["Ctrl"] = 17] = "Ctrl";
  Key[Key["Alt"] = 18] = "Alt";
  Key[Key["Pause"] = 19] = "Pause";
  Key[Key["CapsLock"] = 20] = "CapsLock";
  Key[Key["Escape"] = 27] = "Escape";
  Key[Key["Space"] = 32] = "Space";
  Key[Key["PageUp"] = 33] = "PageUp";
  Key[Key["PageDown"] = 34] = "PageDown";
  Key[Key["End"] = 35] = "End";
  Key[Key["Home"] = 36] = "Home";
  Key[Key["LeftArrow"] = 37] = "LeftArrow";
  Key[Key["UpArrow"] = 38] = "UpArrow";
  Key[Key["RightArrow"] = 39] = "RightArrow";
  Key[Key["DownArrow"] = 40] = "DownArrow";
  Key[Key["Insert"] = 45] = "Insert";
  Key[Key["Delete"] = 46] = "Delete";
  Key[Key["Key0"] = 48] = "Key0";
  Key[Key["Key1"] = 49] = "Key1";
  Key[Key["Key2"] = 50] = "Key2";
  Key[Key["Key3"] = 51] = "Key3";
  Key[Key["Key4"] = 52] = "Key4";
  Key[Key["Key5"] = 53] = "Key5";
  Key[Key["Key6"] = 54] = "Key6";
  Key[Key["Key7"] = 55] = "Key7";
  Key[Key["Key8"] = 56] = "Key8";
  Key[Key["Key9"] = 57] = "Key9";
  Key[Key["KeyA"] = 65] = "KeyA";
  Key[Key["KeyB"] = 66] = "KeyB";
  Key[Key["KeyC"] = 67] = "KeyC";
  Key[Key["KeyD"] = 68] = "KeyD";
  Key[Key["KeyE"] = 69] = "KeyE";
  Key[Key["KeyF"] = 70] = "KeyF";
  Key[Key["KeyG"] = 71] = "KeyG";
  Key[Key["KeyH"] = 72] = "KeyH";
  Key[Key["KeyI"] = 73] = "KeyI";
  Key[Key["KeyJ"] = 74] = "KeyJ";
  Key[Key["KeyK"] = 75] = "KeyK";
  Key[Key["KeyL"] = 76] = "KeyL";
  Key[Key["KeyM"] = 77] = "KeyM";
  Key[Key["KeyN"] = 78] = "KeyN";
  Key[Key["KeyO"] = 79] = "KeyO";
  Key[Key["KeyP"] = 80] = "KeyP";
  Key[Key["KeyQ"] = 81] = "KeyQ";
  Key[Key["KeyR"] = 82] = "KeyR";
  Key[Key["KeyS"] = 83] = "KeyS";
  Key[Key["KeyT"] = 84] = "KeyT";
  Key[Key["KeyU"] = 85] = "KeyU";
  Key[Key["KeyV"] = 86] = "KeyV";
  Key[Key["KeyW"] = 87] = "KeyW";
  Key[Key["KeyX"] = 88] = "KeyX";
  Key[Key["KeyY"] = 89] = "KeyY";
  Key[Key["KeyZ"] = 90] = "KeyZ";
  Key[Key["LeftMeta"] = 91] = "LeftMeta";
  Key[Key["RightMeta"] = 92] = "RightMeta";
  Key[Key["Select"] = 93] = "Select";
  Key[Key["Numpad0"] = 96] = "Numpad0";
  Key[Key["Numpad1"] = 97] = "Numpad1";
  Key[Key["Numpad2"] = 98] = "Numpad2";
  Key[Key["Numpad3"] = 99] = "Numpad3";
  Key[Key["Numpad4"] = 100] = "Numpad4";
  Key[Key["Numpad5"] = 101] = "Numpad5";
  Key[Key["Numpad6"] = 102] = "Numpad6";
  Key[Key["Numpad7"] = 103] = "Numpad7";
  Key[Key["Numpad8"] = 104] = "Numpad8";
  Key[Key["Numpad9"] = 105] = "Numpad9";
  Key[Key["Multiply"] = 106] = "Multiply";
  Key[Key["Add"] = 107] = "Add";
  Key[Key["Subtract"] = 109] = "Subtract";
  Key[Key["Decimal"] = 110] = "Decimal";
  Key[Key["Divide"] = 111] = "Divide";
  Key[Key["F1"] = 112] = "F1";
  Key[Key["F2"] = 113] = "F2";
  Key[Key["F3"] = 114] = "F3";
  Key[Key["F4"] = 115] = "F4";
  Key[Key["F5"] = 116] = "F5";
  Key[Key["F6"] = 117] = "F6";
  Key[Key["F7"] = 118] = "F7";
  Key[Key["F8"] = 119] = "F8";
  Key[Key["F9"] = 120] = "F9";
  Key[Key["F10"] = 121] = "F10";
  Key[Key["F11"] = 122] = "F11";
  Key[Key["F12"] = 123] = "F12";
  Key[Key["NumLock"] = 144] = "NumLock";
  Key[Key["ScrollLock"] = 145] = "ScrollLock";
  Key[Key["Semicolon"] = 186] = "Semicolon";
  Key[Key["Equals"] = 187] = "Equals";
  Key[Key["Comma"] = 188] = "Comma";
  Key[Key["Dash"] = 189] = "Dash";
  Key[Key["Period"] = 190] = "Period";
  Key[Key["ForwardSlash"] = 191] = "ForwardSlash";
  Key[Key["GraveAccent"] = 192] = "GraveAccent";
  Key[Key["OpenBracket"] = 219] = "OpenBracket";
  Key[Key["BackSlash"] = 220] = "BackSlash";
  Key[Key["CloseBracket"] = 221] = "CloseBracket";
  Key[Key["SingleQuote"] = 222] = "SingleQuote";
})(exports.Key || (exports.Key = {}));

(function (TypeOf) {
  TypeOf["Undefined"] = "undefined";
  TypeOf["Object"] = "object";
  TypeOf["Boolean"] = "boolean";
  TypeOf["Number"] = "number";
  TypeOf["String"] = "string";
  TypeOf["Symbol"] = "symbol";
  TypeOf["Function"] = "function";
})(exports.TypeOf || (exports.TypeOf = {}));

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;

  try {
    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
    return true;
  } catch (e) {
    return false;
  }
}

function _construct(Parent, args, Class) {
  if (isNativeReflectConstruct()) {
    _construct = Reflect.construct;
  } else {
    _construct = function _construct(Parent, args, Class) {
      var a = [null];
      a.push.apply(a, args);
      var Constructor = Function.bind.apply(Parent, a);
      var instance = new Constructor();
      if (Class) _setPrototypeOf(instance, Class.prototype);
      return instance;
    };
  }

  return _construct.apply(null, arguments);
}

function _isNativeFunction(fn) {
  return Function.toString.call(fn).indexOf("[native code]") !== -1;
}

function _wrapNativeSuper(Class) {
  var _cache = typeof Map === "function" ? new Map() : undefined;

  _wrapNativeSuper = function _wrapNativeSuper(Class) {
    if (Class === null || !_isNativeFunction(Class)) return Class;

    if (typeof Class !== "function") {
      throw new TypeError("Super expression must either be null or a function");
    }

    if (typeof _cache !== "undefined") {
      if (_cache.has(Class)) return _cache.get(Class);

      _cache.set(Class, Wrapper);
    }

    function Wrapper() {
      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
    }

    Wrapper.prototype = Object.create(Class.prototype, {
      constructor: {
        value: Wrapper,
        enumerable: false,
        writable: true,
        configurable: true
      }
    });
    return _setPrototypeOf(Wrapper, Class);
  };

  return _wrapNativeSuper(Class);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _iterableToArrayLimit(arr, i) {
  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
    return;
  }

  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

function classNames() {
  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
    classes[_key] = arguments[_key];
  }

  return classes.filter(Boolean).join(' ');
}
function variationName(name, value) {
  return "".concat(name).concat(value.charAt(0).toUpperCase()).concat(value.slice(1));
}

var FeaturesContext = React__default.createContext(undefined);

function useFeatures() {
  var features = React.useContext(FeaturesContext);

  if (!features) {
    throw new Error('No Features were provided.');
  }

  return features;
}

var I18nContext = React__default.createContext(undefined);

var MissingAppProviderError =
/*#__PURE__*/
function (_Error) {
  _inherits(MissingAppProviderError, _Error);

  function MissingAppProviderError() {
    var _this;

    var message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';

    _classCallCheck(this, MissingAppProviderError);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(MissingAppProviderError).call(this, "".concat(message ? "".concat(message, " ") : message, "Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.")));
    _this.name = 'MissingAppProviderError';
    return _this;
  }

  return MissingAppProviderError;
}(_wrapNativeSuper(Error));

function useI18n() {
  var i18n = React.useContext(I18nContext);

  if (!i18n) {
    throw new MissingAppProviderError('No i18n was provided.');
  }

  return i18n;
}

var OBJECT_NOTATION_MATCHER = /\[(.*?)\]|(\w+)/g;
function get(obj, keypath, defaultValue) {
  if (obj == null) return undefined;
  var keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
  var acc = obj; // eslint-disable-next-line @typescript-eslint/prefer-for-of

  for (var i = 0; i < keys.length; i++) {
    var val = acc[keys[i]];
    if (val === undefined) return defaultValue;
    acc = val;
  }

  return acc;
}

function getKeypath(str) {
  var path = [];
  var result;

  while (result = OBJECT_NOTATION_MATCHER.exec(str)) {
    var _result = result,
        _result2 = _slicedToArray(_result, 3),
        first = _result2[1],
        second = _result2[2];

    path.push(first || second);
  }

  return path;
}

function merge() {
  var final = {};

  for (var _len = arguments.length, objs = new Array(_len), _key = 0; _key < _len; _key++) {
    objs[_key] = arguments[_key];
  }

  for (var _i = 0, _objs = objs; _i < _objs.length; _i++) {
    var obj = _objs[_i];
    final = mergeRecursively(final, obj);
  }

  return final;
}

function mergeRecursively(inputObjA, objB) {
  var objA = Array.isArray(inputObjA) ? _toConsumableArray(inputObjA) : Object.assign({}, inputObjA);

  for (var key in objB) {
    if (!Object.prototype.hasOwnProperty.call(objB, key)) {
      continue;
    } else if (isMergeableValue(objB[key]) && isMergeableValue(objA[key])) {
      objA[key] = mergeRecursively(objA[key], objB[key]);
    } else {
      objA[key] = objB[key];
    }
  }

  return objA;
}

function isMergeableValue(value) {
  return value !== null && typeof value === 'object';
}

var REPLACE_REGEX = /{([^}]*)}/g;
var I18n =
/*#__PURE__*/
function () {
  /**
   * @param translation A locale object or array of locale objects that overrides default translations. If specifying an array then your fallback language dictionaries should come first, followed by your primary language dictionary
   */
  function I18n(translation) {
    _classCallCheck(this, I18n);

    this.translation = {};
    this.translation = Array.isArray(translation) ? merge.apply(void 0, _toConsumableArray(translation)) : translation;
  }

  _createClass(I18n, [{
    key: "translate",
    value: function translate(id, replacements) {
      var text = get(this.translation, id, '');

      if (!text) {
        return '';
      }

      if (replacements) {
        return text.replace(REPLACE_REGEX, function (match) {
          var replacement = match.substring(1, match.length - 1);

          if (replacements[replacement] === undefined) {
            var replacementData = JSON.stringify(replacements);
            throw new Error("Error in translation for key '".concat(id, "'. No replacement found for key '").concat(replacement, "'. The following replacements were passed: '").concat(replacementData, "'"));
          } // This could be a string or a number, but JS doesn't mind which it gets
          // and can handle that cast internally. So let it, to save us calling
          // toString() on what's already a string in 90% of cases.


          return replacements[replacement];
        });
      }

      return text;
    }
  }, {
    key: "translationKeyExists",
    value: function translationKeyExists(path) {
      return Boolean(get(this.translation, path));
    }
  }]);

  return I18n;
}();

var isServer = typeof window === 'undefined' || typeof document === 'undefined';

function Image(_a) {
  var sourceSet = _a.sourceSet,
      source = _a.source,
      crossOrigin = _a.crossOrigin,
      rest = tslib.__rest(_a, ["sourceSet", "source", "crossOrigin"]);

  var finalSourceSet = sourceSet ? sourceSet.map(function (_ref) {
    var subSource = _ref.source,
        descriptor = _ref.descriptor;
    return "".concat(subSource, " ").concat(descriptor);
  }).join(',') : null;
  return finalSourceSet ? // eslint-disable-next-line jsx-a11y/alt-text
  React__default.createElement("img", Object.assign({
    src: source,
    srcSet: finalSourceSet,
    crossOrigin: crossOrigin
  }, rest)) : // eslint-disable-next-line jsx-a11y/alt-text
  React__default.createElement("img", Object.assign({
    src: source
  }, rest, {
    crossOrigin: crossOrigin
  }));
}

var styles = {
  "Avatar": "Polaris-Avatar",
  "hidden": "Polaris-Avatar--hidden",
  "sizeSmall": "Polaris-Avatar--sizeSmall",
  "sizeMedium": "Polaris-Avatar--sizeMedium",
  "sizeLarge": "Polaris-Avatar--sizeLarge",
  "styleOne": "Polaris-Avatar--styleOne",
  "styleTwo": "Polaris-Avatar--styleTwo",
  "styleThree": "Polaris-Avatar--styleThree",
  "styleFour": "Polaris-Avatar--styleFour",
  "styleFive": "Polaris-Avatar--styleFive",
  "styleSix": "Polaris-Avatar--styleSix",
  "hasImage": "Polaris-Avatar--hasImage",
  "Image": "Polaris-Avatar__Image",
  "Initials": "Polaris-Avatar__Initials",
  "Svg": "Polaris-Avatar__Svg"
};

var avatar1 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjMjQ1YjQ4IiBkPSJNMCAwaDEwMHYxMDBIMHoiLz48cGF0aCBmaWxsPSIjMmRiMTY3IiBkPSJNNjkgMHY2NS42NWwtMi0uMDF2MTkuODVsMiAuMDJWMTAwSDBWMGg2OXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNjcgNjUuNjR2MTkuODVsLTI1LjU3LS4xOUMzMiA4NS4yMiAyNS42IDgxLjQ2IDI1LjY4IDcyLjA2cy4yNS02Ljc0LjI1LTYuNzR6Ii8+PHBhdGggZmlsbD0iIzhkYzk1OCIgZD0iTTg2Ljk5IDU4SDY5VjBoMTAuOTNsNy4wNiA1OHoiLz48cGF0aCBmaWxsPSIjZWJlZGYxIiBkPSJNMjQuNTMgNDAuMjlhMTIuMjMgMTIuMjMgMCAwMTI0LjQ2IDAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZmlsbD0iIzhkYzk1OCIgZD0iTTU5LjYyIDU4QTEwLjY5IDEwLjY5IDAgMDE4MSA1OHoiLz48L3N2Zz4K';

var avatar2 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjMWUyNjVjIiBkPSJNLS4wMSAwaDEwMHYxMDBoLTEwMHoiLz48cGF0aCBmaWxsPSIjNWQ2Y2MxIiBkPSJNLS4wMSAwaDY5LjAydjEwMEgtLjAxeiIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik02OC45MyA2NS44OGwtMjQuNDQtLjE5LS4wNSA2LjA5YzAgNS4yMiAzLjQ4IDkuNDcgOC42OSA5LjUybDE1LjguMTJ6Ii8+PHBhdGggZmlsbD0iI2ZmYzA0ZCIgZD0iTTY4LjkxIDExLjNsMTkuMTcgNDYuMjktMTkuMTctLjE2VjExLjN6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0yMy4yNSAzNi40M2EzLjIyIDMuMjIgMCAxMDAgNi40NG0yMS4wMS02LjQ0YTMuMjIgMy4yMiAwIDAwMCA2LjQ0bS0xMy41NSAzLjc0YTMuMjIgMy4yMiAwIDEwMCA2LjQ0bTMuMjItMjUuNTFhMy4yMiAzLjIyIDAgMDAwIDYuNDQiLz48L3N2Zz4K';

var avatar3 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjNWQ2Y2MxIiBkPSJNLS4wMiAwaDEwMHYxMDBoLTEwMHoiLz48cGF0aCBmaWxsPSIjNmRjYWNlIiBkPSJNLjM5IDBoNjkuMDJ2MTAwSC4zOXoiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjUiIGQ9Ik0yNC4xOCAzMS4yMXYzLjQ3QTEwLjQzIDEwLjQzIDAgMDAzNC40IDQ1LjIxYTEwLjQzIDEwLjQzIDAgMDAxMC4yMi0xMC41M3YtMy40NyIvPjxwYXRoIGZpbGw9IiNlYmVkZjEiIGQ9Ik0yMC4xMSA0OS4wN2ExNi4yMiAxNi4yMiAwIDExMCAzMi40NCIgb3BhY2l0eT0iLjIiLz48cGF0aCBkPSJNNjkuNDQgMTguODNMOTAgNzFINjkuNDRWMTguODN6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTU3LjU5IDcxYTYgNiAwIDAxMTIgMHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4K';

var avatar4 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZmZlMGMzIiBkPSJNMC0uMDFoMTAwdjEwMEgweiIvPjxwYXRoIGZpbGw9IiM1ZDZjYzEiIGQ9Ik0wIDBoNjkuMDJ2MTAwSDB6Ii8+PHBhdGggZD0iTTY5LjAyIDBsMjQuMDMgNjEuNjlINjkuMDJWMHoiIGZpbGw9IiNmZjk2N2QiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjUiIGQ9Ik0zMC42OSAzMS45MXYtM2MwLTQuNzggMy40Ni04LjY1IDgtOC42NXM4IDMuODcgOCA4LjY1djMiLz48cGF0aCBmaWxsPSIjZWJlZGYxIiBkPSJNMTIuNzYgNTYuMDZhMTMuMzYgMTMuMzYgMCAxMTI2LjcyIDAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTgwIDYxLjQ2bC0yOS4zNC4yM3YtNy4zM2MwLTYuMjggNC4wNy0xMS4zNiAxMC4zNC0xMS40NGwxOS0uMTR6IiBmaWxsPSIjZmY5NjdkIi8+PC9zdmc+Cg==';

var avatar5 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjOGRjOTU4IiBkPSJNMCAwaDcwLjAydjEwMEgweiIvPjxwYXRoIGQ9Ik02OS45MiAwdjU2LjMyTDQ5IDY3bC0uMyAyNS4wN1YxMDBIMTAwVjB6IiBmaWxsPSIjMmRiMTY3Ii8+PHBhdGggZmlsbD0iIzI0NWI0OCIgZD0iTTU5LjI3IDU4LjI5YTUuMjIgNS4yMiAwIDAwLTkuNDMgNC40OCIvPjxwYXRoIGQ9Ik0yNy4xMiA5LjMzaDQ0LjUzdjIuMTlIMjcuMTJ6bS0xMi40MSA5LjQ5aDU2Ljk0djIuMTlIMTQuNzF6IiBmaWxsPSIjMmRiMTY3Ii8+PGNpcmNsZSBjeD0iMTkuNjYiIGN5PSI0NC44IiByPSIxMS4yMiIgZmlsbD0iI2ViZWRmMSIgb3BhY2l0eT0iLjIiLz48L3N2Zz4K';

var avatar6 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNLS4wMi0uMDFoMTAwdjEwMGgtMTAweiIgZmlsbD0iI2ZmZTBjMyIvPjxwYXRoIGZpbGw9IiNmZjk2N2QiIGQ9Ik0wIDBoNjkuNDF2MTAwSDB6Ii8+PHBhdGggZD0iTTY5LjkyIDB2NDQuMzJMNTEuMzQgNTV2NDVIMTAwVjB6IiBmaWxsPSIjZmZlMGMzIi8+PHBhdGggZmlsbD0iIzMyY2FjNiIgZD0iTTM5LjMyIDc2YTExLjg1IDExLjg1IDAgMDAxMiAxMS42MlY3NiIvPjxwYXRoIGZpbGw9IiMwMDk3OTYiIGQ9Ik0zOS4zMiA3NmExMiAxMiAwIDAxMTItMTEuODJWNzYiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjUiIGQ9Ik00My43NCAxOS44M2ExMi44MiAxMi44MiAwIDExLTI1LjY0IDAiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjQiIGQ9Ik0yNy4zOSAzMS42bC0xLjU4IDUuOTZtOS4zNy01LjcybDIuNTUgNS40N200LjI2LTkuODVsMy41MyA0LjVtLTI1LjQzLTQuNWwtMy41MyA0LjUiLz48L3N2Zz4K';

var avatar7 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMCAwaDEwMHYxMDAuNDhIMHoiIGZpbGw9IiM4ZGM5NTgiLz48cGF0aCBmaWxsPSIjMmRiMTY3IiBkPSJNODMgNjh2MzJsLTE0LS4xNnYuMTZIMFYwaDY5djY4aDE0eiIvPjxwYXRoIGQ9Ik02OS4yOSA0MS42OUgyMC42NnMtLjA5LTMtLjE3IDcuMTUgNyAxOC41MSAxNy4zNSAxOC41OWwzMS40NS41N3oiIGZpbGw9IiM4ZGM5NTgiLz48cGF0aCBkPSJNNjguNyAxMi40bDExLjU0IDI5LjI5SDY4LjdWMTIuNHoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNNjIuMjIgNDEuNjlhMy4zNCAzLjM0IDAgMTE2LjY5IDB6IiBmaWxsPSIjZmZmIi8+PHBhdGggZmlsbD0iIzI0NWI0OCIgZD0iTTQxLjQ1IDE4LjA2YTIuNTcgMi41NyAwIDAwLTUuMTQgME0zMy4zMyAyNGEyLjU3IDIuNTcgMCAxMC01LjE0IDBtMjAuMzYgMi41OGEyLjU3IDIuNTcgMCAxMC01LjE0IDAiLz48L3N2Zz4K';

var avatar8 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZmZlZGI5IiBkPSJNMCAwaDEwMHYxMDBIMHoiLz48cGF0aCBkPSJNNjQuNjMgMTcuMzNhMTcgMTcgMCAwMTUgMjkuNzIgMTYuNzUgMTYuNzUgMCAwMS01IDIuNjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjUiLz48cGF0aCBmaWxsPSIjZmZjMDRkIiBkPSJNMCAwaDY5LjAydjEwMEgweiIvPjxjaXJjbGUgY3g9IjQ1LjExIiBjeT0iMzMuNDkiIHI9IjE2Ljk4IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtMzcuMDIgNDUuMTI0IDMzLjQ5MykiLz48cGF0aCBmaWxsPSIjNWQ2Y2MxIiBkPSJNNjkuMDIgMzQuNDhsMTkuNDcgMzguNzQtMTkuNDcgMS41M1YzNC40OHoiLz48cGF0aCBkPSJNNjEuNiAzMy42N2ExMC4xNyAxMC4xNyAwIDAxMTUuNC4wOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iNSIvPjwvc3ZnPgo=';

var avatar9 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMCAwaDEwMHYxMDBIMHoiIGZpbGw9IiNmZmMwNGQiLz48cGF0aCBkPSJNMCAwaDY5LjQxdjEwMEgweiIgZmlsbD0iIzVkNmNjMSIvPjxwYXRoIGQ9Ik03MC4yMSA4MC44OGgtMTUuMWMtNC44MSAwLTUuNjgtNS44NC01LjY4LTUuODRoMjAuNzgiIGZpbGw9IiNmZmMwNGQiLz48cGF0aCBkPSJNODIgNjAuNDhsLTE0IC4yNVYwaDEwLjE3QzgwLjU5IDIwLjE0IDgyIDYwLjQ4IDgyIDYwLjQ4eiIgZmlsbD0iIzVkNmNjMSIvPjxwYXRoIGZpbGw9IiM0MTIzNmUiIGQ9Ik01Ny43MSA2MC40OGE1LjQ0IDUuNDQgMCAxMTEwLjg3IDAiLz48Y2lyY2xlIGN4PSIyNC43NyIgY3k9IjQwLjE5IiByPSIxMS4yMiIgZmlsbD0iI2ViZWRmMSIgb3BhY2l0eT0iLjIiLz48L3N2Zz4K';



var avatars = /*#__PURE__*/Object.freeze({
  __proto__: null,
  avatarOne: avatar1,
  avatarTwo: avatar2,
  avatarThree: avatar3,
  avatarFour: avatar4,
  avatarFive: avatar5,
  avatarSix: avatar6,
  avatarSeven: avatar7,
  avatarEight: avatar8,
  avatarNine: avatar9
});

var Status;

(function (Status) {
  Status["Pending"] = "PENDING";
  Status["Loaded"] = "LOADED";
  Status["Errored"] = "ERRORED";
})(Status || (Status = {}));

var STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'];
var AVATAR_IMAGES = Object.keys(avatars).map( // import/namespace does not allow computed values by default
// eslint-disable-next-line import/namespace
function (key) {
  return avatars[key];
});
function Avatar(_ref) {
  var name = _ref.name,
      source = _ref.source,
      initials = _ref.initials,
      customer = _ref.customer,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      accessibilityLabel = _ref.accessibilityLabel;
  var i18n = useI18n();

  var _useFeatures = useFeatures(),
      _useFeatures$unstable = _useFeatures.unstableGlobalTheming,
      unstableGlobalTheming = _useFeatures$unstable === void 0 ? false : _useFeatures$unstable;

  function styleClass(name) {
    var finalStyleClasses = unstableGlobalTheming ? STYLE_CLASSES : [].concat(STYLE_CLASSES, ['six']);
    return name ? finalStyleClasses[name.charCodeAt(0) % finalStyleClasses.length] : finalStyleClasses[0];
  }

  var _useState = React.useState(Status.Pending),
      _useState2 = _slicedToArray(_useState, 2),
      status = _useState2[0],
      setStatus = _useState2[1]; // If the source changes, set the status back to pending


  React.useEffect(function () {
    setStatus(Status.Pending);
  }, [source]);
  var handleError = React.useCallback(function () {
    setStatus(Status.Errored);
  }, []);
  var handleLoad = React.useCallback(function () {
    setStatus(Status.Loaded);
  }, []);
  var hasImage = (source || customer) && status !== Status.Errored;
  var nameString = name || initials;
  var finalSource;
  var label;

  if (accessibilityLabel) {
    label = accessibilityLabel;
  } else if (name) {
    label = name;
  } else if (initials) {
    var splitInitials = initials.split('').join(' ');
    label = i18n.translate('Polaris.Avatar.labelWithInitials', {
      initials: splitInitials
    });
  } else {
    label = i18n.translate('Polaris.Avatar.label');
  }

  if (source) {
    finalSource = source;
  } else if (customer) {
    finalSource = customerPlaceholder(nameString);
  }

  var className = classNames(styles.Avatar, styles[variationName('style', styleClass(nameString))], size && styles[variationName('size', size)], hasImage && status !== Status.Loaded && styles.hidden, hasImage && styles.hasImage);
  var imageMarkUp = finalSource && !isServer && status !== Status.Errored ? React__default.createElement(Image, {
    className: styles.Image,
    source: finalSource,
    alt: "",
    role: "presentation",
    onLoad: handleLoad,
    onError: handleError
  }) : null; // Use `dominant-baseline: central` instead of `dy` when Edge supports it.

  var verticalOffset = '0.35em';
  var initialsMarkup = initials && !hasImage ? React__default.createElement("span", {
    className: styles.Initials
  }, React__default.createElement("svg", {
    className: styles.Svg,
    viewBox: "0 0 48 48"
  }, React__default.createElement("text", {
    x: "50%",
    y: "50%",
    dy: verticalOffset,
    fill: "currentColor",
    fontSize: "26",
    textAnchor: "middle"
  }, initials))) : null;
  return React__default.createElement("span", {
    "aria-label": label,
    role: "img",
    className: className
  }, initialsMarkup, imageMarkUp);
}

function customerPlaceholder(name) {
  return name ? AVATAR_IMAGES[name.charCodeAt(0) % AVATAR_IMAGES.length] : AVATAR_IMAGES[0];
}

function isElementInViewport(element) {
  var _element$getBoundingC = element.getBoundingClientRect(),
      top = _element$getBoundingC.top,
      left = _element$getBoundingC.left,
      bottom = _element$getBoundingC.bottom,
      right = _element$getBoundingC.right;

  return top >= 0 && right <= window.innerWidth && bottom <= window.innerHeight && left >= 0;
}

var KEYBOARD_FOCUSABLE_SELECTORS = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]:not([tabindex="-1"])';
function handleMouseUpByBlurring(_ref) {
  var currentTarget = _ref.currentTarget;
  currentTarget.blur();
}
function nextFocusableNode(node, filter) {
  var allFocusableElements = _toConsumableArray(document.querySelectorAll(focus.FOCUSABLE_SELECTOR));

  var sliceLocation = allFocusableElements.indexOf(node) + 1;
  var focusableElementsAfterNode = allFocusableElements.slice(sliceLocation);
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = focusableElementsAfterNode[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var focusableElement = _step.value;

      if (isElementInViewport(focusableElement) && (!filter || filter && filter(focusableElement))) {
        return focusableElement;
      }
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return != null) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  return null;
}
function focusNextFocusableNode(node, filter) {
  var nextFocusable = nextFocusableNode(node, filter);

  if (nextFocusable && nextFocusable instanceof HTMLElement) {
    nextFocusable.focus();
    return true;
  }

  return false;
} // https://github.com/Shopify/javascript-utilities/blob/1e705564643d6fe7ffea5ebfbbf3e6b759a66c9b/src/focus.ts

function findFirstKeyboardFocusableNode(element) {
  var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

  if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {
    return element;
  }

  return element.querySelector(KEYBOARD_FOCUSABLE_SELECTORS);
}
function focusFirstKeyboardFocusableNode(element) {
  var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  var firstFocusable = findFirstKeyboardFocusableNode(element, onlyDescendants);

  if (firstFocusable) {
    firstFocusable.focus();
    return true;
  }

  return false;
}
function findLastKeyboardFocusableNode(element) {
  var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

  if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {
    return element;
  }

  var allFocusable = element.querySelectorAll(KEYBOARD_FOCUSABLE_SELECTORS);
  return allFocusable[allFocusable.length - 1];
}
function focusLastKeyboardFocusableNode(element) {
  var onlyDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
  var lastFocusable = findLastKeyboardFocusableNode(element, onlyDescendants);

  if (lastFocusable) {
    lastFocusable.focus();
    return true;
  }

  return false;
}

function matches(node, selector) {
  if (node.matches) {
    return node.matches(selector);
  }

  var matches = (node.ownerDocument || document).querySelectorAll(selector);
  var i = matches.length;

  while (--i >= 0 && matches.item(i) !== node) {
    return i > -1;
  }
}

var scrollable = {
  props: {
    'data-polaris-scrollable': true
  },
  selector: '[data-polaris-scrollable]'
};
var overlay = {
  props: {
    'data-polaris-overlay': true
  },
  selector: '[data-polaris-overlay]'
};
var layer = {
  props: {
    'data-polaris-layer': true
  },
  selector: '[data-polaris-layer]'
};
var unstyled = {
  props: {
    'data-polaris-unstyled': true
  },
  selector: '[data-polaris-unstyled]'
};
var dataPolarisTopBar = {
  props: {
    'data-polaris-top-bar': true
  },
  selector: '[data-polaris-top-bar]'
};
var headerCell = {
  props: {
    'data-polaris-header-cell': true
  },
  selector: '[data-polaris-header-cell]'
};
var portal = {
  props: ['data-portal-id'],
  selector: '[data-portal-id]'
};
var DATA_ATTRIBUTE = {
  overlay,
  layer
}; // these match our values in duration.scss

var Duration;

(function (Duration) {
  Duration[Duration["Instant"] = 0] = "Instant";
  Duration[Duration["Fast"] = 100] = "Fast";
  Duration[Duration["Base"] = 200] = "Base";
  Duration[Duration["Slow"] = 300] = "Slow";
  Duration[Duration["Slower"] = 400] = "Slower";
  Duration[Duration["Slowest"] = 500] = "Slowest";
})(Duration || (Duration = {}));

var LinkContext = React__default.createContext(undefined);

function useLink() {
  return React__default.useContext(LinkContext);
}

// https://github.com/facebook/react/issues/16722
// but eslint-plugin-react doesn't know that just yet
// eslint-disable-next-line react/display-name

var UnstyledLink = React__default.memo(React__default.forwardRef(function UnstyledLink(props, _ref) {
  var LinkComponent = useLink();

  if (LinkComponent) {
    return React__default.createElement(LinkComponent, Object.assign({}, unstyled.props, props));
  }

  var external = props.external,
      url = props.url,
      rest = tslib.__rest(props, ["external", "url"]);

  var target = external ? '_blank' : undefined;
  var rel = external ? 'noopener noreferrer' : undefined;
  return React__default.createElement("a", Object.assign({
    target: target
  }, rest, {
    href: url,
    rel: rel
  }, unstyled.props));
}));

var styles$1 = {
  "Icon": "Polaris-Icon",
  "hasBackdrop": "Polaris-Icon--hasBackdrop",
  "isColored": "Polaris-Icon--isColored",
  "colorWhite": "Polaris-Icon--colorWhite",
  "colorBlack": "Polaris-Icon--colorBlack",
  "colorSkyLighter": "Polaris-Icon--colorSkyLighter",
  "colorSkyLight": "Polaris-Icon--colorSkyLight",
  "colorSky": "Polaris-Icon--colorSky",
  "colorSkyDark": "Polaris-Icon--colorSkyDark",
  "colorInkLightest": "Polaris-Icon--colorInkLightest",
  "colorInkLighter": "Polaris-Icon--colorInkLighter",
  "colorInkLight": "Polaris-Icon--colorInkLight",
  "colorInk": "Polaris-Icon--colorInk",
  "colorBlueLighter": "Polaris-Icon--colorBlueLighter",
  "colorBlueLight": "Polaris-Icon--colorBlueLight",
  "colorBlue": "Polaris-Icon--colorBlue",
  "colorBlueDark": "Polaris-Icon--colorBlueDark",
  "colorBlueDarker": "Polaris-Icon--colorBlueDarker",
  "colorIndigoLighter": "Polaris-Icon--colorIndigoLighter",
  "colorIndigoLight": "Polaris-Icon--colorIndigoLight",
  "colorIndigo": "Polaris-Icon--colorIndigo",
  "colorIndigoDark": "Polaris-Icon--colorIndigoDark",
  "colorIndigoDarker": "Polaris-Icon--colorIndigoDarker",
  "colorTealLighter": "Polaris-Icon--colorTealLighter",
  "colorTealLight": "Polaris-Icon--colorTealLight",
  "colorTeal": "Polaris-Icon--colorTeal",
  "colorTealDark": "Polaris-Icon--colorTealDark",
  "colorTealDarker": "Polaris-Icon--colorTealDarker",
  "colorGreenLighter": "Polaris-Icon--colorGreenLighter",
  "colorGreen": "Polaris-Icon--colorGreen",
  "colorGreenDark": "Polaris-Icon--colorGreenDark",
  "colorYellowLighter": "Polaris-Icon--colorYellowLighter",
  "colorYellow": "Polaris-Icon--colorYellow",
  "colorYellowDark": "Polaris-Icon--colorYellowDark",
  "colorOrange": "Polaris-Icon--colorOrange",
  "colorOrangeDark": "Polaris-Icon--colorOrangeDark",
  "colorRedLighter": "Polaris-Icon--colorRedLighter",
  "colorRed": "Polaris-Icon--colorRed",
  "colorRedDark": "Polaris-Icon--colorRedDark",
  "colorPurple": "Polaris-Icon--colorPurple",
  "Svg": "Polaris-Icon__Svg",
  "Img": "Polaris-Icon__Img",
  "Placeholder": "Polaris-Icon__Placeholder"
};

var COLORS_WITH_BACKDROPS = ['teal', 'tealDark', 'greenDark', 'redDark', 'yellowDark', 'ink', 'inkLighter'];
function Icon(_ref) {
  var source = _ref.source,
      color = _ref.color,
      backdrop = _ref.backdrop,
      accessibilityLabel = _ref.accessibilityLabel;
  var i18n = useI18n();

  if (color && backdrop && !COLORS_WITH_BACKDROPS.includes(color)) {
    // eslint-disable-next-line no-console
    console.warn(i18n.translate('Polaris.Icon.backdropWarning', {
      color,
      colorsWithBackDrops: COLORS_WITH_BACKDROPS.join(', ')
    }));
  }

  var className = classNames(styles$1.Icon, color && styles$1[variationName('color', color)], color && color !== 'white' && styles$1.isColored, backdrop && styles$1.hasBackdrop);
  var contentMarkup;

  if (typeof source === 'function') {
    var SourceComponent = source;
    contentMarkup = React__default.createElement(SourceComponent, {
      className: styles$1.Svg,
      focusable: "false",
      "aria-hidden": "true"
    });
  } else if (source === 'placeholder') {
    contentMarkup = React__default.createElement("div", {
      className: styles$1.Placeholder
    });
  } else {
    contentMarkup = React__default.createElement("img", {
      className: styles$1.Img,
      src: "data:image/svg+xml;utf8,".concat(source),
      alt: "",
      "aria-hidden": "true"
    });
  }

  return React__default.createElement("span", {
    className: className,
    "aria-label": accessibilityLabel
  }, contentMarkup);
}

var styles$2 = {
  "VisuallyHidden": "Polaris-VisuallyHidden"
};

function VisuallyHidden(_ref) {
  var children = _ref.children;
  return React__default.createElement("span", {
    className: styles$2.VisuallyHidden
  }, children);
}

/**
 * useIsAfterInitialMount will trigger a re-render to provide
 * you with an updated value. Using this you enhance server-side
 * code that can only run on the client.
 * @returns MutableRefObject<T> - Returns a ref object with the
 * results from invoking initial value
 * @example
 * function ComponentExample({children}) {
 *  const isMounted = useIsAfterInitialMount();
 *  const content = isMounted ? children : null;
 *
 *  return <React.Fragment>{content}</React.Fragment>;
 * }
 */

function useIsAfterInitialMount() {
  var _useState = React.useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isAfterInitialMount = _useState2[0],
      setIsAfterInitialMount = _useState2[1];

  React.useEffect(function () {
    setIsAfterInitialMount(true);
  }, []);
  return isAfterInitialMount;
}

var styles$3 = {
  "Spinner": "Polaris-Spinner",
  "loading": "Polaris-Spinner--loading",
  "sizeSmall": "Polaris-Spinner--sizeSmall",
  "sizeLarge": "Polaris-Spinner--sizeLarge",
  "colorWhite": "Polaris-Spinner--colorWhite",
  "colorTeal": "Polaris-Spinner--colorTeal",
  "colorInkLightest": "Polaris-Spinner--colorInkLightest"
};

var spinnerLarge = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1LjU0MiAxLjQ4N0EyMS41MDcgMjEuNTA3IDAgMDAuNSAyMmMwIDExLjg3NCA5LjYyNiAyMS41IDIxLjUgMjEuNSA5Ljg0NyAwIDE4LjM2NC02LjY3NSAyMC44MDktMTYuMDcyYTEuNSAxLjUgMCAwMC0yLjkwNC0uNzU2QzM3LjgwMyAzNC43NTUgMzAuNDczIDQwLjUgMjIgNDAuNSAxMS43ODMgNDAuNSAzLjUgMzIuMjE3IDMuNSAyMmMwLTguMTM3IDUuMy0xNS4yNDcgMTIuOTQyLTE3LjY1YTEuNSAxLjUgMCAxMC0uOS0yLjg2M3oiIGZpbGw9IiM5MTlFQUIiLz48L3N2Zz4K';

var spinnerSmall = 'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMjI5IDEuMTczYTkuMjUgOS4yNSAwIDEwMTEuNjU1IDExLjQxMiAxLjI1IDEuMjUgMCAxMC0yLjQtLjY5OCA2Ljc1IDYuNzUgMCAxMS04LjUwNi04LjMyOSAxLjI1IDEuMjUgMCAxMC0uNzUtMi4zODV6IiBmaWxsPSIjOTE5RUFCIi8+PC9zdmc+Cg==';

var COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest'];
function Spinner(_ref) {
  var _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'large' : _ref$size,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? 'teal' : _ref$color,
      accessibilityLabel = _ref.accessibilityLabel,
      hasFocusableParent = _ref.hasFocusableParent;
  var i18n = useI18n();
  var isAfterInitialMount = useIsAfterInitialMount();

  if (size === 'large' && !COLORS_FOR_LARGE_SPINNER.includes(color)) {
    if (process.env.NODE_ENV === 'development') {
      // eslint-disable-next-line no-console
      console.warn(i18n.translate('Polaris.Spinner.warningMessage', {
        color,
        size,
        colors: COLORS_FOR_LARGE_SPINNER.join(', ')
      }));
    } // eslint-disable-next-line no-param-reassign


    size = 'small';
  }

  var className = classNames(styles$3.Spinner, color && styles$3[variationName('color', color)], size && styles$3[variationName('size', size)]);
  var spinnerSVG = size === 'large' ? spinnerLarge : spinnerSmall;
  var spanAttributes = Object.assign({}, !hasFocusableParent && {
    role: 'status'
  });
  var accessibilityLabelMarkup = (isAfterInitialMount || !hasFocusableParent) && React__default.createElement(VisuallyHidden, null, accessibilityLabel);
  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Image, {
    alt: "",
    source: spinnerSVG,
    className: className,
    draggable: false
  }), React__default.createElement("span", spanAttributes, accessibilityLabelMarkup));
}

var styles$4 = {
  "Button": "Polaris-Button",
  "globalTheming": "Polaris-Button--globalTheming",
  "disabled": "Polaris-Button--disabled",
  "Content": "Polaris-Button__Content",
  "textAlignLeft": "Polaris-Button--textAlignLeft",
  "textAlignCenter": "Polaris-Button--textAlignCenter",
  "textAlignRight": "Polaris-Button--textAlignRight",
  "Icon": "Polaris-Button__Icon",
  "Spinner": "Polaris-Button__Spinner",
  "primary": "Polaris-Button--primary",
  "pressed": "Polaris-Button--pressed",
  "destructive": "Polaris-Button--destructive",
  "outline": "Polaris-Button--outline",
  "loading": "Polaris-Button--loading",
  "plain": "Polaris-Button--plain",
  "iconOnly": "Polaris-Button--iconOnly",
  "fullWidth": "Polaris-Button--fullWidth",
  "sizeSlim": "Polaris-Button--sizeSlim",
  "sizeLarge": "Polaris-Button--sizeLarge",
  "monochrome": "Polaris-Button--monochrome",
  "Text": "Polaris-Button__Text",
  "DisclosureIcon": "Polaris-Button__DisclosureIcon",
  "DisclosureIconFacingUp": "Polaris-Button__DisclosureIconFacingUp"
};

var DEFAULT_SIZE = 'medium';
function Button(_ref) {
  var id = _ref.id,
      url = _ref.url,
      disabled = _ref.disabled,
      loading = _ref.loading,
      children = _ref.children,
      accessibilityLabel = _ref.accessibilityLabel,
      ariaControls = _ref.ariaControls,
      ariaExpanded = _ref.ariaExpanded,
      ariaPressed = _ref.ariaPressed,
      onClick = _ref.onClick,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      onKeyDown = _ref.onKeyDown,
      onKeyPress = _ref.onKeyPress,
      onKeyUp = _ref.onKeyUp,
      onMouseEnter = _ref.onMouseEnter,
      onTouchStart = _ref.onTouchStart,
      external = _ref.external,
      download = _ref.download,
      icon = _ref.icon,
      primary = _ref.primary,
      outline = _ref.outline,
      destructive = _ref.destructive,
      disclosure = _ref.disclosure,
      plain = _ref.plain,
      monochrome = _ref.monochrome,
      submit = _ref.submit,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? DEFAULT_SIZE : _ref$size,
      textAlign = _ref.textAlign,
      fullWidth = _ref.fullWidth,
      pressed = _ref.pressed;

  var _useFeatures = useFeatures(),
      _useFeatures$unstable = _useFeatures.unstableGlobalTheming,
      unstableGlobalTheming = _useFeatures$unstable === void 0 ? false : _useFeatures$unstable;

  var hasGivenDeprecationWarning = React.useRef(false);

  if (ariaPressed && !hasGivenDeprecationWarning.current) {
    // eslint-disable-next-line no-console
    console.warn('Deprecation: The ariaPressed prop has been replaced with pressed');
    hasGivenDeprecationWarning.current = true;
  }

  var i18n = useI18n();
  var isDisabled = disabled || loading;
  var className = classNames(styles$4.Button, unstableGlobalTheming && styles$4.globalTheming, primary && styles$4.primary, outline && styles$4.outline, destructive && styles$4.destructive, isDisabled && styles$4.disabled, loading && styles$4.loading, plain && styles$4.plain, pressed && !disabled && !url && styles$4.pressed, monochrome && styles$4.monochrome, size && size !== DEFAULT_SIZE && styles$4[variationName('size', size)], textAlign && styles$4[variationName('textAlign', textAlign)], fullWidth && styles$4.fullWidth, icon && children == null && styles$4.iconOnly);
  var disclosureIcon = React__default.createElement(Icon, {
    source: loading ? 'placeholder' : polarisIcons.CaretDownMinor
  });
  var disclosureIconMarkup = disclosure ? React__default.createElement(IconWrapper, null, React__default.createElement("div", {
    className: classNames(styles$4.DisclosureIcon, disclosure === 'up' && styles$4.DisclosureIconFacingUp)
  }, disclosureIcon)) : null;
  var iconMarkup;

  if (icon) {
    var iconInner = isIconSource(icon) ? React__default.createElement(Icon, {
      source: loading ? 'placeholder' : icon
    }) : icon;
    iconMarkup = React__default.createElement(IconWrapper, null, iconInner);
  }

  var childMarkup = children ? React__default.createElement("span", {
    className: styles$4.Text
  }, children) : null;
  var spinnerColor = primary || destructive ? 'white' : 'inkLightest';
  var spinnerSVGMarkup = loading ? React__default.createElement("span", {
    className: styles$4.Spinner
  }, React__default.createElement(Spinner, {
    size: "small",
    color: spinnerColor,
    accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel')
  })) : null;
  var content = iconMarkup || disclosureIconMarkup ? React__default.createElement("span", {
    className: styles$4.Content
  }, spinnerSVGMarkup, iconMarkup, childMarkup, disclosureIconMarkup) : React__default.createElement("span", {
    className: styles$4.Content
  }, spinnerSVGMarkup, childMarkup);
  var type = submit ? 'submit' : 'button';

  if (url) {
    return isDisabled ? // Render an `<a>` so toggling disabled/enabled state changes only the
    // `href` attribute instead of replacing the whole element.
    // eslint-disable-next-line jsx-a11y/anchor-is-valid
    React__default.createElement("a", {
      id: id,
      className: className,
      "aria-label": accessibilityLabel
    }, content) : React__default.createElement(UnstyledLink, {
      id: id,
      url: url,
      external: external,
      download: download,
      onClick: onClick,
      onFocus: onFocus,
      onBlur: onBlur,
      onMouseUp: handleMouseUpByBlurring,
      onMouseEnter: onMouseEnter,
      onTouchStart: onTouchStart,
      className: className,
      "aria-label": accessibilityLabel
    }, content);
  }

  var ariaPressedStatus = pressed !== undefined ? pressed : ariaPressed;
  return React__default.createElement("button", {
    id: id,
    type: type,
    onClick: onClick,
    onFocus: onFocus,
    onBlur: onBlur,
    onKeyDown: onKeyDown,
    onKeyUp: onKeyUp,
    onKeyPress: onKeyPress,
    onMouseUp: handleMouseUpByBlurring,
    onMouseEnter: onMouseEnter,
    onTouchStart: onTouchStart,
    className: className,
    disabled: isDisabled,
    "aria-label": accessibilityLabel,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-pressed": ariaPressedStatus,
    role: loading ? 'alert' : undefined,
    "aria-busy": loading ? true : undefined
  }, content);
}
function IconWrapper(_ref2) {
  var children = _ref2.children;
  return React__default.createElement("span", {
    className: styles$4.Icon
  }, children);
}

function isIconSource(x) {
  return typeof x === 'string' || typeof x === 'object' && x.body || typeof x === 'function';
}

function buttonsFrom(actions) {
  var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  if (Array.isArray(actions)) {
    return actions.map(function (action, index) {
      return buttonFrom(action, overrides, index);
    });
  } else {
    var action = actions;
    return buttonFrom(action, overrides);
  }
}
function buttonFrom(_a, overrides, key) {
  var content = _a.content,
      onAction = _a.onAction,
      action = tslib.__rest(_a, ["content", "onAction"]);

  return React__default.createElement(Button, Object.assign({
    key: key,
    onClick: onAction
  }, action, overrides), content);
}

/**
 * Returns a stateful value, and a set of memoized functions to toggle it,
 * set it to true and set it to false
 */

function useToggle(initialState) {
  var _useState = React.useState(initialState),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setState = _useState2[1];

  return {
    value,
    toggle: React.useCallback(function () {
      return setState(function (state) {
        return !state;
      });
    }, []),
    setTrue: React.useCallback(function () {
      return setState(true);
    }, []),
    setFalse: React.useCallback(function () {
      return setState(false);
    }, [])
  };
}

var WithinContentContext = React__default.createContext(false);

// `Component`. If `props` is passed, those will be added as props on the
// wrapped component. If `element` is null, the component is not wrapped.

function wrapWithComponent(element, Component, props) {
  if (element == null) {
    return null;
  }

  return isElementOfType(element, Component) ? element : React__default.createElement(Component, props, element);
} // In development, we compare based on the name of the function because
// React Hot Loader proxies React components in order to make updates. In
// production we can simply compare the components for equality.

var isComponent = process.env.NODE_ENV === 'development' ? hotReloadComponentCheck : function (AComponent, AnotherComponent) {
  return AComponent === AnotherComponent;
}; // Checks whether `element` is a React element of type `Component` (or one of
// the passed components, if `Component` is an array of React components).

function isElementOfType(element, Component) {
  if (element == null || !React__default.isValidElement(element) || typeof element.type === 'string') {
    return false;
  }

  var type = element.type;
  var Components = Array.isArray(Component) ? Component : [Component];
  return Components.some(function