@hackplan/polaris/index.es.js

Shopify’s product component library

import React__default, { useContext, useEffect, useRef, useState, useCallback, memo, Fragment } from 'react';
import debounce from 'lodash/debounce';
import { getRectForNode, Rect } from '@shopify/javascript-utilities/geometry';
import { addEventListener, removeEventListener } from '@shopify/javascript-utilities/events';
import tokens, { durationBase, durationSlow } from '@shopify/polaris-tokens';
import { __rest } from 'tslib';
import isEqual from 'lodash/isEqual';
import { clamp as clamp$1 } from '@shopify/javascript-utilities/math';
import createApp, { getShopOrigin, LifecycleHook } from '@shopify/app-bridge';
import hoistStatics from 'hoist-non-react-statics';
import { CaretDownMinor, TickSmallMinor, AlertMinor, CaretUpMinor, CircleCancelMinor, CancelSmallMinor, CircleTickMajorTwotone, CircleInformationMajorTwotone, CircleAlertMajorTwotone, CircleDisabledMajorTwotone, FlagMajorTwotone, ChevronLeftMinor, MinusMinor, MobileCancelMajorMonotone, ChevronRightMinor, ArrowLeftMinor, ArrowRightMinor, ExternalSmallMinor, DragDropMajorMonotone, CircleAlertMajorMonotone, QuestionMarkMajorTwotone, HorizontalDotsMinor, ArrowUpDownMinor, CalendarMinor, SearchMinor, EnableSelectionMinor, MobileHamburgerMajorMonotone } from '@shopify/polaris-icons';
import { closest, nodeContainsDescendant } from '@shopify/javascript-utilities/dom';
import { createUniqueIDFactory } from '@shopify/javascript-utilities/other';
import { focusFirstFocusableNode, findFirstFocusableNode, focusLastFocusableNode } from '@shopify/javascript-utilities/focus';
import { createPortal, findDOMNode } from 'react-dom';
import { write, read } from '@shopify/javascript-utilities/fastdom';
import { CSSTransition, TransitionGroup, Transition } from 'react-transition-group';
import { Redirect, ButtonGroup as ButtonGroup$1, Button as Button$2, Modal as Modal$2, Loading as Loading$2, TitleBar, ResourcePicker as ResourcePicker$2, Toast as Toast$2 } from '@shopify/app-bridge/actions';
import { isSameDay, Months, Weekdays, getWeeksForMonth, isDateBefore, isDateAfter, dateIsSelected, dateIsInRange, getNewRange, getNextDisplayYear, getNextDisplayMonth, getPreviousDisplayYear, getPreviousDisplayMonth } from '@shopify/javascript-utilities/dates';
export { Months } from '@shopify/javascript-utilities/dates';
import { Draggable, DragDropContext, Droppable } from 'react-beautiful-dnd';
import range from 'lodash/range';

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

var polarisVersion = '4.1.6';

var Key;

(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";
})(Key || (Key = {}));

var TypeOf;

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

function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

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 _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

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 _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) {
  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 isServer = typeof window === 'undefined' || typeof document === 'undefined';

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;

  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];
    mergeRecursively(_final, obj);
  }

  return _final;
}

function mergeRecursively(objA, objB) {
  for (var key in objB) {
    if (!objB.hasOwnProperty(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;
function translate(id, translations, replacements) {
  var text = get(translations, id);

  if (!text) {
    return '';
  }

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

      if (!replacements.hasOwnProperty(replacement)) {
        throw new Error("No replacement found for key '".concat(replacement, "'. The following replacements were passed: ").concat(Object.keys(replacements).map(function (key) {
          return "'".concat(key, "'");
        }).join(', ')));
      }

      return replacements[replacement];
    });
  }

  return text;
}

var Intl =
/*#__PURE__*/
function () {
  function Intl(translation) {
    var _this = this;

    _classCallCheck(this, Intl);

    this.translation = translation;

    this.translate = function (id, replacements) {
      return translate(id, _this.translation, replacements);
    };

    this.setTranslation(translation);
  }

  _createClass(Intl, [{
    key: "setTranslation",
    value: function setTranslation(translation) {
      this.translation = Array.isArray(translation) ? merge.apply(void 0, _toConsumableArray(translation)) : translation;
    }
  }, {
    key: "translationKeyExists",
    value: function translationKeyExists(path) {
      return Boolean(get(this.translation, path));
    }
  }]);

  return Intl;
}();

var Breakpoints = {
  navigationBarCollapsed: '768px',
  stackedContent: '1043px'
};
var noWindowMatches = {
  media: '',
  addListener: noop,
  removeListener: noop,
  matches: false,
  onchange: noop,
  addEventListener: noop,
  removeEventListener: noop,
  dispatchEvent: function dispatchEvent(_) {
    return true;
  }
};

function noop() {}

function navigationBarCollapsed() {
  return typeof window === 'undefined' ? noWindowMatches : window.matchMedia("(max-width: ".concat(Breakpoints.navigationBarCollapsed, ")"));
}
function stackedContent() {
  return typeof window === 'undefined' ? noWindowMatches : window.matchMedia("(max-width: ".concat(Breakpoints.stackedContent, ")"));
}

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 DATA_ATTRIBUTE = {
  overlay: overlay,
  layer: 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 StickyManager =
/*#__PURE__*/
function () {
  function StickyManager(container) {
    var _this = this;

    _classCallCheck(this, StickyManager);

    this.stickyItems = [];
    this.stuckItems = [];
    this.topBarOffset = 0;
    this.handleResize = debounce(function () {
      _this.manageStickyItems();
    }, 40, {
      leading: true,
      trailing: true,
      maxWait: 40
    });
    this.handleScroll = debounce(function () {
      _this.manageStickyItems();
    }, 40, {
      leading: true,
      trailing: true,
      maxWait: 40
    });

    if (container) {
      this.setContainer(container);
    }
  }

  _createClass(StickyManager, [{
    key: "registerStickyItem",
    value: function registerStickyItem(stickyItem) {
      this.stickyItems.push(stickyItem);
    }
  }, {
    key: "unregisterStickyItem",
    value: function unregisterStickyItem(nodeToRemove) {
      var nodeIndex = this.stickyItems.findIndex(function (_ref) {
        var stickyNode = _ref.stickyNode;
        return nodeToRemove === stickyNode;
      });
      this.stickyItems.splice(nodeIndex, 1);
    }
  }, {
    key: "setContainer",
    value: function setContainer(el) {
      this.container = el;

      if (isDocument(el)) {
        this.setTopBarOffset();
      }

      addEventListener(this.container, 'scroll', this.handleScroll);
      addEventListener(window, 'resize', this.handleResize);
      this.manageStickyItems();
    }
  }, {
    key: "removeScrollListener",
    value: function removeScrollListener() {
      if (this.container) {
        removeEventListener(this.container, 'scroll', this.handleScroll);
        removeEventListener(window, 'resize', this.handleResize);
      }
    }
  }, {
    key: "manageStickyItems",
    value: function manageStickyItems() {
      var _this2 = this;

      if (this.stickyItems.length <= 0) {
        return;
      }

      var scrollTop = scrollTopFor(this.container);
      var containerTop = getRectForNode(this.container).top + this.topBarOffset;
      this.stickyItems.forEach(function (stickyItem) {
        var handlePositioning = stickyItem.handlePositioning;

        var _this2$evaluateSticky = _this2.evaluateStickyItem(stickyItem, scrollTop, containerTop),
            sticky = _this2$evaluateSticky.sticky,
            top = _this2$evaluateSticky.top,
            left = _this2$evaluateSticky.left,
            width = _this2$evaluateSticky.width;

        _this2.updateStuckItems(stickyItem, sticky);

        handlePositioning(sticky, top, left, width);
      });
    }
  }, {
    key: "evaluateStickyItem",
    value: function evaluateStickyItem(stickyItem, scrollTop, containerTop) {
      var stickyNode = stickyItem.stickyNode,
          placeHolderNode = stickyItem.placeHolderNode,
          boundingElement = stickyItem.boundingElement,
          offset = stickyItem.offset,
          disableWhenStacked = stickyItem.disableWhenStacked;

      if (disableWhenStacked && stackedContent().matches) {
        return {
          sticky: false,
          top: 0,
          left: 0,
          width: 'auto'
        };
      }

      var stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(tokens.spacingLoose, 10) : this.getOffset(stickyNode);
      var scrollPosition = scrollTop + stickyOffset;
      var placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
      var top = containerTop + stickyOffset;
      var width = placeHolderNode.getBoundingClientRect().width;
      var left = placeHolderNode.getBoundingClientRect().left;
      var sticky;

      if (boundingElement == null) {
        sticky = scrollPosition >= placeHolderNodeCurrentTop;
      } else {
        var stickyItemHeight = stickyNode.getBoundingClientRect().height;
        var stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
        sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
      }

      return {
        sticky: sticky,
        top: top,
        left: left,
        width: width
      };
    }
  }, {
    key: "updateStuckItems",
    value: function updateStuckItems(item, sticky) {
      var stickyNode = item.stickyNode;

      if (sticky && !this.isNodeStuck(stickyNode)) {
        this.addStuckItem(item);
      } else if (!sticky && this.isNodeStuck(stickyNode)) {
        this.removeStuckItem(item);
      }
    }
  }, {
    key: "addStuckItem",
    value: function addStuckItem(stickyItem) {
      this.stuckItems.push(stickyItem);
    }
  }, {
    key: "removeStuckItem",
    value: function removeStuckItem(stickyItem) {
      var nodeToRemove = stickyItem.stickyNode;
      var nodeIndex = this.stuckItems.findIndex(function (_ref2) {
        var stickyNode = _ref2.stickyNode;
        return nodeToRemove === stickyNode;
      });
      this.stuckItems.splice(nodeIndex, 1);
    }
  }, {
    key: "getOffset",
    value: function getOffset(node) {
      if (this.stuckItems.length === 0) {
        return 0;
      }

      var offset = 0;
      var count = 0;
      var stuckNodesLength = this.stuckItems.length;
      var nodeRect = getRectForNode(node);

      while (count < stuckNodesLength) {
        var stuckNode = this.stuckItems[count].stickyNode;

        if (stuckNode !== node) {
          var stuckNodeRect = getRectForNode(stuckNode);

          if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
            offset += getRectForNode(stuckNode).height;
          }
        } else {
          break;
        }

        count++;
      }

      return offset;
    }
  }, {
    key: "isNodeStuck",
    value: function isNodeStuck(node) {
      var nodeFound = this.stuckItems.findIndex(function (_ref3) {
        var stickyNode = _ref3.stickyNode;
        return node === stickyNode;
      });
      return nodeFound >= 0;
    }
  }, {
    key: "setTopBarOffset",
    value: function setTopBarOffset() {
      var topbarElement = this.container.querySelector(":not(".concat(scrollable.selector, ") ").concat(dataPolarisTopBar.selector));
      this.topBarOffset = topbarElement ? topbarElement.clientHeight : 0;
    }
  }]);

  return StickyManager;
}();

function isDocument(node) {
  return node === document;
}

function scrollTopFor(container) {
  return isDocument(container) ? document.body.scrollTop || document.documentElement.scrollTop : container.scrollTop;
}

function horizontallyOverlaps(rect1, rect2) {
  var rect1Left = rect1.left;
  var rect1Right = rect1.left + rect1.width;
  var rect2Left = rect2.left;
  var rect2Right = rect2.left + rect2.width;
  return rect2Right < rect1Left || rect1Right < rect2Left;
}

var needsVariantList = ['topBar'];

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

  return fns.reduce(function (func, group) {
    return function () {
      return func(group.apply(void 0, arguments));
    };
  });
}

function rgbString(color) {
  var red = color.red,
      green = color.green,
      blue = color.blue;

  if (color.hasOwnProperty('alpha')) {
    return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(color.alpha, ")");
  } else {
    return "rgb(".concat(red, ", ").concat(green, ", ").concat(blue, ")");
  }
}
var rgbaString = rgbString;
function rgbToHex(_ref) {
  var red = _ref.red,
      green = _ref.green,
      blue = _ref.blue;
  return "#".concat(componentToHex(red)).concat(componentToHex(green)).concat(componentToHex(blue));
}

function componentToHex(component) {
  var hex = component.toString(16);
  return hex.length === 1 ? "0".concat(hex) : hex;
}

function hsbToHex(color) {
  return rgbToHex(hsbToRgb(color));
}

function rgbFromHueAndChroma(hue, chroma) {
  var huePrime = hue / 60;
  var hueDelta = 1 - Math.abs(huePrime % 2 - 1);
  var intermediateValue = chroma * hueDelta;
  var red = 0;
  var green = 0;
  var blue = 0;

  if (huePrime >= 0 && huePrime <= 1) {
    red = chroma;
    green = intermediateValue;
    blue = 0;
  }

  if (huePrime >= 1 && huePrime <= 2) {
    red = intermediateValue;
    green = chroma;
    blue = 0;
  }

  if (huePrime >= 2 && huePrime <= 3) {
    red = 0;
    green = chroma;
    blue = intermediateValue;
  }

  if (huePrime >= 3 && huePrime <= 4) {
    red = 0;
    green = intermediateValue;
    blue = chroma;
  }

  if (huePrime >= 4 && huePrime <= 5) {
    red = intermediateValue;
    green = 0;
    blue = chroma;
  }

  if (huePrime >= 5 && huePrime <= 6) {
    red = chroma;
    green = 0;
    blue = intermediateValue;
  }

  return {
    red: red,
    green: green,
    blue: blue
  };
}

function hsbToRgb(color) {
  var hue = color.hue,
      saturation = color.saturation,
      brightness = color.brightness,
      _color$alpha = color.alpha,
      alpha = _color$alpha === void 0 ? 1 : _color$alpha;
  var chroma = brightness * saturation;

  var _rgbFromHueAndChroma = rgbFromHueAndChroma(hue, chroma),
      red = _rgbFromHueAndChroma.red,
      green = _rgbFromHueAndChroma.green,
      blue = _rgbFromHueAndChroma.blue;

  var chromaBrightnessDelta = brightness - chroma;
  red += chromaBrightnessDelta;
  green += chromaBrightnessDelta;
  blue += chromaBrightnessDelta;
  return {
    red: Math.round(red * 255),
    green: Math.round(green * 255),
    blue: Math.round(blue * 255),
    alpha: alpha
  };
}
function hslToRgb(color) {
  var hue = color.hue,
      saturation = color.saturation,
      lightness = color.lightness,
      _color$alpha2 = color.alpha,
      alpha = _color$alpha2 === void 0 ? 1 : _color$alpha2;
  var chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);

  var _rgbFromHueAndChroma2 = rgbFromHueAndChroma(hue, chroma),
      red = _rgbFromHueAndChroma2.red,
      green = _rgbFromHueAndChroma2.green,
      blue = _rgbFromHueAndChroma2.blue;

  var lightnessVal = lightness / 100 - chroma / 2;
  red += lightnessVal;
  green += lightnessVal;
  blue += lightnessVal;
  return {
    red: Math.round(red * 255),
    green: Math.round(green * 255),
    blue: Math.round(blue * 255),
    alpha: alpha
  };
} // ref https://en.wikipedia.org/wiki/HSL_and_HSV

function rgbToHsbl(color) {
  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'b';
  var r = color.red,
      g = color.green,
      b = color.blue,
      _color$alpha3 = color.alpha,
      alpha = _color$alpha3 === void 0 ? 1 : _color$alpha3;
  var red = r / 255;
  var green = g / 255;
  var blue = b / 255;
  var largestComponent = Math.max(red, green, blue);
  var smallestComponent = Math.min(red, green, blue);
  var delta = largestComponent - smallestComponent;
  var lightness = (largestComponent + smallestComponent) / 2;
  var saturation = 0;

  if (largestComponent === 0) {
    saturation = 0;
  } else if (type === 'b') {
    saturation = delta / largestComponent;
  } else if (type === 'l') {
    saturation = lightness > 0.5 ? delta / (2 - largestComponent - smallestComponent) : delta / (largestComponent + smallestComponent);
  }

  var huePercentage = 0;

  switch (largestComponent) {
    case red:
      huePercentage = (green - blue) / delta + (green < blue ? 6 : 0);
      break;

    case green:
      huePercentage = (blue - red) / delta + 2;
      break;

    case blue:
      huePercentage = (red - green) / delta + 4;
  }

  var hue = Math.round(huePercentage / 6 * 360);
  return {
    hue: clamp$1(hue, 0, 360) || 0,
    saturation: parseFloat(clamp$1(saturation, 0, 1).toFixed(2)),
    brightness: parseFloat(clamp$1(largestComponent, 0, 1).toFixed(2)),
    lightness: parseFloat(lightness.toFixed(2)),
    alpha: parseFloat(alpha.toFixed(2))
  };
}

function rgbToHsb(color) {
  var _rgbToHsbl = rgbToHsbl(color, 'b'),
      hue = _rgbToHsbl.hue,
      saturation = _rgbToHsbl.saturation,
      brightness = _rgbToHsbl.brightness,
      alpha = _rgbToHsbl.alpha;

  return {
    hue: hue,
    saturation: saturation,
    brightness: brightness,
    alpha: alpha
  };
}
function rgbToHsl(color) {
  var _rgbToHsbl2 = rgbToHsbl(color, 'l'),
      hue = _rgbToHsbl2.hue,
      rawSaturation = _rgbToHsbl2.saturation,
      rawLightness = _rgbToHsbl2.lightness,
      alpha = _rgbToHsbl2.alpha;

  var saturation = rawSaturation * 100;
  var lightness = rawLightness * 100;
  return {
    hue: hue,
    saturation: saturation,
    lightness: lightness,
    alpha: alpha
  };
}

function hexToRgb(color) {
  if (color.length === 4) {
    var repeatHex = function repeatHex(hex1, hex2) {
      return color.slice(hex1, hex2).repeat(2);
    };

    var _red = parseInt(repeatHex(1, 2), 16);

    var _green = parseInt(repeatHex(2, 3), 16);

    var _blue = parseInt(repeatHex(3, 4), 16);

    return {
      red: _red,
      green: _green,
      blue: _blue
    };
  }

  var red = parseInt(color.slice(1, 3), 16);
  var green = parseInt(color.slice(3, 5), 16);
  var blue = parseInt(color.slice(5, 7), 16);
  return {
    red: red,
    green: green,
    blue: blue
  };
}

var ColorType;

(function (ColorType) {
  ColorType["Hex"] = "hex";
  ColorType["Rgb"] = "rgb";
  ColorType["Rgba"] = "rgba";
  ColorType["Hsl"] = "hsl";
  ColorType["Hsla"] = "hsla";
  ColorType["Default"] = "default";
})(ColorType || (ColorType = {}));

function getColorType(color) {
  if (color.includes('#')) {
    return ColorType.Hex;
  } else if (color.includes('rgb')) {
    return ColorType.Rgb;
  } else if (color.includes('rgba')) {
    return ColorType.Rgba;
  } else if (color.includes('hsl')) {
    return ColorType.Hsl;
  } else if (color.includes('hsla')) {
    return ColorType.Hsla;
  } else {
    if (process.env.NODE_ENV === 'development') {
      /* eslint-disable-next-line no-console */
      console.warn('Accepted colors formats are: hex, rgb, rgba, hsl and hsla');
    }

    return ColorType.Default;
  }
}

function hslToString(hslColor) {
  if (typeof hslColor === 'string') {
    return hslColor;
  }

  var _hslColor$alpha = hslColor.alpha,
      alpha = _hslColor$alpha === void 0 ? 1 : _hslColor$alpha,
      hue = hslColor.hue,
      lightness = hslColor.lightness,
      saturation = hslColor.saturation;
  return "hsl(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%, ").concat(alpha, ")");
}

function rgbToObject(color) {
  var colorMatch = color.match(/\(([^)]+)\)/);

  if (!colorMatch) {
    return {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 0
    };
  }

  var _colorMatch$1$split = colorMatch[1].split(','),
      _colorMatch$1$split2 = _slicedToArray(_colorMatch$1$split, 4),
      red = _colorMatch$1$split2[0],
      green = _colorMatch$1$split2[1],
      blue = _colorMatch$1$split2[2],
      alpha = _colorMatch$1$split2[3];

  var objColor = {
    red: parseInt(red, 10),
    green: parseInt(green, 10),
    blue: parseInt(blue, 10),
    alpha: parseInt(alpha, 10) || 1
  };
  return objColor;
}

var hexToHsl = compose(rgbToHsl, hexToRgb);
var rbgStringToHsl = compose(rgbToHsl, rgbToObject);
function colorToHsla(color) {
  var type = getColorType(color);

  switch (type) {
    case ColorType.Hex:
      return hexToHsl(color);

    case ColorType.Rgb:
    case ColorType.Rgba:
      return rbgStringToHsl(color);

    case ColorType.Hsl:
    case ColorType.Hsla:
    default:
      return color;
  }
}

// implements: https://www.w3.org/WAI/ER/WD-AERT/#color-contrast
function isLight(_ref) {
  var red = _ref.red,
      green = _ref.green,
      blue = _ref.blue;
  var contrast = (red * 299 + green * 587 + blue * 114) / 1000;
  return contrast > 125;
}

function normalizeName(name) {
  return name.split(/(?=[A-Z])/).join('-').toLowerCase();
}
function constructColorName(baseName, property, suffix) {
  var name = normalizeName(baseName);
  var propertyName = property ? "-".concat(normalizeName(property)) : '';
  var constructedSuffix = suffix ? "-".concat(suffix) : '';
  return "--".concat(name).concat(propertyName).concat(constructedSuffix);
}

function lightenColor(color) {
  var lighten = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

  if (typeof color === 'string') {
    return color;
  }

  var lightness = color.lightness;
  var nextLightness = lightness + lighten;
  return Object.assign({}, color, {
    lightness: nextLightness
  });
}
function saturateColor(color) {
  var saturate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

  if (typeof color === 'string') {
    return color;
  }

  var saturation = color.saturation;
  var nextSaturation = saturation + saturate;
  return Object.assign({}, color, {
    saturation: nextSaturation
  });
}
function createLightColor(color, lightness, saturation) {
  var lightenedColor = lightenColor(color, lightness);
  var saturatedColor = saturateColor(lightenedColor, -saturation);
  return saturatedColor;
}

function setColors(theme) {
  var colorPairs;

  if (theme && theme.colors) {
    Object.entries(theme.colors).forEach(function (_ref) {
      var _ref2 = _slicedToArray(_ref, 2),
          colorKey = _ref2[0],
          pairs = _ref2[1];

      var colorKeys = Object.keys(pairs);

      if (colorKey === 'topBar' && colorKeys.length > 1) {
        colorPairs = colorKeys.map(function (key) {
          var colors = theme.colors.topBar;
          return [constructColorName(colorKey, key), colors[key]];
        });
      } else {
        colorPairs = parseColors([colorKey, pairs]);
      }
    });
  }

  return colorPairs;
}
function needsVariant(name) {
  return needsVariantList.indexOf(name) !== -1;
}
var lightenToString = compose(hslToString, createLightColor);
function setTextColor(name) {
  var variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'dark';

  if (variant === 'light') {
    return [name, tokens.colorInk];
  }

  return [name, tokens.colorWhite];
}
function setTheme(color, baseName, key, variant) {
  var colorPairs = [];

  switch (variant) {
    case 'light':
      colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'light'));
      colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 7, -10)]);
      break;

    case 'dark':
      colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'dark'));
      colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 15, 15)]);
      break;

    default:
  }

  return colorPairs;
}

function parseColors(_ref3) {
  var _ref4 = _slicedToArray(_ref3, 2),
      baseName = _ref4[0],
      colors = _ref4[1];

  var keys = Object.keys(colors);
  var colorPairs = [];

  for (var i = 0; i < keys.length; i++) {
    colorPairs.push([constructColorName(baseName, keys[i]), colors[keys[i]]]);

    if (needsVariant(baseName)) {
      var hslColor = colorToHsla(colors[keys[i]]);

      if (typeof hslColor === 'string') {
        return colorPairs;
      }

      var rgbColor = hslToRgb(hslColor);

      if (isLight(rgbColor)) {
        colorPairs.push.apply(colorPairs, _toConsumableArray(setTheme(hslColor, baseName, keys[i], 'light')));
      } else {
        colorPairs.push.apply(colorPairs, _toConsumableArray(setTheme(hslColor, baseName, keys[i], 'dark')));
      }
    }
  }

  return colorPairs;
}

function createThemeContext(theme) {
  if (!theme) {
    return {
      logo: null
    };
  }

  var _theme$logo = theme.logo,
      logo = _theme$logo === void 0 ? null : _theme$logo;
  return {
    logo: logo
  };
}

var ThemeContext = React__default.createContext({
  logo: null
});

var defaultTheme = {
  '--top-bar-background': '#00848e',
  '--top-bar-color': '#f9fafb',
  '--top-bar-background-lighter': '#1d9ba4'
};

var ThemeProvider =
/*#__PURE__*/
function (_React$Component) {
  _inherits(ThemeProvider, _React$Component);

  function ThemeProvider(props) {
    var _this;

    _classCallCheck(this, ThemeProvider);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ThemeProvider).call(this, props));
    var theme = _this.props.theme;
    _this.state = {
      theme: setThemeContext(theme),
      colors: setColors(theme)
    };
    return _this;
  }

  _createClass(ThemeProvider, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(_ref) {
      var prevTheme = _ref.theme;
      var theme = this.props.theme;

      if (isEqual(prevTheme, theme)) {
        return;
      } // eslint-disable-next-line react/no-did-update-set-state


      this.setState({
        theme: setThemeContext(theme),
        colors: setColors(theme)
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _a = this.state.theme,
          _a$logo = _a.logo,
          logo = _a$logo === void 0 ? null : _a$logo,
          rest = __rest(_a, ["logo"]);

      var children = this.props.children;
      var styles = this.createStyles() || defaultTheme;
      var context = Object.assign({}, rest, {
        logo: logo
      });
      return React__default.createElement(ThemeContext.Provider, {
        value: context
      }, React__default.createElement("div", {
        style: styles
      }, React__default.Children.only(children)));
    }
  }, {
    key: "createStyles",
    value: function createStyles() {
      var colors = this.state.colors;
      return colors ? colors.reduce(function (state, _ref2) {
        var _ref3 = _slicedToArray(_ref2, 2),
            key = _ref3[0],
            value = _ref3[1];

        return Object.assign({}, state, _defineProperty({}, key, value));
      }, {}) : null;
    }
  }]);

  return ThemeProvider;
}(React__default.Component);

function setThemeContext(ctx) {
  var colors = ctx.colors,
      theme = __rest(ctx, ["colors"]);

  return Object.assign({}, theme);
}

var SCROLL_LOCKING_ATTRIBUTE = 'data-lock-scrolling';
var SCROLL_LOCKING_WRAPPER_ATTRIBUTE = 'data-lock-scrolling-wrapper';
var scrollPosition = 0;

var ScrollLockManager =
/*#__PURE__*/
function () {
  function ScrollLockManager() {
    _classCallCheck(this, ScrollLockManager);

    this.scrollLocks = 0;
    this.locked = false;
  }

  _createClass(ScrollLockManager, [{
    key: "registerScrollLock",
    value: function registerScrollLock() {
      this.scrollLocks += 1;
      this.handleScrollLocking();
    }
  }, {
    key: "unregisterScrollLock",
    value: function unregisterScrollLock() {
      this.scrollLocks -= 1;
      this.handleScrollLocking();
    }
  }, {
    key: "handleScrollLocking",
    value: function handleScrollLocking() {
      if (isServer) return;
      var scrollLocks = this.scrollLocks;
      var _document = document,
          body = _document.body;
      var wrapper = body.firstElementChild;

      if (scrollLocks === 0) {
        body.removeAttribute(SCROLL_LOCKING_ATTRIBUTE);

        if (wrapper) {
          wrapper.removeAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE);
        }

        window.scroll(0, scrollPosition);
        this.locked = false;
      } else if (scrollLocks > 0 && !this.locked) {
        scrollPosition = window.pageYOffset;
        body.setAttribute(SCROLL_LOCKING_ATTRIBUTE, '');

        if (wrapper) {
          wrapper.setAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE, '');
          wrapper.scrollTop = scrollPosition;
        }

        this.locked = true;
      }
    }
  }, {
    key: "resetScrollPosition",
    value: function resetScrollPosition() {
      scrollPosition = 0;
    }
  }]);

  return ScrollLockManager;
}();

var Link =
/*#__PURE__*/
function () {
  function Link(linkComponent) {
    _classCallCheck(this, Link);

    this.linkComponent = linkComponent;
  }

  _createClass(Link, [{
    key: "setLinkComponent",
    value: function setLinkComponent(link) {
      this.linkComponent = link;
    }
  }, {
    key: "getLinkComponent",
    value: function getLinkComponent() {
      return this.linkComponent;
    }
  }]);

  return Link;
}();

function createAppProviderContext() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
    i18n: {}
  },
      i18n = _ref.i18n,
      linkComponent = _ref.linkComponent,
      apiKey = _ref.apiKey,
      shopOrigin = _ref.shopOrigin,
      forceRedirect = _ref.forceRedirect,
      stickyManager = _ref.stickyManager,
      scrollLockManager = _ref.scrollLockManager;

  var intl = new Intl(i18n);
  var link = new Link(linkComponent);
  var appBridge = apiKey ? createApp({
    apiKey: apiKey,
    shopOrigin: shopOrigin || getShopOrigin(),
    forceRedirect: forceRedirect
  }) : undefined;

  if (appBridge != null) {
    // eslint-disable-next-line no-console
    console.warn("Deprecation: Using `apiKey` and `shopOrigin` on `AppProvider` to initialize the Shopify App Bridge is deprecated. Support for this will be removed in v5.0. Use `Provider` from `@shopify/app-bridge-react` instead. For example, `import {Provider} from '@shopify/app-bridge-react';`");
  }

  if (appBridge && appBridge.hooks) {
    appBridge.hooks.set(LifecycleHook.DispatchAction, setClientInterfaceHook);
  }

  return {
    intl: intl,
    link: link,
    stickyManager: stickyManager || new StickyManager(),
    scrollLockManager: scrollLockManager || new ScrollLockManager(),
    appBridge: appBridge
  };
}
var setClientInterfaceHook = function setClientInterfaceHook(next) {
  return function (action) {
    action.clientInterface = {
      name: '@shopify/polaris',
      version: polarisVersion
    };
    return next(action);
  };
};

function createPolarisContext(contextOne, contextTwo) {
  var appProviderContext;
  var themeContext;

  if (contextOne && 'logo' in contextOne) {
    themeContext = contextOne;
    appProviderContext = contextTwo;
  } else {
    appProviderContext = contextOne;
    themeContext = contextTwo;
  }

  var appProvider = appProviderContext ? createAppProviderContext(appProviderContext) : createAppProviderContext();
  var theme = themeContext ? createThemeContext(themeContext) : createThemeContext();
  return Object.assign({}, appProvider, {
    theme: theme
  });
}

var AppProviderContext = React__default.createContext(createPolarisContext());

function withScrollable(WrappedComponent) {
  var WithScrollable =
  /*#__PURE__*/
  function (_React$Component) {
    _inherits(WithScrollable, _React$Component);

    function WithScrollable() {
      var _this;

      _classCallCheck(this, WithScrollable);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(WithScrollable).apply(this, arguments));
      _this.stickyManager = new StickyManager();
      return _this;
    }

    _createClass(WithScrollable, [{
      key: "render",
      value: function render() {
        var _this2 = this;

        return React__default.createElement(AppProviderContext.Consumer, null, function (polaris) {
          return React__default.createElement(AppProviderContext.Provider, {
            value: Object.assign({}, polaris, {
              stickyManager: _this2.stickyManager
            })
          }, React__default.createElement(WrappedComponent, _this2.props));
        });
      }
    }]);

    return WithScrollable;
  }(React__default.Component);

  WithScrollable.contextTypes = WrappedComponent.contextTypes;
  return WithScrollable;
}

function withAppProvider() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      withinScrollable = _ref.withinScrollable;

  return function addProvider(WrappedComponent) {
    // eslint-disable-next-line react/prefer-stateless-function
    var WithProvider =
    /*#__PURE__*/
    function (_React$Component2) {
      _inherits(WithProvider, _React$Component2);

      function WithProvider() {
        _classCallCheck(this, WithProvider);

        return _possibleConstructorReturn(this, _getPrototypeOf(WithProvider).apply(this, arguments));
      }

      _createClass(WithProvider, [{
        key: "render",
        value: function render() {
          var _this3 = this;

          return React__default.createElement(AppProviderContext.Consumer, null, function (polaris) {
            return React__default.createElement(ThemeContext.Consumer, null, function (polarisTheme) {
              var polarisContext = Object.assign({}, polaris, {
                theme: polarisTheme
              });

              if (Object.keys(polaris).length < 1) {
                throw new Error("The <AppProvider> component is required as of v2.0 of Polaris React. See\n                                    https://polaris.shopify.com/components/structure/app-provider for implementation\n                                    instructions.");
              }

              return React__default.createElement(WrappedComponent, Object.assign({}, _this3.props, {
                polaris: polarisContext
              }));
            });
          });
        }
      }]);

      return WithProvider;
    }(React__default.Component);

    WithProvider.contextTypes = WrappedComponent.contextTypes;
    var WithScrollable;

    if (withinScrollable) {
      WithScrollable = withScrollable(WithProvider);
    }

    var FinalComponent = hoistStatics(WithScrollable || WithProvider, WrappedComponent);
    return FinalComponent;
  };
}

var AppProvider =
/*#__PURE__*/
function (_React$Component) {
  _inherits(AppProvider, _React$Component);

  function AppProvider(props) {
    var _this;

    _classCallCheck(this, AppProvider);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(AppProvider).call(this, props));
    _this.stickyManager = new StickyManager();
    _this.scrollLockManager = new ScrollLockManager();

    var _a = _this.props,
        theme = _a.theme,
        children = _a.children,
        rest = __rest(_a, ["theme", "children"]);

    _this.state = {
      context: createAppProviderContext(Object.assign({}, rest, {
        stickyManager: _this.stickyManager,
        scrollLockManager: _this.scrollLockManager
      }))
    };
    return _this;
  }

  _createClass(AppProvider, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (document != null) {
        this.stickyManager.setContainer(document);
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(_ref) {
      var prevI18n = _ref.i18n,
          prevLinkComponent = _ref.linkComponent,
          prevApiKey = _ref.apiKey,
          prevShopOrigin = _ref.shopOrigin,
          prevForceRedirect = _ref.forceRedirect;
      var _this$props = this.props,
          i18n = _this$props.i18n,
          linkComponent = _this$props.linkComponent,
          apiKey = _this$props.apiKey,
          shopOrigin = _this$props.shopOrigin,
          forceRedirect = _this$props.forceRedirect;

      if (i18n === prevI18n && linkComponent === prevLinkComponent && apiKey === prevApiKey && shopOrigin === prevShopOrigin && forceRedirect === prevForceRedirect) {
        return;
      } // eslint-disable-next-line react/no-did-update-set-state


      this.setState({
        context: createAppProviderContext({
          i18n: i18n,
          linkComponent: linkComponent,
          apiKey: apiKey,
          shopOrigin: shopOrigin,
          forceRedirect: forceRedirect,
          stickyManager: this.stickyManager
        })
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          _this$props2$theme = _this$props2.theme,
          theme = _this$props2$theme === void 0 ? {
        logo: null
      } : _this$props2$theme,
          children = _this$props2.children;
      var context = this.state.context;
      return React__default.createElement(AppProviderContext.Provider, {
        value: context
      }, React__default.createElement(ThemeProvider, {
        theme: theme
      }, React__default.Children.only(children)));
    }
  }]);

  return AppProvider;
}(React__default.Component);

function Image(_a) {
  var sourceSet = _a.sourceSet,
      source = _a.source,
      crossOrigin = _a.crossOrigin,
      rest = __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+PHBhdGggZmlsbD0iIzhkYzk1OCIgZD0iTTg2Ljk5IDU4SDY5VjBoMTAuOTNsNy4wNiA1OHoiLz48cGF0aCBmaWxsPSIjZWJlZGYxIiBkPSJNMjQuNTMgNDAuMjlhMTIuMjMgMTIuMjMgMCAwIDEgMjQuNDYgMCIgb3BhY2l0eT0iLjIiLz48cGF0aCBmaWxsPSIjOGRjOTU4IiBkPSJNNTkuNjIgNThBMTAuNjkgMTAuNjkgMCAwIDEgODEgNTh6Ii8+PC9zdmc+Cg==';

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