@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.7.3';
}

var polarisVersion = '4.7.3';

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 (Object.prototype.hasOwnProperty.call(color, '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'];

var surface = {
	baseColor: "surface",
	light: {
	},
	dark: {
	}
};
var surfaceBackground = {
	baseColor: "surface",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 7
	}
};
var surfaceForeground = {
	baseColor: "surface",
	light: {
		lightness: 100
	},
	dark: {
		lightness: 13
	}
};
var surfaceForegroundSubdued = {
	baseColor: "surface",
	light: {
		lightness: 95
	},
	dark: {
		lightness: 10
	}
};
var surfaceInverse = {
	baseColor: "surface",
	light: {
		lightness: 0
	},
	dark: {
		lightness: 100
	}
};
var surfaceHovered = {
	baseColor: "surface",
	light: {
		lightness: 93
	},
	dark: {
		lightness: 20
	}
};
var surfacePressed = {
	baseColor: "surface",
	light: {
		lightness: 86
	},
	dark: {
		lightness: 27
	}
};
var onSurface = {
	baseColor: "onSurface",
	light: {
	},
	dark: {
	}
};
var actionOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 76
	},
	dark: {
		lightness: 36
	}
};
var actionOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 36
	},
	dark: {
		lightness: 76
	}
};
var actionDisabledOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 66
	},
	dark: {
		lightness: 46
	}
};
var actionDisabledOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 46
	},
	dark: {
		lightness: 66
	}
};
var actionHoveredOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 86
	},
	dark: {
		lightness: 26
	}
};
var actionHoveredOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 26
	},
	dark: {
		lightness: 86
	}
};
var actionPressedOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 96
	},
	dark: {
		lightness: 16
	}
};
var actionPressedOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 16
	},
	dark: {
		lightness: 96
	}
};
var dividerOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 80
	},
	dark: {
		lightness: 75
	}
};
var dividerOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 75
	},
	dark: {
		lightness: 80
	}
};
var dividerDisabledOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 70
	},
	dark: {
		lightness: 95
	}
};
var dividerDisabledOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 95
	},
	dark: {
		lightness: 70
	}
};
var dividerSubduedOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 75
	},
	dark: {
		lightness: 85
	}
};
var dividerSubduedOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 85
	},
	dark: {
		lightness: 75
	}
};
var iconOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 18
	}
};
var iconOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 18
	},
	dark: {
		lightness: 98
	}
};
var iconDisabledOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 75
	},
	dark: {
		lightness: 68
	}
};
var iconDisabledOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 68
	},
	dark: {
		lightness: 75
	}
};
var iconSubduedOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 43
	}
};
var iconSubduedOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 43
	},
	dark: {
		lightness: 88
	}
};
var textOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 100
	},
	dark: {
		lightness: 13
	}
};
var textOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 13
	},
	dark: {
		lightness: 100
	}
};
var textDisabledOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 80
	},
	dark: {
		lightness: 63
	}
};
var textDisabledOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 63
	},
	dark: {
		lightness: 80
	}
};
var textSubduedOnInverse = {
	baseColor: "onSurface",
	light: {
		lightness: 90
	},
	dark: {
		lightness: 38
	}
};
var textSubduedOnSurface = {
	baseColor: "onSurface",
	light: {
		lightness: 38
	},
	dark: {
		lightness: 90
	}
};
var actionOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 76
	},
	dark: {
		lightness: 76
	}
};
var actionOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 36
	},
	dark: {
		lightness: 36
	}
};
var actionDisabledOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 66
	},
	dark: {
		lightness: 66
	}
};
var actionDisabledOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 46
	},
	dark: {
		lightness: 46
	}
};
var actionHoveredOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 86
	},
	dark: {
		lightness: 86
	}
};
var actionHoveredOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 26
	},
	dark: {
		lightness: 26
	}
};
var actionPressedOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 96
	},
	dark: {
		lightness: 96
	}
};
var actionPressedOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 16
	},
	dark: {
		lightness: 16
	}
};
var dividerOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 80
	},
	dark: {
		lightness: 80
	}
};
var dividerOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 75
	},
	dark: {
		lightness: 75
	}
};
var dividerDisabledOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 70
	},
	dark: {
		lightness: 70
	}
};
var dividerDisabledOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 95
	},
	dark: {
		lightness: 95
	}
};
var dividerSubduedOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 75
	},
	dark: {
		lightness: 75
	}
};
var dividerSubduedOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 85
	},
	dark: {
		lightness: 85
	}
};
var iconOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 98
	}
};
var iconOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 18
	},
	dark: {
		lightness: 18
	}
};
var iconDisabledOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 75
	},
	dark: {
		lightness: 75
	}
};
var iconDisabledOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 68
	},
	dark: {
		lightness: 68
	}
};
var iconSubduedOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 88
	}
};
var iconSubduedOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 43
	},
	dark: {
		lightness: 43
	}
};
var textOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 100
	},
	dark: {
		lightness: 100
	}
};
var textOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 13
	},
	dark: {
		lightness: 13
	}
};
var textDisabledOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 80
	},
	dark: {
		lightness: 80
	}
};
var textDisabledOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 63
	},
	dark: {
		lightness: 63
	}
};
var textSubduedOnDark = {
	baseColor: "onSurface",
	light: {
		lightness: 90
	},
	dark: {
		lightness: 90
	}
};
var textSubduedOnLight = {
	baseColor: "onSurface",
	light: {
		lightness: 38
	},
	dark: {
		lightness: 38
	}
};
var interactive = {
	baseColor: "interactive",
	light: {
	},
	dark: {
	}
};
var interactiveAction = {
	baseColor: "interactive",
	light: {
		lightness: 44
	},
	dark: {
		lightness: 56
	}
};
var interactiveActionDisabled = {
	baseColor: "interactive",
	light: {
		lightness: 58
	},
	dark: {
		lightness: 42
	}
};
var interactiveActionHovered = {
	baseColor: "interactive",
	light: {
		lightness: 37
	},
	dark: {
		lightness: 63
	}
};
var interactiveActionSubdued = {
	baseColor: "interactive",
	light: {
		lightness: 51
	},
	dark: {
		lightness: 49
	}
};
var interactiveActionPressed = {
	baseColor: "interactive",
	light: {
		lightness: 31
	},
	dark: {
		lightness: 69
	}
};
var interactiveFocus = {
	baseColor: "interactive",
	light: {
		lightness: 58
	},
	dark: {
		lightness: 42
	}
};
var interactiveSelected = {
	baseColor: "interactive",
	light: {
		lightness: 96
	},
	dark: {
		lightness: 4
	}
};
var interactiveSelectedHovered = {
	baseColor: "interactive",
	light: {
		lightness: 89
	},
	dark: {
		lightness: 11
	}
};
var interactiveSelectedPressed = {
	baseColor: "interactive",
	light: {
		lightness: 82
	},
	dark: {
		lightness: 18
	}
};
var neutral = {
	baseColor: "neutral",
	light: {
	},
	dark: {
	}
};
var neutralActionDisabled = {
	baseColor: "neutral",
	light: {
		lightness: 94
	},
	dark: {
		lightness: 13
	}
};
var neutralAction = {
	baseColor: "neutral",
	light: {
		lightness: 92
	},
	dark: {
		lightness: 22
	}
};
var neutralActionHovered = {
	baseColor: "neutral",
	light: {
		lightness: 86
	},
	dark: {
		lightness: 29
	}
};
var neutralActionPressed = {
	baseColor: "neutral",
	light: {
		lightness: 76
	},
	dark: {
		lightness: 39
	}
};
var branded = {
	baseColor: "branded",
	light: {
	},
	dark: {
	}
};
var brandedAction = {
	baseColor: "branded",
	light: {
		lightness: 25
	},
	dark: {
		lightness: 25
	}
};
var brandedActionDisabled = {
	baseColor: "branded",
	light: {
		lightness: 32
	},
	dark: {
		lightness: 32
	}
};
var brandedActionHovered = {
	baseColor: "branded",
	light: {
		lightness: 22
	},
	dark: {
		lightness: 22
	}
};
var brandedActionPressed = {
	baseColor: "branded",
	light: {
		lightness: 15
	},
	dark: {
		lightness: 15
	}
};
var iconOnBranded = {
	baseColor: "branded",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 98
	}
};
var iconSubduedOnBranded = {
	baseColor: "branded",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 88
	}
};
var textOnBranded = {
	baseColor: "branded",
	light: {
		lightness: 100
	},
	dark: {
		lightness: 100
	}
};
var textSubduedOnBranded = {
	baseColor: "branded",
	light: {
		lightness: 90
	},
	dark: {
		lightness: 90
	}
};
var brandedSelected = {
	baseColor: "branded",
	light: {
		lightness: 95,
		saturation: 30
	},
	dark: {
		lightness: 5,
		saturation: 30
	}
};
var brandedSelectedHovered = {
	baseColor: "branded",
	light: {
		lightness: 81,
		saturation: 22
	},
	dark: {
		lightness: 19,
		saturation: 22
	}
};
var brandedSelectedPressed = {
	baseColor: "branded",
	light: {
		lightness: 74,
		saturation: 22
	},
	dark: {
		lightness: 26,
		saturation: 22
	}
};
var critical = {
	baseColor: "critical",
	light: {
	},
	dark: {
	}
};
var criticalDivider = {
	baseColor: "critical",
	light: {
		lightness: 52
	},
	dark: {
		lightness: 48
	}
};
var criticalDividerDisabled = {
	baseColor: "critical",
	light: {
		lightness: 82
	},
	dark: {
		lightness: 28
	}
};
var criticalIcon = {
	baseColor: "critical",
	light: {
		lightness: 52
	},
	dark: {
		lightness: 48
	}
};
var criticalSurface = {
	baseColor: "critical",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 12
	}
};
var criticalSurfaceSubdued = {
	baseColor: "critical",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 12
	}
};
var criticalSurfaceSubduedHovered = {
	baseColor: "critical",
	light: {
		lightness: 93
	},
	dark: {
		lightness: 17
	}
};
var criticalSurfaceSubduedPressed = {
	baseColor: "critical",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 22
	}
};
var criticalText = {
	baseColor: "critical",
	light: {
		lightness: 30
	},
	dark: {
		lightness: 70
	}
};
var criticalActionDisabled = {
	baseColor: "critical",
	light: {
		lightness: 59
	},
	dark: {
		lightness: 41
	}
};
var criticalAction = {
	baseColor: "critical",
	light: {
		lightness: 52
	},
	dark: {
		lightness: 48
	}
};
var criticalActionHovered = {
	baseColor: "critical",
	light: {
		lightness: 45
	},
	dark: {
		lightness: 55
	}
};
var criticalActionSubdued = {
	baseColor: "critical",
	light: {
		lightness: 38
	},
	dark: {
		lightness: 62
	}
};
var criticalActionPressed = {
	baseColor: "critical",
	light: {
		lightness: 31
	},
	dark: {
		lightness: 69
	}
};
var criticalLink = {
	baseColor: "critical",
	light: {
		lightness: 42
	},
	dark: {
		lightness: 48
	}
};
var criticalLinkDisabled = {
	baseColor: "critical",
	light: {
		lightness: 72
	},
	dark: {
		lightness: 78
	}
};
var criticalLinkHovered = {
	baseColor: "critical",
	light: {
		lightness: 45
	},
	dark: {
		lightness: 55
	}
};
var criticalLinkPressed = {
	baseColor: "critical",
	light: {
		lightness: 21
	},
	dark: {
		lightness: 69
	}
};
var warning = {
	baseColor: "warning",
	light: {
	},
	dark: {
	}
};
var warningDivider = {
	baseColor: "warning",
	light: {
		lightness: 66
	},
	dark: {
		lightness: 34
	}
};
var warningIcon = {
	baseColor: "warning",
	light: {
		lightness: 66
	},
	dark: {
		lightness: 34
	}
};
var warningSurface = {
	baseColor: "warning",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 12
	}
};
var warningSurfaceSubdued = {
	baseColor: "warning",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 12
	}
};
var warningText = {
	baseColor: "warning",
	light: {
		lightness: 30
	},
	dark: {
		lightness: 70
	}
};
var highlight = {
	baseColor: "highlight",
	light: {
	},
	dark: {
	}
};
var highlightDivider = {
	baseColor: "highlight",
	light: {
		lightness: 58
	},
	dark: {
		lightness: 42
	}
};
var highlightIcon = {
	baseColor: "highlight",
	light: {
		lightness: 58
	},
	dark: {
		lightness: 42
	}
};
var highlightSurface = {
	baseColor: "highlight",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 12
	}
};
var highlightSurfaceSubdued = {
	baseColor: "highlight",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 12
	}
};
var highlightText = {
	baseColor: "highlight",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 2
	}
};
var success = {
	baseColor: "success",
	light: {
	},
	dark: {
	}
};
var successDivider = {
	baseColor: "success",
	light: {
		lightness: 25
	},
	dark: {
		lightness: 35
	}
};
var successIcon = {
	baseColor: "success",
	light: {
		lightness: 25
	},
	dark: {
		lightness: 35
	}
};
var successSurface = {
	baseColor: "success",
	light: {
		lightness: 88
	},
	dark: {
		lightness: 12
	}
};
var successSurfaceSubdued = {
	baseColor: "success",
	light: {
		lightness: 98
	},
	dark: {
		lightness: 12
	}
};
var successText = {
	baseColor: "success",
	light: {
		lightness: 15
	},
	dark: {
		lightness: 85
	}
};
var colorAdjustmentsJson = {
	surface: surface,
	surfaceBackground: surfaceBackground,
	surfaceForeground: surfaceForeground,
	surfaceForegroundSubdued: surfaceForegroundSubdued,
	surfaceInverse: surfaceInverse,
	surfaceHovered: surfaceHovered,
	surfacePressed: surfacePressed,
	onSurface: onSurface,
	actionOnInverse: actionOnInverse,
	actionOnSurface: actionOnSurface,
	actionDisabledOnInverse: actionDisabledOnInverse,
	actionDisabledOnSurface: actionDisabledOnSurface,
	actionHoveredOnInverse: actionHoveredOnInverse,
	actionHoveredOnSurface: actionHoveredOnSurface,
	actionPressedOnInverse: actionPressedOnInverse,
	actionPressedOnSurface: actionPressedOnSurface,
	dividerOnInverse: dividerOnInverse,
	dividerOnSurface: dividerOnSurface,
	dividerDisabledOnInverse: dividerDisabledOnInverse,
	dividerDisabledOnSurface: dividerDisabledOnSurface,
	dividerSubduedOnInverse: dividerSubduedOnInverse,
	dividerSubduedOnSurface: dividerSubduedOnSurface,
	iconOnInverse: iconOnInverse,
	iconOnSurface: iconOnSurface,
	iconDisabledOnInverse: iconDisabledOnInverse,
	iconDisabledOnSurface: iconDisabledOnSurface,
	iconSubduedOnInverse: iconSubduedOnInverse,
	iconSubduedOnSurface: iconSubduedOnSurface,
	textOnInverse: textOnInverse,
	textOnSurface: textOnSurface,
	textDisabledOnInverse: textDisabledOnInverse,
	textDisabledOnSurface: textDisabledOnSurface,
	textSubduedOnInverse: textSubduedOnInverse,
	textSubduedOnSurface: textSubduedOnSurface,
	actionOnDark: actionOnDark,
	actionOnLight: actionOnLight,
	actionDisabledOnDark: actionDisabledOnDark,
	actionDisabledOnLight: actionDisabledOnLight,
	actionHoveredOnDark: actionHoveredOnDark,
	actionHoveredOnLight: actionHoveredOnLight,
	actionPressedOnDark: actionPressedOnDark,
	actionPressedOnLight: actionPressedOnLight,
	dividerOnDark: dividerOnDark,
	dividerOnLight: dividerOnLight,
	dividerDisabledOnDark: dividerDisabledOnDark,
	dividerDisabledOnLight: dividerDisabledOnLight,
	dividerSubduedOnDark: dividerSubduedOnDark,
	dividerSubduedOnLight: dividerSubduedOnLight,
	iconOnDark: iconOnDark,
	iconOnLight: iconOnLight,
	iconDisabledOnDark: iconDisabledOnDark,
	iconDisabledOnLight: iconDisabledOnLight,
	iconSubduedOnDark: iconSubduedOnDark,
	iconSubduedOnLight: iconSubduedOnLight,
	textOnDark: textOnDark,
	textOnLight: textOnLight,
	textDisabledOnDark: textDisabledOnDark,
	textDisabledOnLight: textDisabledOnLight,
	textSubduedOnDark: textSubduedOnDark,
	textSubduedOnLight: textSubduedOnLight,
	interactive: interactive,
	interactiveAction: interactiveAction,
	interactiveActionDisabled: interactiveActionDisabled,
	interactiveActionHovered: interactiveActionHovered,
	interactiveActionSubdued: interactiveActionSubdued,
	interactiveActionPressed: interactiveActionPressed,
	interactiveFocus: interactiveFocus,
	interactiveSelected: interactiveSelected,
	interactiveSelectedHovered: interactiveSelectedHovered,
	interactiveSelectedPressed: interactiveSelectedPressed,
	neutral: neutral,
	neutralActionDisabled: neutralActionDisabled,
	neutralAction: neutralAction,
	neutralActionHovered: neutralActionHovered,
	neutralActionPressed: neutralActionPressed,
	branded: branded,
	brandedAction: brandedAction,
	brandedActionDisabled: brandedActionDisabled,
	brandedActionHovered: brandedActionHovered,
	brandedActionPressed: brandedActionPressed,
	iconOnBranded: iconOnBranded,
	iconSubduedOnBranded: iconSubduedOnBranded,
	textOnBranded: textOnBranded,
	textSubduedOnBranded: textSubduedOnBranded,
	brandedSelected: brandedSelected,
	brandedSelectedHovered: brandedSelectedHovered,
	brandedSelectedPressed: brandedSelectedPressed,
	critical: critical,
	criticalDivider: criticalDivider,
	criticalDividerDisabled: criticalDividerDisabled,
	criticalIcon: criticalIcon,
	criticalSurface: criticalSurface,
	criticalSurfaceSubdued: criticalSurfaceSubdued,
	criticalSurfaceSubduedHovered: criticalSurfaceSubduedHovered,
	criticalSurfaceSubduedPressed: criticalSurfaceSubduedPressed,
	criticalText: criticalText,
	criticalActionDisabled: criticalActionDisabled,
	criticalAction: criticalAction,
	criticalActionHovered: criticalActionHovered,
	criticalActionSubdued: criticalActionSubdued,
	criticalActionPressed: criticalActionPressed,
	criticalLink: criticalLink,
	criticalLinkDisabled: criticalLinkDisabled,
	criticalLinkHovered: criticalLinkHovered,
	criticalLinkPressed: criticalLinkPressed,
	warning: warning,
	warningDivider: warningDivider,
	warningIcon: warningIcon,
	warningSurface: warningSurface,
	warningSurfaceSubdued: warningSurfaceSubdued,
	warningText: warningText,
	highlight: highlight,
	highlightDivider: highlightDivider,
	highlightIcon: highlightIcon,
	highlightSurface: highlightSurface,
	highlightSurfaceSubdued: highlightSurfaceSubdued,
	highlightText: highlightText,
	success: success,
	successDivider: successDivider,
	successIcon: successIcon,
	successSurface: successSurface,
	successSurfaceSubdued: successSurfaceSubdued,
	successText: successText
};

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 colors = Object.assign({
    surface: UNSTABLE_Color.Surface,
    onSurface: UNSTABLE_Color.OnSurface,
    interactive: UNSTABLE_Color.Interactive,
    neutral: UNSTABLE_Color.Neutral,
    branded: UNSTABLE_Color.Branded,
    critical: UNSTABLE_Color.Critical,
    warning: UNSTABLE_Color.Warning,
    highlight: UNSTABLE_Color.Highlight,
    success: UNSTABLE_Color.Success
  }, theme.UNSTABLE_colors);
  var surfaceColor = colorToHsla(colors.surface);
  var lightSurface = isLight(hslToRgb(surfaceColor));
  var colorAdjustments = {};
  Object.assign(colorAdjustments, colorAdjustmentsJson);
  var allColors = Object.entries(colorAdjustments).reduce(function (accumulator, _ref) {
    var _ref2 = _slicedToArray(_ref, 2),
        colorRole = _ref2[0],
        colorAdjustment = _ref2[1];

    if (colorAdjustment == null) return accumulator;
    var baseColor = colorToHsla(colors[colorAdjustment.baseColor]);
    var _colorAdjustment = colorAdjustment[lightSurface ? 'light' : 'dark'],
        _colorAdjustment$hue = _colorAdjustment.hue,
        hue = _colorAdjustment$hue === void 0 ? baseColor.hue : _colorAdjustment$hue,
        _colorAdjustment$satu = _colorAdjustment.saturation,
        saturation = _colorAdjustment$satu === void 0 ? baseColor.saturation : _colorAdjustment$satu,
        _colorAdjustment$ligh = _colorAdjustment.lightness,
        lightness = _colorAdjustment$ligh === void 0 ? baseColor.lightness : _colorAdjustment$ligh,
        _colorAdjustment$alph = _colorAdjustment.alpha,
        alpha = _colorAdjustment$alph === void 0 ? baseColor.alpha : _colorAdjustment$alph;
    return Object.assign({}, accumulator, {
      [colorRole]: hslToString({
        hue,
        saturation,
        lightness,
        alpha
      })
    });
  }, {});
  return customPropertyTransformer(Object.assign({}, allColors, overrides()));
}
/* eslint-enable babel/camelcase */

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

function customPropertyTransformer(properties) {
  return Object.entries(properties).reduce(function (transformed, _ref3) {
    var _ref4 = _slicedToArray(_ref3, 2),
        key = _ref4[0],
        value = _ref4[1];

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

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

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

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

// 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)