@shopify/polaris/index.es.js

Shopify’s product component library

import React__default, { useContext, useState, useEffect, useCallback, useRef, createRef, useMemo, useLayoutEffect, useImperativeHandle, createContext, memo, Fragment, createElement } from 'react';
import tokens, { durationBase, durationSlow } from '@shopify/polaris-tokens';
import { clamp as clamp$1 } from '@shopify/javascript-utilities/math';
import { __rest } from 'tslib';
import { CaretDownMinor, HorizontalDotsMinor, TickSmallMinor, AlertMinor, CaretUpMinor, CircleCancelMinor, CancelSmallMinor, CircleTickMajorTwotone, CircleInformationMajorTwotone, CircleAlertMajorTwotone, CircleDisabledMajorTwotone, FlagMajorTwotone, ChevronLeftMinor, MinusMinor, ChevronRightMinor, ArrowLeftMinor, ArrowRightMinor, DragDropMajorMonotone, CircleAlertMajorMonotone, SearchMinor, ChevronUpMinor, ChevronDownMinor, QuestionMarkMajorTwotone, MobileCancelMajorMonotone, ExternalSmallMinor, ArrowUpDownMinor, CalendarMinor, EnableSelectionMinor, MobileHamburgerMajorMonotone } from '@shopify/polaris-icons';
import debounce from 'lodash/debounce';
import { addEventListener, removeEventListener } from '@shopify/javascript-utilities/events';
import { closest, nodeContainsDescendant } from '@shopify/javascript-utilities/dom';
import { getRectForNode, Rect } from '@shopify/javascript-utilities/geometry';
import { createUniqueIDFactory } from '@shopify/javascript-utilities/other';
import { focusFirstFocusableNode, findFirstFocusableNode, focusLastFocusableNode } from '@shopify/javascript-utilities/focus';
import { createPortal } from 'react-dom';
import { write, read } from '@shopify/javascript-utilities/fastdom';
import createApp, { getShopOrigin, LifecycleHook } from '@shopify/app-bridge';
import isEqual from 'lodash/isEqual';
import hoistStatics from 'hoist-non-react-statics';
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 { CSSTransition, TransitionGroup, Transition } from '@material-ui/react-transition-group';
import { Redirect, ButtonGroup as ButtonGroup$1, Button as Button$1, Modal as Modal$2, Loading as Loading$2, TitleBar, ResourcePicker as ResourcePicker$2, Toast as Toast$2 } from '@shopify/app-bridge/actions';

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

var polarisVersion = '4.6.1';

var ThemeContext = React__default.createContext(undefined);

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");
}

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 useTheme() {
  var theme = useContext(ThemeContext);

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

  return theme;
}

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,
    green,
    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
  };
}
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
  };
} // 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') {
    var baseSaturation = lightness > 0.5 ? delta / (2 - largestComponent - smallestComponent) : delta / (largestComponent + smallestComponent);
    saturation = isNaN(baseSaturation) ? 0 : baseSaturation;
  }

  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,
      _rgbToHsbl$alpha = _rgbToHsbl.alpha,
      alpha = _rgbToHsbl$alpha === void 0 ? 1 : _rgbToHsbl$alpha;

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

  var saturation = rawSaturation * 100;
  var lightness = rawLightness * 100;
  return {
    hue,
    saturation,
    lightness,
    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,
    green,
    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 hexToHsla = compose(rgbToHsl, hexToRgb);
var rbgStringToHsla = compose(rgbToHsl, rgbToObject);

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

  if (!colorMatch) {
    return {
      hue: 0,
      saturation: 0,
      lightness: 0,
      alpha: 0
    };
  }

  var _colorMatch$1$split3 = colorMatch[1].split(','),
      _colorMatch$1$split4 = _slicedToArray(_colorMatch$1$split3, 4),
      hue = _colorMatch$1$split4[0],
      saturation = _colorMatch$1$split4[1],
      lightness = _colorMatch$1$split4[2],
      alpha = _colorMatch$1$split4[3];

  var objColor = {
    hue: parseInt(hue, 10),
    saturation: parseInt(saturation, 10),
    lightness: parseInt(lightness, 10),
    alpha: parseFloat(alpha) || 1
  };
  return objColor;
}

function colorToHsla(color) {
  var type = getColorType(color);

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

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

    case ColorType.Hsla:
    case ColorType.Hsl:
      return hslToObject(color);

    case ColorType.Default:
    default:
      throw new Error('Accepted color formats are: hex, rgb, rgba, hsl and hsla');
  }
}

// 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: clamp$1(nextLightness, 0, 100)
  });
}
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;
}

var needsVariantList = ['topBar'];

function buildCustomProperties(themeConfig, globalTheming) {
  return globalTheming ? buildColors(themeConfig) : buildLegacyColors(themeConfig);
}
function buildThemeContext(themeConfig, cssCustomProperties) {
  var logo = themeConfig.logo;
  return {
    logo,
    // eslint-disable-next-line babel/camelcase
    UNSTABLE_cssCustomProperties: toString(cssCustomProperties)
  };
}

function toString(obj) {
  if (obj) {
    return Object.entries(obj).map(function (pair) {
      return pair.join(':');
    }).join(';');
  } else {
    return undefined;
  }
}
/* eslint-disable babel/camelcase */
// eslint-disable-next-line shopify/typescript/prefer-pascal-case-enums


var UNSTABLE_Color;

(function (UNSTABLE_Color) {
  UNSTABLE_Color["Surface"] = "#FAFAFA";
  UNSTABLE_Color["DarkSurface"] = "#111213";
  UNSTABLE_Color["OnSurface"] = "#1F2225";
  UNSTABLE_Color["Interactive"] = "#0870D9";
  UNSTABLE_Color["Neutral"] = "#EAEAEB";
  UNSTABLE_Color["Branded"] = "#008060";
  UNSTABLE_Color["Critical"] = "#E32727";
  UNSTABLE_Color["Warning"] = "#FFC453";
  UNSTABLE_Color["Highlight"] = "#59D0C2";
  UNSTABLE_Color["Success"] = "#008060";
})(UNSTABLE_Color || (UNSTABLE_Color = {}));

function buildColors(theme) {
  var _theme$UNSTABLE_color = theme.UNSTABLE_colors,
      UNSTABLE_colors = _theme$UNSTABLE_color === void 0 ? {} : _theme$UNSTABLE_color;
  var _UNSTABLE_colors$surf = UNSTABLE_colors.surface,
      surface = _UNSTABLE_colors$surf === void 0 ? UNSTABLE_Color.Surface : _UNSTABLE_colors$surf,
      _UNSTABLE_colors$onSu = UNSTABLE_colors.onSurface,
      onSurface = _UNSTABLE_colors$onSu === void 0 ? UNSTABLE_Color.OnSurface : _UNSTABLE_colors$onSu,
      _UNSTABLE_colors$inte = UNSTABLE_colors.interactive,
      interactive = _UNSTABLE_colors$inte === void 0 ? UNSTABLE_Color.Interactive : _UNSTABLE_colors$inte,
      _UNSTABLE_colors$neut = UNSTABLE_colors.neutral,
      neutral = _UNSTABLE_colors$neut === void 0 ? UNSTABLE_Color.Neutral : _UNSTABLE_colors$neut,
      _UNSTABLE_colors$bran = UNSTABLE_colors.branded,
      branded = _UNSTABLE_colors$bran === void 0 ? UNSTABLE_Color.Branded : _UNSTABLE_colors$bran,
      _UNSTABLE_colors$crit = UNSTABLE_colors.critical,
      critical = _UNSTABLE_colors$crit === void 0 ? UNSTABLE_Color.Critical : _UNSTABLE_colors$crit,
      _UNSTABLE_colors$warn = UNSTABLE_colors.warning,
      warning = _UNSTABLE_colors$warn === void 0 ? UNSTABLE_Color.Warning : _UNSTABLE_colors$warn,
      _UNSTABLE_colors$high = UNSTABLE_colors.highlight,
      highlight = _UNSTABLE_colors$high === void 0 ? UNSTABLE_Color.Highlight : _UNSTABLE_colors$high,
      _UNSTABLE_colors$succ = UNSTABLE_colors.success,
      success = _UNSTABLE_colors$succ === void 0 ? UNSTABLE_Color.Success : _UNSTABLE_colors$succ;
  /* eslint-enable babel/camelcase */

  var lightSurface = isLight(hslToRgb(colorToHsla(surface)));
  return Object.assign({}, customPropertyTransformer(Object.assign({}, surfaceColors(colorToHsla(surface), lightSurface), onSurfaceColors(colorToHsla(onSurface), lightSurface), interactiveColors(colorToHsla(interactive), lightSurface), neutralColors(colorToHsla(neutral), lightSurface), brandedColors(colorToHsla(branded), lightSurface), criticalColors(colorToHsla(critical), lightSurface), warningColors(colorToHsla(warning), lightSurface), highlightColors(colorToHsla(highlight), lightSurface), successColors(colorToHsla(success), lightSurface))), overrides());
}

function surfaceColors(color, lightSurface) {
  return {
    surface: color,
    surfaceBackground: setLightness(color, lightSurface ? 98 : 7),
    surfaceForeground: setLightness(color, lightSurface ? 100 : 13),
    surfaceForegroundSubdued: setLightness(color, lightSurface ? 90 : 10),
    surfaceInverse: setLightness(color, lightSurface ? 0 : 100),
    surfaceHovered: setLightness(color, lightSurface ? 93 : 20),
    surfacePressed: setLightness(color, lightSurface ? 86 : 27)
  };
}

function onSurfaceColors(color, lightSurface) {
  return {
    onSurface: color,
    actionOnDark: setLightness(color, 76),
    actionOnLight: setLightness(color, 36),
    actionOnInverse: setLightness(color, lightSurface ? 76 : 36),
    actionOnSurface: setLightness(color, lightSurface ? 36 : 76),
    actionDisabledOnDark: setLightness(color, 66),
    actionDisabledOnLight: setLightness(color, 46),
    actionDisabledOnInverse: setLightness(color, lightSurface ? 66 : 46),
    actionDisabledOnSurface: setLightness(color, lightSurface ? 46 : 66),
    actionHoveredOnDark: setLightness(color, 86),
    actionHoveredOnLight: setLightness(color, 26),
    actionHoveredOnInverse: setLightness(color, lightSurface ? 86 : 26),
    actionHoveredOnSurface: setLightness(color, lightSurface ? 26 : 86),
    actionPressedOnDark: setLightness(color, 96),
    actionPressedOnLight: setLightness(color, 16),
    actionPressedOnInverse: setLightness(color, lightSurface ? 96 : 16),
    actionPressedOnSurface: setLightness(color, lightSurface ? 16 : 96),
    dividerOnDark: setLightness(color, 80),
    dividerOnLight: setLightness(color, 75),
    dividerOnInverse: setLightness(color, lightSurface ? 80 : 75),
    dividerOnSurface: setLightness(color, lightSurface ? 75 : 80),
    dividerDisabledOnDark: setLightness(color, 70),
    dividerDisabledOnLight: setLightness(color, 95),
    dividerDisabledOnInverse: setLightness(color, lightSurface ? 70 : 95),
    dividerDisabledOnSurface: setLightness(color, lightSurface ? 95 : 70),
    dividerSubduedOnDark: setLightness(color, 75),
    dividerSubduedOnLight: setLightness(color, 85),
    dividerSubduedOnInverse: setLightness(color, lightSurface ? 75 : 85),
    dividerSubduedOnSurface: setLightness(color, lightSurface ? 85 : 75),
    iconOnDark: setLightness(color, 98),
    iconOnLight: setLightness(color, 18),
    iconOnInverse: setLightness(color, lightSurface ? 98 : 18),
    iconOnSurface: setLightness(color, lightSurface ? 18 : 98),
    iconDisabledOnDark: setLightness(color, 75),
    iconDisabledOnLight: setLightness(color, 68),
    iconDisabledOnInverse: setLightness(color, lightSurface ? 75 : 68),
    iconDisabledOnSurface: setLightness(color, lightSurface ? 68 : 75),
    iconSubduedOnDark: setLightness(color, 88),
    iconSubduedOnLight: setLightness(color, 43),
    iconSubduedOnInverse: setLightness(color, lightSurface ? 88 : 43),
    iconSubduedOnSurface: setLightness(color, lightSurface ? 43 : 88),
    textOnDark: setLightness(color, 100),
    textOnLight: setLightness(color, 13),
    textOnInverse: setLightness(color, lightSurface ? 100 : 13),
    textOnSurface: setLightness(color, lightSurface ? 13 : 100),
    textDisabledOnDark: setLightness(color, 80),
    textDisabledOnLight: setLightness(color, 63),
    textDisabledOnInverse: setLightness(color, lightSurface ? 80 : 63),
    textDisabledOnSurface: setLightness(color, lightSurface ? 63 : 80),
    textSubduedOnDark: setLightness(color, 90),
    textSubduedOnLight: setLightness(color, 38),
    textSubduedOnInverse: setLightness(color, lightSurface ? 90 : 38),
    textSubduedOnSurface: setLightness(color, lightSurface ? 38 : 90)
  };
}

function interactiveColors(color, lightSurface) {
  return {
    interactive: color,
    interactiveAction: setLightness(color, lightSurface ? 44 : 56),
    interactiveActionDisabled: setLightness(color, lightSurface ? 58 : 42),
    interactiveActionHovered: setLightness(color, lightSurface ? 37 : 63),
    interactiveActionSubdued: setLightness(color, lightSurface ? 51 : 49),
    interactiveActionPressed: setLightness(color, lightSurface ? 31 : 69),
    interactiveFocus: setLightness(color, lightSurface ? 58 : 42),
    interactiveSelected: setLightness(color, lightSurface ? 96 : 4),
    interactiveSelectedHovered: setLightness(color, lightSurface ? 89 : 11),
    interactiveSelectedPressed: setLightness(color, lightSurface ? 82 : 18)
  };
}

function neutralColors(color, lightSurface) {
  return {
    neutral: color,
    neutralActionDisabled: setLightness(color, lightSurface ? 94 : 13),
    neutralAction: setLightness(color, lightSurface ? 92 : 22),
    neutralActionHovered: setLightness(color, lightSurface ? 86 : 29),
    neutralActionPressed: setLightness(color, lightSurface ? 76 : 39)
  };
}

function brandedColors(color, lightSurface) {
  return {
    branded: color,
    brandedAction: setLightness(color, 25),
    brandedActionDisabled: setLightness(color, 32),
    brandedActionHovered: setLightness(color, 22),
    brandedActionPressed: setLightness(color, 15),
    iconOnBranded: setLightness(color, 98),
    iconSubduedOnBranded: setLightness(color, 88),
    textOnBranded: setLightness(color, 100),
    textSubduedOnBranded: setLightness(color, 90),
    brandedSelected: setSaturation(setLightness(color, lightSurface ? 95 : 5), 30),
    brandedSelectedHovered: setSaturation(setLightness(color, lightSurface ? 81 : 19), 22),
    brandedSelectedPressed: setSaturation(setLightness(color, lightSurface ? 74 : 26), 22)
  };
}

function criticalColors(color, lightSurface) {
  return {
    critical: color,
    criticalDivider: setLightness(color, lightSurface ? 52 : 48),
    criticalIcon: setLightness(color, lightSurface ? 52 : 48),
    criticalSurface: setLightness(color, lightSurface ? 88 : 12),
    criticalSurfaceSubdued: setLightness(color, lightSurface ? 98 : 12),
    criticalText: setLightness(color, lightSurface ? 30 : 70),
    criticalActionDisabled: setLightness(color, lightSurface ? 59 : 41),
    criticalAction: setLightness(color, lightSurface ? 52 : 48),
    criticalActionHovered: setLightness(color, lightSurface ? 45 : 55),
    criticalActionSubdued: setLightness(color, lightSurface ? 38 : 62),
    criticalActionPressed: setLightness(color, lightSurface ? 31 : 69)
  };
}

function warningColors(color, lightSurface) {
  return {
    warning: color,
    warningDivider: setLightness(color, lightSurface ? 66 : 34),
    warningIcon: setLightness(color, lightSurface ? 66 : 34),
    warningSurface: setLightness(color, lightSurface ? 88 : 12),
    warningSurfaceSubdued: setLightness(color, lightSurface ? 98 : 12),
    warningText: setLightness(color, lightSurface ? 30 : 70)
  };
}

function highlightColors(color, lightSurface) {
  return {
    highlight: color,
    highlightDivider: setLightness(color, lightSurface ? 58 : 42),
    highlightIcon: setLightness(color, lightSurface ? 58 : 42),
    highlightSurface: setLightness(color, lightSurface ? 88 : 12),
    highlightSurfaceSubdued: setLightness(color, lightSurface ? 98 : 12),
    highlightText: setLightness(color, lightSurface ? 98 : 2)
  };
}

function successColors(color, lightSurface) {
  return {
    success: color,
    successDivider: setLightness(color, lightSurface ? 25 : 35),
    successIcon: setLightness(color, lightSurface ? 25 : 35),
    successSurface: setLightness(color, lightSurface ? 88 : 12),
    successSurfaceSubdued: setLightness(color, lightSurface ? 98 : 12),
    successText: setLightness(color, lightSurface ? 15 : 85)
  };
}

function overrides() {
  return {
    [toCssCustomPropertySyntax('overrideNone')]: 'none',
    [toCssCustomPropertySyntax('overrideTransparent')]: 'transparent',
    [toCssCustomPropertySyntax('overrideOne')]: '1',
    [toCssCustomPropertySyntax('overrideVisible')]: 'visible',
    [toCssCustomPropertySyntax('buttonFontWeight')]: '500',
    [toCssCustomPropertySyntax('nonNullContent')]: "''",
    [toCssCustomPropertySyntax('borderRadiusBase')]: rem('4px'),
    [toCssCustomPropertySyntax('borderRadiusWide')]: rem('8px'),
    [toCssCustomPropertySyntax('bannerDefaultBorder')]: buildBannerBorder('--p-divider-on-surface'),
    [toCssCustomPropertySyntax('bannerSuccessBorder')]: buildBannerBorder('--p-success-divider'),
    [toCssCustomPropertySyntax('bannerHighlightBorder')]: buildBannerBorder('--p-highlight-divider'),
    [toCssCustomPropertySyntax('bannerWarningBorder')]: buildBannerBorder('--p-warning-divider'),
    [toCssCustomPropertySyntax('bannerCriticalBorder')]: buildBannerBorder('--p-critical-divider'),
    [toCssCustomPropertySyntax('badgeMixBlendMode')]: 'luminosity',
    [toCssCustomPropertySyntax('borderSubdued')]: "".concat(rem('1px'), " solid var(--p-divider-subdued-on-surface)")
  };
}

function customPropertyTransformer(colors) {
  return Object.entries(colors).reduce(function (transformed, _ref) {
    var _ref2 = _slicedToArray(_ref, 2),
        key = _ref2[0],
        value = _ref2[1];

    return Object.assign({}, transformed, {
      [toCssCustomPropertySyntax(key)]: hslToString(value)
    });
  }, {});
}

function toCssCustomPropertySyntax(camelCase) {
  return "--p-".concat(camelCase.replace(/([A-Z0-9])/g, '-$1').toLowerCase());
}

function setLightness(_ref3, lightness) {
  var hue = _ref3.hue,
      saturation = _ref3.saturation,
      alpha = _ref3.alpha;
  return {
    hue,
    saturation,
    lightness,
    alpha
  };
}

function setSaturation(_ref4, saturation) {
  var hue = _ref4.hue,
      lightness = _ref4.lightness,
      alpha = _ref4.alpha;
  return {
    hue,
    saturation,
    lightness,
    alpha
  };
}

function buildLegacyColors(theme) {
  var colorPairs;
  var colors = theme && theme.colors && theme.colors.topBar ? theme.colors.topBar : {
    background: '#00848e',
    backgroundLighter: '#1d9ba4',
    color: '#f9fafb'
  };
  var colorKey = 'topBar';
  var colorKeys = Object.keys(colors);

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

  return colorPairs.reduce(function (state, _ref5) {
    var _ref6 = _slicedToArray(_ref5, 2),
        key = _ref6[0],
        value = _ref6[1];

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

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(_ref7) {
  var _ref8 = _slicedToArray(_ref7, 2),
      baseName = _ref8[0],
      colors = _ref8[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 rem(px) {
  var baseFontSize = 10;
  return "".concat(parseInt(px, 10) / baseFontSize, "rem");
}

function buildBannerBorder(cssVar) {
  return "inset 0 ".concat(rem('2px'), " 0 0 var(").concat(cssVar, "), inset 0 0 0 ").concat(rem('2px'), " var(").concat(cssVar, ")");
}

// eslint-disable-next-line babel/camelcase
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 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 I18nContext = React__default.createContext(undefined);

function useI18n() {
  var i18n = 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;

  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;
var I18n =
/*#__PURE__*/
function () {
  function I18n(translation) {
    var _this = this;

    _classCallCheck(this, I18n);

    this.translation = translation;

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

    this.setTranslation(translation);
  }

  _createClass(I18n, [{
    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 I18n;
}();
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 isServer = typeof window === 'undefined' || typeof document === 'undefined';

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+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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBmaWxsPSIjZmZlZGI5IiBkPSJNMCAwaDEwMHYxMDBIMHoiLz48cGF0aCBkPSJNNjQuNjMgMTcuMzNhM