text: 'use strict';
  
  Object.defineProperty(exports, '__esModule', { value: true });
  
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
  
  var React = require('react');
  var React__default = _interopDefault(React);
  var DefaultThemeColors = _interopDefault(require('@shopify/polaris-tokens/dist-modern/theme/base.json'));
  var tokens = require('@shopify/polaris-tokens');
  var tokens__default = _interopDefault(tokens);
  var distModern = require('@shopify/polaris-tokens/dist-modern');
  var utils = require('@shopify/polaris-tokens/dist-modern/utils');
  var base = require('@shopify/polaris-tokens/dist-modern/configs/base');
  var debounce = _interopDefault(require('lodash/debounce'));
  var polarisIcons = require('@shopify/polaris-icons');
  var reactDom = require('react-dom');
  var isEqual = _interopDefault(require('lodash/isEqual'));
  var reactTransitionGroup = require('react-transition-group');
  
  if (typeof window !== 'undefined') {
    window.Polaris = window.Polaris || {};
    window.Polaris.VERSION = '5.13.0';
  }
  
  (function (Key) {
    Key[Key["Backspace"] = 8] = "Backspace";
    Key[Key["Tab"] = 9] = "Tab";
    Key[Key["Enter"] = 13] = "Enter";
    Key[Key["Shift"] = 16] = "Shift";
    Key[Key["Ctrl"] = 17] = "Ctrl";
    Key[Key["Alt"] = 18] = "Alt";
    Key[Key["Pause"] = 19] = "Pause";
    Key[Key["CapsLock"] = 20] = "CapsLock";
    Key[Key["Escape"] = 27] = "Escape";
    Key[Key["Space"] = 32] = "Space";
    Key[Key["PageUp"] = 33] = "PageUp";
    Key[Key["PageDown"] = 34] = "PageDown";
    Key[Key["End"] = 35] = "End";
    Key[Key["Home"] = 36] = "Home";
    Key[Key["LeftArrow"] = 37] = "LeftArrow";
    Key[Key["UpArrow"] = 38] = "UpArrow";
    Key[Key["RightArrow"] = 39] = "RightArrow";
    Key[Key["DownArrow"] = 40] = "DownArrow";
    Key[Key["Insert"] = 45] = "Insert";
    Key[Key["Delete"] = 46] = "Delete";
    Key[Key["Key0"] = 48] = "Key0";
    Key[Key["Key1"] = 49] = "Key1";
    Key[Key["Key2"] = 50] = "Key2";
    Key[Key["Key3"] = 51] = "Key3";
    Key[Key["Key4"] = 52] = "Key4";
    Key[Key["Key5"] = 53] = "Key5";
    Key[Key["Key6"] = 54] = "Key6";
    Key[Key["Key7"] = 55] = "Key7";
    Key[Key["Key8"] = 56] = "Key8";
    Key[Key["Key9"] = 57] = "Key9";
    Key[Key["KeyA"] = 65] = "KeyA";
    Key[Key["KeyB"] = 66] = "KeyB";
    Key[Key["KeyC"] = 67] = "KeyC";
    Key[Key["KeyD"] = 68] = "KeyD";
    Key[Key["KeyE"] = 69] = "KeyE";
    Key[Key["KeyF"] = 70] = "KeyF";
    Key[Key["KeyG"] = 71] = "KeyG";
    Key[Key["KeyH"] = 72] = "KeyH";
    Key[Key["KeyI"] = 73] = "KeyI";
    Key[Key["KeyJ"] = 74] = "KeyJ";
    Key[Key["KeyK"] = 75] = "KeyK";
    Key[Key["KeyL"] = 76] = "KeyL";
    Key[Key["KeyM"] = 77] = "KeyM";
    Key[Key["KeyN"] = 78] = "KeyN";
    Key[Key["KeyO"] = 79] = "KeyO";
    Key[Key["KeyP"] = 80] = "KeyP";
    Key[Key["KeyQ"] = 81] = "KeyQ";
    Key[Key["KeyR"] = 82] = "KeyR";
    Key[Key["KeyS"] = 83] = "KeyS";
    Key[Key["KeyT"] = 84] = "KeyT";
    Key[Key["KeyU"] = 85] = "KeyU";
    Key[Key["KeyV"] = 86] = "KeyV";
    Key[Key["KeyW"] = 87] = "KeyW";
    Key[Key["KeyX"] = 88] = "KeyX";
    Key[Key["KeyY"] = 89] = "KeyY";
    Key[Key["KeyZ"] = 90] = "KeyZ";
    Key[Key["LeftMeta"] = 91] = "LeftMeta";
    Key[Key["RightMeta"] = 92] = "RightMeta";
    Key[Key["Select"] = 93] = "Select";
    Key[Key["Numpad0"] = 96] = "Numpad0";
    Key[Key["Numpad1"] = 97] = "Numpad1";
    Key[Key["Numpad2"] = 98] = "Numpad2";
    Key[Key["Numpad3"] = 99] = "Numpad3";
    Key[Key["Numpad4"] = 100] = "Numpad4";
    Key[Key["Numpad5"] = 101] = "Numpad5";
    Key[Key["Numpad6"] = 102] = "Numpad6";
    Key[Key["Numpad7"] = 103] = "Numpad7";
    Key[Key["Numpad8"] = 104] = "Numpad8";
    Key[Key["Numpad9"] = 105] = "Numpad9";
    Key[Key["Multiply"] = 106] = "Multiply";
    Key[Key["Add"] = 107] = "Add";
    Key[Key["Subtract"] = 109] = "Subtract";
    Key[Key["Decimal"] = 110] = "Decimal";
    Key[Key["Divide"] = 111] = "Divide";
    Key[Key["F1"] = 112] = "F1";
    Key[Key["F2"] = 113] = "F2";
    Key[Key["F3"] = 114] = "F3";
    Key[Key["F4"] = 115] = "F4";
    Key[Key["F5"] = 116] = "F5";
    Key[Key["F6"] = 117] = "F6";
    Key[Key["F7"] = 118] = "F7";
    Key[Key["F8"] = 119] = "F8";
    Key[Key["F9"] = 120] = "F9";
    Key[Key["F10"] = 121] = "F10";
    Key[Key["F11"] = 122] = "F11";
    Key[Key["F12"] = 123] = "F12";
    Key[Key["NumLock"] = 144] = "NumLock";
    Key[Key["ScrollLock"] = 145] = "ScrollLock";
    Key[Key["Semicolon"] = 186] = "Semicolon";
    Key[Key["Equals"] = 187] = "Equals";
    Key[Key["Comma"] = 188] = "Comma";
    Key[Key["Dash"] = 189] = "Dash";
    Key[Key["Period"] = 190] = "Period";
    Key[Key["ForwardSlash"] = 191] = "ForwardSlash";
    Key[Key["GraveAccent"] = 192] = "GraveAccent";
    Key[Key["OpenBracket"] = 219] = "OpenBracket";
    Key[Key["BackSlash"] = 220] = "BackSlash";
    Key[Key["CloseBracket"] = 221] = "CloseBracket";
    Key[Key["SingleQuote"] = 222] = "SingleQuote";
  })(exports.Key || (exports.Key = {}));
  
  function _defineProperty(obj, key, value) {
    if (key in obj) {
      Object.defineProperty(obj, key, {
        value: value,
        enumerable: true,
        configurable: true,
        writable: true
      });
    } else {
      obj[key] = value;
    }
  
    return obj;
  }
  
  function ownKeys(object, enumerableOnly) {
    var keys = Object.keys(object);
  
    if (Object.getOwnPropertySymbols) {
      var symbols = Object.getOwnPropertySymbols(object);
      if (enumerableOnly) symbols = symbols.filter(function (sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
      keys.push.apply(keys, symbols);
    }
  
    return keys;
  }
  
  function _objectSpread2(target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i] != null ? arguments[i] : {};
  
      if (i % 2) {
        ownKeys(Object(source), true).forEach(function (key) {
          _defineProperty(target, key, source[key]);
        });
      } else if (Object.getOwnPropertyDescriptors) {
        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
      } else {
        ownKeys(Object(source)).forEach(function (key) {
          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
        });
      }
    }
  
    return target;
  }
  
  function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;
  
    for (i = 0; i < sourceKeys.length; i++) {
      key = sourceKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      target[key] = source[key];
    }
  
    return target;
  }
  
  function _objectWithoutProperties(source, excluded) {
    if (source == null) return {};
  
    var target = _objectWithoutPropertiesLoose(source, excluded);
  
    var key, i;
  
    if (Object.getOwnPropertySymbols) {
      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
  
      for (i = 0; i < sourceSymbolKeys.length; i++) {
        key = sourceSymbolKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
        target[key] = source[key];
      }
    }
  
    return target;
  }
  
  const ThemeContext = /*#__PURE__*/React.createContext(undefined);
  
  class MissingAppProviderError extends Error {
    constructor(message = '') {
      super(`${message ? `${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';
    }
  
  }
  
  function useTheme() {
    const theme = React.useContext(ThemeContext);
  
    if (!theme) {
      throw new MissingAppProviderError('No Theme was provided.');
    }
  
    return theme;
  }
  
  function clamp(number, min, max) {
    if (number < min) return min;
    if (number > max) return max;
    return number;
  }
  
  // Because everything is a float in JS, Number.toFixed sometimes rounds in the
  // "wrong" direction because of float imprecision. For instance:
  // `(1.005).toFixed(2)` is `1.00`, NOT `1.01` because 1.005 in floating point is
  // actually 1.004999995. By using exponentiation tricks here we can work around
  // this imprecision, so `roundNumberToDecimalPlaces(1.005)` returns the expected
  // value of `1.01`
  // See https://www.jacklmoore.com/notes/rounding-in-javascript/
  function roundNumberToDecimalPlaces(value, decimals) {
    const exponent = Number(`${value}e${decimals}`);
    const roundedExponent = Math.round(exponent);
    const numberWithDecimalPlaces = Number(`${roundedExponent}e-${decimals}`);
    return numberWithDecimalPlaces;
  }
  
  function rgbString(color) {
    const {
      red,
      green,
      blue
    } = color;
  
    if ('alpha' in color) {
      return `rgba(${red}, ${green}, ${blue}, ${color.alpha})`;
    } else {
      return `rgb(${red}, ${green}, ${blue})`;
    }
  }
  const rgbaString = rgbString;
  function rgbToHex({
    red,
    green,
    blue
  }) {
    return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}`;
  }
  
  function componentToHex(component) {
    const hex = component.toString(16);
    return hex.length === 1 ? `0${hex}` : hex;
  }
  
  function hsbToHex(color) {
    return rgbToHex(hsbToRgb(color));
  }
  
  function rgbFromHueAndChroma(hue, chroma) {
    const huePrime = hue / 60;
    const hueDelta = 1 - Math.abs(huePrime % 2 - 1);
    const intermediateValue = chroma * hueDelta;
    let red = 0;
    let green = 0;
    let 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
    };
  } // implements https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
  
  
  function hsbToRgb(color) {
    const {
      hue,
      saturation,
      brightness,
      alpha = 1
    } = color;
    const chroma = brightness * saturation;
    let {
      red,
      green,
      blue
    } = rgbFromHueAndChroma(hue, chroma);
    const 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
    };
  } // implements https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
  
  function hslToRgb(color) {
    const {
      hue,
      saturation,
      lightness,
      alpha = 1
    } = color;
    const chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
    let {
      red,
      green,
      blue
    } = rgbFromHueAndChroma(hue, chroma);
    const 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, type = 'b') {
    const {
      alpha = 1
    } = color;
    const red = color.red / 255;
    const green = color.green / 255;
    const blue = color.blue / 255;
    const largestComponent = Math.max(red, green, blue);
    const smallestComponent = Math.min(red, green, blue);
    const delta = largestComponent - smallestComponent;
    const lightness = (largestComponent + smallestComponent) / 2;
    let saturation = 0;
  
    if (largestComponent === 0) {
      saturation = 0;
    } else if (type === 'b') {
      saturation = delta / largestComponent;
    } else if (type === 'l') {
      const baseSaturation = lightness > 0.5 ? delta / (2 - largestComponent - smallestComponent) : delta / (largestComponent + smallestComponent);
      saturation = isNaN(baseSaturation) ? 0 : baseSaturation;
    }
  
    let 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;
    }
  
    const hue = huePercentage / 6 * 360;
    const clampedHue = clamp(hue, 0, 360);
    return {
      hue: clampedHue ? roundNumberToDecimalPlaces(clampedHue, 2) : 0,
      saturation: roundNumberToDecimalPlaces(clamp(saturation, 0, 1), 4),
      brightness: roundNumberToDecimalPlaces(clamp(largestComponent, 0, 1), 4),
      lightness: roundNumberToDecimalPlaces(lightness, 4),
      alpha: roundNumberToDecimalPlaces(alpha, 4)
    };
  }
  
  function rgbToHsb(color) {
    const {
      hue,
      saturation,
      brightness,
      alpha = 1
    } = rgbToHsbl(color, 'b');
    return {
      hue,
      saturation,
      brightness,
      alpha
    };
  }
  function rgbToHsl(color) {
    const {
      hue,
      saturation: rawSaturation,
      lightness: rawLightness,
      alpha = 1
    } = rgbToHsbl(color, 'l');
    const saturation = roundNumberToDecimalPlaces(rawSaturation * 100, 2);
    const lightness = roundNumberToDecimalPlaces(rawLightness * 100, 2);
    return {
      hue,
      saturation,
      lightness,
      alpha
    };
  }
  function hexToRgb(color) {
    if (color.length === 4) {
      const repeatHex = (hex1, hex2) => color.slice(hex1, hex2).repeat(2);
  
      const _red = parseInt(repeatHex(1, 2), 16);
  
      const _green = parseInt(repeatHex(2, 3), 16);
  
      const _blue = parseInt(repeatHex(3, 4), 16);
  
      return {
        red: _red,
        green: _green,
        blue: _blue
      };
    }
  
    const red = parseInt(color.slice(1, 3), 16);
    const green = parseInt(color.slice(3, 5), 16);
    const blue = parseInt(color.slice(5, 7), 16);
    return {
      red,
      green,
      blue
    };
  }
  
  function getColorType(color) {
    if (color.includes('#')) {
      return 'hex';
    } else if (color.includes('rgb')) {
      return 'rgb';
    } else if (color.includes('rgba')) {
      return 'rgba';
    } else if (color.includes('hsl')) {
      return 'hsl';
    } else if (color.includes('hsla')) {
      return '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 'default';
    }
  }
  
  function hslToString(hslColor) {
    if (typeof hslColor === 'string') {
      return hslColor;
    }
  
    const alpha = 'alpha' in hslColor ? hslColor.alpha : 1;
    const {
      hue,
      lightness,
      saturation
    } = hslColor;
    return `hsla(${roundNumberToDecimalPlaces(hue, 2)}, ${roundNumberToDecimalPlaces(saturation, 2)}%, ${roundNumberToDecimalPlaces(lightness, 2)}%, ${roundNumberToDecimalPlaces(alpha, 2)})`;
  }
  
  function rgbToObject(color) {
    // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
    const colorMatch = color.match(/\(([^)]+)\)/);
  
    if (!colorMatch) {
      return {
        red: 0,
        green: 0,
        blue: 0,
        alpha: 0
      };
    }
  
    const [red, green, blue, alpha] = colorMatch[1].split(',');
    const objColor = {
      red: parseInt(red, 10),
      green: parseInt(green, 10),
      blue: parseInt(blue, 10),
      alpha: parseInt(alpha, 10) || 1
    };
    return objColor;
  }
  
  function hexToHsla(color) {
    return rgbToHsl(hexToRgb(color));
  }
  
  function rbgStringToHsla(color) {
    return rgbToHsl(rgbToObject(color));
  }
  
  function hslToObject(color) {
    // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
    const colorMatch = color.match(/\(([^)]+)\)/);
  
    if (!colorMatch) {
      return {
        hue: 0,
        saturation: 0,
        lightness: 0,
        alpha: 0
      };
    }
  
    const [hue, saturation, lightness, alpha] = colorMatch[1].split(',');
    const objColor = {
      hue: roundNumberToDecimalPlaces(parseFloat(hue), 2),
      saturation: roundNumberToDecimalPlaces(parseFloat(saturation), 2),
      lightness: roundNumberToDecimalPlaces(parseFloat(lightness), 2),
      alpha: roundNumberToDecimalPlaces(parseFloat(alpha), 2) || 1
    };
    return objColor;
  }
  
  function colorToHsla(color) {
    const type = getColorType(color);
  
    switch (type) {
      case 'hex':
        return hexToHsla(color);
  
      case 'rgb':
      case 'rgba':
        return rbgStringToHsla(color);
  
      case 'hsl':
      case 'hsla':
        return hslToObject(color);
  
      case '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({
    red,
    green,
    blue
  }) {
    const 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) {
    const name = normalizeName(baseName);
    const propertyName = property ? `-${normalizeName(property)}` : '';
    const constructedSuffix = suffix ? `-${suffix}` : '';
    return `--${name}${propertyName}${constructedSuffix}`;
  }
  
  function lightenColor(color, lighten = 0) {
    if (typeof color === 'string') {
      return color;
    }
  
    const {
      lightness
    } = color;
    const nextLightness = lightness + lighten;
    return _objectSpread2(_objectSpread2({}, color), {}, {
      lightness: clamp(nextLightness, 0, 100)
    });
  }
  function saturateColor(color, saturate = 0) {
    if (typeof color === 'string') {
      return color;
    }
  
    const {
      saturation
    } = color;
    const nextSaturation = saturation + saturate;
    return _objectSpread2(_objectSpread2({}, color), {}, {
      saturation: nextSaturation
    });
  }
  function createLightColor(color, lightness, saturation) {
    if (typeof color === 'string') {
      return color;
    }
  
    const lightenedColor = lightenColor(color, lightness);
    const saturatedColor = saturateColor(lightenedColor, -saturation);
    return saturatedColor;
  }
  
  const needsVariantList = ['topBar'];
  
  function buildCustomPropertiesNoMemo(themeConfig, newDesignLanguage, tokens) {
    const {
      colors = {},
      colorScheme,
      config,
      frameOffset = 0
    } = themeConfig;
    const mergedConfig = utils.mergeConfigs(base.config, config || {});
    return newDesignLanguage ? customPropertyTransformer(_objectSpread2(_objectSpread2(_objectSpread2({}, distModern.colorFactory(colors, colorScheme, mergedConfig)), tokens), {}, {
      frameOffset: `${frameOffset}px`
    })) : _objectSpread2(_objectSpread2({}, buildLegacyColors(themeConfig)), customPropertyTransformer({
      frameOffset: `${frameOffset}px`
    }));
  }
  function buildThemeContext(themeConfig, cssCustomProperties) {
    const {
      logo,
      colors = {},
      colorScheme
    } = themeConfig;
  
    const newDesignLanguageColors = _objectWithoutProperties(colors, ["topBar"]);
  
    return {
      logo,
      cssCustomProperties: toString(cssCustomProperties),
      colors: newDesignLanguageColors,
      colorScheme
    };
  }
  function toString(obj) {
    if (obj) {
      return Object.entries(obj).map(pair => pair.join(':')).join(';');
    } else {
      return undefined;
    }
  }
  
  function customPropertyTransformer(properties) {
    return Object.entries(properties).reduce((transformed, [key, value]) => _objectSpread2(_objectSpread2({}, transformed), {}, {
      [toCssCustomPropertySyntax(key)]: value
    }), {});
  }
  
  function toCssCustomPropertySyntax(camelCase) {
    return `--p-${camelCase.replace(/([A-Z0-9])/g, '-$1').toLowerCase()}`;
  }
  
  function buildLegacyColors(theme) {
    let colorPairs;
    const colors = theme && theme.colors && theme.colors.topBar ? theme.colors.topBar : {
      background: '#00848e',
      backgroundLighter: '#1d9ba4',
      color: '#f9fafb'
    };
    const colorKey = 'topBar';
    const colorKeys = Object.keys(colors);
  
    if (colorKeys.length > 1) {
      colorPairs = colorKeys.map(key => {
        return [constructColorName(colorKey, key), colors[key]];
      });
    } else {
      colorPairs = parseColors([colorKey, colors]);
    }
  
    return colorPairs.reduce((state, [key, value]) => _objectSpread2(_objectSpread2({}, state), {}, {
      [key]: value
    }), {});
  }
  
  function needsVariant(name) {
    return needsVariantList.includes(name);
  }
  
  function lightenToString(color, lightness, saturation) {
    return hslToString(createLightColor(color, lightness, saturation));
  }
  
  function setTextColor(name, variant = 'dark') {
    if (variant === 'light') {
      return [name, tokens__default.colorInk];
    }
  
    return [name, tokens__default.colorWhite];
  }
  function setBorderColor(name, variant = 'dark') {
    if (variant === 'light') {
      return [name, tokens__default.colorInkLighter];
    }
  
    return [name, tokens__default.colorSkyDark];
  }
  function setTheme(color, baseName, key, variant) {
    const colorPairs = [];
  
    switch (variant) {
      case 'light':
        colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'light'));
        colorPairs.push(setBorderColor(constructColorName(baseName, null, 'border'), 'light'));
        colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 7, -10)]);
        break;
  
      case 'dark':
        colorPairs.push(setTextColor(constructColorName(baseName, null, 'color'), 'dark'));
        colorPairs.push(setBorderColor(constructColorName(baseName, null, 'border'), 'dark'));
        colorPairs.push([constructColorName(baseName, key, 'lighter'), lightenToString(color, 15, 15)]);
        break;
    }
  
    return colorPairs;
  }
  
  function parseColors([baseName, colors]) {
    const keys = Object.keys(colors);
    const colorPairs = [];
  
    for (const key of keys) {
      colorPairs.push([constructColorName(baseName, key), colors[key]]);
  
      if (needsVariant(baseName)) {
        const hslColor = colorToHsla(colors[key]);
  
        if (typeof hslColor === 'string') {
          return colorPairs;
        }
  
        const rgbColor = hslToRgb(hslColor);
  
        if (isLight(rgbColor)) {
          colorPairs.push(...setTheme(hslColor, baseName, key, 'light'));
        } else {
          colorPairs.push(...setTheme(hslColor, baseName, key, 'dark'));
        }
      }
    }
  
    return colorPairs;
  } // eslint-disable-next-line @typescript-eslint/ban-types
  
  
  function memoize(fnToMemoize) {
    const cache = new Map();
    return function (...args) {
      const key = JSON.stringify([fnToMemoize.name, args]);
  
      if (cache.get(key) === undefined) {
        cache.set(key, fnToMemoize(...args));
      }
  
      return cache.get(key);
    };
  }
  
  const buildCustomProperties = memoize(buildCustomPropertiesNoMemo);
  
  const Tokens = {
    // Border Radiuses
    borderRadiusBase: rem('4px'),
    borderRadiusWide: rem('8px'),
    borderRadiusFull: '50%',
    // Shadows
    cardShadow: '0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light)',
    popoverShadow: '-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light)',
    modalShadow: '0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light)',
    topBarShadow: '0 2px 2px -1px var(--p-shadow-from-direct-light)',
    buttonDropShadow: '0 1px 0 rgba(0, 0, 0, 0.05)',
    buttonInnerShadow: 'inset 0 -1px 0 rgba(0, 0, 0, 0.2)',
    buttonPressedInnerShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.15)',
    // Overrides
    overrideNone: 'none',
    overrideTransparent: 'transparent',
    overrideOne: '1',
    overrideVisible: 'visible',
    overrideZero: '0',
    overrideLoadingZIndex: '514',
    buttonFontWeight: '500',
    nonNullContent: "''",
    choiceSize: rem('20px'),
    iconSize: rem('10px'),
    choiceMargin: rem('1px'),
    controlBorderWidth: rem('2px'),
    bannerBorderDefault: buildBannerBorder('--p-border-neutral-subdued'),
    bannerBorderSuccess: buildBannerBorder('--p-border-success-subdued'),
    bannerBorderHighlight: buildBannerBorder('--p-border-highlight-subdued'),
    bannerBorderWarning: buildBannerBorder('--p-border-warning-subdued'),
    bannerBorderCritical: buildBannerBorder('--p-border-critical-subdued'),
    badgeMixBlendMode: 'luminosity',
    thinBorderSubdued: `${rem('1px')} solid var(--p-border-subdued)`,
    textFieldSpinnerOffset: rem('2px'),
    textFieldFocusRingOffset: rem('-4px'),
    textFieldFocusRingBorderRadius: rem('7px'),
    buttonGroupItemSpacing: rem('-1px'),
    duration100: '100ms',
    duration150: '150ms',
    easeIn: 'cubic-bezier(0.5, 0.1, 1, 1)',
    ease: 'cubic-bezier(0.4, 0.22, 0.28, 1)',
    rangeSliderThumbSizeBase: rem('16px'),
    rangeSliderThumbSizeActive: rem('24px'),
    rangeSliderThumbScale: '1.5',
    badgeFontWeight: '400'
  };
  
  function rem(px) {
    const baseFontSize = 10;
    return `${parseInt(px, 10) / baseFontSize}rem`;
  }
  
  function buildBannerBorder(cssVar) {
    return `inset 0 ${rem('1px')} 0 0 var(${cssVar}), inset 0 0 0 ${rem('1px')} var(${cssVar})`;
  }
  
  const FeaturesContext = /*#__PURE__*/React.createContext(undefined);
  
  function useFeatures() {
    const features = React.useContext(FeaturesContext);
  
    if (!features) {
      throw new Error('No Features were provided.');
    }
  
    return features;
  }
  
  function ThemeProvider({
    theme: themeConfig,
    alwaysRenderCustomProperties = false,
    children
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const parentContext = React.useContext(ThemeContext);
    const isParentThemeProvider = parentContext === undefined;
    const parentColorScheme = parentContext && parentContext.colorScheme && parentContext.colorScheme;
    const parentColors = parentContext && parentContext.colors && parentContext.colors;
    const [customProperties, theme] = React.useMemo(() => {
      const {
        colors,
        colorScheme
      } = themeConfig,
            rest = _objectWithoutProperties(themeConfig, ["colors", "colorScheme"]);
  
      const processedThemeConfig = _objectSpread2(_objectSpread2(_objectSpread2({}, rest), {
        colorScheme: getColorScheme(colorScheme, parentColorScheme)
      }), {}, {
        colors: _objectSpread2(_objectSpread2(_objectSpread2({}, isParentThemeProvider && DefaultThemeColors), parentColors != null && parentColors), colors)
      });
  
      const customProperties = buildCustomProperties(processedThemeConfig, newDesignLanguage, Tokens);
  
      const theme = _objectSpread2(_objectSpread2({}, buildThemeContext(processedThemeConfig, newDesignLanguage ? customProperties : undefined)), {}, {
        textColor: customProperties['--p-text'] || ''
      });
  
      return [customProperties, theme];
    }, [isParentThemeProvider, newDesignLanguage, parentColorScheme, parentColors, themeConfig]); // We want these values to be empty string instead of `undefined` when not set.
    // Otherwise, setting a style property to `undefined` does not remove it from the DOM.
  
    const backgroundColor = customProperties['--p-background'] || '';
    const color = customProperties['--p-text'] || '';
    React.useEffect(() => {
      if (isParentThemeProvider) {
        document.body.style.backgroundColor = backgroundColor;
        document.body.style.color = color;
      }
    }, [backgroundColor, color, isParentThemeProvider]);
    let style;
  
    if (isParentThemeProvider) {
      style = customProperties;
    } else if (alwaysRenderCustomProperties || !isParentThemeProvider && parentContext.cssCustomProperties !== toString(customProperties)) {
      style = _objectSpread2(_objectSpread2({}, customProperties), {
        color
      });
    } else {
      style = {
        color
      };
    }
  
    return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
      value: theme
    }, /*#__PURE__*/React__default.createElement("div", {
      style: style
    }, children));
  }
  
  function isInverseColorScheme(colorScheme) {
    return colorScheme === 'inverse';
  }
  
  function getColorScheme(colorScheme, parentColorScheme) {
    if (colorScheme == null) {
      return parentColorScheme || 'light';
    } else if (isInverseColorScheme(colorScheme)) {
      return parentColorScheme === 'dark' || parentColorScheme === undefined ? 'light' : 'dark';
    } else {
      return colorScheme;
    }
  }
  
  const MediaQueryContext = /*#__PURE__*/React.createContext(undefined);
  
  function useMediaQuery() {
    const mediaQuery = React.useContext(MediaQueryContext);
  
    if (!mediaQuery) {
      throw new Error('No mediaQuery was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.');
    }
  
    return mediaQuery;
  }
  
  const Breakpoints = {
    navigationBarCollapsed: '768px',
    stackedContent: '1043px'
  };
  const noWindowMatches = {
    media: '',
    addListener: noop,
    removeListener: noop,
    matches: false,
    onchange: noop,
    addEventListener: noop,
    removeEventListener: noop,
    dispatchEvent: _ => true
  };
  
  function noop() {}
  
  function navigationBarCollapsed() {
    return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.navigationBarCollapsed})`);
  }
  function stackedContent() {
    return typeof window === 'undefined' ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.stackedContent})`);
  }
  
  // see https://github.com/oliviertassinari/react-event-listener/
  class EventListener extends React.PureComponent {
    componentDidMount() {
      this.attachListener();
    }
  
    componentDidUpdate(_ref) {
      let detachProps = _objectWithoutProperties(_ref, ["passive"]);
  
      this.detachListener(detachProps);
      this.attachListener();
    }
  
    componentWillUnmount() {
      this.detachListener();
    }
  
    render() {
      return null;
    }
  
    attachListener() {
      const {
        event,
        handler,
        capture,
        passive
      } = this.props;
      window.addEventListener(event, handler, {
        capture,
        passive
      });
    }
  
    detachListener(prevProps) {
      const {
        event,
        handler,
        capture
      } = prevProps || this.props;
      window.removeEventListener(event, handler, capture);
    }
  
  }
  
  const MediaQueryProvider = function MediaQueryProvider({
    children
  }) {
    const [isNavigationCollapsed, setIsNavigationCollapsed] = React.useState(navigationBarCollapsed().matches); // eslint-disable-next-line react-hooks/exhaustive-deps
  
    const handleResize = React.useCallback(debounce(() => {
      if (isNavigationCollapsed !== navigationBarCollapsed().matches) {
        setIsNavigationCollapsed(!isNavigationCollapsed);
      }
    }, 40, {
      trailing: true,
      leading: true,
      maxWait: 40
    }), [isNavigationCollapsed]);
    React.useEffect(() => {
      setIsNavigationCollapsed(navigationBarCollapsed().matches);
    }, []);
    return /*#__PURE__*/React__default.createElement(MediaQueryContext.Provider, {
      value: {
        isNavigationCollapsed
      }
    }, /*#__PURE__*/React__default.createElement(EventListener, {
      event: "resize",
      handler: handleResize
    }), children);
  };
  
  const FocusManagerContext = /*#__PURE__*/React.createContext(undefined);
  
  const UniqueIdFactoryContext = /*#__PURE__*/React.createContext(undefined);
  
  /**
   * Returns a unique id that remains consistent across multiple re-renders of the
   * same hook
   * @param prefix Defines a prefix for the ID. You probably want to set this to
   *   the name of the component you're calling `useUniqueId` in.
   * @param overrideId Defines a fixed value to use instead of generating a unique
   *   ID. Useful for components that allow consumers to specify their own ID.
   */
  
  function useUniqueId(prefix = '', overrideId = '') {
    const idFactory = React.useContext(UniqueIdFactoryContext); // By using a ref to store the uniqueId for each invocation of the hook and
    // checking that it is not already populated we ensure that we don’t generate
    // a new ID on every re-render of a component.
  
    const uniqueIdRef = React.useRef(null);
  
    if (!idFactory) {
      throw new MissingAppProviderError('No UniqueIdFactory was provided.');
    } // If an override was specified, then use that instead of using a unique ID
    // Hooks can’t be called conditionally so this has to go after all use* calls
  
  
    if (overrideId) {
      return overrideId;
    } // If a unique id has not yet been generated, then get a new one
  
  
    if (!uniqueIdRef.current) {
      uniqueIdRef.current = idFactory.nextId(prefix);
    }
  
    return uniqueIdRef.current;
  }
  
  class UniqueIdFactory {
    constructor(idGeneratorFactory) {
      this.idGeneratorFactory = void 0;
      this.idGenerators = {};
      this.idGeneratorFactory = idGeneratorFactory;
    }
  
    nextId(prefix) {
      if (!this.idGenerators[prefix]) {
        this.idGenerators[prefix] = this.idGeneratorFactory(prefix);
      }
  
      return this.idGenerators[prefix]();
    }
  
  }
  function globalIdGeneratorFactory(prefix = '') {
    let index = 1;
    return () => `Polaris${prefix}${index++}`;
  }
  
  function useFocusManager({
    trapping
  }) {
    const focusManager = React.useContext(FocusManagerContext);
    const id = useUniqueId();
  
    if (!focusManager) {
      throw new MissingAppProviderError('No FocusManager was provided.');
    }
  
    const {
      trapFocusList,
      add: addFocusItem,
      remove: removeFocusItem
    } = focusManager;
    const canSafelyFocus = trapFocusList[0] === id;
    const value = React.useMemo(() => ({
      canSafelyFocus
    }), [canSafelyFocus]);
    React.useEffect(() => {
      if (!trapping) return;
      addFocusItem(id);
      return () => {
        removeFocusItem(id);
      };
    }, [addFocusItem, id, removeFocusItem, trapping]);
    return value;
  }
  
  function FocusManager({
    children
  }) {
    const [trapFocusList, setTrapFocusList] = React.useState([]);
    const add = React.useCallback(id => {
      setTrapFocusList(list => [...list, id]);
    }, []);
    const remove = React.useCallback(id => {
      let removed = true;
      setTrapFocusList(list => {
        const clone = [...list];
        const index = clone.indexOf(id);
  
        if (index === -1) {
          removed = false;
        } else {
          clone.splice(index, 1);
        }
  
        return clone;
      });
      return removed;
    }, []);
    const value = React.useMemo(() => ({
      trapFocusList,
      add,
      remove
    }), [add, trapFocusList, remove]);
    return /*#__PURE__*/React__default.createElement(FocusManagerContext.Provider, {
      value: value
    }, children);
  }
  
  const PortalsManagerContext = /*#__PURE__*/React.createContext(undefined);
  
  function usePortalsManager() {
    const portalsManager = React.useContext(PortalsManagerContext);
  
    if (!portalsManager) {
      throw new Error('No portals manager was provided. Your application must be wrapped in an <AppProvider> component. See https://polaris.shopify.com/components/structure/app-provider for implementation instructions.');
    }
  
    return portalsManager;
  }
  
  function PortalsContainerComponent(_props, ref) {
    return /*#__PURE__*/React__default.createElement("div", {
      id: "PolarisPortalsContainer",
      ref: ref
    });
  }
  
  const PortalsContainer = /*#__PURE__*/React.forwardRef(PortalsContainerComponent);
  
  function PortalsManager({
    children,
    container
  }) {
    const [portalContainerElement, setPortalContainerElement] = React.useState(null);
    const currentContainer = container != null ? container : portalContainerElement;
    const contextValue = React.useMemo(() => ({
      container: currentContainer
    }), [currentContainer]);
    return /*#__PURE__*/React__default.createElement(PortalsManagerContext.Provider, {
      value: contextValue
    }, children, container ? null : /*#__PURE__*/React__default.createElement(PortalsContainer, {
      ref: setPortalContainerElement
    }));
  }
  
  const I18nContext = /*#__PURE__*/React.createContext(undefined);
  
  function useI18n() {
    const i18n = React.useContext(I18nContext);
  
    if (!i18n) {
      throw new MissingAppProviderError('No i18n was provided.');
    }
  
    return i18n;
  }
  
  const OBJECT_NOTATION_MATCHER = /\[(.*?)\]|(\w+)/g;
  function get(obj, keypath, defaultValue) {
    if (obj == null) return undefined;
    const keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
    let acc = obj; // eslint-disable-next-line @typescript-eslint/prefer-for-of
  
    for (let i = 0; i < keys.length; i++) {
      const val = acc[keys[i]];
      if (val === undefined) return defaultValue;
      acc = val;
    }
  
    return acc;
  }
  
  function getKeypath(str) {
    const path = [];
    let result;
  
    while (result = OBJECT_NOTATION_MATCHER.exec(str)) {
      const [, first, second] = result;
      path.push(first || second);
    }
  
    return path;
  }
  
  // Unfortunately, this is how we have to type this at the moment.
  // There is currently a proposal to support variadic kinds.
  // https://github.com/Microsoft/TypeScript/issues/5453
  function merge(...objs) {
    let final = {};
  
    for (const obj of objs) {
      final = mergeRecursively(final, obj);
    }
  
    return final;
  }
  
  function mergeRecursively(inputObjA, objB) {
    const objA = Array.isArray(inputObjA) ? [...inputObjA] : _objectSpread2({}, inputObjA);
  
    for (const key in objB) {
      if (!Object.prototype.hasOwnProperty.call(objB, key)) {
        continue;
      } else if (isMergeableValue(objB[key]) && isMergeableValue(objA[key])) {
        objA[key] = mergeRecursively(objA[key], objB[key]);
      } else {
        objA[key] = objB[key];
      }
    }
  
    return objA;
  }
  
  function isMergeableValue(value) {
    return value !== null && typeof value === 'object';
  }
  
  const REPLACE_REGEX = /{([^}]*)}/g;
  class I18n {
    /**
     * @param translation A locale object or array of locale objects that overrides default translations. If specifying an array then your desired language dictionary should come first, followed by your fallback language dictionaries
     */
    constructor(translation) {
      this.translation = {};
      // slice the array to make a shallow copy of it, so we don't accidentally
      // modify the original translation array
      this.translation = Array.isArray(translation) ? merge(...translation.slice().reverse()) : translation;
    }
  
    translate(id, replacements) {
      const text = get(this.translation, id, '');
  
      if (!text) {
        return '';
      }
  
      if (replacements) {
        return text.replace(REPLACE_REGEX, match => {
          const replacement = match.substring(1, match.length - 1);
  
          if (replacements[replacement] === undefined) {
            const replacementData = JSON.stringify(replacements);
            throw new Error(`Error in translation for key '${id}'. No replacement found for key '${replacement}'. The following replacements were passed: '${replacementData}'`);
          } // This could be a string or a number, but JS doesn't mind which it gets
          // and can handle that cast internally. So let it, to save us calling
          // toString() on what's already a string in 90% of cases.
  
  
          return replacements[replacement];
        });
      }
  
      return text;
    }
  
    translationKeyExists(path) {
      return Boolean(get(this.translation, path));
    }
  
  }
  
  const ScrollLockManagerContext = /*#__PURE__*/React.createContext(undefined);
  
  function useScrollLockManager() {
    const scrollLockManager = React.useContext(ScrollLockManagerContext);
  
    if (!scrollLockManager) {
      throw new MissingAppProviderError('No ScrollLockManager was provided.');
    }
  
    return scrollLockManager;
  }
  
  const isServer = typeof window === 'undefined' || typeof document === 'undefined';
  
  const SCROLL_LOCKING_ATTRIBUTE = 'data-lock-scrolling';
  const SCROLL_LOCKING_WRAPPER_ATTRIBUTE = 'data-lock-scrolling-wrapper';
  let scrollPosition = 0;
  class ScrollLockManager {
    constructor() {
      this.scrollLocks = 0;
      this.locked = false;
    }
  
    registerScrollLock() {
      this.scrollLocks += 1;
      this.handleScrollLocking();
    }
  
    unregisterScrollLock() {
      this.scrollLocks -= 1;
      this.handleScrollLocking();
    }
  
    handleScrollLocking() {
      if (isServer) return;
      const {
        scrollLocks
      } = this;
      const {
        body
      } = document;
      const wrapper = body.firstElementChild;
  
      if (scrollLocks === 0) {
        body.removeAttribute(SCROLL_LOCKING_ATTRIBUTE);
  
        if (wrapper) {
          wrapper.removeAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE);
        }
  
        window.scroll(0, scrollPosition);
        this.locked = false;
      } else if (scrollLocks > 0 && !this.locked) {
        scrollPosition = window.pageYOffset;
        body.setAttribute(SCROLL_LOCKING_ATTRIBUTE, '');
  
        if (wrapper) {
          wrapper.setAttribute(SCROLL_LOCKING_WRAPPER_ATTRIBUTE, '');
          wrapper.scrollTop = scrollPosition;
        }
  
        this.locked = true;
      }
    }
  
    resetScrollPosition() {
      scrollPosition = 0;
    }
  
  }
  
  const StickyManagerContext = /*#__PURE__*/React.createContext(undefined);
  
  function useStickyManager() {
    const stickyManager = React.useContext(StickyManagerContext);
  
    if (!stickyManager) {
      throw new MissingAppProviderError('No StickyManager was provided.');
    }
  
    return stickyManager;
  }
  
  const scrollable = {
    props: {
      'data-polaris-scrollable': true
    },
    selector: '[data-polaris-scrollable]'
  };
  const overlay = {
    props: {
      'data-polaris-overlay': true
    },
    selector: '[data-polaris-overlay]'
  };
  const layer = {
    props: {
      'data-polaris-layer': true
    },
    selector: '[data-polaris-layer]'
  };
  const unstyled = {
    props: {
      'data-polaris-unstyled': true
    },
    selector: '[data-polaris-unstyled]'
  };
  const dataPolarisTopBar = {
    props: {
      'data-polaris-top-bar': true
    },
    selector: '[data-polaris-top-bar]'
  };
  const headerCell = {
    props: {
      'data-polaris-header-cell': true
    },
    selector: '[data-polaris-header-cell]'
  };
  const portal = {
    props: ['data-portal-id'],
    selector: '[data-portal-id]'
  };
  const DATA_ATTRIBUTE = {
    overlay,
    layer
  };
  
  class Rect {
    static get zero() {
      return new Rect();
    }
  
    constructor({
      top = 0,
      left = 0,
      width = 0,
      height = 0
    } = {}) {
      this.top = void 0;
      this.left = void 0;
      this.width = void 0;
      this.height = void 0;
      this.top = top;
      this.left = left;
      this.width = width;
      this.height = height;
    }
  
    get center() {
      return {
        x: this.left + this.width / 2,
        y: this.top + this.height / 2
      };
    }
  
  }
  function getRectForNode(node) {
    if (!(node instanceof Element)) {
      return new Rect({
        width: window.innerWidth,
        height: window.innerHeight
      });
    }
  
    const rect = node.getBoundingClientRect();
    return new Rect({
      top: rect.top,
      left: rect.left,
      width: rect.width,
      height: rect.height
    });
  }
  
  class StickyManager {
    constructor(container) {
      this.stickyItems = [];
      this.stuckItems = [];
      this.container = null;
      this.topBarOffset = 0;
      this.handleResize = debounce(() => {
        this.manageStickyItems();
      }, 40, {
        leading: true,
        trailing: true,
        maxWait: 40
      });
      this.handleScroll = debounce(() => {
        this.manageStickyItems();
      }, 40, {
        leading: true,
        trailing: true,
        maxWait: 40
      });
  
      if (container) {
        this.setContainer(container);
      }
    }
  
    registerStickyItem(stickyItem) {
      this.stickyItems.push(stickyItem);
    }
  
    unregisterStickyItem(nodeToRemove) {
      const nodeIndex = this.stickyItems.findIndex(({
        stickyNode
      }) => nodeToRemove === stickyNode);
      this.stickyItems.splice(nodeIndex, 1);
    }
  
    setContainer(el) {
      this.container = el;
  
      if (isDocument(el)) {
        this.setTopBarOffset(el);
      }
  
      this.container.addEventListener('scroll', this.handleScroll);
      window.addEventListener('resize', this.handleResize);
      this.manageStickyItems();
    }
  
    removeScrollListener() {
      if (this.container) {
        this.container.removeEventListener('scroll', this.handleScroll);
        window.removeEventListener('resize', this.handleResize);
      }
    }
  
    manageStickyItems() {
      if (this.stickyItems.length <= 0) {
        return;
      }
  
      const scrollTop = this.container ? scrollTopFor(this.container) : 0;
      const containerTop = getRectForNode(this.container).top + this.topBarOffset;
      this.stickyItems.forEach(stickyItem => {
        const {
          handlePositioning
        } = stickyItem;
        const {
          sticky,
          top,
          left,
          width
        } = this.evaluateStickyItem(stickyItem, scrollTop, containerTop);
        this.updateStuckItems(stickyItem, sticky);
        handlePositioning(sticky, top, left, width);
      });
    }
  
    evaluateStickyItem(stickyItem, scrollTop, containerTop) {
      const {
        stickyNode,
        placeHolderNode,
        boundingElement,
        offset,
        disableWhenStacked
      } = stickyItem;
  
      if (disableWhenStacked && stackedContent().matches) {
        return {
          sticky: false,
          top: 0,
          left: 0,
          width: 'auto'
        };
      }
  
      const stickyOffset = offset ? this.getOffset(stickyNode) + parseInt(tokens.spacingLoose, 10) : this.getOffset(stickyNode);
      const scrollPosition = scrollTop + stickyOffset;
      const placeHolderNodeCurrentTop = placeHolderNode.getBoundingClientRect().top - containerTop + scrollTop;
      const top = containerTop + stickyOffset;
      const width = placeHolderNode.getBoundingClientRect().width;
      const left = placeHolderNode.getBoundingClientRect().left;
      let sticky;
  
      if (boundingElement == null) {
        sticky = scrollPosition >= placeHolderNodeCurrentTop;
      } else {
        const stickyItemHeight = stickyNode.getBoundingClientRect().height;
        const stickyItemBottomPosition = boundingElement.getBoundingClientRect().bottom - stickyItemHeight + scrollTop - containerTop;
        sticky = scrollPosition >= placeHolderNodeCurrentTop && scrollPosition < stickyItemBottomPosition;
      }
  
      return {
        sticky,
        top,
        left,
        width
      };
    }
  
    updateStuckItems(item, sticky) {
      const {
        stickyNode
      } = item;
  
      if (sticky && !this.isNodeStuck(stickyNode)) {
        this.addStuckItem(item);
      } else if (!sticky && this.isNodeStuck(stickyNode)) {
        this.removeStuckItem(item);
      }
    }
  
    addStuckItem(stickyItem) {
      this.stuckItems.push(stickyItem);
    }
  
    removeStuckItem(stickyItem) {
      const {
        stickyNode: nodeToRemove
      } = stickyItem;
      const nodeIndex = this.stuckItems.findIndex(({
        stickyNode
      }) => nodeToRemove === stickyNode);
      this.stuckItems.splice(nodeIndex, 1);
    }
  
    getOffset(node) {
      if (this.stuckItems.length === 0) {
        return 0;
      }
  
      let offset = 0;
      let count = 0;
      const stuckNodesLength = this.stuckItems.length;
      const nodeRect = getRectForNode(node);
  
      while (count < stuckNodesLength) {
        const stuckNode = this.stuckItems[count].stickyNode;
  
        if (stuckNode !== node) {
          const stuckNodeRect = getRectForNode(stuckNode);
  
          if (!horizontallyOverlaps(nodeRect, stuckNodeRect)) {
            offset += getRectForNode(stuckNode).height;
          }
        } else {
          break;
        }
  
        count++;
      }
  
      return offset;
    }
  
    isNodeStuck(node) {
      const nodeFound = this.stuckItems.findIndex(({
        stickyNode
      }) => node === stickyNode);
      return nodeFound >= 0;
    }
  
    setTopBarOffset(container) {
      const topbarElement = container.querySelector(`:not(${scrollable.selector}) ${dataPolarisTopBar.selector}`);
      this.topBarOffset = topbarElement ? topbarElement.clientHeight : 0;
    }
  
  }
  
  function isDocument(node) {
    return node === document;
  }
  
  function scrollTopFor(container) {
    return isDocument(container) ? document.body.scrollTop || document.documentElement.scrollTop : container.scrollTop;
  }
  
  function horizontallyOverlaps(rect1, rect2) {
    const rect1Left = rect1.left;
    const rect1Right = rect1.left + rect1.width;
    const rect2Left = rect2.left;
    const rect2Right = rect2.left + rect2.width;
    return rect2Right < rect1Left || rect1Right < rect2Left;
  }
  
  const LinkContext = /*#__PURE__*/React.createContext(undefined);
  
  function useLink() {
    return React.useContext(LinkContext);
  }
  
  var AppProvider = {};
  
  class AppProvider$1 extends React.Component {
    constructor(props) {
      super(props);
      this.stickyManager = void 0;
      this.scrollLockManager = void 0;
      this.uniqueIdFactory = void 0;
      this.stickyManager = new StickyManager();
      this.scrollLockManager = new ScrollLockManager();
      this.uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
      const {
        i18n,
        linkComponent
      } = this.props; // eslint-disable-next-line react/state-in-constructor
  
      this.state = {
        link: linkComponent,
        intl: new I18n(i18n)
      };
    }
  
    componentDidMount() {
      if (document != null) {
        this.stickyManager.setContainer(document);
      }
    }
  
    componentDidUpdate({
      i18n: prevI18n,
      linkComponent: prevLinkComponent
    }) {
      const {
        i18n,
        linkComponent
      } = this.props;
  
      if (i18n === prevI18n && linkComponent === prevLinkComponent) {
        return;
      } // eslint-disable-next-line react/no-did-update-set-state
  
  
      this.setState({
        link: linkComponent,
        intl: new I18n(i18n)
      });
    }
  
    render() {
      const {
        theme = {},
        children
      } = this.props;
      const {
        intl,
        link
      } = this.state;
  
      const features = _objectSpread2({
        newDesignLanguage: false
      }, this.props.features);
  
      return /*#__PURE__*/React__default.createElement(FeaturesContext.Provider, {
        value: features
      }, /*#__PURE__*/React__default.createElement(I18nContext.Provider, {
        value: intl
      }, /*#__PURE__*/React__default.createElement(ScrollLockManagerContext.Provider, {
        value: this.scrollLockManager
      }, /*#__PURE__*/React__default.createElement(StickyManagerContext.Provider, {
        value: this.stickyManager
      }, /*#__PURE__*/React__default.createElement(UniqueIdFactoryContext.Provider, {
        value: this.uniqueIdFactory
      }, /*#__PURE__*/React__default.createElement(LinkContext.Provider, {
        value: link
      }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
        theme: theme
      }, /*#__PURE__*/React__default.createElement(MediaQueryProvider, null, /*#__PURE__*/React__default.createElement(PortalsManager, null, /*#__PURE__*/React__default.createElement(FocusManager, null, children))))))))));
    }
  
  }
  
  function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
  }
  function variationName(name, value) {
    return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
  }
  
  /**
   * useIsAfterInitialMount will trigger a re-render to provide
   * you with an updated value. Using this you enhance server-side
   * code that can only run on the client.
   * @returns MutableRefObject<T> - Returns a ref object with the
   * results from invoking initial value
   * @example
   * function ComponentExample({children}) {
   *  const isMounted = useIsAfterInitialMount();
   *  const content = isMounted ? children : null;
   *
   *  return <>{content}</>;
   * }
   */
  
  function useIsAfterInitialMount() {
    const [isAfterInitialMount, setIsAfterInitialMount] = React.useState(false);
    React.useEffect(() => {
      setIsAfterInitialMount(true);
    }, []);
    return isAfterInitialMount;
  }
  
  function Image(_ref) {
    let {
      sourceSet,
      source,
      crossOrigin
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["sourceSet", "source", "crossOrigin"]);
  
    const finalSourceSet = sourceSet ? sourceSet.map(({
      source: subSource,
      descriptor
    }) => `${subSource} ${descriptor}`).join(',') : null;
    return finalSourceSet ?
    /*#__PURE__*/
    // eslint-disable-next-line jsx-a11y/alt-text
    React__default.createElement("img", Object.assign({
      src: source,
      srcSet: finalSourceSet,
      crossOrigin: crossOrigin
    }, rest)) :
    /*#__PURE__*/
    // 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 Status;
  
  (function (Status) {
    Status["Pending"] = "PENDING";
    Status["Loaded"] = "LOADED";
    Status["Errored"] = "ERRORED";
  })(Status || (Status = {}));
  
  const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five'];
  
  var _ref = /*#__PURE__*/React__default.createElement("path", {
    fill: "currentColor",
    d: "M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
  });
  
  function Avatar({
    name,
    source,
    initials,
    customer,
    size = 'medium',
    accessibilityLabel
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const isAfterInitialMount = useIsAfterInitialMount();
  
    function styleClass(name) {
      const finalStyleClasses = newDesignLanguage ? STYLE_CLASSES : [...STYLE_CLASSES, 'six'];
      return name ? finalStyleClasses[name.charCodeAt(0) % finalStyleClasses.length] : finalStyleClasses[0];
    }
  
    const [status, setStatus] = React.useState(Status.Pending); // If the source changes, set the status back to pending
  
    React.useEffect(() => {
      setStatus(Status.Pending);
    }, [source]);
    const handleError = React.useCallback(() => {
      setStatus(Status.Errored);
    }, []);
    const handleLoad = React.useCallback(() => {
      setStatus(Status.Loaded);
    }, []);
    const hasImage = source && status !== Status.Errored;
    const nameString = name || initials;
    let label;
  
    if (accessibilityLabel) {
      label = accessibilityLabel;
    } else if (name) {
      label = name;
    } else if (initials) {
      const splitInitials = initials.split('').join(' ');
      label = i18n.translate('Polaris.Avatar.labelWithInitials', {
        initials: splitInitials
      });
    } else {
      label = i18n.translate('Polaris.Avatar.label');
    }
  
    const className = classNames(styles.Avatar, size && styles[variationName('size', size)], !customer && styles[variationName('style', styleClass(nameString))], (hasImage || initials && initials.length === 0) && status !== Status.Loaded && styles.hidden, hasImage && styles.hasImage);
    const imageMarkUp = source && isAfterInitialMount && status !== Status.Errored ? /*#__PURE__*/React__default.createElement(Image, {
      className: styles.Image,
      source: source,
      alt: "",
      role: "presentation",
      onLoad: handleLoad,
      onError: handleError
    }) : null; // Use `dominant-baseline: central` instead of `dy` when Edge supports it.
  
    const verticalOffset = '0.35em';
    const avatarBody = customer || !initials ? _ref : /*#__PURE__*/React__default.createElement("text", {
      x: "50%",
      y: "50%",
      dy: verticalOffset,
      fill: "currentColor",
      fontSize: "20",
      textAnchor: "middle"
    }, initials);
    const svgMarkup = !hasImage ? /*#__PURE__*/React__default.createElement("span", {
      className: styles.Initials
    }, /*#__PURE__*/React__default.createElement("svg", {
      className: styles.Svg,
      viewBox: "0 0 40 40"
    }, avatarBody)) : null;
    return /*#__PURE__*/React__default.createElement("span", {
      "aria-label": label,
      role: "img",
      className: className
    }, svgMarkup, imageMarkUp);
  }
  
  function isElementInViewport(element) {
    const {
      top,
      left,
      bottom,
      right
    } = element.getBoundingClientRect();
    return top >= 0 && right <= window.innerWidth && bottom <= window.innerHeight && left >= 0;
  }
  
  const FOCUSABLE_SELECTOR = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]';
  const KEYBOARD_FOCUSABLE_SELECTORS = 'a,frame,iframe,input:not([type=hidden]):not(:disabled),select:not(:disabled),textarea:not(:disabled),button:not(:disabled),*[tabindex]:not([tabindex="-1"])';
  const handleMouseUpByBlurring = ({
    currentTarget
  }) => currentTarget.blur();
  function nextFocusableNode(node, filter) {
    const allFocusableElements = [...document.querySelectorAll(FOCUSABLE_SELECTOR)];
    const sliceLocation = allFocusableElements.indexOf(node) + 1;
    const focusableElementsAfterNode = allFocusableElements.slice(sliceLocation);
  
    for (const focusableElement of focusableElementsAfterNode) {
      if (isElementInViewport(focusableElement) && (!filter || filter && filter(focusableElement))) {
        return focusableElement;
      }
    }
  
    return null;
  }
  function findFirstFocusableNode(element, onlyDescendants = true) {
    if (!onlyDescendants && matches(element, FOCUSABLE_SELECTOR)) {
      return element;
    }
  
    return element.querySelector(FOCUSABLE_SELECTOR);
  } // Popover needs to be able to find its activator even if it is disabled, which FOCUSABLE_SELECTOR doesn't support.
  
  function findFirstFocusableNodeIncludingDisabled(element) {
    const focusableSelector = `a,button,frame,iframe,input:not([type=hidden]),select,textarea,*[tabindex]`;
  
    if (matches(element, focusableSelector)) {
      return element;
    }
  
    return element.querySelector(focusableSelector);
  }
  function focusFirstFocusableNode(element, onlyDescendants = true) {
    var _findFirstFocusableNo;
  
    (_findFirstFocusableNo = findFirstFocusableNode(element, onlyDescendants)) == null ? void 0 : _findFirstFocusableNo.focus();
  }
  function focusNextFocusableNode(node, filter) {
    const nextFocusable = nextFocusableNode(node, filter);
  
    if (nextFocusable && nextFocusable instanceof HTMLElement) {
      nextFocusable.focus();
      return true;
    }
  
    return false;
  }
  function findFirstKeyboardFocusableNode(element, onlyDescendants = true) {
    if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {
      return element;
    }
  
    return element.querySelector(KEYBOARD_FOCUSABLE_SELECTORS);
  }
  function focusFirstKeyboardFocusableNode(element, onlyDescendants = true) {
    const firstFocusable = findFirstKeyboardFocusableNode(element, onlyDescendants);
  
    if (firstFocusable) {
      firstFocusable.focus();
      return true;
    }
  
    return false;
  }
  function findLastKeyboardFocusableNode(element, onlyDescendants = true) {
    if (!onlyDescendants && matches(element, KEYBOARD_FOCUSABLE_SELECTORS)) {
      return element;
    }
  
    const allFocusable = element.querySelectorAll(KEYBOARD_FOCUSABLE_SELECTORS);
    return allFocusable[allFocusable.length - 1];
  }
  function focusLastKeyboardFocusableNode(element, onlyDescendants = true) {
    const lastFocusable = findLastKeyboardFocusableNode(element, onlyDescendants);
  
    if (lastFocusable) {
      lastFocusable.focus();
      return true;
    }
  
    return false;
  }
  
  function matches(node, selector) {
    if (node.matches) {
      return node.matches(selector);
    }
  
    const matches = (node.ownerDocument || document).querySelectorAll(selector);
    let i = matches.length;
  
    while (--i >= 0 && matches.item(i) !== node) return i > -1;
  }
  
  const NEW_DESIGN_LANGUAGE_COLORS = ['base', 'subdued', 'critical', 'warning', 'highlight', 'success', 'primary'];
  function isNewDesignLanguageColor(color) {
    return NEW_DESIGN_LANGUAGE_COLORS.includes(color);
  }
  
  var styles$1 = {
    "Icon": "Polaris-Icon",
    "hasBackdrop": "Polaris-Icon--hasBackdrop",
    "isColored": "Polaris-Icon--isColored",
    "colorWhite": "Polaris-Icon--colorWhite",
    "newDesignLanguage": "Polaris-Icon--newDesignLanguage",
    "colorBlack": "Polaris-Icon--colorBlack",
    "colorSkyLighter": "Polaris-Icon--colorSkyLighter",
    "colorSkyLight": "Polaris-Icon--colorSkyLight",
    "colorSky": "Polaris-Icon--colorSky",
    "colorSkyDark": "Polaris-Icon--colorSkyDark",
    "colorInkLightest": "Polaris-Icon--colorInkLightest",
    "colorInkLighter": "Polaris-Icon--colorInkLighter",
    "colorInkLight": "Polaris-Icon--colorInkLight",
    "colorInk": "Polaris-Icon--colorInk",
    "colorBlueLighter": "Polaris-Icon--colorBlueLighter",
    "colorBlueLight": "Polaris-Icon--colorBlueLight",
    "colorBlue": "Polaris-Icon--colorBlue",
    "colorBlueDark": "Polaris-Icon--colorBlueDark",
    "colorBlueDarker": "Polaris-Icon--colorBlueDarker",
    "colorIndigoLighter": "Polaris-Icon--colorIndigoLighter",
    "colorIndigoLight": "Polaris-Icon--colorIndigoLight",
    "colorIndigo": "Polaris-Icon--colorIndigo",
    "colorIndigoDark": "Polaris-Icon--colorIndigoDark",
    "colorIndigoDarker": "Polaris-Icon--colorIndigoDarker",
    "colorTealLighter": "Polaris-Icon--colorTealLighter",
    "colorTealLight": "Polaris-Icon--colorTealLight",
    "colorTeal": "Polaris-Icon--colorTeal",
    "colorTealDark": "Polaris-Icon--colorTealDark",
    "colorTealDarker": "Polaris-Icon--colorTealDarker",
    "colorGreenLighter": "Polaris-Icon--colorGreenLighter",
    "colorGreen": "Polaris-Icon--colorGreen",
    "colorGreenDark": "Polaris-Icon--colorGreenDark",
    "colorYellowLighter": "Polaris-Icon--colorYellowLighter",
    "colorYellow": "Polaris-Icon--colorYellow",
    "colorYellowDark": "Polaris-Icon--colorYellowDark",
    "colorOrange": "Polaris-Icon--colorOrange",
    "colorOrangeDark": "Polaris-Icon--colorOrangeDark",
    "colorRedLighter": "Polaris-Icon--colorRedLighter",
    "colorRed": "Polaris-Icon--colorRed",
    "colorRedDark": "Polaris-Icon--colorRedDark",
    "colorPurple": "Polaris-Icon--colorPurple",
    "colorBase": "Polaris-Icon--colorBase",
    "colorSubdued": "Polaris-Icon--colorSubdued",
    "colorCritical": "Polaris-Icon--colorCritical",
    "colorWarning": "Polaris-Icon--colorWarning",
    "colorHighlight": "Polaris-Icon--colorHighlight",
    "colorSuccess": "Polaris-Icon--colorSuccess",
    "colorPrimary": "Polaris-Icon--colorPrimary",
    "Svg": "Polaris-Icon__Svg",
    "Img": "Polaris-Icon__Img",
    "Placeholder": "Polaris-Icon__Placeholder"
  };
  
  const COLORS_WITH_BACKDROPS = ['blueDark', 'teal', 'tealDark', 'greenDark', 'redDark', 'yellowDark', 'ink', 'inkLighter']; // This is needed for the polaris
  // styleguide to generate the props explorer
  
  function Icon({
    source,
    color,
    backdrop,
    accessibilityLabel
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    let sourceType;
  
    if (typeof source === 'function') {
      sourceType = 'function';
    } else if (source === 'placeholder') {
      sourceType = 'placeholder';
    } else {
      sourceType = 'external';
    }
  
    if (color && backdrop && !COLORS_WITH_BACKDROPS.includes(color)) {
      // eslint-disable-next-line no-console
      console.warn(i18n.translate('Polaris.Icon.backdropWarning', {
        color,
        colorsWithBackDrops: COLORS_WITH_BACKDROPS.join(', ')
      }));
    }
  
    if (color && !newDesignLanguage && isNewDesignLanguageColor(color)) {
      // eslint-disable-next-line no-console
      console.warn('You have selected a color meant to be used in the new design language but new design language is not enabled.');
    }
  
    if (color && sourceType === 'external' && newDesignLanguage === true && isNewDesignLanguageColor(color)) {
      // eslint-disable-next-line no-console
      console.warn('Recoloring external SVGs is not supported with colors in the new design language. Set the intended color on your SVG instead.');
    }
  
    const className = classNames(styles$1.Icon, color && styles$1[variationName('color', color)], color && color !== 'white' && styles$1.isColored, backdrop && styles$1.hasBackdrop, newDesignLanguage && styles$1.newDesignLanguage);
    const SourceComponent = source;
    const contentMarkup = {
      function: /*#__PURE__*/React__default.createElement(SourceComponent, {
        className: styles$1.Svg,
        focusable: "false",
        "aria-hidden": "true"
      }),
      placeholder: /*#__PURE__*/React__default.createElement("div", {
        className: styles$1.Placeholder
      }),
      external: /*#__PURE__*/React__default.createElement("img", {
        className: styles$1.Img,
        src: `data:image/svg+xml;utf8,${source}`,
        alt: "",
        "aria-hidden": "true"
      })
    };
    return /*#__PURE__*/React__default.createElement("span", {
      className: className,
      "aria-label": accessibilityLabel
    }, contentMarkup[sourceType]);
  }
  
  var styles$2 = {
    "VisuallyHidden": "Polaris-VisuallyHidden"
  };
  
  function VisuallyHidden({
    children
  }) {
    return /*#__PURE__*/React__default.createElement("span", {
      className: styles$2.VisuallyHidden
    }, children);
  }
  
  var styles$3 = {
    "Spinner": "Polaris-Spinner",
    "sizeSmall": "Polaris-Spinner--sizeSmall",
    "sizeLarge": "Polaris-Spinner--sizeLarge",
    "colorWhite": "Polaris-Spinner--colorWhite",
    "loading": "Polaris-Spinner--loading",
    "colorTeal": "Polaris-Spinner--colorTeal",
    "colorHighlight": "Polaris-Spinner--colorHighlight",
    "colorInkLightest": "Polaris-Spinner--colorInkLightest"
  };
  
  const COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest', 'highlight'];
  
  var _ref$1 = /*#__PURE__*/React__default.createElement("svg", {
    viewBox: "0 0 44 44",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/React__default.createElement("path", {
    d: "M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z"
  }));
  
  var _ref2 = /*#__PURE__*/React__default.createElement("svg", {
    viewBox: "0 0 20 20",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/React__default.createElement("path", {
    d: "M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
  }));
  
  function Spinner({
    size = 'large',
    color = 'teal',
    accessibilityLabel,
    hasFocusableParent
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const i18n = useI18n();
    const isAfterInitialMount = useIsAfterInitialMount();
  
    if (size === 'large' && !COLORS_FOR_LARGE_SPINNER.includes(color)) {
      if (process.env.NODE_ENV === 'development') {
        // eslint-disable-next-line no-console
        console.warn(i18n.translate('Polaris.Spinner.warningMessage', {
          color,
          size,
          colors: COLORS_FOR_LARGE_SPINNER.join(', ')
        }));
      } // eslint-disable-next-line no-param-reassign
  
  
      size = 'small';
    }
  
    const className = classNames(styles$3.Spinner, color && styles$3[variationName('color', color)], size && styles$3[variationName('size', size)], newDesignLanguage && styles$3.newDesignLanguage);
    const spinnerSVGMarkup = size === 'large' ? _ref$1 : _ref2;
  
    const spanAttributes = _objectSpread2({}, !hasFocusableParent && {
      role: 'status'
    });
  
    const accessibilityLabelMarkup = (isAfterInitialMount || !hasFocusableParent) && /*#__PURE__*/React__default.createElement(VisuallyHidden, null, accessibilityLabel);
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
      className: className
    }, spinnerSVGMarkup), /*#__PURE__*/React__default.createElement("span", spanAttributes, accessibilityLabelMarkup));
  }
  
  /**
   * Returns a MutatableRefObject containing a boolean value that
   * represents a components mounted status.
   * @returns MutableRefObject<boolean> The mounted status
   */
  
  function useIsMountedRef() {
    const isMounted = React.useRef(false);
    React.useEffect(() => {
      isMounted.current = true;
      return () => {
        isMounted.current = false;
      };
    }, []);
    return isMounted;
  }
  
  function Portal({
    children,
    idPrefix = '',
    onPortalCreated = noop$1
  }) {
    const isMounted = useIsMountedRef();
    const {
      container
    } = usePortalsManager();
    const uniqueId = useUniqueId('portal');
    const portalId = idPrefix !== '' ? `${idPrefix}-${uniqueId}` : uniqueId;
    React.useEffect(() => {
      if (isMounted) {
        onPortalCreated();
      }
    }, [onPortalCreated, isMounted]);
    return container ? /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default.createElement("div", {
      "data-portal-id": portalId
    }, children), container) : null;
  }
  
  function noop$1() {}
  
  // `Component`. If `props` is passed, those will be added as props on the
  // wrapped component. If `element` is null, the component is not wrapped.
  
  function wrapWithComponent(element, Component, props) {
    if (element == null) {
      return null;
    }
  
    return isElementOfType(element, Component) ? element : /*#__PURE__*/React__default.createElement(Component, props, element);
  } // In development, we compare based on the name of the function because
  // React Hot Loader proxies React components in order to make updates. In
  // production we can simply compare the components for equality.
  
  const isComponent = process.env.NODE_ENV === 'development' ? hotReloadComponentCheck : (AComponent, AnotherComponent) => AComponent === AnotherComponent; // Checks whether `element` is a React element of type `Component` (or one of
  // the passed components, if `Component` is an array of React components).
  
  function isElementOfType(element, Component) {
    var _element$props;
  
    if (element == null || ! /*#__PURE__*/React.isValidElement(element) || typeof element.type === 'string') {
      return false;
    }
  
    const {
      type: defaultType
    } = element; // Type override allows components to bypass default wrapping behavior. Ex: Stack, ResourceList...
    // See https://github.com/Shopify/app-extension-libs/issues/996#issuecomment-710437088
  
    const overrideType = (_element$props = element.props) == null ? void 0 : _element$props.__type__;
    const type = overrideType || defaultType;
    const Components = Array.isArray(Component) ? Component : [Component];
    return Components.some(AComponent => typeof type !== 'string' && isComponent(AComponent, type));
  } // Returns all children that are valid elements as an array. Can optionally be
  // filtered by passing `predicate`.
  
  function elementChildren(children, predicate = () => true) {
    return React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && predicate(child));
  }
  function ConditionalWrapper({
    condition,
    wrapper,
    children
  }) {
    return condition ? wrapper(children) : children;
  }
  function ConditionalRender({
    condition,
    children
  }) {
    return condition ? children : null;
  }
  
  function hotReloadComponentCheck(AComponent, AnotherComponent) {
    const componentName = AComponent.name;
    const anotherComponentName = AnotherComponent.displayName;
    return AComponent === AnotherComponent || Boolean(componentName) && componentName === anotherComponentName;
  }
  
  const ScrollableContext = /*#__PURE__*/React.createContext(undefined);
  
  function ScrollTo() {
    const anchorNode = React.useRef(null);
    const scrollToPosition = React.useContext(ScrollableContext);
    React.useEffect(() => {
      if (!scrollToPosition || !anchorNode.current) {
        return;
      }
  
      scrollToPosition(anchorNode.current.offsetTop);
    }, [scrollToPosition]);
    const id = useUniqueId(`ScrollTo`); // eslint-disable-next-line jsx-a11y/anchor-is-valid
  
    return /*#__PURE__*/React__default.createElement("a", {
      id: id,
      ref: anchorNode
    });
  }
  
  var styles$4 = {
    "Scrollable": "Polaris-Scrollable",
    "horizontal": "Polaris-Scrollable--horizontal",
    "vertical": "Polaris-Scrollable--vertical",
    "verticalHasScrolling": "Polaris-Scrollable--verticalHasScrolling",
    "hasTopShadow": "Polaris-Scrollable--hasTopShadow",
    "hasBottomShadow": "Polaris-Scrollable--hasBottomShadow"
  };
  
  const MAX_SCROLL_DISTANCE = 100;
  const DELTA_THRESHOLD = 0.2;
  const DELTA_PERCENTAGE = 0.2;
  const EVENTS_TO_LOCK = ['scroll', 'touchmove', 'wheel'];
  const PREFERS_REDUCED_MOTION = prefersReducedMotion();
  class Scrollable extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        topShadow: false,
        bottomShadow: false,
        scrollPosition: 0,
        canScroll: false
      };
      this.stickyManager = new StickyManager();
      this.scrollArea = null;
      this.handleResize = debounce(() => {
        this.handleScroll();
      }, 50, {
        trailing: true
      });
  
      this.setScrollArea = scrollArea => {
        this.scrollArea = scrollArea;
      };
  
      this.handleScroll = () => {
        const {
          scrollArea
        } = this;
        const {
          shadow,
          onScrolledToBottom
        } = this.props;
  
        if (scrollArea == null) {
          return;
        }
  
        const {
          scrollTop,
          clientHeight,
          scrollHeight
        } = scrollArea;
        const shouldBottomShadow = Boolean(shadow && !(scrollTop + clientHeight >= scrollHeight));
        const shouldTopShadow = Boolean(shadow && scrollTop > 0);
        const canScroll = scrollHeight > clientHeight;
        const hasScrolledToBottom = scrollHeight - scrollTop === clientHeight;
  
        if (canScroll && hasScrolledToBottom && onScrolledToBottom) {
          onScrolledToBottom();
        }
  
        this.setState({
          topShadow: shouldTopShadow,
          bottomShadow: shouldBottomShadow,
          scrollPosition: scrollTop,
          canScroll
        });
      };
  
      this.scrollHint = () => {
        const {
          scrollArea
        } = this;
  
        if (scrollArea == null) {
          return;
        }
  
        const {
          clientHeight,
          scrollHeight
        } = scrollArea;
  
        if (PREFERS_REDUCED_MOTION || this.state.scrollPosition > 0 || scrollHeight <= clientHeight) {
          return;
        }
  
        const scrollDistance = scrollHeight - clientHeight;
        this.toggleLock();
        this.setState({
          scrollPosition: scrollDistance > MAX_SCROLL_DISTANCE ? MAX_SCROLL_DISTANCE : scrollDistance
        }, () => {
          window.requestAnimationFrame(this.scrollStep);
        });
      };
  
      this.scrollStep = () => {
        this.setState(({
          scrollPosition
        }) => {
          const delta = scrollPosition * DELTA_PERCENTAGE;
          return {
            scrollPosition: delta < DELTA_THRESHOLD ? 0 : scrollPosition - delta
          };
        }, () => {
          if (this.state.scrollPosition > 0) {
            window.requestAnimationFrame(this.scrollStep);
          } else {
            this.toggleLock(false);
          }
        });
      };
  
      this.scrollToPosition = scrollY => {
        this.setState({
          scrollPosition: scrollY
        });
      };
    }
  
    static forNode(node) {
      const closestElement = node.closest(scrollable.selector);
      return closestElement instanceof HTMLElement ? closestElement : document;
    }
  
    componentDidMount() {
      if (this.scrollArea == null) {
        return;
      }
  
      this.stickyManager.setContainer(this.scrollArea);
      this.scrollArea.addEventListener('scroll', () => {
        window.requestAnimationFrame(this.handleScroll);
      });
      window.addEventListener('resize', this.handleResize);
      window.requestAnimationFrame(() => {
        this.handleScroll();
  
        if (this.props.hint) {
          this.scrollHint();
        }
      });
    }
  
    componentWillUnmount() {
      if (this.scrollArea == null) {
        return;
      }
  
      this.scrollArea.removeEventListener('scroll', this.handleScroll);
      window.removeEventListener('resize', this.handleResize);
      this.stickyManager.removeScrollListener();
    }
  
    componentDidUpdate() {
      const {
        scrollPosition
      } = this.state;
  
      if (scrollPosition && this.scrollArea && scrollPosition > 0) {
        this.scrollArea.scrollTop = scrollPosition;
      }
    }
  
    render() {
      const {
        topShadow,
        bottomShadow,
        canScroll
      } = this.state;
  
      const _this$props = this.props,
            {
        children,
        className,
        horizontal,
        vertical = true,
        shadow,
        hint,
        onScrolledToBottom
      } = _this$props,
            rest = _objectWithoutProperties(_this$props, ["children", "className", "horizontal", "vertical", "shadow", "hint", "onScrolledToBottom"]);
  
      const finalClassName = classNames(className, styles$4.Scrollable, vertical && styles$4.vertical, horizontal && styles$4.horizontal, topShadow && styles$4.hasTopShadow, bottomShadow && styles$4.hasBottomShadow, vertical && canScroll && styles$4.verticalHasScrolling);
      return /*#__PURE__*/React__default.createElement(ScrollableContext.Provider, {
        value: this.scrollToPosition
      }, /*#__PURE__*/React__default.createElement(StickyManagerContext.Provider, {
        value: this.stickyManager
      }, /*#__PURE__*/React__default.createElement("div", Object.assign({
        className: finalClassName
      }, scrollable.props, rest, {
        ref: this.setScrollArea // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
        ,
        tabIndex: 0
      }), children)));
    }
  
    toggleLock(shouldLock = true) {
      const {
        scrollArea
      } = this;
  
      if (scrollArea == null) {
        return;
      }
  
      EVENTS_TO_LOCK.forEach(eventName => {
        if (shouldLock) {
          scrollArea.addEventListener(eventName, prevent);
        } else {
          scrollArea.removeEventListener(eventName, prevent);
        }
      });
    }
  
  }
  Scrollable.ScrollTo = ScrollTo;
  
  function prevent(evt) {
    evt.preventDefault();
  }
  
  function prefersReducedMotion() {
    try {
      return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    } catch (err) {
      return false;
    }
  }
  
  var styles$5 = {
    "Popover": "Polaris-Popover",
    "PopoverOverlay": "Polaris-Popover__PopoverOverlay",
    "PopoverOverlay-entering": "Polaris-Popover__PopoverOverlay--entering",
    "PopoverOverlay-open": "Polaris-Popover__PopoverOverlay--open",
    "PopoverOverlay-exiting": "Polaris-Popover__PopoverOverlay--exiting",
    "measuring": "Polaris-Popover--measuring",
    "fullWidth": "Polaris-Popover--fullWidth",
    "Content": "Polaris-Popover__Content",
    "positionedAbove": "Polaris-Popover--positionedAbove",
    "Wrapper": "Polaris-Popover__Wrapper",
    "Content-fullHeight": "Polaris-Popover__Content--fullHeight",
    "Content-fluidContent": "Polaris-Popover__Content--fluidContent",
    "Pane": "Polaris-Popover__Pane",
    "Pane-fixed": "Polaris-Popover__Pane--fixed",
    "Section": "Polaris-Popover__Section",
    "FocusTracker": "Polaris-Popover__FocusTracker",
    "PopoverOverlay-hideOnPrint": "Polaris-Popover__PopoverOverlay--hideOnPrint"
  };
  
  function Section({
    children
  }) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$5.Section
    }, children);
  }
  
  function Pane({
    fixed,
    sectioned,
    children,
    onScrolledToBottom
  }) {
    const className = classNames(styles$5.Pane, fixed && styles$5['Pane-fixed']);
    const content = sectioned ? wrapWithComponent(children, Section, {}) : children;
    return fixed ? /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, content) : /*#__PURE__*/React__default.createElement(Scrollable, {
      hint: true,
      shadow: true,
      className: className,
      onScrolledToBottom: onScrolledToBottom
    }, content);
  }
  
  function KeypressListener({
    keyCode,
    handler,
    keyEvent = 'keyup'
  }) {
    const handleKeyEvent = event => {
      if (event.keyCode === keyCode) {
        handler(event);
      }
    };
  
    React.useEffect(() => {
      document.addEventListener(keyEvent, handleKeyEvent);
      return () => {
        document.removeEventListener(keyEvent, handleKeyEvent);
      };
    });
    return null;
  }
  
  function calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed) {
    const activatorTop = activatorRect.top;
    const activatorBottom = activatorTop + activatorRect.height;
    const spaceAbove = activatorRect.top;
    const spaceBelow = containerRect.height - activatorRect.top - activatorRect.height;
    const desiredHeight = overlayRect.height;
    const verticalMargins = overlayMargins.activator + overlayMargins.container;
    const minimumSpaceToScroll = overlayMargins.container;
    const distanceToTopScroll = activatorRect.top - Math.max(scrollableContainerRect.top, 0);
    const distanceToBottomScroll = containerRect.top + Math.min(containerRect.height, scrollableContainerRect.top + scrollableContainerRect.height) - (activatorRect.top + activatorRect.height);
    const enoughSpaceFromTopScroll = distanceToTopScroll >= minimumSpaceToScroll;
    const enoughSpaceFromBottomScroll = distanceToBottomScroll >= minimumSpaceToScroll;
    const heightIfBelow = Math.min(spaceBelow, desiredHeight);
    const heightIfAbove = Math.min(spaceAbove, desiredHeight);
    const containerRectTop = fixed ? 0 : containerRect.top;
    const positionIfAbove = {
      height: heightIfAbove - verticalMargins,
      top: activatorTop + containerRectTop - heightIfAbove,
      positioning: 'above'
    };
    const positionIfBelow = {
      height: heightIfBelow - verticalMargins,
      top: activatorBottom + containerRectTop,
      positioning: 'below'
    };
  
    if (preferredPosition === 'above') {
      return (enoughSpaceFromTopScroll || distanceToTopScroll >= distanceToBottomScroll && !enoughSpaceFromBottomScroll) && (spaceAbove > desiredHeight || spaceAbove > spaceBelow) ? positionIfAbove : positionIfBelow;
    }
  
    if (preferredPosition === 'below') {
      return (enoughSpaceFromBottomScroll || distanceToBottomScroll >= distanceToTopScroll && !enoughSpaceFromTopScroll) && (spaceBelow > desiredHeight || spaceBelow > spaceAbove) ? positionIfBelow : positionIfAbove;
    }
  
    if (enoughSpaceFromTopScroll && enoughSpaceFromBottomScroll) {
      return spaceAbove > spaceBelow ? positionIfAbove : positionIfBelow;
    }
  
    return distanceToTopScroll > minimumSpaceToScroll ? positionIfAbove : positionIfBelow;
  }
  function calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment) {
    const maximum = containerRect.width - overlayRect.width;
  
    if (preferredAlignment === 'left') {
      return Math.min(maximum, Math.max(0, activatorRect.left - overlayMargins.horizontal));
    } else if (preferredAlignment === 'right') {
      const activatorRight = containerRect.width - (activatorRect.left + activatorRect.width);
      return Math.min(maximum, Math.max(0, activatorRight - overlayMargins.horizontal));
    }
  
    return Math.min(maximum, Math.max(0, activatorRect.center.x - overlayRect.width / 2));
  }
  function rectIsOutsideOfRect(inner, outer) {
    const {
      center
    } = inner;
    return center.y < outer.top || center.y > outer.top + outer.height;
  }
  function intersectionWithViewport(rect, viewport = windowRect()) {
    const top = Math.max(rect.top, 0);
    const left = Math.max(rect.left, 0);
    const bottom = Math.min(rect.top + rect.height, viewport.height);
    const right = Math.min(rect.left + rect.width, viewport.width);
    return new Rect({
      top,
      left,
      height: bottom - top,
      width: right - left
    });
  }
  function windowRect() {
    return new Rect({
      top: window.scrollY,
      left: window.scrollX,
      height: window.innerHeight,
      width: document.body.clientWidth
    });
  }
  
  var styles$6 = {
    "PositionedOverlay": "Polaris-PositionedOverlay",
    "fixed": "Polaris-PositionedOverlay--fixed",
    "calculating": "Polaris-PositionedOverlay--calculating",
    "preventInteraction": "Polaris-PositionedOverlay--preventInteraction"
  };
  
  const OBSERVER_CONFIG = {
    childList: true,
    subtree: true
  };
  class PositionedOverlay extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = {
        measuring: true,
        activatorRect: getRectForNode(this.props.activator),
        right: undefined,
        left: undefined,
        top: 0,
        height: 0,
        width: null,
        positioning: 'below',
        zIndex: null,
        outsideScrollableContainer: false,
        lockPosition: false
      };
      this.overlay = null;
      this.scrollableContainer = null;
      this.observer = void 0;
  
      this.overlayDetails = () => {
        const {
          measuring,
          left,
          right,
          positioning,
          height,
          activatorRect
        } = this.state;
        return {
          measuring,
          left,
          right,
          desiredHeight: height,
          positioning,
          activatorRect
        };
      };
  
      this.setOverlay = node => {
        this.overlay = node;
      };
  
      this.handleMeasurement = () => {
        const {
          lockPosition,
          top
        } = this.state;
        this.observer.disconnect();
        this.setState(({
          left,
          top,
          right
        }) => ({
          left,
          right,
          top,
          height: 0,
          positioning: 'below',
          measuring: true
        }), () => {
          if (this.overlay == null || this.scrollableContainer == null) {
            return;
          }
  
          const {
            activator,
            preferredPosition = 'below',
            preferredAlignment = 'center',
            onScrollOut,
            fullWidth,
            fixed,
            preferInputActivator = true
          } = this.props;
          const preferredActivator = preferInputActivator ? activator.querySelector('input') || activator : activator;
          const activatorRect = getRectForNode(preferredActivator);
          const currentOverlayRect = getRectForNode(this.overlay);
          const scrollableElement = isDocument$1(this.scrollableContainer) ? document.body : this.scrollableContainer;
          const scrollableContainerRect = getRectForNode(scrollableElement);
          const overlayRect = fullWidth ? new Rect(_objectSpread2(_objectSpread2({}, currentOverlayRect), {}, {
            width: activatorRect.width
          })) : currentOverlayRect; // If `body` is 100% height, it still acts as though it were not constrained to that size. This adjusts for that.
  
          if (scrollableElement === document.body) {
            scrollableContainerRect.height = document.body.scrollHeight;
          }
  
          const overlayMargins = this.overlay.firstElementChild && this.overlay.firstChild instanceof HTMLElement ? getMarginsForNode(this.overlay.firstElementChild) : {
            activator: 0,
            container: 0,
            horizontal: 0
          };
          const containerRect = windowRect();
          const zIndexForLayer = getZIndexForLayerFromNode(activator);
          const zIndex = zIndexForLayer == null ? zIndexForLayer : zIndexForLayer + 1;
          const verticalPosition = calculateVerticalPosition(activatorRect, overlayRect, overlayMargins, scrollableContainerRect, containerRect, preferredPosition, fixed);
          const horizontalPosition = calculateHorizontalPosition(activatorRect, overlayRect, containerRect, overlayMargins, preferredAlignment);
          this.setState({
            measuring: false,
            activatorRect: getRectForNode(activator),
            left: preferredAlignment !== 'right' ? horizontalPosition : undefined,
            right: preferredAlignment === 'right' ? horizontalPosition : undefined,
            top: lockPosition ? top : verticalPosition.top,
            lockPosition: Boolean(fixed),
            height: verticalPosition.height || 0,
            width: fullWidth ? overlayRect.width : null,
            positioning: verticalPosition.positioning,
            outsideScrollableContainer: onScrollOut != null && rectIsOutsideOfRect(activatorRect, intersectionWithViewport(scrollableContainerRect)),
            zIndex
          }, () => {
            if (!this.overlay) return;
            this.observer.observe(this.overlay, OBSERVER_CONFIG);
          });
        });
      };
  
      this.observer = new MutationObserver(this.handleMeasurement);
    }
  
    componentDidMount() {
      this.scrollableContainer = Scrollable.forNode(this.props.activator);
  
      if (this.scrollableContainer && !this.props.fixed) {
        this.scrollableContainer.addEventListener('scroll', this.handleMeasurement);
      }
  
      this.handleMeasurement();
    }
  
    componentWillUnmount() {
      if (this.scrollableContainer && !this.props.fixed) {
        this.scrollableContainer.removeEventListener('scroll', this.handleMeasurement);
      }
    }
  
    componentDidUpdate() {
      const {
        outsideScrollableContainer,
        top
      } = this.state;
      const {
        onScrollOut,
        active
      } = this.props;
  
      if (active && onScrollOut != null && top !== 0 && outsideScrollableContainer) {
        onScrollOut();
      }
    }
  
    render() {
      const {
        left,
        right,
        top,
        zIndex,
        width
      } = this.state;
      const {
        render,
        fixed,
        preventInteraction,
        classNames: propClassNames
      } = this.props;
      const style = {
        top: top == null || isNaN(top) ? undefined : top,
        left: left == null || isNaN(left) ? undefined : left,
        right: right == null || isNaN(right) ? undefined : right,
        width: width == null || isNaN(width) ? undefined : width,
        zIndex: zIndex == null || isNaN(zIndex) ? undefined : zIndex
      };
      const className = classNames(styles$6.PositionedOverlay, fixed && styles$6.fixed, preventInteraction && styles$6.preventInteraction, propClassNames);
      return /*#__PURE__*/React__default.createElement("div", {
        className: className,
        style: style,
        ref: this.setOverlay
      }, /*#__PURE__*/React__default.createElement(EventListener, {
        event: "resize",
        handler: this.handleMeasurement
      }), render(this.overlayDetails()));
    }
  
  }
  
  function getMarginsForNode(node) {
    const nodeStyles = window.getComputedStyle(node);
    return {
      activator: parseFloat(nodeStyles.marginTop || '0'),
      container: parseFloat(nodeStyles.marginBottom || '0'),
      horizontal: parseFloat(nodeStyles.marginLeft || '0')
    };
  }
  
  function getZIndexForLayerFromNode(node) {
    const layerNode = node.closest(layer.selector) || document.body;
    const zIndex = layerNode === document.body ? 'auto' : parseInt(window.getComputedStyle(layerNode).zIndex || '0', 10);
    return zIndex === 'auto' || isNaN(zIndex) ? null : zIndex;
  }
  
  function isDocument$1(node) {
    return node === document;
  }
  
  (function (PopoverCloseSource) {
    PopoverCloseSource[PopoverCloseSource["Click"] = 0] = "Click";
    PopoverCloseSource[PopoverCloseSource["EscapeKeypress"] = 1] = "EscapeKeypress";
    PopoverCloseSource[PopoverCloseSource["FocusOut"] = 2] = "FocusOut";
    PopoverCloseSource[PopoverCloseSource["ScrollOut"] = 3] = "ScrollOut";
  })(exports.PopoverCloseSource || (exports.PopoverCloseSource = {}));
  
  var TransitionStatus;
  
  (function (TransitionStatus) {
    TransitionStatus["Entering"] = "entering";
    TransitionStatus["Entered"] = "entered";
    TransitionStatus["Exiting"] = "exiting";
    TransitionStatus["Exited"] = "exited";
  })(TransitionStatus || (TransitionStatus = {}));
  
  class PopoverOverlay extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        transitionStatus: this.props.active ? TransitionStatus.Entering : TransitionStatus.Exited
      };
      this.contentNode = /*#__PURE__*/React.createRef();
      this.enteringTimer = void 0;
      this.exitingTimer = void 0;
  
      this.renderPopover = overlayDetails => {
        const {
          measuring,
          desiredHeight,
          positioning
        } = overlayDetails;
        const {
          id,
          children,
          sectioned,
          fullWidth,
          fullHeight,
          fluidContent,
          hideOnPrint,
          colorScheme,
          preventAutofocus,
          autofocusTarget
        } = this.props;
        const className = classNames(styles$5.Popover, positioning === 'above' && styles$5.positionedAbove, fullWidth && styles$5.fullWidth, measuring && styles$5.measuring, hideOnPrint && styles$5['PopoverOverlay-hideOnPrint']);
        const contentStyles = measuring ? undefined : {
          height: desiredHeight
        };
        const contentClassNames = classNames(styles$5.Content, fullHeight && styles$5['Content-fullHeight'], fluidContent && styles$5['Content-fluidContent']);
        const content = /*#__PURE__*/React__default.createElement("div", {
          id: id,
          tabIndex: preventAutofocus || autofocusTarget === 'none' ? undefined : -1,
          className: contentClassNames,
          style: contentStyles,
          ref: this.contentNode
        }, renderPopoverContent(children, {
          sectioned
        }));
        return /*#__PURE__*/React__default.createElement("div", Object.assign({
          className: className
        }, overlay.props), /*#__PURE__*/React__default.createElement(EventListener, {
          event: "click",
          handler: this.handleClick
        }), /*#__PURE__*/React__default.createElement(EventListener, {
          event: "touchstart",
          handler: this.handleClick
        }), /*#__PURE__*/React__default.createElement(KeypressListener, {
          keyCode: exports.Key.Escape,
          handler: this.handleEscape
        }), /*#__PURE__*/React__default.createElement("div", {
          className: styles$5.FocusTracker // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
          ,
          tabIndex: 0,
          onFocus: this.handleFocusFirstItem
        }), /*#__PURE__*/React__default.createElement(ThemeProvider, {
          alwaysRenderCustomProperties: true,
          theme: {
            colorScheme
          }
        }, /*#__PURE__*/React__default.createElement("div", {
          className: styles$5.Wrapper
        }, content)), /*#__PURE__*/React__default.createElement("div", {
          className: styles$5.FocusTracker // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
          ,
          tabIndex: 0,
          onFocus: this.handleFocusLastItem
        }));
      };
  
      this.handleClick = event => {
        const target = event.target;
        const {
          contentNode,
          props: {
            activator,
            onClose
          }
        } = this;
        const isDescendant = contentNode.current != null && nodeContainsDescendant(contentNode.current, target);
        const isActivatorDescendant = nodeContainsDescendant(activator, target);
  
        if (isDescendant || isActivatorDescendant || this.state.transitionStatus !== TransitionStatus.Entered) {
          return;
        }
  
        onClose(exports.PopoverCloseSource.Click);
      };
  
      this.handleScrollOut = () => {
        this.props.onClose(exports.PopoverCloseSource.ScrollOut);
      };
  
      this.handleEscape = () => {
        this.props.onClose(exports.PopoverCloseSource.EscapeKeypress);
      };
  
      this.handleFocusFirstItem = () => {
        this.props.onClose(exports.PopoverCloseSource.FocusOut);
      };
  
      this.handleFocusLastItem = () => {
        this.props.onClose(exports.PopoverCloseSource.FocusOut);
      };
    }
  
    changeTransitionStatus(transitionStatus, cb) {
      this.setState({
        transitionStatus
      }, cb); // Forcing a reflow to enable the animation
  
      this.contentNode.current && this.contentNode.current.getBoundingClientRect();
    }
  
    componentDidMount() {
      if (this.props.active) {
        this.focusContent();
        this.changeTransitionStatus(TransitionStatus.Entered);
      }
    }
  
    componentDidUpdate(oldProps) {
      if (this.props.active && !oldProps.active) {
        this.focusContent();
        this.changeTransitionStatus(TransitionStatus.Entering, () => {
          this.clearTransitionTimeout();
          this.enteringTimer = window.setTimeout(() => {
            this.setState({
              transitionStatus: TransitionStatus.Entered
            });
          }, tokens.durationBase);
        });
      }
  
      if (!this.props.active && oldProps.active) {
        this.changeTransitionStatus(TransitionStatus.Exiting, () => {
          this.clearTransitionTimeout();
          this.exitingTimer = window.setTimeout(() => {
            this.setState({
              transitionStatus: TransitionStatus.Exited
            });
          }, tokens.durationBase);
        });
      }
    }
  
    componentWillUnmount() {
      this.clearTransitionTimeout();
    }
  
    render() {
      const {
        active,
        activator,
        fullWidth,
        preferredPosition = 'below',
        preferredAlignment = 'center',
        preferInputActivator = true,
        fixed
      } = this.props;
      const {
        transitionStatus
      } = this.state;
      if (transitionStatus === TransitionStatus.Exited && !active) return null;
      const className = classNames(styles$5.PopoverOverlay, transitionStatus === TransitionStatus.Entering && styles$5['PopoverOverlay-entering'], transitionStatus === TransitionStatus.Entered && styles$5['PopoverOverlay-open'], transitionStatus === TransitionStatus.Exiting && styles$5['PopoverOverlay-exiting']);
      return /*#__PURE__*/React__default.createElement(PositionedOverlay, {
        fullWidth: fullWidth,
        active: active,
        activator: activator,
        preferInputActivator: preferInputActivator,
        preferredPosition: preferredPosition,
        preferredAlignment: preferredAlignment,
        render: this.renderPopover.bind(this),
        fixed: fixed,
        onScrollOut: this.handleScrollOut,
        classNames: className
      });
    }
  
    clearTransitionTimeout() {
      if (this.enteringTimer) {
        window.clearTimeout(this.enteringTimer);
      }
  
      if (this.exitingTimer) {
        window.clearTimeout(this.exitingTimer);
      }
    }
  
    focusContent() {
      const {
        autofocusTarget = 'container',
        preventAutofocus
      } = this.props;
  
      if (preventAutofocus) {
        // eslint-disable-next-line no-console
        console.warn('Deprecation: The preventAutofocus prop has been deprecated. Use autofocusTarget: "none" instead. Read more at [https://github.com/Shopify/polaris-react/issues/3602]');
      }
  
      if (preventAutofocus || autofocusTarget === 'none' || this.contentNode == null) {
        return;
      }
  
      requestAnimationFrame(() => {
        if (this.contentNode.current == null) {
          return;
        }
  
        const focusableChild = findFirstFocusableNode(this.contentNode.current);
  
        if (focusableChild && autofocusTarget === 'first-node') {
          focusableChild.focus({
            preventScroll: process.env.NODE_ENV === 'development'
          });
        } else {
          this.contentNode.current.focus({
            preventScroll: process.env.NODE_ENV === 'development'
          });
        }
      });
    } // eslint-disable-next-line @shopify/react-no-multiple-render-methods
  
  
  }
  
  function renderPopoverContent(children, props) {
    const childrenArray = React.Children.toArray(children);
  
    if (isElementOfType(childrenArray[0], Pane)) {
      return childrenArray;
    }
  
    return wrapWithComponent(childrenArray, Pane, props);
  }
  
  function nodeContainsDescendant(rootNode, descendant) {
    if (rootNode === descendant) {
      return true;
    }
  
    let parent = descendant.parentNode;
  
    while (parent != null) {
      if (parent === rootNode) {
        return true;
      }
  
      parent = parent.parentNode;
    }
  
    return false;
  }
  
  function setActivatorAttributes(activator, {
    id,
    active = false,
    ariaHaspopup,
    activatorDisabled = false
  }) {
    if (!activatorDisabled) {
      activator.tabIndex = activator.tabIndex || 0;
    }
  
    activator.setAttribute('aria-controls', id);
    activator.setAttribute('aria-owns', id);
    activator.setAttribute('aria-expanded', String(active));
  
    if (ariaHaspopup != null) {
      activator.setAttribute('aria-haspopup', String(ariaHaspopup));
    }
  }
  
  // TypeScript can't generate types that correctly infer the typing of
  // subcomponents so explicitly state the subcomponents in the type definition.
  // Letting this be implicit works in this project but fails in projects that use
  // generated *.d.ts files.
  const Popover = function Popover(_ref) {
    let {
      activatorWrapper = 'div',
      children,
      onClose,
      activator,
      preventFocusOnClose,
      active,
      fixed,
      ariaHaspopup,
      preferInputActivator = true,
      colorScheme
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["activatorWrapper", "children", "onClose", "activator", "preventFocusOnClose", "active", "fixed", "ariaHaspopup", "preferInputActivator", "colorScheme"]);
  
    const [activatorNode, setActivatorNode] = React.useState();
    const activatorContainer = React.useRef(null);
    const WrapperComponent = activatorWrapper;
    const id = useUniqueId('popover');
    const setAccessibilityAttributes = React.useCallback(() => {
      if (activatorContainer.current == null) {
        return;
      }
  
      const firstFocusable = findFirstFocusableNodeIncludingDisabled(activatorContainer.current);
      const focusableActivator = firstFocusable || activatorContainer.current;
      const activatorDisabled = 'disabled' in focusableActivator && Boolean(focusableActivator.disabled);
      setActivatorAttributes(focusableActivator, {
        id,
        active,
        ariaHaspopup,
        activatorDisabled
      });
    }, [id, active, ariaHaspopup]);
  
    const handleClose = source => {
      onClose(source);
  
      if (activatorContainer.current == null || preventFocusOnClose) {
        return;
      }
  
      if ((source === exports.PopoverCloseSource.FocusOut || source === exports.PopoverCloseSource.EscapeKeypress) && activatorNode) {
        const focusableActivator = findFirstFocusableNodeIncludingDisabled(activatorNode) || findFirstFocusableNodeIncludingDisabled(activatorContainer.current) || activatorContainer.current;
  
        if (!focusNextFocusableNode(focusableActivator, isInPortal)) {
          focusableActivator.focus();
        }
      }
    };
  
    React.useEffect(() => {
      if (!activatorNode && activatorContainer.current) {
        setActivatorNode(activatorContainer.current.firstElementChild);
      } else if (activatorNode && activatorContainer.current && !activatorContainer.current.contains(activatorNode)) {
        setActivatorNode(activatorContainer.current.firstElementChild);
      }
  
      setAccessibilityAttributes();
    }, [activatorNode, setAccessibilityAttributes]);
    React.useEffect(() => {
      if (activatorNode && activatorContainer.current) {
        setActivatorNode(activatorContainer.current.firstElementChild);
      }
  
      setAccessibilityAttributes();
    }, [activatorNode, setAccessibilityAttributes]);
    const portal = activatorNode ? /*#__PURE__*/React__default.createElement(Portal, {
      idPrefix: "popover"
    }, /*#__PURE__*/React__default.createElement(PopoverOverlay, Object.assign({
      id: id,
      activator: activatorNode,
      preferInputActivator: preferInputActivator,
      onClose: handleClose,
      active: active,
      fixed: fixed,
      colorScheme: colorScheme
    }, rest), children)) : null;
    return /*#__PURE__*/React__default.createElement(WrapperComponent, {
      ref: activatorContainer
    }, React.Children.only(activator), portal);
  };
  
  function isInPortal(element) {
    let parentElement = element.parentElement;
  
    while (parentElement) {
      if (parentElement.matches(portal.selector)) return false;
      parentElement = parentElement.parentElement;
    }
  
    return true;
  }
  
  Popover.Pane = Pane;
  Popover.Section = Section;
  
  // that the interface defining the props is defined in this file, not imported
  // from elsewhere. This silly workaround ensures that the Props Explorer table
  // is generated correctly.
  
  // Wrapping forwardRef in a memo gets a name set since
  // https://github.com/facebook/react/issues/16722
  // but eslint-plugin-react doesn't know that just yet
  // eslint-disable-next-line react/display-name
  const UnstyledLink = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function UnstyledLink(props, _ref) {
    const LinkComponent = useLink();
  
    if (LinkComponent) {
      return /*#__PURE__*/React__default.createElement(LinkComponent, Object.assign({}, unstyled.props, props));
    }
  
    const {
      external,
      url
    } = props,
          rest = _objectWithoutProperties(props, ["external", "url"]);
  
    const target = external ? '_blank' : undefined;
    const rel = external ? 'noopener noreferrer' : undefined;
    return /*#__PURE__*/React__default.createElement("a", Object.assign({
      target: target
    }, rest, {
      href: url,
      rel: rel
    }, unstyled.props));
  }));
  
  const WithinFilterContext = /*#__PURE__*/React.createContext(false);
  
  var styles$7 = {
    "Badge": "Polaris-Badge",
    "Pip": "Polaris-Badge__Pip",
    "sizeSmall": "Polaris-Badge--sizeSmall",
    "statusSuccess": "Polaris-Badge--statusSuccess",
    "statusInfo": "Polaris-Badge--statusInfo",
    "statusAttention": "Polaris-Badge--statusAttention",
    "statusWarning": "Polaris-Badge--statusWarning",
    "statusCritical": "Polaris-Badge--statusCritical",
    "statusNew": "Polaris-Badge--statusNew",
    "progressIncomplete": "Polaris-Badge--progressIncomplete",
    "progressPartiallyComplete": "Polaris-Badge--progressPartiallyComplete",
    "progressComplete": "Polaris-Badge--progressComplete",
    "withinFilter": "Polaris-Badge--withinFilter"
  };
  
  const PROGRESS_LABELS = {
    incomplete: 'incomplete',
    partiallyComplete: 'partiallyComplete',
    complete: 'complete'
  };
  const STATUS_LABELS = {
    info: 'info',
    success: 'success',
    warning: 'warning',
    critical: 'critical',
    attention: 'attention',
    new: 'new'
  };
  const DEFAULT_SIZE = 'medium';
  function Badge({
    children,
    status,
    progress,
    size = DEFAULT_SIZE
  }) {
    const i18n = useI18n();
    const withinFilter = React.useContext(WithinFilterContext);
    const className = classNames(styles$7.Badge, status && styles$7[variationName('status', status)], progress && styles$7[variationName('progress', progress)], size && size !== DEFAULT_SIZE && styles$7[variationName('size', size)], withinFilter && styles$7.withinFilter);
    let progressLabel = '';
  
    switch (progress) {
      case PROGRESS_LABELS.incomplete:
        progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.incomplete');
        break;
  
      case PROGRESS_LABELS.partiallyComplete:
        progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.partiallyComplete');
        break;
  
      case PROGRESS_LABELS.complete:
        progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.complete');
        break;
    }
  
    let statusLabel = '';
  
    switch (status) {
      case STATUS_LABELS.info:
        statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.info');
        break;
  
      case STATUS_LABELS.success:
        statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.success');
        break;
  
      case STATUS_LABELS.warning:
        statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.warning');
        break;
  
      case STATUS_LABELS.critical:
        statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.critical');
        break;
  
      case STATUS_LABELS.attention:
        statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.attention');
        break;
  
      case STATUS_LABELS.new:
        statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.new');
        break;
    }
  
    const accessibilityLabel = i18n.translate('Polaris.Badge.progressAndStatus', {
      progressLabel,
      statusLabel
    });
    let accessibilityMarkup = (progressLabel || statusLabel) && /*#__PURE__*/React__default.createElement(VisuallyHidden, null, accessibilityLabel);
  
    if (progressLabel) {
      accessibilityMarkup = /*#__PURE__*/React__default.createElement("span", {
        className: styles$7.Pip
      }, accessibilityMarkup);
    }
  
    return /*#__PURE__*/React__default.createElement("span", {
      className: className
    }, accessibilityMarkup, children);
  }
  
  var styles$8 = {
    "variationPositive": "Polaris-TextStyle--variationPositive",
    "variationNegative": "Polaris-TextStyle--variationNegative",
    "variationCode": "Polaris-TextStyle--variationCode",
    "variationStrong": "Polaris-TextStyle--variationStrong",
    "variationSubdued": "Polaris-TextStyle--variationSubdued"
  };
  
  var VariationValue;
  
  (function (VariationValue) {
    VariationValue["Positive"] = "positive";
    VariationValue["Negative"] = "negative";
    VariationValue["Strong"] = "strong";
    VariationValue["Subdued"] = "subdued";
    VariationValue["Code"] = "code";
  })(VariationValue || (VariationValue = {}));
  
  function TextStyle({
    variation,
    children
  }) {
    const className = classNames(variation && styles$8[variationName('variation', variation)], variation === VariationValue.Code && styles$8.code);
    const Element = variationElement(variation);
    return /*#__PURE__*/React__default.createElement(Element, {
      className: className
    }, children);
  }
  
  function variationElement(variation) {
    return variation === VariationValue.Code ? 'code' : 'span';
  }
  
  var styles$9 = {
    "ActionList": "Polaris-ActionList",
    "Section-withoutTitle": "Polaris-ActionList__Section--withoutTitle",
    "Actions": "Polaris-ActionList__Actions",
    "newDesignLanguage": "Polaris-ActionList--newDesignLanguage",
    "Title": "Polaris-ActionList__Title",
    "Section": "Polaris-ActionList__Section",
    "Item": "Polaris-ActionList__Item",
    "active": "Polaris-ActionList--active",
    "destructive": "Polaris-ActionList--destructive",
    "disabled": "Polaris-ActionList--disabled",
    "Prefix": "Polaris-ActionList__Prefix",
    "Suffix": "Polaris-ActionList__Suffix",
    "Content": "Polaris-ActionList__Content",
    "Text": "Polaris-ActionList__Text"
  };
  
  var _ref$2 = /*#__PURE__*/React__default.createElement(Scrollable.ScrollTo, null);
  
  function Item({
    id,
    badge,
    content,
    accessibilityLabel,
    helpText,
    url,
    onAction,
    icon,
    image,
    prefix,
    suffix,
    disabled,
    external,
    destructive,
    ellipsis,
    active,
    role
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$9.Item, disabled && styles$9.disabled, destructive && styles$9.destructive, active && styles$9.active, newDesignLanguage && styles$9.newDesignLanguage);
    let prefixMarkup = null;
  
    if (prefix) {
      prefixMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: styles$9.Prefix
      }, prefix);
    } else if (icon) {
      prefixMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: classNames(styles$9.Prefix, newDesignLanguage && styles$9.newDesignLanguage)
      }, /*#__PURE__*/React__default.createElement(Icon, {
        source: icon
      }));
    } else if (image) {
      prefixMarkup = /*#__PURE__*/React__default.createElement("div", {
        role: "presentation",
        className: styles$9.Prefix,
        style: {
          backgroundImage: `url(${image}`
        }
      });
    }
  
    const contentText = ellipsis && content ? `${content}…` : content;
    const contentMarkup = helpText ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, contentText), /*#__PURE__*/React__default.createElement(TextStyle, {
      variation: "subdued"
    }, helpText)) : contentText;
    const badgeMarkup = badge && /*#__PURE__*/React__default.createElement("span", {
      className: styles$9.Suffix
    }, /*#__PURE__*/React__default.createElement(Badge, {
      status: badge.status
    }, badge.content));
    const suffixMarkup = suffix && /*#__PURE__*/React__default.createElement("span", {
      className: classNames(styles$9.Suffix, newDesignLanguage && styles$9.newDesignLanguage)
    }, suffix);
    const textMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: styles$9.Text
    }, contentMarkup);
    const contentElement = /*#__PURE__*/React__default.createElement("div", {
      className: styles$9.Content
    }, prefixMarkup, textMarkup, badgeMarkup, suffixMarkup);
    const scrollMarkup = active ? _ref$2 : null;
    const control = url ? /*#__PURE__*/React__default.createElement(UnstyledLink, {
      id: id,
      url: url,
      className: className,
      external: external,
      "aria-label": accessibilityLabel,
      onClick: onAction
    }, contentElement) : /*#__PURE__*/React__default.createElement("button", {
      id: id,
      type: "button",
      className: className,
      disabled: disabled,
      "aria-label": accessibilityLabel,
      onClick: onAction
    }, contentElement);
    return /*#__PURE__*/React__default.createElement("li", {
      role: role
    }, scrollMarkup, control);
  }
  
  function Section$1({
    section,
    hasMultipleSections,
    actionRole,
    onActionAnyItem
  }) {
    const handleAction = itemOnAction => {
      return () => {
        if (itemOnAction) {
          itemOnAction();
        }
  
        if (onActionAnyItem) {
          onActionAnyItem();
        }
      };
    };
  
    const actionMarkup = section.items.map((_ref, index) => {
      let {
        content,
        helpText,
        onAction
      } = _ref,
          item = _objectWithoutProperties(_ref, ["content", "helpText", "onAction"]);
  
      return /*#__PURE__*/React__default.createElement(Item, Object.assign({
        key: `${content}-${index}`,
        content: content,
        helpText: helpText,
        role: actionRole,
        onAction: handleAction(onAction)
      }, item));
    });
    const className = section.title ? undefined : styles$9['Section-withoutTitle'];
    const {
      newDesignLanguage
    } = useFeatures();
    const actionsClassName = classNames(styles$9.Actions, newDesignLanguage && styles$9.newDesignLanguage);
    const titleMarkup = section.title ? /*#__PURE__*/React__default.createElement("p", {
      className: styles$9.Title
    }, section.title) : null;
    const sectionRole = actionRole === 'option' ? 'presentation' : undefined;
    const sectionMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, titleMarkup, /*#__PURE__*/React__default.createElement("ul", {
      className: actionsClassName,
      role: sectionRole
    }, actionMarkup));
    return hasMultipleSections ? /*#__PURE__*/React__default.createElement("li", {
      className: styles$9.Section
    }, sectionMarkup) : sectionMarkup;
  }
  
  function ActionList({
    items,
    sections = [],
    actionRole,
    onActionAnyItem
  }) {
    let finalSections = [];
  
    if (items) {
      finalSections = [{
        items
      }, ...sections];
    } else if (sections) {
      finalSections = sections;
    }
  
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$9.ActionList, newDesignLanguage && styles$9.newDesignLanguage);
    const hasMultipleSections = finalSections.length > 1;
    const Element = hasMultipleSections ? 'ul' : 'div';
    const sectionMarkup = finalSections.map((section, index) => {
      return section.items.length > 0 ? /*#__PURE__*/React__default.createElement(Section$1, {
        key: section.title || index,
        section: section,
        hasMultipleSections: hasMultipleSections,
        actionRole: actionRole,
        onActionAnyItem: onActionAnyItem
      }) : null;
    });
    return /*#__PURE__*/React__default.createElement(Element, {
      className: className
    }, sectionMarkup);
  }
  
  function UnstyledButton(_ref) {
    let {
      id,
      children,
      className,
      url,
      external,
      download,
      submit,
      disabled,
      loading,
      pressed,
      accessibilityLabel,
      role,
      ariaControls,
      ariaExpanded,
      ariaDescribedBy,
      ariaPressed,
      onClick,
      onFocus,
      onBlur,
      onKeyDown,
      onKeyPress,
      onKeyUp,
      onMouseEnter,
      onTouchStart
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["id", "children", "className", "url", "external", "download", "submit", "disabled", "loading", "pressed", "accessibilityLabel", "role", "ariaControls", "ariaExpanded", "ariaDescribedBy", "ariaPressed", "onClick", "onFocus", "onBlur", "onKeyDown", "onKeyPress", "onKeyUp", "onMouseEnter", "onTouchStart"]);
  
    const hasGivenDeprecationWarning = React.useRef(false);
  
    if (ariaPressed && !hasGivenDeprecationWarning.current) {
      // eslint-disable-next-line no-console
      console.warn('Deprecation: The ariaPressed prop has been replaced with pressed');
      hasGivenDeprecationWarning.current = true;
    }
  
    const ariaPressedStatus = pressed !== undefined ? pressed : ariaPressed;
    let buttonMarkup;
    const commonProps = {
      id,
      className,
      'aria-label': accessibilityLabel
    };
  
    const interactiveProps = _objectSpread2(_objectSpread2({}, commonProps), {}, {
      role,
      onClick,
      onFocus,
      onBlur,
      onMouseUp: handleMouseUpByBlurring,
      onMouseEnter,
      onTouchStart
    });
  
    if (url) {
      buttonMarkup = disabled ?
      /*#__PURE__*/
      // Render an `<a>` so toggling disabled/enabled state changes only the
      // `href` attribute instead of replacing the whole element.
      React__default.createElement("a", commonProps, children) : /*#__PURE__*/React__default.createElement(UnstyledLink, Object.assign({}, interactiveProps, {
        url: url,
        external: external,
        download: download
      }, rest), children);
    } else {
      buttonMarkup = /*#__PURE__*/React__default.createElement("button", Object.assign({}, interactiveProps, {
        type: submit ? 'submit' : 'button',
        disabled: disabled,
        "aria-busy": loading ? true : undefined,
        "aria-controls": ariaControls,
        "aria-expanded": ariaExpanded,
        "aria-describedby": ariaDescribedBy,
        "aria-pressed": ariaPressedStatus,
        onKeyDown: onKeyDown,
        onKeyUp: onKeyUp,
        onKeyPress: onKeyPress
      }, rest), children);
    }
  
    return buttonMarkup;
  }
  
  function unstyledButtonFrom(_ref, overrides, key) {
    let {
      content,
      onAction
    } = _ref,
        action = _objectWithoutProperties(_ref, ["content", "onAction"]);
  
    return /*#__PURE__*/React__default.createElement(UnstyledButton, Object.assign({
      key: key,
      onClick: onAction
    }, action, overrides), content);
  }
  
  var styles$a = {
    "Button": "Polaris-Button",
    "newDesignLanguage": "Polaris-Button--newDesignLanguage",
    "pressed": "Polaris-Button--pressed",
    "disabled": "Polaris-Button--disabled",
    "connectedDisclosure": "Polaris-Button--connectedDisclosure",
    "Content": "Polaris-Button__Content",
    "plain": "Polaris-Button--plain",
    "textAlignLeft": "Polaris-Button--textAlignLeft",
    "textAlignCenter": "Polaris-Button--textAlignCenter",
    "textAlignRight": "Polaris-Button--textAlignRight",
    "stretchContent": "Polaris-Button--stretchContent",
    "Icon": "Polaris-Button__Icon",
    "fullWidth": "Polaris-Button--fullWidth",
    "hidden": "Polaris-Button--hidden",
    "Spinner": "Polaris-Button__Spinner",
    "primary": "Polaris-Button--primary",
    "destructive": "Polaris-Button--destructive",
    "outline": "Polaris-Button--outline",
    "loading": "Polaris-Button--loading",
    "iconOnly": "Polaris-Button--iconOnly",
    "sizeSlim": "Polaris-Button--sizeSlim",
    "sizeLarge": "Polaris-Button--sizeLarge",
    "monochrome": "Polaris-Button--monochrome",
    "Text": "Polaris-Button__Text",
    "ConnectedDisclosureWrapper": "Polaris-Button__ConnectedDisclosureWrapper",
    "ConnectedDisclosure": "Polaris-Button__ConnectedDisclosure"
  };
  
  const DEFAULT_SIZE$1 = 'medium';
  
  var _ref$3 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CaretDownMinor
  });
  
  function Button({
    id,
    children,
    url,
    disabled,
    external,
    download,
    submit,
    loading,
    pressed,
    accessibilityLabel,
    role,
    ariaControls,
    ariaExpanded,
    ariaDescribedBy,
    ariaPressed,
    onClick,
    onFocus,
    onBlur,
    onKeyDown,
    onKeyPress,
    onKeyUp,
    onMouseEnter,
    onTouchStart,
    icon,
    primary,
    outline,
    destructive,
    disclosure,
    plain,
    monochrome,
    size = DEFAULT_SIZE$1,
    textAlign,
    fullWidth,
    connectedDisclosure,
    stretchContent
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const i18n = useI18n();
    const hasGivenDeprecationWarning = React.useRef(false);
  
    if (stretchContent && !hasGivenDeprecationWarning.current) {
      // eslint-disable-next-line no-console
      console.warn('Deprecation: The `stretchContent` prop has been replaced with `textAlign="left"`');
      hasGivenDeprecationWarning.current = true;
    }
  
    const isDisabled = disabled || loading;
    const className = classNames(styles$a.Button, newDesignLanguage && styles$a.newDesignLanguage, primary && styles$a.primary, outline && styles$a.outline, destructive && styles$a.destructive, isDisabled && styles$a.disabled, loading && styles$a.loading, plain && styles$a.plain, pressed && !disabled && !url && styles$a.pressed, monochrome && styles$a.monochrome, size && size !== DEFAULT_SIZE$1 && styles$a[variationName('size', size)], textAlign && styles$a[variationName('textAlign', textAlign)], fullWidth && styles$a.fullWidth, icon && children == null && styles$a.iconOnly, connectedDisclosure && styles$a.connectedDisclosure, stretchContent && styles$a.stretchContent);
    const disclosureMarkup = disclosure ? /*#__PURE__*/React__default.createElement("span", {
      className: styles$a.Icon
    }, /*#__PURE__*/React__default.createElement("div", {
      className: classNames(styles$a.DisclosureIcon, loading && styles$a.hidden)
    }, /*#__PURE__*/React__default.createElement(Icon, {
      source: loading ? 'placeholder' : getDisclosureIconSource(disclosure)
    }))) : null;
    const iconSource = isIconSource(icon) ? /*#__PURE__*/React__default.createElement(Icon, {
      source: loading ? 'placeholder' : icon
    }) : icon;
    const iconMarkup = iconSource ? /*#__PURE__*/React__default.createElement("span", {
      className: classNames(styles$a.Icon, loading && styles$a.hidden)
    }, iconSource) : null;
    const childMarkup = children ? /*#__PURE__*/React__default.createElement("span", {
      className: styles$a.Text
    }, children) : null;
    const spinnerColor = primary || destructive ? 'white' : 'inkLightest';
    const spinnerSVGMarkup = loading ? /*#__PURE__*/React__default.createElement("span", {
      className: styles$a.Spinner
    }, /*#__PURE__*/React__default.createElement(Spinner, {
      size: "small",
      color: spinnerColor,
      accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel')
    })) : null;
    const ariaPressedStatus = pressed !== undefined ? pressed : ariaPressed;
    const [disclosureActive, setDisclosureActive] = React.useState(false);
    const toggleDisclosureActive = React.useCallback(() => {
      setDisclosureActive(disclosureActive => !disclosureActive);
    }, []);
    let connectedDisclosureMarkup;
  
    if (connectedDisclosure) {
      const connectedDisclosureClassName = classNames(styles$a.Button, primary && styles$a.primary, outline && styles$a.outline, size && size !== DEFAULT_SIZE$1 && styles$a[variationName('size', size)], textAlign && styles$a[variationName('textAlign', textAlign)], destructive && styles$a.destructive, connectedDisclosure.disabled && styles$a.disabled, styles$a.iconOnly, styles$a.ConnectedDisclosure, monochrome && styles$a.monochrome, newDesignLanguage && styles$a.newDesignLanguage);
      const defaultLabel = i18n.translate('Polaris.Button.connectedDisclosureAccessibilityLabel');
      const {
        disabled: _disabled,
        accessibilityLabel: disclosureLabel = defaultLabel
      } = connectedDisclosure;
      const connectedDisclosureActivator = /*#__PURE__*/React__default.createElement("button", {
        type: "button",
        className: connectedDisclosureClassName,
        disabled: _disabled,
        "aria-label": disclosureLabel,
        "aria-describedby": ariaDescribedBy,
        onClick: toggleDisclosureActive,
        onMouseUp: handleMouseUpByBlurring
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$a.Icon
      }, _ref$3));
      connectedDisclosureMarkup = /*#__PURE__*/React__default.createElement(Popover, {
        active: disclosureActive,
        onClose: toggleDisclosureActive,
        activator: connectedDisclosureActivator,
        preferredAlignment: "right"
      }, /*#__PURE__*/React__default.createElement(ActionList, {
        items: connectedDisclosure.actions,
        onActionAnyItem: toggleDisclosureActive
      }));
    }
  
    const commonProps = {
      id,
      className,
      accessibilityLabel,
      ariaDescribedBy,
      role,
      onClick,
      onFocus,
      onBlur,
      onMouseUp: handleMouseUpByBlurring,
      onMouseEnter,
      onTouchStart
    };
    const linkProps = {
      url,
      external,
      download
    };
    const actionProps = {
      submit,
      disabled: isDisabled,
      loading,
      ariaControls,
      ariaExpanded,
      ariaPressed: ariaPressedStatus,
      onKeyDown,
      onKeyUp,
      onKeyPress
    };
    const buttonMarkup = /*#__PURE__*/React__default.createElement(UnstyledButton, Object.assign({}, commonProps, linkProps, actionProps), /*#__PURE__*/React__default.createElement("span", {
      className: styles$a.Content
    }, spinnerSVGMarkup, iconMarkup, childMarkup, disclosureMarkup));
    return connectedDisclosureMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$a.ConnectedDisclosureWrapper
    }, buttonMarkup, connectedDisclosureMarkup) : buttonMarkup;
  }
  
  function isIconSource(x) {
    return typeof x === 'string' || typeof x === 'object' && x.body || typeof x === 'function';
  }
  
  function getDisclosureIconSource(disclosure) {
    if (disclosure === 'select') {
      return polarisIcons.SelectMinor;
    }
  
    return disclosure === 'up' ? polarisIcons.CaretUpMinor : polarisIcons.CaretDownMinor;
  }
  
  function buttonsFrom(actions, overrides = {}) {
    if (Array.isArray(actions)) {
      return actions.map((action, index) => buttonFrom(action, overrides, index));
    } else {
      const action = actions;
      return buttonFrom(action, overrides);
    }
  }
  function buttonFrom(_ref, overrides, key) {
    let {
      content,
      onAction
    } = _ref,
        action = _objectWithoutProperties(_ref, ["content", "onAction"]);
  
    return /*#__PURE__*/React__default.createElement(Button, Object.assign({
      key: key,
      onClick: onAction
    }, action, overrides), content);
  }
  
  /**
   * Returns a stateful value, and a set of memoized functions to toggle it,
   * set it to true and set it to false
   */
  
  function useToggle(initialState) {
    const [value, setState] = React.useState(initialState);
    return {
      value,
      toggle: React.useCallback(() => setState(state => !state), []),
      setTrue: React.useCallback(() => setState(true), []),
      setFalse: React.useCallback(() => setState(false), [])
    };
  }
  
  const WithinContentContext = /*#__PURE__*/React.createContext(false);
  
  var styles$b = {
    "ButtonGroup": "Polaris-ButtonGroup",
    "Item": "Polaris-ButtonGroup__Item",
    "Item-plain": "Polaris-ButtonGroup__Item--plain",
    "segmented": "Polaris-ButtonGroup--segmented",
    "Item-focused": "Polaris-ButtonGroup__Item--focused",
    "fullWidth": "Polaris-ButtonGroup--fullWidth",
    "extraTight": "Polaris-ButtonGroup--extraTight",
    "tight": "Polaris-ButtonGroup--tight",
    "loose": "Polaris-ButtonGroup--loose"
  };
  
  function Item$1({
    button
  }) {
    const {
      value: focused,
      setTrue: forceTrueFocused,
      setFalse: forceFalseFocused
    } = useToggle(false);
    const className = classNames(styles$b.Item, focused && styles$b['Item-focused'], button.props.plain && styles$b['Item-plain']);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className,
      onFocus: forceTrueFocused,
      onBlur: forceFalseFocused
    }, button);
  }
  
  function ButtonGroup({
    children,
    spacing,
    segmented,
    fullWidth,
    connectedTop
  }) {
    const className = classNames(styles$b.ButtonGroup, spacing && styles$b[spacing], segmented && styles$b.segmented, fullWidth && styles$b.fullWidth);
    const contents = elementChildren(children).map((child, index) => /*#__PURE__*/React__default.createElement(Item$1, {
      button: child,
      key: index
    }));
    return /*#__PURE__*/React__default.createElement("div", {
      className: className,
      "data-buttongroup-segmented": segmented,
      "data-buttongroup-connected-top": connectedTop,
      "data-buttongroup-full-width": fullWidth
    }, contents);
  }
  
  var styles$c = {
    "Stack": "Polaris-Stack",
    "Item": "Polaris-Stack__Item",
    "noWrap": "Polaris-Stack--noWrap",
    "spacingNone": "Polaris-Stack--spacingNone",
    "spacingExtraTight": "Polaris-Stack--spacingExtraTight",
    "spacingTight": "Polaris-Stack--spacingTight",
    "spacingLoose": "Polaris-Stack--spacingLoose",
    "spacingExtraLoose": "Polaris-Stack--spacingExtraLoose",
    "distributionLeading": "Polaris-Stack--distributionLeading",
    "distributionTrailing": "Polaris-Stack--distributionTrailing",
    "distributionCenter": "Polaris-Stack--distributionCenter",
    "distributionEqualSpacing": "Polaris-Stack--distributionEqualSpacing",
    "distributionFill": "Polaris-Stack--distributionFill",
    "distributionFillEvenly": "Polaris-Stack--distributionFillEvenly",
    "alignmentLeading": "Polaris-Stack--alignmentLeading",
    "alignmentTrailing": "Polaris-Stack--alignmentTrailing",
    "alignmentCenter": "Polaris-Stack--alignmentCenter",
    "alignmentFill": "Polaris-Stack--alignmentFill",
    "alignmentBaseline": "Polaris-Stack--alignmentBaseline",
    "vertical": "Polaris-Stack--vertical",
    "Item-fill": "Polaris-Stack__Item--fill"
  };
  
  function Item$2({
    children,
    fill
  }) {
    const className = classNames(styles$c.Item, fill && styles$c['Item-fill']);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, children);
  }
  
  const Stack = /*#__PURE__*/React.memo(function Stack({
    children,
    vertical,
    spacing,
    distribution,
    alignment,
    wrap
  }) {
    const className = classNames(styles$c.Stack, vertical && styles$c.vertical, spacing && styles$c[variationName('spacing', spacing)], distribution && styles$c[variationName('distribution', distribution)], alignment && styles$c[variationName('alignment', alignment)], wrap === false && styles$c.noWrap);
    const itemMarkup = elementChildren(children).map((child, index) => {
      const props = {
        key: index
      };
      return wrapWithComponent(child, Item$2, props);
    });
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, itemMarkup);
  });
  Stack.Item = Item$2;
  
  var styles$d = {
    "Heading": "Polaris-Heading"
  };
  
  function Heading({
    element: Element = 'h2',
    children
  }) {
    return /*#__PURE__*/React__default.createElement(Element, {
      className: styles$d.Heading
    }, children);
  }
  
  var styles$e = {
    "Card": "Polaris-Card",
    "newDesignLanguage": "Polaris-Card--newDesignLanguage",
    "subdued": "Polaris-Card--subdued",
    "Header": "Polaris-Card__Header",
    "Section": "Polaris-Card__Section",
    "Section-fullWidth": "Polaris-Card__Section--fullWidth",
    "Section-flush": "Polaris-Card__Section--flush",
    "Section-subdued": "Polaris-Card__Section--subdued",
    "SectionHeader": "Polaris-Card__SectionHeader",
    "Subsection": "Polaris-Card__Subsection",
    "Footer": "Polaris-Card__Footer",
    "LeftJustified": "Polaris-Card__LeftJustified"
  };
  
  function Header({
    children,
    title,
    actions
  }) {
    const actionMarkup = actions ? /*#__PURE__*/React__default.createElement(ButtonGroup, null, buttonsFrom(actions, {
      plain: true
    })) : null;
    const titleMarkup = /*#__PURE__*/React.isValidElement(title) ? title : /*#__PURE__*/React__default.createElement(Heading, null, title);
    const headingMarkup = actionMarkup || children ? /*#__PURE__*/React__default.createElement(Stack, {
      alignment: "baseline"
    }, /*#__PURE__*/React__default.createElement(Stack.Item, {
      fill: true
    }, titleMarkup), actionMarkup, children) : titleMarkup;
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$e.Header
    }, headingMarkup);
  }
  
  var styles$f = {
    "Subheading": "Polaris-Subheading"
  };
  
  function Subheading({
    element: Element = 'h3',
    children
  }) {
    const ariaLabel = typeof children === 'string' ? children : undefined;
    return /*#__PURE__*/React__default.createElement(Element, {
      "aria-label": ariaLabel,
      className: styles$f.Subheading
    }, children);
  }
  
  function Section$2({
    children,
    title,
    subdued,
    flush,
    fullWidth,
    actions
  }) {
    const className = classNames(styles$e.Section, flush && styles$e['Section-flush'], subdued && styles$e['Section-subdued'], fullWidth && styles$e['Section-fullWidth']);
    const actionMarkup = actions ? /*#__PURE__*/React__default.createElement(ButtonGroup, null, buttonsFrom(actions, {
      plain: true
    })) : null;
    const titleMarkup = typeof title === 'string' ? /*#__PURE__*/React__default.createElement(Subheading, null, title) : title;
    const titleAreaMarkup = titleMarkup || actionMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$e.SectionHeader
    }, actionMarkup ? /*#__PURE__*/React__default.createElement(Stack, {
      alignment: "baseline"
    }, /*#__PURE__*/React__default.createElement(Stack.Item, {
      fill: true
    }, titleMarkup), actionMarkup) : titleMarkup) : null;
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, titleAreaMarkup, children);
  }
  
  function Subsection({
    children
  }) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$e.Subsection
    }, children);
  }
  
  // TypeScript can't generate types that correctly infer the typing of
  // subcomponents so explicitly state the subcomponents in the type definition.
  // Letting this be implicit works in this project but fails in projects that use
  // generated *.d.ts files.
  const Card = function Card({
    children,
    title,
    subdued,
    sectioned,
    actions,
    primaryFooterAction,
    secondaryFooterActions,
    secondaryFooterActionsDisclosureText,
    footerActionAlignment = 'right'
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const {
      value: secondaryActionsPopoverOpen,
      toggle: toggleSecondaryActionsPopoverOpen
    } = useToggle(false);
    const className = classNames(styles$e.Card, subdued && styles$e.subdued, newDesignLanguage && styles$e.newDesignLanguage);
    const headerMarkup = title || actions ? /*#__PURE__*/React__default.createElement(Header, {
      actions: actions,
      title: title
    }) : null;
    const content = sectioned ? /*#__PURE__*/React__default.createElement(Section$2, null, children) : children;
    const primaryFooterActionMarkup = primaryFooterAction ? buttonFrom(primaryFooterAction, {
      primary: true
    }) : null;
    let secondaryFooterActionsMarkup = null;
  
    if (secondaryFooterActions && secondaryFooterActions.length) {
      if (secondaryFooterActions.length === 1) {
        secondaryFooterActionsMarkup = buttonFrom(secondaryFooterActions[0]);
      } else {
        secondaryFooterActionsMarkup = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Popover, {
          active: secondaryActionsPopoverOpen,
          activator: /*#__PURE__*/React__default.createElement(Button, {
            disclosure: true,
            onClick: toggleSecondaryActionsPopoverOpen
          }, secondaryFooterActionsDisclosureText || i18n.translate('Polaris.Common.more')),
          onClose: toggleSecondaryActionsPopoverOpen
        }, /*#__PURE__*/React__default.createElement(ActionList, {
          items: secondaryFooterActions
        })));
      }
    }
  
    const footerMarkup = primaryFooterActionMarkup || secondaryFooterActionsMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: classNames(styles$e.Footer, footerActionAlignment === 'left' && styles$e.LeftJustified)
    }, footerActionAlignment === 'right' ? /*#__PURE__*/React__default.createElement(ButtonGroup, null, secondaryFooterActionsMarkup, primaryFooterActionMarkup) : /*#__PURE__*/React__default.createElement(ButtonGroup, null, primaryFooterActionMarkup, secondaryFooterActionsMarkup)) : null;
    return /*#__PURE__*/React__default.createElement(WithinContentContext.Provider, {
      value: true
    }, /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, headerMarkup, content, footerMarkup));
  };
  Card.Header = Header;
  Card.Section = Section$2;
  Card.Subsection = Subsection;
  
  var styles$g = {
    "SettingAction": "Polaris-SettingAction",
    "Setting": "Polaris-SettingAction__Setting",
    "Action": "Polaris-SettingAction__Action"
  };
  
  function SettingAction({
    action,
    children
  }) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$g.SettingAction
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$g.Setting
    }, children), /*#__PURE__*/React__default.createElement("div", {
      className: styles$g.Action
    }, action));
  }
  
  var styles$h = {
    "TermsOfService": "Polaris-AccountConnection__TermsOfService",
    "Content": "Polaris-AccountConnection__Content"
  };
  
  function AccountConnection({
    connected = false,
    action,
    avatarUrl,
    accountName = '',
    title,
    details,
    termsOfService
  }) {
    const initials = accountName ? accountName.split(/\s+/).map(name => name[0]).join('') : undefined;
    const avatarMarkup = connected ? /*#__PURE__*/React__default.createElement(Avatar, {
      accessibilityLabel: "",
      name: accountName,
      initials: initials,
      source: avatarUrl
    }) : null;
    let titleMarkup = null;
  
    if (title) {
      titleMarkup = /*#__PURE__*/React__default.createElement("div", null, title);
    } else if (accountName) {
      titleMarkup = /*#__PURE__*/React__default.createElement("div", null, accountName);
    }
  
    const detailsMarkup = details ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TextStyle, {
      variation: "subdued"
    }, details)) : null;
    const termsOfServiceMarkup = termsOfService ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$h.TermsOfService
    }, termsOfService) : null;
    const actionElement = action ? buttonFrom(action, {
      primary: !connected
    }) : null;
    return /*#__PURE__*/React__default.createElement(Card, {
      sectioned: true
    }, /*#__PURE__*/React__default.createElement(SettingAction, {
      action: actionElement
    }, /*#__PURE__*/React__default.createElement(Stack, null, avatarMarkup, /*#__PURE__*/React__default.createElement(Stack.Item, {
      fill: true
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$h.Content
    }, titleMarkup, detailsMarkup)))), termsOfServiceMarkup);
  }
  
  var styles$i = {
    "MenuAction": "Polaris-ActionMenu-MenuAction",
    "IconWrapper": "Polaris-ActionMenu-MenuAction__IconWrapper",
    "disabled": "Polaris-ActionMenu-MenuAction--disabled",
    "ContentWrapper": "Polaris-ActionMenu-MenuAction__ContentWrapper"
  };
  
  var _ref$4 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CaretDownMinor
  });
  
  function MenuAction({
    content,
    accessibilityLabel,
    url,
    external,
    icon,
    disclosure,
    disabled,
    onAction
  }) {
    const iconMarkup = icon && /*#__PURE__*/React__default.createElement("span", {
      className: styles$i.IconWrapper
    }, /*#__PURE__*/React__default.createElement(Icon, {
      source: icon
    }));
    const disclosureIconMarkup = disclosure && /*#__PURE__*/React__default.createElement("span", {
      className: styles$i.IconWrapper
    }, _ref$4);
    const contentMarkup = iconMarkup || disclosureIconMarkup ? /*#__PURE__*/React__default.createElement("span", {
      className: styles$i.ContentWrapper
    }, iconMarkup, /*#__PURE__*/React__default.createElement("span", {
      className: styles$i.Content
    }, content), disclosureIconMarkup) : content;
    const menuActionClassNames = classNames(styles$i.MenuAction, disabled && styles$i.disabled);
  
    if (url) {
      return /*#__PURE__*/React__default.createElement(UnstyledLink, {
        className: menuActionClassNames,
        url: url,
        external: external,
        "aria-label": accessibilityLabel,
        onMouseUp: handleMouseUpByBlurring
      }, contentMarkup);
    }
  
    return /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      className: menuActionClassNames,
      disabled: disabled,
      "aria-label": accessibilityLabel,
      onClick: onAction,
      onMouseUp: handleMouseUpByBlurring
    }, contentMarkup);
  }
  
  var styles$j = {
    "SecondaryAction": "Polaris-ActionMenu-SecondaryAction",
    "newDesignLanguage": "Polaris-ActionMenu-SecondaryAction--newDesignLanguage"
  };
  
  function SecondaryAction(_ref) {
    let {
      children,
      onAction,
      getOffsetWidth
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["children", "onAction", "getOffsetWidth"]);
  
    const {
      newDesignLanguage
    } = useFeatures();
    const secondaryActionsRef = React.useRef(null);
    React.useEffect(() => {
      var _secondaryActionsRef$;
  
      if (!getOffsetWidth || !secondaryActionsRef.current || !newDesignLanguage) return;
      getOffsetWidth((_secondaryActionsRef$ = secondaryActionsRef.current) == null ? void 0 : _secondaryActionsRef$.offsetWidth);
    }, [getOffsetWidth, newDesignLanguage]);
    return /*#__PURE__*/React__default.createElement("span", {
      className: classNames(styles$j.SecondaryAction, styles$j.newDesignLanguage),
      ref: secondaryActionsRef
    }, /*#__PURE__*/React__default.createElement(Button, Object.assign({
      onClick: onAction
    }, rest), children));
  }
  
  var styles$k = {
    "Details": "Polaris-ActionMenu-MenuGroup__Details"
  };
  
  function MenuGroup({
    accessibilityLabel,
    active,
    actions,
    details,
    title,
    icon,
    onClose,
    onOpen,
    getOffsetWidth
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const handleClose = React.useCallback(() => {
      onClose(title);
    }, [onClose, title]);
    const handleOpen = React.useCallback(() => {
      onOpen(title);
    }, [onOpen, title]);
    const handleOffsetWidth = React.useCallback(width => {
      if (!newDesignLanguage || !getOffsetWidth) return;
      getOffsetWidth(width);
    }, [getOffsetWidth, newDesignLanguage]);
    const popoverActivator = newDesignLanguage ? /*#__PURE__*/React__default.createElement(SecondaryAction, {
      disclosure: true,
      icon: icon,
      accessibilityLabel: accessibilityLabel,
      onClick: handleOpen,
      getOffsetWidth: handleOffsetWidth
    }, title) : /*#__PURE__*/React__default.createElement(MenuAction, {
      disclosure: true,
      content: title,
      icon: icon,
      accessibilityLabel: accessibilityLabel,
      onAction: handleOpen
    });
    return /*#__PURE__*/React__default.createElement(Popover, {
      active: Boolean(active),
      activator: popoverActivator,
      preferredAlignment: "left",
      onClose: handleClose,
      hideOnPrint: true
    }, /*#__PURE__*/React__default.createElement(ActionList, {
      items: actions,
      onActionAnyItem: handleClose
    }), details && /*#__PURE__*/React__default.createElement("div", {
      className: styles$k.Details
    }, details));
  }
  
  var styles$l = {
    "ActionsLayout": "Polaris-ActionMenu-Actions__ActionsLayout",
    "newDesignLanguage": "Polaris-ActionMenu-Actions--newDesignLanguage"
  };
  
  const ACTION_SPACING = 8;
  function Actions({
    actions = [],
    groups = []
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const actionsLayoutRef = React.useRef(null);
    const menuGroupWidthRef = React.useRef(0);
    const availableWidthRef = React.useRef(0);
    const actionsAndGroupsLengthRef = React.useRef(0);
    const timesMeasured = React.useRef(0);
    const actionWidthsRef = React.useRef([]);
    const [activeMenuGroup, setActiveMenuGroup] = React.useState(undefined);
    const [measuredActions, setMeasuredActions] = React.useState({
      showable: [],
      rolledUp: []
    });
    const defaultRollupGroup = {
      title: i18n.translate('Polaris.Actions.moreActions'),
      actions: []
    };
    const lastMenuGroup = [...groups].pop();
    const lastMenuGroupWidth = [...actionWidthsRef.current].pop() || 0;
    const handleActionsOffsetWidth = React.useCallback(width => {
      actionWidthsRef.current = [...actionWidthsRef.current, width];
    }, []);
    const handleMenuGroupToggle = React.useCallback(group => setActiveMenuGroup(activeMenuGroup ? undefined : group), [activeMenuGroup]);
    const handleMenuGroupClose = React.useCallback(() => setActiveMenuGroup(undefined), []);
    const updateActions = React.useCallback(() => {
      let actionsAndGroups = [...actions, ...groups];
  
      if (groups.length > 0) {
        // We don't want to include actions from the last group
        // since it is always rendered with its own actions
        actionsAndGroups = [...actionsAndGroups].slice(0, actionsAndGroups.length - 1);
      }
  
      const showable = actionsAndGroups.slice(0, measuredActions.showable.length);
      const rolledUp = actionsAndGroups.slice(measuredActions.showable.length, actionsAndGroups.length);
      setMeasuredActions({
        showable,
        rolledUp
      });
    }, [actions, groups, measuredActions.showable.length]);
    const measureActions = React.useCallback(() => {
      if (!newDesignLanguage || actionWidthsRef.current.length === 0 || availableWidthRef.current === 0) {
        return;
      }
  
      const actionsAndGroups = [...actions, ...groups];
  
      if (actionsAndGroups.length === 1) {
        setMeasuredActions({
          showable: actionsAndGroups,
          rolledUp: []
        });
        return;
      }
  
      let currentAvailableWidth = availableWidthRef.current;
      let newShowableActions = [];
      let newRolledUpActions = [];
      actionsAndGroups.forEach((action, index) => {
        const canFitAction = actionWidthsRef.current[index] + menuGroupWidthRef.current + ACTION_SPACING + lastMenuGroupWidth <= currentAvailableWidth;
  
        if (canFitAction) {
          currentAvailableWidth -= actionWidthsRef.current[index] + ACTION_SPACING * 2;
          newShowableActions = [...newShowableActions, action];
        } else {
          currentAvailableWidth = 0; // Find last group if it exists and always render it as a rolled up action below
  
          if (action === lastMenuGroup) return;
          newRolledUpActions = [...newRolledUpActions, action];
        }
      });
      setMeasuredActions({
        showable: newShowableActions,
        rolledUp: newRolledUpActions
      });
      timesMeasured.current += 1;
      actionsAndGroupsLengthRef.current = actionsAndGroups.length;
    }, [actions, groups, lastMenuGroup, lastMenuGroupWidth, newDesignLanguage]);
    const handleResize = React.useMemo(() => debounce(() => {
      if (!newDesignLanguage || !actionsLayoutRef.current) return;
      availableWidthRef.current = actionsLayoutRef.current.offsetWidth; // Set timesMeasured to 0 to allow re-measuring
  
      timesMeasured.current = 0;
      measureActions();
    }, 50, {
      leading: false,
      trailing: true
    }), [newDesignLanguage, measureActions]);
    React.useEffect(() => {
      if (!actionsLayoutRef.current) {
        return;
      }
  
      availableWidthRef.current = actionsLayoutRef.current.offsetWidth;
  
      if ( // Allow measuring twice
      // This accounts for the initial paint and re-flow
      timesMeasured.current >= 2 && [...actions, ...groups].length === actionsAndGroupsLengthRef.current) {
        updateActions();
        return;
      }
  
      measureActions();
    }, [actions, groups, measureActions, updateActions]);
    const className = classNames(styles$l.ActionsLayout, newDesignLanguage && styles$l.newDesignLanguage);
    const actionsMarkup = actions.map(action => {
      if (newDesignLanguage && measuredActions.showable.length > 0 || measuredActions.rolledUp.includes(action)) return null;
  
      const {
        content,
        onAction
      } = action,
            rest = _objectWithoutProperties(action, ["content", "onAction"]);
  
      return newDesignLanguage ? /*#__PURE__*/React__default.createElement(SecondaryAction, Object.assign({
        key: content,
        onClick: onAction
      }, rest, {
        getOffsetWidth: handleActionsOffsetWidth
      }), content) : /*#__PURE__*/React__default.createElement(MenuAction, Object.assign({
        key: content,
        content: content,
        onAction: onAction
      }, rest));
    });
    const rollUppableActionsMarkup = measuredActions.showable.length > 0 ? measuredActions.showable.map(action => action.content && /*#__PURE__*/React__default.createElement(SecondaryAction, Object.assign({
      key: action.content
    }, action, {
      getOffsetWidth: handleActionsOffsetWidth
    }), action.content)) : null;
    const filteredGroups = [...groups, defaultRollupGroup].filter(group => {
      return groups.length === 0 ? group : group === lastMenuGroup || !measuredActions.rolledUp.some(rolledUpGroup => isMenuGroup(rolledUpGroup) && rolledUpGroup.title === group.title);
    });
    const groupsMarkup = filteredGroups.map(group => {
      const {
        title,
        actions: groupActions
      } = group,
            rest = _objectWithoutProperties(group, ["title", "actions"]);
  
      const isDefaultGroup = group === defaultRollupGroup;
      const isLastMenuGroup = group === lastMenuGroup;
      const finalRolledUpActions = measuredActions.rolledUp.reduce((memo, action) => {
        memo.push(...(isMenuGroup(action) ? action.actions : [action]));
        return memo;
      }, []);
  
      if (!isDefaultGroup && !isLastMenuGroup) {
        // Render a normal MenuGroup with just its actions
        return /*#__PURE__*/React__default.createElement(MenuGroup, Object.assign({
          key: title,
          title: title,
          active: title === activeMenuGroup,
          actions: groupActions
        }, rest, {
          onOpen: handleMenuGroupToggle,
          onClose: handleMenuGroupClose,
          getOffsetWidth: handleActionsOffsetWidth
        }));
      } else if (!isDefaultGroup && isLastMenuGroup) {
        // render the last, rollup group with its actions and finalRolledupActions
        return /*#__PURE__*/React__default.createElement(MenuGroup, Object.assign({
          key: title,
          title: title,
          active: title === activeMenuGroup,
          actions: [...finalRolledUpActions, ...groupActions]
        }, rest, {
          onOpen: handleMenuGroupToggle,
          onClose: handleMenuGroupClose,
          getOffsetWidth: handleActionsOffsetWidth
        }));
      } else if (isDefaultGroup && groups.length === 0 && finalRolledUpActions.length) {
        // Render the default group to rollup into if one does not exist
        return /*#__PURE__*/React__default.createElement(MenuGroup, Object.assign({
          key: title,
          title: title,
          active: title === activeMenuGroup,
          actions: finalRolledUpActions
        }, rest, {
          onOpen: handleMenuGroupToggle,
          onClose: handleMenuGroupClose,
          getOffsetWidth: handleActionsOffsetWidth
        }));
      }
    });
    const groupedActionsMarkup = newDesignLanguage ? /*#__PURE__*/React__default.createElement(ButtonGroup, {
      spacing: "extraTight"
    }, rollUppableActionsMarkup, actionsMarkup, groupsMarkup) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actionsMarkup, groupsMarkup);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className,
      ref: actionsLayoutRef
    }, groupedActionsMarkup, /*#__PURE__*/React__default.createElement(EventListener, {
      event: "resize",
      handler: handleResize
    }));
  }
  
  function isMenuGroup(actionOrMenuGroup) {
    return 'title' in actionOrMenuGroup;
  }
  
  var styles$m = {
    "RollupActivator": "Polaris-ActionMenu-RollupActions__RollupActivator",
    "newDesignLanguage": "Polaris-ActionMenu-RollupActions--newDesignLanguage"
  };
  
  function RollupActions({
    items = [],
    sections = []
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const classname = classNames(styles$m.RollupActivator, newDesignLanguage && styles$m.newDesignLanguage);
    const {
      value: rollupOpen,
      toggle: toggleRollupOpen
    } = useToggle(false);
  
    if (items.length === 0 && sections.length === 0) {
      return null;
    }
  
    const activatorMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: classname
    }, /*#__PURE__*/React__default.createElement(Button, {
      plain: !newDesignLanguage,
      outline: newDesignLanguage,
      icon: polarisIcons.HorizontalDotsMinor,
      accessibilityLabel: i18n.translate('Polaris.ActionMenu.RollupActions.rollupButton'),
      onClick: toggleRollupOpen
    }));
    return /*#__PURE__*/React__default.createElement(Popover, {
      active: rollupOpen,
      activator: activatorMarkup,
      preferredAlignment: "right",
      onClose: toggleRollupOpen,
      hideOnPrint: true
    }, /*#__PURE__*/React__default.createElement(ActionList, {
      items: items,
      sections: sections,
      onActionAnyItem: toggleRollupOpen
    }));
  }
  
  var styles$n = {
    "ActionMenu": "Polaris-ActionMenu",
    "rollup": "Polaris-ActionMenu--rollup",
    "newDesignLanguage": "Polaris-ActionMenu--newDesignLanguage"
  };
  
  function ActionMenu({
    actions = [],
    groups = [],
    rollup
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
  
    if (actions.length === 0 && groups.length === 0) {
      return null;
    }
  
    const actionMenuClassNames = classNames(styles$n.ActionMenu, rollup && styles$n.rollup, newDesignLanguage && styles$n.newDesignLanguage);
    const rollupSections = groups.map(group => convertGroupToSection(group));
    return /*#__PURE__*/React__default.createElement("div", {
      className: actionMenuClassNames
    }, rollup ? /*#__PURE__*/React__default.createElement(RollupActions, {
      items: actions,
      sections: rollupSections
    }) : /*#__PURE__*/React__default.createElement(Actions, {
      actions: actions,
      groups: groups
    }));
  }
  function hasGroupsWithActions(groups = []) {
    return groups.length === 0 ? false : groups.some(group => group.actions.length > 0);
  }
  
  function convertGroupToSection({
    title,
    actions
  }) {
    return {
      title,
      items: actions
    };
  }
  
  function arraysAreEqual(firstArray, secondArray, comparator) {
    if (firstArray.length !== secondArray.length) {
      return false;
    }
  
    return firstArray.every((firstItem, index) => {
      const secondItem = secondArray[index];
  
      if (comparator != null) {
        return comparator(firstItem, secondItem);
      }
  
      return firstItem === secondItem;
    });
  }
  
  /**
   * Allows for custom or deep comparison of a dependency list. Useful to keep a consistent dependency
   * list across reference changes.
   * @param dependencies A dependency array similar to React's useEffect / useCallback / useMemo
   * @param comparator An optional function to compare dependencies that'll default to a deep comparison
   * @returns A dependency list
   * @see {@link https://github.com/Shopify/polaris-react/blob/master/src/utilities/use-deep-effect.tsx}
   * @see {@link https://github.com/Shopify/polaris-react/blob/master/src/utilities/use-deep-callback.tsx}
   * @example
   * function useDeepEffectExample(callback, dependencies, customCompare) {
   *  useEffect(callback, useDeepCompareRef(dependencies, customCompare));
   * }
   */
  function useDeepCompareRef(dependencies, comparator = isEqual) {
    const dependencyList = React.useRef(dependencies);
  
    if (!comparator(dependencyList.current, dependencies)) {
      dependencyList.current = dependencies;
    }
  
    return dependencyList.current;
  }
  
  /**
   * A replacement for React's useEffect that'll allow for custom and deep
   * compares of the dependency list.
   * @see {@link https://reactjs.org/docs/hooks-reference.html#useeffect}
   * @param callback Accepts a callback that's forwarded to React's useEffect
   * @param dependencies A dependency array similar to React's useEffect however it utilizes a deep compare
   * @param customCompare Opportunity to provide a custom compare function
   * @example
   * function ComponentExample() {
   *  const [, forceUpdate] = useState();
   *  const obj = {a: 1};
   *
   *  useDeepEffect(() => {
   *    console.log('useDeepEffect invocation');
   *    forceUpdate(obj);
   *  }, [obj]);
   *
   *  return null;
   * }
   */
  function useDeepEffect(callback, dependencies, customCompare) {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    React.useEffect(callback, useDeepCompareRef(dependencies, customCompare));
  }
  
  var styles$o = {
    "Checkbox": "Polaris-OptionList-Checkbox",
    "Input": "Polaris-OptionList-Checkbox__Input",
    "newDesignLanguage": "Polaris-OptionList-Checkbox--newDesignLanguage",
    "Backdrop": "Polaris-OptionList-Checkbox__Backdrop",
    "Icon": "Polaris-OptionList-Checkbox__Icon",
    "active": "Polaris-OptionList-Checkbox--active",
    "keyFocused": "Polaris-OptionList-Checkbox--keyFocused",
    "Input-indeterminate": "Polaris-OptionList-Checkbox__Input--indeterminate",
    "hover": "Polaris-OptionList-Checkbox--hover"
  };
  
  var _ref$5 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.TickSmallMinor
  });
  
  function Checkbox({
    id: idProp,
    checked = false,
    disabled,
    active,
    onChange,
    name,
    value,
    role
  }) {
    const id = useUniqueId('Checkbox', idProp);
    const {
      newDesignLanguage
    } = useFeatures();
    const [keyFocused, setKeyFocused] = React.useState(false);
    const className = classNames(styles$o.Checkbox, active && styles$o.active, newDesignLanguage && styles$o.newDesignLanguage);
  
    const handleBlur = () => {
      setKeyFocused(false);
    };
  
    const handleKeyUp = () => {
      !keyFocused && setKeyFocused(true);
    };
  
    const inputClassName = classNames(styles$o.Input, newDesignLanguage && keyFocused && styles$o.keyFocused);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, /*#__PURE__*/React__default.createElement("input", {
      id: id,
      name: name,
      value: value,
      type: "checkbox",
      checked: checked,
      disabled: disabled,
      className: inputClassName,
      "aria-checked": checked,
      onChange: onChange,
      onBlur: handleBlur,
      onKeyUp: handleKeyUp,
      role: role
    }), /*#__PURE__*/React__default.createElement("div", {
      className: styles$o.Backdrop
    }), /*#__PURE__*/React__default.createElement("div", {
      className: styles$o.Icon
    }, _ref$5));
  }
  
  var styles$p = {
    "Option": "Polaris-OptionList-Option",
    "SingleSelectOption": "Polaris-OptionList-Option__SingleSelectOption",
    "disabled": "Polaris-OptionList-Option--disabled",
    "Media": "Polaris-OptionList-Option__Media",
    "Label": "Polaris-OptionList-Option__Label",
    "Checkbox": "Polaris-OptionList-Option__Checkbox",
    "newDesignLanguage": "Polaris-OptionList-Option--newDesignLanguage",
    "focused": "Polaris-OptionList-Option--focused",
    "select": "Polaris-OptionList-Option--select",
    "active": "Polaris-OptionList-Option--active"
  };
  
  var _ref$6 = /*#__PURE__*/React__default.createElement(Scrollable.ScrollTo, null);
  
  function Option({
    label,
    value,
    id,
    select,
    active,
    allowMultiple,
    disabled,
    role,
    media,
    onClick,
    section,
    index
  }) {
    const {
      value: focused,
      toggle: toggleFocused
    } = useToggle(false);
    const {
      newDesignLanguage
    } = useFeatures();
    const handleClick = React.useCallback(() => {
      if (disabled) {
        return;
      }
  
      onClick(section, index);
    }, [disabled, index, onClick, section]);
    const mediaMarkup = media ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$p.Media
    }, media) : null;
    const singleSelectClassName = classNames(styles$p.SingleSelectOption, focused && styles$p.focused, disabled && styles$p.disabled, select && styles$p.select, active && styles$p.active);
    const multiSelectClassName = classNames(styles$p.Label, disabled && styles$p.disabled, active && styles$p.active, newDesignLanguage && select && styles$p.select);
    const checkBoxRole = role === 'option' ? 'presentation' : undefined;
    const optionMarkup = allowMultiple ? /*#__PURE__*/React__default.createElement("label", {
      htmlFor: id,
      className: multiSelectClassName
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$p.Checkbox
    }, /*#__PURE__*/React__default.createElement(Checkbox, {
      id: id,
      value: value,
      checked: select,
      active: active,
      disabled: disabled,
      onChange: handleClick,
      role: checkBoxRole
    })), mediaMarkup, label) : /*#__PURE__*/React__default.createElement("button", {
      id: id,
      type: "button",
      className: singleSelectClassName,
      onClick: handleClick,
      disabled: disabled,
      onFocus: toggleFocused,
      onBlur: toggleFocused,
      "aria-pressed": active
    }, mediaMarkup, label);
    const scrollMarkup = active ? _ref$6 : null;
    const optionClassName = classNames(styles$p.Option, newDesignLanguage && styles$p.newDesignLanguage);
    return /*#__PURE__*/React__default.createElement("li", {
      key: id,
      className: optionClassName,
      tabIndex: -1
    }, scrollMarkup, optionMarkup);
  }
  
  var styles$q = {
    "OptionList": "Polaris-OptionList",
    "newDesignLanguage": "Polaris-OptionList--newDesignLanguage",
    "Options": "Polaris-OptionList__Options",
    "Title": "Polaris-OptionList__Title"
  };
  
  function OptionList({
    options,
    sections,
    title,
    selected,
    allowMultiple,
    role,
    optionRole,
    onChange,
    id: idProp
  }) {
    const [normalizedOptions, setNormalizedOptions] = React.useState(createNormalizedOptions(options, sections, title));
    const id = useUniqueId('OptionList', idProp);
    const {
      newDesignLanguage
    } = useFeatures();
    useDeepEffect(() => {
      setNormalizedOptions(createNormalizedOptions(options || [], sections || [], title));
    }, [options, sections, title], optionArraysAreEqual);
    const handleClick = React.useCallback((sectionIndex, optionIndex) => {
      const selectedValue = normalizedOptions[sectionIndex].options[optionIndex].value;
      const foundIndex = selected.indexOf(selectedValue);
  
      if (allowMultiple) {
        const newSelection = foundIndex === -1 ? [selectedValue, ...selected] : [...selected.slice(0, foundIndex), ...selected.slice(foundIndex + 1, selected.length)];
        onChange(newSelection);
        return;
      }
  
      onChange([selectedValue]);
    }, [normalizedOptions, selected, allowMultiple, onChange]);
    const optionsExist = normalizedOptions.length > 0;
    const optionsMarkup = optionsExist ? normalizedOptions.map(({
      title,
      options
    }, sectionIndex) => {
      const titleMarkup = title ? /*#__PURE__*/React__default.createElement("p", {
        className: styles$q.Title
      }, title) : null;
      const optionsMarkup = options && options.map((option, optionIndex) => {
        const isSelected = selected.includes(option.value);
        const optionId = option.id || `${id}-${sectionIndex}-${optionIndex}`;
        return /*#__PURE__*/React__default.createElement(Option, Object.assign({}, option, {
          key: optionId,
          id: optionId,
          section: sectionIndex,
          index: optionIndex,
          onClick: handleClick,
          select: isSelected,
          allowMultiple: allowMultiple,
          role: optionRole
        }));
      });
      return /*#__PURE__*/React__default.createElement("li", {
        key: title || `noTitle-${sectionIndex}`
      }, titleMarkup, /*#__PURE__*/React__default.createElement("ul", {
        className: styles$q.Options,
        id: `${id}-${sectionIndex}`,
        role: role
      }, optionsMarkup));
    }) : null;
    const optionListClassName = classNames(styles$q.OptionList, newDesignLanguage && styles$q.newDesignLanguage);
    return /*#__PURE__*/React__default.createElement("ul", {
      className: optionListClassName,
      role: role
    }, optionsMarkup);
  }
  
  function createNormalizedOptions(options, sections, title) {
    if (options == null) {
      const section = {
        options: [],
        title
      };
      return sections == null ? [] : [section, ...sections];
    }
  
    if (sections == null) {
      return [{
        title,
        options
      }];
    }
  
    return [{
      title,
      options
    }, ...sections];
  }
  
  function isSection(arr) {
    return typeof arr[0] === 'object' && Object.prototype.hasOwnProperty.call(arr[0], 'options');
  }
  
  function optionArraysAreEqual(firstArray, secondArray) {
    if (isSection(firstArray) && isSection(secondArray)) {
      return arraysAreEqual(firstArray, secondArray, testSectionsPropEquality);
    }
  
    return arraysAreEqual(firstArray, secondArray);
  }
  
  function testSectionsPropEquality(previousSection, currentSection) {
    const {
      options: previousOptions
    } = previousSection;
    const {
      options: currentOptions
    } = currentSection;
    const optionsAreEqual = arraysAreEqual(previousOptions, currentOptions);
    const titlesAreEqual = previousSection.title === currentSection.title;
    return optionsAreEqual && titlesAreEqual;
  }
  
  const ComboBoxContext = /*#__PURE__*/React.createContext({});
  
  var styles$r = {
    "EmptyState": "Polaris-Autocomplete-ComboBox__EmptyState"
  };
  
  function ComboBox({
    id: idProp,
    options,
    selected,
    textField,
    preferredPosition,
    listTitle,
    allowMultiple,
    actionsBefore,
    actionsAfter,
    contentBefore,
    contentAfter,
    emptyState,
    onSelect,
    onEndReached
  }) {
    const [selectedIndex, setSelectedIndex] = React.useState(-1);
    const [selectedOptions, setSelectedOptions] = React.useState(selected);
    const [navigableOptions, setNavigableOptions] = React.useState([]);
    const {
      value: popoverActive,
      setTrue: forcePopoverActiveTrue,
      setFalse: forcePopoverActiveFalse
    } = useToggle(false);
    const id = useUniqueId('ComboBox', idProp);
    const getActionsWithIds = React.useCallback((actions, before) => {
      if (before) {
        return navigableOptions.slice(0, actions.length);
      }
  
      return navigableOptions.slice(-actions.length);
    }, [navigableOptions]);
    const visuallyUpdateSelectedOption = React.useCallback((newOption, oldOption) => {
      if (oldOption) {
        oldOption.active = false;
      }
  
      if (newOption) {
        newOption.active = true;
      }
    }, []);
    const resetVisuallySelectedOptions = React.useCallback(() => {
      setSelectedIndex(-1);
      navigableOptions.forEach(option => {
        option.active = false;
      });
    }, [navigableOptions]);
    const selectOptionAtIndex = React.useCallback(newOptionIndex => {
      if (navigableOptions.length === 0) {
        return;
      }
  
      const oldSelectedOption = navigableOptions[selectedIndex];
      const newSelectedOption = navigableOptions[newOptionIndex];
      visuallyUpdateSelectedOption(newSelectedOption, oldSelectedOption);
      setSelectedIndex(newOptionIndex);
    }, [navigableOptions, selectedIndex, visuallyUpdateSelectedOption]);
    const selectNextOption = React.useCallback(() => {
      if (navigableOptions.length === 0) {
        return;
      }
  
      let newIndex = selectedIndex;
  
      if (selectedIndex + 1 >= navigableOptions.length) {
        newIndex = 0;
      } else {
        newIndex++;
      }
  
      selectOptionAtIndex(newIndex);
    }, [navigableOptions, selectOptionAtIndex, selectedIndex]);
    const selectPreviousOption = React.useCallback(() => {
      if (navigableOptions.length === 0) {
        return;
      }
  
      let newIndex = selectedIndex;
  
      if (selectedIndex <= 0) {
        newIndex = navigableOptions.length - 1;
      } else {
        newIndex--;
      }
  
      selectOptionAtIndex(newIndex);
    }, [navigableOptions, selectOptionAtIndex, selectedIndex]);
    const selectOptions = React.useCallback(selected => {
      selected && onSelect(selected);
  
      if (!allowMultiple) {
        resetVisuallySelectedOptions();
        forcePopoverActiveFalse();
      }
    }, [allowMultiple, forcePopoverActiveFalse, onSelect, resetVisuallySelectedOptions]);
    const handleSelection = React.useCallback(newSelected => {
      let newlySelectedOptions = selected;
  
      if (selected.includes(newSelected)) {
        newlySelectedOptions.splice(newlySelectedOptions.indexOf(newSelected), 1);
      } else if (allowMultiple) {
        newlySelectedOptions.push(newSelected);
      } else {
        newlySelectedOptions = [newSelected];
      }
  
      selectOptions(newlySelectedOptions);
    }, [allowMultiple, selectOptions, selected]);
    const handleEnter = React.useCallback(event => {
      if (event.keyCode !== exports.Key.Enter) {
        return;
      }
  
      if (popoverActive && selectedIndex > -1) {
        const selectedOption = navigableOptions[selectedIndex];
  
        if (isOption(selectedOption)) {
          event.preventDefault();
          handleSelection(selectedOption.value);
        } else {
          selectedOption.onAction && selectedOption.onAction();
        }
      }
    }, [handleSelection, navigableOptions, popoverActive, selectedIndex]);
    const handleBlur = React.useCallback(() => {
      forcePopoverActiveFalse();
      resetVisuallySelectedOptions();
    }, [forcePopoverActiveFalse, resetVisuallySelectedOptions]);
    const activatePopover = React.useCallback(() => {
      !popoverActive && forcePopoverActiveTrue();
    }, [forcePopoverActiveTrue, popoverActive]);
    const updateIndexOfSelectedOption = React.useCallback(newOptions => {
      const selectedOption = navigableOptions[selectedIndex];
  
      if (selectedOption && newOptions.includes(selectedOption)) {
        selectOptionAtIndex(newOptions.indexOf(selectedOption));
      } else if (selectedIndex > newOptions.length - 1) {
        resetVisuallySelectedOptions();
      } else {
        selectOptionAtIndex(selectedIndex);
      }
    }, [navigableOptions, resetVisuallySelectedOptions, selectOptionAtIndex, selectedIndex]);
    React.useEffect(() => {
      if (selectedOptions !== selected) {
        setSelectedOptions(selected);
      }
    }, [selected, selectedOptions]);
    React.useEffect(() => {
      let newNavigableOptions = [];
  
      if (actionsBefore) {
        newNavigableOptions = newNavigableOptions.concat(actionsBefore);
      }
  
      if (options) {
        newNavigableOptions = newNavigableOptions.concat(options);
      }
  
      if (actionsAfter) {
        newNavigableOptions = newNavigableOptions.concat(actionsAfter);
      }
  
      newNavigableOptions = assignOptionIds(newNavigableOptions, id);
      setNavigableOptions(newNavigableOptions);
    }, [actionsAfter, actionsBefore, id, options]);
    React.useEffect(() => {
      updateIndexOfSelectedOption(navigableOptions);
    }, [navigableOptions, updateIndexOfSelectedOption]);
    let actionsBeforeMarkup;
  
    if (actionsBefore && actionsBefore.length > 0) {
      actionsBeforeMarkup = /*#__PURE__*/React__default.createElement(ActionList, {
        actionRole: "option",
        items: getActionsWithIds(actionsBefore, true)
      });
    }
  
    let actionsAfterMarkup;
  
    if (actionsAfter && actionsAfter.length > 0) {
      actionsAfterMarkup = /*#__PURE__*/React__default.createElement(ActionList, {
        actionRole: "option",
        items: getActionsWithIds(actionsAfter)
      });
    }
  
    const optionsMarkup = options.length > 0 && /*#__PURE__*/React__default.createElement(OptionList, {
      role: "presentation",
      optionRole: "option",
      options: filterForOptions(navigableOptions),
      onChange: selectOptions,
      selected: selectedOptions,
      title: listTitle,
      allowMultiple: allowMultiple
    });
    const emptyStateMarkup = !actionsAfter && !actionsBefore && !contentAfter && !contentBefore && options.length === 0 && emptyState && /*#__PURE__*/React__default.createElement("div", {
      className: styles$r.EmptyState
    }, emptyState);
    const selectedOptionId = selectedIndex > -1 ? `${id}-${selectedIndex}` : undefined;
    const context = {
      id,
      selectedOptionId
    };
    return /*#__PURE__*/React__default.createElement(ComboBoxContext.Provider, {
      value: context
    }, /*#__PURE__*/React__default.createElement("div", {
      onClick: activatePopover,
      onKeyDown: activatePopover,
      "aria-expanded": popoverActive,
      "aria-owns": id,
      "aria-controls": id,
      "aria-haspopup": true,
      onFocus: forcePopoverActiveTrue,
      onBlur: handleBlur // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
      ,
      tabIndex: options.length === 0 ? -1 : 0
    }, /*#__PURE__*/React__default.createElement(KeypressListener, {
      keyCode: exports.Key.DownArrow,
      handler: selectNextOption
    }), /*#__PURE__*/React__default.createElement(KeypressListener, {
      keyCode: exports.Key.UpArrow,
      handler: selectPreviousOption
    }), /*#__PURE__*/React__default.createElement(EventListener, {
      event: "keydown",
      handler: handleEnter
    }), /*#__PURE__*/React__default.createElement(KeypressListener, {
      keyCode: exports.Key.Escape,
      handler: forcePopoverActiveFalse
    }), /*#__PURE__*/React__default.createElement(Popover, {
      activator: textField,
      active: popoverActive,
      onClose: forcePopoverActiveFalse,
      preferredPosition: preferredPosition,
      fullWidth: true,
      preventAutofocus: true
    }, /*#__PURE__*/React__default.createElement(Popover.Pane, {
      onScrolledToBottom: onEndReached
    }, /*#__PURE__*/React__default.createElement("div", {
      id: id,
      role: "listbox",
      "aria-multiselectable": allowMultiple
    }, contentBefore, actionsBeforeMarkup, optionsMarkup, actionsAfterMarkup, contentAfter, emptyStateMarkup)))));
  }
  
  function assignOptionIds(options, id) {
    return options.map((option, optionIndex) => _objectSpread2(_objectSpread2({}, option), {}, {
      id: `${id}-${optionIndex}`
    }));
  }
  
  function isOption(navigableOption) {
    return 'value' in navigableOption && navigableOption.value !== undefined;
  }
  
  function filterForOptions(mixedArray) {
    return mixedArray.filter(isOption);
  }
  
  var styles$s = {
    "Label": "Polaris-Label",
    "hidden": "Polaris-Label--hidden",
    "Text": "Polaris-Label__Text"
  };
  
  function labelID(id) {
    return `${id}Label`;
  }
  function Label({
    children,
    id,
    hidden
  }) {
    const className = classNames(styles$s.Label, hidden && styles$s.hidden);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, /*#__PURE__*/React__default.createElement("label", {
      id: labelID(id),
      htmlFor: id,
      className: styles$s.Text
    }, children));
  }
  
  var styles$t = {
    "InlineError": "Polaris-InlineError",
    "Icon": "Polaris-InlineError__Icon"
  };
  
  var _ref$7 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.AlertMinor
  });
  
  function InlineError({
    message,
    fieldID
  }) {
    if (!message) {
      return null;
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      id: errorTextID(fieldID),
      className: styles$t.InlineError
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$t.Icon
    }, _ref$7), message);
  }
  function errorTextID(id) {
    return `${id}Error`;
  }
  
  var styles$u = {
    "hidden": "Polaris-Labelled--hidden",
    "LabelWrapper": "Polaris-Labelled__LabelWrapper",
    "HelpText": "Polaris-Labelled__HelpText",
    "Error": "Polaris-Labelled__Error",
    "Action": "Polaris-Labelled__Action"
  };
  
  function Labelled(_ref) {
    let {
      id,
      label,
      error,
      action,
      helpText,
      children,
      labelHidden
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["id", "label", "error", "action", "helpText", "children", "labelHidden"]);
  
    const className = classNames(labelHidden && styles$u.hidden);
    const actionMarkup = action ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$u.Action
    }, buttonFrom(action, {
      plain: true
    })) : null;
    const helpTextMarkup = helpText ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$u.HelpText,
      id: helpTextID(id)
    }, helpText) : null;
    const errorMarkup = error && typeof error !== 'boolean' && /*#__PURE__*/React__default.createElement("div", {
      className: styles$u.Error
    }, /*#__PURE__*/React__default.createElement(InlineError, {
      message: error,
      fieldID: id
    }));
    const labelMarkup = label ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$u.LabelWrapper
    }, /*#__PURE__*/React__default.createElement(Label, Object.assign({
      id: id
    }, rest, {
      hidden: false
    }), label), actionMarkup) : null;
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, labelMarkup, children, errorMarkup, helpTextMarkup);
  }
  function helpTextID(id) {
    return `${id}HelpText`;
  }
  
  var styles$v = {
    "Connected": "Polaris-Connected",
    "Item": "Polaris-Connected__Item",
    "Item-primary": "Polaris-Connected__Item--primary",
    "newDesignLanguage": "Polaris-Connected--newDesignLanguage",
    "Item-connection": "Polaris-Connected__Item--connection",
    "Item-focused": "Polaris-Connected__Item--focused"
  };
  
  class Item$3 extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        focused: false
      };
  
      this.handleBlur = () => {
        this.setState({
          focused: false
        });
      };
  
      this.handleFocus = () => {
        this.setState({
          focused: true
        });
      };
    }
  
    render() {
      const {
        focused
      } = this.state;
      const {
        children,
        position
      } = this.props;
      const className = classNames(styles$v.Item, focused && styles$v['Item-focused'], position === 'primary' ? styles$v['Item-primary'] : styles$v['Item-connection']);
      return /*#__PURE__*/React__default.createElement("div", {
        onBlur: this.handleBlur,
        onFocus: this.handleFocus,
        className: className
      }, children);
    }
  
  }
  
  function Connected({
    children,
    left,
    right
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$v.Connected, newDesignLanguage && styles$v.newDesignLanguage);
    const leftConnectionMarkup = left ? /*#__PURE__*/React__default.createElement(Item$3, {
      position: "left"
    }, left) : null;
    const rightConnectionMarkup = right ? /*#__PURE__*/React__default.createElement(Item$3, {
      position: "right"
    }, right) : null;
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, leftConnectionMarkup, /*#__PURE__*/React__default.createElement(Item$3, {
      position: "primary"
    }, children), rightConnectionMarkup);
  }
  
  var styles$w = {
    "TextField": "Polaris-TextField",
    "multiline": "Polaris-TextField--multiline",
    "Input": "Polaris-TextField__Input",
    "hasValue": "Polaris-TextField--hasValue",
    "focus": "Polaris-TextField--focus",
    "Backdrop": "Polaris-TextField__Backdrop",
    "error": "Polaris-TextField--error",
    "readOnly": "Polaris-TextField--readOnly",
    "disabled": "Polaris-TextField--disabled",
    "Prefix": "Polaris-TextField__Prefix",
    "Input-hasClearButton": "Polaris-TextField__Input--hasClearButton",
    "Input-suffixed": "Polaris-TextField__Input--suffixed",
    "Input-alignRight": "Polaris-TextField__Input--alignRight",
    "Input-alignLeft": "Polaris-TextField__Input--alignLeft",
    "Input-alignCenter": "Polaris-TextField__Input--alignCenter",
    "Suffix": "Polaris-TextField__Suffix",
    "CharacterCount": "Polaris-TextField__CharacterCount",
    "AlignFieldBottom": "Polaris-TextField__AlignFieldBottom",
    "ClearButton": "Polaris-TextField__ClearButton",
    "ClearButton-hidden": "Polaris-TextField__ClearButton--hidden",
    "Spinner": "Polaris-TextField__Spinner",
    "SpinnerIcon": "Polaris-TextField__SpinnerIcon",
    "Resizer": "Polaris-TextField__Resizer",
    "DummyInput": "Polaris-TextField__DummyInput",
    "Segment": "Polaris-TextField__Segment",
    "newDesignLanguage": "Polaris-TextField--newDesignLanguage"
  };
  
  function Resizer({
    contents,
    currentHeight: currentHeightProp = null,
    minimumLines,
    onHeightChange
  }) {
    const contentNode = React.useRef(null);
    const minimumLinesNode = React.useRef(null);
    const animationFrame = React.useRef();
    const currentHeight = React.useRef(currentHeightProp);
  
    if (currentHeightProp !== currentHeight.current) {
      currentHeight.current = currentHeightProp;
    }
  
    React.useEffect(() => {
      return () => {
        if (animationFrame.current) {
          cancelAnimationFrame(animationFrame.current);
        }
      };
    }, []);
    const minimumLinesMarkup = minimumLines ? /*#__PURE__*/React__default.createElement("div", {
      ref: minimumLinesNode,
      className: styles$w.DummyInput,
      dangerouslySetInnerHTML: {
        __html: getContentsForMinimumLines(minimumLines)
      }
    }) : null;
    const handleHeightCheck = React.useCallback(() => {
      if (animationFrame.current) {
        cancelAnimationFrame(animationFrame.current);
      }
  
      animationFrame.current = requestAnimationFrame(() => {
        if (!contentNode.current || !minimumLinesNode.current) {
          return;
        }
  
        const newHeight = Math.max(contentNode.current.offsetHeight, minimumLinesNode.current.offsetHeight);
  
        if (newHeight !== currentHeight.current) {
          onHeightChange(newHeight);
        }
      });
    }, [onHeightChange]);
    React.useLayoutEffect(() => {
      handleHeightCheck();
    });
    return /*#__PURE__*/React__default.createElement("div", {
      "aria-hidden": true,
      className: styles$w.Resizer
    }, /*#__PURE__*/React__default.createElement(EventListener, {
      event: "resize",
      handler: handleHeightCheck
    }), /*#__PURE__*/React__default.createElement("div", {
      ref: contentNode,
      className: styles$w.DummyInput,
      dangerouslySetInnerHTML: {
        __html: getFinalContents(contents)
      }
    }), minimumLinesMarkup);
  }
  const ENTITIES_TO_REPLACE = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '\n': '<br>',
    '\r': ''
  };
  const REPLACE_REGEX$1 = new RegExp(`[${Object.keys(ENTITIES_TO_REPLACE).join()}]`, 'g');
  
  function replaceEntity(entity) {
    return ENTITIES_TO_REPLACE[entity];
  }
  
  function getContentsForMinimumLines(minimumLines) {
    let content = '';
  
    for (let line = 0; line < minimumLines; line++) {
      content += '<br>';
    }
  
    return content;
  }
  
  function getFinalContents(contents) {
    return contents ? `${contents.replace(REPLACE_REGEX$1, replaceEntity)}<br>` : '<br>';
  }
  
  var _ref$8 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CaretUpMinor
  });
  
  var _ref2$1 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CaretDownMinor
  });
  
  function Spinner$1({
    onChange,
    onClick,
    onMouseDown,
    onMouseUp
  }) {
    function handleStep(step) {
      return () => onChange(step);
    }
  
    function handleMouseDown(onChange) {
      return event => {
        if (event.button !== 0) return;
        onMouseDown(onChange);
      };
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$w.Spinner,
      onClick: onClick,
      "aria-hidden": true
    }, /*#__PURE__*/React__default.createElement("div", {
      role: "button",
      className: styles$w.Segment,
      tabIndex: -1,
      onClick: handleStep(1),
      onMouseDown: handleMouseDown(handleStep(1)),
      onMouseUp: onMouseUp
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$w.SpinnerIcon
    }, _ref$8)), /*#__PURE__*/React__default.createElement("div", {
      role: "button",
      className: styles$w.Segment,
      tabIndex: -1,
      onClick: handleStep(-1),
      onMouseDown: handleMouseDown(handleStep(-1)),
      onMouseUp: onMouseUp
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$w.SpinnerIcon
    }, _ref2$1)));
  }
  
  var _ref$9 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CircleCancelMinor,
    color: "inkLightest"
  });
  
  function TextField({
    prefix,
    suffix,
    placeholder,
    value,
    helpText,
    label,
    labelAction,
    labelHidden,
    disabled,
    clearButton,
    readOnly,
    autoFocus,
    focused,
    multiline,
    error,
    connectedRight,
    connectedLeft,
    type,
    name,
    id: idProp,
    role,
    step,
    autoComplete,
    max,
    maxLength,
    min,
    minLength,
    pattern,
    inputMode,
    spellCheck,
    ariaOwns,
    ariaControls,
    ariaExpanded,
    ariaActiveDescendant,
    ariaAutocomplete,
    showCharacterCount,
    align,
    onClearButtonClick,
    onChange,
    onFocus,
    onBlur
  }) {
    const i18n = useI18n();
    const [height, setHeight] = React.useState(null);
    const [focus, setFocus] = React.useState(Boolean(focused));
    const isAfterInitial = useIsAfterInitialMount();
    const id = useUniqueId('TextField', idProp);
    const inputRef = React.useRef(null);
    const prefixRef = React.useRef(null);
    const suffixRef = React.useRef(null);
    const buttonPressTimer = React.useRef();
    React.useEffect(() => {
      const input = inputRef.current;
      if (!input || focused === undefined) return;
      focused ? input.focus() : input.blur();
    }, [focused]);
    const {
      newDesignLanguage
    } = useFeatures(); // Use a typeof check here as Typescript mostly protects us from non-stringy
    // values but overzealous usage of `any` in consuming apps means people have
    // been known to pass a number in, so make it clear that doesn't work.
  
    const normalizedValue = typeof value === 'string' ? value : '';
    const normalizedStep = step != null ? step : 1;
    const normalizedMax = max != null ? max : Infinity;
    const normalizedMin = min != null ? min : -Infinity;
    const className = classNames(styles$w.TextField, Boolean(normalizedValue) && styles$w.hasValue, disabled && styles$w.disabled, readOnly && styles$w.readOnly, error && styles$w.error, multiline && styles$w.multiline, focus && styles$w.focus, newDesignLanguage && styles$w.newDesignLanguage);
    const inputType = type === 'currency' ? 'text' : type;
    const prefixMarkup = prefix ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$w.Prefix,
      id: `${id}Prefix`,
      ref: prefixRef
    }, prefix) : null;
    const suffixMarkup = suffix ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$w.Suffix,
      id: `${id}Suffix`,
      ref: suffixRef
    }, suffix) : null;
    let characterCountMarkup = null;
  
    if (showCharacterCount) {
      const characterCount = normalizedValue.length;
      const characterCountLabel = maxLength ? i18n.translate('Polaris.TextField.characterCountWithMaxLength', {
        count: characterCount,
        limit: maxLength
      }) : i18n.translate('Polaris.TextField.characterCount', {
        count: characterCount
      });
      const characterCountClassName = classNames(styles$w.CharacterCount, multiline && styles$w.AlignFieldBottom);
      const characterCountText = !maxLength ? characterCount : `${characterCount}/${maxLength}`;
      characterCountMarkup = /*#__PURE__*/React__default.createElement("div", {
        id: `${id}CharacterCounter`,
        className: characterCountClassName,
        "aria-label": characterCountLabel,
        "aria-live": focus ? 'polite' : 'off',
        "aria-atomic": "true"
      }, characterCountText);
    }
  
    const clearButtonVisible = normalizedValue !== '';
    const clearButtonClassName = classNames(styles$w.ClearButton, !clearButtonVisible && styles$w['ClearButton-hidden']);
    const clearButtonMarkup = clearButton ? /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      className: clearButtonClassName,
      onClick: handleClearButtonPress,
      disabled: disabled,
      tabIndex: clearButtonVisible ? 0 : -1
    }, /*#__PURE__*/React__default.createElement(VisuallyHidden, null, i18n.translate('Polaris.Common.clear')), _ref$9) : null;
    const handleNumberChange = React.useCallback(steps => {
      if (onChange == null) {
        return;
      } // Returns the length of decimal places in a number
  
  
      const dpl = num => (num.toString().split('.')[1] || []).length;
  
      const numericValue = value ? parseFloat(value) : 0;
  
      if (isNaN(numericValue)) {
        return;
      } // Making sure the new value has the same length of decimal places as the
      // step / value has.
  
  
      const decimalPlaces = Math.max(dpl(numericValue), dpl(normalizedStep));
      const newValue = Math.min(Number(normalizedMax), Math.max(numericValue + steps * normalizedStep, Number(normalizedMin)));
      onChange(String(newValue.toFixed(decimalPlaces)), id);
    }, [id, normalizedMax, normalizedMin, onChange, normalizedStep, value]);
    const handleButtonRelease = React.useCallback(() => {
      clearTimeout(buttonPressTimer.current);
    }, []);
    const handleButtonPress = React.useCallback(onChange => {
      const minInterval = 50;
      const decrementBy = 10;
      let interval = 200;
  
      const onChangeInterval = () => {
        if (interval > minInterval) interval -= decrementBy;
        onChange(0);
        buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
      };
  
      buttonPressTimer.current = window.setTimeout(onChangeInterval, interval);
      document.addEventListener('mouseup', handleButtonRelease, {
        once: true
      });
    }, [handleButtonRelease]);
    const spinnerMarkup = type === 'number' && step !== 0 && !disabled && !readOnly ? /*#__PURE__*/React__default.createElement(Spinner$1, {
      onChange: handleNumberChange,
      onMouseDown: handleButtonPress,
      onMouseUp: handleButtonRelease
    }) : null;
    const style = multiline && height ? {
      height
    } : null;
    const handleExpandingResize = React.useCallback(height => {
      setHeight(height);
    }, []);
    const resizer = multiline && isAfterInitial ? /*#__PURE__*/React__default.createElement(Resizer, {
      contents: normalizedValue || placeholder,
      currentHeight: height,
      minimumLines: typeof multiline === 'number' ? multiline : 1,
      onHeightChange: handleExpandingResize
    }) : null;
    const describedBy = [];
  
    if (error) {
      describedBy.push(`${id}Error`);
    }
  
    if (helpText) {
      describedBy.push(helpTextID(id));
    }
  
    if (showCharacterCount) {
      describedBy.push(`${id}CharacterCounter`);
    }
  
    const labelledBy = [];
  
    if (prefix) {
      labelledBy.push(`${id}Prefix`);
    }
  
    if (suffix) {
      labelledBy.push(`${id}Suffix`);
    }
  
    labelledBy.unshift(labelID(id));
    const inputClassName = classNames(styles$w.Input, align && styles$w[variationName('Input-align', align)], suffix && styles$w['Input-suffixed'], clearButton && styles$w['Input-hasClearButton']);
    const input = /*#__PURE__*/React.createElement(multiline ? 'textarea' : 'input', _objectSpread2({
      name,
      id,
      disabled,
      readOnly,
      role,
      autoFocus,
      value: normalizedValue,
      placeholder,
      onFocus,
      onBlur,
      onKeyPress: handleKeyPress,
      style,
      autoComplete: normalizeAutoComplete(autoComplete),
      className: inputClassName,
      onChange: handleChange,
      ref: inputRef,
      min,
      max,
      step,
      minLength,
      maxLength,
      spellCheck,
      pattern,
      inputMode,
      type: inputType,
      'aria-describedby': describedBy.length ? describedBy.join(' ') : undefined,
      'aria-labelledby': labelledBy.join(' '),
      'aria-invalid': Boolean(error),
      'aria-owns': ariaOwns,
      'aria-activedescendant': ariaActiveDescendant,
      'aria-autocomplete': ariaAutocomplete,
      'aria-controls': ariaControls,
      'aria-expanded': ariaExpanded
    }, normalizeAriaMultiline(multiline)));
    const backdropClassName = classNames(styles$w.Backdrop, newDesignLanguage && connectedLeft && styles$w['Backdrop-connectedLeft'], newDesignLanguage && connectedRight && styles$w['Backdrop-connectedRight']);
    return /*#__PURE__*/React__default.createElement(Labelled, {
      label: label,
      id: id,
      error: error,
      action: labelAction,
      labelHidden: labelHidden,
      helpText: helpText
    }, /*#__PURE__*/React__default.createElement(Connected, {
      left: connectedLeft,
      right: connectedRight
    }, /*#__PURE__*/React__default.createElement("div", {
      className: className,
      onFocus: handleFocus,
      onBlur: handleBlur,
      onClick: handleClick
    }, prefixMarkup, input, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: backdropClassName
    }), resizer)));
  
    function handleClearButtonPress() {
      onClearButtonClick && onClearButtonClick(id);
    }
  
    function handleKeyPress(event) {
      const {
        key,
        which
      } = event;
      const numbersSpec = /[\d.eE+-]$/;
  
      if (type !== 'number' || which === exports.Key.Enter || numbersSpec.test(key)) {
        return;
      }
  
      event.preventDefault();
    }
  
    function containsAffix(target) {
      return target instanceof HTMLElement && (prefixRef.current && prefixRef.current.contains(target) || suffixRef.current && suffixRef.current.contains(target));
    }
  
    function handleChange(event) {
      onChange && onChange(event.currentTarget.value, id);
    }
  
    function handleFocus({
      target
    }) {
      if (containsAffix(target)) {
        return;
      }
  
      setFocus(true);
    }
  
    function handleBlur() {
      setFocus(false);
    }
  
    function handleClick({
      target
    }) {
      if (containsAffix(target)) {
        return;
      }
  
      inputRef.current && inputRef.current.focus();
    }
  }
  
  function normalizeAutoComplete(autoComplete) {
    if (autoComplete === true) {
      return 'on';
    } else if (autoComplete === false) {
      return 'off';
    } else {
      return autoComplete;
    }
  }
  
  function normalizeAriaMultiline(multiline) {
    if (!multiline) return undefined;
    return Boolean(multiline) || multiline > 0 ? {
      'aria-multiline': true
    } : undefined;
  }
  
  function TextField$1(props) {
    return /*#__PURE__*/React__default.createElement(ComboBoxContext.Consumer, null, ({
      selectedOptionId,
      comboBoxId
    }) => /*#__PURE__*/React__default.createElement(TextField, Object.assign({}, props, {
      role: "combobox",
      autoComplete: false,
      ariaAutocomplete: "list",
      ariaActiveDescendant: selectedOptionId,
      ariaControls: comboBoxId
    })));
  }
  
  var styles$x = {
    "Loading": "Polaris-Autocomplete__Loading"
  };
  
  // TypeScript can't generate types that correctly infer the typing of
  // subcomponents so explicitly state the subcomponents in the type definition.
  // Letting this be implicit works in this project but fails in projects that use
  // generated *.d.ts files.
  const Autocomplete = function Autocomplete({
    id,
    options,
    selected,
    textField,
    preferredPosition,
    listTitle,
    allowMultiple,
    loading,
    actionBefore,
    willLoadMoreResults,
    emptyState,
    onSelect,
    onLoadMoreResults
  }) {
    const i18n = useI18n();
    const spinnerMarkup = loading ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$x.Loading
    }, /*#__PURE__*/React__default.createElement(Spinner, {
      size: "small",
      accessibilityLabel: i18n.translate('Polaris.Autocomplete.spinnerAccessibilityLabel')
    })) : null;
    const conditionalOptions = loading && !willLoadMoreResults ? [] : options;
    const conditionalAction = actionBefore && actionBefore !== [] ? [actionBefore] : undefined;
    return /*#__PURE__*/React__default.createElement(ComboBox, {
      id: id,
      options: conditionalOptions,
      selected: selected,
      textField: textField,
      preferredPosition: preferredPosition,
      listTitle: listTitle,
      allowMultiple: allowMultiple,
      contentAfter: spinnerMarkup,
      actionsBefore: conditionalAction,
      onSelect: onSelect,
      onEndReached: onLoadMoreResults,
      emptyState: emptyState
    });
  };
  Autocomplete.ComboBox = ComboBox;
  Autocomplete.TextField = TextField$1;
  
  var ScrollLock = {};
  
  // Even though this has no args, reference ScrollLockProps so the prop explorer
  // in the styleguide works without warnings about unfound props
  function ScrollLock$1(_) {
    const scrollLockManager = useScrollLockManager();
    React.useEffect(() => {
      scrollLockManager.registerScrollLock();
      return () => {
        scrollLockManager.unregisterScrollLock();
      };
    }, [scrollLockManager]);
    return null;
  }
  
  var styles$y = {
    "Backdrop": "Polaris-Backdrop",
    "fade-in": "Polaris-Backdrop__fade--in",
    "transparent": "Polaris-Backdrop--transparent",
    "belowNavigation": "Polaris-Backdrop--belowNavigation"
  };
  
  var _ref$a = /*#__PURE__*/React__default.createElement(ScrollLock$1, null);
  
  function Backdrop(props) {
    const {
      onClick,
      onTouchStart,
      belowNavigation,
      transparent
    } = props;
    const className = classNames(styles$y.Backdrop, belowNavigation && styles$y.belowNavigation, transparent && styles$y.transparent);
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _ref$a, /*#__PURE__*/React__default.createElement("div", {
      className: className,
      onClick: onClick,
      onTouchStart: onTouchStart
    }));
  }
  
  const BannerContext = /*#__PURE__*/React.createContext(false);
  
  var styles$z = {
    "Banner": "Polaris-Banner",
    "ContentWrapper": "Polaris-Banner__ContentWrapper",
    "withinContentContainer": "Polaris-Banner--withinContentContainer",
    "newDesignLanguage": "Polaris-Banner--newDesignLanguage",
    "Dismiss": "Polaris-Banner__Dismiss",
    "Ribbon": "Polaris-Banner__Ribbon",
    "keyFocused": "Polaris-Banner--keyFocused",
    "statusSuccess": "Polaris-Banner--statusSuccess",
    "statusInfo": "Polaris-Banner--statusInfo",
    "statusWarning": "Polaris-Banner--statusWarning",
    "statusCritical": "Polaris-Banner--statusCritical",
    "Actions": "Polaris-Banner__Actions",
    "withinPage": "Polaris-Banner--withinPage",
    "hasDismiss": "Polaris-Banner--hasDismiss",
    "Heading": "Polaris-Banner__Heading",
    "Content": "Polaris-Banner__Content",
    "PrimaryAction": "Polaris-Banner__PrimaryAction",
    "SecondaryAction": "Polaris-Banner__SecondaryAction",
    "Text": "Polaris-Banner__Text",
    "Button": "Polaris-Banner__Button",
    "pressed": "Polaris-Banner--pressed"
  };
  
  const Banner = /*#__PURE__*/React.forwardRef(function Banner({
    icon,
    action,
    secondaryAction,
    title,
    children,
    status,
    onDismiss,
    stopAnnouncements
  }, bannerRef) {
    const {
      newDesignLanguage
    } = useFeatures();
    const withinContentContainer = React.useContext(WithinContentContext);
    const buttonSizeValue = withinContentContainer ? 'slim' : undefined;
    const id = useUniqueId('Banner');
    const {
      wrapperRef,
      handleKeyUp,
      handleBlur,
      handleMouseUp,
      shouldShowFocus
    } = useBannerFocus(bannerRef);
    const {
      defaultIcon,
      iconColor,
      ariaRoleType
    } = useBannerAttributes(status, newDesignLanguage);
    const iconName = icon || defaultIcon;
    const className = classNames(styles$z.Banner, status && styles$z[variationName('status', status)], onDismiss && styles$z.hasDismiss, shouldShowFocus && styles$z.keyFocused, withinContentContainer ? styles$z.withinContentContainer : styles$z.withinPage, newDesignLanguage && styles$z.newDesignLanguage);
    let headingMarkup = null;
    let headingID;
  
    if (title) {
      headingID = `${id}Heading`;
      headingMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: styles$z.Heading,
        id: headingID
      }, /*#__PURE__*/React__default.createElement(Heading, {
        element: "p"
      }, title));
    }
  
    const primaryActionMarkup = action ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$z.PrimaryAction
    }, newDesignLanguage ? unstyledButtonFrom(action, {
      className: styles$z.Button
    }) : buttonFrom(action, {
      outline: true,
      size: buttonSizeValue
    })) : null;
    const secondaryActionMarkup = secondaryAction ? /*#__PURE__*/React__default.createElement(SecondaryActionFrom, {
      action: secondaryAction
    }) : null;
    const actionMarkup = action || secondaryAction ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$z.Actions
    }, /*#__PURE__*/React__default.createElement(ButtonGroup, null, primaryActionMarkup, secondaryActionMarkup)) : null;
    let contentMarkup = null;
    let contentID;
  
    if (children || actionMarkup) {
      contentID = `${id}Content`;
      contentMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: styles$z.Content,
        id: contentID
      }, children, actionMarkup);
    }
  
    const dismissButton = onDismiss && /*#__PURE__*/React__default.createElement("div", {
      className: styles$z.Dismiss
    }, /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      icon: polarisIcons.CancelSmallMinor,
      onClick: onDismiss,
      accessibilityLabel: "Dismiss notification"
    }));
    return /*#__PURE__*/React__default.createElement(BannerContext.Provider, {
      value: true
    }, /*#__PURE__*/React__default.createElement("div", {
      className: className // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
      ,
      tabIndex: 0,
      ref: wrapperRef,
      role: ariaRoleType,
      "aria-live": stopAnnouncements ? 'off' : 'polite',
      onMouseUp: handleMouseUp,
      onKeyUp: handleKeyUp,
      onBlur: handleBlur,
      "aria-labelledby": headingID,
      "aria-describedby": contentID
    }, dismissButton, /*#__PURE__*/React__default.createElement("div", {
      className: styles$z.Ribbon
    }, /*#__PURE__*/React__default.createElement(Icon, {
      source: iconName,
      color: iconColor,
      backdrop: !newDesignLanguage
    })), /*#__PURE__*/React__default.createElement("div", {
      className: styles$z.ContentWrapper
    }, headingMarkup, contentMarkup)));
  });
  
  function SecondaryActionFrom({
    action
  }) {
    if (action.url) {
      return /*#__PURE__*/React__default.createElement(UnstyledLink, {
        className: styles$z.SecondaryAction,
        url: action.url,
        external: action.external
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$z.Text
      }, action.content));
    }
  
    return /*#__PURE__*/React__default.createElement(UnstyledButton, {
      className: styles$z.SecondaryAction,
      onClick: action.onAction
    }, /*#__PURE__*/React__default.createElement("span", {
      className: styles$z.Text
    }, action.content));
  }
  
  function useBannerAttributes(status, newDesignLanguage) {
    switch (status) {
      case 'success':
        return {
          defaultIcon: polarisIcons.CircleTickMajor,
          iconColor: newDesignLanguage ? 'success' : 'greenDark',
          ariaRoleType: 'status'
        };
  
      case 'info':
        return {
          defaultIcon: polarisIcons.CircleInformationMajor,
          iconColor: newDesignLanguage ? 'highlight' : 'tealDark',
          ariaRoleType: 'status'
        };
  
      case 'warning':
        return {
          defaultIcon: polarisIcons.CircleAlertMajor,
          iconColor: newDesignLanguage ? 'warning' : 'yellowDark',
          ariaRoleType: 'alert'
        };
  
      case 'critical':
        return {
          defaultIcon: polarisIcons.DiamondAlertMajor,
          iconColor: newDesignLanguage ? 'critical' : 'redDark',
          ariaRoleType: 'alert'
        };
  
      default:
        return {
          defaultIcon: newDesignLanguage ? polarisIcons.CircleInformationMajor : polarisIcons.FlagMajor,
          iconColor: newDesignLanguage ? 'base' : 'inkLighter',
          ariaRoleType: 'status'
        };
    }
  }
  
  function useBannerFocus(bannerRef) {
    const wrapperRef = React.useRef(null);
    const [shouldShowFocus, setShouldShowFocus] = React.useState(false);
    React.useImperativeHandle(bannerRef, () => ({
      focus: () => {
        var _wrapperRef$current;
  
        (_wrapperRef$current = wrapperRef.current) == null ? void 0 : _wrapperRef$current.focus();
        setShouldShowFocus(true);
      }
    }), []);
  
    const handleKeyUp = event => {
      if (event.target === wrapperRef.current) {
        setShouldShowFocus(true);
      }
    };
  
    const handleBlur = () => setShouldShowFocus(false);
  
    const handleMouseUp = event => {
      event.currentTarget.blur();
      setShouldShowFocus(false);
    };
  
    return {
      wrapperRef,
      handleKeyUp,
      handleBlur,
      handleMouseUp,
      shouldShowFocus
    };
  }
  
  var styles$A = {
    "Breadcrumb": "Polaris-Breadcrumbs__Breadcrumb",
    "newDesignLanguage": "Polaris-Breadcrumbs--newDesignLanguage",
    "Icon": "Polaris-Breadcrumbs__Icon",
    "ContentWrapper": "Polaris-Breadcrumbs__ContentWrapper",
    "Content": "Polaris-Breadcrumbs__Content"
  };
  
  class Breadcrumbs extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.context = void 0;
    }
  
    render() {
      const {
        newDesignLanguage
      } = this.context || {};
      const {
        breadcrumbs
      } = this.props;
      const breadcrumb = breadcrumbs[breadcrumbs.length - 1];
  
      if (breadcrumb == null) {
        return null;
      }
  
      const {
        content
      } = breadcrumb;
      const contentMarkup = /*#__PURE__*/React__default.createElement("span", {
        className: styles$A.ContentWrapper
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$A.Icon
      }, /*#__PURE__*/React__default.createElement(Icon, {
        source: newDesignLanguage ? polarisIcons.ArrowLeftMinor : polarisIcons.ChevronLeftMinor
      })), newDesignLanguage ? /*#__PURE__*/React__default.createElement(VisuallyHidden, null, content) : /*#__PURE__*/React__default.createElement("span", {
        className: styles$A.Content
      }, content));
      const breadcrumbClassNames = classNames(styles$A.Breadcrumb, newDesignLanguage && styles$A.newDesignLanguage);
      const breadcrumbMarkup = 'url' in breadcrumb ? /*#__PURE__*/React__default.createElement(UnstyledLink, {
        key: content,
        url: breadcrumb.url,
        className: breadcrumbClassNames,
        onMouseUp: handleMouseUpByBlurring,
        "aria-label": breadcrumb.accessibilityLabel
      }, contentMarkup) : /*#__PURE__*/React__default.createElement("button", {
        key: content,
        className: breadcrumbClassNames,
        onClick: breadcrumb.onAction,
        onMouseUp: handleMouseUpByBlurring,
        type: "button",
        "aria-label": breadcrumb.accessibilityLabel
      }, contentMarkup);
      return /*#__PURE__*/React__default.createElement("nav", {
        role: "navigation"
      }, breadcrumbMarkup);
    }
  
  }
  Breadcrumbs.contextType = FeaturesContext;
  
  var styles$B = {
    "Choice": "Polaris-Choice",
    "labelHidden": "Polaris-Choice--labelHidden",
    "Label": "Polaris-Choice__Label",
    "Control": "Polaris-Choice__Control",
    "disabled": "Polaris-Choice--disabled",
    "Descriptions": "Polaris-Choice__Descriptions",
    "HelpText": "Polaris-Choice__HelpText"
  };
  
  function Choice({
    id,
    label,
    disabled,
    error,
    children,
    labelHidden,
    helpText,
    onClick,
    onMouseOut,
    onMouseOver
  }) {
    const className = classNames(styles$B.Choice, labelHidden && styles$B.labelHidden, disabled && styles$B.disabled);
    const labelMarkup = /*#__PURE__*/React__default.createElement("label", {
      className: className,
      htmlFor: id,
      onClick: onClick,
      onMouseOver: onMouseOver,
      onMouseOut: onMouseOut
    }, /*#__PURE__*/React__default.createElement("span", {
      className: styles$B.Control
    }, children), /*#__PURE__*/React__default.createElement("span", {
      className: styles$B.Label
    }, label));
    const helpTextMarkup = helpText ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$B.HelpText,
      id: helpTextID$1(id)
    }, helpText) : null;
    const errorMarkup = error && typeof error !== 'boolean' && /*#__PURE__*/React__default.createElement("div", {
      className: styles$B.Error
    }, /*#__PURE__*/React__default.createElement(InlineError, {
      message: error,
      fieldID: id
    }));
    const descriptionMarkup = helpTextMarkup || errorMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$B.Descriptions
    }, errorMarkup, helpTextMarkup) : null;
    return descriptionMarkup ? /*#__PURE__*/React__default.createElement("div", null, labelMarkup, descriptionMarkup) : labelMarkup;
  }
  function helpTextID$1(id) {
    return `${id}HelpText`;
  }
  
  var styles$C = {
    "Checkbox": "Polaris-Checkbox",
    "Input": "Polaris-Checkbox__Input",
    "newDesignLanguage": "Polaris-Checkbox--newDesignLanguage",
    "Backdrop": "Polaris-Checkbox__Backdrop",
    "Input-indeterminate": "Polaris-Checkbox__Input--indeterminate",
    "Icon": "Polaris-Checkbox__Icon",
    "keyFocused": "Polaris-Checkbox--keyFocused",
    "hover": "Polaris-Checkbox--hover",
    "error": "Polaris-Checkbox--error"
  };
  
  const Checkbox$1 = /*#__PURE__*/React.forwardRef(function Checkbox({
    ariaDescribedBy: ariaDescribedByProp,
    label,
    labelHidden,
    checked = false,
    helpText,
    disabled,
    id: idProp,
    name,
    value,
    error,
    onChange,
    onFocus,
    onBlur
  }, ref) {
    const inputNode = React.useRef(null);
    const {
      newDesignLanguage
    } = useFeatures();
    const id = useUniqueId('Checkbox', idProp);
    const {
      value: mouseOver,
      setTrue: handleMouseOver,
      setFalse: handleMouseOut
    } = useToggle(false);
    const [keyFocused, setKeyFocused] = React.useState(false);
    React.useImperativeHandle(ref, () => ({
      focus: () => {
        if (inputNode.current) {
          inputNode.current.focus();
        }
      }
    }));
  
    const handleBlur = () => {
      onBlur && onBlur();
      setKeyFocused(false);
    };
  
    const handleInput = () => {
      if (onChange == null || inputNode.current == null || disabled) {
        return;
      }
  
      onChange(!inputNode.current.checked, id);
      inputNode.current.focus();
    };
  
    const handleKeyUp = event => {
      const {
        keyCode
      } = event;
      !keyFocused && setKeyFocused(true);
  
      if (keyCode === exports.Key.Space) {
        handleInput();
      }
    };
  
    const describedBy = [];
  
    if (error && typeof error !== 'boolean') {
      describedBy.push(errorTextID(id));
    }
  
    if (helpText) {
      describedBy.push(helpTextID$1(id));
    }
  
    if (ariaDescribedByProp) {
      describedBy.push(ariaDescribedByProp);
    }
  
    const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
    const wrapperClassName = classNames(styles$C.Checkbox, error && styles$C.error, newDesignLanguage && styles$C.newDesignLanguage);
    const backdropClassName = classNames(styles$C.Backdrop, mouseOver && styles$C.hover);
    const isIndeterminate = checked === 'indeterminate';
    const isChecked = !isIndeterminate && Boolean(checked);
    const indeterminateAttributes = isIndeterminate ? {
      indeterminate: 'true',
      'aria-checked': 'mixed'
    } : {
      'aria-checked': isChecked
    };
    const iconSource = isIndeterminate ? polarisIcons.MinusMinor : polarisIcons.TickSmallMinor;
    const inputClassName = classNames(styles$C.Input, isIndeterminate && styles$C['Input-indeterminate'], newDesignLanguage && keyFocused && styles$C.keyFocused);
    return (
      /*#__PURE__*/
  
      /* eslint-disable jsx-a11y/no-redundant-roles */
      React__default.createElement(Choice, {
        id: id,
        label: label,
        labelHidden: labelHidden,
        helpText: helpText,
        error: error,
        disabled: disabled,
        onClick: handleInput,
        onMouseOver: handleMouseOver,
        onMouseOut: handleMouseOut
      }, /*#__PURE__*/React__default.createElement("span", {
        className: wrapperClassName
      }, /*#__PURE__*/React__default.createElement("input", Object.assign({
        onKeyUp: handleKeyUp,
        ref: inputNode,
        id: id,
        name: name,
        value: value,
        type: "checkbox",
        checked: isChecked,
        disabled: disabled,
        className: inputClassName,
        onFocus: onFocus,
        onBlur: handleBlur,
        onClick: stopPropagation,
        onChange: noop$2,
        "aria-invalid": error != null,
        "aria-describedby": ariaDescribedBy,
        role: "checkbox"
      }, indeterminateAttributes)), /*#__PURE__*/React__default.createElement("span", {
        className: backdropClassName
      }), /*#__PURE__*/React__default.createElement("span", {
        className: styles$C.Icon
      }, /*#__PURE__*/React__default.createElement(Icon, {
        source: iconSource
      }))))
      /* eslint-enable jsx-a11y/no-redundant-roles */
  
    );
  });
  
  function noop$2() {}
  
  function stopPropagation(event) {
    event.stopPropagation();
  }
  
  const ResourceListContext = /*#__PURE__*/React.createContext({});
  
  const SELECT_ALL_ITEMS = 'All';
  
  var styles$D = {
    "CheckableButton": "Polaris-CheckableButton",
    "newDesignLanguage": "Polaris-CheckableButton--newDesignLanguage",
    "CheckableButton-selectMode": "Polaris-CheckableButton__CheckableButton--selectMode",
    "CheckableButton-measuring": "Polaris-CheckableButton__CheckableButton--measuring",
    "CheckableButton-plain": "Polaris-CheckableButton__CheckableButton--plain",
    "CheckableButton-selected": "Polaris-CheckableButton__CheckableButton--selected",
    "Checkbox": "Polaris-CheckableButton__Checkbox",
    "Label": "Polaris-CheckableButton__Label"
  };
  
  function CheckableButton({
    accessibilityLabel,
    label = '',
    onToggleAll,
    selected,
    selectMode,
    plain,
    measuring,
    disabled,
    smallScreen
  }) {
    const checkBoxRef = React.useRef(null);
    const {
      newDesignLanguage
    } = useFeatures();
    const {
      registerCheckableButtons
    } = React.useContext(ResourceListContext);
    let currentKey = 'bulkLg';
  
    if (plain) {
      currentKey = 'plain';
    } else if (smallScreen) {
      currentKey = 'bulkSm';
    }
  
    React.useEffect(() => {
      if (checkBoxRef.current && registerCheckableButtons) {
        registerCheckableButtons(currentKey, checkBoxRef.current);
      }
    }, [currentKey, registerCheckableButtons]);
    const className = plain ? classNames(styles$D.CheckableButton, styles$D['CheckableButton-plain'], newDesignLanguage && styles$D.newDesignLanguage) : classNames(styles$D.CheckableButton, newDesignLanguage && styles$D.newDesignLanguage, selectMode && styles$D['CheckableButton-selectMode'], selected && styles$D['CheckableButton-selected'], measuring && styles$D['CheckableButton-measuring']);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className,
      onClick: onToggleAll
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$D.Checkbox
    }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
      label: accessibilityLabel,
      labelHidden: true,
      checked: selected,
      disabled: disabled,
      onChange: onToggleAll,
      ref: checkBoxRef
    })), /*#__PURE__*/React__default.createElement("span", {
      className: styles$D.Label
    }, label));
  }
  
  var styles$E = {
    "Indicator": "Polaris-Indicator",
    "pulseIndicator": "Polaris-Indicator--pulseIndicator",
    "bounce": "Polaris-Indicator--bounce",
    "pulse": "Polaris-Indicator--pulse"
  };
  
  function Indicator({
    pulse = true
  }) {
    const className = classNames(styles$E.Indicator, pulse && styles$E.pulseIndicator);
    return /*#__PURE__*/React__default.createElement("span", {
      className: className
    });
  }
  
  /**
   * Similarly to the life-cycle method componentDidMount, useComponentDidMount
   * will be invoked after the component has mounted, and only the initial mount.
   * @param callback Defines a callback to invoke once the component has
   * initially mounted.
   * @example
   * function Playground({active}) {
   *  useComponentDidMount(() => {
   *    if (active) {
   *      console.warning(`Component has mounted.`);
   *    }
   *  });
   *
   *  return null;
   * }
   */
  
  function useComponentDidMount(callback) {
    const isAfterInitialMount = useIsAfterInitialMount();
    const hasInvokedLifeCycle = React.useRef(false);
  
    if (isAfterInitialMount && !hasInvokedLifeCycle.current) {
      hasInvokedLifeCycle.current = true;
      return callback();
    }
  }
  
  var styles$F = {
    "Group": "Polaris-BulkActions__Group",
    "Group-measuring": "Polaris-BulkActions__Group--measuring",
    "Group-entering": "Polaris-BulkActions__Group--entering",
    "Group-exiting": "Polaris-BulkActions__Group--exiting",
    "Group-entered": "Polaris-BulkActions__Group--entered",
    "Group-exited": "Polaris-BulkActions__Group--exited",
    "Group-smallScreen": "Polaris-BulkActions__Group--smallScreen",
    "Group-largeScreen": "Polaris-BulkActions__Group--largeScreen",
    "ButtonGroupWrapper": "Polaris-BulkActions__ButtonGroupWrapper",
    "BulkActionButton": "Polaris-BulkActions__BulkActionButton",
    "CheckableContainer": "Polaris-BulkActions__CheckableContainer",
    "disabled": "Polaris-BulkActions--disabled",
    "newDesignLanguage": "Polaris-BulkActions--newDesignLanguage",
    "PaginatedSelectAll": "Polaris-BulkActions__PaginatedSelectAll",
    "Slide": "Polaris-BulkActions__Slide",
    "Slide-appear": "Polaris-BulkActions__Slide--appear",
    "Slide-enter": "Polaris-BulkActions__Slide--enter",
    "Slide-exit": "Polaris-BulkActions__Slide--exit",
    "Slide-appearing": "Polaris-BulkActions__Slide--appearing",
    "Slide-entering": "Polaris-BulkActions__Slide--entering"
  };
  
  var _ref$b = /*#__PURE__*/React__default.createElement(Indicator, null);
  
  function BulkActionButton({
    handleMeasurement,
    url,
    external,
    onAction,
    content,
    disclosure,
    accessibilityLabel,
    disabled,
    indicator
  }) {
    const bulkActionButton = React.useRef(null);
    useComponentDidMount(() => {
      if (handleMeasurement && bulkActionButton.current) {
        const width = bulkActionButton.current.getBoundingClientRect().width;
        handleMeasurement(width);
      }
    });
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$F.BulkActionButton,
      ref: bulkActionButton
    }, /*#__PURE__*/React__default.createElement(Button, {
      external: external,
      url: url,
      "aria-label": accessibilityLabel,
      onClick: onAction,
      disabled: disabled,
      disclosure: disclosure
    }, content), indicator && _ref$b);
  }
  
  const MAX_PROMOTED_ACTIONS = 2;
  const slideClasses = {
    appear: classNames(styles$F.Slide, styles$F['Slide-appear']),
    appearActive: classNames(styles$F.Slide, styles$F['Slide-appearing']),
    enter: classNames(styles$F.Slide, styles$F['Slide-enter']),
    enterActive: classNames(styles$F.Slide, styles$F['Slide-entering']),
    exit: classNames(styles$F.Slide, styles$F['Slide-exit'])
  };
  
  class BulkActionsInner extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        smallScreenPopoverVisible: false,
        largeScreenPopoverVisible: false,
        containerWidth: 0,
        measuring: true
      };
      this.containerNode = null;
      this.largeScreenButtonsNode = null;
      this.moreActionsNode = null;
      this.checkableWrapperNode = /*#__PURE__*/React.createRef();
      this.largeScreenGroupNode = /*#__PURE__*/React.createRef();
      this.smallScreenGroupNode = /*#__PURE__*/React.createRef();
      this.promotedActionsWidths = [];
      this.bulkActionsWidth = 0;
      this.addedMoreActionsWidthForMeasuring = 0;
      this.handleResize = debounce(() => {
        const {
          smallScreenPopoverVisible,
          largeScreenPopoverVisible
        } = this.state;
  
        if (this.containerNode) {
          const containerWidth = this.containerNode.getBoundingClientRect().width;
  
          if (containerWidth > 0) {
            this.setState({
              containerWidth
            });
          }
        }
  
        if (smallScreenPopoverVisible || largeScreenPopoverVisible) {
          this.setState({
            smallScreenPopoverVisible: false,
            largeScreenPopoverVisible: false
          });
        }
      }, 50, {
        trailing: true
      });
  
      this.setLargeScreenButtonsNode = node => {
        this.largeScreenButtonsNode = node;
      };
  
      this.setContainerNode = node => {
        this.containerNode = node;
      };
  
      this.setMoreActionsNode = node => {
        this.moreActionsNode = node;
      };
  
      this.setSelectMode = val => {
        const {
          onSelectModeToggle
        } = this.props;
  
        if (onSelectModeToggle) {
          onSelectModeToggle(val);
        }
      };
  
      this.toggleSmallScreenPopover = () => {
        if (this.props.onMoreActionPopoverToggle) {
          this.props.onMoreActionPopoverToggle(this.state.smallScreenPopoverVisible);
        }
  
        this.setState(({
          smallScreenPopoverVisible
        }) => ({
          smallScreenPopoverVisible: !smallScreenPopoverVisible
        }));
      };
  
      this.toggleLargeScreenPopover = () => {
        if (this.props.onMoreActionPopoverToggle) {
          this.props.onMoreActionPopoverToggle(this.state.largeScreenPopoverVisible);
        }
  
        this.setState(({
          largeScreenPopoverVisible
        }) => ({
          largeScreenPopoverVisible: !largeScreenPopoverVisible
        }));
      };
  
      this.handleMeasurement = width => {
        const {
          measuring
        } = this.state;
  
        if (measuring) {
          this.promotedActionsWidths.push(width);
        }
      };
    }
  
    numberOfPromotedActionsToRender() {
      const {
        promotedActions
      } = this.props;
      const {
        containerWidth,
        measuring
      } = this.state;
  
      if (!promotedActions) {
        return 0;
      }
  
      if (containerWidth >= this.bulkActionsWidth || measuring) {
        return promotedActions.length;
      }
  
      let sufficientSpace = false;
      let counter = promotedActions.length - 1;
      let totalWidth = 0;
  
      while (!sufficientSpace && counter >= 0) {
        totalWidth += this.promotedActionsWidths[counter];
        const widthWithRemovedAction = this.bulkActionsWidth - totalWidth + this.addedMoreActionsWidthForMeasuring;
  
        if (containerWidth >= widthWithRemovedAction) {
          sufficientSpace = true;
        } else {
          counter--;
        }
      }
  
      return clamp(counter, 0, promotedActions.length);
    }
  
    hasActions() {
      const {
        promotedActions,
        actions
      } = this.props;
      return Boolean(promotedActions && promotedActions.length > 0 || actions && actions.length > 0);
    }
  
    actionSections() {
      const {
        actions
      } = this.props;
  
      if (!actions || actions.length === 0) {
        return;
      }
  
      if (instanceOfBulkActionListSectionArray(actions)) {
        return actions;
      }
  
      if (instanceOfBulkActionArray(actions)) {
        return [{
          items: actions
        }];
      }
    } // eslint-disable-next-line @typescript-eslint/member-ordering
  
  
    componentDidMount() {
      const {
        actions,
        promotedActions
      } = this.props;
  
      if (promotedActions && !actions && this.moreActionsNode) {
        this.addedMoreActionsWidthForMeasuring = this.moreActionsNode.getBoundingClientRect().width;
      }
  
      this.bulkActionsWidth = this.largeScreenButtonsNode ? this.largeScreenButtonsNode.getBoundingClientRect().width - this.addedMoreActionsWidthForMeasuring : 0;
  
      if (this.containerNode) {
        this.setState({
          containerWidth: this.containerNode.getBoundingClientRect().width,
          measuring: false
        });
      }
    } // eslint-disable-next-line @typescript-eslint/member-ordering
  
  
    render() {
      const {
        selectMode,
        accessibilityLabel,
        label = '',
        onToggleAll,
        selected,
        smallScreen,
        disabled,
        promotedActions,
        paginatedSelectAllText = null,
        paginatedSelectAllAction,
        i18n
      } = this.props;
      const actionSections = this.actionSections();
  
      if (promotedActions && promotedActions.length > MAX_PROMOTED_ACTIONS) {
        // eslint-disable-next-line no-console
        console.warn(i18n.translate('Polaris.ResourceList.BulkActions.warningMessage', {
          maxPromotedActions: MAX_PROMOTED_ACTIONS
        }));
      }
  
      const {
        smallScreenPopoverVisible,
        largeScreenPopoverVisible,
        measuring
      } = this.state;
      const paginatedSelectAllActionMarkup = paginatedSelectAllAction ? /*#__PURE__*/React__default.createElement(Button, {
        onClick: paginatedSelectAllAction.onAction,
        plain: true,
        disabled: disabled
      }, paginatedSelectAllAction.content) : null;
      const paginatedSelectAllTextMarkup = paginatedSelectAllText && paginatedSelectAllAction ? /*#__PURE__*/React__default.createElement("span", {
        "aria-live": "polite"
      }, paginatedSelectAllText) : paginatedSelectAllText;
      const paginatedSelectAllMarkup = paginatedSelectAllActionMarkup || paginatedSelectAllTextMarkup ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$F.PaginatedSelectAll
      }, paginatedSelectAllTextMarkup, " ", paginatedSelectAllActionMarkup) : null;
      const cancelButton = /*#__PURE__*/React__default.createElement(Button, {
        onClick: this.setSelectMode.bind(this, false),
        disabled: disabled
      }, i18n.translate('Polaris.Common.cancel'));
      const numberOfPromotedActionsToRender = this.numberOfPromotedActionsToRender();
      const allActionsPopover = this.hasActions() ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$F.Popover,
        ref: this.setMoreActionsNode
      }, /*#__PURE__*/React__default.createElement(Popover, {
        active: smallScreenPopoverVisible,
        activator: /*#__PURE__*/React__default.createElement(BulkActionButton, {
          disclosure: true,
          onAction: this.toggleSmallScreenPopover,
          content: i18n.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel'),
          disabled: disabled,
          indicator: this.isNewBadgeInBadgeActions()
        }),
        onClose: this.toggleSmallScreenPopover
      }, /*#__PURE__*/React__default.createElement(ActionList, {
        items: promotedActions,
        sections: actionSections,
        onActionAnyItem: this.toggleSmallScreenPopover
      }))) : null;
      const promotedActionsMarkup = promotedActions && numberOfPromotedActionsToRender > 0 ? [...promotedActions].slice(0, numberOfPromotedActionsToRender).map((action, index) => /*#__PURE__*/React__default.createElement(BulkActionButton, Object.assign({
        disabled: disabled
      }, action, {
        key: index,
        handleMeasurement: this.handleMeasurement
      }))) : null;
      const rolledInPromotedActions = promotedActions && numberOfPromotedActionsToRender < promotedActions.length ? [...promotedActions].slice(numberOfPromotedActionsToRender) : [];
      const activatorLabel = !promotedActions || promotedActions && numberOfPromotedActionsToRender === 0 && !measuring ? i18n.translate('Polaris.ResourceList.BulkActions.actionsActivatorLabel') : i18n.translate('Polaris.ResourceList.BulkActions.moreActionsActivatorLabel');
      let combinedActions = [];
  
      if (actionSections && rolledInPromotedActions.length > 0) {
        combinedActions = [{
          items: rolledInPromotedActions
        }, ...actionSections];
      } else if (actionSections) {
        combinedActions = actionSections;
      } else if (rolledInPromotedActions.length > 0) {
        combinedActions = [{
          items: rolledInPromotedActions
        }];
      }
  
      const actionsPopover = actionSections || rolledInPromotedActions.length > 0 || measuring ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$F.Popover,
        ref: this.setMoreActionsNode
      }, /*#__PURE__*/React__default.createElement(Popover, {
        active: largeScreenPopoverVisible,
        activator: /*#__PURE__*/React__default.createElement(BulkActionButton, {
          disclosure: true,
          onAction: this.toggleLargeScreenPopover,
          content: activatorLabel,
          disabled: disabled,
          indicator: this.isNewBadgeInBadgeActions()
        }),
        onClose: this.toggleLargeScreenPopover
      }, /*#__PURE__*/React__default.createElement(ActionList, {
        sections: combinedActions,
        onActionAnyItem: this.toggleLargeScreenPopover
      }))) : null;
      const checkableButtonProps = {
        accessibilityLabel,
        label,
        selected,
        selectMode,
        onToggleAll,
        measuring,
        disabled
      };
      const smallScreenGroup = smallScreen ? /*#__PURE__*/React__default.createElement(reactTransitionGroup.Transition, {
        timeout: 0,
        in: selectMode,
        key: "smallGroup",
        nodeRef: this.smallScreenGroupNode
      }, status => {
        const smallScreenGroupClassName = classNames(styles$F.Group, styles$F['Group-smallScreen'], styles$F[`Group-${status}`]);
        return /*#__PURE__*/React__default.createElement("div", {
          className: smallScreenGroupClassName,
          ref: this.smallScreenGroupNode
        }, /*#__PURE__*/React__default.createElement("div", {
          className: styles$F.ButtonGroupWrapper
        }, /*#__PURE__*/React__default.createElement(ButtonGroup, {
          segmented: true
        }, /*#__PURE__*/React__default.createElement(reactTransitionGroup.CSSTransition, {
          nodeRef: this.checkableWrapperNode,
          in: selectMode,
          timeout: tokens.durationBase,
          classNames: slideClasses,
          appear: !selectMode
        }, /*#__PURE__*/React__default.createElement("div", {
          className: styles$F.CheckableContainer,
          ref: this.checkableWrapperNode
        }, /*#__PURE__*/React__default.createElement(CheckableButton, Object.assign({}, checkableButtonProps, {
          smallScreen: true
        })))), allActionsPopover, cancelButton)), paginatedSelectAllMarkup);
      }) : null;
      const largeGroupContent = promotedActionsMarkup || actionsPopover ? /*#__PURE__*/React__default.createElement(ButtonGroup, {
        segmented: true
      }, /*#__PURE__*/React__default.createElement(CheckableButton, checkableButtonProps), promotedActionsMarkup, actionsPopover) : /*#__PURE__*/React__default.createElement(CheckableButton, checkableButtonProps);
      const largeScreenGroup = smallScreen ? null : /*#__PURE__*/React__default.createElement(reactTransitionGroup.Transition, {
        timeout: 0,
        in: selectMode,
        key: "largeGroup",
        nodeRef: this.largeScreenGroupNode
      }, status => {
        const largeScreenGroupClassName = classNames(styles$F.Group, styles$F['Group-largeScreen'], !measuring && styles$F[`Group-${status}`], measuring && styles$F['Group-measuring']);
        return /*#__PURE__*/React__default.createElement("div", {
          className: largeScreenGroupClassName,
          ref: this.largeScreenGroupNode
        }, /*#__PURE__*/React__default.createElement(EventListener, {
          event: "resize",
          handler: this.handleResize
        }), /*#__PURE__*/React__default.createElement("div", {
          className: styles$F.ButtonGroupWrapper,
          ref: this.setLargeScreenButtonsNode
        }, largeGroupContent), paginatedSelectAllMarkup);
      });
      return /*#__PURE__*/React__default.createElement("div", {
        ref: this.setContainerNode
      }, smallScreenGroup, largeScreenGroup);
    }
  
    isNewBadgeInBadgeActions() {
      const actions = this.actionSections();
      if (!actions) return false;
  
      for (const action of actions) {
        for (const item of action.items) {
          var _item$badge;
  
          if (((_item$badge = item.badge) == null ? void 0 : _item$badge.status) === 'new') return true;
        }
      }
  
      return false;
    }
  
  }
  
  function instanceOfBulkActionListSectionArray(actions) {
    const validList = actions.filter(action => {
      return action.items;
    });
    return actions.length === validList.length;
  }
  
  function instanceOfBulkActionArray(actions) {
    const validList = actions.filter(action => {
      return !action.items;
    });
    return actions.length === validList.length;
  }
  
  function BulkActions(props) {
    const i18n = useI18n();
    return /*#__PURE__*/React__default.createElement(BulkActionsInner, Object.assign({}, props, {
      i18n: i18n
    }));
  }
  
  var styles$G = {
    "TextContainer": "Polaris-TextContainer",
    "spacingTight": "Polaris-TextContainer--spacingTight",
    "spacingLoose": "Polaris-TextContainer--spacingLoose"
  };
  
  function TextContainer({
    spacing,
    children
  }) {
    const className = classNames(styles$G.TextContainer, spacing && styles$G[variationName('spacing', spacing)]);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, children);
  }
  
  var styles$H = {
    "CalloutCard": "Polaris-CalloutCard",
    "Image": "Polaris-CalloutCard__Image",
    "DismissImage": "Polaris-CalloutCard__DismissImage",
    "Content": "Polaris-CalloutCard__Content",
    "Title": "Polaris-CalloutCard__Title",
    "Buttons": "Polaris-CalloutCard__Buttons",
    "Container": "Polaris-CalloutCard__Container",
    "Dismiss": "Polaris-CalloutCard__Dismiss"
  };
  
  function CalloutCard({
    title,
    children,
    illustration,
    primaryAction,
    secondaryAction,
    onDismiss
  }) {
    const primaryActionMarkup = buttonFrom(primaryAction);
    const secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, {
      plain: true
    }) : null;
    const buttonMarkup = secondaryActionMarkup ? /*#__PURE__*/React__default.createElement(ButtonGroup, null, primaryActionMarkup, secondaryActionMarkup) : primaryActionMarkup;
    const dismissButton = onDismiss ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$H.Dismiss
    }, /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      icon: polarisIcons.CancelSmallMinor,
      onClick: onDismiss,
      accessibilityLabel: "Dismiss card"
    })) : null;
    const imageClassName = classNames(styles$H.Image, onDismiss && styles$H.DismissImage);
    return /*#__PURE__*/React__default.createElement(Card, null, /*#__PURE__*/React__default.createElement("div", {
      className: styles$H.Container
    }, dismissButton, /*#__PURE__*/React__default.createElement(Card.Section, null, /*#__PURE__*/React__default.createElement("div", {
      className: styles$H.CalloutCard
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$H.Content
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$H.Title
    }, /*#__PURE__*/React__default.createElement(Heading, null, title)), /*#__PURE__*/React__default.createElement(TextContainer, null, children), /*#__PURE__*/React__default.createElement("div", {
      className: styles$H.Buttons
    }, buttonMarkup)), /*#__PURE__*/React__default.createElement(Image, {
      alt: "",
      className: imageClassName,
      source: illustration
    })))));
  }
  
  var styles$I = {
    "Caption": "Polaris-Caption"
  };
  
  function Caption({
    children
  }) {
    return /*#__PURE__*/React__default.createElement("p", {
      className: styles$I.Caption
    }, children);
  }
  
  var styles$J = {
    "RadioButton": "Polaris-RadioButton",
    "Input": "Polaris-RadioButton__Input",
    "newDesignLanguage": "Polaris-RadioButton--newDesignLanguage",
    "Backdrop": "Polaris-RadioButton__Backdrop",
    "Icon": "Polaris-RadioButton__Icon",
    "hover": "Polaris-RadioButton--hover",
    "keyFocused": "Polaris-RadioButton--keyFocused"
  };
  
  function RadioButton({
    ariaDescribedBy: ariaDescribedByProp,
    label,
    labelHidden,
    helpText,
    checked,
    disabled,
    onChange,
    onFocus,
    onBlur,
    id: idProp,
    name: nameProp,
    value
  }) {
    const id = useUniqueId('RadioButton', idProp);
    const name = nameProp || id;
    const inputNode = React.useRef(null);
    const [keyFocused, setKeyFocused] = React.useState(false);
    const {
      newDesignLanguage
    } = useFeatures();
    const {
      value: mouseOver,
      setTrue: handleMouseOver,
      setFalse: handleMouseOut
    } = useToggle(false);
  
    const handleKeyUp = () => {
      !keyFocused && setKeyFocused(true);
    };
  
    const handleBlur = () => {
      onBlur && onBlur();
      setKeyFocused(false);
    };
  
    function handleChange({
      currentTarget
    }) {
      onChange && onChange(currentTarget.checked, id);
    }
  
    const describedBy = [];
  
    if (helpText) {
      describedBy.push(helpTextID$1(id));
    }
  
    if (ariaDescribedByProp) {
      describedBy.push(ariaDescribedByProp);
    }
  
    const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
    const inputClassName = classNames(styles$J.Input, newDesignLanguage && keyFocused && styles$J.keyFocused);
    const wrapperClassName = classNames(styles$J.RadioButton, newDesignLanguage && styles$J.newDesignLanguage);
    const iconMarkup = !newDesignLanguage && /*#__PURE__*/React__default.createElement("span", {
      className: styles$J.Icon
    });
    const backdropClassName = classNames(styles$J.Backdrop, mouseOver && styles$J.hover);
    return /*#__PURE__*/React__default.createElement(Choice, {
      label: label,
      labelHidden: labelHidden,
      disabled: disabled,
      id: id,
      helpText: helpText,
      onMouseOver: handleMouseOver,
      onMouseOut: handleMouseOut
    }, /*#__PURE__*/React__default.createElement("span", {
      className: wrapperClassName
    }, /*#__PURE__*/React__default.createElement("input", {
      id: id,
      name: name,
      value: value,
      type: "radio",
      checked: checked,
      disabled: disabled,
      className: inputClassName,
      onChange: handleChange,
      onFocus: onFocus,
      onKeyUp: handleKeyUp,
      onBlur: handleBlur,
      "aria-describedby": ariaDescribedBy,
      ref: inputNode
    }), /*#__PURE__*/React__default.createElement("span", {
      className: backdropClassName
    }), iconMarkup));
  }
  
  var styles$K = {
    "ChoiceList": "Polaris-ChoiceList",
    "titleHidden": "Polaris-ChoiceList--titleHidden",
    "Title": "Polaris-ChoiceList__Title",
    "Choices": "Polaris-ChoiceList__Choices",
    "ChoiceChildren": "Polaris-ChoiceList__ChoiceChildren",
    "ChoiceError": "Polaris-ChoiceList__ChoiceError"
  };
  
  function ChoiceList({
    title,
    titleHidden,
    allowMultiple,
    choices,
    selected,
    onChange = noop$3,
    error,
    disabled = false,
    name: nameProp
  }) {
    // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
    // see https://github.com/Microsoft/TypeScript/issues/28768
    const ControlComponent = allowMultiple ? Checkbox$1 : RadioButton;
    const name = useUniqueId('ChoiceList', nameProp);
    const finalName = allowMultiple ? `${name}[]` : name;
    const className = classNames(styles$K.ChoiceList, titleHidden && styles$K.titleHidden);
    const titleMarkup = title ? /*#__PURE__*/React__default.createElement("legend", {
      className: styles$K.Title
    }, title) : null;
    const choicesMarkup = choices.map(choice => {
      const {
        value,
        label,
        helpText,
        disabled: choiceDisabled,
        describedByError
      } = choice;
  
      function handleChange(checked) {
        onChange(updateSelectedChoices(choice, checked, selected, allowMultiple), name);
      }
  
      const isSelected = choiceIsSelected(choice, selected);
      const renderedChildren = choice.renderChildren ? choice.renderChildren(isSelected) : null;
      const children = renderedChildren ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$K.ChoiceChildren
      }, renderedChildren) : null;
      return /*#__PURE__*/React__default.createElement("li", {
        key: value
      }, /*#__PURE__*/React__default.createElement(ControlComponent, {
        name: finalName,
        value: value,
        label: label,
        disabled: choiceDisabled || disabled,
        checked: choiceIsSelected(choice, selected),
        helpText: helpText,
        onChange: handleChange,
        ariaDescribedBy: error && describedByError ? errorTextID(finalName) : null
      }), children);
    });
    const errorMarkup = error && /*#__PURE__*/React__default.createElement("div", {
      className: styles$K.ChoiceError
    }, /*#__PURE__*/React__default.createElement(InlineError, {
      message: error,
      fieldID: finalName
    }));
    return /*#__PURE__*/React__default.createElement("fieldset", {
      className: className,
      id: finalName,
      "aria-invalid": error != null
    }, titleMarkup, /*#__PURE__*/React__default.createElement("ul", {
      className: styles$K.Choices
    }, choicesMarkup), errorMarkup);
  }
  
  function noop$3() {}
  
  function choiceIsSelected({
    value
  }, selected) {
    return selected.includes(value);
  }
  
  function updateSelectedChoices({
    value
  }, checked, selected, allowMultiple = false) {
    if (checked) {
      return allowMultiple ? [...selected, value] : [value];
    }
  
    return selected.filter(selectedChoice => selectedChoice !== value);
  }
  
  var styles$L = {
    "Collapsible": "Polaris-Collapsible",
    "isFullyClosed": "Polaris-Collapsible--isFullyClosed",
    "expandOnPrint": "Polaris-Collapsible--expandOnPrint"
  };
  
  function Collapsible({
    id,
    expandOnPrint,
    open,
    transition,
    children
  }) {
    const [height, setHeight] = React.useState(0);
    const [isOpen, setIsOpen] = React.useState(open);
    const [animationState, setAnimationState] = React.useState('idle');
    const collapisbleContainer = React.useRef(null);
    const isFullyOpen = animationState === 'idle' && open && isOpen;
    const isFullyClosed = animationState === 'idle' && !open && !isOpen;
    const content = expandOnPrint || !isFullyClosed ? children : null;
    const wrapperClassName = classNames(styles$L.Collapsible, isFullyClosed && styles$L.isFullyClosed, expandOnPrint && styles$L.expandOnPrint);
  
    const collapsibleStyles = _objectSpread2(_objectSpread2({}, transition && {
      transitionDuration: `${transition.duration}`,
      transitionTimingFunction: `${transition.timingFunction}`
    }), {
      maxHeight: isFullyOpen ? 'none' : `${height}px`,
      overflow: isFullyOpen ? 'visible' : 'hidden'
    });
  
    const handleCompleteAnimation = React.useCallback(() => {
      setAnimationState('idle');
      setIsOpen(open);
    }, [open]);
    React.useEffect(() => {
      if (open !== isOpen) {
        setAnimationState('measuring');
      }
    }, [open, isOpen]);
    React.useEffect(() => {
      if (!open || !collapisbleContainer.current) return; // If collapsible defaults to open, set an initial height
  
      setHeight(collapisbleContainer.current.scrollHeight); // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    React.useEffect(() => {
      if (!collapisbleContainer.current) return;
  
      switch (animationState) {
        case 'idle':
          break;
  
        case 'measuring':
          setHeight(collapisbleContainer.current.scrollHeight);
          setAnimationState('animating');
          break;
  
        case 'animating':
          setHeight(open ? collapisbleContainer.current.scrollHeight : 0);
      }
    }, [animationState, open, isOpen]);
    return /*#__PURE__*/React__default.createElement("div", {
      id: id,
      style: collapsibleStyles,
      ref: collapisbleContainer,
      className: wrapperClassName,
      onTransitionEnd: handleCompleteAnimation,
      "aria-expanded": open
    }, content);
  }
  
  var styles$M = {
    "ColorPicker": "Polaris-ColorPicker",
    "MainColor": "Polaris-ColorPicker__MainColor",
    "Dragger": "Polaris-ColorPicker__Dragger",
    "ColorLayer": "Polaris-ColorPicker__ColorLayer",
    "HuePicker": "Polaris-ColorPicker__HuePicker",
    "AlphaPicker": "Polaris-ColorPicker__AlphaPicker",
    "Slidable": "Polaris-ColorPicker__Slidable"
  };
  
  let isDragging = false; // Required to solve a bug causing the underlying page/container to scroll
  // while trying to drag the ColorPicker controls.
  // This must be called as soon as possible to properly prevent the event.
  // `passive: false` must also be set, as it seems webkit has changed the "default" behaviour
  // https://bugs.webkit.org/show_bug.cgi?id=182521
  
  if (!isServer) {
    window.addEventListener('touchmove', event => {
      if (!isDragging) {
        return;
      }
  
      event.preventDefault();
    }, {
      passive: false
    });
  }
  
  class Slidable extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        dragging: false
      };
      this.node = null;
      this.draggerNode = null;
  
      this.setDraggerNode = node => {
        this.draggerNode = node;
      };
  
      this.setNode = node => {
        this.node = node;
      };
  
      this.startDrag = event => {
        if (isMouseDownEvent(event)) {
          this.handleDraggerMove(event.clientX, event.clientY);
        }
  
        isDragging = true;
        this.setState({
          dragging: true
        });
      };
  
      this.handleDragEnd = () => {
        isDragging = false;
        this.setState({
          dragging: false
        });
      };
  
      this.handleMove = event => {
        event.stopImmediatePropagation();
        event.stopPropagation();
  
        if (event.cancelable) {
          event.preventDefault();
        }
  
        if (isMouseMoveEvent(event)) {
          this.handleDraggerMove(event.clientX, event.clientY);
          return;
        }
  
        this.handleDraggerMove(event.touches[0].clientX, event.touches[0].clientY);
      };
  
      this.handleDraggerMove = (x, y) => {
        if (this.node == null) {
          return;
        }
  
        const {
          onChange
        } = this.props;
        const rect = this.node.getBoundingClientRect();
        const offsetX = x - rect.left;
        const offsetY = y - rect.top;
        onChange({
          x: offsetX,
          y: offsetY
        });
      };
    }
  
    componentDidMount() {
      const {
        onDraggerHeight
      } = this.props;
  
      if (onDraggerHeight == null) {
        return;
      }
  
      const {
        draggerNode
      } = this;
  
      if (draggerNode == null) {
        return;
      }
  
      onDraggerHeight(draggerNode.clientWidth);
  
      if (process.env.NODE_ENV === 'development') {
        setTimeout(() => {
          onDraggerHeight(draggerNode.clientWidth);
        }, 0);
      }
    }
  
    render() {
      const {
        dragging
      } = this.state;
      const {
        draggerX = 0,
        draggerY = 0
      } = this.props;
      const draggerPositioning = {
        transform: `translate3d(${draggerX}px, ${draggerY}px, 0)`
      };
      const moveListener = dragging ? /*#__PURE__*/React__default.createElement(EventListener, {
        event: "mousemove",
        handler: this.handleMove,
        passive: false
      }) : null;
      const touchMoveListener = dragging ? /*#__PURE__*/React__default.createElement(EventListener, {
        event: "touchmove",
        handler: this.handleMove,
        passive: false
      }) : null;
      const endDragListener = dragging ? /*#__PURE__*/React__default.createElement(EventListener, {
        event: "mouseup",
        handler: this.handleDragEnd
      }) : null;
      const touchEndListener = dragging ? /*#__PURE__*/React__default.createElement(EventListener, {
        event: "touchend",
        handler: this.handleDragEnd
      }) : null;
      const touchCancelListener = dragging ? /*#__PURE__*/React__default.createElement(EventListener, {
        event: "touchcancel",
        handler: this.handleDragEnd
      }) : null;
      return /*#__PURE__*/React__default.createElement("div", {
        ref: this.setNode,
        className: styles$M.Slidable,
        onMouseDown: this.startDrag,
        onTouchStart: this.startDrag
      }, endDragListener, moveListener, touchMoveListener, touchEndListener, touchCancelListener, /*#__PURE__*/React__default.createElement("div", {
        style: draggerPositioning,
        className: styles$M.Dragger,
        ref: this.setDraggerNode
      }));
    }
  
  }
  
  function isMouseMoveEvent(event) {
    return event.type === 'mousemove';
  }
  
  function isMouseDownEvent(event) {
    return event.type === 'mousedown';
  }
  
  const VERTICAL_PADDING = 13;
  function calculateDraggerY(alpha, sliderHeight, draggerHeight) {
    const offset = offsetForAlpha(alpha, sliderHeight, draggerHeight);
    return clamp(offset, 0, sliderHeight);
  }
  function alphaForDraggerY(y, sliderHeight) {
    const offsetY = clamp(y, 0, sliderHeight);
    return alphaForOffset(offsetY, sliderHeight);
  }
  function alphaForOffset(offset, sliderHeight) {
    const selectionHeight = offset - VERTICAL_PADDING;
    const slidableArea = sliderHeight - VERTICAL_PADDING * 2;
    return clamp(1 - selectionHeight / slidableArea, 0, 1);
  }
  
  function offsetForAlpha(alpha, sliderHeight, draggerHeight) {
    const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
    return clamp((1 - alpha) * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
  }
  
  class AlphaPicker extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        sliderHeight: 0,
        draggerHeight: 0
      };
  
      this.setSliderHeight = node => {
        if (node == null) {
          return;
        }
  
        this.setState({
          sliderHeight: node.clientHeight
        });
  
        if (process.env.NODE_ENV === 'development') {
          setTimeout(() => {
            this.setState({
              sliderHeight: node.clientHeight
            });
          }, 0);
        }
      };
  
      this.setDraggerHeight = height => {
        this.setState({
          draggerHeight: height
        });
      };
  
      this.handleChange = ({
        y
      }) => {
        const {
          onChange
        } = this.props;
        const {
          sliderHeight
        } = this.state;
        const alpha = alphaForDraggerY(y, sliderHeight);
        onChange(alpha);
      };
    }
  
    render() {
      const {
        color,
        alpha
      } = this.props;
      const {
        sliderHeight,
        draggerHeight
      } = this.state;
      const draggerY = calculateDraggerY(alpha, sliderHeight, draggerHeight);
      const background = alphaGradientForColor(color);
      return /*#__PURE__*/React__default.createElement("div", {
        className: styles$M.AlphaPicker,
        ref: this.setSliderHeight
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$M.ColorLayer,
        style: {
          background
        }
      }), /*#__PURE__*/React__default.createElement(Slidable, {
        draggerY: draggerY,
        draggerX: 0,
        onChange: this.handleChange,
        onDraggerHeight: this.setDraggerHeight
      }));
    }
  
  }
  
  function alphaGradientForColor(color) {
    const {
      red,
      green,
      blue
    } = hsbToRgb(color);
    const rgb = `${red}, ${green}, ${blue}`;
    return `linear-gradient(to top, rgba(${rgb}, 0) 18px, rgba(${rgb}, 1) calc(100% - 18px))`;
  }
  
  const VERTICAL_PADDING$1 = 13;
  function calculateDraggerY$1(hue, sliderHeight, draggerHeight) {
    const offset = offsetForHue(hue, sliderHeight, draggerHeight);
    return clamp(offset, 0, sliderHeight);
  }
  function hueForDraggerY(y, sliderHeight) {
    const offsetY = clamp(y, 0, sliderHeight);
    return hueForOffset(offsetY, sliderHeight);
  }
  
  function hueForOffset(offset, sliderHeight) {
    const selectionHeight = offset - VERTICAL_PADDING$1;
    const slidableArea = sliderHeight - VERTICAL_PADDING$1 * 2;
    return clamp(selectionHeight / slidableArea * 360, 0, 360);
  }
  
  function offsetForHue(hue, sliderHeight, draggerHeight) {
    const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING$1);
    return clamp(hue / 360 * slidableArea + VERTICAL_PADDING$1, 0, sliderHeight - draggerHeight);
  }
  
  class HuePicker extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        sliderHeight: 0,
        draggerHeight: 0
      };
  
      this.setSliderHeight = node => {
        if (node == null) {
          return;
        }
  
        this.setState({
          sliderHeight: node.clientHeight
        });
  
        if (process.env.NODE_ENV === 'development') {
          setTimeout(() => {
            this.setState({
              sliderHeight: node.clientHeight
            });
          }, 0);
        }
      };
  
      this.setDraggerHeight = height => {
        this.setState({
          draggerHeight: height
        });
      };
  
      this.handleChange = ({
        y
      }) => {
        const {
          onChange
        } = this.props;
        const {
          sliderHeight
        } = this.state;
        const hue = hueForDraggerY(y, sliderHeight);
        onChange(hue);
      };
    }
  
    render() {
      const {
        hue
      } = this.props;
      const {
        sliderHeight,
        draggerHeight
      } = this.state;
      const draggerY = calculateDraggerY$1(hue, sliderHeight, draggerHeight);
      return /*#__PURE__*/React__default.createElement("div", {
        className: styles$M.HuePicker,
        ref: this.setSliderHeight
      }, /*#__PURE__*/React__default.createElement(Slidable, {
        draggerY: draggerY,
        draggerX: 0,
        onChange: this.handleChange,
        onDraggerHeight: this.setDraggerHeight
      }));
    }
  
  }
  
  class ColorPicker extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        pickerSize: 0
      };
      this.colorNode = null;
  
      this.setColorNode = node => {
        this.colorNode = node;
      };
  
      this.handleHueChange = hue => {
        const {
          color: {
            brightness,
            saturation,
            alpha = 1
          },
          onChange
        } = this.props;
        onChange({
          hue,
          brightness,
          saturation,
          alpha
        });
      };
  
      this.handleAlphaChange = alpha => {
        const {
          color: {
            hue,
            brightness,
            saturation
          },
          onChange
        } = this.props;
        onChange({
          hue,
          brightness,
          saturation,
          alpha
        });
      };
  
      this.handleDraggerMove = ({
        x,
        y
      }) => {
        const {
          pickerSize
        } = this.state;
        const {
          color: {
            hue,
            alpha = 1
          },
          onChange
        } = this.props;
        const saturation = clamp(x / pickerSize, 0, 1);
        const brightness = clamp(1 - y / pickerSize, 0, 1);
        onChange({
          hue,
          saturation,
          brightness,
          alpha
        });
      };
  
      this.handlePickerDrag = event => {
        // prevents external elements from being selected
        event.preventDefault();
      };
    }
  
    componentDidMount() {
      const {
        colorNode
      } = this;
  
      if (colorNode == null) {
        return;
      }
  
      this.setState({
        pickerSize: colorNode.clientWidth
      });
  
      if (process.env.NODE_ENV === 'development') {
        setTimeout(() => {
          this.setState({
            pickerSize: colorNode.clientWidth
          });
        }, 0);
      }
    }
  
    render() {
      const {
        id,
        color,
        allowAlpha
      } = this.props;
      const {
        hue,
        saturation,
        brightness,
        alpha: providedAlpha
      } = color;
      const {
        pickerSize
      } = this.state;
      const alpha = providedAlpha != null && allowAlpha ? providedAlpha : 1;
      const {
        red,
        green,
        blue
      } = hsbToRgb({
        hue,
        saturation: 1,
        brightness: 1
      });
      const colorString = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
      const draggerX = clamp(saturation * pickerSize, 0, pickerSize);
      const draggerY = clamp(pickerSize - brightness * pickerSize, 0, pickerSize);
      const alphaSliderMarkup = allowAlpha ? /*#__PURE__*/React__default.createElement(AlphaPicker, {
        alpha: alpha,
        color: color,
        onChange: this.handleAlphaChange
      }) : null;
      return /*#__PURE__*/React__default.createElement("div", {
        className: styles$M.ColorPicker,
        id: id,
        onMouseDown: this.handlePickerDrag
      }, /*#__PURE__*/React__default.createElement("div", {
        ref: this.setColorNode,
        className: styles$M.MainColor
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$M.ColorLayer,
        style: {
          backgroundColor: colorString
        }
      }), /*#__PURE__*/React__default.createElement(Slidable, {
        onChange: this.handleDraggerMove,
        draggerX: draggerX,
        draggerY: draggerY
      })), /*#__PURE__*/React__default.createElement(HuePicker, {
        hue: hue,
        onChange: this.handleHueChange
      }), alphaSliderMarkup);
    }
  
  }
  
  const FrameContext = /*#__PURE__*/React.createContext(undefined);
  
  function useFrame() {
    const frame = React.useContext(FrameContext);
  
    if (!frame) {
      throw new Error('No Frame context was provided. Your component must be wrapped in a <Frame> component. See https://polaris.shopify.com/components/structure/frame for implementation instructions.');
    }
  
    return frame;
  }
  
  // that the interface defining the props is defined in this file, not imported
  // from elsewhere. This silly workaround ensures that the Props Explorer table
  // is generated correctly.
  
  const ContextualSaveBar = /*#__PURE__*/React.memo(function ContextualSaveBar({
    message,
    saveAction,
    discardAction,
    alignContentFlush,
    fullWidth,
    contextControl
  }) {
    const {
      setContextualSaveBar,
      removeContextualSaveBar
    } = useFrame();
    React.useEffect(() => {
      setContextualSaveBar({
        message,
        saveAction,
        discardAction,
        alignContentFlush,
        fullWidth,
        contextControl
      });
    }, [message, saveAction, discardAction, alignContentFlush, setContextualSaveBar, fullWidth, contextControl]);
    React.useEffect(() => {
      return removeContextualSaveBar;
    }, [removeContextualSaveBar]);
    return null;
  });
  
  var styles$N = {
    "DataTable": "Polaris-DataTable",
    "condensed": "Polaris-DataTable--condensed",
    "Navigation": "Polaris-DataTable__Navigation",
    "Pip": "Polaris-DataTable__Pip",
    "Pip-visible": "Polaris-DataTable__Pip--visible",
    "ScrollContainer": "Polaris-DataTable__ScrollContainer",
    "Table": "Polaris-DataTable__Table",
    "TableRow": "Polaris-DataTable__TableRow",
    "Cell": "Polaris-DataTable__Cell",
    "Cell-firstColumn": "Polaris-DataTable__Cell--firstColumn",
    "Cell-numeric": "Polaris-DataTable__Cell--numeric",
    "Cell-truncated": "Polaris-DataTable__Cell--truncated",
    "Cell-header": "Polaris-DataTable__Cell--header",
    "Cell-sortable": "Polaris-DataTable__Cell--sortable",
    "Cell-verticalAlignTop": "Polaris-DataTable__Cell--verticalAlignTop",
    "Cell-verticalAlignBottom": "Polaris-DataTable__Cell--verticalAlignBottom",
    "Cell-verticalAlignMiddle": "Polaris-DataTable__Cell--verticalAlignMiddle",
    "Cell-verticalAlignBaseline": "Polaris-DataTable__Cell--verticalAlignBaseline",
    "Icon": "Polaris-DataTable__Icon",
    "Heading": "Polaris-DataTable__Heading",
    "Heading-left": "Polaris-DataTable__Heading--left",
    "Cell-sorted": "Polaris-DataTable__Cell--sorted",
    "Cell-total": "Polaris-DataTable__Cell--total",
    "Cell-total-footer": "Polaris-DataTable--cellTotalFooter",
    "Footer": "Polaris-DataTable__Footer"
  };
  
  function Cell({
    content,
    contentType,
    firstColumn,
    truncate,
    header,
    total,
    totalInFooter,
    sorted,
    sortable,
    sortDirection,
    verticalAlign = 'top',
    defaultSortDirection = 'ascending',
    onSort
  }) {
    const i18n = useI18n();
    const numeric = contentType === 'numeric';
    const className = classNames(styles$N.Cell, styles$N[`Cell-${variationName('verticalAlign', verticalAlign)}`], firstColumn && styles$N['Cell-firstColumn'], firstColumn && truncate && styles$N['Cell-truncated'], header && styles$N['Cell-header'], total && styles$N['Cell-total'], totalInFooter && styles$N['Cell-total-footer'], numeric && styles$N['Cell-numeric'], sortable && styles$N['Cell-sortable'], sorted && styles$N['Cell-sorted']);
    const headerClassName = classNames(header && styles$N.Heading, header && contentType === 'text' && styles$N['Heading-left']);
    const iconClassName = classNames(sortable && styles$N.Icon);
    const direction = sorted && sortDirection ? sortDirection : defaultSortDirection;
    const source = direction === 'descending' ? polarisIcons.CaretDownMinor : polarisIcons.CaretUpMinor;
    const oppositeDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
    const sortAccessibilityLabel = i18n.translate('Polaris.DataTable.sortAccessibilityLabel', {
      direction: sorted ? oppositeDirection : direction
    });
    const iconMarkup = /*#__PURE__*/React__default.createElement("span", {
      className: iconClassName
    }, /*#__PURE__*/React__default.createElement(Icon, {
      source: source,
      accessibilityLabel: sortAccessibilityLabel
    }));
    const sortableHeadingContent = /*#__PURE__*/React__default.createElement("button", {
      className: headerClassName,
      onClick: onSort
    }, iconMarkup, content);
    const columnHeadingContent = sortable ? sortableHeadingContent : content;
    const headingMarkup = header ? /*#__PURE__*/React__default.createElement("th", Object.assign({}, headerCell.props, {
      className: className,
      scope: "col",
      "aria-sort": sortDirection
    }), columnHeadingContent) : /*#__PURE__*/React__default.createElement("th", {
      className: className,
      scope: "row"
    }, content);
    const cellMarkup = header || firstColumn ? headingMarkup : /*#__PURE__*/React__default.createElement("td", {
      className: className
    }, content);
    return cellMarkup;
  }
  
  function Navigation({
    columnVisibilityData,
    isScrolledFarthestLeft,
    isScrolledFarthestRight,
    navigateTableLeft,
    navigateTableRight
  }) {
    const i18n = useI18n();
    const pipMarkup = columnVisibilityData.map((column, index) => {
      const className = classNames(styles$N.Pip, column.isVisible && styles$N['Pip-visible']);
      return /*#__PURE__*/React__default.createElement("div", {
        className: className,
        key: `pip-${index}`
      });
    });
    const leftA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
      direction: 'left'
    });
    const rightA11yLabel = i18n.translate('Polaris.DataTable.navAccessibilityLabel', {
      direction: 'right'
    });
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$N.Navigation
    }, /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      icon: polarisIcons.ChevronLeftMinor,
      disabled: isScrolledFarthestLeft,
      accessibilityLabel: leftA11yLabel,
      onClick: navigateTableLeft
    }), pipMarkup, /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      icon: polarisIcons.ChevronRightMinor,
      disabled: isScrolledFarthestRight,
      accessibilityLabel: rightA11yLabel,
      onClick: navigateTableRight
    }));
  }
  
  function measureColumn(tableData) {
    return function (column, index) {
      const {
        firstVisibleColumnIndex,
        tableLeftVisibleEdge: tableStart,
        tableRightVisibleEdge: tableEnd
      } = tableData;
      const leftEdge = column.offsetLeft;
      const rightEdge = leftEdge + column.offsetWidth;
      const isVisibleLeft = isEdgeVisible(leftEdge, tableStart, tableEnd);
      const isVisibleRight = isEdgeVisible(rightEdge, tableStart, tableEnd);
      const isVisible = isVisibleLeft || isVisibleRight;
  
      if (isVisible) {
        tableData.firstVisibleColumnIndex = Math.min(firstVisibleColumnIndex, index);
      }
  
      return {
        leftEdge,
        rightEdge,
        isVisible
      };
    };
  }
  function isEdgeVisible(position, start, end) {
    const minVisiblePixels = 30;
    return position >= start + minVisiblePixels && position <= end - minVisiblePixels;
  }
  function getPrevAndCurrentColumns(tableData, columnData) {
    const {
      firstVisibleColumnIndex
    } = tableData;
    const previousColumnIndex = Math.max(firstVisibleColumnIndex - 1, 0);
    const previousColumn = columnData[previousColumnIndex];
    const currentColumn = columnData[firstVisibleColumnIndex];
    return {
      previousColumn,
      currentColumn
    };
  }
  
  class DataTableInner extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        condensed: false,
        columnVisibilityData: [],
        isScrolledFarthestLeft: true,
        isScrolledFarthestRight: false
      };
      this.dataTable = /*#__PURE__*/React.createRef();
      this.scrollContainer = /*#__PURE__*/React.createRef();
      this.table = /*#__PURE__*/React.createRef();
      this.handleResize = debounce(() => {
        const {
          table: {
            current: table
          },
          scrollContainer: {
            current: scrollContainer
          }
        } = this;
        let condensed = false;
  
        if (table && scrollContainer) {
          condensed = table.scrollWidth > scrollContainer.clientWidth;
        }
  
        this.setState(_objectSpread2({
          condensed
        }, this.calculateColumnVisibilityData(condensed)));
      });
  
      this.calculateColumnVisibilityData = condensed => {
        const {
          table: {
            current: table
          },
          scrollContainer: {
            current: scrollContainer
          },
          dataTable: {
            current: dataTable
          }
        } = this;
  
        if (condensed && table && scrollContainer && dataTable) {
          const headerCells = table.querySelectorAll(headerCell.selector);
  
          if (headerCells.length > 0) {
            const firstVisibleColumnIndex = headerCells.length - 1;
            const tableLeftVisibleEdge = scrollContainer.scrollLeft;
            const tableRightVisibleEdge = scrollContainer.scrollLeft + dataTable.offsetWidth;
            const tableData = {
              firstVisibleColumnIndex,
              tableLeftVisibleEdge,
              tableRightVisibleEdge
            };
            const columnVisibilityData = [...headerCells].map(measureColumn(tableData));
            const lastColumn = columnVisibilityData[columnVisibilityData.length - 1];
            return _objectSpread2(_objectSpread2({
              columnVisibilityData
            }, getPrevAndCurrentColumns(tableData, columnVisibilityData)), {}, {
              isScrolledFarthestLeft: tableLeftVisibleEdge === 0,
              isScrolledFarthestRight: lastColumn.rightEdge <= tableRightVisibleEdge
            });
          }
        }
  
        return {
          columnVisibilityData: [],
          previousColumn: undefined,
          currentColumn: undefined
        };
      };
  
      this.scrollListener = () => {
        this.setState(prevState => _objectSpread2({}, this.calculateColumnVisibilityData(prevState.condensed)));
      };
  
      this.navigateTable = direction => {
        const {
          currentColumn,
          previousColumn
        } = this.state;
        const {
          current: scrollContainer
        } = this.scrollContainer;
  
        const handleScroll = () => {
          if (!currentColumn || !previousColumn) {
            return;
          }
  
          if (scrollContainer) {
            scrollContainer.scrollLeft = direction === 'right' ? currentColumn.rightEdge : previousColumn.leftEdge;
            requestAnimationFrame(() => {
              this.setState(prevState => _objectSpread2({}, this.calculateColumnVisibilityData(prevState.condensed)));
            });
          }
        };
  
        return handleScroll;
      };
  
      this.renderHeadings = (heading, headingIndex) => {
        const {
          sortable,
          truncate = false,
          columnContentTypes,
          defaultSortDirection,
          initialSortColumnIndex = 0,
          verticalAlign
        } = this.props;
        const {
          sortDirection = defaultSortDirection,
          sortedColumnIndex = initialSortColumnIndex
        } = this.state;
        let sortableHeadingProps;
        const id = `heading-cell-${headingIndex}`;
  
        if (sortable) {
          const isSortable = sortable[headingIndex];
          const isSorted = isSortable && sortedColumnIndex === headingIndex;
          const direction = isSorted ? sortDirection : 'none';
          sortableHeadingProps = {
            defaultSortDirection,
            sorted: isSorted,
            sortable: isSortable,
            sortDirection: direction,
            onSort: this.defaultOnSort(headingIndex)
          };
        }
  
        return /*#__PURE__*/React__default.createElement(Cell, Object.assign({
          header: true,
          key: id,
          content: heading,
          contentType: columnContentTypes[headingIndex],
          firstColumn: headingIndex === 0,
          truncate: truncate
        }, sortableHeadingProps, {
          verticalAlign: verticalAlign
        }));
      };
  
      this.totalsRowHeading = () => {
        const {
          i18n,
          totals,
          totalsName
        } = this.props;
        const totalsLabel = totalsName ? totalsName : {
          singular: i18n.translate('Polaris.DataTable.totalRowHeading'),
          plural: i18n.translate('Polaris.DataTable.totalsRowHeading')
        };
        return totals && totals.filter(total => total !== '').length > 1 ? totalsLabel.plural : totalsLabel.singular;
      };
  
      this.renderTotals = (total, index) => {
        const id = `totals-cell-${index}`;
        const {
          truncate = false,
          verticalAlign
        } = this.props;
        let content;
        let contentType;
  
        if (index === 0) {
          content = this.totalsRowHeading();
        }
  
        if (total !== '' && index > 0) {
          contentType = 'numeric';
          content = total;
        }
  
        const totalInFooter = this.props.showTotalsInFooter;
        return /*#__PURE__*/React__default.createElement(Cell, {
          total: true,
          totalInFooter: totalInFooter,
          firstColumn: index === 0,
          key: id,
          content: content,
          contentType: contentType,
          truncate: truncate,
          verticalAlign: verticalAlign
        });
      };
  
      this.defaultRenderRow = (row, index) => {
        const className = classNames(styles$N.TableRow);
        const {
          columnContentTypes,
          truncate = false,
          verticalAlign
        } = this.props;
        return /*#__PURE__*/React__default.createElement("tr", {
          key: `row-${index}`,
          className: className
        }, row.map((content, cellIndex) => {
          const id = `cell-${cellIndex}-row-${index}`;
          return /*#__PURE__*/React__default.createElement(Cell, {
            key: id,
            content: content,
            contentType: columnContentTypes[cellIndex],
            firstColumn: cellIndex === 0,
            truncate: truncate,
            verticalAlign: verticalAlign
          });
        }));
      };
  
      this.defaultOnSort = headingIndex => {
        const {
          onSort,
          defaultSortDirection = 'ascending',
          initialSortColumnIndex
        } = this.props;
        const {
          sortDirection = defaultSortDirection,
          sortedColumnIndex = initialSortColumnIndex
        } = this.state;
        let newSortDirection = defaultSortDirection;
  
        if (sortedColumnIndex === headingIndex) {
          newSortDirection = sortDirection === 'ascending' ? 'descending' : 'ascending';
        }
  
        const handleSort = () => {
          this.setState({
            sortDirection: newSortDirection,
            sortedColumnIndex: headingIndex
          }, () => {
            if (onSort) {
              onSort(headingIndex, newSortDirection);
            }
          });
        };
  
        return handleSort;
      };
    }
  
    componentDidMount() {
      // We need to defer the calculation in development so the styles have time to be injected.
      if (process.env.NODE_ENV === 'development') {
        setTimeout(() => {
          this.handleResize();
        }, 10);
      } else {
        this.handleResize();
      }
    }
  
    componentDidUpdate(prevProps) {
      if (isEqual(prevProps, this.props)) {
        return;
      }
  
      this.handleResize();
    }
  
    render() {
      const {
        headings,
        totals,
        showTotalsInFooter,
        rows,
        footerContent,
        hideScrollIndicator = false
      } = this.props;
      const {
        condensed,
        columnVisibilityData,
        isScrolledFarthestLeft,
        isScrolledFarthestRight
      } = this.state;
      const className = classNames(styles$N.DataTable, condensed && styles$N.condensed);
      const wrapperClassName = classNames(styles$N.TableWrapper, condensed && styles$N.condensed);
      const headingMarkup = /*#__PURE__*/React__default.createElement("tr", null, headings.map(this.renderHeadings));
      const totalsMarkup = totals ? /*#__PURE__*/React__default.createElement("tr", null, totals.map(this.renderTotals)) : null;
      const bodyMarkup = rows.map(this.defaultRenderRow);
      const footerMarkup = footerContent ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$N.Footer
      }, footerContent) : null;
      const headerTotalsMarkup = !showTotalsInFooter ? totalsMarkup : null;
      const footerTotalsMarkup = showTotalsInFooter ? /*#__PURE__*/React__default.createElement("tfoot", null, totalsMarkup) : null;
      const navigationMarkup = hideScrollIndicator ? null : /*#__PURE__*/React__default.createElement(Navigation, {
        columnVisibilityData: columnVisibilityData,
        isScrolledFarthestLeft: isScrolledFarthestLeft,
        isScrolledFarthestRight: isScrolledFarthestRight,
        navigateTableLeft: this.navigateTable('left'),
        navigateTableRight: this.navigateTable('right')
      });
      return /*#__PURE__*/React__default.createElement("div", {
        className: wrapperClassName
      }, navigationMarkup, /*#__PURE__*/React__default.createElement("div", {
        className: className,
        ref: this.dataTable
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$N.ScrollContainer,
        ref: this.scrollContainer
      }, /*#__PURE__*/React__default.createElement(EventListener, {
        event: "resize",
        handler: this.handleResize
      }), /*#__PURE__*/React__default.createElement(EventListener, {
        capture: true,
        event: "scroll",
        handler: this.scrollListener
      }), /*#__PURE__*/React__default.createElement("table", {
        className: styles$N.Table,
        ref: this.table
      }, /*#__PURE__*/React__default.createElement("thead", null, headingMarkup, headerTotalsMarkup), /*#__PURE__*/React__default.createElement("tbody", null, bodyMarkup), footerTotalsMarkup)), footerMarkup));
    }
  
  }
  
  function DataTable(props) {
    const i18n = useI18n();
    return /*#__PURE__*/React__default.createElement(DataTableInner, Object.assign({}, props, {
      i18n: i18n
    }));
  }
  
  const WEEK_LENGTH = 7;
  function getWeeksForMonth(month, year, weekStartsOn = 0) {
    const firstOfMonth = new Date(year, month, 1);
    const firstDayOfWeek = firstOfMonth.getDay();
    const weeks = [[]];
    let currentWeek = weeks[0];
    let currentDate = firstOfMonth;
    const orderedWeekday = getOrderedWeekdays(weekStartsOn);
  
    for (let i = 0; i < orderedWeekday.indexOf(firstDayOfWeek); i++) {
      currentWeek.push(null);
    }
  
    while (currentDate.getMonth() === month) {
      if (currentWeek.length === WEEK_LENGTH) {
        currentWeek = [];
        weeks.push(currentWeek);
      }
  
      currentWeek.push(currentDate);
      currentDate = new Date(year, month, currentDate.getDate() + 1);
    }
  
    while (currentWeek.length < 7) {
      currentWeek.push(null);
    }
  
    return weeks;
  }
  function dateIsInRange(day, range) {
    if (day == null) {
      return false;
    }
  
    const {
      start,
      end
    } = range;
    return Boolean(start && day > start && end && day < end);
  }
  function dateIsSelected(day, range) {
    if (day == null) {
      return false;
    }
  
    const {
      start,
      end
    } = range;
    return Boolean(start && isSameDay(start, day) || end && isSameDay(end, day));
  }
  function isSameDay(day1, day2) {
    return day1.getDate() === day2.getDate() && day1.getMonth() === day2.getMonth() && day1.getFullYear() === day2.getFullYear();
  }
  function getNewRange(range, selected) {
    if (range == null) {
      return {
        start: selected,
        end: selected
      };
    }
  
    const {
      start,
      end
    } = range;
  
    if (end && (isDateAfter(start, end) || isDateBefore(start, end))) {
      return {
        start: selected,
        end: selected
      };
    }
  
    if (start) {
      if (isDateBefore(selected, start)) {
        return {
          start: selected,
          end: selected
        };
      }
  
      return {
        start,
        end: selected
      };
    }
  
    if (end) {
      if (isDateBefore(selected, end)) {
        return {
          start: selected,
          end
        };
      }
  
      return {
        start: start || end,
        end: selected
      };
    }
  
    return {
      start: selected,
      end: selected
    };
  }
  function getNextDisplayMonth(month) {
    if (month === 11) {
      return 0;
    }
  
    return month + 1;
  }
  function getNextDisplayYear(month, year) {
    if (month === 11) {
      return year + 1;
    }
  
    return year;
  }
  function getPreviousDisplayMonth(month) {
    if (month === 0) {
      return 11;
    }
  
    return month - 1;
  }
  function getPreviousDisplayYear(month, year) {
    if (month === 0) {
      return year - 1;
    }
  
    return year;
  }
  function isDateAfter(date, dateToCompare) {
    return date.getTime() > dateToCompare.getTime();
  }
  function isDateBefore(date, dateToCompare) {
    return date.getTime() < dateToCompare.getTime();
  }
  const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
  function getOrderedWeekdays(weekStartsOn) {
    const weekDays = [...WEEKDAYS];
    const restOfDays = weekDays.splice(weekStartsOn);
    return [...restOfDays, ...weekDays];
  }
  
  function monthName(month) {
    switch (month) {
      case 0:
        return 'january';
  
      case 1:
        return 'february';
  
      case 2:
        return 'march';
  
      case 3:
        return 'april';
  
      case 4:
        return 'may';
  
      case 5:
        return 'june';
  
      case 6:
        return 'july';
  
      case 7:
        return 'august';
  
      case 8:
        return 'september';
  
      case 9:
        return 'october';
  
      case 10:
        return 'november';
  
      case 11:
        return 'december';
    }
  }
  function weekdayName(weekday) {
    switch (weekday) {
      case 0:
        return 'sunday';
  
      case 1:
        return 'monday';
  
      case 2:
        return 'tuesday';
  
      case 3:
        return 'wednesday';
  
      case 4:
        return 'thursday';
  
      case 5:
        return 'friday';
  
      case 6:
        return 'saturday';
    }
  }
  
  var styles$O = {
    "DatePicker": "Polaris-DatePicker",
    "MonthLayout": "Polaris-DatePicker__MonthLayout",
    "MonthContainer": "Polaris-DatePicker__MonthContainer",
    "Month": "Polaris-DatePicker__Month",
    "Month-current": "Polaris-DatePicker__Month--current",
    "DayCell": "Polaris-DatePicker__DayCell",
    "DayCell-inRange": "Polaris-DatePicker__DayCell--inRange",
    "DayCell-selected": "Polaris-DatePicker__DayCell--selected",
    "Day": "Polaris-DatePicker__Day",
    "Day-today": "Polaris-DatePicker__Day--today",
    "Day-inRange": "Polaris-DatePicker__Day--inRange",
    "Day-selected": "Polaris-DatePicker__Day--selected",
    "Day-disabled": "Polaris-DatePicker__Day--disabled",
    "EmptyDayCell": "Polaris-DatePicker__EmptyDayCell",
    "Weekday": "Polaris-DatePicker__Weekday",
    "Weekday-current": "Polaris-DatePicker__Weekday--current",
    "Header": "Polaris-DatePicker__Header",
    "Title": "Polaris-DatePicker__Title",
    "newDesignLanguage": "Polaris-DatePicker--newDesignLanguage",
    "Day-firstInRange": "Polaris-DatePicker__Day--firstInRange",
    "Day-hasRange": "Polaris-DatePicker__Day--hasRange",
    "Day-hoverRight": "Polaris-DatePicker__Day--hoverRight",
    "Day-lastInRange": "Polaris-DatePicker__Day--lastInRange",
    "Week": "Polaris-DatePicker__Week"
  };
  
  const Day = /*#__PURE__*/React.memo(function Day({
    day,
    focused,
    onClick,
    onHover = noop$4,
    onFocus = noop$4,
    selected,
    inRange,
    inHoveringRange,
    disabled,
    lastDayOfMonth,
    isLastSelectedDay,
    isFirstSelectedDay,
    isHoveringRight,
    rangeIsDifferent,
    weekday,
    selectedAccessibilityLabelPrefix
  }) {
    const i18n = useI18n();
    const dayNode = React.useRef(null);
    const hoverValue = lastDayOfMonth || day;
    React.useEffect(() => {
      if (focused && dayNode.current) {
        dayNode.current.focus();
      }
    }, [focused]);
  
    if (!day) {
      return /*#__PURE__*/React__default.createElement("td", {
        className: styles$O.EmptyDayCell,
        onMouseOver: () => onHover(hoverValue)
      });
    }
  
    const handleClick = onClick && !disabled ? onClick.bind(null, day) : noop$4;
    const today = isSameDay(new Date(), day);
    const dayCellClassName = classNames(styles$O.DayCell, selected && styles$O['DayCell-selected'], (inRange || inHoveringRange) && !disabled && styles$O['DayCell-inRange'], isLastSelectedDay && styles$O['DayCell-lastInRange'], isFirstSelectedDay && styles$O['DayCell-firstInRange'], isHoveringRight && styles$O['DayCell-hoverRight'], rangeIsDifferent && styles$O['DayCell-hasRange']);
    const dayClassName = classNames(styles$O.Day, selected && styles$O['Day-selected'], disabled && styles$O['Day-disabled'], today && styles$O['Day-today'], (inRange || inHoveringRange) && !disabled && styles$O['Day-inRange'], isLastSelectedDay && styles$O['Day-lastInRange'], isFirstSelectedDay && styles$O['Day-firstInRange'], isHoveringRight && styles$O['Day-hoverRight'], rangeIsDifferent && styles$O['Day-hasRange']);
    const date = day.getDate();
    const tabIndex = (focused || selected || today || date === 1) && !disabled ? 0 : -1;
    const ariaLabel = [selected && selectedAccessibilityLabelPrefix ? `${selectedAccessibilityLabelPrefix} ` : '', `${today ? i18n.translate('Polaris.DatePicker.today') : ''}`, `${weekday ? weekday : ''} `, `${i18n.translate(`Polaris.DatePicker.months.${monthName(day.getMonth())}`)} `, `${date} `, `${day.getFullYear()}`].join('');
    return /*#__PURE__*/React__default.createElement("td", {
      className: dayCellClassName
    }, /*#__PURE__*/React__default.createElement("button", {
      onFocus: () => onFocus(day),
      type: "button",
      ref: dayNode,
      tabIndex: tabIndex,
      className: dayClassName,
      onMouseOver: () => onHover(hoverValue),
      onClick: handleClick,
      "aria-label": ariaLabel,
      "aria-disabled": disabled,
      "aria-pressed": selected
    }, date));
  });
  
  function noop$4() {}
  
  const Weekday = /*#__PURE__*/React.memo(function Weekday({
    label,
    title,
    current
  }) {
    const className = classNames(styles$O.Weekday, current && styles$O['Weekday-current']);
    return /*#__PURE__*/React__default.createElement("th", {
      "aria-label": label,
      scope: "col",
      className: className
    }, title);
  });
  
  function Month({
    focusedDate,
    selected,
    hoverDate,
    disableDatesBefore,
    disableDatesAfter,
    allowRange,
    onChange = noop$5,
    onHover = noop$5,
    onFocus = noop$5,
    month,
    year,
    weekStartsOn,
    accessibilityLabelPrefixes
  }) {
    const i18n = useI18n();
    const isInHoveringRange = allowRange ? hoveringDateIsInRange : () => false;
    const now = new Date();
    const current = now.getMonth() === month && now.getFullYear() === year;
    const className = classNames(styles$O.Title, current && styles$O['Month-current']);
    const weeks = React.useMemo(() => getWeeksForMonth(month, year, weekStartsOn), [month, weekStartsOn, year]);
    const weekdays = getOrderedWeekdays(weekStartsOn).map(weekday => /*#__PURE__*/React__default.createElement(Weekday, {
      key: weekday,
      title: i18n.translate(`Polaris.DatePicker.daysAbbreviated.${weekdayName(weekday)}`),
      label: weekdayLabel(weekday),
      current: current && new Date().getDay() === weekday
    }));
    const handleDateClick = React.useCallback(selectedDate => {
      onChange(getNewRange(allowRange ? selected : undefined, selectedDate));
    }, [allowRange, onChange, selected]);
    const lastDayOfMonth = React.useMemo(() => new Date(year, month + 1, 0), [month, year]);
  
    function renderWeek(day, dayIndex) {
      if (day == null) {
        return /*#__PURE__*/React__default.createElement(Day, {
          key: dayIndex,
          onHover: onHover,
          lastDayOfMonth: lastDayOfMonth
        });
      }
  
      const disabled = disableDatesBefore && isDateBefore(day, disableDatesBefore) || disableDatesAfter && isDateAfter(day, disableDatesAfter);
      const isFirstSelectedDay = allowRange && selected && isDateStart(day, selected);
      const isLastSelectedDay = allowRange && selected && (!isSameDay(selected.start, selected.end) && isDateEnd(day, selected) || hoverDate && isSameDay(selected.start, selected.end) && isDateAfter(hoverDate, selected.start) && isSameDay(day, hoverDate) && !isFirstSelectedDay);
      const rangeIsDifferent = !(selected && isSameDay(selected.start, selected.end));
      const isHoveringRight = hoverDate && isDateBefore(day, hoverDate);
      const [firstAccessibilityLabelPrefix, lastAccessibilityLabelPrefix] = accessibilityLabelPrefixes;
      let accessibilityLabelPrefix;
  
      if (allowRange && isFirstSelectedDay || !allowRange && firstAccessibilityLabelPrefix) {
        accessibilityLabelPrefix = firstAccessibilityLabelPrefix;
      } else if (allowRange && isLastSelectedDay) {
        accessibilityLabelPrefix = lastAccessibilityLabelPrefix;
      }
  
      return /*#__PURE__*/React__default.createElement(Day, {
        selectedAccessibilityLabelPrefix: accessibilityLabelPrefix,
        weekday: weekdayLabel(dayIndex),
        focused: focusedDate != null && isSameDay(day, focusedDate),
        day: day,
        key: dayIndex,
        onFocus: onFocus,
        onClick: handleDateClick,
        onHover: onHover,
        selected: selected != null && dateIsSelected(day, selected),
        inRange: selected != null && dateIsInRange(day, selected),
        disabled: disabled,
        inHoveringRange: selected != null && hoverDate != null && isInHoveringRange(day, selected, hoverDate),
        isLastSelectedDay: isLastSelectedDay,
        isFirstSelectedDay: isFirstSelectedDay,
        isHoveringRight: isHoveringRight,
        rangeIsDifferent: rangeIsDifferent
      });
    }
  
    const weeksMarkup = weeks.map((week, index) => /*#__PURE__*/React__default.createElement("tr", {
      className: styles$O.Week,
      key: index
    }, week.map(renderWeek)));
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$O.MonthContainer
    }, /*#__PURE__*/React__default.createElement("table", {
      role: "grid",
      className: styles$O.Month
    }, /*#__PURE__*/React__default.createElement("caption", {
      className: className
    }, i18n.translate(`Polaris.DatePicker.months.${monthName(month)}`), ' ', year), /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", {
      className: styles$O.WeekHeadings
    }, weekdays)), /*#__PURE__*/React__default.createElement("tbody", null, weeksMarkup)));
  
    function weekdayLabel(weekday) {
      return i18n.translate(`Polaris.DatePicker.days.${weekdayName(weekday)}`);
    }
  }
  
  function noop$5() {}
  
  function hoveringDateIsInRange(day, range, hoverEndDate) {
    if (day == null) {
      return false;
    }
  
    const {
      start,
      end
    } = range;
    return Boolean(isSameDay(start, end) && day > start && day <= hoverEndDate);
  }
  
  function isDateEnd(day, range) {
    if (day == null) return false;
    const {
      end
    } = range;
    return Boolean(end && isSameDay(end, day));
  }
  
  function isDateStart(day, range) {
    if (day == null) return false;
    const {
      start
    } = range;
    return Boolean(start && isSameDay(start, day));
  }
  
  function DatePicker({
    id,
    selected,
    month,
    year,
    allowRange,
    multiMonth,
    disableDatesBefore,
    disableDatesAfter,
    weekStartsOn = 0,
    dayAccessibilityLabelPrefix,
    onMonthChange,
    onChange = noop$6
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const [hoverDate, setHoverDate] = React.useState(undefined);
    const [focusDate, setFocusDate] = React.useState(undefined);
    React.useEffect(() => {
      setFocusDate(undefined);
    }, [selected]);
    const handleFocus = React.useCallback(date => {
      setFocusDate(date);
    }, []);
    const setFocusDateAndHandleMonthChange = React.useCallback(date => {
      if (onMonthChange) {
        onMonthChange(date.getMonth(), date.getFullYear());
      }
  
      setHoverDate(date);
      setFocusDate(date);
    }, [onMonthChange]);
    const handleDateSelection = React.useCallback(range => {
      const {
        end
      } = range;
      setHoverDate(end);
      setFocusDate(new Date(end));
      onChange(range);
    }, [onChange]);
    const handleMonthChangeClick = React.useCallback((month, year) => {
      if (!onMonthChange) {
        return;
      }
  
      setFocusDate(undefined);
      onMonthChange(month, year);
    }, [onMonthChange]);
    const handleHover = React.useCallback(date => {
      setHoverDate(date);
    }, []);
    const handleKeyUp = React.useCallback(event => {
      const {
        key
      } = event;
      const range = deriveRange(selected);
      const focusedDate = focusDate || range && range.start;
  
      if (focusedDate == null) {
        return;
      }
  
      if (key === 'ArrowUp') {
        const previousWeek = new Date(focusedDate);
        previousWeek.setDate(focusedDate.getDate() - 7);
  
        if (!(disableDatesBefore && isDateBefore(previousWeek, disableDatesBefore))) {
          setFocusDateAndHandleMonthChange(previousWeek);
        }
      }
  
      if (key === 'ArrowDown') {
        const nextWeek = new Date(focusedDate);
        nextWeek.setDate(focusedDate.getDate() + 7);
  
        if (!(disableDatesAfter && isDateAfter(nextWeek, disableDatesAfter))) {
          setFocusDateAndHandleMonthChange(nextWeek);
        }
      }
  
      if (key === 'ArrowRight') {
        const tomorrow = new Date(focusedDate);
        tomorrow.setDate(focusedDate.getDate() + 1);
  
        if (!(disableDatesAfter && isDateAfter(tomorrow, disableDatesAfter))) {
          setFocusDateAndHandleMonthChange(tomorrow);
        }
      }
  
      if (key === 'ArrowLeft') {
        const yesterday = new Date(focusedDate);
        yesterday.setDate(focusedDate.getDate() - 1);
  
        if (!(disableDatesBefore && isDateBefore(yesterday, disableDatesBefore))) {
          setFocusDateAndHandleMonthChange(yesterday);
        }
      }
    }, [disableDatesAfter, disableDatesBefore, focusDate, selected, setFocusDateAndHandleMonthChange]);
    const showNextYear = getNextDisplayYear(month, year);
    const showNextMonth = getNextDisplayMonth(month);
    const showNextToNextYear = getNextDisplayYear(showNextMonth, showNextYear);
    const showNextToNextMonth = getNextDisplayMonth(showNextMonth);
    const showPreviousYear = getPreviousDisplayYear(month, year);
    const showPreviousMonth = getPreviousDisplayMonth(month);
    const previousMonthName = i18n.translate(`Polaris.DatePicker.months.${monthName(showPreviousMonth)}`);
    const nextMonth = multiMonth ? i18n.translate(`Polaris.DatePicker.months.${monthName(showNextToNextMonth)}`) : i18n.translate(`Polaris.DatePicker.months.${monthName(showNextMonth)}`);
    const nextYear = multiMonth ? showNextToNextYear : showNextYear;
    const monthIsSelected = React.useMemo(() => deriveRange(selected), [selected]);
    const firstDatePickerAccessibilityLabelPrefix = allowRange ? i18n.translate(`Polaris.DatePicker.start`) : dayAccessibilityLabelPrefix;
    const secondDatePickerAccessibilityLabelPrefix = i18n.translate(`Polaris.DatePicker.end`);
    const accessibilityLabelPrefixes = [firstDatePickerAccessibilityLabelPrefix, secondDatePickerAccessibilityLabelPrefix];
    const secondDatePicker = multiMonth ? /*#__PURE__*/React__default.createElement(Month, {
      onFocus: handleFocus,
      focusedDate: focusDate,
      month: showNextMonth,
      year: showNextYear,
      selected: monthIsSelected,
      hoverDate: hoverDate,
      onChange: handleDateSelection,
      onHover: handleHover,
      disableDatesBefore: disableDatesBefore,
      disableDatesAfter: disableDatesAfter,
      allowRange: allowRange,
      weekStartsOn: weekStartsOn,
      accessibilityLabelPrefixes: accessibilityLabelPrefixes
    }) : null;
    const datePickerClassName = classNames(styles$O.DatePicker, newDesignLanguage && styles$O.newDesignLanguage);
    return /*#__PURE__*/React__default.createElement("div", {
      id: id,
      className: datePickerClassName,
      onKeyDown: handleKeyDown,
      onKeyUp: handleKeyUp
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$O.Header
    }, /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      icon: polarisIcons.ArrowLeftMinor,
      accessibilityLabel: i18n.translate('Polaris.DatePicker.previousMonth', {
        previousMonthName,
        showPreviousYear
      }),
      onClick: () => handleMonthChangeClick(showPreviousMonth, showPreviousYear)
    }), /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      icon: polarisIcons.ArrowRightMinor,
      accessibilityLabel: i18n.translate('Polaris.DatePicker.nextMonth', {
        nextMonth,
        nextYear
      }),
      onClick: () => handleMonthChangeClick(showNextMonth, showNextYear)
    })), /*#__PURE__*/React__default.createElement("div", {
      className: styles$O.MonthLayout
    }, /*#__PURE__*/React__default.createElement(Month, {
      onFocus: handleFocus,
      focusedDate: focusDate,
      month: month,
      year: year,
      selected: deriveRange(selected),
      hoverDate: hoverDate,
      onChange: handleDateSelection,
      onHover: handleHover,
      disableDatesBefore: disableDatesBefore,
      disableDatesAfter: disableDatesAfter,
      allowRange: allowRange,
      weekStartsOn: weekStartsOn,
      accessibilityLabelPrefixes: accessibilityLabelPrefixes
    }), secondDatePicker));
  }
  
  function noop$6() {}
  
  function handleKeyDown(event) {
    const {
      key
    } = event;
  
    if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  function deriveRange(selected) {
    return selected instanceof Date ? {
      start: selected,
      end: selected
    } : selected;
  }
  
  var styles$P = {
    "DescriptionList": "Polaris-DescriptionList",
    "Term": "Polaris-DescriptionList__Term",
    "spacingTight": "Polaris-DescriptionList--spacingTight",
    "Description": "Polaris-DescriptionList__Description"
  };
  
  function DescriptionList({
    items,
    spacing = 'loose'
  }) {
    // There's no good key to give React so using the index is a last resport.
    // we can't use the term/description value as it may be a react component
    // which can't be stringified
    const terms = items.reduce((allTerms, {
      term,
      description
    }, index) => [...allTerms, /*#__PURE__*/React__default.createElement("dt", {
      key: `dt${index}`,
      className: styles$P.Term
    }, term), /*#__PURE__*/React__default.createElement("dd", {
      key: `dd${index}`,
      className: styles$P.Description
    }, description)], []);
    const className = classNames(styles$P.DescriptionList, spacing === 'tight' && styles$P.spacingTight);
    return /*#__PURE__*/React__default.createElement("dl", {
      className: className
    }, terms);
  }
  
  var styles$Q = {
    "DisplayText": "Polaris-DisplayText",
    "sizeSmall": "Polaris-DisplayText--sizeSmall",
    "sizeMedium": "Polaris-DisplayText--sizeMedium",
    "sizeLarge": "Polaris-DisplayText--sizeLarge",
    "sizeExtraLarge": "Polaris-DisplayText--sizeExtraLarge"
  };
  
  function DisplayText({
    element: Element = 'p',
    children,
    size = 'medium'
  }) {
    const className = classNames(styles$Q.DisplayText, size && styles$Q[variationName('size', size)]);
    return /*#__PURE__*/React__default.createElement(Element, {
      className: className
    }, children);
  }
  
  function capitalize(word = '') {
    const wordLower = word.toLowerCase();
    return wordLower.charAt(0).toUpperCase() + wordLower.slice(1);
  }
  
  const img = "data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e";
  
  const DropZoneContext = /*#__PURE__*/React.createContext({
    disabled: false,
    focused: false,
    size: 'extraLarge',
    type: 'file',
    measuring: false
  });
  
  var styles$R = {
    "FileUpload": "Polaris-DropZone-FileUpload",
    "FileUploadSmallView": "Polaris-DropZone-FileUpload__FileUploadSmallView",
    "Button": "Polaris-DropZone-FileUpload__Button",
    "newDesignLanguage": "Polaris-DropZone-FileUpload--newDesignLanguage",
    "pressed": "Polaris-DropZone-FileUpload--pressed",
    "disabled": "Polaris-DropZone-FileUpload--disabled",
    "focused": "Polaris-DropZone-FileUpload--focused",
    "sizeSlim": "Polaris-DropZone-FileUpload--sizeSlim",
    "ActionTitle": "Polaris-DropZone-FileUpload__ActionTitle",
    "ActionTitle-disabled": "Polaris-DropZone-FileUpload__ActionTitle--disabled",
    "ActionTitle-focused": "Polaris-DropZone-FileUpload__ActionTitle--focused"
  };
  
  var _ref$c = /*#__PURE__*/React__default.createElement("img", {
    width: "40",
    src: img,
    alt: ""
  });
  
  var _ref2$2 = /*#__PURE__*/React__default.createElement("img", {
    width: "40",
    src: img,
    alt: ""
  });
  
  var _ref3 = /*#__PURE__*/React__default.createElement("img", {
    width: "20",
    src: img,
    alt: ""
  });
  
  function FileUpload(props) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const {
      size,
      measuring,
      type,
      focused,
      disabled
    } = React.useContext(DropZoneContext);
    const suffix = capitalize(type);
    const {
      actionTitle = i18n.translate(`Polaris.DropZone.FileUpload.actionTitle${suffix}`),
      actionHint = i18n.translate(`Polaris.DropZone.FileUpload.actionHint${suffix}`)
    } = props;
    const buttonStyles = size === 'extraLarge' || size === 'large' ? classNames(styles$R.Button, newDesignLanguage && styles$R.newDesignLanguage, size && size !== 'extraLarge' && styles$R.slim, focused && styles$R.focused, disabled && styles$R.disabled) : null;
    const buttonMarkup = (size === 'extraLarge' || size === 'large') && buttonStyles ? /*#__PURE__*/React__default.createElement("div", {
      className: buttonStyles
    }, actionTitle) : null;
    const actionTitleClassName = classNames(styles$R.ActionTitle, focused && !disabled && styles$R['ActionTitle-focused'], disabled && styles$R['ActionTitle-disabled']);
    const actionTitleMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: actionTitleClassName
    }, actionTitle);
    const fileUploadClassName = classNames(styles$R.FileUpload, newDesignLanguage && styles$R.newDesignLanguage, measuring && styles$R.measuring, size === 'small' && styles$R.FileUploadSmallView);
    let viewMarkup;
  
    switch (size) {
      case 'extraLarge':
        viewMarkup = /*#__PURE__*/React__default.createElement(Stack, {
          vertical: true
        }, _ref$c, buttonMarkup, /*#__PURE__*/React__default.createElement(TextStyle, {
          variation: "subdued"
        }, actionHint));
        break;
  
      case 'large':
        viewMarkup = /*#__PURE__*/React__default.createElement(Stack, {
          vertical: true,
          spacing: "tight"
        }, _ref2$2, buttonMarkup, /*#__PURE__*/React__default.createElement(Caption, null, /*#__PURE__*/React__default.createElement(TextStyle, {
          variation: "subdued"
        }, actionHint)));
        break;
  
      case 'medium':
        viewMarkup = /*#__PURE__*/React__default.createElement(Stack, {
          vertical: true,
          spacing: "tight"
        }, actionTitleMarkup, /*#__PURE__*/React__default.createElement(Caption, null, /*#__PURE__*/React__default.createElement(TextStyle, {
          variation: "subdued"
        }, actionHint)));
        break;
  
      case 'small':
        viewMarkup = _ref3;
        break;
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      className: fileUploadClassName
    }, viewMarkup);
  }
  
  const dragEvents = ['dragover', 'dragenter', 'drop'];
  function fileAccepted(file, accept) {
    return file.type === 'application/x-moz-file' || accepts(file, accept);
  }
  function getDataTransferFiles(event) {
    if (isDragEvent(event) && event.dataTransfer) {
      const dt = event.dataTransfer;
  
      if (dt.files && dt.files.length) {
        return Array.from(dt.files);
      } else if (dt.items && dt.items.length) {
        // Chrome is the only browser that allows to read the file list on drag
        // events and uses `items` instead of `files` in this case.
        return Array.from(dt.items);
      }
    } else if (isChangeEvent(event) && event.target.files) {
      // Return files from even when a file was selected from an upload dialog
      return Array.from(event.target.files);
    }
  
    return [];
  }
  
  function accepts(file, acceptedFiles) {
    if (file && acceptedFiles) {
      const fileName = file.name || '';
      const mimeType = file.type || '';
      const baseMimeType = mimeType.replace(/\/.*$/, '');
      const acceptedFilesArray = Array.isArray(acceptedFiles) ? acceptedFiles : acceptedFiles.split(',');
      return acceptedFilesArray.some(type => {
        const validType = type.trim();
  
        if (validType.startsWith('.')) {
          return fileName.toLowerCase().endsWith(validType.toLowerCase());
        } else if (validType.endsWith('/*')) {
          // This is something like a image/* mime type
          return baseMimeType === validType.replace(/\/.*$/, '');
        }
  
        return mimeType === validType;
      });
    }
  
    return true;
  }
  
  function isDragEvent(event) {
    return dragEvents.indexOf(event.type) > 0;
  }
  
  function isChangeEvent(event) {
    return Object.prototype.hasOwnProperty.call(event, 'target');
  }
  
  var styles$S = {
    "DropZone": "Polaris-DropZone",
    "hasOutline": "Polaris-DropZone--hasOutline",
    "isDisabled": "Polaris-DropZone--isDisabled",
    "newDesignLanguage": "Polaris-DropZone--newDesignLanguage",
    "focused": "Polaris-DropZone--focused",
    "isDragging": "Polaris-DropZone--isDragging",
    "sizeExtraLarge": "Polaris-DropZone--sizeExtraLarge",
    "sizeLarge": "Polaris-DropZone--sizeLarge",
    "sizeMedium": "Polaris-DropZone--sizeMedium",
    "sizeSmall": "Polaris-DropZone--sizeSmall",
    "measuring": "Polaris-DropZone--measuring",
    "Container": "Polaris-DropZone__Container",
    "Overlay": "Polaris-DropZone__Overlay",
    "hasError": "Polaris-DropZone--hasError"
  };
  
  // TypeScript can't generate types that correctly infer the typing of
  // subcomponents so explicitly state the subcomponents in the type definition.
  // Letting this be implicit works in this project but fails in projects that use
  // generated *.d.ts files.
  const DropZone = function DropZone({
    dropOnPage,
    label,
    labelAction,
    labelHidden,
    children,
    disabled = false,
    outline = true,
    accept,
    active,
    overlay = true,
    allowMultiple = true,
    overlayText,
    errorOverlayText,
    id: idProp,
    type = 'file',
    onClick,
    error,
    openFileDialog,
    onFileDialogClose,
    customValidator,
    onDrop,
    onDropAccepted,
    onDropRejected,
    onDragEnter,
    onDragOver,
    onDragLeave
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const node = React.useRef(null);
    const dragTargets = React.useRef([]); // eslint-disable-next-line react-hooks/exhaustive-deps
  
    const adjustSize = React.useCallback(debounce(() => {
      if (!node.current) {
        return;
      }
  
      let size = 'extraLarge';
      const width = node.current.getBoundingClientRect().width;
  
      if (width < 100) {
        size = 'small';
      } else if (width < 160) {
        size = 'medium';
      } else if (width < 300) {
        size = 'large';
      }
  
      setSize(size);
      measuring && setMeasuring(false);
    }, 50, {
      trailing: true
    }), []);
    const [dragging, setDragging] = React.useState(false);
    const [internalError, setInternalError] = React.useState(false);
    const {
      value: focused,
      setTrue: handleFocus,
      setFalse: handleBlur
    } = useToggle(false);
    const [size, setSize] = React.useState('extraLarge');
    const [measuring, setMeasuring] = React.useState(true);
    const i18n = useI18n();
    const getValidatedFiles = React.useCallback(files => {
      const acceptedFiles = [];
      const rejectedFiles = [];
      Array.from(files).forEach(file => {
        !fileAccepted(file, accept) || customValidator && !customValidator(file) ? rejectedFiles.push(file) : acceptedFiles.push(file);
      });
  
      if (!allowMultiple) {
        acceptedFiles.splice(1, acceptedFiles.length);
        rejectedFiles.push(...acceptedFiles.slice(1));
      }
  
      return {
        files,
        acceptedFiles,
        rejectedFiles
      };
    }, [accept, allowMultiple, customValidator]);
    const handleDrop = React.useCallback(event => {
      stopEvent(event);
      if (disabled) return;
      const fileList = getDataTransferFiles(event);
      const {
        files,
        acceptedFiles,
        rejectedFiles
      } = getValidatedFiles(fileList);
      dragTargets.current = [];
      setDragging(false);
      setInternalError(rejectedFiles.length > 0);
      onDrop && onDrop(files, acceptedFiles, rejectedFiles);
      onDropAccepted && acceptedFiles.length && onDropAccepted(acceptedFiles);
      onDropRejected && rejectedFiles.length && onDropRejected(rejectedFiles);
      event.target.value = '';
    }, [disabled, getValidatedFiles, onDrop, onDropAccepted, onDropRejected]);
    const handleDragEnter = React.useCallback(event => {
      stopEvent(event);
      if (disabled) return;
      const fileList = getDataTransferFiles(event);
  
      if (event.target && !dragTargets.current.includes(event.target)) {
        dragTargets.current.push(event.target);
      }
  
      if (dragging) return;
      const {
        rejectedFiles
      } = getValidatedFiles(fileList);
      setDragging(true);
      setInternalError(rejectedFiles.length > 0);
      onDragEnter && onDragEnter();
    }, [disabled, dragging, getValidatedFiles, onDragEnter]);
    const handleDragOver = React.useCallback(event => {
      stopEvent(event);
      if (disabled) return;
      onDragOver && onDragOver();
    }, [disabled, onDragOver]);
    const handleDragLeave = React.useCallback(event => {
      event.preventDefault();
      if (disabled) return;
      dragTargets.current = dragTargets.current.filter(el => {
        const compareNode = dropOnPage && !isServer ? document : node.current;
        return el !== event.target && compareNode && compareNode.contains(el);
      });
      if (dragTargets.current.length > 0) return;
      setDragging(false);
      setInternalError(false);
      onDragLeave && onDragLeave();
    }, [dropOnPage, disabled, onDragLeave]);
    React.useEffect(() => {
      const dropNode = dropOnPage ? document : node.current;
      if (!dropNode) return;
      dropNode.addEventListener('drop', handleDrop);
      dropNode.addEventListener('dragover', handleDragOver);
      dropNode.addEventListener('dragenter', handleDragEnter);
      dropNode.addEventListener('dragleave', handleDragLeave);
      window.addEventListener('resize', adjustSize);
      return () => {
        dropNode.removeEventListener('drop', handleDrop);
        dropNode.removeEventListener('dragover', handleDragOver);
        dropNode.removeEventListener('dragenter', handleDragEnter);
        dropNode.removeEventListener('dragleave', handleDragLeave);
        window.removeEventListener('resize', adjustSize);
      };
    }, [dropOnPage, handleDrop, handleDragOver, handleDragEnter, handleDragLeave, adjustSize]);
    useComponentDidMount(() => {
      adjustSize();
    });
    const id = useUniqueId('DropZone', idProp);
    const suffix = capitalize(type);
    const overlayTextWithDefault = overlayText === undefined ? i18n.translate(`Polaris.DropZone.overlayText${suffix}`) : overlayText;
    const errorOverlayTextWithDefault = errorOverlayText === undefined ? i18n.translate(`Polaris.DropZone.errorOverlayText${suffix}`) : errorOverlayText;
    const inputAttributes = {
      id,
      accept,
      disabled,
      type: 'file',
      multiple: allowMultiple,
      onChange: handleDrop,
      onFocus: handleFocus,
      onBlur: handleBlur
    };
    const classes = classNames(styles$S.DropZone, outline && styles$S.hasOutline, focused && styles$S.focused, (active || dragging) && styles$S.isDragging, disabled && styles$S.isDisabled, newDesignLanguage && styles$S.newDesignLanguage, (internalError || error) && styles$S.hasError, styles$S[variationName('size', size)], measuring && styles$S.measuring);
    const dragOverlay = (active || dragging) && (!internalError || !error) && overlay && overlayMarkup(polarisIcons.DragDropMajor, 'indigo', overlayTextWithDefault);
    const dragErrorOverlay = dragging && (internalError || error) && overlayMarkup(polarisIcons.CircleAlertMajor, 'red', errorOverlayTextWithDefault);
    const labelValue = label || i18n.translate('Polaris.DropZone.FileUpload.label');
    const labelHiddenValue = label ? labelHidden : true;
    const context = React.useMemo(() => ({
      disabled,
      focused,
      size,
      type: type || 'file',
      measuring
    }), [disabled, focused, measuring, size, type]);
    return /*#__PURE__*/React__default.createElement(DropZoneContext.Provider, {
      value: context
    }, /*#__PURE__*/React__default.createElement(Labelled, {
      id: id,
      label: labelValue,
      action: labelAction,
      labelHidden: labelHiddenValue
    }, /*#__PURE__*/React__default.createElement("div", {
      ref: node,
      className: classes,
      "aria-disabled": disabled,
      onClick: handleClick,
      onDragStart: stopEvent
    }, dragOverlay, dragErrorOverlay, /*#__PURE__*/React__default.createElement("div", {
      className: styles$S.Container
    }, children), /*#__PURE__*/React__default.createElement(VisuallyHidden, null, /*#__PURE__*/React__default.createElement(DropZoneInput, Object.assign({}, inputAttributes, {
      openFileDialog: openFileDialog,
      onFileDialogClose: onFileDialogClose
    }))))));
  
    function overlayMarkup(icon, color, text) {
      const overlayClass = classNames(styles$S.Overlay, newDesignLanguage && styles$S.newDesignLanguage);
      return /*#__PURE__*/React__default.createElement("div", {
        className: overlayClass
      }, /*#__PURE__*/React__default.createElement(Stack, {
        vertical: true,
        spacing: "tight"
      }, /*#__PURE__*/React__default.createElement(Icon, {
        source: icon,
        color: color
      }), size === 'extraLarge' && /*#__PURE__*/React__default.createElement(DisplayText, {
        size: "small",
        element: "p"
      }, text), (size === 'medium' || size === 'large') && /*#__PURE__*/React__default.createElement(Caption, null, text)));
    }
  
    function open() {
      const fileInputNode = node.current && node.current.querySelector(`#${id}`);
      fileInputNode && fileInputNode instanceof HTMLElement && fileInputNode.click();
    }
  
    function handleClick(event) {
      if (disabled) return;
      return onClick ? onClick(event) : open();
    }
  };
  
  function stopEvent(event) {
    event.preventDefault();
    event.stopPropagation();
  }
  
  DropZone.FileUpload = FileUpload;
  
  // Due to security reasons, browsers do not allow file inputs to be opened artificially.
  // For example `useEffect(() => { ref.click() })`. Oddly enough react class-based components bi-pass this.
  class DropZoneInput extends React.Component {
    constructor(...args) {
      super(...args);
      this.fileInputNode = /*#__PURE__*/React.createRef();
  
      this.triggerFileDialog = () => {
        this.open();
        this.props.onFileDialogClose && this.props.onFileDialogClose();
      };
  
      this.open = () => {
        if (!this.fileInputNode.current) return;
        this.fileInputNode.current.click();
      };
    }
  
    componentDidMount() {
      this.props.openFileDialog && this.triggerFileDialog();
    }
  
    componentDidUpdate() {
      this.props.openFileDialog && this.triggerFileDialog();
    }
  
    render() {
      const _this$props = this.props,
            inputProps = _objectWithoutProperties(_this$props, ["openFileDialog", "onFileDialogClose"]);
  
      return /*#__PURE__*/React__default.createElement("input", Object.assign({}, inputProps, {
        ref: this.fileInputNode,
        autoComplete: "off"
      }));
    }
  
  }
  
  const img$1 = "data:image/svg+xml,%3csvg width='60' height='60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M41.87 24a17.87 17.87 0 11-35.74 0 17.87 17.87 0 0135.74 0zm-3.15 18.96a24 24 0 114.24-4.24L59.04 54.8a3 3 0 11-4.24 4.24L38.72 42.96z' fill='%238C9196'/%3e%3c/svg%3e";
  
  function EmptySearchResult({
    title,
    description,
    withIllustration
  }) {
    const i18n = useI18n();
    const altText = i18n.translate('Polaris.EmptySearchResult.altText');
    const descriptionMarkup = description ? /*#__PURE__*/React__default.createElement("p", null, description) : null;
    const illustrationMarkup = withIllustration ? /*#__PURE__*/React__default.createElement(Image, {
      alt: altText,
      source: img$1,
      draggable: false
    }) : null;
    return /*#__PURE__*/React__default.createElement(Stack, {
      alignment: "center",
      vertical: true
    }, illustrationMarkup, /*#__PURE__*/React__default.createElement(DisplayText, {
      size: "small"
    }, title), /*#__PURE__*/React__default.createElement(TextStyle, {
      variation: "subdued"
    }, descriptionMarkup));
  }
  
  var styles$T = {
    "EmptyState": "Polaris-EmptyState",
    "Section": "Polaris-EmptyState__Section",
    "ImageContainer": "Polaris-EmptyState__ImageContainer",
    "DetailsContainer": "Polaris-EmptyState__DetailsContainer",
    "newDesignLanguage": "Polaris-EmptyState--newDesignLanguage",
    "withinContentContainer": "Polaris-EmptyState--withinContentContainer",
    "Details": "Polaris-EmptyState__Details",
    "Image": "Polaris-EmptyState__Image",
    "Content": "Polaris-EmptyState__Content",
    "withinPage": "Polaris-EmptyState--withinPage",
    "imageContained": "Polaris-EmptyState--imageContained",
    "fullWidth": "Polaris-EmptyState--fullWidth",
    "Actions": "Polaris-EmptyState__Actions",
    "FooterContent": "Polaris-EmptyState__FooterContent"
  };
  
  function EmptyState({
    children,
    heading,
    image,
    largeImage,
    imageContained,
    fullWidth = false,
    action,
    secondaryAction,
    footerContent
  }) {
    const withinContentContainer = React.useContext(WithinContentContext);
    const {
      newDesignLanguage = false
    } = useFeatures();
    const className = classNames(styles$T.EmptyState, fullWidth && styles$T.fullWidth, newDesignLanguage && styles$T.newDesignLanguage, imageContained && styles$T.imageContained, withinContentContainer ? styles$T.withinContentContainer : styles$T.withinPage);
    const imageMarkup = largeImage ? /*#__PURE__*/React__default.createElement(Image, {
      alt: "",
      role: "presentation",
      className: styles$T.Image,
      source: largeImage,
      sourceSet: [{
        source: image,
        descriptor: '568w'
      }, {
        source: largeImage,
        descriptor: '1136w'
      }],
      sizes: "(max-width: 568px) 60vw"
    }) : /*#__PURE__*/React__default.createElement(Image, {
      role: "presentation",
      alt: "",
      className: styles$T.Image,
      source: image
    });
    const secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, newDesignLanguage ? {} : {
      plain: true
    }) : null;
    const footerContentMarkup = footerContent ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.FooterContent
    }, /*#__PURE__*/React__default.createElement(TextContainer, null, footerContent)) : null;
    const headingSize = withinContentContainer ? 'small' : 'medium';
    const primaryActionSize = withinContentContainer || newDesignLanguage ? 'medium' : 'large';
    const primaryActionMarkup = action ? buttonFrom(action, {
      primary: true,
      size: primaryActionSize
    }) : null;
    const headingMarkup = heading ? /*#__PURE__*/React__default.createElement(DisplayText, {
      size: headingSize
    }, heading) : null;
    const childrenMarkup = children ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.Content
    }, children) : null;
    const textContentMarkup = headingMarkup || children ? /*#__PURE__*/React__default.createElement(TextContainer, null, headingMarkup, childrenMarkup) : null;
    const actionsMarkup = primaryActionMarkup || secondaryActionMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.Actions
    }, /*#__PURE__*/React__default.createElement(Stack, {
      alignment: "center",
      distribution: newDesignLanguage ? 'center' : undefined,
      spacing: newDesignLanguage ? 'tight' : undefined
    }, primaryActionMarkup, secondaryActionMarkup)) : null;
    const detailsMarkup = textContentMarkup || actionsMarkup || footerContentMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.DetailsContainer
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.Details
    }, textContentMarkup, actionsMarkup, footerContentMarkup)) : /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.DetailsContainer
    });
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.Section
    }, detailsMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$T.ImageContainer
    }, imageMarkup)));
  }
  
  var styles$U = {
    "Truncate": "Polaris-Truncate"
  };
  
  function Truncate({
    children
  }) {
    return /*#__PURE__*/React__default.createElement("span", {
      className: styles$U.Truncate
    }, children);
  }
  
  var styles$V = {
    "ExceptionList": "Polaris-ExceptionList",
    "Item": "Polaris-ExceptionList__Item",
    "Icon": "Polaris-ExceptionList__Icon",
    "statusWarning": "Polaris-ExceptionList--statusWarning",
    "statusCritical": "Polaris-ExceptionList--statusCritical",
    "Bullet": "Polaris-ExceptionList__Bullet",
    "Title": "Polaris-ExceptionList__Title",
    "Description": "Polaris-ExceptionList__Description"
  };
  
  function ExceptionList({
    items: itemsList
  }) {
    const items = itemsList.map((item, index) => {
      const {
        status,
        icon,
        title,
        description,
        truncate = false
      } = item;
      const itemClasses = classNames(styles$V.Item, status && styles$V[variationName('status', status)]);
      const iconMarkup = icon ? /*#__PURE__*/React__default.createElement(Icon, {
        source: icon
      }) : /*#__PURE__*/React__default.createElement("span", {
        className: styles$V.Bullet
      });
      const titleMarkup = title && /*#__PURE__*/React__default.createElement("span", {
        className: styles$V.Title
      }, title);
      const descriptionMarkup = description && /*#__PURE__*/React__default.createElement("span", {
        className: styles$V.Description
      }, description);
      const Element = truncate ? Truncate : React.Fragment;
      return /*#__PURE__*/React__default.createElement("li", {
        className: itemClasses,
        key: index
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$V.Icon
      }, iconMarkup), /*#__PURE__*/React__default.createElement(Element, null, titleMarkup, descriptionMarkup));
    });
    return /*#__PURE__*/React__default.createElement("ul", {
      className: styles$V.ExceptionList
    }, items);
  }
  
  var styles$W = {
    "Tag": "Polaris-Tag",
    "disabled": "Polaris-Tag--disabled",
    "removable": "Polaris-Tag--removable",
    "clickable": "Polaris-Tag--clickable",
    "newDesignLanguage": "Polaris-Tag--newDesignLanguage",
    "TagText": "Polaris-Tag__TagText",
    "Button": "Polaris-Tag__Button"
  };
  
  var _ref$d = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CancelSmallMinor
  });
  
  function Tag({
    children,
    disabled = false,
    onClick,
    onRemove
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$W.Tag, disabled && styles$W.disabled, onClick && styles$W.clickable, onRemove && styles$W.removable, newDesignLanguage && styles$W.newDesignLanguage);
    const ariaLabel = i18n.translate('Polaris.Tag.ariaLabel', {
      children: children || ''
    });
    const buttonClassName = classNames(styles$W.Button, newDesignLanguage && styles$W.newDesignLanguage);
    const removeButton = onRemove ? /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      "aria-label": ariaLabel,
      className: buttonClassName,
      onClick: onRemove,
      onMouseUp: handleMouseUpByBlurring,
      disabled: disabled
    }, _ref$d) : null;
    const tagMarkup = onClick ? /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      disabled: disabled,
      className: className,
      onClick: onClick
    }, children) : /*#__PURE__*/React__default.createElement("span", {
      className: className
    }, /*#__PURE__*/React__default.createElement("span", {
      title: children,
      className: styles$W.TagText
    }, children), removeButton);
    return tagMarkup;
  }
  
  const Focus = /*#__PURE__*/React.memo(function Focus({
    children,
    disabled,
    root
  }) {
    React.useEffect(() => {
      if (disabled || !root) {
        return;
      }
  
      const node = isRef(root) ? root.current : root;
  
      if (!node || node.querySelector('[autofocus]')) {
        return;
      }
  
      focusFirstFocusableNode(node, false);
    }, [disabled, root]);
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
  });
  
  function isRef(ref) {
    return ref.current !== undefined;
  }
  
  function TrapFocus({
    trapping = true,
    children
  }) {
    const [shouldFocusSelf, setFocusSelf] = React.useState(undefined);
    const {
      canSafelyFocus
    } = useFocusManager({
      trapping
    });
    const focusTrapWrapper = React.useRef(null);
    React.useEffect(() => {
      setFocusSelf(!(canSafelyFocus && focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement)));
    }, [canSafelyFocus]);
  
    const shouldDisableFirstElementFocus = () => {
      if (shouldFocusSelf === undefined || !canSafelyFocus) {
        return true;
      }
  
      return shouldFocusSelf ? !trapping : !shouldFocusSelf;
    };
  
    const handleFocusIn = event => {
      const containerContentsHaveFocus = focusTrapWrapper.current && focusTrapWrapper.current.contains(document.activeElement);
  
      if (trapping === false || !focusTrapWrapper.current || containerContentsHaveFocus || event.target instanceof Element && event.target.matches(`${portal.selector} *`)) {
        return;
      }
  
      if (canSafelyFocus && event.target instanceof HTMLElement && focusTrapWrapper.current !== event.target && !focusTrapWrapper.current.contains(event.target)) {
        focusFirstFocusableNode(focusTrapWrapper.current);
      }
    };
  
    const handleTab = event => {
      if (trapping === false || !focusTrapWrapper.current) {
        return;
      }
  
      const firstFocusableNode = findFirstKeyboardFocusableNode(focusTrapWrapper.current);
      const lastFocusableNode = findLastKeyboardFocusableNode(focusTrapWrapper.current);
  
      if (event.target === lastFocusableNode && !event.shiftKey) {
        event.preventDefault();
        focusFirstKeyboardFocusableNode(focusTrapWrapper.current);
      }
  
      if (event.target === firstFocusableNode && event.shiftKey) {
        event.preventDefault();
        focusLastKeyboardFocusableNode(focusTrapWrapper.current);
      }
    };
  
    return /*#__PURE__*/React__default.createElement(Focus, {
      disabled: shouldDisableFirstElementFocus(),
      root: focusTrapWrapper.current
    }, /*#__PURE__*/React__default.createElement("div", {
      ref: focusTrapWrapper
    }, /*#__PURE__*/React__default.createElement(EventListener, {
      event: "focusin",
      handler: handleFocusIn
    }), /*#__PURE__*/React__default.createElement(KeypressListener, {
      keyCode: exports.Key.Tab,
      keyEvent: "keydown",
      handler: handleTab
    }), children));
  }
  
  var styles$X = {
    "Sheet": "Polaris-Sheet",
    "Container": "Polaris-Sheet__Container",
    "Bottom": "Polaris-Sheet__Bottom",
    "enterBottom": "Polaris-Sheet--enterBottom",
    "enterBottomActive": "Polaris-Sheet--enterBottomActive",
    "exitBottom": "Polaris-Sheet--exitBottom",
    "exitBottomActive": "Polaris-Sheet--exitBottomActive",
    "Right": "Polaris-Sheet__Right",
    "enterRight": "Polaris-Sheet--enterRight",
    "enterRightActive": "Polaris-Sheet--enterRightActive",
    "exitRight": "Polaris-Sheet--exitRight",
    "exitRightActive": "Polaris-Sheet--exitRightActive"
  };
  
  const BOTTOM_CLASS_NAMES = {
    enter: classNames(styles$X.Bottom, styles$X.enterBottom),
    enterActive: classNames(styles$X.Bottom, styles$X.enterBottomActive),
    exit: classNames(styles$X.Bottom, styles$X.exitBottom),
    exitActive: classNames(styles$X.Bottom, styles$X.exitBottomActive)
  };
  const RIGHT_CLASS_NAMES = {
    enter: classNames(styles$X.Right, styles$X.enterRight),
    enterActive: classNames(styles$X.Right, styles$X.enterRightActive),
    exit: classNames(styles$X.Right, styles$X.exitRight),
    exitActive: classNames(styles$X.Right, styles$X.exitRightActive)
  };
  function Sheet({
    children,
    open,
    onClose,
    onEntered,
    onExit
  }) {
    const {
      isNavigationCollapsed
    } = useMediaQuery();
    const container = React.useRef(null);
    return /*#__PURE__*/React__default.createElement(Portal, {
      idPrefix: "sheet"
    }, /*#__PURE__*/React__default.createElement(reactTransitionGroup.CSSTransition, {
      nodeRef: container,
      classNames: isNavigationCollapsed ? BOTTOM_CLASS_NAMES : RIGHT_CLASS_NAMES,
      timeout: tokens.durationSlow,
      in: open,
      mountOnEnter: true,
      unmountOnExit: true,
      onEntered: onEntered,
      onExit: onExit
    }, /*#__PURE__*/React__default.createElement("div", Object.assign({
      className: styles$X.Container
    }, layer.props, overlay.props, {
      ref: container
    }), /*#__PURE__*/React__default.createElement(TrapFocus, {
      trapping: open
    }, /*#__PURE__*/React__default.createElement("div", {
      role: "dialog",
      tabIndex: -1,
      className: styles$X.Sheet
    }, children)))), /*#__PURE__*/React__default.createElement(KeypressListener, {
      keyCode: exports.Key.Escape,
      handler: onClose
    }), open && /*#__PURE__*/React__default.createElement(Backdrop, {
      transparent: true,
      onClick: onClose
    }));
  }
  
  var styles$Y = {
    "Item": "Polaris-Filters-ConnectedFilterControl__Item",
    "Item-focused": "Polaris-Filters-ConnectedFilterControl__Item--focused",
    "ProxyButtonContainer": "Polaris-Filters-ConnectedFilterControl__ProxyButtonContainer",
    "ConnectedFilterControl": "Polaris-Filters-ConnectedFilterControl",
    "CenterContainer": "Polaris-Filters-ConnectedFilterControl__CenterContainer",
    "right": "Polaris-Filters-ConnectedFilterControl--right",
    "newDesignLanguage": "Polaris-Filters-ConnectedFilterControl--newDesignLanguage",
    "RightContainer": "Polaris-Filters-ConnectedFilterControl__RightContainer",
    "MoreFiltersButtonContainer": "Polaris-Filters-ConnectedFilterControl__MoreFiltersButtonContainer",
    "queryFieldHidden": "Polaris-Filters-ConnectedFilterControl--queryFieldHidden",
    "RightContainerWithoutMoreFilters": "Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters",
    "onlyButtonVisible": "Polaris-Filters-ConnectedFilterControl--onlyButtonVisible",
    "Wrapper": "Polaris-Filters-ConnectedFilterControl__Wrapper",
    "AuxiliaryContainer": "Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer"
  };
  
  class Item$4 extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        focused: false
      };
  
      this.handleBlur = () => {
        this.setState({
          focused: false
        });
      };
  
      this.handleFocus = () => {
        this.setState({
          focused: true
        });
      };
    }
  
    render() {
      const {
        focused
      } = this.state;
      const {
        children
      } = this.props;
      const className = classNames(styles$Y.Item, focused && styles$Y['Item-focused']);
      return /*#__PURE__*/React__default.createElement("div", {
        onBlur: this.handleBlur,
        onFocus: this.handleFocus,
        className: className
      }, children);
    }
  
  }
  
  const FILTER_FIELD_MIN_WIDTH = 150;
  class ConnectedFilterControl extends React.Component {
    constructor(...args) {
      super(...args);
      this.context = void 0;
      this.state = {
        availableWidth: 0,
        proxyButtonsWidth: {}
      };
      this.container = /*#__PURE__*/React.createRef();
      this.proxyButtonContainer = /*#__PURE__*/React.createRef();
      this.moreFiltersButtonContainer = /*#__PURE__*/React.createRef();
      this.handleResize = debounce(() => {
        this.measureProxyButtons();
        this.measureAvailableWidth();
      }, 40, {
        leading: true,
        trailing: true,
        maxWait: 40
      });
    }
  
    componentDidMount() {
      this.handleResize();
    }
  
    render() {
      const {
        newDesignLanguage
      } = this.context || {};
      const {
        children,
        rightPopoverableActions,
        rightAction,
        auxiliary,
        forceShowMorefiltersButton = true,
        queryFieldHidden
      } = this.props;
      const actionsToRender = rightPopoverableActions != null ? this.getActionsToRender(rightPopoverableActions) : [];
      const className = classNames(styles$Y.ConnectedFilterControl, rightPopoverableActions && styles$Y.right, newDesignLanguage && styles$Y.newDesignLanguage);
      const shouldRenderMoreFiltersButton = forceShowMorefiltersButton || rightPopoverableActions && rightPopoverableActions.length !== actionsToRender.length;
      const RightContainerClassName = classNames(styles$Y.RightContainer, !shouldRenderMoreFiltersButton && styles$Y.RightContainerWithoutMoreFilters, queryFieldHidden && styles$Y.queryFieldHidden);
      const rightMarkup = actionsToRender.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
        className: RightContainerClassName
      }, this.popoverFrom(actionsToRender)) : null;
      const moreFiltersButtonContainerClassname = classNames(styles$Y.MoreFiltersButtonContainer, actionsToRender.length === 0 && (newDesignLanguage || queryFieldHidden) && styles$Y.onlyButtonVisible);
      const rightActionMarkup = rightAction ? /*#__PURE__*/React__default.createElement("div", {
        ref: this.moreFiltersButtonContainer,
        className: moreFiltersButtonContainerClassname
      }, shouldRenderMoreFiltersButton && /*#__PURE__*/React__default.createElement(Item$4, null, rightAction)) : null;
      const proxyButtonMarkup = rightPopoverableActions ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$Y.ProxyButtonContainer,
        ref: this.proxyButtonContainer,
        "aria-hidden": true
      }, rightPopoverableActions.map(action => /*#__PURE__*/React__default.createElement("div", {
        key: action.key,
        "data-key": action.key
      }, this.activatorButtonFrom(action, {
        proxy: true
      })))) : null;
      const auxMarkup = auxiliary ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$Y.AuxiliaryContainer
      }, auxiliary) : null;
      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, proxyButtonMarkup, /*#__PURE__*/React__default.createElement("div", {
        className: styles$Y.Wrapper
      }, /*#__PURE__*/React__default.createElement("div", {
        className: className,
        ref: this.container
      }, children ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$Y.CenterContainer
      }, /*#__PURE__*/React__default.createElement(Item$4, null, children)) : null, rightMarkup, rightActionMarkup, /*#__PURE__*/React__default.createElement(EventListener, {
        event: "resize",
        handler: this.handleResize
      })), auxMarkup));
    }
  
    measureProxyButtons() {
      if (this.proxyButtonContainer.current) {
        const proxyButtonsWidth = {}; // this number is magical, but tweaking it solved the problem of items overlapping
  
        const tolerance = 78;
  
        if (this.proxyButtonContainer.current) {
          Array.from(this.proxyButtonContainer.current.children).forEach(element => {
            const buttonWidth = element.getBoundingClientRect().width + tolerance;
            const buttonKey = element instanceof HTMLElement && element.dataset.key;
  
            if (buttonKey) {
              proxyButtonsWidth[buttonKey] = buttonWidth;
            }
          });
        }
  
        this.setState({
          proxyButtonsWidth
        });
      }
    }
  
    measureAvailableWidth() {
      if (this.container.current && this.moreFiltersButtonContainer.current) {
        const containerWidth = this.container.current.getBoundingClientRect().width;
        const moreFiltersButtonWidth = this.moreFiltersButtonContainer.current.getBoundingClientRect().width;
        const filtersActionWidth = 0;
        const filterFieldMinWidth = this.props.queryFieldHidden ? 0 : FILTER_FIELD_MIN_WIDTH;
        const availableWidth = containerWidth - filterFieldMinWidth - moreFiltersButtonWidth - filtersActionWidth;
        this.setState({
          availableWidth
        });
      }
    }
  
    getActionsToRender(actions) {
      let remainingWidth = this.state.availableWidth;
      const actionsToReturn = [];
  
      for (let i = 0; remainingWidth > 0 && i < actions.length; i++) {
        const action = actions[i];
        const actionWidth = this.state.proxyButtonsWidth[action.key];
  
        if (actionWidth <= remainingWidth) {
          actionsToReturn.push(action);
          remainingWidth -= actionWidth;
        } else {
          // When we can't fit an action, we break the loop.
          // The ones that didn't fit will be accessible through the "More filters" button
          break;
        }
      }
  
      return actionsToReturn;
    }
  
    activatorButtonFrom(action, options) {
      const id = (options == null ? void 0 : options.proxy) ? undefined : `Activator-${action.key}`;
      return /*#__PURE__*/React__default.createElement(Button, {
        onClick: action.onAction,
        disclosure: true,
        disabled: this.props.disabled || action.disabled,
        id: id
      }, action.content);
    }
  
    popoverFrom(actions) {
      return actions.map(action => {
        return /*#__PURE__*/React__default.createElement(Item$4, {
          key: action.key
        }, /*#__PURE__*/React__default.createElement(Popover, {
          active: action.popoverOpen,
          activator: this.activatorButtonFrom(action),
          onClose: action.onAction,
          preferredAlignment: "left",
          sectioned: true
        }, action.popoverContent));
      });
    }
  
  }
  ConnectedFilterControl.contextType = FeaturesContext;
  
  function TagsWrapper({
    children,
    hidden
  }) {
    if (hidden) {
      return /*#__PURE__*/React__default.createElement(VisuallyHidden, null, children);
    }
  
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
  }
  
  var styles$Z = {
    "Filters": "Polaris-Filters",
    "FiltersContainer": "Polaris-Filters__FiltersContainer",
    "FiltersContainerHeader": "Polaris-Filters__FiltersContainerHeader",
    "newDesignLanguage": "Polaris-Filters--newDesignLanguage",
    "FiltersDesktopContainerContent": "Polaris-Filters__FiltersDesktopContainerContent",
    "FiltersMobileContainerContent": "Polaris-Filters__FiltersMobileContainerContent",
    "FiltersContainerFooter": "Polaris-Filters__FiltersContainerFooter",
    "FiltersMobileContainerFooter": "Polaris-Filters__FiltersMobileContainerFooter",
    "EmptyFooterState": "Polaris-Filters__EmptyFooterState",
    "FilterTriggerContainer": "Polaris-Filters__FilterTriggerContainer",
    "FilterTrigger": "Polaris-Filters__FilterTrigger",
    "FilterTriggerTitle": "Polaris-Filters__FilterTriggerTitle",
    "AppliedFilterBadgeContainer": "Polaris-Filters__AppliedFilterBadgeContainer",
    "open": "Polaris-Filters--open",
    "FilterTriggerLabelContainer": "Polaris-Filters__FilterTriggerLabelContainer",
    "first": "Polaris-Filters--first",
    "last": "Polaris-Filters--last",
    "FilterNodeContainer": "Polaris-Filters__FilterNodeContainer",
    "SearchIcon": "Polaris-Filters__SearchIcon",
    "Backdrop": "Polaris-Filters__Backdrop",
    "HelpText": "Polaris-Filters__HelpText",
    "TagsContainer": "Polaris-Filters__TagsContainer"
  };
  
  var Suffix;
  
  (function (Suffix) {
    Suffix["Filter"] = "Filter";
    Suffix["Shortcut"] = "Shortcut";
  })(Suffix || (Suffix = {}));
  
  var _ref$e = /*#__PURE__*/React__default.createElement(ScrollLock$1, null);
  
  var _ref2$3 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.SearchMinor
  });
  
  class FiltersInner extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        open: false,
        readyForFocus: false
      };
      this.moreFiltersButtonContainer = /*#__PURE__*/React.createRef();
      this.focusNode = /*#__PURE__*/React.createRef();
  
      this.closeFilters = () => {
        this.setState({
          open: false
        }, () => {
          if (this.moreFiltersButtonContainer.current) {
            focusFirstFocusableNode(this.moreFiltersButtonContainer.current, false);
          }
        });
      };
  
      this.toggleFilters = () => {
        if (this.state.open === true) {
          this.closeFilters();
        } else {
          this.openFilters();
        }
      };
  
      this.setReadyForFocus = newState => () => {
        this.setState({
          readyForFocus: newState
        });
      };
    }
  
    render() {
      const {
        filters,
        queryValue,
        onQueryBlur,
        onQueryChange,
        onQueryFocus,
        focused,
        onClearAll,
        appliedFilters,
        onQueryClear,
        queryPlaceholder,
        children,
        disabled = false,
        helpText,
        hideTags,
        hideQueryField,
        features: {
          newDesignLanguage
        },
        i18n,
        mediaQuery: {
          isNavigationCollapsed
        }
      } = this.props;
      const {
        resourceName
      } = this.context;
      const {
        open,
        readyForFocus
      } = this.state;
      const backdropMarkup = open ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _ref$e, /*#__PURE__*/React__default.createElement("div", {
        className: styles$Z.Backdrop,
        onClick: this.closeFilters
      })) : null;
      const filtersContentMarkup = filters.map((filter, index) => {
        const filterIsOpen = this.state[`${filter.key}${Suffix.Filter}`] === true;
        const icon = filterIsOpen ? polarisIcons.ChevronUpMinor : polarisIcons.ChevronDownMinor;
        const className = classNames(styles$Z.FilterTriggerContainer, filterIsOpen && styles$Z.open, index === 0 && styles$Z.first, filters.length !== 1 && index === filters.length - 1 && styles$Z.last);
        const appliedFilterContent = this.getAppliedFilterContent(filter.key);
        const appliedFilterBadgeMarkup = appliedFilterContent ? /*#__PURE__*/React__default.createElement("div", {
          className: styles$Z.AppliedFilterBadgeContainer
        }, /*#__PURE__*/React__default.createElement(Badge, {
          size: "small",
          status: "new"
        }, appliedFilterContent)) : null;
        const collapsibleID = `${filter.key}Collapsible`;
        const buttonClassName = classNames(styles$Z.FilterTrigger, newDesignLanguage && styles$Z.newDesignLanguage);
        return /*#__PURE__*/React__default.createElement("div", {
          key: filter.key,
          className: className
        }, /*#__PURE__*/React__default.createElement("button", {
          onClick: () => this.toggleFilter(filter.key),
          className: buttonClassName,
          id: `${filter.key}ToggleButton`,
          type: "button",
          "aria-controls": collapsibleID,
          "aria-expanded": filterIsOpen
        }, /*#__PURE__*/React__default.createElement("div", {
          className: styles$Z.FilterTriggerLabelContainer
        }, /*#__PURE__*/React__default.createElement("h3", {
          className: styles$Z.FilterTriggerTitle
        }, /*#__PURE__*/React__default.createElement(TextStyle, {
          variation: this.props.disabled || filter.disabled ? 'subdued' : undefined
        }, filter.label)), /*#__PURE__*/React__default.createElement("span", {
          className: styles$Z.FilterTriggerIcon
        }, /*#__PURE__*/React__default.createElement(Icon, {
          source: icon,
          color: "inkLightest"
        }))), appliedFilterBadgeMarkup), /*#__PURE__*/React__default.createElement(Collapsible, {
          id: collapsibleID,
          open: filterIsOpen
        }, /*#__PURE__*/React__default.createElement("div", {
          className: styles$Z.FilterNodeContainer
        }, /*#__PURE__*/React__default.createElement(Focus, {
          disabled: !filterIsOpen || !readyForFocus || !open,
          root: this.focusNode
        }, this.generateFilterMarkup(filter)))));
      });
      const appliedFiltersCount = appliedFilters ? appliedFilters.length : 0;
      const moreFiltersLabel = hideTags && appliedFiltersCount > 0 ? i18n.translate('Polaris.Filters.moreFiltersWithCount', {
        count: appliedFiltersCount
      }) : i18n.translate('Polaris.Filters.moreFilters');
      const rightActionMarkup = /*#__PURE__*/React__default.createElement("div", {
        ref: this.moreFiltersButtonContainer
      }, /*#__PURE__*/React__default.createElement(Button, {
        onClick: this.toggleFilters,
        disabled: disabled
      }, moreFiltersLabel));
      const filterResourceName = resourceName || {
        singular: i18n.translate('Polaris.ResourceList.defaultItemSingular'),
        plural: i18n.translate('Polaris.ResourceList.defaultItemPlural')
      };
      const transformedFilters = this.transformFilters(filters);
      const filtersControlMarkup = /*#__PURE__*/React__default.createElement(ConnectedFilterControl, {
        rightPopoverableActions: transformedFilters,
        rightAction: rightActionMarkup,
        auxiliary: children,
        disabled: disabled,
        forceShowMorefiltersButton: filters.length > transformedFilters.length,
        queryFieldHidden: hideQueryField
      }, hideQueryField ? null : /*#__PURE__*/React__default.createElement(TextField, {
        placeholder: queryPlaceholder || i18n.translate('Polaris.Filters.filter', {
          resourceName: filterResourceName.plural
        }),
        onChange: onQueryChange,
        onBlur: onQueryBlur,
        onFocus: onQueryFocus,
        value: queryValue,
        focused: focused,
        label: queryPlaceholder || i18n.translate('Polaris.Filters.filter', {
          resourceName: filterResourceName.plural
        }),
        labelHidden: true,
        prefix: /*#__PURE__*/React__default.createElement("span", {
          className: styles$Z.SearchIcon
        }, _ref2$3),
        clearButton: true,
        onClearButtonClick: onQueryClear,
        disabled: disabled
      }));
      const filtersContainerHeaderClassname = classNames(styles$Z.FiltersContainerHeader, newDesignLanguage && styles$Z.newDesignLanguage);
      const filtersDesktopHeaderMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: filtersContainerHeaderClassname
      }, /*#__PURE__*/React__default.createElement(DisplayText, {
        size: "small",
        element: "h3"
      }, moreFiltersLabel), /*#__PURE__*/React__default.createElement(Button, {
        icon: polarisIcons.CancelSmallMinor,
        plain: true,
        accessibilityLabel: i18n.translate('Polaris.Filters.cancel'),
        onClick: this.closeFilters
      }));
      const filtersMobileHeaderMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: filtersContainerHeaderClassname
      }, /*#__PURE__*/React__default.createElement(Button, {
        icon: polarisIcons.CancelSmallMinor,
        plain: true,
        accessibilityLabel: i18n.translate('Polaris.Filters.cancel'),
        onClick: this.closeFilters
      }), /*#__PURE__*/React__default.createElement(DisplayText, {
        size: "small",
        element: "h3"
      }, moreFiltersLabel), /*#__PURE__*/React__default.createElement(Button, {
        onClick: this.closeFilters,
        primary: true
      }, i18n.translate('Polaris.Filters.done')));
      const filtersDesktopFooterClassname = classNames(styles$Z.FiltersContainerFooter, newDesignLanguage && styles$Z.newDesignLanguage);
      const filtersDesktopFooterMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: filtersDesktopFooterClassname
      }, /*#__PURE__*/React__default.createElement(Button, {
        onClick: onClearAll,
        disabled: !this.hasAppliedFilters()
      }, i18n.translate('Polaris.Filters.clearAllFilters')), /*#__PURE__*/React__default.createElement(Button, {
        onClick: this.closeFilters,
        primary: true
      }, i18n.translate('Polaris.Filters.done')));
      const filtersMobileFooterMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: styles$Z.FiltersMobileContainerFooter
      }, this.hasAppliedFilters() ? /*#__PURE__*/React__default.createElement(Button, {
        onClick: onClearAll,
        fullWidth: true
      }, i18n.translate('Polaris.Filters.clearAllFilters')) : /*#__PURE__*/React__default.createElement("div", {
        className: styles$Z.EmptyFooterState
      }, /*#__PURE__*/React__default.createElement(TextStyle, {
        variation: "subdued"
      }, /*#__PURE__*/React__default.createElement("p", null, i18n.translate('Polaris.Filters.noFiltersApplied')))));
      const shouldHideTagsContainer = !appliedFilters || appliedFilters.length < 1;
      const tagsMarkup = !hideTags ? /*#__PURE__*/React__default.createElement(TagsWrapper, {
        hidden: shouldHideTagsContainer
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$Z.TagsContainer,
        "aria-live": "polite"
      }, (appliedFilters || []).map(filter => {
        return /*#__PURE__*/React__default.createElement(Tag, {
          key: filter.key,
          onRemove: () => {
            filter.onRemove(filter.key);
          },
          disabled: disabled
        }, filter.label);
      }))) : null;
      const filtersMobileContainerContentClassName = classNames(styles$Z.FiltersMobileContainerContent, newDesignLanguage && styles$Z.newDesignLanguage);
      const filtersDesktopContainerContentClassName = classNames(styles$Z.FiltersDesktopContainerContent, newDesignLanguage && styles$Z.newDesignLanguage);
      const filtersContainerMarkup = isNavigationCollapsed ? /*#__PURE__*/React__default.createElement(Sheet, {
        open: open,
        onClose: this.closeFilters,
        onEntered: this.setReadyForFocus(true),
        onExit: this.setReadyForFocus(false)
      }, filtersMobileHeaderMarkup, /*#__PURE__*/React__default.createElement(Scrollable, {
        className: filtersMobileContainerContentClassName,
        shadow: true
      }, filtersContentMarkup, filtersMobileFooterMarkup)) : /*#__PURE__*/React__default.createElement(Sheet, {
        open: open,
        onClose: this.closeFilters,
        onEntered: this.setReadyForFocus(true),
        onExit: this.setReadyForFocus(false)
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$Z.FiltersContainer
      }, filtersDesktopHeaderMarkup, /*#__PURE__*/React__default.createElement(Scrollable, {
        className: filtersDesktopContainerContentClassName,
        shadow: true
      }, filtersContentMarkup), filtersDesktopFooterMarkup));
      const helpTextMarkup = helpText ? /*#__PURE__*/React__default.createElement("div", {
        id: "FiltersHelpText",
        className: styles$Z.HelpText
      }, /*#__PURE__*/React__default.createElement(TextStyle, {
        variation: "subdued"
      }, helpText)) : null;
      return /*#__PURE__*/React__default.createElement(WithinFilterContext.Provider, {
        value: true
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$Z.Filters
      }, filtersControlMarkup, filtersContainerMarkup, tagsMarkup, helpTextMarkup, backdropMarkup, /*#__PURE__*/React__default.createElement(KeypressListener, {
        keyCode: exports.Key.Escape,
        handler: this.closeFilters
      })));
    }
  
    hasAppliedFilters() {
      const {
        appliedFilters,
        queryValue
      } = this.props;
      const filtersApplied = Boolean(appliedFilters && appliedFilters.length > 0);
      const queryApplied = Boolean(queryValue && queryValue !== '');
      return filtersApplied || queryApplied;
    }
  
    getAppliedFilterContent(key) {
      const {
        appliedFilters
      } = this.props;
  
      if (!appliedFilters) {
        return undefined;
      }
  
      const filter = appliedFilters.find(filter => filter.key === key);
      return filter == null ? undefined : filter.label;
    }
  
    getAppliedFilterRemoveHandler(key) {
      const {
        appliedFilters
      } = this.props;
  
      if (!appliedFilters) {
        return undefined;
      }
  
      const filter = appliedFilters.find(filter => filter.key === key);
      return filter == null ? undefined : filter.onRemove;
    }
  
    openFilters() {
      this.setState({
        open: true
      });
    }
  
    openFilter(key) {
      this.setState({
        [`${key}${Suffix.Filter}`]: true
      });
    }
  
    closeFilter(key) {
      this.setState({
        [`${key}${Suffix.Filter}`]: false
      });
    }
  
    toggleFilter(key) {
      if (this.state[`${key}${Suffix.Filter}`] === true) {
        this.closeFilter(key);
      } else {
        this.openFilter(key);
      }
    }
  
    openFilterShortcut(key) {
      this.setState({
        [`${key}${Suffix.Shortcut}`]: true
      });
    }
  
    closeFilterShortcut(key) {
      this.setState({
        [`${key}${Suffix.Shortcut}`]: false
      });
    }
  
    toggleFilterShortcut(key) {
      if (this.state[`${key}${Suffix.Shortcut}`] === true) {
        this.closeFilterShortcut(key);
      } else {
        this.openFilterShortcut(key);
      }
    }
  
    transformFilters(filters) {
      const transformedActions = [];
      getShortcutFilters(filters).forEach(filter => {
        const {
          key,
          label,
          disabled
        } = filter;
        transformedActions.push({
          popoverContent: this.generateFilterMarkup(filter),
          popoverOpen: Boolean(this.state[`${key}${Suffix.Shortcut}`]),
          key,
          content: label,
          disabled,
          onAction: () => this.toggleFilterShortcut(key)
        });
      });
      return transformedActions;
    }
  
    generateFilterMarkup(filter) {
      const i18n = this.props.i18n;
      const removeCallback = this.getAppliedFilterRemoveHandler(filter.key);
      const removeHandler = removeCallback == null ? undefined : () => {
        removeCallback(filter.key);
      };
      const clearButtonMarkup = !filter.hideClearButton && /*#__PURE__*/React__default.createElement(Button, {
        plain: true,
        disabled: removeHandler == null,
        onClick: removeHandler,
        accessibilityLabel: i18n.translate('Polaris.Filters.clearLabel', {
          filterName: filter.label
        })
      }, i18n.translate('Polaris.Filters.clear'));
      return /*#__PURE__*/React__default.createElement("div", {
        ref: this.focusNode
      }, /*#__PURE__*/React__default.createElement(Stack, {
        vertical: true,
        spacing: "tight"
      }, filter.filter, clearButtonMarkup));
    }
  
  }
  
  FiltersInner.contextType = ResourceListContext;
  
  function getShortcutFilters(filters) {
    return filters.filter(filter => filter.shortcut === true);
  }
  
  function Filters(props) {
    const i18n = useI18n();
    const mediaQuery = useMediaQuery();
    const features = useFeatures();
    return /*#__PURE__*/React__default.createElement(FiltersInner, Object.assign({}, props, {
      i18n: i18n,
      mediaQuery: mediaQuery,
      features: features
    }));
  }
  
  var styles$_ = {
    "FooterHelp": "Polaris-FooterHelp",
    "Content": "Polaris-FooterHelp__Content",
    "newDesignLanguage": "Polaris-FooterHelp--newDesignLanguage",
    "Icon": "Polaris-FooterHelp__Icon",
    "Text": "Polaris-FooterHelp__Text"
  };
  
  function FooterHelp({
    children
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$_.FooterHelp, newDesignLanguage && styles$_.newDesignLanguage);
    const iconProps = {
      source: newDesignLanguage ? polarisIcons.InfoMinor : polarisIcons.QuestionMarkMajor,
      color: newDesignLanguage ? 'highlight' : 'teal',
      backdrop: !newDesignLanguage
    };
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$_.Content
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$_.Icon
    }, /*#__PURE__*/React__default.createElement(Icon, iconProps)), /*#__PURE__*/React__default.createElement("div", {
      className: styles$_.Text
    }, children)));
  }
  
  function Form({
    acceptCharset,
    action,
    autoComplete,
    children,
    encType,
    implicitSubmit = true,
    method = 'post',
    name,
    noValidate,
    preventDefault = true,
    target,
    onSubmit
  }) {
    const i18n = useI18n();
    const handleSubmit = React.useCallback(event => {
      if (!preventDefault) {
        return;
      }
  
      event.preventDefault();
      onSubmit(event);
    }, [onSubmit, preventDefault]);
    const autoCompleteInputs = normalizeAutoComplete$1(autoComplete);
    const submitMarkup = implicitSubmit ? /*#__PURE__*/React__default.createElement(VisuallyHidden, null, /*#__PURE__*/React__default.createElement("button", {
      type: "submit",
      "aria-hidden": "true",
      tabIndex: -1
    }, i18n.translate('Polaris.Common.submit'))) : null;
    return /*#__PURE__*/React__default.createElement("form", {
      acceptCharset: acceptCharset,
      action: action,
      autoComplete: autoCompleteInputs,
      encType: encType,
      method: method,
      name: name,
      noValidate: noValidate,
      target: target,
      onSubmit: handleSubmit
    }, children, submitMarkup);
  }
  
  function normalizeAutoComplete$1(autoComplete) {
    if (autoComplete == null) {
      return autoComplete;
    }
  
    return autoComplete ? 'on' : 'off';
  }
  
  var styles$$ = {
    "FormLayout": "Polaris-FormLayout",
    "Title": "Polaris-FormLayout__Title",
    "Items": "Polaris-FormLayout__Items",
    "HelpText": "Polaris-FormLayout__HelpText",
    "Item": "Polaris-FormLayout__Item",
    "grouped": "Polaris-FormLayout--grouped",
    "condensed": "Polaris-FormLayout--condensed"
  };
  
  function Item$5(props) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$$.Item
    }, props.children);
  }
  
  function Group({
    children,
    condensed,
    title,
    helpText
  }) {
    const className = classNames(condensed ? styles$$.condensed : styles$$.grouped);
    const id = useUniqueId('FormLayoutGroup');
    let helpTextElement = null;
    let helpTextID;
    let titleElement = null;
    let titleID;
  
    if (helpText) {
      helpTextID = `${id}HelpText`;
      helpTextElement = /*#__PURE__*/React__default.createElement("div", {
        id: helpTextID,
        className: styles$$.HelpText
      }, helpText);
    }
  
    if (title) {
      titleID = `${id}Title`;
      titleElement = /*#__PURE__*/React__default.createElement("div", {
        id: titleID,
        className: styles$$.Title
      }, title);
    }
  
    const itemsMarkup = React.Children.map(children, child => wrapWithComponent(child, Item$5, {}));
    return /*#__PURE__*/React__default.createElement("div", {
      role: "group",
      className: className,
      "aria-labelledby": titleID,
      "aria-describedby": helpTextID
    }, titleElement, /*#__PURE__*/React__default.createElement("div", {
      className: styles$$.Items
    }, itemsMarkup), helpTextElement);
  }
  
  const FormLayout = /*#__PURE__*/React.memo(function FormLayout({
    children
  }) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$$.FormLayout
    }, React.Children.map(children, wrapChildren));
  });
  FormLayout.Group = Group;
  
  function wrapChildren(child, index) {
    if (isElementOfType(child, Group)) {
      return child;
    }
  
    const props = {
      key: index
    };
    return wrapWithComponent(child, Item$5, props);
  }
  
  function setRootProperty(name, value, node) {
    if (document == null) {
      return;
    }
  
    const styleNode = node && node instanceof HTMLElement ? node : document.documentElement;
    styleNode && styleNode.style.setProperty(name, value);
  }
  
  var styles$10 = {
    "Toast": "Polaris-Frame-Toast",
    "Action": "Polaris-Frame-Toast__Action",
    "error": "Polaris-Frame-Toast--error",
    "CloseButton": "Polaris-Frame-Toast__CloseButton"
  };
  
  const DEFAULT_TOAST_DURATION = 5000;
  const DEFAULT_TOAST_DURATION_WITH_ACTION = 10000;
  
  var _ref$f = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.MobileCancelMajor
  });
  
  function Toast({
    content,
    onDismiss,
    duration,
    error,
    action
  }) {
    React.useEffect(() => {
      let timeoutDuration = duration || DEFAULT_TOAST_DURATION;
  
      if (action && !duration) {
        timeoutDuration = DEFAULT_TOAST_DURATION_WITH_ACTION;
      } else if (action && duration && duration < DEFAULT_TOAST_DURATION_WITH_ACTION) {
        // eslint-disable-next-line no-console
        console.log('Toast with action should persist for at least 10,000 milliseconds to give the merchant enough time to act on it.');
      }
  
      const timer = setTimeout(onDismiss, timeoutDuration);
      return () => {
        clearTimeout(timer);
      };
    }, [action, duration, onDismiss]);
    const dismissMarkup = /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      className: styles$10.CloseButton,
      onClick: onDismiss
    }, _ref$f);
    const actionMarkup = action ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$10.Action
    }, /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      monochrome: true,
      onClick: action.onAction
    }, action.content)) : null;
    const className = classNames(styles$10.Toast, error && styles$10.error);
    return /*#__PURE__*/React__default.createElement(ThemeProvider, {
      theme: {
        colorScheme: 'inverse'
      }
    }, /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, /*#__PURE__*/React__default.createElement(KeypressListener, {
      keyCode: exports.Key.Escape,
      handler: onDismiss
    }), content, actionMarkup, dismissMarkup));
  }
  
  /**
   * A replacement for React's useCallback that'll allow for custom and deep compares.
   * @see {@link https://reactjs.org/docs/hooks-reference.html#usecallback}
   * @param callback Accepts a callback that's forwarded to React's useCallback
   * @param dependencies A dependency array similar to React's useCallback however it utilizes a deep compare
   * @param customCompare Opportunity to provide a custom compare function
   * @returns A memoized callback
   * @example
   * const Child = memo(function Child({onClick}) {
   *   console.log('Child has rendered.');
   *   return <button onClick={onClick}>Click me</button>;
   * });
   *
   * function ComponentExample() {
   *   const [timesClicked, setTimesClicked] = useState(0);
   *
   *   const handleClick = useDeepCallback(() => {
   *     setTimesClicked((timesClicked) => timesClicked + 1);
   *     // New reference every render
   *   }, [{}]);
   *
   *   return (
   *     <>
   *       <div>Times clicked: {timesClicked}</div>
   *       <Child onClick={handleClick} />
   *     </>
   *   );
   * }
   */
  
  function useDeepCallback(callback, dependencies, customCompare) {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    return React.useCallback(callback, useDeepCompareRef(dependencies, customCompare));
  }
  
  var styles$11 = {
    "ToastManager": "Polaris-Frame-ToastManager",
    "ToastWrapper": "Polaris-Frame-ToastManager__ToastWrapper",
    "ToastWrapper-enter": "Polaris-Frame-ToastManager__ToastWrapper--enter",
    "ToastWrapper-exit": "Polaris-Frame-ToastManager__ToastWrapper--exit",
    "ToastWrapper-enter-done": "Polaris-Frame-ToastManager--toastWrapperEnterDone"
  };
  
  const ToastManager = /*#__PURE__*/React.memo(function ToastManager({
    toastMessages
  }) {
    const toastNodes = [];
    const updateToasts = useDeepCallback(() => {
      let targetInPos = 0;
      toastMessages.forEach((_, index) => {
        const currentToast = toastNodes[index];
        if (!currentToast.current) return;
        targetInPos += currentToast.current.clientHeight;
        currentToast.current.style.setProperty('--toast-translate-y-in', `-${targetInPos}px`);
        currentToast.current.style.setProperty('--toast-translate-y-out', `${-targetInPos + 150}px`);
      });
    }, [toastMessages, toastNodes]);
    useDeepEffect(() => {
      updateToasts();
    }, [toastMessages]);
    const toastsMarkup = toastMessages.map((toast, index) => {
      const toastNode = /*#__PURE__*/React.createRef();
      toastNodes[index] = toastNode;
      return /*#__PURE__*/React__default.createElement(reactTransitionGroup.CSSTransition, {
        nodeRef: toastNodes[index],
        key: toast.id,
        timeout: {
          enter: 0,
          exit: 400
        },
        classNames: toastClasses
      }, /*#__PURE__*/React__default.createElement("div", {
        ref: toastNode
      }, /*#__PURE__*/React__default.createElement(Toast, toast)));
    });
    return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(EventListener, {
      event: "resize",
      handler: updateToasts
    }), /*#__PURE__*/React__default.createElement("div", {
      className: styles$11.ToastManager,
      "aria-live": "polite"
    }, /*#__PURE__*/React__default.createElement(reactTransitionGroup.TransitionGroup, {
      component: null
    }, toastsMarkup)));
  });
  const toastClasses = {
    enter: classNames(styles$11.ToastWrapper, styles$11['ToastWrapper-enter']),
    enterDone: classNames(styles$11.ToastWrapper, styles$11['ToastWrapper-enter-done']),
    exit: classNames(styles$11.ToastWrapper, styles$11['ToastWrapper-exit'])
  };
  
  var styles$12 = {
    "Loading": "Polaris-Frame-Loading",
    "Level": "Polaris-Frame-Loading__Level"
  };
  
  const STUCK_THRESHOLD = 99;
  function Loading() {
    const i18n = useI18n();
    const [progress, setProgress] = React.useState(0);
    const [animating, setAnimating] = React.useState(false);
    React.useEffect(() => {
      if (progress >= STUCK_THRESHOLD || animating) {
        return;
      }
  
      requestAnimationFrame(() => {
        const step = Math.max((STUCK_THRESHOLD - progress) / 10, 1);
        setAnimating(true);
        setProgress(progress + step);
      });
    }, [progress, animating]);
    const customStyles = {
      transform: `scaleX(${Math.floor(progress) / 100})`
    };
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$12.Loading,
      "aria-valuenow": progress,
      "aria-valuemin": 0,
      "aria-valuemax": 100,
      role: "progressbar",
      "aria-label": i18n.translate('Polaris.Loading.label')
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$12.Level,
      style: customStyles,
      onTransitionEnd: () => setAnimating(false)
    }));
  }
  
  function isObject(value) {
    const type = typeof value;
    return value != null && (type === 'object' || type === 'function');
  }
  
  function pluckDeep(obj, key) {
    if (!obj) {
      return null;
    }
  
    const keys = Object.keys(obj);
  
    for (const currKey of keys) {
      if (currKey === key) {
        return obj[key];
      }
  
      if (isObject(obj[currKey])) {
        const plucked = pluckDeep(obj[currKey], key);
  
        if (plucked) {
          return plucked;
        }
      }
    }
  
    return null;
  }
  
  function getWidth(value = {}, defaultWidth = 0, key = 'width') {
    const width = typeof value === 'number' ? value : pluckDeep(value, key);
    return width ? `${width}px` : `${defaultWidth}px`;
  }
  
  var styles$13 = {
    "Container": "Polaris-Modal-Dialog__Container",
    "Dialog": "Polaris-Modal-Dialog",
    "Modal": "Polaris-Modal-Dialog__Modal",
    "limitHeight": "Polaris-Modal-Dialog--limitHeight",
    "sizeLarge": "Polaris-Modal-Dialog--sizeLarge",
    "animateFadeUp": "Polaris-Modal-Dialog--animateFadeUp",
    "entering": "Polaris-Modal-Dialog--entering",
    "exiting": "Polaris-Modal-Dialog--exiting",
    "exited": "Polaris-Modal-Dialog--exited",
    "entered": "Polaris-Modal-Dialog--entered"
  };
  
  function Dialog(_ref) {
    let {
      instant,
      labelledBy,
      children,
      onClose,
      onExited,
      onEntered,
      large,
      limitHeight
    } = _ref,
        props = _objectWithoutProperties(_ref, ["instant", "labelledBy", "children", "onClose", "onExited", "onEntered", "large", "limitHeight"]);
  
    const containerNode = React.useRef(null);
    const classes = classNames(styles$13.Modal, large && styles$13.sizeLarge, limitHeight && styles$13.limitHeight);
    const TransitionChild = instant ? reactTransitionGroup.Transition : FadeUp;
    React.useEffect(() => {
      containerNode.current && !containerNode.current.contains(document.activeElement) && focusFirstFocusableNode(containerNode.current);
    }, []);
    return /*#__PURE__*/React__default.createElement(TransitionChild, Object.assign({}, props, {
      nodeRef: containerNode,
      mountOnEnter: true,
      unmountOnExit: true,
      timeout: tokens.durationBase,
      onEntered: onEntered,
      onExited: onExited
    }), /*#__PURE__*/React__default.createElement("div", {
      className: styles$13.Container,
      "data-polaris-layer": true,
      "data-polaris-overlay": true,
      ref: containerNode
    }, /*#__PURE__*/React__default.createElement(TrapFocus, null, /*#__PURE__*/React__default.createElement("div", {
      role: "dialog",
      "aria-labelledby": labelledBy,
      tabIndex: -1,
      className: styles$13.Dialog
    }, /*#__PURE__*/React__default.createElement("div", {
      className: classes
    }, /*#__PURE__*/React__default.createElement(KeypressListener, {
      keyCode: exports.Key.Escape,
      handler: onClose
    }), children)))));
  }
  const fadeUpClasses = {
    appear: classNames(styles$13.animateFadeUp, styles$13.entering),
    appearActive: classNames(styles$13.animateFadeUp, styles$13.entered),
    enter: classNames(styles$13.animateFadeUp, styles$13.entering),
    enterActive: classNames(styles$13.animateFadeUp, styles$13.entered),
    exit: classNames(styles$13.animateFadeUp, styles$13.exiting),
    exitActive: classNames(styles$13.animateFadeUp, styles$13.exited)
  };
  
  function FadeUp(_ref2) {
    let {
      children
    } = _ref2,
        props = _objectWithoutProperties(_ref2, ["children"]);
  
    return /*#__PURE__*/React__default.createElement(reactTransitionGroup.CSSTransition, Object.assign({}, props, {
      classNames: fadeUpClasses
    }), children);
  }
  
  var styles$14 = {
    "Footer": "Polaris-Modal-Footer",
    "FooterContent": "Polaris-Modal-Footer__FooterContent"
  };
  
  function Footer({
    primaryAction,
    secondaryActions,
    children
  }) {
    const primaryActionButton = primaryAction && buttonsFrom(primaryAction, {
      primary: true
    }) || null;
    const secondaryActionButtons = secondaryActions && buttonsFrom(secondaryActions) || null;
    const actions = primaryActionButton || secondaryActionButtons ? /*#__PURE__*/React__default.createElement(ButtonGroup, null, secondaryActionButtons, primaryActionButton) : null;
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$14.Footer
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$14.FooterContent
    }, /*#__PURE__*/React__default.createElement(Stack, {
      alignment: "center"
    }, /*#__PURE__*/React__default.createElement(Stack.Item, {
      fill: true
    }, children), actions)));
  }
  
  var styles$15 = {
    "CloseButton": "Polaris-Modal-CloseButton",
    "withoutTitle": "Polaris-Modal-CloseButton--withoutTitle"
  };
  
  var _ref$g = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.MobileCancelMajor,
    color: "inkLighter"
  });
  
  function CloseButton({
    title = true,
    onClick
  }) {
    const i18n = useI18n();
    const className = classNames(styles$15.CloseButton, !title && styles$15.withoutTitle);
    return /*#__PURE__*/React__default.createElement("button", {
      onClick: onClick,
      className: className,
      "aria-label": i18n.translate('Polaris.Common.close')
    }, _ref$g);
  }
  
  var styles$16 = {
    "Header": "Polaris-Modal-Header",
    "Title": "Polaris-Modal-Header__Title"
  };
  
  function Header$1({
    id,
    children,
    onClose
  }) {
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$16.Header
    }, /*#__PURE__*/React__default.createElement("div", {
      id: id,
      className: styles$16.Title
    }, /*#__PURE__*/React__default.createElement(DisplayText, {
      element: "h2",
      size: "small"
    }, children)), /*#__PURE__*/React__default.createElement(CloseButton, {
      onClick: onClose
    }));
  }
  
  var styles$17 = {
    "Section": "Polaris-Modal-Section",
    "subdued": "Polaris-Modal-Section--subdued",
    "flush": "Polaris-Modal-Section--flush"
  };
  
  function Section$3({
    children,
    flush = false,
    subdued = false
  }) {
    const className = classNames(styles$17.Section, flush && styles$17.flush, subdued && styles$17.subdued);
    return /*#__PURE__*/React__default.createElement("section", {
      className: className
    }, children);
  }
  
  var styles$18 = {
    "BodyWrapper": "Polaris-Modal__BodyWrapper",
    "Body": "Polaris-Modal__Body",
    "IFrame": "Polaris-Modal__IFrame",
    "Spinner": "Polaris-Modal__Spinner"
  };
  
  const IFRAME_LOADING_HEIGHT = 200;
  const DEFAULT_IFRAME_CONTENT_HEIGHT = 400;
  
  var _ref$h = /*#__PURE__*/React__default.createElement(Spinner, null);
  
  var _ref2$4 = /*#__PURE__*/React__default.createElement(Backdrop, null);
  
  const Modal = function Modal({
    children,
    title,
    src,
    iFrameName,
    open,
    instant,
    sectioned,
    loading,
    large,
    limitHeight,
    footer,
    primaryAction,
    secondaryActions,
    onScrolledToBottom,
    activator,
    onClose,
    onIFrameLoad,
    onTransitionEnd
  }) {
    const [iframeHeight, setIframeHeight] = React.useState(IFRAME_LOADING_HEIGHT);
    const headerId = useUniqueId('modal-header');
    const activatorRef = React.useRef(null);
    const i18n = useI18n();
    const iframeTitle = i18n.translate('Polaris.Modal.iFrameTitle');
    let dialog;
    let backdrop;
    const handleEntered = React.useCallback(() => {
      if (onTransitionEnd) {
        onTransitionEnd();
      }
    }, [onTransitionEnd]);
    const handleExited = React.useCallback(() => {
      setIframeHeight(IFRAME_LOADING_HEIGHT);
      const activatorElement = activator && isRef$1(activator) ? activator && activator.current : activatorRef.current;
  
      if (activatorElement) {
        requestAnimationFrame(() => focusFirstFocusableNode(activatorElement));
      }
    }, [activator]);
    const handleIFrameLoad = React.useCallback(evt => {
      const iframe = evt.target;
  
      if (iframe && iframe.contentWindow) {
        try {
          setIframeHeight(iframe.contentWindow.document.body.scrollHeight);
        } catch (_unused) {
          setIframeHeight(DEFAULT_IFRAME_CONTENT_HEIGHT);
        }
      }
  
      if (onIFrameLoad != null) {
        onIFrameLoad(evt);
      }
    }, [onIFrameLoad]);
  
    if (open) {
      const footerMarkup = !footer && !primaryAction && !secondaryActions ? null : /*#__PURE__*/React__default.createElement(Footer, {
        primaryAction: primaryAction,
        secondaryActions: secondaryActions
      }, footer);
      const content = sectioned ? wrapWithComponent(children, Section$3, {}) : children;
      const body = loading ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$18.Spinner
      }, _ref$h) : content;
      const bodyMarkup = src ? /*#__PURE__*/React__default.createElement("iframe", {
        name: iFrameName,
        title: iframeTitle,
        src: src,
        className: styles$18.IFrame,
        onLoad: handleIFrameLoad,
        style: {
          height: `${iframeHeight}px`
        }
      }) : /*#__PURE__*/React__default.createElement(Scrollable, {
        shadow: true,
        className: styles$18.Body,
        onScrolledToBottom: onScrolledToBottom
      }, body);
      const headerMarkup = title ? /*#__PURE__*/React__default.createElement(Header$1, {
        id: headerId,
        onClose: onClose
      }, title) : /*#__PURE__*/React__default.createElement(CloseButton, {
        onClick: onClose,
        title: false
      });
      const labelledBy = title ? headerId : undefined;
      dialog = /*#__PURE__*/React__default.createElement(Dialog, {
        instant: instant,
        labelledBy: labelledBy,
        onClose: onClose,
        onEntered: handleEntered,
        onExited: handleExited,
        large: large,
        limitHeight: limitHeight
      }, headerMarkup, /*#__PURE__*/React__default.createElement("div", {
        className: styles$18.BodyWrapper
      }, bodyMarkup), footerMarkup);
      backdrop = _ref2$4;
    }
  
    const animated = !instant;
    const activatorMarkup = activator && !isRef$1(activator) ? /*#__PURE__*/React__default.createElement("div", {
      ref: activatorRef
    }, activator) : null;
    return /*#__PURE__*/React__default.createElement(WithinContentContext.Provider, {
      value: true
    }, activatorMarkup, /*#__PURE__*/React__default.createElement(Portal, {
      idPrefix: "modal"
    }, /*#__PURE__*/React__default.createElement(reactTransitionGroup.TransitionGroup, {
      appear: animated,
      enter: animated,
      exit: animated
    }, dialog), backdrop));
  };
  
  function isRef$1(ref) {
    return Object.prototype.hasOwnProperty.call(ref, 'current');
  }
  
  Modal.Section = Section$3;
  
  function DiscardConfirmationModal({
    open,
    onDiscard,
    onCancel
  }) {
    const i18n = useI18n();
    return /*#__PURE__*/React__default.createElement(Modal, {
      title: i18n.translate('Polaris.DiscardConfirmationModal.title'),
      open: open,
      onClose: onCancel,
      primaryAction: {
        content: i18n.translate('Polaris.DiscardConfirmationModal.primaryAction'),
        destructive: true,
        onAction: onDiscard
      },
      secondaryActions: [{
        content: i18n.translate('Polaris.DiscardConfirmationModal.secondaryAction'),
        onAction: onCancel
      }],
      sectioned: true
    }, i18n.translate('Polaris.DiscardConfirmationModal.message'));
  }
  
  var styles$19 = {
    "ContextualSaveBar": "Polaris-Frame-ContextualSaveBar",
    "LogoContainer": "Polaris-Frame-ContextualSaveBar__LogoContainer",
    "Contents": "Polaris-Frame-ContextualSaveBar__Contents",
    "fullWidth": "Polaris-Frame-ContextualSaveBar--fullWidth",
    "Message": "Polaris-Frame-ContextualSaveBar__Message",
    "ActionContainer": "Polaris-Frame-ContextualSaveBar__ActionContainer",
    "Action": "Polaris-Frame-ContextualSaveBar__Action",
    "ContextControl": "Polaris-Frame-ContextualSaveBar__ContextControl",
    "newDesignLanguage": "Polaris-Frame-ContextualSaveBar--newDesignLanguage"
  };
  
  function ContextualSaveBar$1({
    alignContentFlush,
    message,
    saveAction,
    discardAction,
    fullWidth,
    contextControl
  }) {
    const i18n = useI18n();
    const {
      logo
    } = useTheme();
    const {
      newDesignLanguage = false
    } = useFeatures();
    const {
      value: discardConfirmationModalVisible,
      toggle: toggleDiscardConfirmationModal,
      setFalse: closeDiscardConfirmationModal
    } = useToggle(false);
    const handleDiscardAction = React.useCallback(() => {
      if (discardAction && discardAction.onAction) {
        discardAction.onAction();
      }
  
      closeDiscardConfirmationModal();
    }, [closeDiscardConfirmationModal, discardAction]);
    const discardActionContent = discardAction && discardAction.content ? discardAction.content : i18n.translate('Polaris.ContextualSaveBar.discard');
    let discardActionHandler;
  
    if (discardAction && discardAction.discardConfirmationModal) {
      discardActionHandler = toggleDiscardConfirmationModal;
    } else if (discardAction) {
      discardActionHandler = discardAction.onAction;
    }
  
    const discardConfirmationModalMarkup = discardAction && discardAction.onAction && discardAction.discardConfirmationModal && /*#__PURE__*/React__default.createElement(DiscardConfirmationModal, {
      open: discardConfirmationModalVisible,
      onCancel: toggleDiscardConfirmationModal,
      onDiscard: handleDiscardAction
    });
    const discardActionMarkup = discardAction && /*#__PURE__*/React__default.createElement(Button, {
      url: discardAction.url,
      onClick: discardActionHandler,
      loading: discardAction.loading,
      disabled: discardAction.disabled,
      accessibilityLabel: discardAction.content
    }, discardActionContent);
    const saveActionContent = saveAction && saveAction.content ? saveAction.content : i18n.translate('Polaris.ContextualSaveBar.save');
    const saveActionMarkup = saveAction && /*#__PURE__*/React__default.createElement(Button, {
      primary: true,
      url: saveAction.url,
      onClick: saveAction.onAction,
      loading: saveAction.loading,
      disabled: saveAction.disabled,
      accessibilityLabel: saveAction.content
    }, saveActionContent);
    const width = getWidth(logo, 104);
    const imageMarkup = logo && /*#__PURE__*/React__default.createElement(Image, {
      style: {
        width
      },
      source: logo.contextualSaveBarSource || '',
      alt: ""
    });
    const logoMarkup = alignContentFlush || contextControl ? null : /*#__PURE__*/React__default.createElement("div", {
      className: styles$19.LogoContainer,
      style: {
        width
      }
    }, imageMarkup);
    const contextControlMarkup = contextControl ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$19.ContextControl
    }, contextControl) : null;
    const contexualSaveBarClassName = classNames(styles$19.ContextualSaveBar, newDesignLanguage && styles$19.newDesignLanguage);
    const contentsClassName = classNames(styles$19.Contents, fullWidth && styles$19.fullWidth);
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ThemeProvider, {
      theme: {
        colorScheme: 'inverse'
      }
    }, /*#__PURE__*/React__default.createElement("div", {
      className: contexualSaveBarClassName
    }, contextControlMarkup, logoMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: contentsClassName
    }, /*#__PURE__*/React__default.createElement("h2", {
      className: styles$19.Message
    }, message), /*#__PURE__*/React__default.createElement("div", {
      className: styles$19.ActionContainer
    }, /*#__PURE__*/React__default.createElement(Stack, {
      spacing: "tight",
      wrap: false
    }, discardActionMarkup, saveActionMarkup))))), discardConfirmationModalMarkup);
  }
  
  var styles$1a = {
    "startFade": "Polaris-Frame-CSSAnimation--startFade",
    "endFade": "Polaris-Frame-CSSAnimation--endFade"
  };
  
  var TransitionStatus$1;
  
  (function (TransitionStatus) {
    TransitionStatus["Entering"] = "entering";
    TransitionStatus["Entered"] = "entered";
    TransitionStatus["Exiting"] = "exiting";
    TransitionStatus["Exited"] = "exited";
  })(TransitionStatus$1 || (TransitionStatus$1 = {}));
  
  function CSSAnimation({
    in: inProp,
    className,
    type,
    children
  }) {
    const [transitionStatus, setTransitionStatus] = React.useState(inProp ? TransitionStatus$1.Entering : TransitionStatus$1.Exited);
    const isMounted = React.useRef(false);
    const node = React.useRef(null);
    React.useEffect(() => {
      if (!isMounted.current) return;
      transitionStatus === TransitionStatus$1.Entering && changeTransitionStatus(TransitionStatus$1.Entered);
    }, [transitionStatus]);
    React.useEffect(() => {
      if (!isMounted.current) return;
      inProp && changeTransitionStatus(TransitionStatus$1.Entering);
      !inProp && changeTransitionStatus(TransitionStatus$1.Exiting);
    }, [inProp]);
    React.useEffect(() => {
      isMounted.current = true;
    }, []);
    const wrapperClassName = classNames(className, styles$1a[variationName('start', type)], inProp && styles$1a[variationName('end', type)]);
    const content = transitionStatus === TransitionStatus$1.Exited && !inProp ? null : children;
    return /*#__PURE__*/React__default.createElement("div", {
      className: wrapperClassName,
      ref: node,
      onTransitionEnd: handleTransitionEnd
    }, content);
  
    function handleTransitionEnd() {
      transitionStatus === TransitionStatus$1.Exiting && changeTransitionStatus(TransitionStatus$1.Exited);
    }
  
    function changeTransitionStatus(transitionStatus) {
      setTransitionStatus(transitionStatus); // Forcing a reflow to enable the animation
  
      if (transitionStatus === TransitionStatus$1.Entering) node.current && node.current.getBoundingClientRect();
    }
  }
  
  var styles$1b = {
    "Frame": "Polaris-Frame",
    "Navigation": "Polaris-Frame__Navigation",
    "hasTopBar": "Polaris-Frame--hasTopBar",
    "Navigation-enter": "Polaris-Frame__Navigation--enter",
    "Navigation-enterActive": "Polaris-Frame__Navigation--enterActive",
    "Navigation-exit": "Polaris-Frame__Navigation--exit",
    "Navigation-exitActive": "Polaris-Frame__Navigation--exitActive",
    "NavigationDismiss": "Polaris-Frame__NavigationDismiss",
    "Navigation-visible": "Polaris-Frame__Navigation--visible",
    "Navigation-newDesignLanguage": "Polaris-Frame__Navigation--newDesignLanguage",
    "TopBar": "Polaris-Frame__TopBar",
    "ContextualSaveBar": "Polaris-Frame__ContextualSaveBar",
    "Main": "Polaris-Frame__Main",
    "hasNav": "Polaris-Frame--hasNav",
    "Main-newDesignLanguage": "Polaris-Frame__Main--newDesignLanguage",
    "Content": "Polaris-Frame__Content",
    "GlobalRibbonContainer": "Polaris-Frame__GlobalRibbonContainer",
    "LoadingBar": "Polaris-Frame__LoadingBar",
    "Skip": "Polaris-Frame__Skip",
    "focused": "Polaris-Frame--focused",
    "newDesignLanguage": "Polaris-Frame--newDesignLanguage",
    "pressed": "Polaris-Frame--pressed"
  };
  
  const GLOBAL_RIBBON_CUSTOM_PROPERTY = '--global-ribbon-height';
  const APP_FRAME_MAIN = 'AppFrameMain';
  const APP_FRAME_MAIN_ANCHOR_TARGET = 'AppFrameMainContent';
  const APP_FRAME_NAV = 'AppFrameNav';
  const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
  const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
  
  var _ref$i = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.MobileCancelMajor
  });
  
  var _ref2$5 = /*#__PURE__*/React__default.createElement(Loading, null);
  
  class FrameInner extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        skipFocused: false,
        globalRibbonHeight: 0,
        loadingStack: 0,
        toastMessages: [],
        showContextualSaveBar: false
      };
      this.contextualSaveBar = null;
      this.globalRibbonContainer = null;
      this.navigationNode = /*#__PURE__*/React.createRef();
      this.skipToMainContentTargetNode = this.props.skipToContentTarget || /*#__PURE__*/React.createRef();
  
      this.setGlobalRibbonHeight = () => {
        const {
          globalRibbonContainer
        } = this;
  
        if (globalRibbonContainer) {
          this.setState({
            globalRibbonHeight: globalRibbonContainer.offsetHeight
          }, this.setGlobalRibbonRootProperty);
        }
      };
  
      this.setGlobalRibbonRootProperty = () => {
        const {
          globalRibbonHeight
        } = this.state;
        setRootProperty(GLOBAL_RIBBON_CUSTOM_PROPERTY, `${globalRibbonHeight}px`, null);
      };
  
      this.showToast = toast => {
        this.setState(({
          toastMessages
        }) => {
          const hasToastById = toastMessages.find(({
            id
          }) => id === toast.id) != null;
          return {
            toastMessages: hasToastById ? toastMessages : [...toastMessages, toast]
          };
        });
      };
  
      this.hideToast = ({
        id
      }) => {
        this.setState(({
          toastMessages
        }) => {
          return {
            toastMessages: toastMessages.filter(({
              id: toastId
            }) => id !== toastId)
          };
        });
      };
  
      this.setContextualSaveBar = props => {
        const {
          showContextualSaveBar
        } = this.state;
        this.contextualSaveBar = _objectSpread2({}, props);
  
        if (showContextualSaveBar === true) {
          this.forceUpdate();
        } else {
          this.setState({
            showContextualSaveBar: true
          });
        }
      };
  
      this.removeContextualSaveBar = () => {
        this.contextualSaveBar = null;
        this.setState({
          showContextualSaveBar: false
        });
      };
  
      this.startLoading = () => {
        this.setState(({
          loadingStack
        }) => ({
          loadingStack: loadingStack + 1
        }));
      };
  
      this.stopLoading = () => {
        this.setState(({
          loadingStack
        }) => ({
          loadingStack: Math.max(0, loadingStack - 1)
        }));
      };
  
      this.handleResize = () => {
        if (this.props.globalRibbon) {
          this.setGlobalRibbonHeight();
        }
      };
  
      this.handleFocus = () => {
        this.setState({
          skipFocused: true
        });
      };
  
      this.handleBlur = () => {
        this.setState({
          skipFocused: false
        });
      };
  
      this.handleClick = () => {
        this.skipToMainContentTargetNode.current && this.skipToMainContentTargetNode.current.focus();
      };
  
      this.handleNavigationDismiss = () => {
        const {
          onNavigationDismiss
        } = this.props;
  
        if (onNavigationDismiss != null) {
          onNavigationDismiss();
        }
      };
  
      this.setGlobalRibbonContainer = node => {
        this.globalRibbonContainer = node;
      };
  
      this.handleNavKeydown = event => {
        const {
          key
        } = event;
        const {
          mediaQuery: {
            isNavigationCollapsed
          },
          showMobileNavigation
        } = this.props;
        const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
  
        if (mobileNavShowing && key === 'Escape') {
          this.handleNavigationDismiss();
        }
      };
    }
  
    componentDidMount() {
      this.handleResize();
  
      if (this.props.globalRibbon) {
        return;
      }
  
      this.setGlobalRibbonRootProperty();
    }
  
    componentDidUpdate(prevProps) {
      if (this.props.globalRibbon !== prevProps.globalRibbon) {
        this.setGlobalRibbonHeight();
      }
    }
  
    render() {
      const {
        skipFocused,
        loadingStack,
        toastMessages,
        showContextualSaveBar
      } = this.state;
      const {
        children,
        navigation,
        topBar,
        globalRibbon,
        showMobileNavigation = false,
        skipToContentTarget,
        i18n,
        mediaQuery: {
          isNavigationCollapsed
        },
        features: {
          newDesignLanguage
        }
      } = this.props;
      const navClassName = classNames(styles$1b.Navigation, showMobileNavigation && styles$1b['Navigation-visible'], newDesignLanguage && styles$1b['Navigation-newDesignLanguage']);
      const mobileNavHidden = isNavigationCollapsed && !showMobileNavigation;
      const mobileNavShowing = isNavigationCollapsed && showMobileNavigation;
      const tabIndex = mobileNavShowing ? 0 : -1;
      const navigationMarkup = navigation ? /*#__PURE__*/React__default.createElement(TrapFocus, {
        trapping: mobileNavShowing
      }, /*#__PURE__*/React__default.createElement(reactTransitionGroup.CSSTransition, {
        nodeRef: this.navigationNode,
        appear: isNavigationCollapsed,
        exit: isNavigationCollapsed,
        in: showMobileNavigation,
        timeout: tokens.durationSlow,
        classNames: navTransitionClasses
      }, /*#__PURE__*/React__default.createElement("div", {
        ref: this.navigationNode,
        className: navClassName,
        onKeyDown: this.handleNavKeydown,
        id: APP_FRAME_NAV,
        key: "NavContent",
        hidden: mobileNavHidden
      }, navigation, /*#__PURE__*/React__default.createElement("button", {
        type: "button",
        className: styles$1b.NavigationDismiss,
        onClick: this.handleNavigationDismiss,
        "aria-hidden": mobileNavHidden || !isNavigationCollapsed && !showMobileNavigation,
        "aria-label": i18n.translate('Polaris.Frame.Navigation.closeMobileNavigationLabel'),
        tabIndex: tabIndex
      }, _ref$i)))) : null;
      const loadingMarkup = loadingStack > 0 ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$1b.LoadingBar,
        id: APP_FRAME_LOADING_BAR
      }, _ref2$5) : null;
      const contextualSaveBarMarkup = /*#__PURE__*/React__default.createElement(CSSAnimation, {
        in: showContextualSaveBar,
        className: styles$1b.ContextualSaveBar,
        type: "fade"
      }, /*#__PURE__*/React__default.createElement(ContextualSaveBar$1, this.contextualSaveBar));
      const topBarClassName = classNames(styles$1b.TopBar, newDesignLanguage && styles$1b['TopBar-newDesignLanguage']);
      const topBarMarkup = topBar ? /*#__PURE__*/React__default.createElement("div", Object.assign({
        className: topBarClassName
      }, layer.props, dataPolarisTopBar.props, {
        id: APP_FRAME_TOP_BAR
      }), topBar) : null;
      const globalRibbonClassName = classNames(styles$1b.GlobalRibbonContainer, newDesignLanguage && styles$1b['GlobalRibbonContainer-newDesignLanguage']);
      const globalRibbonMarkup = globalRibbon ? /*#__PURE__*/React__default.createElement("div", {
        className: globalRibbonClassName,
        ref: this.setGlobalRibbonContainer
      }, globalRibbon) : null;
      const skipClassName = classNames(styles$1b.Skip, skipFocused && styles$1b.focused);
      const skipTarget = (skipToContentTarget == null ? void 0 : skipToContentTarget.current) ? skipToContentTarget.current.id : APP_FRAME_MAIN_ANCHOR_TARGET;
      const skipMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: skipClassName
      }, /*#__PURE__*/React__default.createElement("a", {
        href: `#${skipTarget}`,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        onClick: this.handleClick
      }, i18n.translate('Polaris.Frame.skipToContent')));
      const navigationAttributes = navigation ? {
        'data-has-navigation': true
      } : {};
      const frameClassName = classNames(styles$1b.Frame, navigation && styles$1b.hasNav, topBar && styles$1b.hasTopBar);
      const mainClassName = classNames(styles$1b.Main, newDesignLanguage && styles$1b['Main-newDesignLanguage']);
      const navigationOverlayMarkup = showMobileNavigation && isNavigationCollapsed ? /*#__PURE__*/React__default.createElement(Backdrop, {
        belowNavigation: true,
        onClick: this.handleNavigationDismiss,
        onTouchStart: this.handleNavigationDismiss
      }) : null;
      const skipToMainContentTarget = skipToContentTarget ? null :
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      React__default.createElement("a", {
        id: APP_FRAME_MAIN_ANCHOR_TARGET,
        ref: this.skipToMainContentTargetNode,
        tabIndex: -1
      });
      const context = {
        showToast: this.showToast,
        hideToast: this.hideToast,
        startLoading: this.startLoading,
        stopLoading: this.stopLoading,
        setContextualSaveBar: this.setContextualSaveBar,
        removeContextualSaveBar: this.removeContextualSaveBar
      };
      return /*#__PURE__*/React__default.createElement(FrameContext.Provider, {
        value: context
      }, /*#__PURE__*/React__default.createElement("div", Object.assign({
        className: frameClassName
      }, layer.props, navigationAttributes), skipMarkup, topBarMarkup, navigationMarkup, contextualSaveBarMarkup, loadingMarkup, navigationOverlayMarkup, /*#__PURE__*/React__default.createElement("main", {
        className: mainClassName,
        id: APP_FRAME_MAIN,
        "data-has-global-ribbon": Boolean(globalRibbon)
      }, skipToMainContentTarget, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1b.Content
      }, children)), /*#__PURE__*/React__default.createElement(ToastManager, {
        toastMessages: toastMessages
      }), globalRibbonMarkup, /*#__PURE__*/React__default.createElement(EventListener, {
        event: "resize",
        handler: this.handleResize
      })));
    }
  
  }
  
  const navTransitionClasses = {
    enter: classNames(styles$1b['Navigation-enter']),
    enterActive: classNames(styles$1b['Navigation-enterActive']),
    enterDone: classNames(styles$1b['Navigation-enterActive']),
    exit: classNames(styles$1b['Navigation-exit']),
    exitActive: classNames(styles$1b['Navigation-exitActive'])
  };
  function Frame(props) {
    const i18n = useI18n();
    const mediaQuery = useMediaQuery();
    const features = useFeatures();
    return /*#__PURE__*/React__default.createElement(FrameInner, Object.assign({}, props, {
      i18n: i18n,
      mediaQuery: mediaQuery,
      features: features
    }));
  }
  
  var styles$1c = {
    "KeyboardKey": "Polaris-KeyboardKey"
  };
  
  function KeyboardKey({
    children
  }) {
    let key = children || '';
    key = key.length > 1 ? key.toLowerCase() : key.toUpperCase();
    return /*#__PURE__*/React__default.createElement("kbd", {
      className: styles$1c.KeyboardKey
    }, key);
  }
  
  const KONAMI_CODE = [exports.Key.UpArrow, exports.Key.UpArrow, exports.Key.DownArrow, exports.Key.DownArrow, exports.Key.LeftArrow, exports.Key.RightArrow, exports.Key.LeftArrow, exports.Key.RightArrow, exports.Key.KeyB, exports.Key.KeyA];
  function KonamiCode({
    handler
  }) {
    const keyEvent = 'keydown';
    const [position, setPosition] = React.useState(0);
  
    const handleKeyEvent = event => {
      const key = event.keyCode;
      const requiredKey = KONAMI_CODE[position];
  
      if (key === requiredKey) {
        if (position === KONAMI_CODE.length - 1) {
          handler(event);
          setPosition(0);
        } else {
          setPosition(position + 1);
        }
      } else {
        setPosition(0);
      }
    };
  
    React.useEffect(() => {
      document.addEventListener(keyEvent, handleKeyEvent);
      return () => {
        document.removeEventListener(keyEvent, handleKeyEvent);
      };
    });
    return null;
  }
  
  var styles$1d = {
    "Layout": "Polaris-Layout",
    "newDesignLanguage": "Polaris-Layout--newDesignLanguage",
    "Section": "Polaris-Layout__Section",
    "Section-secondary": "Polaris-Layout__Section--secondary",
    "Section-fullWidth": "Polaris-Layout__Section--fullWidth",
    "Section-oneHalf": "Polaris-Layout__Section--oneHalf",
    "Section-oneThird": "Polaris-Layout__Section--oneThird",
    "AnnotatedSection": "Polaris-Layout__AnnotatedSection",
    "AnnotationWrapper": "Polaris-Layout__AnnotationWrapper",
    "AnnotationContent": "Polaris-Layout__AnnotationContent",
    "Annotation": "Polaris-Layout__Annotation",
    "AnnotationDescription": "Polaris-Layout__AnnotationDescription"
  };
  
  function AnnotatedSection(props) {
    const {
      children,
      title,
      description
    } = props;
    const descriptionMarkup = typeof description === 'string' ? /*#__PURE__*/React__default.createElement("p", null, description) : description;
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1d.AnnotatedSection
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1d.AnnotationWrapper
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1d.Annotation
    }, /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(Heading, null, title), descriptionMarkup && /*#__PURE__*/React__default.createElement("div", {
      className: styles$1d.AnnotationDescription
    }, descriptionMarkup))), /*#__PURE__*/React__default.createElement("div", {
      className: styles$1d.AnnotationContent
    }, children)));
  }
  
  function Section$4({
    children,
    secondary,
    fullWidth,
    oneHalf,
    oneThird
  }) {
    const className = classNames(styles$1d.Section, secondary && styles$1d['Section-secondary'], fullWidth && styles$1d['Section-fullWidth'], oneHalf && styles$1d['Section-oneHalf'], oneThird && styles$1d['Section-oneThird']);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, children);
  }
  
  const Layout = function Layout({
    sectioned,
    children
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const content = sectioned ? /*#__PURE__*/React__default.createElement(Section$4, null, children) : children;
    const className = classNames(styles$1d.Layout, newDesignLanguage && styles$1d.newDesignLanguage);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, content);
  };
  Layout.AnnotatedSection = AnnotatedSection;
  Layout.Section = Section$4;
  
  var styles$1e = {
    "Link": "Polaris-Link",
    "IconLockup": "Polaris-Link__IconLockup",
    "IconLayout": "Polaris-Link__IconLayout",
    "monochrome": "Polaris-Link--monochrome"
  };
  
  function Link({
    url,
    children,
    onClick,
    external,
    id,
    monochrome,
    accessibilityLabel
  }) {
    const i18n = useI18n();
    let childrenMarkup = children;
    const {
      newDesignLanguage
    } = useFeatures();
  
    if (external && typeof children === 'string') {
      const iconLabel = i18n.translate('Polaris.Common.newWindowAccessibilityHint');
      childrenMarkup = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children, /*#__PURE__*/React__default.createElement("span", {
        className: styles$1e.IconLockup
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$1e.IconLayout
      }, /*#__PURE__*/React__default.createElement(Icon, {
        accessibilityLabel: iconLabel,
        source: polarisIcons.ExternalSmallMinor
      }))));
    }
  
    return /*#__PURE__*/React__default.createElement(BannerContext.Consumer, null, BannerContext => {
      const shouldBeMonochrome = monochrome || BannerContext;
      const className = classNames(styles$1e.Link, shouldBeMonochrome && styles$1e.monochrome, newDesignLanguage && styles$1e.newDesignLanguage);
      return url ? /*#__PURE__*/React__default.createElement(UnstyledLink, {
        onClick: onClick,
        className: className,
        url: url,
        external: external,
        id: id,
        "aria-label": accessibilityLabel
      }, childrenMarkup) : /*#__PURE__*/React__default.createElement("button", {
        type: "button",
        onClick: onClick,
        className: className,
        id: id,
        "aria-label": accessibilityLabel
      }, childrenMarkup);
    });
  }
  
  var styles$1f = {
    "List": "Polaris-List",
    "typeNumber": "Polaris-List--typeNumber",
    "Item": "Polaris-List__Item"
  };
  
  function Item$6({
    children
  }) {
    return /*#__PURE__*/React__default.createElement("li", {
      className: styles$1f.Item
    }, children);
  }
  
  class List extends React.PureComponent {
    render() {
      const {
        children,
        type = 'bullet'
      } = this.props;
      const className = classNames(styles$1f.List, type && styles$1f[variationName('type', type)]);
      const ListElement = type === 'bullet' ? 'ul' : 'ol';
      return /*#__PURE__*/React__default.createElement(ListElement, {
        className: className
      }, children);
    }
  
  }
  List.Item = Item$6;
  
  const Loading$1 = /*#__PURE__*/React.memo(function Loading() {
    const {
      startLoading,
      stopLoading
    } = useFrame();
    React.useEffect(() => {
      startLoading();
      return () => {
        stopLoading();
      };
    }, [startLoading, stopLoading]);
    return null;
  });
  
  var styles$1g = {
    "MediaCard": "Polaris-MediaCard",
    "portrait": "Polaris-MediaCard--portrait",
    "MediaContainer": "Polaris-MediaCard__MediaContainer",
    "sizeSmall": "Polaris-MediaCard--sizeSmall",
    "InfoContainer": "Polaris-MediaCard__InfoContainer",
    "Popover": "Polaris-MediaCard__Popover",
    "Heading": "Polaris-MediaCard__Heading",
    "PrimaryAction": "Polaris-MediaCard__PrimaryAction",
    "SecondaryAction": "Polaris-MediaCard__SecondaryAction",
    "ActionContainer": "Polaris-MediaCard__ActionContainer"
  };
  
  function MediaCard({
    title,
    children,
    primaryAction,
    secondaryAction,
    description,
    popoverActions = [],
    portrait = false,
    size = 'medium'
  }) {
    const i18n = useI18n();
    const {
      value: popoverActive,
      toggle: togglePopoverActive
    } = useToggle(false);
    let headerMarkup = null;
  
    if (title) {
      const headerContent = typeof title === 'string' ? /*#__PURE__*/React__default.createElement(Heading, null, title) : title;
      headerMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: styles$1g.Heading
      }, headerContent);
    }
  
    const popoverActivator = /*#__PURE__*/React__default.createElement(Button, {
      icon: polarisIcons.HorizontalDotsMinor,
      onClick: togglePopoverActive,
      size: "slim",
      plain: true,
      accessibilityLabel: i18n.translate('Polaris.MediaCard.popoverButton')
    });
    const popoverActionsMarkup = popoverActions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1g.Popover
    }, /*#__PURE__*/React__default.createElement(Popover, {
      active: popoverActive,
      activator: popoverActivator,
      onClose: togglePopoverActive,
      preferredAlignment: "left",
      preferredPosition: "below"
    }, /*#__PURE__*/React__default.createElement(ActionList, {
      items: popoverActions,
      onActionAnyItem: togglePopoverActive
    }))) : null;
    const primaryActionMarkup = primaryAction ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1g.PrimaryAction
    }, buttonFrom(primaryAction)) : null;
    const secondaryActionMarkup = secondaryAction ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1g.SecondaryAction
    }, buttonFrom(secondaryAction, {
      plain: true
    })) : null;
    const actionClassName = classNames(styles$1g.ActionContainer, portrait && styles$1g.portrait);
    const actionMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: actionClassName
    }, /*#__PURE__*/React__default.createElement(ButtonGroup, null, primaryActionMarkup, secondaryActionMarkup));
    const mediaCardClassName = classNames(styles$1g.MediaCard, portrait && styles$1g.portrait);
    const mediaContainerClassName = classNames(styles$1g.MediaContainer, portrait && styles$1g.portrait, size === 'small' && styles$1g.sizeSmall);
    const infoContainerClassName = classNames(styles$1g.InfoContainer, portrait && styles$1g.portrait, size === 'small' && styles$1g.sizeSmall);
    return /*#__PURE__*/React__default.createElement(Card, null, /*#__PURE__*/React__default.createElement("div", {
      className: mediaCardClassName
    }, /*#__PURE__*/React__default.createElement("div", {
      className: mediaContainerClassName
    }, children), /*#__PURE__*/React__default.createElement("div", {
      className: infoContainerClassName
    }, /*#__PURE__*/React__default.createElement(Card.Section, null, popoverActionsMarkup, /*#__PURE__*/React__default.createElement(Stack, {
      vertical: true,
      spacing: "tight"
    }, headerMarkup, /*#__PURE__*/React__default.createElement("p", {
      className: styles$1g.Description
    }, description), actionMarkup)))));
  }
  
  const NavigationContext = /*#__PURE__*/React.createContext({
    location: ''
  });
  
  var styles$1h = {
    "Navigation": "Polaris-Navigation",
    "Navigation-newDesignLanguage": "Polaris-Navigation__Navigation--newDesignLanguage",
    "UserMenu": "Polaris-Navigation__UserMenu",
    "ContextControl": "Polaris-Navigation__ContextControl",
    "PrimaryNavigation": "Polaris-Navigation__PrimaryNavigation",
    "LogoContainer": "Polaris-Navigation__LogoContainer",
    "Logo": "Polaris-Navigation__Logo",
    "LogoLink": "Polaris-Navigation__LogoLink",
    "Item": "Polaris-Navigation__Item",
    "keyFocused": "Polaris-Navigation--keyFocused",
    "Item-selected": "Polaris-Navigation__Item--selected",
    "Item-disabled": "Polaris-Navigation__Item--disabled",
    "Icon": "Polaris-Navigation__Icon",
    "Badge": "Polaris-Navigation__Badge",
    "subNavigationActive": "Polaris-Navigation--subNavigationActive",
    "ListItem": "Polaris-Navigation__ListItem",
    "RollupSection": "Polaris-Navigation__RollupSection",
    "SecondaryNavigation": "Polaris-Navigation__SecondaryNavigation",
    "fade-in": "Polaris-Navigation__fade--in",
    "ListItem-hasAction": "Polaris-Navigation__ListItem--hasAction",
    "ItemWrapper": "Polaris-Navigation__ItemWrapper",
    "Text": "Polaris-Navigation__Text",
    "SecondaryAction": "Polaris-Navigation__SecondaryAction",
    "isExpanded": "Polaris-Navigation--isExpanded",
    "List": "Polaris-Navigation__List",
    "SecondaryNavigation-noIcon": "Polaris-Navigation__SecondaryNavigation--noIcon",
    "Section": "Polaris-Navigation__Section",
    "Section-fill": "Polaris-Navigation__Section--fill",
    "Section-withSeparator": "Polaris-Navigation__Section--withSeparator",
    "SectionHeading": "Polaris-Navigation__SectionHeading",
    "Action": "Polaris-Navigation__Action",
    "RollupToggle": "Polaris-Navigation__RollupToggle",
    "Indicator": "Polaris-Navigation__Indicator"
  };
  
  function Secondary({
    id,
    children,
    expanded
  }) {
    const uid = useUniqueId('SecondaryNavigation');
    return /*#__PURE__*/React__default.createElement(Collapsible, {
      id: id || uid,
      open: expanded,
      transition: {
        duration: '0ms',
        timingFunction: 'linear'
      }
    }, /*#__PURE__*/React__default.createElement("ul", {
      className: styles$1h.List
    }, children));
  }
  
  var MatchState;
  
  (function (MatchState) {
    MatchState[MatchState["MatchForced"] = 0] = "MatchForced";
    MatchState[MatchState["MatchUrl"] = 1] = "MatchUrl";
    MatchState[MatchState["MatchPaths"] = 2] = "MatchPaths";
    MatchState[MatchState["Excluded"] = 3] = "Excluded";
    MatchState[MatchState["NoMatch"] = 4] = "NoMatch";
  })(MatchState || (MatchState = {}));
  
  var _ref$j = /*#__PURE__*/React__default.createElement(Indicator, {
    pulse: true
  });
  
  function Item$7({
    url,
    icon,
    label,
    subNavigationItems = [],
    secondaryAction,
    disabled,
    onClick,
    accessibilityLabel,
    selected: selectedOverride,
    badge,
    new: isNew,
    matches,
    exactMatch,
    matchPaths,
    excludePaths
  }) {
    const i18n = useI18n();
    const {
      isNavigationCollapsed
    } = useMediaQuery();
    const secondaryNavigationId = useUniqueId('SecondaryNavigation');
    const {
      location,
      onNavigationDismiss
    } = React.useContext(NavigationContext);
    const [expanded, setExpanded] = React.useState(false);
    const [keyFocused, setKeyFocused] = React.useState(false);
    React.useEffect(() => {
      if (!isNavigationCollapsed && expanded) {
        setExpanded(false);
      }
    }, [expanded, isNavigationCollapsed]);
    const handleKeyUp = React.useCallback(event => {
      if (event.keyCode === exports.Key.Tab) {
        !keyFocused && setKeyFocused(true);
      }
    }, [keyFocused]);
    const handleBlur = React.useCallback(() => {
      keyFocused && setKeyFocused(false);
    }, [keyFocused]);
    const tabIndex = disabled ? -1 : 0;
    const hasNewChild = subNavigationItems.filter(subNavigationItem => subNavigationItem.new).length > 0;
    const indicatorMarkup = hasNewChild ? /*#__PURE__*/React__default.createElement("span", {
      className: styles$1h.Indicator
    }, _ref$j) : null;
    const iconMarkup = icon ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1h.Icon
    }, /*#__PURE__*/React__default.createElement(Icon, {
      source: icon
    })) : null;
    let badgeMarkup = null;
  
    if (isNew) {
      badgeMarkup = /*#__PURE__*/React__default.createElement(Badge, {
        status: "new",
        size: "small"
      }, i18n.translate('Polaris.Badge.STATUS_LABELS.new'));
    } else if (typeof badge === 'string') {
      badgeMarkup = /*#__PURE__*/React__default.createElement(Badge, {
        status: "new",
        size: "small"
      }, badge);
    } else {
      badgeMarkup = badge;
    }
  
    const wrappedBadgeMarkup = badgeMarkup == null ? null : /*#__PURE__*/React__default.createElement("div", {
      className: styles$1h.Badge
    }, badgeMarkup);
    const itemContentMarkup = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, iconMarkup, /*#__PURE__*/React__default.createElement("span", {
      className: styles$1h.Text
    }, label, indicatorMarkup), wrappedBadgeMarkup);
  
    if (url == null) {
      const _className = classNames(styles$1h.Item, disabled && styles$1h['Item-disabled'], keyFocused && styles$1h.keyFocused);
  
      return /*#__PURE__*/React__default.createElement("li", {
        className: styles$1h.ListItem
      }, /*#__PURE__*/React__default.createElement("button", {
        type: "button",
        className: _className,
        disabled: disabled,
        "aria-disabled": disabled,
        "aria-label": accessibilityLabel,
        onClick: getClickHandler(onClick),
        onKeyUp: handleKeyUp,
        onBlur: handleBlur
      }, itemContentMarkup));
    }
  
    const secondaryActionMarkup = secondaryAction && /*#__PURE__*/React__default.createElement(UnstyledLink, {
      external: true,
      url: secondaryAction.url,
      className: styles$1h.SecondaryAction,
      tabIndex: tabIndex,
      "aria-disabled": disabled,
      "aria-label": secondaryAction.accessibilityLabel
    }, /*#__PURE__*/React__default.createElement(Icon, {
      source: secondaryAction.icon
    }));
    const matchState = matchStateForItem({
      url,
      matches,
      exactMatch,
      matchPaths,
      excludePaths
    }, location);
    const matchingSubNavigationItems = subNavigationItems.filter(item => {
      const subMatchState = matchStateForItem(item, location);
      return subMatchState === MatchState.MatchForced || subMatchState === MatchState.MatchUrl || subMatchState === MatchState.MatchPaths;
    });
    const childIsActive = matchingSubNavigationItems.length > 0;
    const selected = selectedOverride == null ? matchState === MatchState.MatchForced || matchState === MatchState.MatchUrl || matchState === MatchState.MatchPaths : selectedOverride;
    const showExpanded = selected || expanded || childIsActive;
    const itemClassName = classNames(styles$1h.Item, disabled && styles$1h['Item-disabled'], selected && subNavigationItems.length === 0 && styles$1h['Item-selected'], showExpanded && styles$1h.subNavigationActive, keyFocused && styles$1h.keyFocused);
    let secondaryNavigationMarkup = null;
  
    if (subNavigationItems.length > 0) {
      const longestMatch = matchingSubNavigationItems.sort(({
        url: firstUrl
      }, {
        url: secondUrl
      }) => secondUrl.length - firstUrl.length)[0];
      const SecondaryNavigationClassName = classNames(styles$1h.SecondaryNavigation, showExpanded && styles$1h.isExpanded, !icon && styles$1h['SecondaryNavigation-noIcon']);
      secondaryNavigationMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: SecondaryNavigationClassName
      }, /*#__PURE__*/React__default.createElement(Secondary, {
        expanded: showExpanded,
        id: secondaryNavigationId
      }, subNavigationItems.map(item => {
        const {
          label
        } = item,
              rest = _objectWithoutProperties(item, ["label"]);
  
        return /*#__PURE__*/React__default.createElement(Item$7, Object.assign({}, rest, {
          key: label,
          label: label,
          matches: item === longestMatch,
          onClick: onNavigationDismiss
        }));
      })));
    }
  
    const className = classNames(styles$1h.ListItem, secondaryAction && styles$1h['ListItem-hasAction']);
    return /*#__PURE__*/React__default.createElement("li", {
      className: className
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1h.ItemWrapper
    }, /*#__PURE__*/React__default.createElement(UnstyledLink, Object.assign({
      url: url,
      className: itemClassName,
      tabIndex: tabIndex,
      "aria-disabled": disabled,
      "aria-label": accessibilityLabel,
      onClick: getClickHandler(onClick),
      onKeyUp: handleKeyUp,
      onBlur: handleBlur
    }, normalizeAriaAttributes(secondaryNavigationId, subNavigationItems.length > 0, showExpanded)), itemContentMarkup), secondaryActionMarkup), secondaryNavigationMarkup);
  
    function getClickHandler(onClick) {
      return event => {
        const {
          currentTarget
        } = event;
  
        if (currentTarget.getAttribute('href') === location) {
          event.preventDefault();
        }
  
        if (subNavigationItems && subNavigationItems.length > 0 && isNavigationCollapsed) {
          event.preventDefault();
          setExpanded(!expanded);
        } else if (onNavigationDismiss) {
          onNavigationDismiss();
  
          if (onClick && onClick !== onNavigationDismiss) {
            onClick();
          }
  
          return;
        }
  
        if (onClick) {
          onClick();
        }
      };
    }
  }
  function isNavigationItemActive(navigationItem, currentPath) {
    const matchState = matchStateForItem(navigationItem, currentPath);
    const matchingSubNavigationItems = navigationItem.subNavigationItems && navigationItem.subNavigationItems.filter(item => {
      const subMatchState = matchStateForItem(item, currentPath);
      return subMatchState === MatchState.MatchForced || subMatchState === MatchState.MatchUrl || subMatchState === MatchState.MatchPaths;
    });
    const childIsActive = matchingSubNavigationItems && matchingSubNavigationItems.length > 0;
    const selected = matchState === MatchState.MatchForced || matchState === MatchState.MatchUrl || matchState === MatchState.MatchPaths;
    return selected || childIsActive;
  }
  
  function normalizePathname(pathname) {
    const barePathname = pathname.split('?')[0].split('#')[0];
    return barePathname.endsWith('/') ? barePathname : `${barePathname}/`;
  }
  
  function safeEqual(location, path) {
    return normalizePathname(location) === normalizePathname(path);
  }
  
  function safeStartsWith(location, path) {
    return normalizePathname(location).startsWith(normalizePathname(path));
  }
  
  function matchStateForItem({
    url,
    matches,
    exactMatch,
    matchPaths,
    excludePaths
  }, location) {
    if (url == null) {
      return MatchState.NoMatch;
    }
  
    if (matches) {
      return MatchState.MatchForced;
    }
  
    if (matches === false || excludePaths && excludePaths.some(path => safeStartsWith(location, path))) {
      return MatchState.Excluded;
    }
  
    if (matchPaths && matchPaths.some(path => safeStartsWith(location, path))) {
      return MatchState.MatchPaths;
    }
  
    const matchesUrl = exactMatch ? safeEqual(location, url) : safeStartsWith(location, url);
    return matchesUrl ? MatchState.MatchUrl : MatchState.NoMatch;
  }
  
  function normalizeAriaAttributes(controlId, hasSubMenu, expanded) {
    return hasSubMenu ? {
      'aria-expanded': expanded,
      'aria-controls': controlId
    } : undefined;
  }
  
  var _ref$k = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.HorizontalDotsMinor
  });
  
  function Section$5({
    title,
    fill,
    action,
    items,
    rollup,
    separator
  }) {
    const {
      value: expanded,
      toggle: toggleExpanded,
      setFalse: setExpandedFalse
    } = useToggle(false);
    const animationFrame = React.useRef(null);
  
    const handleClick = (onClick, hasSubNavItems) => {
      return () => {
        if (onClick) {
          onClick();
        }
  
        if (animationFrame.current) {
          cancelAnimationFrame(animationFrame.current);
        }
  
        if (!hasSubNavItems || !navigationBarCollapsed().matches) {
          animationFrame.current = requestAnimationFrame(setExpandedFalse);
        }
      };
    };
  
    React.useEffect(() => {
      return () => {
        animationFrame.current && cancelAnimationFrame(animationFrame.current);
      };
    });
    const className = classNames(styles$1h.Section, separator && styles$1h['Section-withSeparator'], fill && styles$1h['Section-fill']);
    const actionMarkup = action && /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      className: styles$1h.Action,
      "aria-label": action.accessibilityLabel,
      onClick: action.onClick
    }, /*#__PURE__*/React__default.createElement(Icon, {
      source: action.icon
    }));
    const sectionHeadingMarkup = title && /*#__PURE__*/React__default.createElement("li", {
      className: styles$1h.SectionHeading
    }, /*#__PURE__*/React__default.createElement("span", {
      className: styles$1h.Text
    }, title), actionMarkup);
    const itemsMarkup = items.map(item => {
      const {
        onClick,
        label,
        subNavigationItems
      } = item,
            rest = _objectWithoutProperties(item, ["onClick", "label", "subNavigationItems"]);
  
      const hasSubNavItems = subNavigationItems != null && subNavigationItems.length > 0;
      return /*#__PURE__*/React__default.createElement(Item$7, Object.assign({}, rest, {
        key: label,
        label: label,
        subNavigationItems: subNavigationItems,
        onClick: handleClick(onClick, hasSubNavItems)
      }));
    });
    const toggleClassName = classNames(styles$1h.Item, styles$1h.RollupToggle);
    const ariaLabel = rollup && (expanded ? rollup.hide : rollup.view);
    const toggleRollup = rollup && items.length > rollup.after && /*#__PURE__*/React__default.createElement("div", {
      className: styles$1h.ListItem,
      key: "List Item"
    }, /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      className: toggleClassName,
      onClick: toggleExpanded,
      "aria-label": ariaLabel
    }, /*#__PURE__*/React__default.createElement("span", {
      className: styles$1h.Icon
    }, _ref$k)));
    const activeItemIndex = items.findIndex(item => {
      if (!rollup) {
        return false;
      }
  
      return rollup.activePath === item.url || item.url && rollup.activePath.startsWith(item.url) || (item.subNavigationItems ? item.subNavigationItems.some(({
        url: itemUrl
      }) => rollup.activePath.startsWith(itemUrl)) : false);
    });
    const sectionItems = rollup ? itemsMarkup.slice(0, rollup.after) : itemsMarkup;
    const additionalItems = rollup ? itemsMarkup.slice(rollup.after) : [];
  
    if (rollup && activeItemIndex !== -1 && activeItemIndex > rollup.after - 1) {
      sectionItems.push(...additionalItems.splice(activeItemIndex - rollup.after, 1));
    }
  
    const additionalItemsId = useUniqueId('AdditionalItems');
    const activeItemsMarkup = rollup && additionalItems.length > 0 && /*#__PURE__*/React__default.createElement("li", {
      className: styles$1h.RollupSection
    }, /*#__PURE__*/React__default.createElement(Collapsible, {
      id: additionalItemsId,
      open: expanded
    }, /*#__PURE__*/React__default.createElement("ul", {
      className: styles$1h.List
    }, additionalItems)), toggleRollup);
    return /*#__PURE__*/React__default.createElement("ul", {
      className: className
    }, sectionHeadingMarkup, sectionItems, activeItemsMarkup);
  }
  
  const Navigation$1 = function Navigation({
    children,
    contextControl,
    location,
    onDismiss
  }) {
    const {
      logo
    } = useTheme();
    const {
      newDesignLanguage
    } = useFeatures();
    const width = getWidth(logo, 104);
    const logoMarkup = logo ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1h.LogoContainer
    }, /*#__PURE__*/React__default.createElement(UnstyledLink, {
      url: logo.url || '',
      className: styles$1h.LogoLink,
      style: {
        width
      }
    }, /*#__PURE__*/React__default.createElement(Image, {
      source: logo.topBarSource || '',
      alt: logo.accessibilityLabel || '',
      className: styles$1h.Logo,
      style: {
        width
      }
    }))) : null;
    const mediaMarkup = contextControl ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1h.ContextControl
    }, contextControl) : logoMarkup;
    const className = classNames(styles$1h.Navigation, newDesignLanguage && styles$1h['Navigation-newDesignLanguage']);
    const context = {
      location,
      onNavigationDismiss: onDismiss
    };
    return /*#__PURE__*/React__default.createElement(NavigationContext.Provider, {
      value: context
    }, /*#__PURE__*/React__default.createElement(WithinContentContext.Provider, {
      value: true
    }, /*#__PURE__*/React__default.createElement("nav", {
      className: className
    }, mediaMarkup, /*#__PURE__*/React__default.createElement(Scrollable, {
      className: styles$1h.PrimaryNavigation
    }, children))));
  };
  Navigation$1.Item = Item$7;
  Navigation$1.Section = Section$5;
  
  var EditableTarget;
  
  (function (EditableTarget) {
    EditableTarget["Input"] = "INPUT";
    EditableTarget["Textarea"] = "TEXTAREA";
    EditableTarget["Select"] = "SELECT";
    EditableTarget["ContentEditable"] = "contenteditable";
  })(EditableTarget || (EditableTarget = {}));
  
  function isInputFocused() {
    if (document == null || document.activeElement == null) {
      return false;
    }
  
    const {
      tagName
    } = document.activeElement;
    return tagName === EditableTarget.Input || tagName === EditableTarget.Textarea || tagName === EditableTarget.Select || document.activeElement.hasAttribute(EditableTarget.ContentEditable);
  }
  
  var styles$1i = {
    "Tooltip": "Polaris-Tooltip",
    "measuring": "Polaris-Tooltip--measuring",
    "positionedAbove": "Polaris-Tooltip--positionedAbove",
    "light": "Polaris-Tooltip--light",
    "Wrapper": "Polaris-Tooltip__Wrapper",
    "Content": "Polaris-Tooltip__Content",
    "Label": "Polaris-Tooltip__Label"
  };
  
  function TooltipOverlay({
    active,
    activator,
    preferredPosition = 'below',
    preventInteraction,
    id,
    children,
    light,
    accessibilityLabel
  }) {
    const i18n = useI18n();
    const markup = active ? /*#__PURE__*/React__default.createElement(PositionedOverlay, {
      active: active,
      activator: activator,
      preferredPosition: preferredPosition,
      preventInteraction: preventInteraction,
      render: renderTooltip
    }) : null;
    return markup;
  
    function renderTooltip(overlayDetails) {
      const {
        measuring,
        desiredHeight,
        positioning
      } = overlayDetails;
      const containerClassName = classNames(styles$1i.Tooltip, light && styles$1i.light, measuring && styles$1i.measuring, positioning === 'above' && styles$1i.positionedAbove);
      const contentStyles = measuring ? undefined : {
        minHeight: desiredHeight
      };
      return /*#__PURE__*/React__default.createElement("div", Object.assign({
        className: containerClassName
      }, layer.props), /*#__PURE__*/React__default.createElement("div", {
        className: styles$1i.Wrapper
      }, /*#__PURE__*/React__default.createElement("div", {
        id: id,
        role: "tooltip",
        className: styles$1i.Content,
        style: contentStyles,
        "aria-label": accessibilityLabel ? i18n.translate('Polaris.TooltipOverlay.accessibilityLabel', {
          label: accessibilityLabel
        }) : undefined
      }, children)));
    }
  }
  
  function Tooltip({
    children,
    content,
    light,
    dismissOnMouseOut,
    active: originalActive,
    preferredPosition = 'below',
    activatorWrapper = 'span',
    accessibilityLabel
  }) {
    const WrapperComponent = activatorWrapper;
    const {
      value: active,
      setTrue: handleFocus,
      setFalse: handleBlur
    } = useToggle(Boolean(originalActive));
    const [activatorNode, setActivatorNode] = React.useState(null);
    const id = useUniqueId('TooltipContent');
    const activatorContainer = React.useRef(null);
    const mouseEntered = React.useRef(false);
    React.useEffect(() => {
      const firstFocusable = activatorContainer.current ? findFirstFocusableNode(activatorContainer.current) : null;
      const accessibilityNode = firstFocusable || activatorContainer.current;
      if (!accessibilityNode) return;
      accessibilityNode.tabIndex = 0;
      accessibilityNode.setAttribute('aria-describedby', id);
    }, [id, children]);
    const handleKeyUp = React.useCallback(event => {
      if (event.keyCode !== exports.Key.Escape) return;
      handleBlur();
    }, [handleBlur]);
    const portal = activatorNode ? /*#__PURE__*/React__default.createElement(Portal, {
      idPrefix: "tooltip"
    }, /*#__PURE__*/React__default.createElement(TooltipOverlay, {
      id: id,
      preferredPosition: preferredPosition,
      activator: activatorNode,
      active: active,
      accessibilityLabel: accessibilityLabel,
      onClose: noop$7,
      light: light,
      preventInteraction: dismissOnMouseOut
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1i.Label
    }, content))) : null;
    return /*#__PURE__*/React__default.createElement(WrapperComponent, {
      onFocus: handleFocus,
      onBlur: handleBlur,
      onMouseLeave: handleMouseLeave,
      onMouseOver: handleMouseEnterFix,
      ref: setActivator,
      onKeyUp: handleKeyUp
    }, children, portal);
  
    function setActivator(node) {
      const activatorContainerRef = activatorContainer;
  
      if (node == null) {
        activatorContainerRef.current = null;
        setActivatorNode(null);
        return;
      }
  
      node.firstElementChild instanceof HTMLElement && setActivatorNode(node.firstElementChild);
      activatorContainerRef.current = node;
    }
  
    function handleMouseEnter() {
      mouseEntered.current = true;
      handleFocus();
    }
  
    function handleMouseLeave() {
      mouseEntered.current = false;
      handleBlur();
    } // https://github.com/facebook/react/issues/10109
    // Mouseenter event not triggered when cursor moves from disabled button
  
  
    function handleMouseEnterFix() {
      !mouseEntered.current && handleMouseEnter();
    }
  }
  
  function noop$7() {}
  
  var styles$1j = {
    "Pagination": "Polaris-Pagination",
    "plain": "Polaris-Pagination--plain",
    "Button": "Polaris-Pagination__Button",
    "newDesignLanguage": "Polaris-Pagination--newDesignLanguage",
    "PreviousButton": "Polaris-Pagination__PreviousButton",
    "NextButton": "Polaris-Pagination__NextButton",
    "Label": "Polaris-Pagination__Label"
  };
  
  var _ref$l = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.ArrowLeftMinor
  });
  
  var _ref2$6 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.ArrowLeftMinor
  });
  
  var _ref3$1 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.ArrowRightMinor
  });
  
  var _ref4 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.ArrowRightMinor
  });
  
  function Pagination({
    hasNext,
    hasPrevious,
    nextURL,
    previousURL,
    onNext,
    onPrevious,
    nextTooltip,
    previousTooltip,
    nextKeys,
    previousKeys,
    plain,
    accessibilityLabel,
    accessibilityLabels,
    label
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const node = /*#__PURE__*/React.createRef();
    const navLabel = accessibilityLabel || i18n.translate('Polaris.Pagination.pagination');
    const previousLabel = (accessibilityLabels == null ? void 0 : accessibilityLabels.previous) || i18n.translate('Polaris.Pagination.previous');
    const nextLabel = (accessibilityLabels == null ? void 0 : accessibilityLabels.next) || i18n.translate('Polaris.Pagination.next');
    const className = classNames(styles$1j.Pagination, plain && styles$1j.plain);
    const previousClassName = classNames(styles$1j.Button, !label && styles$1j.PreviousButton);
    const nextClassName = classNames(styles$1j.Button, !label && styles$1j.NextButton);
    const previousButton = previousURL ? /*#__PURE__*/React__default.createElement(UnstyledLink, {
      className: previousClassName,
      url: previousURL,
      onMouseUp: handleMouseUpByBlurring,
      "aria-label": previousLabel,
      id: "previousURL"
    }, _ref$l) : /*#__PURE__*/React__default.createElement("button", {
      onClick: onPrevious,
      type: "button",
      onMouseUp: handleMouseUpByBlurring,
      className: previousClassName,
      "aria-label": previousLabel,
      disabled: !hasPrevious
    }, _ref2$6);
    const nextButton = nextURL ? /*#__PURE__*/React__default.createElement(UnstyledLink, {
      className: nextClassName,
      url: nextURL,
      onMouseUp: handleMouseUpByBlurring,
      "aria-label": nextLabel,
      id: "nextURL"
    }, _ref3$1) : /*#__PURE__*/React__default.createElement("button", {
      onClick: onNext,
      type: "button",
      onMouseUp: handleMouseUpByBlurring,
      className: nextClassName,
      "aria-label": nextLabel,
      disabled: !hasNext
    }, _ref4);
    const prev = newDesignLanguage ? /*#__PURE__*/React__default.createElement(Button, {
      outline: true,
      icon: polarisIcons.ChevronLeftMinor,
      accessibilityLabel: previousLabel,
      url: previousURL,
      onClick: onPrevious,
      disabled: !hasPrevious
    }) : previousButton;
    const constructedPrevious = previousTooltip && hasPrevious ? /*#__PURE__*/React__default.createElement(Tooltip, {
      activatorWrapper: "span",
      content: previousTooltip
    }, prev) : prev;
    const next = newDesignLanguage ? /*#__PURE__*/React__default.createElement(Button, {
      outline: true,
      icon: polarisIcons.ChevronRightMinor,
      accessibilityLabel: nextLabel,
      url: nextURL,
      onClick: onNext,
      disabled: !hasNext
    }) : nextButton;
    const constructedNext = nextTooltip && hasNext ? /*#__PURE__*/React__default.createElement(Tooltip, {
      activatorWrapper: "span",
      content: nextTooltip
    }, next) : next;
    const previousHandler = onPrevious || noop$8;
    const previousButtonEvents = previousKeys && (previousURL || onPrevious) && hasPrevious && previousKeys.map(key => /*#__PURE__*/React__default.createElement(KeypressListener, {
      key: key,
      keyCode: key,
      handler: previousURL ? handleCallback(clickPaginationLink('previousURL', node)) : handleCallback(previousHandler)
    }));
    const nextHandler = onNext || noop$8;
    const nextButtonEvents = nextKeys && (nextURL || onNext) && hasNext && nextKeys.map(key => /*#__PURE__*/React__default.createElement(KeypressListener, {
      key: key,
      keyCode: key,
      handler: nextURL ? handleCallback(clickPaginationLink('nextURL', node)) : handleCallback(nextHandler)
    }));
    const labelTextMarkup = hasNext && hasPrevious ? /*#__PURE__*/React__default.createElement(TextStyle, null, label) : /*#__PURE__*/React__default.createElement(TextStyle, {
      variation: "subdued"
    }, label);
    const labelMarkup = label ? /*#__PURE__*/React__default.createElement("div", {
      className: newDesignLanguage ? undefined : styles$1j.Label,
      "aria-live": "polite"
    }, labelTextMarkup) : null;
    return /*#__PURE__*/React__default.createElement("nav", {
      className: newDesignLanguage ? undefined : className,
      "aria-label": navLabel,
      ref: node
    }, previousButtonEvents, nextButtonEvents, /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
      condition: Boolean(newDesignLanguage),
      wrapper: children => /*#__PURE__*/React__default.createElement(ButtonGroup, {
        segmented: !label
      }, children)
    }, constructedPrevious, labelMarkup, constructedNext));
  }
  
  function clickPaginationLink(id, node) {
    return () => {
      if (node.current == null) {
        return;
      }
  
      const link = node.current.querySelector(`#${id}`);
  
      if (link) {
        link.click();
      }
    };
  }
  
  function handleCallback(fn) {
    return () => {
      if (isInputFocused()) {
        return;
      }
  
      fn();
    };
  }
  
  function noop$8() {}
  
  var styles$1k = {
    "Title": "Polaris-Header-Title",
    "newDesignLanguageTitle": "Polaris-Header-Title--newDesignLanguageTitle",
    "SubTitle": "Polaris-Header-Title__SubTitle",
    "hasThumbnail": "Polaris-Header-Title--hasThumbnail",
    "TitleAndSubtitleWrapper": "Polaris-Header-Title__TitleAndSubtitleWrapper",
    "TitleWithMetadataWrapper": "Polaris-Header-Title__TitleWithMetadataWrapper",
    "TitleMetadata": "Polaris-Header-Title__TitleMetadata",
    "newDesignLanguage": "Polaris-Header-Title--newDesignLanguage"
  };
  
  function Title({
    title,
    subtitle,
    titleMetadata,
    thumbnail
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
    const titleElement = newDesignLanguage ? /*#__PURE__*/React__default.createElement("h1", {
      className: styles$1k.newDesignLanguageTitle
    }, title) : /*#__PURE__*/React__default.createElement(DisplayText, {
      size: "large",
      element: "h1"
    }, /*#__PURE__*/React__default.createElement(TextStyle, {
      variation: "strong"
    }, title));
    const titleMarkup = title ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1k.Title
    }, titleElement) : null;
    const titleMetadataMarkup = titleMetadata ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1k.TitleMetadata
    }, titleMetadata) : null;
    const wrappedTitleMarkup = titleMetadata ? /*#__PURE__*/React__default.createElement("div", {
      className: classNames(styles$1k.TitleWithMetadataWrapper, newDesignLanguage && styles$1k.newDesignLanguage)
    }, titleMarkup, titleMetadataMarkup) : titleMarkup;
    const subtitleMarkup = subtitle ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1k.SubTitle
    }, /*#__PURE__*/React__default.createElement("p", null, subtitle)) : null;
    const thumbnailMarkup = thumbnail ? /*#__PURE__*/React__default.createElement("div", null, thumbnail) : null;
    const pageTitleClassName = thumbnail ? classNames(styles$1k.hasThumbnail) : undefined;
    return /*#__PURE__*/React__default.createElement("div", {
      className: pageTitleClassName
    }, thumbnailMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1k.TitleAndSubtitleWrapper
    }, wrappedTitleMarkup, subtitleMarkup));
  }
  
  var styles$1l = {
    "Header": "Polaris-Page-Header",
    "newDesignLanguage": "Polaris-Page-Header--newDesignLanguage",
    "separator": "Polaris-Page-Header--separator",
    "titleHidden": "Polaris-Page-Header--titleHidden",
    "TitleWrapper": "Polaris-Page-Header__TitleWrapper",
    "Navigation": "Polaris-Page-Header__Navigation",
    "hasActionMenu": "Polaris-Page-Header--hasActionMenu",
    "mobileView": "Polaris-Page-Header--mobileView",
    "BreadcrumbWrapper": "Polaris-Page-Header__BreadcrumbWrapper",
    "PaginationWrapper": "Polaris-Page-Header__PaginationWrapper",
    "AdditionalNavigationWrapper": "Polaris-Page-Header__AdditionalNavigationWrapper",
    "MainContent": "Polaris-Page-Header__MainContent",
    "TitleActionMenuWrapper": "Polaris-Page-Header__TitleActionMenuWrapper",
    "hasNavigation": "Polaris-Page-Header--hasNavigation",
    "PrimaryActionWrapper": "Polaris-Page-Header__PrimaryActionWrapper",
    "ActionMenuWrapper": "Polaris-Page-Header__ActionMenuWrapper",
    "Row": "Polaris-Page-Header__Row",
    "LeftAlign": "Polaris-Page-Header__LeftAlign",
    "RightAlign": "Polaris-Page-Header__RightAlign",
    "RowCondensed": "Polaris-Page-Header__RowCondensed",
    "noBreadcrumbs": "Polaris-Page-Header--noBreadcrumbs",
    "AdditionalMetaData": "Polaris-Page-Header__AdditionalMetaData",
    "Actions": "Polaris-Page-Header__Actions",
    "longTitle": "Polaris-Page-Header--longTitle",
    "mediumTitle": "Polaris-Page-Header--mediumTitle",
    "isSingleRow": "Polaris-Page-Header--isSingleRow"
  };
  
  function isPrimaryAction(x) {
    return ! /*#__PURE__*/React.isValidElement(x) && x !== undefined;
  }
  const SHORT_TITLE = 20;
  const REALLY_SHORT_TITLE = 8;
  const LONG_TITLE = 34;
  function Header$2({
    title,
    subtitle,
    titleMetadata,
    additionalMetaData,
    thumbnail,
    titleHidden = false,
    separator,
    primaryAction,
    pagination,
    additionalNavigation,
    breadcrumbs = [],
    secondaryActions = [],
    actionGroups = []
  }) {
    const {
      isNavigationCollapsed
    } = useMediaQuery();
    const {
      newDesignLanguage
    } = useFeatures();
    const isSingleRow = !primaryAction && !pagination && !secondaryActions.length && !actionGroups.length;
    const breadcrumbMarkup = breadcrumbs.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
      className: classNames(styles$1l.BreadcrumbWrapper, newDesignLanguage && styles$1l.newDesignLanguage)
    }, /*#__PURE__*/React__default.createElement(Breadcrumbs, {
      breadcrumbs: breadcrumbs
    })) : null;
    const paginationMarkup = pagination && !isNavigationCollapsed ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.PaginationWrapper
    }, /*#__PURE__*/React__default.createElement(Pagination, Object.assign({}, pagination, {
      plain: true
    }))) : null;
    const additionalNavigationMarkup = additionalNavigation ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.AdditionalNavigationWrapper
    }, additionalNavigation) : null;
    const navigationMarkup = breadcrumbMarkup || paginationMarkup || additionalNavigationMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.Navigation
    }, breadcrumbMarkup, additionalNavigationMarkup, paginationMarkup) : null;
    const pageTitleMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.TitleWrapper
    }, /*#__PURE__*/React__default.createElement(Title, {
      title: title,
      subtitle: subtitle,
      titleMetadata: titleMetadata,
      thumbnail: thumbnail
    }));
    const primaryActionMarkup = primaryAction ? /*#__PURE__*/React__default.createElement(PrimaryActionMarkup, {
      primaryAction: primaryAction
    }) : null;
    const actionMenuMarkup = secondaryActions.length > 0 || hasGroupsWithActions(actionGroups) ? /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
      condition: newDesignLanguage === false,
      wrapper: children => /*#__PURE__*/React__default.createElement("div", {
        className: styles$1l.ActionMenuWrapper
      }, children)
    }, /*#__PURE__*/React__default.createElement(ActionMenu, {
      actions: secondaryActions,
      groups: actionGroups,
      rollup: isNavigationCollapsed
    })) : null;
    const additionalMetaDataMarkup = additionalMetaData ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.AdditionalMetaData
    }, /*#__PURE__*/React__default.createElement(TextStyle, {
      variation: "subdued"
    }, additionalMetaData)) : null;
    const headerClassNames = classNames(styles$1l.Header, separator && styles$1l.separator, isSingleRow && styles$1l.isSingleRow, titleHidden && styles$1l.titleHidden, navigationMarkup && styles$1l.hasNavigation, actionMenuMarkup && styles$1l.hasActionMenu, isNavigationCollapsed && styles$1l.mobileView, !breadcrumbs.length && styles$1l.noBreadcrumbs, newDesignLanguage && styles$1l.newDesignLanguage, title && title.length < LONG_TITLE && styles$1l.mediumTitle, title && title.length > LONG_TITLE && styles$1l.longTitle);
  
    if (newDesignLanguage) {
      const {
        slot1,
        slot2,
        slot3,
        slot4,
        slot5,
        slot6
      } = determineLayout({
        actionMenuMarkup,
        additionalMetaDataMarkup,
        additionalNavigationMarkup,
        breadcrumbMarkup,
        isNavigationCollapsed,
        pageTitleMarkup,
        paginationMarkup,
        primaryActionMarkup,
        title
      });
      const className = classNames(styles$1l.Row, newDesignLanguage && styles$1l.RowCondensed);
      return /*#__PURE__*/React__default.createElement("div", {
        className: headerClassNames
      }, /*#__PURE__*/React__default.createElement(ConditionalRender, {
        condition: [slot1, slot2, slot3, slot4].some(notNull)
      }, /*#__PURE__*/React__default.createElement("div", {
        className: className
      }, slot1, slot2, /*#__PURE__*/React__default.createElement(ConditionalRender, {
        condition: [slot3, slot4].some(notNull)
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1l.RightAlign
      }, /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
        condition: [slot3, slot4].every(notNull),
        wrapper: children => newDesignLanguage ? /*#__PURE__*/React__default.createElement("div", {
          className: styles$1l.Actions
        }, children) : /*#__PURE__*/React__default.createElement(ButtonGroup, null, children)
      }, slot3, slot4))))), /*#__PURE__*/React__default.createElement(ConditionalRender, {
        condition: [slot5, slot6].some(notNull)
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1l.Row
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1l.LeftAlign
      }, slot5), /*#__PURE__*/React__default.createElement(ConditionalRender, {
        condition: slot6 != null
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1l.RightAlign
      }, slot6)))));
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      className: headerClassNames
    }, navigationMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.MainContent
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.TitleActionMenuWrapper
    }, pageTitleMarkup, actionMenuMarkup), primaryActionMarkup));
  }
  
  function PrimaryActionMarkup({
    primaryAction
  }) {
    const {
      isNavigationCollapsed
    } = useMediaQuery();
    const {
      newDesignLanguage
    } = useFeatures();
    let content = primaryAction;
  
    if (isPrimaryAction(primaryAction)) {
      const primary = primaryAction.primary === undefined ? true : primaryAction.primary;
      content = buttonsFrom(shouldShowIconOnly(newDesignLanguage, isNavigationCollapsed, primaryAction), {
        primary
      });
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1l.PrimaryActionWrapper
    }, content);
  }
  
  function shouldShowIconOnly(newDesignLanguage, isMobile, action) {
    let {
      content,
      accessibilityLabel,
      icon
    } = action;
    if (!newDesignLanguage || icon == null) return _objectSpread2(_objectSpread2({}, action), {}, {
      icon: undefined
    });
  
    if (isMobile) {
      accessibilityLabel = accessibilityLabel || content;
      content = undefined;
    } else {
      icon = undefined;
    }
  
    return _objectSpread2(_objectSpread2({}, action), {}, {
      content,
      accessibilityLabel,
      icon
    });
  }
  
  function notNull(value) {
    return value != null;
  }
  
  function determineLayout({
    actionMenuMarkup,
    additionalMetaDataMarkup,
    additionalNavigationMarkup,
    breadcrumbMarkup,
    isNavigationCollapsed,
    pageTitleMarkup,
    paginationMarkup,
    primaryActionMarkup,
    title
  }) {
    //    Header Layout
    // |----------------------------------------------------|
    // | slot1 | slot2 |                    | slot3 | slot4 |
    // |----------------------------------------------------|
    // | slot5 |                                    | slot6 |
    // |----------------------------------------------------|
    //
    const layouts = {
      mobileCompact: {
        slots: {
          slot1: null,
          slot2: pageTitleMarkup,
          slot3: actionMenuMarkup,
          slot4: primaryActionMarkup,
          slot5: additionalMetaDataMarkup,
          slot6: additionalNavigationMarkup
        },
        condition: isNavigationCollapsed && breadcrumbMarkup == null && title != null && title.length <= REALLY_SHORT_TITLE
      },
      mobileDefault: {
        slots: {
          slot1: breadcrumbMarkup,
          slot2: pageTitleMarkup,
          slot3: actionMenuMarkup,
          slot4: primaryActionMarkup,
          slot5: additionalMetaDataMarkup,
          slot6: additionalNavigationMarkup
        },
        condition: isNavigationCollapsed
      },
      desktopCompact: {
        slots: {
          slot1: breadcrumbMarkup,
          slot2: pageTitleMarkup,
          slot3: actionMenuMarkup,
          slot4: primaryActionMarkup,
          slot5: additionalMetaDataMarkup,
          slot6: additionalNavigationMarkup
        },
        condition: !isNavigationCollapsed && paginationMarkup == null && actionMenuMarkup == null && title != null && title.length <= SHORT_TITLE
      },
      desktopDefault: {
        slots: {
          slot1: breadcrumbMarkup,
          slot2: pageTitleMarkup,
          slot3: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actionMenuMarkup, primaryActionMarkup),
          slot4: paginationMarkup,
          slot5: additionalMetaDataMarkup,
          slot6: additionalNavigationMarkup
        },
        condition: !isNavigationCollapsed
      }
    };
    const layout = Object.values(layouts).find(layout => layout.condition) || layouts.desktopDefault;
    return layout.slots;
  }
  
  var styles$1m = {
    "Page": "Polaris-Page",
    "fullWidth": "Polaris-Page--fullWidth",
    "narrowWidth": "Polaris-Page--narrowWidth",
    "Content": "Polaris-Page__Content",
    "newDesignLanguage": "Polaris-Page--newDesignLanguage"
  };
  
  function Page(_ref) {
    let {
      children,
      fullWidth,
      narrowWidth
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["children", "fullWidth", "narrowWidth"]);
  
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$1m.Page, fullWidth && styles$1m.fullWidth, narrowWidth && styles$1m.narrowWidth, newDesignLanguage && styles$1m.newDesignLanguage);
    const hasHeaderContent = rest.title != null && rest.title !== '' || rest.primaryAction != null || rest.secondaryActions != null && rest.secondaryActions.length > 0 || rest.actionGroups != null && rest.actionGroups.length > 0 || rest.breadcrumbs != null && rest.breadcrumbs.length > 0;
    const headerMarkup = hasHeaderContent ? /*#__PURE__*/React__default.createElement(Header$2, rest) : null;
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, headerMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1m.Content
    }, children));
  }
  
  var styles$1n = {
    "PageActions": "Polaris-PageActions"
  };
  
  function PageActions({
    primaryAction,
    secondaryActions
  }) {
    const primaryActionMarkup = primaryAction ? buttonsFrom(primaryAction, {
      primary: true
    }) : null;
    const secondaryActionsMarkup = secondaryActions ? /*#__PURE__*/React__default.createElement(ButtonGroup, null, buttonsFrom(secondaryActions)) : null;
    const distribution = secondaryActionsMarkup ? 'equalSpacing' : 'trailing';
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1n.PageActions
    }, /*#__PURE__*/React__default.createElement(Stack, {
      distribution: distribution,
      spacing: "tight"
    }, secondaryActionsMarkup, primaryActionMarkup));
  }
  
  const defaultMediaQuery = {
    isNavigationCollapsed: false
  };
  function PolarisTestProvider({
    strict,
    children,
    i18n,
    link,
    theme = {},
    mediaQuery,
    features: featuresProp = {},
    frame
  }) {
    const Wrapper = strict ? React.StrictMode : React.Fragment;
    const intl = new I18n(i18n || {});
    const scrollLockManager = new ScrollLockManager();
    const stickyManager = new StickyManager();
    const uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
  
    const features = _objectSpread2({
      newDesignLanguage: false
    }, featuresProp);
  
    const customProperties = features.newDesignLanguage ? buildCustomProperties(_objectSpread2(_objectSpread2({}, theme), {}, {
      colorScheme: 'light'
    }), features.newDesignLanguage) : undefined;
    const mergedTheme = buildThemeContext(theme, customProperties);
    const mergedFrame = createFrameContext(frame);
    const mergedMediaQuery = merge(defaultMediaQuery, mediaQuery);
    return /*#__PURE__*/React__default.createElement(Wrapper, null, /*#__PURE__*/React__default.createElement(FeaturesContext.Provider, {
      value: features
    }, /*#__PURE__*/React__default.createElement(I18nContext.Provider, {
      value: intl
    }, /*#__PURE__*/React__default.createElement(ScrollLockManagerContext.Provider, {
      value: scrollLockManager
    }, /*#__PURE__*/React__default.createElement(StickyManagerContext.Provider, {
      value: stickyManager
    }, /*#__PURE__*/React__default.createElement(UniqueIdFactoryContext.Provider, {
      value: uniqueIdFactory
    }, /*#__PURE__*/React__default.createElement(LinkContext.Provider, {
      value: link
    }, /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
      value: mergedTheme
    }, /*#__PURE__*/React__default.createElement(MediaQueryContext.Provider, {
      value: mergedMediaQuery
    }, /*#__PURE__*/React__default.createElement(PortalsManager, null, /*#__PURE__*/React__default.createElement(FocusManager, null, /*#__PURE__*/React__default.createElement(FrameContext.Provider, {
      value: mergedFrame
    }, children))))))))))));
  }
  
  function noop$9() {}
  
  function createFrameContext({
    showToast = noop$9,
    hideToast = noop$9,
    setContextualSaveBar = noop$9,
    removeContextualSaveBar = noop$9,
    startLoading = noop$9,
    stopLoading = noop$9
  } = {}) {
    return {
      showToast,
      hideToast,
      setContextualSaveBar,
      removeContextualSaveBar,
      startLoading,
      stopLoading
    };
  }
  
  var styles$1o = {
    "ProgressBar": "Polaris-ProgressBar",
    "sizeSmall": "Polaris-ProgressBar--sizeSmall",
    "sizeMedium": "Polaris-ProgressBar--sizeMedium",
    "sizeLarge": "Polaris-ProgressBar--sizeLarge",
    "Indicator": "Polaris-ProgressBar__Indicator",
    "fillup": "Polaris-ProgressBar--fillup",
    "Progress": "Polaris-ProgressBar__Progress",
    "Label": "Polaris-ProgressBar__Label"
  };
  
  function ProgressBar({
    progress = 0,
    size = 'medium'
  }) {
    const i18n = useI18n();
    const className = classNames(styles$1o.ProgressBar, size && styles$1o[variationName('size', size)]);
    const warningMessage = i18n.translate(progress < 0 ? 'Polaris.ProgressBar.negativeWarningMessage' : 'Polaris.ProgressBar.exceedWarningMessage', {
      progress
    });
    const parsedProgress = parseProgress(progress, warningMessage);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, /*#__PURE__*/React__default.createElement("progress", {
      className: styles$1o.Progress,
      value: parsedProgress,
      max: "100"
    }), /*#__PURE__*/React__default.createElement("div", {
      className: styles$1o.Indicator,
      style: {
        width: `${parsedProgress}%`
      }
    }, /*#__PURE__*/React__default.createElement("span", {
      className: styles$1o.Label
    }, parsedProgress, "%")));
  }
  
  function parseProgress(progress, warningMessage) {
    let progressWidth;
  
    if (progress < 0) {
      if (process.env.NODE_ENV === 'development') {
        // eslint-disable-next-line no-console
        console.warn(warningMessage);
      }
  
      progressWidth = 0;
    } else if (progress > 100) {
      if (process.env.NODE_ENV === 'development') {
        // eslint-disable-next-line no-console
        console.warn(warningMessage);
      }
  
      progressWidth = 100;
    } else {
      progressWidth = progress;
    }
  
    return progressWidth;
  }
  
  function invertNumber(number) {
    if (Math.sign(number) === 1) {
      return -Math.abs(number);
    } else if (Math.sign(number) === -1) {
      return Math.abs(number);
    } else {
      return 0;
    }
  }
  
  const CSS_VAR_PREFIX = '--Polaris-RangeSlider-';
  
  var styles$1p = {
    "Wrapper": "Polaris-RangeSlider-DualThumb__Wrapper",
    "TrackWrapper": "Polaris-RangeSlider-DualThumb__TrackWrapper",
    "disabled": "Polaris-RangeSlider-DualThumb--disabled",
    "Track": "Polaris-RangeSlider-DualThumb__Track",
    "error": "Polaris-RangeSlider-DualThumb--error",
    "Track--dashed": "Polaris-RangeSlider-DualThumb--trackDashed",
    "Thumbs": "Polaris-RangeSlider-DualThumb__Thumbs",
    "newDesignLanguage": "Polaris-RangeSlider-DualThumb--newDesignLanguage",
    "Prefix": "Polaris-RangeSlider-DualThumb__Prefix",
    "Suffix": "Polaris-RangeSlider-DualThumb__Suffix",
    "Output": "Polaris-RangeSlider-DualThumb__Output",
    "OutputBubble": "Polaris-RangeSlider-DualThumb__OutputBubble",
    "OutputText": "Polaris-RangeSlider-DualThumb__OutputText"
  };
  
  var Control;
  
  (function (Control) {
    Control[Control["Lower"] = 0] = "Lower";
    Control[Control["Upper"] = 1] = "Upper";
  })(Control || (Control = {}));
  
  class DualThumb extends React.Component {
    constructor(...args) {
      super(...args);
      this.context = void 0;
      this.state = {
        value: sanitizeValue(this.props.value, this.props.min, this.props.max, this.props.step),
        trackWidth: 0,
        trackLeft: 0
      };
      this.track = /*#__PURE__*/React.createRef();
      this.trackWrapper = /*#__PURE__*/React.createRef();
      this.thumbLower = /*#__PURE__*/React.createRef();
      this.thumbUpper = /*#__PURE__*/React.createRef();
      this.setTrackPosition = debounce(() => {
        if (this.track.current) {
          const newDesignLanguage = this.context && this.context.newDesignLanguage;
          const thumbSize = newDesignLanguage ? 16 : 24;
          const {
            width,
            left
          } = this.track.current.getBoundingClientRect();
          const adjustedTrackWidth = width - thumbSize;
          const adjustedTrackLeft = left + thumbSize / 2;
          this.setState({
            trackWidth: adjustedTrackWidth,
            trackLeft: adjustedTrackLeft
          });
        }
      }, 40, {
        leading: true,
        trailing: true,
        maxWait: 40
      });
  
      this.handleMouseDownThumbLower = event => {
        if (event.button !== 0 || this.props.disabled) return;
        registerMouseMoveHandler(this.handleMouseMoveThumbLower);
        event.stopPropagation();
      };
  
      this.handleMouseMoveThumbLower = event => {
        const valueUpper = this.state.value[1];
        this.setValue([this.actualXPosition(event.clientX), valueUpper], Control.Upper);
      };
  
      this.handleTouchStartThumbLower = event => {
        if (this.props.disabled) return;
        registerTouchMoveHandler(this.handleTouchMoveThumbLower);
        event.stopPropagation();
      };
  
      this.handleTouchMoveThumbLower = event => {
        event.preventDefault();
        const valueUpper = this.state.value[1];
        this.setValue([this.actualXPosition(event.touches[0].clientX), valueUpper], Control.Upper);
      };
  
      this.handleMouseDownThumbUpper = event => {
        if (event.button !== 0 || this.props.disabled) return;
        registerMouseMoveHandler(this.handleMouseMoveThumbUpper);
        event.stopPropagation();
      };
  
      this.handleMouseMoveThumbUpper = event => {
        const valueLower = this.state.value[0];
        this.setValue([valueLower, this.actualXPosition(event.clientX)], Control.Lower);
      };
  
      this.handleTouchStartThumbUpper = event => {
        if (this.props.disabled) return;
        registerTouchMoveHandler(this.handleTouchMoveThumbUpper);
        event.stopPropagation();
      };
  
      this.handleTouchMoveThumbUpper = event => {
        event.preventDefault();
        const valueLower = this.state.value[0];
        this.setValue([valueLower, this.actualXPosition(event.touches[0].clientX)], Control.Lower);
      };
  
      this.handleKeypressLower = event => {
        if (this.props.disabled) return;
        const {
          incrementValueLower,
          decrementValueLower
        } = this;
        const handlerMap = {
          [exports.Key.UpArrow]: incrementValueLower,
          [exports.Key.RightArrow]: incrementValueLower,
          [exports.Key.DownArrow]: decrementValueLower,
          [exports.Key.LeftArrow]: decrementValueLower
        };
        const handler = handlerMap[event.keyCode];
  
        if (handler != null) {
          event.preventDefault();
          event.stopPropagation();
          handler();
        }
      };
  
      this.handleKeypressUpper = event => {
        if (this.props.disabled) return;
        const {
          incrementValueUpper,
          decrementValueUpper
        } = this;
        const handlerMap = {
          [exports.Key.UpArrow]: incrementValueUpper,
          [exports.Key.RightArrow]: incrementValueUpper,
          [exports.Key.DownArrow]: decrementValueUpper,
          [exports.Key.LeftArrow]: decrementValueUpper
        };
        const handler = handlerMap[event.keyCode];
  
        if (handler != null) {
          event.preventDefault();
          event.stopPropagation();
          handler();
        }
      };
  
      this.incrementValueLower = () => {
        this.setValue([this.state.value[0] + this.props.step, this.state.value[1]], Control.Upper);
      };
  
      this.decrementValueLower = () => {
        this.setValue([this.state.value[0] - this.props.step, this.state.value[1]], Control.Upper);
      };
  
      this.incrementValueUpper = () => {
        this.setValue([this.state.value[0], this.state.value[1] + this.props.step], Control.Lower);
      };
  
      this.decrementValueUpper = () => {
        this.setValue([this.state.value[0], this.state.value[1] - this.props.step], Control.Lower);
      };
  
      this.dispatchValue = () => {
        const {
          onChange,
          id
        } = this.props;
        const {
          value
        } = this.state;
        onChange(value, id);
      };
  
      this.setValue = (dirtyValue, control) => {
        const {
          props: {
            min,
            max,
            step
          },
          state: {
            value
          }
        } = this;
        const sanitizedValue = sanitizeValue(dirtyValue, min, max, step, control);
  
        if (isEqual(sanitizedValue, value) === false) {
          this.setState({
            value: sanitizedValue
          }, this.dispatchValue);
        }
      };
  
      this.handleMouseDownTrack = event => {
        if (event.button !== 0 || this.props.disabled) return;
        event.preventDefault();
        const clickXPosition = this.actualXPosition(event.clientX);
        const {
          value
        } = this.state;
        const distanceFromLowerThumb = Math.abs(value[0] - clickXPosition);
        const distanceFromUpperThumb = Math.abs(value[1] - clickXPosition);
  
        if (distanceFromLowerThumb <= distanceFromUpperThumb) {
          this.setValue([clickXPosition, value[1]], Control.Upper);
          registerMouseMoveHandler(this.handleMouseMoveThumbLower);
  
          if (this.thumbLower.current != null) {
            this.thumbLower.current.focus();
          }
        } else {
          this.setValue([value[0], clickXPosition], Control.Lower);
          registerMouseMoveHandler(this.handleMouseMoveThumbUpper);
  
          if (this.thumbUpper.current != null) {
            this.thumbUpper.current.focus();
          }
        }
      };
  
      this.handleTouchStartTrack = event => {
        if (this.props.disabled) return;
        event.preventDefault();
        const clickXPosition = this.actualXPosition(event.touches[0].clientX);
        const {
          value
        } = this.state;
        const distanceFromLowerThumb = Math.abs(value[0] - clickXPosition);
        const distanceFromUpperThumb = Math.abs(value[1] - clickXPosition);
  
        if (distanceFromLowerThumb <= distanceFromUpperThumb) {
          this.setValue([clickXPosition, value[1]], Control.Upper);
          registerTouchMoveHandler(this.handleTouchMoveThumbLower);
  
          if (this.thumbLower.current != null) {
            this.thumbLower.current.focus();
          }
        } else {
          this.setValue([value[0], clickXPosition], Control.Lower);
          registerTouchMoveHandler(this.handleTouchMoveThumbUpper);
  
          if (this.thumbUpper.current != null) {
            this.thumbUpper.current.focus();
          }
        }
      };
  
      this.actualXPosition = dirtyXPosition => {
        if (this.track.current) {
          const {
            min,
            max
          } = this.props;
          const {
            trackLeft,
            trackWidth
          } = this.state;
          const relativeX = dirtyXPosition - trackLeft;
          const percentageOfTrack = relativeX / trackWidth;
          return percentageOfTrack * (max - min);
        } else {
          return 0;
        }
      };
    }
  
    static getDerivedStateFromProps(props, state) {
      const {
        min,
        step,
        max,
        value,
        onChange,
        id
      } = props;
      const {
        prevValue
      } = state;
  
      if (isEqual(prevValue, value)) {
        return null;
      }
  
      const sanitizedValue = sanitizeValue(value, min, max, step);
  
      if (!isEqual(value, sanitizedValue)) {
        onChange(sanitizedValue, id);
      }
  
      return {
        prevValue: value,
        value: sanitizedValue
      };
    }
  
    componentDidMount() {
      this.setTrackPosition();
  
      if (this.trackWrapper.current != null) {
        this.trackWrapper.current.addEventListener('touchstart', this.handleTouchStartTrack, {
          passive: false
        });
      }
    }
  
    componentWillUnmount() {
      if (this.trackWrapper.current != null) {
        this.trackWrapper.current.removeEventListener('touchstart', this.handleTouchStartTrack);
      }
    }
  
    render() {
      const {
        id,
        min,
        max,
        prefix,
        suffix,
        disabled,
        output,
        error,
        onFocus,
        onBlur,
        label,
        labelAction,
        labelHidden,
        helpText
      } = this.props;
      const {
        value
      } = this.state;
      const idLower = id;
      const idUpper = `${id}Upper`;
      const describedBy = [];
  
      if (error) {
        describedBy.push(`${id}Error`);
      }
  
      const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
      const trackWrapperClassName = classNames(styles$1p.TrackWrapper, error && styles$1p.error, disabled && styles$1p.disabled);
      const thumbLowerClassName = classNames(styles$1p.Thumbs, styles$1p.ThumbLower, disabled && styles$1p.disabled, this.context && this.context.newDesignLanguage && styles$1p.newDesignLanguage);
      const thumbUpperClassName = classNames(styles$1p.Thumbs, styles$1p.ThumbUpper, disabled && styles$1p.disabled, this.context && this.context.newDesignLanguage && styles$1p.newDesignLanguage);
      const trackWidth = this.state.trackWidth;
      const range = max - min;
      const leftPositionThumbLower = value[0] / range * trackWidth;
      const leftPositionThumbUpper = value[1] / range * trackWidth;
      const outputLowerClassName = classNames(styles$1p.Output, styles$1p.OutputLower);
      const outputMarkupLower = !disabled && output ? /*#__PURE__*/React__default.createElement("output", {
        htmlFor: idLower,
        className: outputLowerClassName,
        style: {
          left: `${leftPositionThumbLower}px`
        }
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1p.OutputBubble
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$1p.OutputText
      }, value[0]))) : null;
      const outputUpperClassName = classNames(styles$1p.Output, styles$1p.OutputUpper);
      const outputMarkupUpper = !disabled && output ? /*#__PURE__*/React__default.createElement("output", {
        htmlFor: idUpper,
        className: outputUpperClassName,
        style: {
          left: `${leftPositionThumbUpper}px`
        }
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1p.OutputBubble
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$1p.OutputText
      }, value[1]))) : null;
      const cssVars = {
        [`${CSS_VAR_PREFIX}progress-lower`]: `${leftPositionThumbLower}px`,
        [`${CSS_VAR_PREFIX}progress-upper`]: `${leftPositionThumbUpper}px`
      };
      const prefixMarkup = prefix && /*#__PURE__*/React__default.createElement("div", {
        className: styles$1p.Prefix
      }, prefix);
      const suffixMarkup = suffix && /*#__PURE__*/React__default.createElement("div", {
        className: styles$1p.Suffix
      }, suffix);
      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Labelled, {
        id: id,
        label: label,
        error: error,
        action: labelAction,
        labelHidden: labelHidden,
        helpText: helpText
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1p.Wrapper
      }, prefixMarkup, /*#__PURE__*/React__default.createElement("div", {
        className: trackWrapperClassName,
        onMouseDown: this.handleMouseDownTrack,
        ref: this.trackWrapper
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1p.Track,
        style: cssVars,
        ref: this.track
      }), /*#__PURE__*/React__default.createElement("div", {
        className: styles$1p['Track--dashed']
      }), /*#__PURE__*/React__default.createElement("div", {
        id: idLower,
        className: thumbLowerClassName,
        style: {
          left: `${leftPositionThumbLower}px`
        },
        role: "slider",
        "aria-disabled": disabled,
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-valuenow": value[0],
        "aria-invalid": Boolean(error),
        "aria-describedby": ariaDescribedBy,
        "aria-labelledby": labelID(id),
        onFocus: onFocus,
        onBlur: onBlur,
        tabIndex: 0,
        onKeyDown: this.handleKeypressLower,
        onMouseDown: this.handleMouseDownThumbLower,
        onTouchStart: this.handleTouchStartThumbLower,
        ref: this.thumbLower
      }), outputMarkupLower, /*#__PURE__*/React__default.createElement("div", {
        id: idUpper,
        className: thumbUpperClassName,
        style: {
          left: `${leftPositionThumbUpper}px`
        },
        role: "slider",
        "aria-disabled": disabled,
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-valuenow": value[1],
        "aria-invalid": Boolean(error),
        "aria-describedby": ariaDescribedBy,
        "aria-labelledby": labelID(id),
        onFocus: onFocus,
        onBlur: onBlur,
        tabIndex: 0,
        onKeyDown: this.handleKeypressUpper,
        onMouseDown: this.handleMouseDownThumbUpper,
        onTouchStart: this.handleTouchStartThumbUpper,
        ref: this.thumbUpper
      }), outputMarkupUpper), suffixMarkup)), /*#__PURE__*/React__default.createElement(EventListener, {
        event: "resize",
        handler: this.setTrackPosition
      }));
    }
  
  }
  DualThumb.contextType = FeaturesContext;
  
  function registerMouseMoveHandler(handler) {
    document.addEventListener('mousemove', handler);
    document.addEventListener('mouseup', () => {
      document.removeEventListener('mousemove', handler);
    }, {
      once: true
    });
  }
  
  function registerTouchMoveHandler(handler) {
    const removeHandler = () => {
      document.removeEventListener('touchmove', handler);
      document.removeEventListener('touchend', removeHandler);
      document.removeEventListener('touchcancel', removeHandler);
    };
  
    document.addEventListener('touchmove', handler, {
      passive: false
    });
    document.addEventListener('touchend', removeHandler, {
      once: true
    });
    document.addEventListener('touchcancel', removeHandler, {
      once: true
    });
  }
  
  function sanitizeValue(value, min, max, step, control = Control.Upper) {
    let upperValue = inBoundsUpper(roundedToStep(value[1]));
    let lowerValue = inBoundsLower(roundedToStep(value[0]));
    const maxLowerValue = upperValue - step;
    const minUpperValue = lowerValue + step;
  
    if (control === Control.Upper && lowerValue > maxLowerValue) {
      lowerValue = maxLowerValue;
    } else if (control === Control.Lower && upperValue < minUpperValue) {
      upperValue = minUpperValue;
    }
  
    return [lowerValue, upperValue];
  
    function inBoundsUpper(value) {
      const lowerMin = min + step;
  
      if (value < lowerMin) {
        return lowerMin;
      } else if (value > max) {
        return max;
      } else {
        return value;
      }
    }
  
    function inBoundsLower(value) {
      const upperMax = max - step;
  
      if (value < min) {
        return min;
      } else if (value > upperMax) {
        return upperMax;
      } else {
        return value;
      }
    }
  
    function roundedToStep(value) {
      return Math.round(value / step) * step;
    }
  }
  
  var styles$1q = {
    "SingleThumb": "Polaris-RangeSlider-SingleThumb",
    "disabled": "Polaris-RangeSlider-SingleThumb--disabled",
    "InputWrapper": "Polaris-RangeSlider-SingleThumb__InputWrapper",
    "Prefix": "Polaris-RangeSlider-SingleThumb__Prefix",
    "Suffix": "Polaris-RangeSlider-SingleThumb__Suffix",
    "Input": "Polaris-RangeSlider-SingleThumb__Input",
    "error": "Polaris-RangeSlider-SingleThumb--error",
    "newDesignLanguage": "Polaris-RangeSlider-SingleThumb--newDesignLanguage",
    "Output": "Polaris-RangeSlider-SingleThumb__Output",
    "OutputBubble": "Polaris-RangeSlider-SingleThumb__OutputBubble",
    "OutputText": "Polaris-RangeSlider-SingleThumb__OutputText"
  };
  
  function SingleThumb(props) {
    const {
      id,
      error,
      helpText,
      value,
      min,
      max,
      disabled,
      output,
      prefix,
      suffix,
      label,
      labelAction,
      labelHidden,
      step,
      onBlur,
      onFocus
    } = props;
    const {
      newDesignLanguage
    } = useFeatures();
    const clampedValue = clamp(value, min, max);
    const describedBy = [];
  
    if (error) {
      describedBy.push(`${id}Error`);
    }
  
    if (helpText) {
      describedBy.push(helpTextID(id));
    }
  
    const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
    const sliderProgress = (clampedValue - min) * 100 / (max - min);
    const outputFactor = invertNumber((sliderProgress - 50) / 100);
    const cssVars = {
      [`${CSS_VAR_PREFIX}min`]: min,
      [`${CSS_VAR_PREFIX}max`]: max,
      [`${CSS_VAR_PREFIX}current`]: clampedValue,
      [`${CSS_VAR_PREFIX}progress`]: `${sliderProgress}%`,
      [`${CSS_VAR_PREFIX}output-factor`]: `${outputFactor}`
    };
    const outputMarkup = !disabled && output && /*#__PURE__*/React__default.createElement("output", {
      htmlFor: id,
      className: styles$1q.Output
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1q.OutputBubble
    }, /*#__PURE__*/React__default.createElement("span", {
      className: styles$1q.OutputText
    }, clampedValue)));
    const prefixMarkup = prefix && /*#__PURE__*/React__default.createElement("div", {
      className: styles$1q.Prefix
    }, prefix);
    const suffixMarkup = suffix && /*#__PURE__*/React__default.createElement("div", {
      className: styles$1q.Suffix
    }, suffix);
    const className = classNames(styles$1q.SingleThumb, error && styles$1q.error, disabled && styles$1q.disabled);
    const inputClassNames = classNames(styles$1q.Input, newDesignLanguage && styles$1q.newDesignLanguage);
    return /*#__PURE__*/React__default.createElement(Labelled, {
      id: id,
      label: label,
      error: error,
      action: labelAction,
      labelHidden: labelHidden,
      helpText: helpText
    }, /*#__PURE__*/React__default.createElement("div", {
      className: className,
      style: cssVars
    }, prefixMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1q.InputWrapper
    }, /*#__PURE__*/React__default.createElement("input", {
      type: "range",
      className: inputClassNames,
      id: id,
      name: id,
      min: min,
      max: max,
      step: step,
      value: clampedValue,
      disabled: disabled,
      onChange: handleChange,
      onFocus: onFocus,
      onBlur: onBlur,
      "aria-valuemin": min,
      "aria-valuemax": max,
      "aria-valuenow": clampedValue,
      "aria-invalid": Boolean(error),
      "aria-describedby": ariaDescribedBy
    }), outputMarkup), suffixMarkup));
  
    function handleChange(event) {
      const {
        onChange
      } = props;
      onChange && onChange(parseFloat(event.currentTarget.value), id);
    }
  }
  
  function RangeSlider(_ref) {
    let {
      min = 0,
      max = 100,
      step = 1,
      value
    } = _ref,
        rest = _objectWithoutProperties(_ref, ["min", "max", "step", "value"]);
  
    const id = useUniqueId('RangeSlider');
  
    const sharedProps = _objectSpread2({
      id,
      min,
      max,
      step
    }, rest);
  
    return isDualThumb(value) ? /*#__PURE__*/React__default.createElement(DualThumb, Object.assign({
      value: value
    }, sharedProps)) : /*#__PURE__*/React__default.createElement(SingleThumb, Object.assign({
      value: value
    }, sharedProps));
  }
  
  function isDualThumb(value) {
    return Array.isArray(value);
  }
  
  var styles$1r = {
    "CheckboxWrapper": "Polaris-ResourceItem__CheckboxWrapper",
    "ResourceItem": "Polaris-ResourceItem",
    "persistActions": "Polaris-ResourceItem--persistActions",
    "Actions": "Polaris-ResourceItem__Actions",
    "newDesignLanguage": "Polaris-ResourceItem--newDesignLanguage",
    "ItemWrapper": "Polaris-ResourceItem__ItemWrapper",
    "selected": "Polaris-ResourceItem--selected",
    "focused": "Polaris-ResourceItem--focused",
    "focusedInner": "Polaris-ResourceItem--focusedInner",
    "Link": "Polaris-ResourceItem__Link",
    "Button": "Polaris-ResourceItem__Button",
    "Container": "Polaris-ResourceItem__Container",
    "alignmentLeading": "Polaris-ResourceItem--alignmentLeading",
    "alignmentTrailing": "Polaris-ResourceItem--alignmentTrailing",
    "alignmentCenter": "Polaris-ResourceItem--alignmentCenter",
    "alignmentFill": "Polaris-ResourceItem--alignmentFill",
    "alignmentBaseline": "Polaris-ResourceItem--alignmentBaseline",
    "Owned": "Polaris-ResourceItem__Owned",
    "OwnedNoMedia": "Polaris-ResourceItem__OwnedNoMedia",
    "Handle": "Polaris-ResourceItem__Handle",
    "selectMode": "Polaris-ResourceItem--selectMode",
    "selectable": "Polaris-ResourceItem--selectable",
    "Media": "Polaris-ResourceItem__Media",
    "Content": "Polaris-ResourceItem__Content",
    "Disclosure": "Polaris-ResourceItem__Disclosure",
    "ListItem": "Polaris-ResourceItem__ListItem"
  };
  
  const getUniqueCheckboxID = globalIdGeneratorFactory('ResourceListItemCheckbox');
  const getUniqueOverlayID = globalIdGeneratorFactory('ResourceListItemOverlay');
  
  class BaseResourceItem extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        actionsMenuVisible: false,
        focused: false,
        focusedInner: false,
        selected: isSelected(this.props.id, this.props.context.selectedItems)
      };
      this.node = null;
      this.checkboxId = getUniqueCheckboxID();
      this.overlayId = getUniqueOverlayID();
      this.buttonOverlay = /*#__PURE__*/React.createRef();
  
      this.setNode = node => {
        this.node = node;
      };
  
      this.handleFocus = event => {
        if (event.target === this.buttonOverlay.current || this.node && event.target === this.node.querySelector(`#${this.overlayId}`)) {
          this.setState({
            focused: true,
            focusedInner: false
          });
        } else if (this.node && this.node.contains(event.target)) {
          this.setState({
            focused: true,
            focusedInner: true
          });
        }
      };
  
      this.handleBlur = ({
        relatedTarget
      }) => {
        if (this.node && relatedTarget instanceof Element && this.node.contains(relatedTarget)) {
          return;
        }
  
        this.setState({
          focused: false,
          focusedInner: false
        });
      };
  
      this.handleMouseOut = () => {
        this.state.focused && this.setState({
          focused: false,
          focusedInner: false
        });
      };
  
      this.handleLargerSelectionArea = event => {
        stopPropagation$1(event);
        this.handleSelection(!this.state.selected, event.nativeEvent.shiftKey);
      };
  
      this.handleSelection = (value, shiftKey) => {
        const {
          id,
          sortOrder,
          context: {
            onSelectionChange
          }
        } = this.props;
  
        if (id == null || onSelectionChange == null) {
          return;
        }
  
        this.setState({
          focused: value,
          focusedInner: value
        });
        onSelectionChange(value, id, sortOrder, shiftKey);
      };
  
      this.handleClick = event => {
        stopPropagation$1(event);
        const {
          id,
          onClick,
          url,
          context: {
            selectMode
          }
        } = this.props;
        const {
          ctrlKey,
          metaKey
        } = event.nativeEvent;
        const anchor = this.node && this.node.querySelector('a');
  
        if (selectMode) {
          this.handleLargerSelectionArea(event);
          return;
        }
  
        if (anchor === event.target) {
          return;
        }
  
        if (onClick) {
          onClick(id);
        }
  
        if (url && (ctrlKey || metaKey)) {
          window.open(url, '_blank');
          return;
        }
  
        if (url && anchor) {
          anchor.click();
        }
      };
  
      this.handleKeyUp = event => {
        const {
          onClick = noop$a,
          context: {
            selectMode
          }
        } = this.props;
        const {
          key
        } = event;
  
        if (key === 'Enter' && this.props.url && !selectMode) {
          onClick();
        }
      };
  
      this.handleActionsClick = () => {
        this.setState(({
          actionsMenuVisible
        }) => ({
          actionsMenuVisible: !actionsMenuVisible
        }));
      };
  
      this.handleCloseRequest = () => {
        this.setState({
          actionsMenuVisible: false
        });
      };
    }
  
    static getDerivedStateFromProps(nextProps, prevState) {
      const selected = isSelected(nextProps.id, nextProps.context.selectedItems);
  
      if (prevState.selected === selected) {
        return null;
      }
  
      return {
        selected
      };
    }
  
    shouldComponentUpdate(nextProps, nextState) {
      const restNextContext = _objectWithoutProperties(nextProps.context, ["selectedItems"]),
            restNextProps = _objectWithoutProperties(nextProps, ["children", "context"]);
  
      const _this$props = this.props,
            restContext = _objectWithoutProperties(_this$props.context, ["selectedItems"]),
            restProps = _objectWithoutProperties(_this$props, ["children", "context"]);
  
      const nextSelectMode = nextProps.context.selectMode;
      return !isEqual(this.state, nextState) || this.props.context.selectMode !== nextSelectMode || !nextProps.context.selectMode && (!isEqual(restProps, restNextProps) || !isEqual(restContext, restNextContext));
    }
  
    render() {
      const {
        children,
        url,
        external,
        media,
        shortcutActions,
        ariaControls,
        ariaExpanded,
        persistActions = false,
        accessibilityLabel,
        name,
        context: {
          selectable,
          selectMode,
          loading,
          resourceName
        },
        i18n,
        features: {
          newDesignLanguage
        },
        verticalAlignment
      } = this.props;
      const {
        actionsMenuVisible,
        focused,
        focusedInner,
        selected
      } = this.state;
      let ownedMarkup = null;
      let handleMarkup = null;
      const mediaMarkup = media ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$1r.Media
      }, media) : null;
  
      if (selectable) {
        const checkboxAccessibilityLabel = name || accessibilityLabel || i18n.translate('Polaris.Common.checkbox');
        handleMarkup = /*#__PURE__*/React__default.createElement("div", {
          className: styles$1r.Handle,
          onClick: this.handleLargerSelectionArea
        }, /*#__PURE__*/React__default.createElement("div", {
          onClick: stopPropagation$1,
          className: styles$1r.CheckboxWrapper
        }, /*#__PURE__*/React__default.createElement("div", {
          onChange: this.handleLargerSelectionArea
        }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
          id: this.checkboxId,
          label: checkboxAccessibilityLabel,
          labelHidden: true,
          checked: selected,
          disabled: loading
        }))));
      }
  
      if (media || selectable) {
        ownedMarkup = /*#__PURE__*/React__default.createElement("div", {
          className: classNames(styles$1r.Owned, !mediaMarkup && styles$1r.OwnedNoMedia)
        }, handleMarkup, mediaMarkup);
      }
  
      const className = classNames(styles$1r.ResourceItem, newDesignLanguage && styles$1r.newDesignLanguage, focused && styles$1r.focused, selectable && styles$1r.selectable, selected && styles$1r.selected, selectMode && styles$1r.selectMode, persistActions && styles$1r.persistActions, focusedInner && styles$1r.focusedInner);
      const listItemClassName = classNames(styles$1r.ListItem, focused && !focusedInner && styles$1r.focused, newDesignLanguage && styles$1r.newDesignLanguage);
      let actionsMarkup = null;
      let disclosureMarkup = null;
  
      if (shortcutActions && !loading) {
        if (persistActions) {
          actionsMarkup = /*#__PURE__*/React__default.createElement("div", {
            className: styles$1r.Actions,
            onClick: stopPropagation$1
          }, /*#__PURE__*/React__default.createElement(ButtonGroup, null, buttonsFrom(shortcutActions, {
            plain: true
          })));
          const disclosureAccessibilityLabel = name ? i18n.translate('Polaris.ResourceList.Item.actionsDropdownLabel', {
            accessibilityLabel: name
          }) : i18n.translate('Polaris.ResourceList.Item.actionsDropdown');
          disclosureMarkup = /*#__PURE__*/React__default.createElement("div", {
            className: styles$1r.Disclosure,
            onClick: stopPropagation$1
          }, /*#__PURE__*/React__default.createElement(Popover, {
            activator: /*#__PURE__*/React__default.createElement(Button, {
              accessibilityLabel: disclosureAccessibilityLabel,
              onClick: this.handleActionsClick,
              plain: true,
              icon: polarisIcons.HorizontalDotsMinor
            }),
            onClose: this.handleCloseRequest,
            active: actionsMenuVisible
          }, /*#__PURE__*/React__default.createElement(ActionList, {
            items: shortcutActions
          })));
        } else {
          actionsMarkup = /*#__PURE__*/React__default.createElement("div", {
            className: styles$1r.Actions,
            onClick: stopPropagation$1
          }, /*#__PURE__*/React__default.createElement(ButtonGroup, {
            segmented: true
          }, buttonsFrom(shortcutActions, {
            size: 'slim'
          })));
        }
      }
  
      const content = children ? /*#__PURE__*/React__default.createElement("div", {
        className: styles$1r.Content
      }, children) : null;
      const containerClassName = classNames(styles$1r.Container, verticalAlignment && styles$1r[variationName('alignment', verticalAlignment)]);
      const containerMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: containerClassName,
        id: this.props.id
      }, ownedMarkup, content, actionsMarkup, disclosureMarkup);
      const tabIndex = loading ? -1 : 0;
      const ariaLabel = accessibilityLabel || i18n.translate('Polaris.ResourceList.Item.viewItem', {
        itemName: name || resourceName && resourceName.singular || ''
      });
      const accessibleMarkup = url ? /*#__PURE__*/React__default.createElement(UnstyledLink, {
        "aria-describedby": this.props.id,
        "aria-label": ariaLabel,
        className: styles$1r.Link,
        url: url,
        external: external,
        tabIndex: tabIndex,
        id: this.overlayId
      }) : /*#__PURE__*/React__default.createElement("button", {
        className: styles$1r.Button,
        "aria-label": ariaLabel,
        "aria-controls": ariaControls,
        "aria-expanded": ariaExpanded,
        onClick: this.handleClick,
        tabIndex: tabIndex,
        ref: this.buttonOverlay
      });
      return /*#__PURE__*/React__default.createElement("li", {
        className: listItemClassName
      }, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1r.ItemWrapper
      }, /*#__PURE__*/React__default.createElement("div", {
        ref: this.setNode,
        className: className,
        onClick: this.handleClick,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        onKeyUp: this.handleKeyUp,
        onMouseOut: this.handleMouseOut,
        "data-href": url
      }, accessibleMarkup, containerMarkup)));
    }
  
  }
  
  function noop$a() {}
  
  function stopPropagation$1(event) {
    event.stopPropagation();
  }
  
  function isSelected(id, selectedItems) {
    return Boolean(selectedItems && (Array.isArray(selectedItems) && selectedItems.includes(id) || selectedItems === SELECT_ALL_ITEMS));
  }
  
  function ResourceItem(props) {
    return /*#__PURE__*/React__default.createElement(BaseResourceItem, Object.assign({}, props, {
      context: React.useContext(ResourceListContext),
      features: useFeatures(),
      i18n: useI18n()
    }));
  }
  
  class StickyInner extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        isSticky: false,
        style: {}
      };
      this.placeHolderNode = null;
      this.stickyNode = null;
  
      this.setPlaceHolderNode = node => {
        this.placeHolderNode = node;
      };
  
      this.setStickyNode = node => {
        this.stickyNode = node;
      };
  
      this.handlePositioning = (stick, top = 0, left = 0, width = 0) => {
        const {
          isSticky
        } = this.state;
  
        if (stick && !isSticky || !stick && isSticky) {
          this.adjustPlaceHolderNode(stick);
          this.setState({
            isSticky: !isSticky
          });
        }
  
        const style = stick ? {
          position: 'fixed',
          top,
          left,
          width
        } : {};
        this.setState({
          style
        });
      };
  
      this.adjustPlaceHolderNode = add => {
        if (this.placeHolderNode && this.stickyNode) {
          this.placeHolderNode.style.paddingBottom = add ? `${getRectForNode(this.stickyNode).height}px` : '0px';
        }
      };
    }
  
    componentDidMount() {
      const {
        boundingElement,
        offset = false,
        disableWhenStacked = false,
        stickyManager
      } = this.props;
      if (!this.stickyNode || !this.placeHolderNode) return;
      stickyManager.registerStickyItem({
        stickyNode: this.stickyNode,
        placeHolderNode: this.placeHolderNode,
        handlePositioning: this.handlePositioning,
        offset,
        boundingElement,
        disableWhenStacked
      });
    }
  
    componentWillUnmount() {
      const {
        stickyManager
      } = this.props;
      if (!this.stickyNode) return;
      stickyManager.unregisterStickyItem(this.stickyNode);
    }
  
    render() {
      const {
        style,
        isSticky
      } = this.state;
      const {
        children
      } = this.props;
      const childrenContent = isFunction(children) ? children(isSticky) : children;
      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
        ref: this.setPlaceHolderNode
      }), /*#__PURE__*/React__default.createElement("div", {
        ref: this.setStickyNode,
        style: style
      }, childrenContent));
    }
  
  } // This should have a typeguard instead of using Function
  // eslint-disable-next-line @typescript-eslint/ban-types
  
  
  function isFunction(arg) {
    return typeof arg === 'function';
  }
  
  function Sticky(props) {
    const stickyManager = useStickyManager();
    return /*#__PURE__*/React__default.createElement(StickyInner, Object.assign({}, props, {
      stickyManager: stickyManager
    }));
  }
  
  var styles$1s = {
    "Select": "Polaris-Select",
    "disabled": "Polaris-Select--disabled",
    "Content": "Polaris-Select__Content",
    "InlineLabel": "Polaris-Select__InlineLabel",
    "Icon": "Polaris-Select__Icon",
    "newDesignLanguage": "Polaris-Select--newDesignLanguage",
    "Backdrop": "Polaris-Select__Backdrop",
    "placeholder": "Polaris-Select--placeholder",
    "error": "Polaris-Select--error",
    "Input": "Polaris-Select__Input",
    "SelectedOption": "Polaris-Select__SelectedOption",
    "Prefix": "Polaris-Select__Prefix",
    "hover": "Polaris-Select--hover"
  };
  
  const PLACEHOLDER_VALUE = '';
  
  var _ref$m = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.SelectMinor
  });
  
  function Select({
    options: optionsProp,
    label,
    labelAction,
    labelHidden: labelHiddenProp,
    labelInline,
    disabled,
    helpText,
    placeholder,
    id: idProp,
    name,
    value = PLACEHOLDER_VALUE,
    error,
    onChange,
    onFocus,
    onBlur
  }) {
    const id = useUniqueId('Select', idProp);
    const labelHidden = labelInline ? true : labelHiddenProp;
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$1s.Select, error && styles$1s.error, disabled && styles$1s.disabled, newDesignLanguage && styles$1s.newDesignLanguage);
    const handleChange = onChange ? event => onChange(event.currentTarget.value, id) : undefined;
    const describedBy = [];
  
    if (helpText) {
      describedBy.push(helpTextID(id));
    }
  
    if (error) {
      describedBy.push(`${id}Error`);
    }
  
    const options = optionsProp || [];
    let normalizedOptions = options.map(normalizeOption);
  
    if (placeholder) {
      normalizedOptions = [{
        label: placeholder,
        value: PLACEHOLDER_VALUE,
        disabled: true
      }, ...normalizedOptions];
    }
  
    const inlineLabelMarkup = labelInline && /*#__PURE__*/React__default.createElement("span", {
      className: styles$1s.InlineLabel
    }, label);
    const selectedOption = getSelectedOption(normalizedOptions, value);
    const prefixMarkup = selectedOption.prefix && /*#__PURE__*/React__default.createElement("div", {
      className: styles$1s.Prefix
    }, selectedOption.prefix);
    const contentMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: styles$1s.Content,
      "aria-hidden": true,
      "aria-disabled": disabled
    }, inlineLabelMarkup, prefixMarkup, /*#__PURE__*/React__default.createElement("span", {
      className: styles$1s.SelectedOption
    }, selectedOption.label), /*#__PURE__*/React__default.createElement("span", {
      className: styles$1s.Icon
    }, _ref$m));
    const optionsMarkup = normalizedOptions.map(renderOption);
    return /*#__PURE__*/React__default.createElement(Labelled, {
      id: id,
      label: label,
      error: error,
      action: labelAction,
      labelHidden: labelHidden,
      helpText: helpText
    }, /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, /*#__PURE__*/React__default.createElement("select", {
      id: id,
      name: name,
      value: value,
      className: styles$1s.Input,
      disabled: disabled,
      onFocus: onFocus,
      onBlur: onBlur,
      onChange: handleChange,
      "aria-invalid": Boolean(error),
      "aria-describedby": describedBy.length ? describedBy.join(' ') : undefined
    }, optionsMarkup), contentMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1s.Backdrop
    })));
  }
  
  function isString(option) {
    return typeof option === 'string';
  }
  
  function isGroup(option) {
    return typeof option === 'object' && 'options' in option && option.options != null;
  }
  
  function normalizeStringOption(option) {
    return {
      label: option,
      value: option
    };
  }
  /**
   * Converts a string option (and each string option in a Group) into
   * an Option object.
   */
  
  
  function normalizeOption(option) {
    if (isString(option)) {
      return normalizeStringOption(option);
    } else if (isGroup(option)) {
      const {
        title,
        options
      } = option;
      return {
        title,
        options: options.map(option => {
          return isString(option) ? normalizeStringOption(option) : option;
        })
      };
    }
  
    return option;
  }
  /**
   * Gets the text to display in the UI, for the currently selected option
   */
  
  
  function getSelectedOption(options, value) {
    const flatOptions = flattenOptions(options);
    let selectedOption = flatOptions.find(option => value === option.value);
  
    if (selectedOption === undefined) {
      // Get the first visible option (not the hidden placeholder)
      selectedOption = flatOptions.find(option => !option.hidden);
    }
  
    return selectedOption || {
      value: '',
      label: ''
    };
  }
  /**
   * Ungroups an options array
   */
  
  
  function flattenOptions(options) {
    let flatOptions = [];
    options.forEach(optionOrGroup => {
      if (isGroup(optionOrGroup)) {
        flatOptions = flatOptions.concat(optionOrGroup.options);
      } else {
        flatOptions.push(optionOrGroup);
      }
    });
    return flatOptions;
  }
  
  function renderSingleOption(option) {
    const {
      value,
      label,
      prefix: _prefix
    } = option,
          rest = _objectWithoutProperties(option, ["value", "label", "prefix"]);
  
    return /*#__PURE__*/React__default.createElement("option", Object.assign({
      key: value,
      value: value
    }, rest), label);
  }
  
  function renderOption(optionOrGroup) {
    if (isGroup(optionOrGroup)) {
      const {
        title,
        options
      } = optionOrGroup;
      return /*#__PURE__*/React__default.createElement("optgroup", {
        label: title,
        key: title
      }, options.map(renderSingleOption));
    }
  
    return renderSingleOption(optionOrGroup);
  }
  
  const UNIQUE_IDENTIFIER = Symbol('unique_identifier');
  /**
   * useLazyRef provides a lazy initial value, similar to lazy
   * initial state the initialValue is the value used during
   * initialization and disregarded after that. Use this hook
   * for expensive initialization.
   * @param initialValue - A function that will return the initial
   * value and be disregarded after that
   * @returns MutableRefObject<T> - Returns a ref object with the
   * results from invoking initial value
   * @example
   * function ComponentExample() {
   *  const title = useLazyRef(() => someExpensiveComputation());
   *  return <h1>{title.current}</h1>;
   * }
   */
  
  function useLazyRef(initialValue) {
    const lazyRef = React.useRef(UNIQUE_IDENTIFIER);
  
    if (lazyRef.current === UNIQUE_IDENTIFIER) {
      lazyRef.current = initialValue();
    }
  
    return lazyRef;
  }
  
  var styles$1t = {
    "FiltersWrapper": "Polaris-ResourceList__FiltersWrapper",
    "ResourceList": "Polaris-ResourceList",
    "HeaderOuterWrapper": "Polaris-ResourceList__HeaderOuterWrapper",
    "HeaderWrapper-disabled": "Polaris-ResourceList__HeaderWrapper--disabled",
    "HeaderWrapper-overlay": "Polaris-ResourceList__HeaderWrapper--overlay",
    "HeaderWrapper": "Polaris-ResourceList__HeaderWrapper",
    "HeaderWrapper-isSticky": "Polaris-ResourceList__HeaderWrapper--isSticky",
    "HeaderContentWrapper": "Polaris-ResourceList__HeaderContentWrapper",
    "HeaderWrapper-inSelectMode": "Polaris-ResourceList__HeaderWrapper--inSelectMode",
    "SortWrapper": "Polaris-ResourceList__SortWrapper",
    "AlternateToolWrapper": "Polaris-ResourceList__AlternateToolWrapper",
    "HeaderWrapper-hasSelect": "Polaris-ResourceList__HeaderWrapper--hasSelect",
    "HeaderWrapper-hasAlternateTool": "Polaris-ResourceList__HeaderWrapper--hasAlternateTool",
    "HeaderWrapper-hasSort": "Polaris-ResourceList__HeaderWrapper--hasSort",
    "HeaderTitleWrapper": "Polaris-ResourceList__HeaderTitleWrapper",
    "BulkActionsWrapper": "Polaris-ResourceList__BulkActionsWrapper",
    "CheckableButtonWrapper": "Polaris-ResourceList__CheckableButtonWrapper",
    "SelectButtonWrapper": "Polaris-ResourceList__SelectButtonWrapper",
    "EmptySearchResultWrapper": "Polaris-ResourceList__EmptySearchResultWrapper",
    "ResourceListWrapper": "Polaris-ResourceList__ResourceListWrapper",
    "ItemWrapper": "Polaris-ResourceList__ItemWrapper",
    "ItemWrapper-isLoading": "Polaris-ResourceList__ItemWrapper--isLoading",
    "SpinnerContainer": "Polaris-ResourceList__SpinnerContainer",
    "LoadingOverlay": "Polaris-ResourceList__LoadingOverlay",
    "DisabledPointerEvents": "Polaris-ResourceList__DisabledPointerEvents",
    "disableTextSelection": "Polaris-ResourceList--disableTextSelection"
  };
  
  var styles$1u = {
    "DateTextField": "Polaris-FilterControl-DateSelector__DateTextField",
    "DatePicker": "Polaris-FilterControl-DateSelector__DatePicker"
  };
  
  const VALID_DATE_REGEX = /^\d{4}-\d{1,2}-\d{1,2}$/;
  let DateFilterOption;
  
  (function (DateFilterOption) {
    DateFilterOption["PastWeek"] = "past_week";
    DateFilterOption["PastMonth"] = "past_month";
    DateFilterOption["PastQuarter"] = "past_quarter";
    DateFilterOption["PastYear"] = "past_year";
    DateFilterOption["ComingWeek"] = "coming_week";
    DateFilterOption["ComingMonth"] = "coming_month";
    DateFilterOption["ComingQuarter"] = "coming_quarter";
    DateFilterOption["ComingYear"] = "coming_year";
    DateFilterOption["OnOrBefore"] = "on_or_before";
    DateFilterOption["OnOrAfter"] = "on_or_after";
  })(DateFilterOption || (DateFilterOption = {}));
  
  var _ref$n = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CalendarMinor,
    color: "skyDark"
  });
  
  const DateSelector = /*#__PURE__*/React.memo(function DateSelector({
    filterValue,
    filterKey,
    filterMinKey,
    filterMaxKey,
    dateOptionType,
    onFilterValueChange,
    onFilterKeyChange
  }) {
    const now = new Date();
    const i18n = useI18n();
    const initialConsumerFilterKey = React.useRef(filterKey);
    const [datePickerMonth, setDatePickerMonth] = React.useState(now.getMonth());
    const [datePickerYear, setDatePickerYear] = React.useState(now.getFullYear());
    const [selectedDate, setSelectedDate] = React.useState();
    const [userInputDate, setUserInputDate] = React.useState();
    const [userInputDateError, setUserInputDateError] = React.useState();
    const dateTextFieldValue = getDateTextFieldValue();
    const handleDateFieldChange = React.useCallback(value => {
      if (value.length === 0) {
        setSelectedDate(undefined);
        onFilterValueChange(undefined);
      }
  
      if (userInputDateError && isValidDate(value)) {
        setUserInputDateError(undefined);
      }
  
      setUserInputDate(value);
    }, [onFilterValueChange, userInputDateError]);
    const handleDateChanged = React.useCallback(date => {
      if (!date) {
        return;
      }
  
      onFilterValueChange(stripTimeFromISOString(formatDateForLocalTimezone(date)));
    }, [onFilterValueChange]);
    const handleDateBlur = React.useCallback(() => {
      if (!dateTextFieldValue || !isValidDate(dateTextFieldValue)) {
        setSelectedDate(undefined);
        setUserInputDateError(i18n.translate('Polaris.ResourceList.DateSelector.dateValueError'));
        onFilterValueChange(undefined);
        return;
      }
  
      if (!userInputDate) {
        return;
      }
  
      const formattedDateForTimezone = new Date(formatDateForLocalTimezone(new Date(userInputDate)));
      setSelectedDate(formattedDateForTimezone);
      setDatePickerMonth(formattedDateForTimezone.getMonth());
      setDatePickerYear(formattedDateForTimezone.getFullYear());
      setUserInputDate(undefined);
      setUserInputDateError(undefined);
      handleDateChanged(formattedDateForTimezone);
    }, [dateTextFieldValue, handleDateChanged, i18n, onFilterValueChange, userInputDate]);
    const handleDateFilterOptionsChange = React.useCallback(newOption => {
      if (!initialConsumerFilterKey.current) {
        return;
      }
  
      if (newOption === DateFilterOption.OnOrBefore) {
        onFilterKeyChange(filterMaxKey);
        onFilterValueChange(selectedDate ? stripTimeFromISOString(formatDateForLocalTimezone(selectedDate)) : undefined);
        return;
      }
  
      if (newOption === DateFilterOption.OnOrAfter) {
        onFilterKeyChange(filterMinKey);
        onFilterValueChange(selectedDate ? stripTimeFromISOString(formatDateForLocalTimezone(selectedDate)) : undefined);
        return;
      }
  
      onFilterKeyChange(initialConsumerFilterKey.current);
      onFilterValueChange(newOption);
    }, [filterMaxKey, filterMinKey, initialConsumerFilterKey, onFilterKeyChange, onFilterValueChange, selectedDate]);
    const handleDatePickerChange = React.useCallback(({
      end: nextDate
    }) => {
      const date = new Date(nextDate);
      setSelectedDate(date);
      setUserInputDate(undefined);
      setUserInputDateError(undefined);
      handleDateChanged(date);
    }, [handleDateChanged]);
    const handleDatePickerMonthChange = React.useCallback((month, year) => {
      setDatePickerMonth(month);
      setDatePickerYear(year);
    }, []);
    const dateFilterOption = getDateFilterOption(filterValue, filterKey, filterMinKey, filterMaxKey);
    const showDatePredicate = dateFilterOption === DateFilterOption.OnOrBefore || dateFilterOption === DateFilterOption.OnOrAfter;
    const datePredicateMarkup = showDatePredicate && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1u.DateTextField
    }, /*#__PURE__*/React__default.createElement(TextField, {
      label: i18n.translate('Polaris.ResourceList.DateSelector.dateValueLabel'),
      placeholder: i18n.translate('Polaris.ResourceList.DateSelector.dateValuePlaceholder'),
      value: dateTextFieldValue,
      error: userInputDateError,
      prefix: _ref$n,
      autoComplete: false,
      onChange: handleDateFieldChange,
      onBlur: handleDateBlur
    })), /*#__PURE__*/React__default.createElement("div", {
      className: styles$1u.DatePicker
    }, /*#__PURE__*/React__default.createElement(DatePicker, {
      selected: selectedDate,
      month: datePickerMonth,
      year: datePickerYear,
      onChange: handleDatePickerChange,
      onMonthChange: handleDatePickerMonthChange
    })));
    const dateOptionTypes = {
      past: [...getDatePastOptions(), ...getDateComparatorOptions()],
      future: [...getDateFutureOptions(), ...getDateComparatorOptions()],
      full: [...getDatePastOptions(), ...getDateFutureOptions(), ...getDateComparatorOptions()]
    };
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Select, {
      label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.dateFilterLabel'),
      labelHidden: true,
      options: dateOptionType ? dateOptionTypes[dateOptionType] : dateOptionTypes.full,
      placeholder: i18n.translate('Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder'),
      value: dateFilterOption,
      onChange: handleDateFilterOptionsChange
    }), datePredicateMarkup);
  
    function getDateComparatorOptions() {
      return [{
        value: DateFilterOption.OnOrBefore,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.OnOrBefore')
      }, {
        value: DateFilterOption.OnOrAfter,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.OnOrAfter')
      }];
    }
  
    function getDatePastOptions() {
      return [{
        value: DateFilterOption.PastWeek,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastWeek')
      }, {
        value: DateFilterOption.PastMonth,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastMonth')
      }, {
        value: DateFilterOption.PastQuarter,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastQuarter')
      }, {
        value: DateFilterOption.PastYear,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.PastYear')
      }];
    }
  
    function getDateFutureOptions() {
      return [{
        value: DateFilterOption.ComingWeek,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingWeek')
      }, {
        value: DateFilterOption.ComingMonth,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingMonth')
      }, {
        value: DateFilterOption.ComingQuarter,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingQuarter')
      }, {
        value: DateFilterOption.ComingYear,
        label: i18n.translate('Polaris.ResourceList.DateSelector.SelectOptions.ComingYear')
      }];
    }
  
    function getDateTextFieldValue() {
      if (!userInputDate && !selectedDate) {
        return undefined;
      }
  
      if (userInputDate !== undefined) {
        return userInputDate;
      }
  
      if (selectedDate) {
        return stripTimeFromISOString(formatDateForLocalTimezone(selectedDate));
      }
    }
  });
  
  function isValidDate(date) {
    if (!date) {
      return false;
    }
  
    return VALID_DATE_REGEX.test(date) && !isNaN(new Date(date).getTime());
  }
  
  function getDateFilterOption(filterValue, filterKey, filterMinKey, filterMaxKey) {
    if (filterKey === filterMaxKey) {
      return DateFilterOption.OnOrBefore;
    }
  
    if (filterKey === filterMinKey) {
      return DateFilterOption.OnOrAfter;
    }
  
    return filterValue;
  }
  
  function stripTimeFromISOString(ISOString) {
    return ISOString.slice(0, 10);
  }
  
  function formatDateForLocalTimezone(date) {
    const timezoneOffset = date.getTimezoneOffset();
    const timezoneOffsetMs = timezoneOffset * 60 * 1000;
    const isFringeTimezone = timezoneOffset === -720 || timezoneOffset === 720;
    const formattedDate = new Date();
  
    if (isFringeTimezone && date.getHours() !== 0) {
      return date.toISOString();
    }
  
    const newTime = timezoneOffset > -1 ? date.getTime() + timezoneOffsetMs : date.getTime() - timezoneOffsetMs;
    formattedDate.setTime(newTime);
    return formattedDate.toISOString();
  }
  
  let FilterType;
  
  (function (FilterType) {
    FilterType[FilterType["Select"] = 0] = "Select";
    FilterType[FilterType["TextField"] = 1] = "TextField";
    FilterType[FilterType["DateSelector"] = 2] = "DateSelector";
  })(FilterType || (FilterType = {}));
  
  function FilterValueSelector({
    filter,
    filterKey,
    value,
    onChange,
    onFilterKeyChange
  }) {
    const i18n = useI18n();
    const isMounted = useIsMountedRef();
    const {
      operatorText,
      type,
      label
    } = filter;
    const showOperatorOptions = type !== FilterType.DateSelector && operatorText && typeof operatorText !== 'string';
    const handleOperatorOptionChange = React.useCallback(operatorKey => {
      onFilterKeyChange(operatorKey);
  
      if (!value) {
        return;
      }
  
      onChange(value);
    }, [onChange, onFilterKeyChange, value]);
  
    if (showOperatorOptions && operatorText.length !== 0 && !isMounted.current) {
      handleOperatorOptionChange(operatorText[0].key);
    }
  
    const operatorOptionsMarkup = showOperatorOptions ? /*#__PURE__*/React__default.createElement(Select, {
      label: label,
      labelHidden: true,
      options: buildOperatorOptions(operatorText),
      value: filterKey,
      onChange: handleOperatorOptionChange
    }) : null;
    const selectedFilterLabel = typeof operatorText === 'string' ? operatorText : '';
  
    switch (filter.type) {
      case FilterType.Select:
        return /*#__PURE__*/React__default.createElement(Stack, {
          vertical: true
        }, operatorOptionsMarkup, /*#__PURE__*/React__default.createElement(Select, {
          label: selectedFilterLabel,
          options: filter.options,
          placeholder: i18n.translate('Polaris.ResourceList.FilterValueSelector.selectFilterValuePlaceholder'),
          value: value,
          onChange: onChange
        }));
  
      case FilterType.TextField:
        return /*#__PURE__*/React__default.createElement(Stack, {
          vertical: true
        }, operatorOptionsMarkup, /*#__PURE__*/React__default.createElement(TextField, {
          label: selectedFilterLabel,
          value: value,
          type: filter.textFieldType,
          onChange: onChange
        }));
  
      case FilterType.DateSelector:
        return /*#__PURE__*/React__default.createElement(DateSelector, {
          dateOptionType: filter.dateOptionType,
          filterValue: value,
          filterKey: filterKey,
          filterMinKey: filter.minKey,
          filterMaxKey: filter.maxKey,
          onFilterValueChange: onChange,
          onFilterKeyChange: onFilterKeyChange
        });
  
      default:
        return null;
    }
  }
  
  function buildOperatorOptions(operatorText) {
    if (!operatorText || typeof operatorText === 'string') {
      return [];
    }
  
    return operatorText.map(({
      key,
      optionLabel
    }) => {
      return {
        value: key,
        label: optionLabel
      };
    });
  }
  
  function FilterCreator({
    filters,
    resourceName,
    disabled,
    onAddFilter
  }) {
    const {
      value: popoverActive,
      toggle: togglePopoverActive,
      setFalse: setPopoverActiveFalse
    } = useToggle(false);
    const [selectedFilter, setSelectedFilter] = React.useState();
    const [selectedFilterKey, setSelectedFilterKey] = React.useState();
    const [selectedFilterValue, setSelectedFilterValue] = React.useState();
    const i18n = useI18n();
    const node = React.useRef(null);
    const canAddFilter = Boolean(selectedFilter && selectedFilterKey && selectedFilterValue);
    const handleButtonFocus = React.useCallback((...args) => {
      const event = args[0];
  
      if (!node.current && event) {
        node.current = event.target;
      }
    }, []);
    const handleFilterKeyChange = React.useCallback(filterKey => {
      const foundFilter = filters.find(filter => {
        const {
          minKey,
          maxKey,
          operatorText
        } = filter;
  
        if (minKey || maxKey) {
          return filter.key === filterKey || minKey === filterKey || maxKey === filterKey;
        }
  
        if (operatorText && typeof operatorText !== 'string') {
          return filter.key === filterKey || operatorText.filter(({
            key
          }) => key === filterKey).length === 1;
        }
  
        return filter.key === filterKey;
      });
  
      if (!foundFilter) {
        return;
      }
  
      setSelectedFilter(foundFilter);
      setSelectedFilterKey(filterKey);
      setSelectedFilterValue(undefined);
    }, [filters]);
    const handleFilterValueChange = React.useCallback(value => {
      setSelectedFilterValue(value);
    }, []);
    const handleAddFilter = React.useCallback(() => {
      if (!onAddFilter || !canAddFilter || !selectedFilterKey) {
        return;
      }
  
      onAddFilter({
        key: selectedFilterKey,
        value: selectedFilterValue || ''
      });
      setPopoverActiveFalse();
      setSelectedFilter(undefined);
      setSelectedFilterValue(undefined);
  
      if (node.current != null) {
        node.current.focus();
      }
    }, [canAddFilter, onAddFilter, selectedFilterKey, selectedFilterValue, setPopoverActiveFalse]);
    const activator = /*#__PURE__*/React__default.createElement(Button, {
      onClick: togglePopoverActive,
      disclosure: true,
      disabled: disabled,
      onFocus: handleButtonFocus
    }, i18n.translate('Polaris.ResourceList.FilterCreator.filterButtonLabel'));
    const filterOptions = filters.map(({
      key,
      label
    }) => ({
      value: key,
      label
    }));
    const filterValueSelectionMarkup = selectedFilter ? /*#__PURE__*/React__default.createElement(FilterValueSelector, {
      filter: selectedFilter,
      filterKey: selectedFilterKey,
      value: selectedFilterValue,
      onFilterKeyChange: handleFilterKeyChange,
      onChange: handleFilterValueChange
    }) : null;
    const addFilterButtonMarkup = selectedFilter ? /*#__PURE__*/React__default.createElement(Button, {
      onClick: handleAddFilter,
      disabled: !canAddFilter
    }, i18n.translate('Polaris.ResourceList.FilterCreator.addFilterButtonLabel')) : null;
    return /*#__PURE__*/React__default.createElement(Popover, {
      active: popoverActive,
      activator: activator,
      onClose: togglePopoverActive,
      sectioned: true,
      fullHeight: true
    }, /*#__PURE__*/React__default.createElement(Form, {
      onSubmit: handleAddFilter
    }, /*#__PURE__*/React__default.createElement(FormLayout, null, /*#__PURE__*/React__default.createElement(Select, {
      label: i18n.translate('Polaris.ResourceList.FilterCreator.showAllWhere', {
        resourceNamePlural: resourceName.plural.toLocaleLowerCase()
      }),
      placeholder: i18n.translate('Polaris.ResourceList.FilterCreator.selectFilterKeyPlaceholder'),
      options: filterOptions,
      onChange: handleFilterKeyChange,
      value: selectedFilter && selectedFilter.key
    }), filterValueSelectionMarkup, addFilterButtonMarkup)));
  }
  
  var styles$1v = {
    "AppliedFilters": "Polaris-ResourceList-FilterControl__AppliedFilters",
    "AppliedFilter": "Polaris-ResourceList-FilterControl__AppliedFilter"
  };
  
  var _ref$o = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.SearchMinor,
    color: "skyDark"
  });
  
  /** @deprecated This is a private component, do not use it. This component might be removed in a minor version update. Use <Filters /> instead. */
  function FilterControl({
    searchValue,
    appliedFilters = [],
    additionalAction,
    focused = false,
    filters = [],
    placeholder,
    onSearchBlur,
    onSearchChange,
    onFiltersChange
  }) {
    // eslint-disable-next-line no-console
    console.warn('Deprecation: <FilterControl /> is deprecated. This is a private component, do not use it. This component might be removed in a minor version update. Use <Filters /> instead.');
    const i18n = useI18n();
    const {
      selectMode,
      resourceName
    } = React.useContext(ResourceListContext);
    const filterResourceName = resourceName || {
      singular: i18n.translate('Polaris.ResourceList.defaultItemSingular'),
      plural: i18n.translate('Polaris.ResourceList.defaultItemPlural')
    };
    const handleAddFilter = React.useCallback(newFilter => {
      if (!onFiltersChange) {
        return;
      }
  
      const foundFilter = appliedFilters.find(appliedFilter => idFromFilter(appliedFilter) === idFromFilter(newFilter));
  
      if (foundFilter) {
        return;
      }
  
      const newAppliedFilters = [...appliedFilters, newFilter];
      onFiltersChange(newAppliedFilters);
    }, [onFiltersChange, appliedFilters]);
    const handleRemoveFilter = React.useCallback(filterId => {
      if (!onFiltersChange) {
        return;
      }
  
      const foundIndex = appliedFilters.findIndex(appliedFilter => idFromFilter(appliedFilter) === filterId);
      const newAppliedFilters = foundIndex >= 0 ? [...appliedFilters.slice(0, foundIndex), ...appliedFilters.slice(foundIndex + 1, appliedFilters.length)] : [...appliedFilters];
      onFiltersChange(newAppliedFilters);
    }, [appliedFilters, onFiltersChange]);
    const getRemoveFilterCallback = React.useCallback(filterId => {
      return () => {
        handleRemoveFilter(filterId);
      };
    }, [handleRemoveFilter]);
    const textFieldLabel = placeholder ? placeholder : i18n.translate('Polaris.ResourceList.FilterControl.textFieldLabel', {
      resourceNamePlural: filterResourceName.plural.toLocaleLowerCase()
    });
  
    if (additionalAction) {
      additionalAction.disabled = selectMode;
    }
  
    const additionalActionButton = additionalAction && buttonsFrom(additionalAction) || null;
    const filterCreatorMarkup = filters.length > 0 ? /*#__PURE__*/React__default.createElement(FilterCreator, {
      resourceName: filterResourceName,
      filters: filters,
      onAddFilter: handleAddFilter,
      disabled: selectMode
    }) : null;
    const appliedFiltersMarkup = appliedFilters.map(appliedFilter => {
      const activeFilterLabel = getFilterLabel(appliedFilter);
      const filterId = idFromFilter(appliedFilter);
      return /*#__PURE__*/React__default.createElement("li", {
        className: styles$1v.AppliedFilter,
        key: filterId
      }, /*#__PURE__*/React__default.createElement(Tag, {
        onRemove: getRemoveFilterCallback(filterId),
        disabled: selectMode
      }, activeFilterLabel));
    });
    const appliedFiltersWrapper = appliedFilters.length > 0 ? /*#__PURE__*/React__default.createElement("ul", {
      className: styles$1v.AppliedFilters
    }, appliedFiltersMarkup) : null;
    return /*#__PURE__*/React__default.createElement(FormLayout, null, /*#__PURE__*/React__default.createElement(TextField, {
      connectedLeft: filterCreatorMarkup,
      connectedRight: additionalActionButton,
      label: textFieldLabel,
      labelHidden: true,
      placeholder: textFieldLabel,
      prefix: _ref$o,
      value: searchValue,
      onChange: onSearchChange,
      onBlur: onSearchBlur,
      focused: focused,
      disabled: selectMode
    }), appliedFiltersWrapper);
  
    function getFilterLabel(appliedFilter) {
      const {
        key,
        value,
        label
      } = appliedFilter;
  
      if (label) {
        return label;
      }
  
      const filter = filters.find(filter => {
        const {
          minKey,
          maxKey,
          operatorText
        } = filter;
  
        if (minKey || maxKey) {
          return filter.key === key || minKey === key || maxKey === key;
        }
  
        if (operatorText && typeof operatorText !== 'string') {
          return filter.key === key || operatorText.filter(({
            key: operatorKey
          }) => operatorKey === key).length === 1;
        }
  
        return filter.key === key;
      });
  
      if (!filter) {
        return value;
      }
  
      const filterOperatorLabel = findOperatorLabel(filter, appliedFilter);
      const filterLabelByType = findFilterLabelByType(filter, appliedFilter);
  
      if (!filterOperatorLabel) {
        return `${filter.label} ${filterLabelByType}`;
      }
  
      return `${filter.label} ${filterOperatorLabel} ${filterLabelByType}`;
    }
  
    function findFilterLabelByType(filter, appliedFilter) {
      const {
        value: appliedFilterValue
      } = appliedFilter;
  
      if (filter.type === FilterType.Select) {
        const foundFilterOption = filter.options.find(option => typeof option === 'string' ? option === appliedFilterValue : option.value === appliedFilterValue);
  
        if (foundFilterOption) {
          return typeof foundFilterOption === 'string' ? foundFilterOption : foundFilterOption.label;
        }
      }
  
      if (filter.type === FilterType.DateSelector) {
        if (filter.key === appliedFilter.key) {
          const filterLabelKey = `Polaris.ResourceList.DateSelector.FilterLabelForValue.${appliedFilter.value}`;
          return i18n.translationKeyExists(filterLabelKey) ? i18n.translate(filterLabelKey) : appliedFilter.value;
        }
  
        if (appliedFilter.key === filter.maxKey) {
          return i18n.translate('Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_before', {
            date: formatDateForLabelDisplay(appliedFilter.value)
          });
        }
  
        if (appliedFilter.key === filter.minKey) {
          return i18n.translate('Polaris.ResourceList.DateSelector.FilterLabelForValue.on_or_after', {
            date: formatDateForLabelDisplay(appliedFilter.value)
          });
        }
      }
  
      return appliedFilterValue;
    }
  }
  
  function idFromFilter(appliedFilter) {
    return `${appliedFilter.key}-${appliedFilter.value}`;
  }
  
  function formatDateForLabelDisplay(date) {
    if (isNaN(new Date(date).getTime())) {
      return date;
    }
  
    return new Date(date.replace(/-/g, '/')).toLocaleDateString();
  }
  
  function findOperatorLabel(filter, appliedFilter) {
    const {
      operatorText
    } = filter;
  
    if (filter.type === FilterType.DateSelector && (appliedFilter.key === filter.minKey || appliedFilter.key === filter.maxKey)) {
      return '';
    }
  
    if (!operatorText || typeof operatorText === 'string') {
      return operatorText;
    }
  
    const appliedOperator = operatorText.find(operator => {
      return operator.key === appliedFilter.key;
    });
  
    if (appliedOperator) {
      return appliedOperator.filterLabel || appliedOperator.optionLabel;
    }
  }
  
  const SMALL_SCREEN_WIDTH = 458;
  const SMALL_SPINNER_HEIGHT = 28;
  const LARGE_SPINNER_HEIGHT = 45;
  
  function getAllItemsOnPage(items, idForItem) {
    return items.map((item, index) => {
      return idForItem(item, index);
    });
  }
  
  const isSmallScreen = () => {
    return typeof window === 'undefined' ? false : window.innerWidth < SMALL_SCREEN_WIDTH;
  };
  
  function defaultIdForItem(item, index) {
    return Object.prototype.hasOwnProperty.call(item, 'id') ? item.id : index.toString();
  }
  
  const ResourceList = function ResourceList({
    items,
    filterControl,
    emptyState,
    emptySearchState,
    resourceName: resourceNameProp,
    promotedBulkActions,
    bulkActions,
    selectedItems = [],
    isFiltered,
    selectable,
    hasMoreItems,
    loading,
    showHeader,
    totalItemsCount,
    sortValue,
    sortOptions,
    alternateTool,
    onSortChange,
    onSelectionChange,
    renderItem,
    idForItem = defaultIdForItem,
    resolveItemId
  }) {
    const i18n = useI18n();
    const [selectMode, setSelectMode] = React.useState(Boolean(selectedItems && selectedItems.length > 0));
    const [loadingPosition, setLoadingPositionState] = React.useState(0);
    const [lastSelected, setLastSelected] = React.useState();
    const [smallScreen, setSmallScreen] = React.useState(isSmallScreen());
    const forceUpdate = React.useReducer((x = 0) => x + 1, 0)[1];
    const [checkableButtons, setCheckableButtons] = React.useState(new Map());
    const defaultResourceName = useLazyRef(() => ({
      singular: i18n.translate('Polaris.ResourceList.defaultItemSingular'),
      plural: i18n.translate('Polaris.ResourceList.defaultItemPlural')
    }));
    const listRef = React.useRef(null);
  
    const handleSelectMode = selectMode => {
      setSelectMode(selectMode);
  
      if (!selectMode && onSelectionChange) {
        onSelectionChange([]);
      }
    };
  
    const handleResize = debounce(() => {
      const newSmallScreen = isSmallScreen();
  
      if (selectedItems && selectedItems.length === 0 && selectMode && !newSmallScreen) {
        handleSelectMode(false);
      }
  
      if (smallScreen !== newSmallScreen) {
        setSmallScreen(newSmallScreen);
      }
    }, 50, {
      leading: true,
      trailing: true,
      maxWait: 50
    });
    const isSelectable = Boolean(promotedBulkActions && promotedBulkActions.length > 0 || bulkActions && bulkActions.length > 0 || selectable);
  
    const bulkSelectState = () => {
      let selectState = 'indeterminate';
  
      if (!selectedItems || Array.isArray(selectedItems) && selectedItems.length === 0) {
        selectState = false;
      } else if (selectedItems === SELECT_ALL_ITEMS || Array.isArray(selectedItems) && selectedItems.length === items.length) {
        selectState = true;
      }
  
      return selectState;
    };
  
    const resourceName = resourceNameProp ? resourceNameProp : defaultResourceName.current;
  
    const headerTitle = () => {
      const itemsCount = items.length;
      const resource = !loading && (!totalItemsCount && itemsCount === 1 || totalItemsCount === 1) ? resourceName.singular : resourceName.plural;
  
      if (loading) {
        return i18n.translate('Polaris.ResourceList.loading', {
          resource
        });
      } else if (totalItemsCount) {
        return i18n.translate('Polaris.ResourceList.showingTotalCount', {
          itemsCount,
          totalItemsCount,
          resource
        });
      } else {
        return i18n.translate('Polaris.ResourceList.showing', {
          itemsCount,
          resource
        });
      }
    };
  
    const bulkActionsLabel = () => {
      const selectedItemsCount = selectedItems === SELECT_ALL_ITEMS ? `${items.length}+` : selectedItems.length;
      return i18n.translate('Polaris.ResourceList.selected', {
        selectedItemsCount
      });
    };
  
    const bulkActionsAccessibilityLabel = () => {
      const selectedItemsCount = selectedItems.length;
      const totalItemsCount = items.length;
      const allSelected = selectedItemsCount === totalItemsCount;
  
      if (totalItemsCount === 1 && allSelected) {
        return i18n.translate('Polaris.ResourceList.a11yCheckboxDeselectAllSingle', {
          resourceNameSingular: resourceName.singular
        });
      } else if (totalItemsCount === 1) {
        return i18n.translate('Polaris.ResourceList.a11yCheckboxSelectAllSingle', {
          resourceNameSingular: resourceName.singular
        });
      } else if (allSelected) {
        return i18n.translate('Polaris.ResourceList.a11yCheckboxDeselectAllMultiple', {
          itemsLength: items.length,
          resourceNamePlural: resourceName.plural
        });
      } else {
        return i18n.translate('Polaris.ResourceList.a11yCheckboxSelectAllMultiple', {
          itemsLength: items.length,
          resourceNamePlural: resourceName.plural
        });
      }
    };
  
    const paginatedSelectAllText = () => {
      if (!isSelectable || !hasMoreItems) {
        return;
      }
  
      if (selectedItems === SELECT_ALL_ITEMS) {
        return i18n.translate(isFiltered ? 'Polaris.ResourceList.allFilteredItemsSelected' : 'Polaris.ResourceList.allItemsSelected', {
          itemsLength: items.length,
          resourceNamePlural: resourceName.plural
        });
      }
    };
  
    const paginatedSelectAllAction = () => {
      if (!isSelectable || !hasMoreItems) {
        return;
      }
  
      const actionText = selectedItems === SELECT_ALL_ITEMS ? i18n.translate('Polaris.Common.undo') : i18n.translate(isFiltered ? 'Polaris.ResourceList.selectAllFilteredItems' : 'Polaris.ResourceList.selectAllItems', {
        itemsLength: items.length,
        resourceNamePlural: resourceName.plural
      });
      return {
        content: actionText,
        onAction: handleSelectAllItemsInStore
      };
    };
  
    const emptySearchResultText = {
      title: i18n.translate('Polaris.ResourceList.emptySearchResultTitle', {
        resourceNamePlural: resourceName.plural
      }),
      description: i18n.translate('Polaris.ResourceList.emptySearchResultDescription')
    };
  
    const handleSelectAllItemsInStore = () => {
      const newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : SELECT_ALL_ITEMS;
  
      if (onSelectionChange) {
        onSelectionChange(newlySelectedItems);
      }
    };
  
    const setLoadingPosition = React.useCallback(() => {
      if (listRef.current != null) {
        if (typeof window === 'undefined') {
          return;
        }
  
        const overlay = listRef.current.getBoundingClientRect();
        const viewportHeight = Math.max(document.documentElement ? document.documentElement.clientHeight : 0, window.innerHeight || 0);
        const overflow = viewportHeight - overlay.height;
        const spinnerHeight = items.length === 1 ? SMALL_SPINNER_HEIGHT : LARGE_SPINNER_HEIGHT;
        const spinnerPosition = overflow > 0 ? (overlay.height - spinnerHeight) / 2 : (viewportHeight - overlay.top - spinnerHeight) / 2;
        setLoadingPositionState(spinnerPosition);
      }
    }, [listRef, items.length]);
    const itemsExist = items.length > 0;
    React.useEffect(() => {
      if (loading) {
        setLoadingPosition();
      }
    }, [loading, setLoadingPosition]);
    React.useEffect(() => {
      if (selectedItems && selectedItems.length > 0 && !selectMode) {
        setSelectMode(true);
      }
  
      if ((!selectedItems || selectedItems.length === 0) && !isSmallScreen()) {
        setSelectMode(false);
      }
    }, [selectedItems, selectMode]);
    React.useEffect(() => {
      forceUpdate();
    }, [forceUpdate, items]);
  
    const renderItemWithId = (item, index) => {
      const id = idForItem(item, index);
      const itemContent = renderItem(item, id, index);
  
      if (process.env.NODE_ENV === 'development' && !isElementOfType(itemContent, ResourceItem)) {
        // eslint-disable-next-line no-console
        console.warn('<ResourceList /> renderItem function should return a <ResourceItem />.');
      }
  
      return itemContent;
    };
  
    const handleMultiSelectionChange = (lastSelected, currentSelected, resolveItemId) => {
      const min = Math.min(lastSelected, currentSelected);
      const max = Math.max(lastSelected, currentSelected);
      return items.slice(min, max + 1).map(resolveItemId);
    };
  
    const handleCheckableButtonRegistration = (key, button) => {
      if (!checkableButtons.get(key)) {
        setCheckableButtons(new Map(checkableButtons).set(key, button));
      }
    };
  
    const handleSelectionChange = (selected, id, sortOrder, shiftKey) => {
      if (selectedItems == null || onSelectionChange == null) {
        return;
      }
  
      let newlySelectedItems = selectedItems === SELECT_ALL_ITEMS ? getAllItemsOnPage(items, idForItem) : [...selectedItems];
  
      if (sortOrder !== undefined) {
        setLastSelected(sortOrder);
      }
  
      const lastSelectedFromState = lastSelected;
      let selectedIds = [id];
  
      if (shiftKey && lastSelectedFromState != null && sortOrder !== undefined && resolveItemId) {
        selectedIds = handleMultiSelectionChange(lastSelectedFromState, sortOrder, resolveItemId);
      }
  
      newlySelectedItems = [...new Set([...newlySelectedItems, ...selectedIds])];
  
      if (!selected) {
        for (const selectedId of selectedIds) {
          newlySelectedItems.splice(newlySelectedItems.indexOf(selectedId), 1);
        }
      }
  
      if (newlySelectedItems.length === 0 && !isSmallScreen()) {
        handleSelectMode(false);
      } else if (newlySelectedItems.length > 0) {
        handleSelectMode(true);
      }
  
      if (onSelectionChange) {
        onSelectionChange(newlySelectedItems);
      }
    };
  
    const handleToggleAll = () => {
      let newlySelectedItems;
  
      if (Array.isArray(selectedItems) && selectedItems.length === items.length || selectedItems === SELECT_ALL_ITEMS) {
        newlySelectedItems = [];
      } else {
        newlySelectedItems = items.map((item, index) => {
          return idForItem(item, index);
        });
      }
  
      if (newlySelectedItems.length === 0 && !isSmallScreen()) {
        handleSelectMode(false);
      } else if (newlySelectedItems.length > 0) {
        handleSelectMode(true);
      }
  
      let checkbox;
  
      if (isSmallScreen()) {
        checkbox = checkableButtons.get('bulkSm');
      } else if (newlySelectedItems.length === 0) {
        checkbox = checkableButtons.get('plain');
      } else {
        checkbox = checkableButtons.get('bulkLg');
      }
  
      if (onSelectionChange) {
        onSelectionChange(newlySelectedItems);
      } // setTimeout ensures execution after the Transition on BulkActions
  
  
      setTimeout(() => {
        checkbox && checkbox.focus();
      }, 0);
    };
  
    const bulkActionsMarkup = isSelectable ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.BulkActionsWrapper
    }, /*#__PURE__*/React__default.createElement(BulkActions, {
      label: bulkActionsLabel(),
      accessibilityLabel: bulkActionsAccessibilityLabel(),
      selected: bulkSelectState(),
      onToggleAll: handleToggleAll,
      selectMode: selectMode,
      onSelectModeToggle: handleSelectMode,
      promotedActions: promotedBulkActions,
      paginatedSelectAllAction: paginatedSelectAllAction(),
      paginatedSelectAllText: paginatedSelectAllText(),
      actions: bulkActions,
      disabled: loading,
      smallScreen: smallScreen
    })) : null;
    const filterControlMarkup = filterControl ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.FiltersWrapper
    }, filterControl) : null;
    const sortingSelectMarkup = sortOptions && sortOptions.length > 0 && !alternateTool ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.SortWrapper
    }, /*#__PURE__*/React__default.createElement(Select, {
      label: i18n.translate('Polaris.ResourceList.sortingLabel'),
      labelInline: !smallScreen,
      labelHidden: smallScreen,
      options: sortOptions,
      onChange: onSortChange,
      value: sortValue,
      disabled: selectMode
    })) : null;
    const alternateToolMarkup = alternateTool && !sortingSelectMarkup ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.AlternateToolWrapper
    }, alternateTool) : null;
    const headerTitleMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.HeaderTitleWrapper
    }, headerTitle());
    const selectButtonMarkup = isSelectable ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.SelectButtonWrapper
    }, /*#__PURE__*/React__default.createElement(Button, {
      disabled: selectMode,
      icon: polarisIcons.EnableSelectionMinor,
      onClick: () => handleSelectMode(true)
    }, i18n.translate('Polaris.ResourceList.selectButtonText'))) : null;
    const checkableButtonMarkup = isSelectable ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.CheckableButtonWrapper
    }, /*#__PURE__*/React__default.createElement(CheckableButton, {
      accessibilityLabel: bulkActionsAccessibilityLabel(),
      label: headerTitle(),
      onToggleAll: handleToggleAll,
      plain: true,
      disabled: loading
    })) : null;
    const needsHeader = isSelectable || sortOptions && sortOptions.length > 0 || alternateTool;
    const headerWrapperOverlay = loading ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t['HeaderWrapper-overlay']
    }) : null;
    const showEmptyState = emptyState && !itemsExist && !loading;
    const showEmptySearchState = !showEmptyState && filterControl && !itemsExist && !loading;
  
    var _ref = /*#__PURE__*/React__default.createElement(EventListener, {
      event: "resize",
      handler: handleResize
    });
  
    const headerMarkup = !showEmptyState && showHeader !== false && !showEmptySearchState && (showHeader || needsHeader) && listRef.current && /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.HeaderOuterWrapper
    }, /*#__PURE__*/React__default.createElement(Sticky, {
      boundingElement: listRef.current
    }, isSticky => {
      const headerClassName = classNames(styles$1t.HeaderWrapper, sortOptions && sortOptions.length > 0 && !alternateTool && styles$1t['HeaderWrapper-hasSort'], alternateTool && styles$1t['HeaderWrapper-hasAlternateTool'], isSelectable && styles$1t['HeaderWrapper-hasSelect'], loading && styles$1t['HeaderWrapper-disabled'], isSelectable && selectMode && styles$1t['HeaderWrapper-inSelectMode'], isSticky && styles$1t['HeaderWrapper-isSticky']);
      return /*#__PURE__*/React__default.createElement("div", {
        className: headerClassName
      }, _ref, headerWrapperOverlay, /*#__PURE__*/React__default.createElement("div", {
        className: styles$1t.HeaderContentWrapper
      }, headerTitleMarkup, checkableButtonMarkup, alternateToolMarkup, sortingSelectMarkup, selectButtonMarkup), bulkActionsMarkup);
    }));
    const emptySearchStateMarkup = showEmptySearchState ? emptySearchState || /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.EmptySearchResultWrapper
    }, /*#__PURE__*/React__default.createElement(EmptySearchResult, Object.assign({}, emptySearchResultText, {
      withIllustration: true
    }))) : null;
    const emptyStateMarkup = showEmptyState ? emptyState : null;
    const defaultTopPadding = 8;
    const topPadding = loadingPosition > 0 ? loadingPosition : defaultTopPadding;
    const spinnerStyle = {
      paddingTop: `${topPadding}px`
    };
    const spinnerSize = items.length < 2 ? 'small' : 'large';
    const loadingOverlay = loading ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
      className: styles$1t.SpinnerContainer,
      style: spinnerStyle
    }, /*#__PURE__*/React__default.createElement(Spinner, {
      size: spinnerSize,
      accessibilityLabel: "Items are loading"
    })), /*#__PURE__*/React__default.createElement("li", {
      className: styles$1t.LoadingOverlay
    })) : null;
    const className = classNames(styles$1t.ItemWrapper, loading && styles$1t['ItemWrapper-isLoading']);
    const loadingWithoutItemsMarkup = loading && !itemsExist ? /*#__PURE__*/React__default.createElement("div", {
      className: className,
      tabIndex: -1
    }, loadingOverlay) : null;
    const resourceListClassName = classNames(styles$1t.ResourceList, loading && styles$1t.disabledPointerEvents, selectMode && styles$1t.disableTextSelection);
    const listMarkup = itemsExist ? /*#__PURE__*/React__default.createElement("ul", {
      className: resourceListClassName,
      ref: listRef,
      "aria-live": "polite",
      "aria-busy": loading
    }, loadingOverlay, React.Children.toArray(items.map(renderItemWithId))) : null;
    const context = {
      selectable: isSelectable,
      selectedItems,
      selectMode,
      resourceName,
      loading,
      onSelectionChange: handleSelectionChange,
      registerCheckableButtons: handleCheckableButtonRegistration
    };
    return /*#__PURE__*/React__default.createElement(ResourceListContext.Provider, {
      value: context
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1t.ResourceListWrapper
    }, filterControlMarkup, headerMarkup, listMarkup, emptySearchStateMarkup, emptyStateMarkup, loadingWithoutItemsMarkup));
  };
  ResourceList.Item = ResourceItem;
  
  function SettingToggle({
    enabled,
    action,
    children
  }) {
    const actionMarkup = action ? buttonFrom(action, {
      primary: !enabled
    }) : null;
    return /*#__PURE__*/React__default.createElement(Card, {
      sectioned: true
    }, /*#__PURE__*/React__default.createElement(SettingAction, {
      action: actionMarkup
    }, children));
  }
  
  var styles$1w = {
    "SkeletonBodyTextContainer": "Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
    "SkeletonBodyText": "Polaris-SkeletonBodyText"
  };
  
  function SkeletonBodyText({
    lines = 3
  }) {
    const bodyTextLines = [];
  
    for (let i = 0; i < lines; i++) {
      bodyTextLines.push( /*#__PURE__*/React__default.createElement("div", {
        className: styles$1w.SkeletonBodyText,
        key: i
      }));
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1w.SkeletonBodyTextContainer
    }, bodyTextLines);
  }
  
  var styles$1x = {
    "DisplayText": "Polaris-SkeletonDisplayText__DisplayText",
    "sizeSmall": "Polaris-SkeletonDisplayText--sizeSmall",
    "sizeMedium": "Polaris-SkeletonDisplayText--sizeMedium",
    "sizeLarge": "Polaris-SkeletonDisplayText--sizeLarge",
    "sizeExtraLarge": "Polaris-SkeletonDisplayText--sizeExtraLarge"
  };
  
  function SkeletonDisplayText({
    size = 'medium'
  }) {
    const className = classNames(styles$1x.DisplayText, size && styles$1x[variationName('size', size)]);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    });
  }
  
  var styles$1y = {
    "Page": "Polaris-SkeletonPage__Page",
    "fullWidth": "Polaris-SkeletonPage--fullWidth",
    "narrowWidth": "Polaris-SkeletonPage--narrowWidth",
    "Content": "Polaris-SkeletonPage__Content",
    "newDesignLanguage": "Polaris-SkeletonPage--newDesignLanguage",
    "Header": "Polaris-SkeletonPage__Header",
    "Header-hasSecondaryActions": "Polaris-SkeletonPage__Header--hasSecondaryActions",
    "BreadcrumbAction": "Polaris-SkeletonPage__BreadcrumbAction",
    "TitleAndPrimaryAction": "Polaris-SkeletonPage__TitleAndPrimaryAction",
    "Title": "Polaris-SkeletonPage__Title",
    "newDesignLanguageTitle": "Polaris-SkeletonPage--newDesignLanguageTitle",
    "newDesignLanguageSkeletonTitle": "Polaris-SkeletonPage--newDesignLanguageSkeletonTitle",
    "PrimaryAction": "Polaris-SkeletonPage__PrimaryAction",
    "Actions": "Polaris-SkeletonPage__Actions",
    "Action": "Polaris-SkeletonPage__Action"
  };
  
  var _ref$p = /*#__PURE__*/React__default.createElement(SkeletonDisplayText, {
    size: "large"
  });
  
  var _ref2$7 = /*#__PURE__*/React__default.createElement(SkeletonBodyText, {
    lines: 1
  });
  
  function SkeletonPage({
    children,
    fullWidth,
    narrowWidth,
    primaryAction,
    secondaryActions,
    title = '',
    breadcrumbs
  }) {
    const i18n = useI18n();
    const {
      newDesignLanguage
    } = useFeatures();
    const className = classNames(styles$1y.Page, fullWidth && styles$1y.fullWidth, narrowWidth && styles$1y.narrowWidth, newDesignLanguage && styles$1y.newDesignLanguage);
    const headerClassName = classNames(styles$1y.Header, breadcrumbs && styles$1y['Header-hasBreadcrumbs'], secondaryActions && styles$1y['Header-hasSecondaryActions']);
    const titleMarkup = /*#__PURE__*/React__default.createElement("div", {
      className: styles$1y.Title
    }, /*#__PURE__*/React__default.createElement(SkeletonPageTitle, {
      title: title,
      newDesignLanguage: newDesignLanguage
    }));
    const primaryActionMarkup = primaryAction ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1y.PrimaryAction
    }, _ref$p) : null;
    const secondaryActionsMarkup = secondaryActions ? renderSecondaryActions(secondaryActions) : null;
    const breadcrumbMarkup = breadcrumbs ? /*#__PURE__*/React__default.createElement("div", {
      className: styles$1y.BreadcrumbAction,
      style: {
        width: 60
      }
    }, _ref2$7) : null;
    return /*#__PURE__*/React__default.createElement("div", {
      className: className,
      role: "status",
      "aria-label": i18n.translate('Polaris.SkeletonPage.loadingLabel')
    }, /*#__PURE__*/React__default.createElement("div", {
      className: headerClassName
    }, breadcrumbMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1y.TitleAndPrimaryAction
    }, titleMarkup, primaryActionMarkup), secondaryActionsMarkup), /*#__PURE__*/React__default.createElement("div", {
      className: styles$1y.Content
    }, children));
  }
  
  var _ref3$2 = /*#__PURE__*/React__default.createElement(SkeletonBodyText, {
    lines: 1
  });
  
  function renderSecondaryActions(actionCount) {
    const actions = [];
  
    for (let i = 0; i < actionCount; i++) {
      const width = Math.round(Math.random() * 40 + 60);
      actions.push( /*#__PURE__*/React__default.createElement("div", {
        className: styles$1y.Action,
        style: {
          width
        },
        key: i
      }, _ref3$2));
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1y.Actions
    }, actions);
  }
  
  var _ref4$1 = /*#__PURE__*/React__default.createElement(SkeletonDisplayText, {
    size: "large"
  });
  
  function SkeletonPageTitle({
    title = '',
    newDesignLanguage = false
  }) {
    if (title) {
      return newDesignLanguage ? /*#__PURE__*/React__default.createElement("h1", {
        className: styles$1y.newDesignLanguageTitle
      }, title) : /*#__PURE__*/React__default.createElement(DisplayText, {
        size: "large",
        element: "h1"
      }, /*#__PURE__*/React__default.createElement(TextStyle, {
        variation: "strong"
      }, title));
    }
  
    if (newDesignLanguage) {
      return /*#__PURE__*/React__default.createElement("div", {
        className: styles$1y.newDesignLanguageSkeletonTitle
      });
    }
  
    return _ref4$1;
  }
  
  var styles$1z = {
    "SkeletonThumbnail": "Polaris-SkeletonThumbnail",
    "sizeSmall": "Polaris-SkeletonThumbnail--sizeSmall",
    "sizeMedium": "Polaris-SkeletonThumbnail--sizeMedium",
    "sizeLarge": "Polaris-SkeletonThumbnail--sizeLarge"
  };
  
  function SkeletonThumbnail({
    size = 'medium'
  }) {
    const className = classNames(styles$1z.SkeletonThumbnail, size && styles$1z[variationName('size', size)]);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    });
  }
  
  function getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth) {
    const sumTabWidths = tabWidths.reduce((sum, width) => sum + width, 0);
    const arrayOfTabIndices = tabs.map((_, index) => {
      return index;
    });
    const visibleTabs = [];
    const hiddenTabs = [];
  
    if (containerWidth > sumTabWidths) {
      visibleTabs.push(...arrayOfTabIndices);
    } else {
      visibleTabs.push(selected);
      let tabListWidth = tabWidths[selected];
      arrayOfTabIndices.forEach(currentTabIndex => {
        if (currentTabIndex !== selected) {
          const currentTabWidth = tabWidths[currentTabIndex];
  
          if (tabListWidth + currentTabWidth > containerWidth - disclosureWidth) {
            hiddenTabs.push(currentTabIndex);
            return;
          }
  
          visibleTabs.push(currentTabIndex);
          tabListWidth += currentTabWidth;
        }
      });
    }
  
    return {
      visibleTabs,
      hiddenTabs
    };
  }
  
  var styles$1A = {
    "Tabs": "Polaris-Tabs",
    "Wrapper": "Polaris-Tabs__Wrapper",
    "newDesignLanguage": "Polaris-Tabs--newDesignLanguage",
    "fitted": "Polaris-Tabs--fitted",
    "TabContainer": "Polaris-Tabs__TabContainer",
    "Tab": "Polaris-Tabs__Tab",
    "Title": "Polaris-Tabs__Title",
    "fillSpace": "Polaris-Tabs--fillSpace",
    "Tab-selected": "Polaris-Tabs__Tab--selected",
    "titleWithIcon": "Polaris-Tabs--titleWithIcon",
    "Panel": "Polaris-Tabs__Panel",
    "Panel-hidden": "Polaris-Tabs__Panel--hidden",
    "List": "Polaris-Tabs__List",
    "Item": "Polaris-Tabs__Item",
    "DisclosureTab": "Polaris-Tabs__DisclosureTab",
    "DisclosureTab-visible": "Polaris-Tabs__DisclosureTab--visible",
    "DisclosureActivator": "Polaris-Tabs__DisclosureActivator",
    "TabMeasurer": "Polaris-Tabs__TabMeasurer"
  };
  
  class Item$8 extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.context = void 0;
      this.focusedNode = null;
  
      this.setFocusedNode = node => {
        this.focusedNode = node;
      };
    }
  
    componentDidMount() {
      const {
        focusedNode
      } = this;
      const {
        focused
      } = this.props;
  
      if (focusedNode && focusedNode instanceof HTMLElement && focused) {
        focusedNode.focus();
      }
    }
  
    componentDidUpdate() {
      const {
        focusedNode
      } = this;
      const {
        focused
      } = this.props;
  
      if (focusedNode && focusedNode instanceof HTMLElement && focused) {
        focusedNode.focus();
      }
    }
  
    render() {
      const {
        id,
        panelID,
        children,
        url,
        accessibilityLabel,
        onClick = noop$b
      } = this.props;
      const {
        newDesignLanguage
      } = this.context || {};
      const classname = classNames(styles$1A.Item, newDesignLanguage && styles$1A.newDesignLanguage);
      const sharedProps = {
        id,
        ref: this.setFocusedNode,
        onClick,
        className: classname,
        'aria-controls': panelID,
        'aria-selected': false,
        'aria-label': accessibilityLabel
      };
      const markup = url ? /*#__PURE__*/React__default.createElement(UnstyledLink, Object.assign({}, sharedProps, {
        url: url
      }), children) : /*#__PURE__*/React__default.createElement("button", Object.assign({}, sharedProps, {
        type: "button"
      }), children);
      return /*#__PURE__*/React__default.createElement("li", null, markup);
    }
  
  }
  Item$8.contextType = FeaturesContext;
  
  function noop$b() {}
  
  class List$1 extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.context = void 0;
  
      this.handleKeypress = event => {
        const {
          onKeyPress = noop$c
        } = this.props;
        onKeyPress(event);
      };
    }
  
    render() {
      const {
        newDesignLanguage
      } = this.context || {};
      const {
        focusIndex,
        disclosureTabs,
        onClick = noop$c
      } = this.props;
      const tabs = disclosureTabs.map((_ref, index) => {
        let {
          id,
          content
        } = _ref,
            tabProps = _objectWithoutProperties(_ref, ["id", "content"]);
  
        return /*#__PURE__*/React__default.createElement(Item$8, Object.assign({}, tabProps, {
          key: id,
          id: id,
          focused: index === focusIndex,
          onClick: onClick.bind(null, id)
        }), content);
      });
      const classname = classNames(styles$1A.List, newDesignLanguage && styles$1A.newDesignLanguage);
      return /*#__PURE__*/React__default.createElement("ul", {
        className: classname,
        onKeyDown: handleKeyDown$1,
        onKeyUp: this.handleKeypress
      }, tabs);
    }
  
  }
  List$1.contextType = FeaturesContext;
  
  function noop$c() {}
  
  function handleKeyDown$1(event) {
    const {
      key
    } = event;
  
    if (key === 'ArrowLeft' || key === 'ArrowRight') {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  function Panel({
    hidden,
    id,
    tabID,
    children
  }) {
    const className = classNames(styles$1A.Panel, hidden && styles$1A['Panel-hidden']);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className,
      id: id,
      role: "tabpanel",
      "aria-labelledby": tabID,
      tabIndex: -1
    }, children);
  }
  
  function Tab({
    id,
    focused,
    siblingTabHasFocus,
    children,
    onClick,
    selected,
    url,
    panelID,
    measuring,
    accessibilityLabel
  }) {
    const wasSelected = React.useRef(selected);
    const panelFocused = React.useRef(false);
    const node = React.useRef(null);
    const {
      newDesignLanguage
    } = useFeatures(); // A tab can start selected when it is moved from the disclosure dropdown
    // into the main list, so we need to send focus from the tab to the panel
    // on mount and update
  
    React.useEffect(() => {
      if (measuring) {
        return;
      } // Because of timing issues with the render, we may still have the old,
      // in-disclosure version of the tab that has focus. Check for this
      // as a second indicator of focus
  
  
      const itemHadFocus = focused || document.activeElement && document.activeElement.id === id; // If we just check for selected, the panel for the active tab will
      // be focused on page load, which we don’t want
  
      if (itemHadFocus && selected && panelID != null && !panelFocused.current) {
        focusPanelID(panelID);
        panelFocused.current = true;
      }
  
      if (selected && !wasSelected.current && panelID != null) {
        focusPanelID(panelID);
      } else if (focused && node.current != null) {
        focusFirstFocusableNode(node.current);
      }
  
      wasSelected.current = selected;
    }, [focused, id, measuring, panelID, selected]);
    const handleClick = onClick && onClick.bind(null, id);
    const className = classNames(styles$1A.Tab, selected && styles$1A['Tab-selected']);
    let tabIndex;
  
    if (selected && !siblingTabHasFocus && !measuring) {
      tabIndex = 0;
    } else if (focused && !measuring) {
      tabIndex = 0;
    } else {
      tabIndex = -1;
    }
  
    const tabContainerClassNames = classNames(styles$1A.TabContainer, selected && styles$1A.Underline, newDesignLanguage && styles$1A.newDesignLanguage);
    const tabTitleClassNames = classNames(styles$1A.Title, newDesignLanguage && styles$1A.newDesignLanguage);
    const markup = url ? /*#__PURE__*/React__default.createElement(UnstyledLink, {
      id: id,
      url: url,
      role: "tab",
      tabIndex: tabIndex,
      onClick: handleClick,
      className: className,
      "aria-selected": selected,
      "aria-controls": panelID,
      "aria-label": accessibilityLabel,
      onMouseUp: handleMouseUpByBlurring
    }, /*#__PURE__*/React__default.createElement("span", {
      className: tabTitleClassNames
    }, children)) : /*#__PURE__*/React__default.createElement("button", {
      id: id,
      role: "tab",
      type: "button",
      tabIndex: tabIndex,
      className: className,
      onClick: handleClick,
      "aria-selected": selected,
      "aria-controls": panelID,
      "aria-label": accessibilityLabel,
      onMouseUp: handleMouseUpByBlurring
    }, /*#__PURE__*/React__default.createElement("span", {
      className: tabTitleClassNames
    }, children));
    return /*#__PURE__*/React__default.createElement("li", {
      className: tabContainerClassNames,
      ref: node,
      role: "presentation"
    }, markup);
  }
  
  function focusPanelID(panelID) {
    const panel = document.getElementById(panelID);
  
    if (panel) {
      panel.focus({
        preventScroll: true
      });
    }
  }
  
  const TabMeasurer = /*#__PURE__*/React.memo(function TabMeasurer({
    selected,
    tabs,
    activator,
    tabToFocus,
    siblingTabHasFocus,
    handleMeasurement: handleMeasurementProp
  }) {
    const containerNode = React.useRef(null);
    const animationFrame = React.useRef(null);
    const handleMeasurement = React.useCallback(() => {
      if (animationFrame.current) {
        cancelAnimationFrame(animationFrame.current);
      }
  
      animationFrame.current = requestAnimationFrame(() => {
        if (!containerNode.current) {
          return;
        }
  
        const containerWidth = containerNode.current.offsetWidth;
        const hiddenTabNodes = containerNode.current.children;
        const hiddenTabNodesArray = Array.from(hiddenTabNodes);
        const hiddenTabWidths = hiddenTabNodesArray.map(node => {
          return node.getBoundingClientRect().width;
        });
        const disclosureWidth = hiddenTabWidths.pop() || 0;
        handleMeasurementProp({
          containerWidth,
          disclosureWidth,
          hiddenTabWidths
        });
      });
    }, [handleMeasurementProp]);
    React.useEffect(() => {
      handleMeasurement();
    }, [handleMeasurement, tabs]);
    useComponentDidMount(() => {
      if (process.env.NODE_ENV === 'development') {
        setTimeout(handleMeasurement, 0);
      }
    });
    const tabsMarkup = tabs.map((tab, index) => {
      return /*#__PURE__*/React__default.createElement(Tab, {
        measuring: true,
        key: `${index}${tab.id}Hidden`,
        id: `${tab.id}Measurer`,
        siblingTabHasFocus: siblingTabHasFocus,
        focused: index === tabToFocus,
        selected: index === selected,
        onClick: noop$d,
        url: tab.url
      }, tab.content);
    });
    const classname = classNames(styles$1A.Tabs, styles$1A.TabMeasurer);
    return /*#__PURE__*/React__default.createElement("div", {
      className: classname,
      ref: containerNode
    }, /*#__PURE__*/React__default.createElement(EventListener, {
      event: "resize",
      handler: handleMeasurement
    }), tabsMarkup, activator);
  });
  
  function noop$d() {}
  
  var _ref$q = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CaretDownMinor,
    color: "inkLighter"
  });
  
  var _ref2$8 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.HorizontalDotsMinor
  });
  
  class TabsInner extends React.PureComponent {
    constructor(...args) {
      super(...args);
      this.state = {
        disclosureWidth: 0,
        containerWidth: Infinity,
        tabWidths: [],
        visibleTabs: [],
        hiddenTabs: [],
        showDisclosure: false,
        tabToFocus: -1
      };
  
      this.handleKeyPress = event => {
        const {
          tabToFocus,
          visibleTabs,
          hiddenTabs,
          showDisclosure
        } = this.state;
        const key = event.key;
        const tabsArrayInOrder = showDisclosure ? visibleTabs.concat(hiddenTabs) : [...visibleTabs];
        let newFocus = tabsArrayInOrder.indexOf(tabToFocus);
  
        if (key === 'ArrowRight') {
          newFocus += 1;
  
          if (newFocus === tabsArrayInOrder.length) {
            newFocus = 0;
          }
        }
  
        if (key === 'ArrowLeft') {
          if (newFocus === -1 || newFocus === 0) {
            newFocus = tabsArrayInOrder.length - 1;
          } else {
            newFocus -= 1;
          }
        }
  
        this.setState({
          tabToFocus: tabsArrayInOrder[newFocus]
        });
      };
  
      this.renderTabMarkup = (tab, index) => {
        const {
          selected,
          children
        } = this.props;
        const {
          tabToFocus
        } = this.state;
        const tabPanelID = tab.panelID || `${tab.id}-panel`;
        return /*#__PURE__*/React__default.createElement(Tab, {
          key: `${index}-${tab.id}`,
          id: tab.id,
          siblingTabHasFocus: tabToFocus > -1,
          focused: index === tabToFocus,
          selected: index === selected,
          onClick: this.handleTabClick,
          panelID: children ? tabPanelID : undefined,
          accessibilityLabel: tab.accessibilityLabel,
          url: tab.url
        }, tab.content);
      };
  
      this.handleFocus = event => {
        const {
          selected,
          tabs
        } = this.props; // If we are explicitly focusing a non-selected tab, this focuses it
  
        const target = event.target;
  
        if (target.classList.contains(styles$1A.Tab) || target.classList.contains(styles$1A.Item)) {
          let tabToFocus = -1;
          tabs.every((tab, index) => {
            if (tab.id === target.id) {
              tabToFocus = index;
              return false;
            }
  
            return true;
          });
          this.setState({
            tabToFocus
          });
          return;
        }
  
        if (target.classList.contains(styles$1A.DisclosureActivator)) {
          return;
        } // If we are coming in from somewhere other than another tab, focus the
        // selected tab, and the focus (click) is not on the disclosure activator,
        // focus the selected tab
  
  
        if (!event.relatedTarget) {
          this.setState({
            tabToFocus: selected
          });
          return;
        }
  
        const relatedTarget = event.relatedTarget;
  
        if (relatedTarget instanceof HTMLElement && !relatedTarget.classList.contains(styles$1A.Tab) && !relatedTarget.classList.contains(styles$1A.Item) && !relatedTarget.classList.contains(styles$1A.DisclosureActivator)) {
          this.setState({
            tabToFocus: selected
          });
        }
      };
  
      this.handleBlur = event => {
        // If we blur and the target is not another tab, forget the focus position
        if (event.relatedTarget == null) {
          this.setState({
            tabToFocus: -1
          });
          return;
        }
  
        const target = event.relatedTarget; // If we are going to anywhere other than another tab, lose the last focused tab
  
        if (target instanceof HTMLElement && !target.classList.contains(styles$1A.Tab) && !target.classList.contains(styles$1A.Item)) {
          this.setState({
            tabToFocus: -1
          });
        }
      };
  
      this.handleDisclosureActivatorClick = () => {
        this.setState(({
          showDisclosure
        }) => ({
          showDisclosure: !showDisclosure
        }));
      };
  
      this.handleClose = () => {
        this.setState({
          showDisclosure: false
        });
      };
  
      this.handleMeasurement = measurements => {
        const {
          tabs,
          selected
        } = this.props;
        const {
          tabToFocus
        } = this.state;
        const {
          hiddenTabWidths: tabWidths,
          containerWidth,
          disclosureWidth
        } = measurements;
        const {
          visibleTabs,
          hiddenTabs
        } = getVisibleAndHiddenTabIndices(tabs, selected, disclosureWidth, tabWidths, containerWidth);
        this.setState({
          tabToFocus: tabToFocus === -1 ? -1 : selected,
          visibleTabs,
          hiddenTabs,
          disclosureWidth,
          containerWidth,
          tabWidths
        });
      };
  
      this.handleTabClick = id => {
        const {
          tabs,
          onSelect = noop$e
        } = this.props;
        const tab = tabs.find(aTab => aTab.id === id);
  
        if (tab == null) {
          return;
        }
  
        const selectedIndex = tabs.indexOf(tab);
        onSelect(selectedIndex);
      };
    }
  
    static getDerivedStateFromProps(nextProps, prevState) {
      const {
        disclosureWidth,
        tabWidths,
        containerWidth
      } = prevState;
      const {
        visibleTabs,
        hiddenTabs
      } = getVisibleAndHiddenTabIndices(nextProps.tabs, nextProps.selected, disclosureWidth, tabWidths, containerWidth);
      return {
        visibleTabs,
        hiddenTabs,
        selected: nextProps.selected
      };
    }
  
    render() {
      const {
        tabs,
        selected,
        fitted,
        children,
        i18n,
        features,
        disclosureText
      } = this.props;
      const {
        tabToFocus,
        visibleTabs,
        hiddenTabs,
        showDisclosure
      } = this.state;
      const disclosureTabs = hiddenTabs.map(tabIndex => tabs[tabIndex]);
      const {
        newDesignLanguage
      } = features;
      const panelMarkup = children ? tabs.map((_tab, index) => {
        return selected === index ? /*#__PURE__*/React__default.createElement(Panel, {
          id: tabs[index].panelID || `${tabs[index].id}-panel`,
          tabID: tabs[index].id,
          key: tabs[index].id
        }, children) : /*#__PURE__*/React__default.createElement(Panel, {
          id: tabs[index].panelID || `${tabs[index].id}-panel`,
          tabID: tabs[index].id,
          key: tabs[index].id,
          hidden: true
        });
      }) : null;
      const tabsMarkup = visibleTabs.sort((tabA, tabB) => tabA - tabB).map(tabIndex => this.renderTabMarkup(tabs[tabIndex], tabIndex));
      const disclosureActivatorVisible = visibleTabs.length < tabs.length;
      const hasCustomDisclosure = Boolean(disclosureText);
      const classname = classNames(styles$1A.Tabs, fitted && styles$1A.fitted, disclosureActivatorVisible && styles$1A.fillSpace, newDesignLanguage && styles$1A.newDesignLanguage);
      const wrapperClassName = classNames(styles$1A.Wrapper, newDesignLanguage && styles$1A.newDesignLanguage);
      const disclosureTabClassName = classNames(styles$1A.DisclosureTab, disclosureActivatorVisible && styles$1A['DisclosureTab-visible']);
      const disclosureActivatorClassName = classNames(styles$1A.TabContainer, newDesignLanguage && styles$1A.newDesignLanguage);
      const disclosureButtonClassName = classNames(styles$1A.DisclosureActivator, hasCustomDisclosure && styles$1A.Tab);
      const disclosureButtonContentWrapperClassName = classNames(styles$1A.Title, hasCustomDisclosure && styles$1A.titleWithIcon);
      const disclosureButtonContent = hasCustomDisclosure ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, disclosureText, _ref$q) : _ref2$8;
      const disclosureButton = /*#__PURE__*/React__default.createElement("button", {
        type: "button",
        className: disclosureButtonClassName,
        onClick: this.handleDisclosureActivatorClick,
        "aria-label": i18n.translate('Polaris.Tabs.toggleTabsLabel')
      }, /*#__PURE__*/React__default.createElement("span", {
        className: disclosureButtonContentWrapperClassName
      }, disclosureButtonContent));
      const activator = disclosureText ? /*#__PURE__*/React__default.createElement("div", {
        className: disclosureActivatorClassName
      }, disclosureButton) : disclosureButton;
      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
        className: wrapperClassName
      }, /*#__PURE__*/React__default.createElement("ul", {
        role: "tablist",
        className: classname,
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        onKeyDown: handleKeyDown$2,
        onKeyUp: this.handleKeyPress
      }, tabsMarkup, /*#__PURE__*/React__default.createElement("li", {
        className: disclosureTabClassName,
        role: "presentation"
      }, /*#__PURE__*/React__default.createElement(Popover, {
        preferredPosition: "below",
        activator: activator,
        active: disclosureActivatorVisible && showDisclosure,
        onClose: this.handleClose,
        autofocusTarget: "first-node"
      }, /*#__PURE__*/React__default.createElement(List$1, {
        focusIndex: hiddenTabs.indexOf(tabToFocus),
        disclosureTabs: disclosureTabs,
        onClick: this.handleTabClick,
        onKeyPress: this.handleKeyPress
      })))), /*#__PURE__*/React__default.createElement(TabMeasurer, {
        tabToFocus: tabToFocus,
        activator: activator,
        selected: selected,
        tabs: tabs,
        siblingTabHasFocus: tabToFocus > -1,
        handleMeasurement: this.handleMeasurement
      })), panelMarkup);
    }
  
  }
  
  function noop$e() {}
  
  function handleKeyDown$2(event) {
    const {
      key
    } = event;
  
    if (key === 'ArrowLeft' || key === 'ArrowRight') {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  function Tabs(props) {
    const i18n = useI18n();
    const features = useFeatures();
    return /*#__PURE__*/React__default.createElement(TabsInner, Object.assign({}, props, {
      i18n: i18n,
      features: features
    }));
  }
  
  var styles$1B = {
    "Thumbnail": "Polaris-Thumbnail",
    "sizeSmall": "Polaris-Thumbnail--sizeSmall",
    "sizeMedium": "Polaris-Thumbnail--sizeMedium",
    "sizeLarge": "Polaris-Thumbnail--sizeLarge"
  };
  
  function Thumbnail({
    source,
    alt,
    size = 'medium'
  }) {
    const className = classNames(styles$1B.Thumbnail, size && styles$1B[variationName('size', size)]);
    const content = typeof source === 'string' ? /*#__PURE__*/React__default.createElement(Image, {
      alt: alt,
      source: source
    }) : /*#__PURE__*/React__default.createElement(Icon, {
      accessibilityLabel: alt,
      source: source
    });
    return /*#__PURE__*/React__default.createElement("span", {
      className: className
    }, content);
  }
  
  // that the interface defining the props is defined in this file, not imported
  // from elsewhere. This silly workaround ensures that the Props Explorer table
  // is generated correctly.
  
  const Toast$1 = /*#__PURE__*/React.memo(function Toast(props) {
    const id = useUniqueId('Toast');
    const {
      showToast,
      hideToast
    } = useFrame();
    useDeepEffect(() => {
      showToast(_objectSpread2({
        id
      }, props));
      return () => {
        hideToast({
          id
        });
      };
    }, [props]);
    return null;
  });
  
  var styles$1C = {
    "SearchDismissOverlay": "Polaris-TopBar-SearchDismissOverlay",
    "newDesignLanguage": "Polaris-TopBar-SearchDismissOverlay--newDesignLanguage",
    "visible": "Polaris-TopBar-SearchDismissOverlay--visible",
    "fade-in": "Polaris-TopBar-SearchDismissOverlay__fade--in"
  };
  
  var _ref$r = /*#__PURE__*/React__default.createElement(ScrollLock$1, null);
  
  function SearchDismissOverlay({
    onDismiss,
    visible
  }) {
    const node = React.useRef(null);
    const {
      newDesignLanguage
    } = useFeatures();
    const handleDismiss = React.useCallback(({
      target
    }) => {
      if (target === node.current && onDismiss != null) {
        onDismiss();
      }
    }, [onDismiss]);
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, visible ? _ref$r : null, /*#__PURE__*/React__default.createElement("div", {
      ref: node,
      className: classNames(styles$1C.SearchDismissOverlay, visible && styles$1C.visible, newDesignLanguage && styles$1C.newDesignLanguage),
      onClick: handleDismiss
    }));
  }
  
  var styles$1D = {
    "Search": "Polaris-TopBar-Search",
    "newDesignLanguage": "Polaris-TopBar-Search--newDesignLanguage",
    "SearchContent": "Polaris-TopBar-Search__SearchContent",
    "visible": "Polaris-TopBar-Search--visible",
    "Results": "Polaris-TopBar-Search__Results"
  };
  
  function Search({
    visible,
    children,
    onDismiss,
    overlayVisible = false
  }) {
    const {
      newDesignLanguage
    } = useFeatures();
  
    if (children == null) {
      return null;
    }
  
    const overlayMarkup = visible ? /*#__PURE__*/React__default.createElement(SearchDismissOverlay, {
      onDismiss: onDismiss,
      visible: overlayVisible
    }) : null;
    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, overlayMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: classNames(styles$1D.Search, visible && styles$1D.visible, newDesignLanguage && styles$1D.newDesignLanguage)
    }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
      theme: {
        colorScheme: 'dark'
      }
    }, /*#__PURE__*/React__default.createElement("div", {
      className: classNames(styles$1D.SearchContent, newDesignLanguage && styles$1D.newDesignLanguage)
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1D.Results
    }, children)))));
  }
  
  var styles$1E = {
    "SearchField": "Polaris-TopBar-SearchField",
    "SearchField-newDesignLanguage": "Polaris-TopBar-SearchField__SearchField--newDesignLanguage",
    "Backdrop": "Polaris-TopBar-SearchField__Backdrop",
    "Input": "Polaris-TopBar-SearchField__Input",
    "focused": "Polaris-TopBar-SearchField--focused",
    "BackdropShowFocusBorder": "Polaris-TopBar-SearchField__BackdropShowFocusBorder",
    "Icon": "Polaris-TopBar-SearchField__Icon",
    "Clear": "Polaris-TopBar-SearchField__Clear",
    "toLightBackground": "Polaris-TopBar-SearchField--toLightBackground"
  };
  
  var _ref$s = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.CircleCancelMinor
  });
  
  var _ref2$9 = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.SearchMinor
  });
  
  function SearchField({
    value,
    focused,
    active,
    placeholder,
    onChange,
    onFocus,
    onBlur,
    onCancel,
    showFocusBorder
  }) {
    const i18n = useI18n();
    const [forceActive, setForceActive] = React.useState(false);
    const {
      newDesignLanguage
    } = useFeatures();
    const input = React.useRef(null);
    const searchId = useUniqueId('SearchField');
    const handleChange = React.useCallback(({
      currentTarget
    }) => {
      onChange(currentTarget.value);
    }, [onChange]);
    const handleFocus = React.useCallback(() => onFocus && onFocus(), [onFocus]);
    const handleBlur = React.useCallback(() => onBlur && onBlur(), [onBlur]);
    const handleClear = React.useCallback(() => {
      onCancel && onCancel();
  
      if (!input.current) {
        return;
      }
  
      input.current.value = '';
      onChange('');
      input.current.focus();
    }, [onCancel, onChange]);
    React.useEffect(() => {
      if (!input.current) {
        return;
      }
  
      if (focused) {
        input.current.focus();
      } else {
        input.current.blur();
      }
    }, [focused]);
    const clearMarkup = value !== '' && /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      "aria-label": i18n.translate('Polaris.TopBar.SearchField.clearButtonLabel'),
      className: styles$1E.Clear,
      onClick: handleClear,
      onBlur: () => {
        setForceActive(false);
        handleClear();
      },
      onFocus: () => {
        handleFocus();
        setForceActive(true);
      }
    }, _ref$s);
    const className = classNames(styles$1E.SearchField, (focused || active || forceActive) && styles$1E.focused, newDesignLanguage && styles$1E['SearchField-newDesignLanguage']);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className,
      onFocus: handleFocus,
      onBlur: handleBlur
    }, /*#__PURE__*/React__default.createElement(VisuallyHidden, null, /*#__PURE__*/React__default.createElement("label", {
      htmlFor: searchId
    }, i18n.translate('Polaris.TopBar.SearchField.search'))), /*#__PURE__*/React__default.createElement("input", {
      id: searchId,
      className: styles$1E.Input,
      placeholder: placeholder,
      type: "search",
      autoCapitalize: "off",
      autoComplete: "off",
      autoCorrect: "off",
      ref: input,
      value: value,
      onChange: handleChange,
      onKeyDown: preventDefault
    }), /*#__PURE__*/React__default.createElement("span", {
      className: styles$1E.Icon
    }, _ref2$9), clearMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: classNames(styles$1E.Backdrop, showFocusBorder && styles$1E.BackdropShowFocusBorder)
    }));
  }
  
  function preventDefault(event) {
    if (event.key === 'Enter') {
      event.preventDefault();
    }
  }
  
  var styles$1F = {
    "MessageIndicatorWrapper": "Polaris-MessageIndicator__MessageIndicatorWrapper",
    "MessageIndicator": "Polaris-MessageIndicator"
  };
  
  function MessageIndicator({
    children,
    active
  }) {
    const indicatorMarkup = active && /*#__PURE__*/React__default.createElement("div", {
      className: styles$1F.MessageIndicator
    });
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1F.MessageIndicatorWrapper
    }, indicatorMarkup, children);
  }
  
  var styles$1G = {
    "Section": "Polaris-Menu-Message__Section"
  };
  
  function Message({
    title,
    description,
    action,
    link,
    badge
  }) {
    const badgeMarkup = badge && /*#__PURE__*/React__default.createElement(Badge, {
      status: badge.status
    }, badge.content);
    const {
      to,
      content: linkContent
    } = link;
    const {
      onClick,
      content: actionContent
    } = action;
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1G.Section
    }, /*#__PURE__*/React__default.createElement(Popover.Section, null, /*#__PURE__*/React__default.createElement(Stack, {
      vertical: true,
      spacing: "tight"
    }, /*#__PURE__*/React__default.createElement(TextContainer, null, /*#__PURE__*/React__default.createElement(Heading, null, title, badgeMarkup), /*#__PURE__*/React__default.createElement("p", null, description)), /*#__PURE__*/React__default.createElement(Link, {
      url: to
    }, linkContent), /*#__PURE__*/React__default.createElement(Button, {
      plain: true,
      onClick: onClick
    }, actionContent))));
  }
  
  var styles$1H = {
    "ActivatorWrapper": "Polaris-TopBar-Menu__ActivatorWrapper",
    "Activator": "Polaris-TopBar-Menu__Activator",
    "Section": "Polaris-TopBar-Menu__Section"
  };
  
  function Menu(props) {
    const {
      actions,
      onOpen,
      onClose,
      open,
      activatorContent,
      message,
      colorScheme,
      accessibilityLabel
    } = props;
    const badgeProps = message && message.badge && {
      content: message.badge.content,
      status: message.badge.status
    };
    const messageMarkup = message && /*#__PURE__*/React__default.createElement(Message, {
      title: message.title,
      description: message.description,
      action: {
        onClick: message.action.onClick,
        content: message.action.content
      },
      link: {
        to: message.link.to,
        content: message.link.content
      },
      badge: badgeProps
    });
    const isFullHeight = Boolean(message);
    return /*#__PURE__*/React__default.createElement(Popover, {
      activator: /*#__PURE__*/React__default.createElement("div", {
        className: styles$1H.ActivatorWrapper
      }, /*#__PURE__*/React__default.createElement("button", {
        type: "button",
        className: styles$1H.Activator,
        onClick: onOpen,
        "aria-label": accessibilityLabel
      }, activatorContent)),
      active: open,
      onClose: onClose,
      fixed: true,
      fullHeight: isFullHeight,
      preferredAlignment: "right",
      colorScheme: colorScheme
    }, /*#__PURE__*/React__default.createElement(ActionList, {
      onActionAnyItem: onClose,
      sections: actions
    }), messageMarkup);
  }
  
  var styles$1I = {
    "Details": "Polaris-TopBar-UserMenu__Details",
    "Name": "Polaris-TopBar-UserMenu__Name",
    "Detail": "Polaris-TopBar-UserMenu__Detail"
  };
  
  function UserMenu({
    name,
    detail,
    avatar,
    initials,
    actions,
    message,
    onToggle,
    open,
    colorScheme,
    accessibilityLabel
  }) {
    const showIndicator = Boolean(message);
    const activatorContentMarkup = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageIndicator, {
      active: showIndicator
    }, /*#__PURE__*/React__default.createElement(Avatar, {
      size: "small",
      source: avatar,
      initials: initials && initials.replace(' ', '')
    })), /*#__PURE__*/React__default.createElement("span", {
      className: styles$1I.Details
    }, /*#__PURE__*/React__default.createElement("p", {
      className: styles$1I.Name
    }, name), /*#__PURE__*/React__default.createElement("p", {
      className: styles$1I.Detail
    }, detail)));
    return /*#__PURE__*/React__default.createElement(Menu, {
      activatorContent: activatorContentMarkup,
      open: open,
      onOpen: onToggle,
      onClose: onToggle,
      actions: actions,
      message: message,
      colorScheme: colorScheme,
      accessibilityLabel: accessibilityLabel
    });
  }
  
  var styles$1J = {
    "TopBar": "Polaris-TopBar",
    "TopBar-newDesignLanguage": "Polaris-TopBar__TopBar--newDesignLanguage",
    "LogoDisplayControl": "Polaris-TopBar__LogoDisplayControl",
    "LogoDisplayContainer": "Polaris-TopBar__LogoDisplayContainer",
    "LogoContainer": "Polaris-TopBar__LogoContainer",
    "Logo": "Polaris-TopBar__Logo",
    "LogoLink": "Polaris-TopBar__LogoLink",
    "ContextControl": "Polaris-TopBar__ContextControl",
    "NavigationIcon": "Polaris-TopBar__NavigationIcon",
    "focused": "Polaris-TopBar--focused",
    "Contents": "Polaris-TopBar__Contents",
    "SearchField": "Polaris-TopBar__SearchField",
    "SecondaryMenu": "Polaris-TopBar__SecondaryMenu"
  };
  
  var _ref$t = /*#__PURE__*/React__default.createElement(Icon, {
    source: polarisIcons.MobileHamburgerMajor
  });
  
  // TypeScript can't generate types that correctly infer the typing of
  // subcomponents so explicitly state the subcomponents in the type definition.
  // Letting this be implicit works in this project but fails in projects that use
  // generated *.d.ts files.
  const TopBar = function TopBar({
    showNavigationToggle,
    userMenu,
    searchResults,
    searchField,
    secondaryMenu,
    searchResultsVisible,
    searchResultsOverlayVisible = false,
    onNavigationToggle,
    onSearchResultsDismiss,
    contextControl
  }) {
    const i18n = useI18n();
    const {
      logo
    } = useTheme();
    const {
      newDesignLanguage
    } = useFeatures();
    const {
      value: focused,
      setTrue: forceTrueFocused,
      setFalse: forceFalseFocused
    } = useToggle(false);
    const iconClassName = classNames(styles$1J.NavigationIcon, focused && styles$1J.focused);
    const navigationButtonMarkup = showNavigationToggle ? /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      className: iconClassName,
      onClick: onNavigationToggle,
      onFocus: forceTrueFocused,
      onBlur: forceFalseFocused,
      "aria-label": i18n.translate('Polaris.TopBar.toggleMenuLabel')
    }, _ref$t) : null;
    const width = getWidth(logo, 104);
    let contextMarkup;
  
    if (contextControl) {
      contextMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: styles$1J.ContextControl
      }, contextControl);
    } else if (logo) {
      const _className = classNames(styles$1J.LogoContainer, showNavigationToggle || searchField ? styles$1J.LogoDisplayControl : styles$1J.LogoDisplayContainer);
  
      contextMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: _className
      }, /*#__PURE__*/React__default.createElement(UnstyledLink, {
        url: logo.url || '',
        className: styles$1J.LogoLink,
        style: {
          width
        }
      }, /*#__PURE__*/React__default.createElement(Image, {
        source: logo.topBarSource || '',
        alt: logo.accessibilityLabel || '',
        className: styles$1J.Logo,
        style: {
          width
        }
      })));
    }
  
    const searchMarkup = searchField ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchField, /*#__PURE__*/React__default.createElement(Search, {
      visible: searchResultsVisible,
      onDismiss: onSearchResultsDismiss,
      overlayVisible: searchResultsOverlayVisible
    }, searchResults)) : null;
    const className = classNames(styles$1J.TopBar, newDesignLanguage && styles$1J['TopBar-newDesignLanguage']);
    return /*#__PURE__*/React__default.createElement("div", {
      className: className
    }, navigationButtonMarkup, contextMarkup, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1J.Contents
    }, /*#__PURE__*/React__default.createElement("div", {
      className: styles$1J.SearchField
    }, searchMarkup), /*#__PURE__*/React__default.createElement("div", {
      className: styles$1J.SecondaryMenu
    }, secondaryMenu), userMenu));
  };
  TopBar.Menu = Menu;
  TopBar.SearchField = SearchField;
  TopBar.UserMenu = UserMenu;
  
  const MINUTE = 60;
  const HOUR = MINUTE * 60;
  function ensureTwoDigits(num) {
    return num > 9 ? String(num) : `0${num}`;
  }
  function secondsToTimeComponents(seconds) {
    return {
      hours: Math.floor(seconds / HOUR),
      minutes: Math.floor(seconds % HOUR / MINUTE),
      seconds: seconds % MINUTE
    };
  }
  function secondsToTimestamp(numSeconds) {
    const {
      hours,
      minutes,
      seconds
    } = secondsToTimeComponents(numSeconds);
    const hasHours = numSeconds > HOUR;
    const hoursText = hasHours ? `${hours}:` : '';
    const minutesText = `${hasHours ? ensureTwoDigits(minutes) : minutes}:`;
    const secondsText = `${ensureTwoDigits(seconds)}`;
    return `${hoursText}${minutesText}${secondsText}`;
  }
  function secondsToDurationTranslationKey(numSeconds) {
    const {
      hours,
      minutes,
      seconds
    } = secondsToTimeComponents(numSeconds);
    let durationKey = 'Polaris.VideoThumbnail.playButtonA11yLabel.duration';
  
    if (hours) {
      durationKey += `.hours.${hours > 1 ? 'other' : 'one'}`;
  
      if (seconds) {
        if (minutes > 1) {
          durationKey += `${seconds > 1 ? '.minutesAndSeconds' : '.minutesAndSecond'}`;
        } else if (minutes === 1) {
          durationKey += `${seconds > 1 ? '.minuteAndSeconds' : '.minuteAndSecond'}`;
        } else {
          durationKey += `${seconds > 1 ? '.andSeconds' : '.andSecond'}`;
        }
      } else if (minutes) {
        durationKey += `${minutes > 1 ? '.andMinutes' : '.andMinute'}`;
      } else {
        durationKey += '.only';
      }
    } else if (minutes) {
      durationKey += `.minutes.${minutes > 1 ? 'other' : 'one'}`;
  
      if (seconds) {
        durationKey += `${seconds > 1 ? '.andSeconds' : '.andSecond'}`;
      } else {
        durationKey += '.only';
      }
    } else if (seconds) {
      durationKey += seconds > 1 ? '.seconds.other' : '.seconds.one';
    }
  
    return durationKey;
  }
  
  const img$2 = "data:image/svg+xml,%3csvg viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='white'/%3e%3cpath d='M19 1C9.06 1 1 9.057 1 19c0 9.94 8.057 18 18 18 9.94 0 18-8.057 18-18 0-9.94-8.057-18-18-18z' fill='none' stroke='%23b5b5b5'/%3e%3cpath d='M15 11.723c0-.605.7-.942 1.173-.564l10.93 7.215a.72.72 0 010 1.128l-10.93 7.216A.723.723 0 0115 26.153v-14.43z' fill-opacity='.557'/%3e%3c/svg%3e";
  
  var styles$1K = {
    "Thumbnail": "Polaris-VideoThumbnail__Thumbnail",
    "WithPlayer": "Polaris-VideoThumbnail__WithPlayer",
    "PlayButton": "Polaris-VideoThumbnail__PlayButton",
    "PlayIcon": "Polaris-VideoThumbnail__PlayIcon",
    "Timestamp": "Polaris-VideoThumbnail__Timestamp",
    "withProgress": "Polaris-VideoThumbnail--withProgress",
    "Progress": "Polaris-VideoThumbnail__Progress",
    "Indicator": "Polaris-VideoThumbnail__Indicator",
    "ProgressBar": "Polaris-VideoThumbnail__ProgressBar",
    "Label": "Polaris-VideoThumbnail__Label"
  };
  
  function VideoThumbnail({
    thumbnailUrl,
    videoLength = 0,
    videoProgress = 0,
    showVideoProgress = false,
    accessibilityLabel,
    onClick,
    onBeforeStartPlaying
  }) {
    const i18n = useI18n();
    let buttonLabel;
  
    if (accessibilityLabel) {
      buttonLabel = accessibilityLabel;
    } else if (videoLength) {
      const {
        hours,
        minutes,
        seconds
      } = secondsToTimeComponents(videoLength);
      buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.defaultWithDuration', {
        duration: i18n.translate(secondsToDurationTranslationKey(videoLength), {
          hourCount: hours,
          minuteCount: minutes,
          secondCount: seconds
        })
      });
    } else {
      buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.default');
    }
  
    const timeStampMarkup = videoLength ? /*#__PURE__*/React__default.createElement("p", {
      className: classNames(styles$1K.Timestamp, showVideoProgress && styles$1K.withProgress)
    }, secondsToTimestamp(videoLength)) : null;
    let progressMarkup = null;
  
    if (showVideoProgress) {
      const progressValue = calculateProgress(videoLength, videoProgress);
      const progressValuePercents = Math.round(progressValue * 100);
      progressMarkup = /*#__PURE__*/React__default.createElement("div", {
        className: styles$1K.Progress
      }, /*#__PURE__*/React__default.createElement("progress", {
        className: styles$1K.ProgressBar,
        value: progressValuePercents,
        max: "100"
      }), /*#__PURE__*/React__default.createElement("div", {
        className: styles$1K.Indicator,
        style: {
          transform: `scaleX(${progressValue})`
        }
      }, /*#__PURE__*/React__default.createElement("span", {
        className: styles$1K.Label
      }, progressValuePercents, "%")));
    }
  
    return /*#__PURE__*/React__default.createElement("div", {
      className: styles$1K.Thumbnail,
      style: {
        backgroundImage: `url(${thumbnailUrl})`
      }
    }, /*#__PURE__*/React__default.createElement("button", {
      type: "button",
      className: styles$1K.PlayButton,
      "aria-label": buttonLabel,
      onClick: onClick,
      onMouseEnter: onBeforeStartPlaying,
      onFocus: onBeforeStartPlaying,
      onTouchStart: onBeforeStartPlaying
    }, /*#__PURE__*/React__default.createElement("img", {
      className: styles$1K.PlayIcon,
      src: img$2,
      alt: ""
    })), timeStampMarkup, progressMarkup);
  }
  
  function calculateProgress(videoLength, videoProgress) {
    if (videoProgress > videoLength && process.env.NODE_ENV === 'development') {
      // eslint-disable-next-line no-console
      console.warn('Value passed to the video progress should not exceed video length. Resetting progress to 100%.');
    }
  
    if (videoProgress > 0 && videoLength > 0) {
      const progress = parseFloat((videoProgress / videoLength).toFixed(2));
      return progress > 1 ? 1 : progress;
    }
  
    return 0;
  }
  
  exports.AccountConnection = AccountConnection;
  exports.ActionList = ActionList;
  exports.ActionMenu = ActionMenu;
  exports.AppProvider = AppProvider$1;
  exports.Autocomplete = Autocomplete;
  exports.Avatar = Avatar;
  exports.Backdrop = Backdrop;
  exports.Badge = Badge;
  exports.Banner = Banner;
  exports.Breadcrumbs = Breadcrumbs;
  exports.Button = Button;
  exports.ButtonGroup = ButtonGroup;
  exports.CalloutCard = CalloutCard;
  exports.Caption = Caption;
  exports.Card = Card;
  exports.Checkbox = Checkbox$1;
  exports.ChoiceList = ChoiceList;
  exports.Collapsible = Collapsible;
  exports.ColorPicker = ColorPicker;
  exports.Connected = Connected;
  exports.ContextualSaveBar = ContextualSaveBar;
  exports.DATA_ATTRIBUTE = DATA_ATTRIBUTE;
  exports.DEFAULT_TOAST_DURATION = DEFAULT_TOAST_DURATION;
  exports.DEFAULT_TOAST_DURATION_WITH_ACTION = DEFAULT_TOAST_DURATION_WITH_ACTION;
  exports.DataTable = DataTable;
  exports.DatePicker = DatePicker;
  exports.DescriptionList = DescriptionList;
  exports.DisplayText = DisplayText;
  exports.DropZone = DropZone;
  exports.EmptySearchResult = EmptySearchResult;
  exports.EmptyState = EmptyState;
  exports.EventListener = EventListener;
  exports.ExceptionList = ExceptionList;
  exports.Filters = Filters;
  exports.Focus = Focus;
  exports.FooterHelp = FooterHelp;
  exports.Form = Form;
  exports.FormLayout = FormLayout;
  exports.Frame = Frame;
  exports.Heading = Heading;
  exports.Icon = Icon;
  exports.Image = Image;
  exports.Indicator = Indicator;
  exports.InlineError = InlineError;
  exports.KeyboardKey = KeyboardKey;
  exports.KeypressListener = KeypressListener;
  exports.KonamiCode = KonamiCode;
  exports.Label = Label;
  exports.Labelled = Labelled;
  exports.Layout = Layout;
  exports.Link = Link;
  exports.List = List;
  exports.Loading = Loading$1;
  exports.MediaCard = MediaCard;
  exports.Modal = Modal;
  exports.Navigation = Navigation$1;
  exports.OptionList = OptionList;
  exports.Page = Page;
  exports.PageActions = PageActions;
  exports.Pagination = Pagination;
  exports.PolarisTestProvider = PolarisTestProvider;
  exports.Popover = Popover;
  exports.Portal = Portal;
  exports.PortalsManager = PortalsManager;
  exports.PositionedOverlay = PositionedOverlay;
  exports.ProgressBar = ProgressBar;
  exports.RadioButton = RadioButton;
  exports.RangeSlider = RangeSlider;
  exports.ResourceItem = ResourceItem;
  exports.ResourceList = ResourceList;
  exports.ScrollLock = ScrollLock$1;
  exports.Scrollable = Scrollable;
  exports.Select = Select;
  exports.SettingToggle = SettingToggle;
  exports.Sheet = Sheet;
  exports.SkeletonBodyText = SkeletonBodyText;
  exports.SkeletonDisplayText = SkeletonDisplayText;
  exports.SkeletonPage = SkeletonPage;
  exports.SkeletonThumbnail = SkeletonThumbnail;
  exports.Spinner = Spinner;
  exports.Stack = Stack;
  exports.Sticky = Sticky;
  exports.Subheading = Subheading;
  exports.Tabs = Tabs;
  exports.Tag = Tag;
  exports.TextContainer = TextContainer;
  exports.TextField = TextField;
  exports.TextStyle = TextStyle;
  exports.ThemeProvider = ThemeProvider;
  exports.Thumbnail = Thumbnail;
  exports.Toast = Toast$1;
  exports.Tooltip = Tooltip;
  exports.TopBar = TopBar;
  exports.TrapFocus = TrapFocus;
  exports.Truncate = Truncate;
  exports.UNSTABLE_Tokens = Tokens;
  exports.UNSTABLE_toCssCustomPropertySyntax = toCssCustomPropertySyntax;
  exports.UnstableBulkActions = BulkActions;
  exports.UnstyledButton = UnstyledButton;
  exports.UnstyledLink = UnstyledLink;
  exports.VideoThumbnail = VideoThumbnail;
  exports.VisuallyHidden = VisuallyHidden;
  exports._SECRET_INTERNAL_FilterControl = FilterControl;
  exports._SECRET_INTERNAL_SCROLL_LOCK_MANAGER_CONTEXT = ScrollLockManagerContext;
  exports._SECRET_INTERNAL_WITHIN_CONTENT_CONTEXT = WithinContentContext;
  exports.buttonFrom = buttonFrom;
  exports.buttonsFrom = buttonsFrom;
  exports.errorTextID = errorTextID;
  exports.hsbToHex = hsbToHex;
  exports.hsbToRgb = hsbToRgb;
  exports.hslToRgb = hslToRgb;
  exports.isNavigationItemActive = isNavigationItemActive;
  exports.isNewDesignLanguageColor = isNewDesignLanguageColor;
  exports.labelID = labelID;
  exports.rgbString = rgbString;
  exports.rgbToHex = rgbToHex;
  exports.rgbToHsb = rgbToHsb;
  exports.rgbToHsl = rgbToHsl;
  exports.rgbaString = rgbaString;
  exports.unstyledButtonFrom = unstyledButtonFrom;
  