@shopify/polaris
Version:
Shopify’s product component library
1,027 lines (924 loc) • 215 kB
JavaScript
'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 styles = require('@shopify/react-utilities/styles');
var tslib_1 = require('tslib');
var reactUtilities = require('@shopify/react-utilities');
var components = require('@shopify/react-utilities/components');
var decorators = require('@shopify/javascript-utilities/decorators');
var other = require('@shopify/javascript-utilities/other');
var PropTypes = require('prop-types');
var events = require('@shopify/javascript-utilities/events');
var fastdom = require('@shopify/javascript-utilities/fastdom');
var math = require('@shopify/javascript-utilities/math');
var dates = require('@shopify/javascript-utilities/dates');
var isEqual = _interopDefault(require('lodash/isEqual'));
var pick = _interopDefault(require('lodash/pick'));
var focus = require('@shopify/javascript-utilities/focus');
var dom = require('@shopify/javascript-utilities/dom');
var reactTransitionGroup = require('react-transition-group');
var geometry = require('@shopify/javascript-utilities/geometry');
var reactDom = require('react-dom');
(function (Keys) {
Keys[Keys["BACKSPACE"] = 8] = "BACKSPACE";
Keys[Keys["TAB"] = 9] = "TAB";
Keys[Keys["ENTER"] = 13] = "ENTER";
Keys[Keys["SHIFT"] = 16] = "SHIFT";
Keys[Keys["CTRL"] = 17] = "CTRL";
Keys[Keys["ALT"] = 18] = "ALT";
Keys[Keys["PAUSE"] = 19] = "PAUSE";
Keys[Keys["CAPS_LOCK"] = 20] = "CAPS_LOCK";
Keys[Keys["ESCAPE"] = 27] = "ESCAPE";
Keys[Keys["SPACE"] = 32] = "SPACE";
Keys[Keys["PAGE_UP"] = 33] = "PAGE_UP";
Keys[Keys["PAGE_DOWN"] = 34] = "PAGE_DOWN";
Keys[Keys["END"] = 35] = "END";
Keys[Keys["HOME"] = 36] = "HOME";
Keys[Keys["LEFT_ARROW"] = 37] = "LEFT_ARROW";
Keys[Keys["UP_ARROW"] = 38] = "UP_ARROW";
Keys[Keys["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
Keys[Keys["DOWN_ARROW"] = 40] = "DOWN_ARROW";
Keys[Keys["INSERT"] = 45] = "INSERT";
Keys[Keys["DELETE"] = 46] = "DELETE";
Keys[Keys["KEY_0"] = 48] = "KEY_0";
Keys[Keys["KEY_1"] = 49] = "KEY_1";
Keys[Keys["KEY_2"] = 50] = "KEY_2";
Keys[Keys["KEY_3"] = 51] = "KEY_3";
Keys[Keys["KEY_4"] = 52] = "KEY_4";
Keys[Keys["KEY_5"] = 53] = "KEY_5";
Keys[Keys["KEY_6"] = 54] = "KEY_6";
Keys[Keys["KEY_7"] = 55] = "KEY_7";
Keys[Keys["KEY_8"] = 56] = "KEY_8";
Keys[Keys["KEY_9"] = 57] = "KEY_9";
Keys[Keys["KEY_A"] = 65] = "KEY_A";
Keys[Keys["KEY_B"] = 66] = "KEY_B";
Keys[Keys["KEY_C"] = 67] = "KEY_C";
Keys[Keys["KEY_D"] = 68] = "KEY_D";
Keys[Keys["KEY_E"] = 69] = "KEY_E";
Keys[Keys["KEY_F"] = 70] = "KEY_F";
Keys[Keys["KEY_G"] = 71] = "KEY_G";
Keys[Keys["KEY_H"] = 72] = "KEY_H";
Keys[Keys["KEY_I"] = 73] = "KEY_I";
Keys[Keys["KEY_J"] = 74] = "KEY_J";
Keys[Keys["KEY_K"] = 75] = "KEY_K";
Keys[Keys["KEY_L"] = 76] = "KEY_L";
Keys[Keys["KEY_M"] = 77] = "KEY_M";
Keys[Keys["KEY_N"] = 78] = "KEY_N";
Keys[Keys["KEY_O"] = 79] = "KEY_O";
Keys[Keys["KEY_P"] = 80] = "KEY_P";
Keys[Keys["KEY_Q"] = 81] = "KEY_Q";
Keys[Keys["KEY_R"] = 82] = "KEY_R";
Keys[Keys["KEY_S"] = 83] = "KEY_S";
Keys[Keys["KEY_T"] = 84] = "KEY_T";
Keys[Keys["KEY_U"] = 85] = "KEY_U";
Keys[Keys["KEY_V"] = 86] = "KEY_V";
Keys[Keys["KEY_W"] = 87] = "KEY_W";
Keys[Keys["KEY_X"] = 88] = "KEY_X";
Keys[Keys["KEY_Y"] = 89] = "KEY_Y";
Keys[Keys["KEY_Z"] = 90] = "KEY_Z";
Keys[Keys["LEFT_META"] = 91] = "LEFT_META";
Keys[Keys["RIGHT_META"] = 92] = "RIGHT_META";
Keys[Keys["SELECT"] = 93] = "SELECT";
Keys[Keys["NUMPAD_0"] = 96] = "NUMPAD_0";
Keys[Keys["NUMPAD_1"] = 97] = "NUMPAD_1";
Keys[Keys["NUMPAD_2"] = 98] = "NUMPAD_2";
Keys[Keys["NUMPAD_3"] = 99] = "NUMPAD_3";
Keys[Keys["NUMPAD_4"] = 100] = "NUMPAD_4";
Keys[Keys["NUMPAD_5"] = 101] = "NUMPAD_5";
Keys[Keys["NUMPAD_6"] = 102] = "NUMPAD_6";
Keys[Keys["NUMPAD_7"] = 103] = "NUMPAD_7";
Keys[Keys["NUMPAD_8"] = 104] = "NUMPAD_8";
Keys[Keys["NUMPAD_9"] = 105] = "NUMPAD_9";
Keys[Keys["MULTIPLY"] = 106] = "MULTIPLY";
Keys[Keys["ADD"] = 107] = "ADD";
Keys[Keys["SUBTRACT"] = 109] = "SUBTRACT";
Keys[Keys["DECIMAL"] = 110] = "DECIMAL";
Keys[Keys["DIVIDE"] = 111] = "DIVIDE";
Keys[Keys["F1"] = 112] = "F1";
Keys[Keys["F2"] = 113] = "F2";
Keys[Keys["F3"] = 114] = "F3";
Keys[Keys["F4"] = 115] = "F4";
Keys[Keys["F5"] = 116] = "F5";
Keys[Keys["F6"] = 117] = "F6";
Keys[Keys["F7"] = 118] = "F7";
Keys[Keys["F8"] = 119] = "F8";
Keys[Keys["F9"] = 120] = "F9";
Keys[Keys["F10"] = 121] = "F10";
Keys[Keys["F11"] = 122] = "F11";
Keys[Keys["F12"] = 123] = "F12";
Keys[Keys["NUM_LOCK"] = 144] = "NUM_LOCK";
Keys[Keys["SCROLL_LOCK"] = 145] = "SCROLL_LOCK";
Keys[Keys["SEMICOLON"] = 186] = "SEMICOLON";
Keys[Keys["EQUALS"] = 187] = "EQUALS";
Keys[Keys["COMMA"] = 188] = "COMMA";
Keys[Keys["DASH"] = 189] = "DASH";
Keys[Keys["PERIOD"] = 190] = "PERIOD";
Keys[Keys["FORWARD_SLASH"] = 191] = "FORWARD_SLASH";
Keys[Keys["GRAVE_ACCENT"] = 192] = "GRAVE_ACCENT";
Keys[Keys["OPEN_BRACKET"] = 219] = "OPEN_BRACKET";
Keys[Keys["BACK_SLASH"] = 220] = "BACK_SLASH";
Keys[Keys["CLOSE_BRACKET"] = 221] = "CLOSE_BRACKET";
Keys[Keys["SINGLE_QUOTE"] = 222] = "SINGLE_QUOTE";
})(exports.Keys || (exports.Keys = {}));
function Image$1(_a) {
var sourceSet = _a.sourceSet,
source = _a.source,
rest = tslib_1.__rest(_a, ["sourceSet", "source"]);
const finalSourceSet = sourceSet ? sourceSet.map(({ source: subSource, descriptor }) => `${subSource} ${descriptor}`).join(',') : null;
return finalSourceSet ? React.createElement("img", Object.assign({ src: source, srcSet: finalSourceSet }, rest)) : React.createElement("img", Object.assign({ src: source }, rest));
}
var styles$1 = {
"Avatar": "p_u2",
"sizeSmall": "p_xg",
"sizeMedium": "p_cm",
"sizeLarge": "p_yh",
"styleOne": "p_ho",
"styleTwo": "p_gg",
"styleThree": "p_s8",
"styleFour": "p_a1",
"styleFive": "p_i3",
"styleSix": "p_km",
"Image": "p_zr",
"Initials": "p_nc",
"skeletonShimmerAnimation": "p_h9",
};
var avatar1 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzI0NWI0OH0uY2xzLTJ7ZmlsbDojMmRiMTY3fS5jbHMtM3tmaWxsOiNmZmZ9LmNscy00e2ZpbGw6IzhkYzk1OH0uY2xzLTV7ZmlsbDojZWJlZGYxO29wYWNpdHk6LjJ9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMCAwaDEwMHYxMDBIMHoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik02OSAwdjY1LjY1bC0yLS4wMXYxOS44NWwyIC4wMlYxMDBIMFYwaDY5eiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTY3IDY1LjY0djE5Ljg1bC0yNS41Ny0uMTlDMzIgODUuMjIgMjUuNiA4MS40NiAyNS42OCA3Mi4wNnMuMjUtNi43NC4yNS02Ljc0eiIvPjxwYXRoIGNsYXNzPSJjbHMtNCIgZD0iTTg2Ljk5IDU4SDY5VjBoMTAuOTNsNy4wNiA1OHoiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yNC41MyA0MC4yOWExMi4yMyAxMi4yMyAwIDAgMSAyNC40NiAwIi8+PHBhdGggY2xhc3M9ImNscy00IiBkPSJNNTkuNjIgNThBMTAuNjkgMTAuNjkgMCAwIDEgODEgNTh6Ii8+PC9zdmc+';
var avatar2 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzFlMjY1Y30uY2xzLTJ7ZmlsbDojNWQ2Y2MxfS5jbHMtMywuY2xzLTV7ZmlsbDojZmZmfS5jbHMtNHtmaWxsOiNmZmMwNGR9LmNscy01e3N0cm9rZTojZmZmO3N0cm9rZS1taXRlcmxpbWl0OjEwfTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTS0uMDEgMGgxMDB2MTAwaC0xMDB6Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNLS4wMSAwaDY5LjAydjEwMEgtLjAxeiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTY4LjkzIDY1Ljg4bC0yNC40NC0uMTktLjA1IDYuMDljMCA1LjIyIDMuNDggOS40NyA4LjY5IDkuNTJsMTUuOC4xMnoiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik02OC45MSAxMS4zbDE5LjE3IDQ2LjI5LTE5LjE3LS4xNlYxMS4zeiIvPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTIzLjI1IDM2LjQzYTMuMjIgMy4yMiAwIDEgMCAwIDYuNDRtMjEuMDEtNi40NGEzLjIyIDMuMjIgMCAwIDAgMCA2LjQ0bS0xMy41NSAzLjc0YTMuMjIgMy4yMiAwIDEgMCAwIDYuNDRtMy4yMi0yNS41MWEzLjIyIDMuMjIgMCAwIDAgMCA2LjQ0Ii8+PC9zdmc+';
var avatar3 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzVkNmNjMX0uY2xzLTJ7ZmlsbDojNmRjYWNlfS5jbHMtM3tmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjVweH0uY2xzLTR7ZmlsbDojZWJlZGYxO29wYWNpdHk6LjJ9LmNscy01e2ZpbGw6I2ZmZn08L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0tLjAyIDBoMTAwdjEwMGgtMTAweiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTS4zOSAwaDY5LjAydjEwMEguMzl6Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMjQuMTggMzEuMjF2My40N0ExMC40MyAxMC40MyAwIDAgMCAzNC40IDQ1LjIxYTEwLjQzIDEwLjQzIDAgMCAwIDEwLjIyLTEwLjUzdi0zLjQ3Ii8+PHBhdGggY2xhc3M9ImNscy00IiBkPSJNMjAuMTEgNDkuMDdhMTYuMjIgMTYuMjIgMCAxIDEgMCAzMi40NCIvPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTY5LjQ0IDE4LjgzTDkwIDcxSDY5LjQ0VjE4LjgzeiIvPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTU3LjU5IDcxYTYgNiAwIDAgMSAxMiAweiIvPjwvc3ZnPg==';
var avatar4 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZTBjM30uY2xzLTJ7ZmlsbDojNWQ2Y2MxfS5jbHMtM3tmaWxsOiNmZjk2N2R9LmNscy00e2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6NXB4fS5jbHMtNXtmaWxsOiNlYmVkZjE7b3BhY2l0eTouMn08L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wLS4wMWgxMDB2MTAwSDB6Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMCAwaDY5LjAydjEwMEgweiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTY5LjAyIDBsMjQuMDMgNjEuNjlINjkuMDJWMHoiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik0zMC42OSAzMS45MXYtM2MwLTQuNzggMy40Ni04LjY1IDgtOC42NXM4IDMuODcgOCA4LjY1djMiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0xMi43NiA1Ni4wNmExMy4zNiAxMy4zNiAwIDEgMSAyNi43MiAwIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODAgNjEuNDZsLTI5LjM0LjIzdi03LjMzYzAtNi4yOCA0LjA3LTExLjM2IDEwLjM0LTExLjQ0bDE5LS4xNHoiLz48L3N2Zz4=';
var avatar5 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzhkYzk1OH0uY2xzLTJ7ZmlsbDojMmRiMTY3fS5jbHMtM3tmaWxsOiMyNDViNDh9LmNscy00e2ZpbGw6I2ViZWRmMTtvcGFjaXR5Oi4yfTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGg3MC4wMnYxMDBIMHoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik02OS45MiAwdjU2LjMyTDQ5IDY3bC0uMyAyNS4wN1YxMDBIMTAwVjB6Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNNTkuMjcgNTguMjlhNS4yMiA1LjIyIDAgMCAwLTkuNDMgNC40OCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTI3LjEyIDkuMzNoNDQuNTN2Mi4xOUgyNy4xMnptLTEyLjQxIDkuNDloNTYuOTR2Mi4xOUgxNC43MXoiLz48Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjE5LjY2IiBjeT0iNDQuOCIgcj0iMTEuMjIiLz48L3N2Zz4=';
var avatar6 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZTBjM30uY2xzLTJ7ZmlsbDojZmY5NjdkfS5jbHMtM3tmaWxsOiMzMmNhYzZ9LmNscy00e2ZpbGw6IzAwOTc5Nn0uY2xzLTUsLmNscy02e2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMH0uY2xzLTV7c3Ryb2tlLXdpZHRoOjVweH0uY2xzLTZ7c3Ryb2tlLXdpZHRoOjRweH08L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0tLjAyLS4wMWgxMDB2MTAwaC0xMDB6Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMCAwaDY5LjQxdjEwMEgweiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTY5LjkyIDB2NDQuMzJMNTEuMzQgNTV2NDVIMTAwVjB6Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNMzkuMzIgNzZhMTEuODUgMTEuODUgMCAwIDAgMTIgMTEuNjJWNzYiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik0zOS4zMiA3NmExMiAxMiAwIDAgMSAxMi0xMS44MlY3NiIvPjxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTQzLjc0IDE5LjgzYTEyLjgyIDEyLjgyIDAgMSAxLTI1LjY0IDAiLz48cGF0aCBjbGFzcz0iY2xzLTYiIGQ9Ik0yNy4zOSAzMS42bC0xLjU4IDUuOTZtOS4zNy01LjcybDIuNTUgNS40N200LjI2LTkuODVsMy41MyA0LjVtLTI1LjQzLTQuNWwtMy41MyA0LjUiLz48L3N2Zz4=';
var avatar7 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzhkYzk1OH0uY2xzLTJ7ZmlsbDojMmRiMTY3fS5jbHMtM3tmaWxsOiNmZmZ9LmNscy00e2ZpbGw6IzI0NWI0OH08L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0wIDBoMTAwdjEwMC40OEgweiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTgzIDY4djMybC0xNC0uMTZ2LjE2SDBWMGg2OXY2OGgxNHoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02OS4yOSA0MS42OUgyMC42NnMtLjA5LTMtLjE3IDcuMTUgNyAxOC41MSAxNy4zNSAxOC41OWwzMS40NS41N3oiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik02OC43IDEyLjRsMTEuNTQgMjkuMjlINjguN1YxMi40eiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTYyLjIyIDQxLjY5YTMuMzQgMy4zNCAwIDEgMSA2LjY5IDB6Ii8+PHBhdGggY2xhc3M9ImNscy00IiBkPSJNNDEuNDUgMTguMDZhMi41NyAyLjU3IDAgMCAwLTUuMTQgME0zMy4zMyAyNGEyLjU3IDIuNTcgMCAxIDAtNS4xNCAwbTIwLjM2IDIuNThhMi41NyAyLjU3IDAgMSAwLTUuMTQgMCIvPjwvc3ZnPg==';
var avatar8 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZWRiOX0uY2xzLTJ7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDo1cHh9LmNscy0ze2ZpbGw6I2ZmYzA0ZH0uY2xzLTR7ZmlsbDojNWQ2Y2MxfTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNjQuNjMgMTcuMzNhMTcgMTcgMCAwIDEgNSAyOS43MiAxNi43NSAxNi43NSAwIDAgMS01IDIuNjIiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0wIDBoNjkuMDJ2MTAwSDB6Ii8+PGNpcmNsZSBjbGFzcz0iY2xzLTIiIGN4PSI0NS4xMSIgY3k9IjMzLjQ5IiByPSIxNi45OCIgdHJhbnNmb3JtPSJyb3RhdGUoLTM3LjAyIDQ1LjEyNCAzMy40OTMpIi8+PHBhdGggY2xhc3M9ImNscy00IiBkPSJNNjkuMDIgMzQuNDhsMTkuNDcgMzguNzQtMTkuNDcgMS41M1YzNC40OHoiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik02MS42IDMzLjY3YTEwLjE3IDEwLjE3IDAgMCAxIDE1LjQuMDgiLz48L3N2Zz4=';
var avatar9 = 'data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmYzA0ZH0uY2xzLTJ7ZmlsbDojNWQ2Y2MxfS5jbHMtM3tmaWxsOiM0MTIzNmV9LmNscy00e2ZpbGw6I2ViZWRmMTtvcGFjaXR5Oi4yfTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMCAwaDY5LjQxdjEwMEgweiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcwLjIxIDgwLjg4aC0xNS4xYy00LjgxIDAtNS42OC01Ljg0LTUuNjgtNS44NGgyMC43OCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTgyIDYwLjQ4bC0xNCAuMjVWMGgxMC4xN0M4MC41OSAyMC4xNCA4MiA2MC40OCA4MiA2MC40OHoiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik01Ny43MSA2MC40OGE1LjQ0IDUuNDQgMCAxIDEgMTAuODcgMCIvPjxjaXJjbGUgY2xhc3M9ImNscy00IiBjeD0iMjQuNzciIGN5PSI0MC4xOSIgcj0iMTEuMjIiLz48L3N2Zz4=';
var avatars = Object.freeze({
avatarOne: avatar1,
avatarTwo: avatar2,
avatarThree: avatar3,
avatarFour: avatar4,
avatarFive: avatar5,
avatarSix: avatar6,
avatarSeven: avatar7,
avatarEight: avatar8,
avatarNine: avatar9
});
const STYLE_CLASSES = ['one', 'two', 'three', 'four', 'five', 'six'];
const AVATAR_IMAGES = Object.keys(avatars).map(key => avatars[key]);
function Avatar$1({ name, source, initials, customer, size = 'medium', accessibilityLabel }) {
const nameString = name || initials;
let finalSource;
let label;
if (accessibilityLabel) {
label = accessibilityLabel;
} else if (name) {
label = name;
} else if (initials) {
label = `Avatar with initials ${initials.split('').join(' ')}`;
} else {
label = 'Avatar';
}
if (source) {
finalSource = source;
} else if (customer) {
finalSource = customerPlaceholder(nameString);
}
const className = styles.classNames(styles$1.Avatar, styles$1[styles.variationName('style', styleClass(nameString))], size && styles$1[styles.variationName('size', size)]);
const imageMarkUp = finalSource ? React.createElement(Image$1, { className: styles$1.Image, source: finalSource, alt: '', role: 'presentation' }) : null;
const initialsMarkup = initials ? React.createElement(
'span',
{ 'aria-hidden': true, className: styles$1.Initials },
initials
) : null;
return React.createElement(
'span',
{ 'aria-label': label, role: 'img', className: className },
initialsMarkup,
imageMarkUp
);
}
function styleClass(name) {
return name ? STYLE_CLASSES[name.charCodeAt(0) % STYLE_CLASSES.length] : STYLE_CLASSES[0];
}
function customerPlaceholder(name) {
return name ? AVATAR_IMAGES[name.charCodeAt(0) % AVATAR_IMAGES.length] : AVATAR_IMAGES[0];
}
function handleMouseUpByBlurring({ currentTarget }) {
currentTarget.blur();
}
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]'
};
let LinkComponent;
class UnstyledLink$1 extends React.PureComponent {
static use(NewLinkComponent) {
LinkComponent = NewLinkComponent;
}
render() {
if (LinkComponent) {
return React.createElement(LinkComponent, Object.assign({}, unstyled.props, this.props));
}
const _a = this.props,
external = _a.external,
url = _a.url,
rest = tslib_1.__rest(_a, ["external", "url"]);
const target = external ? '_blank' : undefined;
const rel = external ? 'noopener noreferrer' : undefined;
return React.createElement('a', Object.assign({ target: target }, rest, { href: url, rel: rel }, unstyled.props));
}
}
var add = {"viewBox":"0 0 20 20","body":"<path d=\"M17 9h-6V3a1 1 0 1 0-2 0v6H3a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2\" fill-rule=\"evenodd\"/>"};
var alert = {"viewBox":"0 0 20 20","body":"<path d=\"M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm-1-8h2V6H9v4zm0 4h2v-2H9v2z\" fill-rule=\"evenodd\"/>"};
var arrowDown = {"viewBox":"0 0 20 20","body":"<path d=\"M10.707 17.707l5-5a.999.999 0 1 0-1.414-1.414L11 14.586V3a1 1 0 1 0-2 0v11.586l-3.293-3.293a.999.999 0 1 0-1.414 1.414l5 5a.999.999 0 0 0 1.414 0\" fill-rule=\"evenodd\"/>"};
var arrowLeft = {"viewBox":"0 0 20 20","body":"<path d=\"M17 9H5.414l3.293-3.293a.999.999 0 1 0-1.414-1.414l-5 5a.999.999 0 0 0 0 1.414l5 5a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L5.414 11H17a1 1 0 1 0 0-2\" fill-rule=\"evenodd\"/>"};
var arrowRight = {"viewBox":"0 0 20 20","body":"<path d=\"M17.707 9.293l-5-5a.999.999 0 1 0-1.414 1.414L14.586 9H3a1 1 0 1 0 0 2h11.586l-3.293 3.293a.999.999 0 1 0 1.414 1.414l5-5a.999.999 0 0 0 0-1.414\" fill-rule=\"evenodd\"/>"};
var arrowUp = {"viewBox":"0 0 20 20","body":"<path d=\"M11 17V5.414l3.293 3.293a.999.999 0 1 0 1.414-1.414l-5-5a.999.999 0 0 0-1.414 0l-5 5a.997.997 0 0 0 0 1.414.999.999 0 0 0 1.414 0L9 5.414V17a1 1 0 1 0 2 0\" fill-rule=\"evenodd\"/>"};
var arrowUpDown = {"viewBox":"0 0 20 20","body":"<path d=\"M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z\" fill-rule=\"evenodd\"/>"};
var calendar = {"viewBox":"0 0 20 20","body":"<path d=\"M4 8h12V6H4v2zm9 4h2v-2h-2v2zm-4 0h2v-2H9v2zm0 4h2v-2H9v2zm-4-4h2v-2H5v2zm0 4h2v-2H5v2zM17 4h-2V3a1 1 0 1 0-2 0v1H7V3a1 1 0 1 0-2 0v1H3a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z\" fill-rule=\"evenodd\"/>"};
var cancel = {"viewBox":"0 0 20 20","body":"<path d=\"M11.414 10l6.293-6.293a.999.999 0 1 0-1.414-1.414L10 8.586 3.707 2.293a.999.999 0 1 0-1.414 1.414L8.586 10l-6.293 6.293a.999.999 0 1 0 1.414 1.414L10 11.414l6.293 6.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z\" fill-rule=\"evenodd\"/>"};
var cancelSmall = {"viewBox":"0 0 20 20","body":"<path d=\"M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z\" fill-rule=\"evenodd\"/>"};
var caretDown = {"viewBox":"0 0 20 20","body":"<path d=\"M5 8l5 5 5-5z\" fill-rule=\"evenodd\"/>"};
var caretUp = {"viewBox":"0 0 20 20","body":"<path d=\"M15 12l-5-5-5 5z\" />"};
var checkmark = {"viewBox":"0 0 20 20","body":"<g fill-rule=\"evenodd\"><path d=\"M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0\"/><path d=\"M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0\"/></g>"};
var chevronDown = {"viewBox":"0 0 20 20","body":"<path d=\"M10 14a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 1 1 1.414-1.414L10 11.586l4.293-4.293a.999.999 0 1 1 1.414 1.414l-5 5A.997.997 0 0 1 10 14\" fill-rule=\"evenodd\"/>"};
var chevronLeft = {"viewBox":"0 0 20 20","body":"<path d=\"M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16\" fill-rule=\"evenodd\"/>"};
var chevronRight = {"viewBox":"0 0 20 20","body":"<path d=\"M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16\" fill-rule=\"evenodd\"/>"};
var chevronUp = {"viewBox":"0 0 20 20","body":"<path d=\"M15 13a.997.997 0 0 1-.707-.293L10 8.414l-4.293 4.293a.999.999 0 1 1-1.414-1.414l5-5a.999.999 0 0 1 1.414 0l5 5A.999.999 0 0 1 15 13\" fill-rule=\"evenodd\"/>"};
var circleCancel = {"viewBox":"0 0 20 20","body":"<path d=\"M14.242 12.829l-1.414 1.414L10 11.413l-2.828 2.83-1.414-1.414 2.828-2.83-2.828-2.827 1.414-1.414L10 8.586l2.828-2.828 1.414 1.414L11.414 10l2.828 2.829zM10 1.999A8 8 0 1 0 10 18a8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
var circleChevronDown = {"viewBox":"0 0 20 20","body":"<path d=\"M10 13.414L5.293 8.707l1.414-1.414L10 10.586l3.293-3.293 1.414 1.414L10 13.414zM10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
var circleChevronLeft = {"viewBox":"0 0 20 20","body":"<path d=\"M11.293 5.293l1.414 1.414L9.414 10l3.293 3.293-1.414 1.414L6.586 10l4.707-4.707zM10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
var circleChevronRight = {"viewBox":"0 0 20 20","body":"<path d=\"M8.707 14.707l-1.414-1.414L10.586 10 7.293 6.707l1.414-1.414L13.414 10l-4.707 4.707zM10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16z\" fill-rule=\"evenodd\"/>"};
var circleChevronUp = {"viewBox":"0 0 20 20","body":"<path d=\"M14.707 11.293l-1.414 1.414L10 9.414l-3.293 3.293-1.414-1.414L10 6.586l4.707 4.707zM18 10a8 8 0 1 0-16 0 8 8 0 0 0 16 0z\" fill-rule=\"evenodd\"/>"};
var circlePlus = {"viewBox":"0 0 20 20","body":"<path d=\"M15 11h-4v4H9v-4H5V9h4V5h2v4h4v2zm-5-9a8 8 0 1 0 0 16 8 8 0 0 0 0-16z\" fill-rule=\"evenodd\"/>"};
var conversation = {"viewBox":"0 0 20 20","body":"<path d=\"M13 11h2V9h-2v2zm-4 0h2V9H9v2zm-4 0h2V9H5v2zm5-9c-4.411 0-8 3.589-8 8 0 1.504.425 2.908 1.15 4.111l-1.069 2.495a1 1 0 0 0 1.314 1.313l2.494-1.069A7.939 7.939 0 0 0 10 18c4.411 0 8-3.589 8-8s-3.589-8-8-8z\" fill-rule=\"evenodd\"/>"};
var deleteIcon = {"viewBox":"0 0 20 20","body":"<path d=\"M16 6H4a1 1 0 1 0 0 2h1v9a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8h1a1 1 0 1 0 0-2zM9 4a1 1 0 1 1 0-2h2a1 1 0 1 1 0 2H9zm2 12h2V8h-2v8zm-4 0h2V8H7v8z\" fill-rule=\"evenodd\"/>"};
var disable = {"viewBox":"0 0 20 20","body":"<path d=\"M10 16a5.961 5.961 0 0 1-3.471-1.115l8.356-8.356A5.961 5.961 0 0 1 16 10c0 3.309-2.691 6-6 6m0-12c1.294 0 2.49.416 3.471 1.115l-8.356 8.356A5.961 5.961 0 0 1 4 10c0-3.309 2.691-6 6-6m0-2c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8\" fill-rule=\"evenodd\"/>"};
var dispute = {"viewBox":"0 0 20 20","body":"<path d=\"M9 10h2V6H9v4zm0 4h2v-2H9v2zm-7-4c0 4.411 3.589 8 8 8a7.939 7.939 0 0 0 4.111-1.15l2.494 1.069a1 1 0 0 0 1.314-1.313l-1.069-2.495A7.939 7.939 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8z\" fill-rule=\"evenodd\"/>"};
var duplicate = {"viewBox":"0 0 20 20","body":"<path d=\"M8 12h8V4H8v8zm4 4H4V8h2v5a1 1 0 0 0 1 1h5v2zm5-14H7a1 1 0 0 0-1 1v3H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-3h3a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z\" fill-rule=\"evenodd\"/>"};
var embed = {"viewBox":"0 0 20 20","body":"<path d=\"M17 13a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3a1 1 0 1 1 2 0v2h12v-2a1 1 0 0 1 1-1zm0-11a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V4H4v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1h14zm.555 7.168a1.001 1.001 0 0 1 0 1.664l-3 2a1 1 0 0 1-1.109-1.664L15.198 10l-1.752-1.168a1 1 0 1 1 1.109-1.664l3 2zM6.832 7.445a1 1 0 0 1-.277 1.387L4.803 10l1.752 1.168a1 1 0 1 1-1.11 1.664l-3-2a1.001 1.001 0 0 1 0-1.664l3-2a1 1 0 0 1 1.387.277zM9 14.001a1 1 0 0 1-.948-1.317l2-6a1 1 0 0 1 1.896.633l-2 6A.999.999 0 0 1 9 14z\" fill-rule=\"evenodd\"/>"};
var exportIcon = {"viewBox":"0 0 20 20","body":"<path d=\"M9.293 13.707l-3-3a.999.999 0 1 1 1.414-1.414L9 10.586V3a1 1 0 1 1 2 0v7.586l1.293-1.293a.999.999 0 1 1 1.414 1.414l-3 3a.999.999 0 0 1-1.414 0zM17 16a1 1 0 1 1 0 2H3a1 1 0 1 1 0-2h14z\"/>"};
var external = {"viewBox":"0 0 20 20","body":"<path d=\"M17 2a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V5.414l-7.293 7.293a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 4H13a1 1 0 1 1 0-2h4zm-4 9a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4v8h8v-4a1 1 0 0 1 1-1z\" fill-rule=\"evenodd\"/>"};
var help = {"viewBox":"0 0 20 20","body":"<circle cx=\"10\" cy=\"10\" r=\"9\" fill=\"currentColor\"/><path d=\"M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-4a1 1 0 1 0 0 2 1 1 0 1 0 0-2m0-10C8.346 4 7 5.346 7 7a1 1 0 1 0 2 0 1.001 1.001 0 1 1 1.591.808C9.58 8.548 9 9.616 9 10.737V11a1 1 0 1 0 2 0v-.263c0-.653.484-1.105.773-1.317A3.013 3.013 0 0 0 13 7c0-1.654-1.346-3-3-3\" />"};
var horizontalDots = {"viewBox":"0 0 20 20","body":"<path d=\"M6 10a2 2 0 1 1-4.001-.001A2 2 0 0 1 6 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 12 10zm6 0a2 2 0 1 1-4.001-.001A2 2 0 0 1 18 10z\" fill-rule=\"evenodd\"/>"};
var importIcon = {"viewBox":"0 0 20 20","body":"<path d=\"M13.707 6.707a.997.997 0 0 1-1.414 0L11 5.414V13a1 1 0 1 1-2 0V5.414L7.707 6.707a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 18H3a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2z\"/>"};
var notes = {"viewBox":"0 0 20 20","body":"<path d=\"M6 11h8V9H6v2zm0 4h8v-2H6v2zm0-8h4V5H6v2zm9.707-1.707l-3-3A.996.996 0 0 0 12 2H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V6a.997.997 0 0 0-.293-.707z\" fill-rule=\"evenodd\"/>"};
var print = {"viewBox":"0 0 20 20","body":"<path d=\"M14 11h2V9h-2v2zM7 7h6V4H7v3zm0 9h6v-2H7v2zm10-9h-2V3a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v4H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h2a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1z\" fill-rule=\"evenodd\"/>"};
var subtract = {"viewBox":"0 0 20 20","body":"<path d=\"M15 9H5a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2\" fill-rule=\"evenodd\"/>"};
var refresh = {"viewBox":"0 0 20 20","body":"<path d=\"M17 11a1 1 0 0 1 1 1c0 1.654-1.346 3-3 3H5.414l1.293 1.293a.999.999 0 1 1-1.414 1.414l-3-3a.999.999 0 0 1 0-1.414l3-3a.999.999 0 1 1 1.414 1.414L5.414 13H15c.552 0 1-.449 1-1a1 1 0 0 1 1-1zM3 9a1 1 0 0 1-1-1c0-1.654 1.346-3 3-3h9.586l-1.293-1.293a.999.999 0 1 1 1.414-1.414l3 3a.999.999 0 0 1 0 1.414l-3 3a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 7H5c-.552 0-1 .449-1 1a1 1 0 0 1-1 1z\" fill-rule=\"evenodd\"/>"};
var risk = {"viewBox":"0 0 20 20","body":"<path d=\"M9 12h2V8H9v4zm0 4h2v-2H9v2zm8.895.509l-7-14c-.339-.678-1.451-.678-1.79 0l-7 14A.999.999 0 0 0 3 17.956h14a1.001 1.001 0 0 0 .895-1.447z\" fill-rule=\"evenodd\"/>"};
var save = {"viewBox":"0 0 20 20","body":"<path d=\"M17 4h-3a1 1 0 1 0 0 2h2v10H4V4h3.586L9 5.414v5.172L7.707 9.293a1 1 0 0 0-1.414 1.414l3 3a.996.996 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 10.586V5a.997.997 0 0 0-.293-.707l-2-2A.994.994 0 0 0 8 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z\"/>"};
var search = {"viewBox":"0 0 20 20","body":"<path d=\"M8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8m9.707 4.293l-4.82-4.82A5.968 5.968 0 0 0 14 8 6 6 0 0 0 2 8a6 6 0 0 0 6 6 5.968 5.968 0 0 0 3.473-1.113l4.82 4.82a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414\" fill-rule=\"evenodd\"/>"};
var view = {"viewBox":"0 0 20 20","body":"<path d=\"M17.928 9.628C17.836 9.399 15.611 4 9.999 4S2.162 9.399 2.07 9.628a1.017 1.017 0 0 0 0 .744C2.162 10.601 4.387 16 9.999 16s7.837-5.399 7.929-5.628a1.017 1.017 0 0 0 0-.744zM9.999 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-6A2 2 0 1 0 10 12.001 2 2 0 0 0 10 8z\"/>"};
var styles$2 = {
"Icon": "p_xc",
"hasBackdrop": "p_mu",
"colorWhite": "p_cu",
"colorBlack": "p_at",
"colorSkyLighter": "p_kq",
"colorSkyLight": "p_yt",
"colorSky": "p_u5",
"colorSkyDark": "p_ar",
"colorInkLightest": "p_bm",
"colorInkLighter": "p_z2",
"colorInkLight": "p_ep",
"colorInk": "p_u8",
"colorBlueLighter": "p_b8",
"colorBlueLight": "p_ls",
"colorBlue": "p_wt",
"colorBlueDark": "p_pa",
"colorBlueDarker": "p_p0",
"colorIndigoLighter": "p_l2",
"colorIndigoLight": "p_vf",
"colorIndigo": "p_bb",
"colorIndigoDark": "p_t2",
"colorIndigoDarker": "p_xa",
"colorTealLighter": "p_yb",
"colorTealLight": "p_yi",
"colorTeal": "p_fy",
"colorTealDark": "p_jg",
"colorTealDarker": "p_tj",
"colorGreenLighter": "p_lx",
"colorGreen": "p_qh",
"colorGreenDark": "p_jj",
"colorYellowLighter": "p_sf",
"colorYellow": "p_ts",
"colorYellowDark": "p_sk",
"colorOrange": "p_cp",
"colorOrangeDark": "p_pe",
"colorRedLighter": "p_im",
"colorRed": "p_sn",
"colorRedDark": "p_ql",
"colorPurple": "p_jz",
"Svg": "p_aj",
"Placeholder": "p_tl",
"skeletonShimmerAnimation": "p_cs",
};
const BUNDLED_ICONS = {
add,
alert,
arrowDown,
arrowLeft,
arrowRight,
arrowUp,
arrowUpDown,
calendar,
cancel,
cancelSmall,
caretDown,
caretUp,
checkmark,
chevronDown,
chevronLeft,
chevronRight,
chevronUp,
circleCancel,
circleChevronDown,
circleChevronLeft,
circleChevronRight,
circleChevronUp,
circlePlus,
conversation,
delete: deleteIcon,
disable,
dispute,
duplicate,
embed,
export: exportIcon,
external,
help,
horizontalDots,
import: importIcon,
notes,
print,
refresh,
risk,
save,
search,
subtract,
view
};
const COLORS_WITH_BACKDROPS = ['teal', 'tealDark', 'greenDark', 'redDark', 'yellowDark', 'ink', 'inkLighter'];
function Icon$1({ source, color, backdrop, accessibilityLabel }) {
if (color && backdrop && COLORS_WITH_BACKDROPS.indexOf(color) < 0) {
// tslint:disable-next-line no-console
console.warn(`The ${color} icon doesn’t accept backdrops. The icon colors that have backdrops are: ${COLORS_WITH_BACKDROPS.join(', ')}`);
}
const className = styles.classNames(styles$2.Icon, color && styles$2[styles.variationName('color', color)], backdrop && styles$2.hasBackdrop);
let contentMarkup;
if (source === 'placeholder') {
contentMarkup = React.createElement('div', { className: styles$2.Placeholder });
} else {
const iconSource = typeof source === 'string' ? BUNDLED_ICONS[source] : source;
contentMarkup = React.createElement('svg', { className: styles$2.Svg, viewBox: iconSource.viewBox, dangerouslySetInnerHTML: { __html: iconSource.body } });
}
return React.createElement(
'span',
{ className: className, 'aria-label': accessibilityLabel },
contentMarkup
);
}
var styles$3 = {
"Spinner": "p_bd",
"loading": "p_h2",
"sizeSmall": "p_or",
"sizeLarge": "p_b5",
"colorWhite": "p_sm",
"colorTeal": "p_as",
"colorInkLightest": "p_ri",
"skeletonShimmerAnimation": "p_dc",
};
var spinnerSVGLarge = {"viewBox":"0 0 44 44","body":"<path d=\"M15.542 1.487A21.507 21.507 0 0 0 .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 0 0-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 1 0-.9-2.863z\" />"};
var spinnerSVGSmall = {"viewBox":"0 0 20 20","body":"<path d=\"M7.229 1.173a9.25 9.25 0 1 0 11.655 11.412 1.25 1.25 0 1 0-2.4-.698 6.75 6.75 0 1 1-8.506-8.329 1.25 1.25 0 1 0-.75-2.385z\" />"};
const COLORS_FOR_LARGE_SPINNER = ['teal', 'inkLightest'];
function Spinner$1({ size = 'large', color = 'teal', accessibilityLabel }) {
if (size === 'large' && COLORS_FOR_LARGE_SPINNER.indexOf(color) < 0) {
if (process.env.NODE_ENV === 'development') {
// tslint:disable-next-line no-console
console.warn(`The color ${color} is not meant to be used on ${size} spinners. The colors available on large spinners are: ${COLORS_FOR_LARGE_SPINNER.join(', ')}`);
}
size = 'small';
}
const className = styles.classNames(styles$3.Spinner, color && styles$3[styles.variationName('color', color)], size && styles$3[styles.variationName('size', size)]);
const spinnerSVG = size === 'large' ? spinnerSVGLarge : spinnerSVGSmall;
return React.createElement('svg', { viewBox: spinnerSVG.viewBox, dangerouslySetInnerHTML: { __html: spinnerSVG.body }, className: className, 'aria-label': accessibilityLabel, role: 'status' });
}
var styles$4 = {
"Button": "p_p5",
"disabled": "p_yz",
"primary": "p_z3",
"destructive": "p_ng",
"outline": "p_n5",
"loading": "p_zy",
"Spinner": "p_z8",
"plain": "p_gt",
"Content": "p_ll",
"fullWidth": "p_c6",
"sizeSlim": "p_rh",
"sizeLarge": "p_jm",
"iconOnly": "p_bk",
"Icon": "p_ec",
"skeletonShimmerAnimation": "p_iw",
};
function Button$1({ url, disabled, loading, children, accessibilityLabel, onClick, onFocus, onBlur, external, icon, primary, outline, destructive, disclosure, plain, submit, size, fullWidth }) {
const isDisabled = disabled || loading;
const className = reactUtilities.classNames(styles$4.Button, primary && styles$4.primary, outline && styles$4.outline, destructive && styles$4.destructive, isDisabled && styles$4.disabled, loading && styles$4.loading, plain && styles$4.plain, size && styles$4[reactUtilities.variationName('size', size)], fullWidth && styles$4.fullWidth, icon && children == null && styles$4.iconOnly);
const disclosureIconMarkup = disclosure ? React.createElement(
'span',
{ className: styles$4.Icon },
React.createElement(Icon$1, { source: loading ? 'placeholder' : 'caretDown' })
) : null;
const iconMarkup = icon ? React.createElement(
'span',
{ className: styles$4.Icon },
React.createElement(Icon$1, { source: loading ? 'placeholder' : icon })
) : null;
const childMarkup = children ? React.createElement(
'span',
null,
children
) : null;
const spinnerColor = primary || destructive ? 'white' : 'inkLightest';
const spinnerSVGMarkup = loading ? React.createElement(
'span',
{ className: styles$4.Spinner },
React.createElement(Spinner$1, { size: 'small', color: spinnerColor, accessibilityLabel: 'Loading' })
) : null;
const content = iconMarkup || disclosureIconMarkup ? React.createElement(
'span',
{ className: styles$4.Content },
spinnerSVGMarkup,
iconMarkup,
childMarkup,
disclosureIconMarkup
) : React.createElement(
'span',
{ className: styles$4.Content },
spinnerSVGMarkup,
childMarkup
);
const type = submit ? 'submit' : 'button';
return url ? React.createElement(
UnstyledLink$1,
{ url: url, external: external, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onMouseUp: handleMouseUpByBlurring, className: className, disabled: isDisabled, 'aria-label': accessibilityLabel },
content
) : React.createElement(
'button',
{ type: type, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onMouseUp: handleMouseUpByBlurring, className: className, disabled: isDisabled, 'aria-label': accessibilityLabel, role: loading ? 'alert' : undefined, 'aria-busy': loading ? true : undefined },
content
);
}
function buttonsFrom(actions, overrides = {}) {
if (actions.length != null) {
return actions.map((action, index) => buttonFrom(action, overrides, index));
} else {
return buttonFrom(actions, overrides);
}
}
function buttonFrom(_a, overrides, key) {
var content = _a.content,
onAction = _a.onAction,
action = tslib_1.__rest(_a, ["content", "onAction"]);
return React.createElement(Button$1, Object.assign({ key: key, children: content, onClick: onAction }, action, overrides));
}
var styles$5 = {
"ButtonGroup": "p_j7",
"segmented": "p_tx",
"Item": "p_cw",
"Item-focused": "p_ro",
"Item-plain": "p_hz",
"skeletonShimmerAnimation": "p_g3",
};
class Item extends React.PureComponent {
constructor() {
super(...arguments);
this.state = { focused: false };
}
render() {
const button = this.props.button;
const focused = this.state.focused;
const className = styles.classNames(styles$5.Item, focused && styles$5['Item-focused'], button.props.plain && styles$5['Item-plain']);
return React.createElement(
'div',
{ className: className, onFocus: this.handleFocus, onBlur: this.handleBlur },
button
);
}
handleFocus() {
this.setState({ focused: true });
}
handleBlur() {
this.setState({ focused: false });
}
}
tslib_1.__decorate([decorators.autobind], Item.prototype, "handleFocus", null);
tslib_1.__decorate([decorators.autobind], Item.prototype, "handleBlur", null);
function ButtonGroup$1({ children, segmented }) {
const className = styles.classNames(styles$5.ButtonGroup, segmented && styles$5.segmented);
const contents = components.elementChildren(children).map((child, index) => React.createElement(Item, { button: child, key: index }));
return React.createElement(
'div',
{ className: className },
contents
);
}
var styles$6 = {
"Stack": "p_gf",
"Item": "p_e9",
"noWrap": "p_mw",
"vertical": "p_v9",
"spacingNone": "p_gn",
"spacingExtraTight": "p_mv",
"spacingTight": "p_ix",
"spacingLoose": "p_x5",
"spacingExtraLoose": "p_rj",
"distributionLeading": "p_jx",
"distributionTrailing": "p_dw",
"distributionCenter": "p_ok",
"distributionEqualSpacing": "p_ff",
"distributionFill": "p_jn",
"distributionFillEvenly": "p_ch",
"alignmentLeading": "p_f9",
"alignmentTrailing": "p_qt",
"alignmentCenter": "p_ni",
"alignmentFill": "p_j0",
"alignmentBaseline": "p_vy",
"Item-fill": "p_ne",
"skeletonShimmerAnimation": "p_p9",
};
function Item$1({ children, fill }) {
const className = styles.classNames(styles$6.Item, fill && styles$6['Item-fill']);
return React.createElement(
'div',
{ className: className },
children
);
}
class Stack$1 extends React.PureComponent {
render() {
var _props = this.props;
const children = _props.children,
vertical = _props.vertical,
spacing = _props.spacing,
distribution = _props.distribution,
alignment = _props.alignment,
wrap = _props.wrap;
const className = styles.classNames(styles$6.Stack, vertical && styles$6.vertical, spacing && styles$6[styles.variationName('spacing', spacing)], distribution && styles$6[styles.variationName('distribution', distribution)], alignment && styles$6[styles.variationName('alignment', alignment)], wrap === false && styles$6.noWrap);
const itemMarkup = components.elementChildren(children).map((child, index) => {
const props = { key: index };
return components.wrapWithComponent(child, Item$1, props);
});
return React.createElement(
'div',
{ className: className },
itemMarkup
);
}
}
Stack$1.Item = Item$1;
var styles$7 = {
"Heading": "p_dy",
"skeletonShimmerAnimation": "p_i2",
};
function Heading$1({ element: Element = 'h2', children }) {
return React.createElement(
Element,
{ className: styles$7.Heading },
children
);
}
var styles$8 = {
"Card": "p_i7",
"subdued": "p_tf",
"Header": "p_g9",
"Section": "p_rg",
"Section-subdued": "p_iv",
"SectionHeader": "p_p8",
"Footer": "p_t1",
"skeletonShimmerAnimation": "p_lg",
};
function Header({ children, actions }) {
const actionMarkup = actions ? React.createElement(
ButtonGroup$1,
null,
buttonsFrom(actions, { plain: true })
) : null;
const headingMarkup = actionMarkup ? React.createElement(
Stack$1,
{ alignment: 'baseline' },
React.createElement(
Stack$1.Item,
{ fill: true },
React.createElement(
Heading$1,
null,
children
)
),
actionMarkup
) : React.createElement(
Heading$1,
null,
children
);
return React.createElement(
'div',
{ className: styles$8.Header },
headingMarkup
);
}
var styles$9 = {
"Subheading": "p_ds",
"skeletonShimmerAnimation": "p_e0",
};
function Subheading$1({ element: Element = 'h3', children }) {
const ariaLabel = typeof children === 'string' ? children : null;
return React.createElement(
Element,
{ 'aria-label': ariaLabel, className: styles$9.Subheading },
children
);
}
function Section({ children, title, subdued }) {
const headerContent = title ? React.createElement(
'div',
{ className: styles$8.SectionHeader },
React.createElement(
Subheading$1,
null,
title
)
) : null;
const className = styles.classNames(styles$8.Section, subdued && styles$8['Section-subdued']);
return React.createElement(
'div',
{ className: className },
headerContent,
children
);
}
class Card$1 extends React.PureComponent {
render() {
var _props = this.props;
const children = _props.children,
title = _props.title,
subdued = _props.subdued,
sectioned = _props.sectioned,
actions = _props.actions,
primaryFooterAction = _props.primaryFooterAction,
secondaryFooterAction = _props.secondaryFooterAction;
const className = styles.classNames(styles$8.Card, subdued && styles$8.subdued);
const headerMarkup = title ? React.createElement(
Header,
{ actions: actions },
title
) : null;
const content = sectioned ? React.createElement(
Section,
null,
children
) : children;
const primaryFooterActionMarkup = primaryFooterAction ? buttonFrom(primaryFooterAction, { primary: true }) : null;
const secondaryFooterActionMarkup = secondaryFooterAction ? buttonFrom(secondaryFooterAction) : null;
const footerMarkup = primaryFooterActionMarkup || secondaryFooterActionMarkup ? React.createElement(
'div',
{ className: styles$8.Footer },
React.createElement(
ButtonGroup$1,
null,
primaryFooterActionMarkup,
secondaryFooterActionMarkup
)
) : null;
return React.createElement(
'div',
{ className: className },
headerMarkup,
content,
footerMarkup
);
}
}
Card$1.Section = Section;
var styles$10 = {
"SettingAction": "p_wj",
"Setting": "p_gc",
"Action": "p_g1",
"skeletonShimmerAnimation": "p_d4",
};
function SettingAction$1({ action, children }) {
return React.createElement(
'div',
{ className: styles$10.SettingAction },
React.createElement(
'div',
{ className: styles$10.Setting },
children
),
React.createElement(
'div',
{ className: styles$10.Action },
action
)
);
}
var styles$11 = {
"variationPositive": "p_c2",
"variationNegative": "p_xx",
"variationStrong": "p_c0",
"variationSubdued": "p_jb",
"skeletonShimmerAnimation": "p_nl",
};
function TextStyle$1({ variation, children }) {
const className = styles.classNames(variation && styles$11[styles.variationName('variation', variation)]);
return React.createElement(
'span',
{ className: className },
children
);
}
var styles$12 = {
"TermsOfService": "p_d1",
"Content": "p_yv",
"skeletonShimmerAnimation": "p_ke",
};
function AccountConnection$1({ connected = false, action, avatarUrl, accountName = '', title, details, termsOfService }) {
const initials = accountName ? accountName.split(/\s+/).map(name => name[0]).join('') : undefined;
const avatarMarkup = connected ? React.createElement(Avatar$1, { accessibilityLabel: '', name: accountName, initials: initials, source: avatarUrl }) : null;
let titleMarkup = null;
if (title) {
titleMarkup = React.createElement(
'div',
null,
title
);
} else if (accountName) {
titleMarkup = React.createElement(
'div',
null,
accountName
);
}
const detailsMarkup = details ? React.createElement(
'div',
null,
React.createElement(
TextStyle$1,
{ variation: 'subdued' },
details
)
) : null;
const termsOfServiceMarkup = termsOfService ? React.createElement(
'div',
{ className: styles$12.TermsOfService },
termsOfService
) : null;
const actionElement = action ? buttonFrom(action, { primary: !connected }) : null;
return React.createElement(
Card$1,
{ sectioned: true },
React.createElement(
SettingAction$1,
{ action: actionElement },
React.createElement(
Stack$1,
null,
avatarMarkup,
React.createElement(
Stack$1.Item,
{ fill: true },
React.createElement(
'div',
{ className: styles$12.Content },
titleMarkup,
detailsMarkup
)
)
)
),
termsOfServiceMarkup
);
}
var styles$13 = {
"ActionList": "p_am",
"Section-withoutTitle": "p_o8",
"Actions": "p_w5",
"Title": "p_h5",
"Item": "p_o0",
"Image": "p_r9",
"disabled": "p_un",
"Content": "p_hd",
"Text": "p_n0",
"skeletonShimmerAnimation": "p_bo",
};
function Item$2({ content, url, onAction, icon, image, disabled }) {
const className = reactUtilities.classNames(styles$13.Item, disabled && styles$13.disabled);
let imageElement = null;
if (icon) {
imageElement = React.createElement(
'div',
{ className: styles$13.Image },
React.createElement(Icon$1, { source: icon })
);
} else if (image) {
imageElement = React.createElement('div', { role: 'presentation', className: styles$13.Image, style: { backgroundImage: `url(${image}` } });
}
const contentElement = imageElement ? React.createElement(
'div',
{ className: styles$13.Content },
imageElement,
React.createElement(
'div',
{ className: styles$13.Text },
content
)
) : content;
const control = url ? React.createElement(
UnstyledLink$1,
{ url: url, className: styles$13.Item },
contentElement
) : React.createElement(
'button',
{ onClick: onAction, className: className, disabled: disabled },
contentElement
);
return React.createElement(
'li',
null,
control
);
}
function ActionList$1({ items, sections = [] }) {
let finalSections = [];
if (items) {
finalSections = [{ items }].concat(sections);
} else if (sections) {
finalSections = sections;
}
const hasMultipleSections = finalSections.length > 1;
const Element = hasMultipleSections ? 'ul' : 'div';
const sectionMarkup = finalSections.map((section, index) => renderSection(section, hasMultipleSections, index));
return React.createElement(
Element,
{ className: styles$13.ActionList },
sectionMarkup
);
}
function renderSection(section, hasMultipleSections, index) {
const SectionElement = hasMultipleSections ? 'li' : 'div';
const actionMarkup = section.items.map(_a => {
var content = _a.content,
item = tslib_1.__rest(_a, ["content"]);
return React.createElement(Item$2, Object.assign({ key: content, content: content }, item));
});
const className = section.title ? null : styles$13['Section-withoutTitle'];
const titleMarkup = section.title ? React.createElement(
'p',
{ className: styles$13.Title },
section.title
) : null;
return React.createElement(
SectionElement,
{ key: section.title || index, className: className },
titleMarkup,
React.createElement(
'ul',
{ className: styles$13.Actions },
actionMarkup
)
);
}
var styles$14 = {
"VisuallyHidden": "p_pg",
"skeletonShimmerAnimation": "p_gv",
};
function VisuallyHidden$1({ children }) {
return React.createElement(
'span',
{ className: styles$14.VisuallyHidden },
children
);
}
var styles$15 = {
"Badge": "p_hv",
"Pip": "p_ce",
"statusSuccess": "p_af",
"statusInfo": "p_fm",
"statusAttention": "p_b7",
"statusWarning": "p_xe",
"progressIncomplete": "p_fu",
"progressPartiallyComplete": "p_pr",
"progressComplete": "p_l5",
"skeletonShi