@sparkpost/matchbox
Version:
A React UI component library
1,370 lines (1,143 loc) • 481 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var styled = require('styled-components');
var styledSystem = require('styled-system');
var matchboxIcons = require('@sparkpost/matchbox-icons');
var designTokens = require('@sparkpost/design-tokens');
var reactTransitionGroup = require('react-transition-group');
var props = require('@styled-system/props');
var css = require('@styled-system/css');
var DayPicker = require('react-day-picker');
var FocusLock = require('react-focus-lock');
var ScrollLock = require('react-scrolllock');
var ReactDOM = require('react-dom');
var copy = require('copy-to-clipboard');
var ResizeObserver = require('resize-observer-polyfill');
var PropTypes = require('prop-types');
var propTypes = require('@styled-system/prop-types');
var styledNormalize = require('styled-normalize');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
var css__default = /*#__PURE__*/_interopDefaultLegacy(css);
var DayPicker__default = /*#__PURE__*/_interopDefaultLegacy(DayPicker);
var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
var ScrollLock__default = /*#__PURE__*/_interopDefaultLegacy(ScrollLock);
var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
var copy__default = /*#__PURE__*/_interopDefaultLegacy(copy);
var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
function __rest(s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
}
function _defineProperty$7(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 _toConsumableArray$3(arr) { return _arrayWithoutHoles$3(arr) || _iterableToArray$3(arr) || _unsupportedIterableToArray$t(arr) || _nonIterableSpread$3(); }
function _nonIterableSpread$3() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray$t(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$t(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$t(o, minLen); }
function _iterableToArray$3(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles$3(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$t(arr); }
function _arrayLikeToArray$t(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
* Group a list of items into sub groups based on the value of each item's groupingKey
*
* @param {Array} list List of items to group
* @param {String} groupingKey Key to use for grouping each item by this value
*
* @example
* const list = [{ name: 'a', section: 1 }, { name: 'b', section: 2 }, { name: 'c', section: 1 }]
*
* groupBy(list, 'section')
*
* // returns
* {
* 1: [ { name: 'a', section: 1 }, { name: 'c', section: 1 } ],
* 2: [ { name: 'b', section: 2 } ]
* }
*/
var groupBy = function groupBy(list, groupingKey) {
return list.reduce(function (acc, item) {
var index = item[groupingKey];
return Object.assign(Object.assign({}, acc), _defineProperty$7({}, index, [].concat(_toConsumableArray$3(acc[index] || []), [item])));
}, {});
};
var groupByValues = function groupByValues(list, groupingKey) {
return Object.values(groupBy(list, groupingKey));
};
/**
* Filters by an array of actions by the visible key
* @param {Array} actions - Array of actions
*
* @example
* filterVisible([{ name: 'a', visible: true }, { name: 'b', visible: false }, { name: 'c' }])
*
* // returns
* [{ name: 'a' }, { name: 'c' }]
*/
var filterByVisible = function filterByVisible(actions) {
if (!actions) {
return [];
}
return actions.reduce(function (acc, _a) {
var _a$visible = _a.visible,
visible = _a$visible === void 0 ? true : _a$visible,
action = __rest(_a, ["visible"]);
if (visible) {
acc.push(action);
}
return acc;
}, []);
};
/* eslint-disable @typescript-eslint/no-explicit-any */
/**
* Omits styled system props from an object
* @param {Object} props
* @param {Array} names
*
* @example
* import { margin } from 'styled-system';
*
* omit({ my: '100', className: 'classs' }, margin.propNames)
* > { className: 'class' }
*/
function omit(props, names) {
var next = {};
var regex = new RegExp("^(".concat(names.join('|'), ")$"));
for (var key in props) {
if (regex.test(key)) continue;
next[key] = props[key];
}
return next;
}
/**
* Picks styled system props from an object
* @param {Object} props
* @param {Array} names
*
* @example
* import { margin } from 'styled-system';
*
* pick({ my: '100', py: '100' }, margin.propNames)
* > { my: '100' }
*/
function pick(props, names) {
var next = {};
var regex = new RegExp("^(".concat(names.join('|'), ")$"));
for (var key in props) {
if (!regex.test(key)) continue;
next[key] = props[key];
}
return next;
}
/**
* Returns a configuration object for styled-components with omitted props, to be used with .withConfig
* @param {Array} arr
* @param {Object} config
*
* @see https://styled-components.com/docs/api#shouldforwardprop
*/
function clean() {
var arr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
return Object.assign({
shouldForwardProp: function shouldForwardProp(prop, defaultFn) {
return !arr.includes(prop) && defaultFn(prop);
}
}, config);
}
function _toConsumableArray$2(arr) { return _arrayWithoutHoles$2(arr) || _iterableToArray$2(arr) || _unsupportedIterableToArray$s(arr) || _nonIterableSpread$2(); }
function _nonIterableSpread$2() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray$s(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$s(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$s(o, minLen); }
function _iterableToArray$2(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles$2(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$s(arr); }
function _arrayLikeToArray$s(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _templateObject$1p() {
var data = _taggedTemplateLiteral$1p(["\n ", "\n ", "\n"]);
_templateObject$1p = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1p(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var system$f = styledSystem.compose(styledSystem.border, styledSystem.color, styledSystem.flexbox, styledSystem.grid, styledSystem.layout, styledSystem.position, styledSystem.shadow, styledSystem.space, styledSystem.typography);
var truncate$1 = function truncate(props) {
if (props.truncate) {
return "\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n ";
}
return '';
};
var Box = styled__default["default"].div.withConfig(clean([].concat(_toConsumableArray$2(system$f.propNames), ['truncate'])))(_templateObject$1p(), system$f, truncate$1);
Box.displayName = 'Box';
function _templateObject$1o() {
var data = _taggedTemplateLiteral$1o(["\n a,\n a:visited {\n color: ", ";\n }\n"]);
_templateObject$1o = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1o(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var StyledText$1 = styled__default["default"](Box)(_templateObject$1o(), designTokens.tokens.color_gray_700);
function HelpText(props) {
var id = props.id,
children = props.children,
_props$ml = props.ml,
ml = _props$ml === void 0 ? '0' : _props$ml,
_props$mt = props.mt,
mt = _props$mt === void 0 ? '100' : _props$mt;
return /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
id: id,
fontSize: "200",
lineHeight: "200",
m: "0",
ml: ml,
mt: mt,
color: "gray.700"
}, children);
}
HelpText.displayName = 'HelpText';
function _templateObject$1n() {
var data = _taggedTemplateLiteral$1n(["\n ", "\n ", "\n"]);
_templateObject$1n = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1n(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var system$e = styledSystem.compose(styledSystem.color, styledSystem.space, styledSystem.typography);
var Styledlink = styled__default["default"].a(_templateObject$1n(), system$e, function (props) {
if (props.$disabled) {
return "\n &, &:visited {\n opacity: 0.6;\n color: ".concat(props.theme.colors.gray['900'], ";\n pointer-events: none;\n }\n ");
}
});
/**
* UnstyledLink component
* @see https://design.sparkpost.com/components/unstyledlink/api
*/
var UnstyledLink = /*#__PURE__*/React__default["default"].forwardRef(function UnstyledLink(props, ref) {
var children = props.children,
to = props.to,
title = props.title,
Component = props.Component,
component = props.component,
as = props.as,
external = props.external,
onClick = props.onClick,
role = props.role,
disabled = props.disabled,
tabIndex = props.tabIndex,
rest = __rest(props, ["children", "to", "title", "Component", "component", "as", "external", "onClick", "role", "disabled", "tabIndex"]);
var WrapperComponent = as || component || Component;
var linkTitle = external && !title ? 'Opens in a new tab' : title;
var linkRole = role ? role : !!onClick ? 'button' : null;
var disabledAttributes = {
'aria-disabled': disabled,
disabled: disabled,
tabIndex: disabled ? -1 : tabIndex,
onClick: disabled ? function () {
return false;
} : onClick
};
if (to && !WrapperComponent) {
return /*#__PURE__*/React__default["default"].createElement(Styledlink, Object.assign({
href: typeof to === 'string' ? to : null,
target: external ? '_blank' : '',
rel: external ? 'noopener noreferrer' : '',
title: linkTitle,
onClick: onClick,
role: role,
ref: ref
}, rest, disabledAttributes), children);
}
if (WrapperComponent) {
return /*#__PURE__*/React__default["default"].createElement(Styledlink, Object.assign({
as: WrapperComponent,
onClick: onClick,
ref: ref,
role: role,
title: linkTitle,
to: to
}, rest, disabledAttributes), children);
}
return /*#__PURE__*/React__default["default"].createElement(Styledlink, Object.assign({
title: linkTitle,
role: linkRole,
onClick: onClick,
ref: ref
}, rest, disabledAttributes), children);
});
UnstyledLink.displayName = 'UnstyledLink';
function linkFrom(_a, key) {
var content = _a.content,
children = _a.children,
action = __rest(_a, ["content", "children"]);
return /*#__PURE__*/React__default["default"].createElement(UnstyledLink, Object.assign({
key: key
}, action), content, children);
}
var buttonReset = "\n border: none;\n margin: 0;\n padding: 0;\n overflow: visible;\n width: auto;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: normal;\n -webkit-font-smoothing: inherit;\n -moz-osx-font-smoothing: inherit;\n -webkit-appearance: none;\n\n &::-moz-focus-inner {\n border: 0;\n padding: 0;\n }\n";
var visuallyHidden = "\n border: 0 !important;\n clip: rect(1px, 1px, 1px, 1px) !important;\n clip-path: inset(50%) !important;\n height: 1px !important;\n margin: -1px !important;\n overflow: hidden !important;\n padding: 0 !important;\n position: absolute !important;\n width: 1px !important;\n word-wrap: normal !important;\n";
/**
* Creates focus styles on an :after pseudo-element.
* @param string Color of the focus ring. Defaults to color_blue_700.
* @param modifier CSS selector to target the pseudo-element with the ring, defaults to '&:focus'
* @param offset Pixel offset of the focus ring. Defaults to '3px'.
* @param radius Border radius of the focus ring. Defaults to borderRadius_200.
*
* @example
* const Styled = styled.div`
* ${focusOutline({ color: 'gray', modifier: '&:focus-within' })}
* `;
*/
var focusOutline = function focusOutline() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
_ref$color = _ref.color,
color = _ref$color === void 0 ? designTokens.tokens.color_blue_700 : _ref$color,
_ref$modifier = _ref.modifier,
modifier = _ref$modifier === void 0 ? '&:focus' : _ref$modifier,
_ref$offset = _ref.offset,
offset = _ref$offset === void 0 ? '3px' : _ref$offset,
_ref$radius = _ref.radius,
radius = _ref$radius === void 0 ? designTokens.tokens.borderRadius_200 : _ref$radius;
return "\n position: relative;\n outline: none;\n\n &:after {\n position: absolute;\n content: \"\";\n display: block;\n top: -".concat(offset, ";\n left: -").concat(offset, ";\n right: -").concat(offset, ";\n bottom: -").concat(offset, ";\n transition: box-shadow ").concat(designTokens.tokens.motionDuration_fast, ";\n border-radius: ").concat(radius, ";\n box-shadow: none;\n pointer-events: none;\n } \n\n ").concat(modifier, ":after {\n z-index: ").concat(designTokens.tokens.zIndex_default, ";\n box-shadow: 0 0 0 2px ").concat(color, ";\n }\n");
};
function _templateObject3$n() {
var data = _taggedTemplateLiteral$1m(["\n ", "\n ", "\n &,\n &:visited {\n text-decoration: none;\n color: ", ";\n background: ", ";\n }\n &:disabled {\n opacity: 0.6;\n pointer-events: none;\n }\n"]);
_templateObject3$n = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2$E() {
var data = _taggedTemplateLiteral$1m(["\n ", "\n &,\n &:visited {\n text-decoration: none;\n color: ", ";\n background: ", ";\n }\n ", "\n"]);
_templateObject2$E = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$1m() {
var data = _taggedTemplateLiteral$1m(["\n border-top: ", ";\n padding-bottom: ", ";\n padding-top: ", ";\n\n &:first-child {\n border: none;\n padding-top: ", ";\n }\n\n &:last-child {\n padding-bottom: ", ";\n }\n"]);
_templateObject$1m = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1m(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var StyledSection$1 = styled__default["default"](Box)(_templateObject$1m(), function (props) {
return props.theme.borders['300'];
}, designTokens.tokens.spacing_200, designTokens.tokens.spacing_200, designTokens.tokens.spacing_0, designTokens.tokens.spacing_0);
var shared = "\n display: block;\n width: 100%;\n padding: ".concat(designTokens.tokens.spacing_200, " ").concat(designTokens.tokens.spacing_300, ";\n transition: ").concat(designTokens.tokens.motionDuration_fast, " ").concat(designTokens.tokens.motionEase_in_out, ";\n transition-property: color, background;\n cursor: pointer;\n font-size: ").concat(designTokens.tokens.fontSize_300, ";\n line-height: ").concat(designTokens.tokens.lineHeight_300, ";\n text-align: left;\n\n &:hover,\n &:focus {\n outline: none;\n color: ").concat(designTokens.tokens.color_gray_900, ";\n background: ").concat(designTokens.tokens.color_blue_100, ";\n }\n");
var StyledLink$4 = styled__default["default"](UnstyledLink)(_templateObject2$E(), shared, function (props) {
return props.$highlighted ? designTokens.tokens.color_blue_700 : designTokens.tokens.color_gray_900;
}, function (props) {
return props.$highlighted ? designTokens.tokens.color_blue_200 : 'none';
}, function (props) {
return props.$disabled ? "\n opacity: 0.6;\n pointer-events: none;\n " : '';
});
var StyledButton$4 = styled__default["default"].button(_templateObject3$n(), buttonReset, shared, function (props) {
return props.$highlighted ? designTokens.tokens.color_blue_700 : designTokens.tokens.color_gray_900;
}, function (props) {
return props.$highlighted ? designTokens.tokens.color_blue_200 : 'none';
});
function Content$4(props) {
var content = props.content,
children = props.children,
selected = props.selected,
helpText = props.helpText;
return /*#__PURE__*/React__default["default"].createElement(Box, {
as: "span",
alignItems: "flex-start",
display: "flex"
}, /*#__PURE__*/React__default["default"].createElement(Box, {
as: "span",
flex: "1",
fontSize: "300",
lineHeight: "300"
}, content || children), selected && /*#__PURE__*/React__default["default"].createElement(Box, {
as: "span",
color: "blue.700"
}, /*#__PURE__*/React__default["default"].createElement(matchboxIcons.CheckBox, {
size: 20
})), helpText && /*#__PURE__*/React__default["default"].createElement(HelpText, null, helpText));
} // TODO fix this any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var ButtonAction = /*#__PURE__*/React__default["default"].forwardRef(function ButtonAction(props, userRef) {
var content = props.content,
children = props.children,
disabled = props.disabled,
helpText = props.helpText,
selected = props.selected,
highlighted = props.highlighted,
action = __rest(props, ["content", "children", "disabled", "helpText", "selected", "highlighted"]);
return /*#__PURE__*/React__default["default"].createElement(StyledButton$4, Object.assign({
type: "button",
disabled: disabled,
role: "menuitem",
tabIndex: -1,
"$highlighted": highlighted,
ref: userRef
}, action), /*#__PURE__*/React__default["default"].createElement(Content$4, {
content: content,
helpText: helpText,
selected: selected
}, children));
}); // TODO fix this any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var LinkAction = /*#__PURE__*/React__default["default"].forwardRef(function LinkAction(props, userRef) {
var content = props.content,
children = props.children,
disabled = props.disabled,
helpText = props.helpText,
selected = props.selected,
tabIndex = props.tabIndex,
onClick = props.onClick,
highlighted = props.highlighted,
action = __rest(props, ["content", "children", "disabled", "helpText", "selected", "tabIndex", "onClick", "highlighted"]);
var disabledAttributes = {
'aria-disabled': disabled,
disabled: disabled,
tabIndex: disabled ? -1 : tabIndex,
onClick: disabled ? function () {
return false;
} : onClick
};
return /*#__PURE__*/React__default["default"].createElement(StyledLink$4, Object.assign({
"$disabled": disabled,
role: "menuitem",
tabIndex: -1,
"$highlighted": highlighted,
ref: userRef
}, action, disabledAttributes), /*#__PURE__*/React__default["default"].createElement(Content$4, {
content: content,
helpText: helpText,
selected: selected
}, children));
});
var Action$3 = /*#__PURE__*/React__default["default"].forwardRef(function Action(props, userRef) {
var _props$is = props.is,
is = _props$is === void 0 ? 'link' : _props$is,
action = __rest(props, ["is"]);
if (is === 'button') {
return /*#__PURE__*/React__default["default"].createElement(ButtonAction, Object.assign({
ref: userRef
}, action));
}
return /*#__PURE__*/React__default["default"].createElement(LinkAction, Object.assign({
ref: userRef
}, action));
});
Action$3.displayName = 'ActionList.Action';
var Section$3 = /*#__PURE__*/React__default["default"].forwardRef(function Section(props, userRef) {
var section = props.section,
children = props.children;
if (children) {
return /*#__PURE__*/React__default["default"].createElement(StyledSection$1, {
ref: userRef
}, children);
}
var visibleActions = section ? filterByVisible(section).map(function (action, i) {
return /*#__PURE__*/React__default["default"].createElement(Action$3, Object.assign({
key: i
}, action));
}) : [];
if (!visibleActions.length) {
return null;
}
return /*#__PURE__*/React__default["default"].createElement(StyledSection$1, {
ref: userRef
}, visibleActions);
});
Section$3.displayName = 'ActionList.Section';
var keys$1 = {
backspace: {
key: 'Backspace',
keyCode: 8,
shiftKey: false
},
enter: {
key: 'Enter',
keyCode: 13,
shiftKey: false
},
escape: {
key: 'Escape',
keyCode: 27,
shiftKey: false
},
arrowRight: {
key: 'ArrowRight',
keyCode: 39,
shiftKey: false
},
arrowLeft: {
key: 'ArrowLeft',
keyCode: 37,
shiftKey: false
},
arrowUp: {
key: 'ArrowUp',
keyCode: 38,
shiftKey: false
},
arrowDown: {
key: 'ArrowDown',
keyCode: 40,
shiftKey: false
},
home: {
key: 'Home',
keyCode: 36,
shiftKey: false
},
end: {
key: 'End',
keyCode: 35,
shiftKey: false
},
space: {
key: ' ',
keyCode: 32,
shiftKey: false
},
pageUp: {
key: 'PageUp',
keyCode: 33,
shiftKey: false
},
pageDown: {
key: 'PageDown',
keyCode: 34,
shiftKey: false
},
tab: {
key: 'Tab',
keyCode: 9,
shiftKey: false
}
};
function compareEvent(event, e) {
return !!keys$1[event] && (e.key === keys$1[event].key || e.keyCode === keys$1[event].keyCode) && e.shiftKey === keys$1[event].shiftKey;
}
/**
* Key down event handler
* @example onKey('escape', () => foo())(e)
*/
function onKey(event, callback) {
return function handleEvent(e) {
if (compareEvent(event, e)) {
return callback(e);
}
};
}
/**
* Multiple key down event handler
* @example onKeys(['escape', 'enter'], () => foo())(e)
*/
function onKeys(events, callback) {
return function handleEvents(e) {
events.forEach(function (event) {
return onKey(event, callback)(e);
});
};
}
/**
* Combines multiple refs
*/
function combineRefs() {
for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
refs[_key] = arguments[_key];
}
return function (value) {
refs.forEach(function (ref) {
if (typeof ref === 'function') {
ref(value);
} else if (ref != null) {
ref.current = value;
}
});
};
}
function _slicedToArray$p(arr, i) { return _arrayWithHoles$p(arr) || _iterableToArrayLimit$p(arr, i) || _unsupportedIterableToArray$r(arr, i) || _nonIterableRest$p(); }
function _nonIterableRest$p() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray$r(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$r(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$r(o, minLen); }
function _arrayLikeToArray$r(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit$p(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles$p(arr) { if (Array.isArray(arr)) return arr; }
function _templateObject$1l() {
var data = _taggedTemplateLiteral$1l(["\n ", "\n overflow-y: auto;\n"]);
_templateObject$1l = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1l(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var system$d = styledSystem.compose(styledSystem.margin, styledSystem.maxHeight, styledSystem.layout);
var Wrapper$8 = styled__default["default"].div(_templateObject$1l(), system$d);
var ActionList = /*#__PURE__*/React__default["default"].forwardRef(function ActionList(props, userRef) {
var _props$actions = props.actions,
actions = _props$actions === void 0 ? [] : _props$actions,
labelledBy = props['aria-labelledby'],
className = props.className,
children = props.children,
dataId = props['data-id'],
id = props.id,
_props$sections = props.sections,
sections = _props$sections === void 0 ? [] : _props$sections,
_props$maxHeight = props.maxHeight,
maxHeight = _props$maxHeight === void 0 ? 'none' : _props$maxHeight,
onClick = props.onClick,
_props$groupByKey = props.groupByKey,
groupByKey = _props$groupByKey === void 0 ? 'section' : _props$groupByKey,
rest = __rest(props, ["actions", 'aria-labelledby', "className", "children", 'data-id', "id", "sections", "maxHeight", "onClick", "groupByKey"]); // TODO Remove `actions` and `sections` support in favor of composable components
var list = actions && actions.length ? groupByValues(actions, groupByKey) : [];
if (sections && sections.length) {
list = list.concat(sections);
}
var listMarkup = list.map(function (section, index) {
return /*#__PURE__*/React__default["default"].createElement(Section$3, {
section: section,
key: index
});
});
var wrapperRef = React__default["default"].useRef(null);
var _React$useState = React__default["default"].useState([]),
_React$useState2 = _slicedToArray$p(_React$useState, 2),
focusableItemList = _React$useState2[0],
setFocusableItemList = _React$useState2[1];
var _React$useState3 = React__default["default"].useState(0),
_React$useState4 = _slicedToArray$p(_React$useState3, 2),
focusIndex = _React$useState4[0],
setFocusIndex = _React$useState4[1]; // Creates a list of focusable links or buttons inside the actionlist
React__default["default"].useEffect(function () {
if (!!wrapperRef && wrapperRef.current) {
setFocusableItemList(wrapperRef.current.querySelectorAll('[role="menuitem"]:not(:disabled):not([aria-disabled="true"])'));
}
}, []);
React__default["default"].useLayoutEffect(function () {
if (focusableItemList[focusIndex]) {
// Honestly not sure why this doesn't work without a timeout
setTimeout(function () {
focusableItemList[focusIndex].focus();
}, 10);
}
}, [focusIndex, focusableItemList]);
function handleKeyDown(e) {
onKey('arrowDown', function () {
// Stop arrow keys from scrolling the page
e.preventDefault();
if (focusIndex < focusableItemList.length - 1) {
setFocusIndex(focusIndex + 1);
} else {
setFocusIndex(0);
}
})(e);
onKey('arrowUp', function () {
// Stop arrow keys from scrolling the page
e.preventDefault();
if (focusIndex <= 0) {
setFocusIndex(focusableItemList.length - 1);
} else {
setFocusIndex(focusIndex - 1);
}
})(e);
}
return /*#__PURE__*/React__default["default"].createElement(Wrapper$8, Object.assign({
"aria-labelledby": labelledBy,
className: className,
"data-id": dataId,
id: id,
maxHeight: typeof maxHeight === 'number' ? "".concat(maxHeight, "px") : maxHeight,
onClick: onClick,
tabIndex: -1,
role: "menu",
ref: combineRefs(wrapperRef, userRef),
onKeyDown: handleKeyDown
}, rest), listMarkup, children);
});
ActionList.displayName = 'ActionList';
ActionList.Section = Section$3;
ActionList.Action = Action$3;
function _templateObject$1k() {
var data = _taggedTemplateLiteral$1k(["\n ", "\n box-sizing: border-box;\n"]);
_templateObject$1k = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1k(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var Wrapper$7 = styled__default["default"](Box)(_templateObject$1k(), styledSystem.margin);
var bgMap = {
lightGray: 'gray.200',
darkGray: 'gray.300',
green: 'green.300',
blue: 'blue.300',
red: 'red.300',
white: 'transparent',
black: 'transparent'
};
var colorMap = {
lightGray: 'gray.900',
darkGray: 'gray.900',
green: 'green.900',
blue: 'blue.800',
red: 'red.800',
white: 'white',
black: 'gray.900'
};
var borderMap = {
lightGray: 'gray.400',
darkGray: 'gray.400',
green: 'green.400',
blue: 'blue.400',
red: 'red.400',
white: 'white',
black: 'gray.900'
};
var Badge = /*#__PURE__*/React__default["default"].forwardRef(function Badge(props, userRef) {
var children = props.children,
_props$color = props.color,
color = _props$color === void 0 ? 'lightGray' : _props$color,
rest = __rest(props, ["children", "color"]);
return /*#__PURE__*/React__default["default"].createElement(Wrapper$7, Object.assign({
display: "inline-block",
borderRadius: "pill",
px: "100",
bg: bgMap[color],
color: colorMap[color],
borderWidth: "100",
borderStyle: "solid",
borderColor: borderMap[color],
fontSize: "50",
fontWeight: "medium",
lineHeight: "calc(1rem - 2px)",
ref: userRef
}, rest), children);
});
Badge.displayName = 'Badge';
var truncate = function truncate(props) {
if (props.$truncate) {
return "\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n ";
}
return '';
};
var lookslike = function lookslike(props) {
var styles = '';
switch (props.$looksLike) {
case 'h1':
styles = "\n font-size: ".concat(designTokens.tokens.fontSize_700, ";\n line-height: ").concat(designTokens.tokens.lineHeight_700, ";\n font-weight: ").concat(designTokens.tokens.fontWeight_semibold, ";\n ");
break;
case 'h2':
styles = "\n font-size: ".concat(designTokens.tokens.fontSize_600, ";\n line-height: ").concat(designTokens.tokens.lineHeight_600, ";\n font-weight: ").concat(designTokens.tokens.fontWeight_semibold, ";\n ");
break;
case 'h3':
styles = "\n font-size: ".concat(designTokens.tokens.fontSize_500, ";\n line-height: ").concat(designTokens.tokens.lineHeight_500, ";\n font-weight: ").concat(designTokens.tokens.fontWeight_semibold, ";\n ");
break;
case 'h4':
styles = "\n font-size: ".concat(designTokens.tokens.fontSize_400, ";\n line-height: ").concat(designTokens.tokens.lineHeight_400, ";\n font-weight: ").concat(designTokens.tokens.fontWeight_semibold, ";\n ");
break;
case 'h5':
styles = "\n font-size: ".concat(designTokens.tokens.fontSize_300, ";\n line-height: ").concat(designTokens.tokens.lineHeight_300, ";\n font-weight: ").concat(designTokens.tokens.fontWeight_semibold, ";\n ");
break;
case 'h6':
styles = "\n font-size: ".concat(designTokens.tokens.fontSize_200, ";\n line-height: ").concat(designTokens.tokens.lineHeight_200, ";\n font-weight: ").concat(designTokens.tokens.fontWeight_semibold, ";\n ");
break;
case 'p':
styles = "\n font-size: ".concat(designTokens.tokens.fontSize_300, ";\n line-height: ").concat(designTokens.tokens.lineHeight_300, ";\n font-weight: ").concat(designTokens.tokens.fontWeight_normal, ";\n ");
break;
}
return styles;
};
function _toConsumableArray$1(arr) { return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$q(arr) || _nonIterableSpread$1(); }
function _nonIterableSpread$1() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray$q(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$q(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$q(o, minLen); }
function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$q(arr); }
function _arrayLikeToArray$q(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _templateObject$1j() {
var data = _taggedTemplateLiteral$1j(["\n ", "\n ", "\n ", "\n"]);
_templateObject$1j = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1j(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var system$c = styledSystem.compose(styledSystem.color, styledSystem.space, styledSystem.typography);
var StyledText = styled__default["default"].p.withConfig(clean([].concat(_toConsumableArray$1(system$c.propNames), ['truncate'])))(_templateObject$1j(), system$c, truncate, lookslike);
var Text = /*#__PURE__*/React__default["default"].forwardRef(function Text(props, ref) {
var _props$as = props.as,
as = _props$as === void 0 ? 'p' : _props$as,
looksLike = props.looksLike,
children = props.children,
truncate = props.truncate,
rest = __rest(props, ["as", "looksLike", "children", "truncate"]);
return /*#__PURE__*/React__default["default"].createElement(StyledText, Object.assign({
as: as,
"$looksLike": looksLike,
"$truncate": truncate,
ref: ref
}, rest), children);
});
Text.displayName = 'Text';
var negativeTop = styledSystem.system({
$gutter: {
property: 'marginTop',
scale: 'space',
transform: function transform(value, scale) {
return "calc(-".concat(scale[value] || value, " - 1px)");
}
}
});
var negativeLeft = styledSystem.system({
$gutter: {
property: 'marginLeft',
scale: 'space',
transform: function transform(value, scale) {
return "-".concat(scale[value] || value);
}
}
});
var alignChildren = styledSystem.system({
$align: {
property: 'justifyContent',
defaultScale: {
center: 'center',
left: 'flex-start',
right: 'flex-end'
}
}
});
var alignYChildren = styledSystem.system({
$alignY: {
property: 'alignItems',
defaultScale: {
center: 'center',
top: 'flex-start',
bottom: 'flex-end'
}
}
});
function _templateObject2$D() {
var data = _taggedTemplateLiteral$1i(["\n display: flex;\n flex-wrap: wrap;\n ", "\n ", "\n ", "\n"]);
_templateObject2$D = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$1i() {
var data = _taggedTemplateLiteral$1i(["\n padding-top: 1px;\n &:before {\n display: block;\n content: '';\n ", "\n }\n"]);
_templateObject$1i = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1i(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// This is set here to prevent margin collapse
var OuterWrapper$1 = styled__default["default"]('div')(_templateObject$1i(), negativeTop); // Negates children padding left and aligns content
var InnerWrapper = styled__default["default"]('div')(_templateObject2$D(), negativeLeft, alignChildren, alignYChildren);
function Inline(props) {
var children = props.children,
align = props.align,
_props$alignY = props.alignY,
alignY = _props$alignY === void 0 ? 'center' : _props$alignY,
_props$space = props.space,
space = _props$space === void 0 ? '400' : _props$space;
var items = React__default["default"].Children.toArray(children);
return /*#__PURE__*/React__default["default"].createElement(OuterWrapper$1, {
"$gutter": space,
"data-id": props['data-id']
}, /*#__PURE__*/React__default["default"].createElement(InnerWrapper, {
"$gutter": space,
"$align": align,
"$alignY": alignY
}, items.map(function (child, i) {
return /*#__PURE__*/React__default["default"].createElement(Box, {
key: i,
pt: space,
pl: space
}, child);
})));
}
Inline.displayName = 'Inline';
function _templateObject$1h() {
var data = _taggedTemplateLiteral$1h(["\n ", "\n"]);
_templateObject$1h = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1h(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var StyledScreenReaderOnly = styled__default["default"]('span')(_templateObject$1h(), visuallyHidden);
var ScreenReaderOnly = function ScreenReaderOnly(_ref) {
var children = _ref.children,
_ref$as = _ref.as,
as = _ref$as === void 0 ? 'span' : _ref$as,
id = _ref.id;
return /*#__PURE__*/React__default["default"].createElement(StyledScreenReaderOnly, {
id: id,
as: as
}, children);
};
ScreenReaderOnly.displayName = 'ScreenReaderOnly';
function container(props) {
switch (props.$status) {
case 'success':
return "\n background: ".concat(designTokens.tokens.color_green_100, ";\n border: 1px solid ").concat(designTokens.tokens.color_green_600, ";\n ");
case 'warning':
return "\n background: ".concat(designTokens.tokens.color_yellow_100, ";\n border: 1px solid ").concat(designTokens.tokens.color_yellow_500, ";\n ");
case 'danger':
return "\n background: ".concat(designTokens.tokens.color_red_100, ";\n border: 1px solid ").concat(designTokens.tokens.color_red_700, ";\n ");
case 'muted':
case 'promo':
return "\n background: ".concat(designTokens.tokens.color_gray_100, ";\n border: 1px solid ").concat(designTokens.tokens.color_gray_400, ";\n ");
case 'default':
default:
return "\n background: ".concat(designTokens.tokens.color_blue_100, ";\n border: 1px solid ").concat(designTokens.tokens.color_blue_600, ";\n ");
}
} // Overwrites unstyled link colors within Banner content to be color-contrast accessible
function childLinks(props) {
return "\n p, ul, ol {\n font-size: ".concat(props.theme.fontSizes[200], ";\n a, a: visited {\n color: ").concat(designTokens.tokens.color_blue_800, ";\n &: hover {\n color: ").concat(designTokens.tokens.color_blue_900, ";\n }\n }\n}\n");
}
var statusIcons = {
success: {
iconName: matchboxIcons.CheckCircleOutline,
iconLabel: 'Success',
bg: 'green.600',
fill: 'green.700'
},
info: {
iconName: matchboxIcons.InfoOutline,
iconLabel: 'Info',
bg: 'blue.700',
fill: 'blue.700'
},
warning: {
iconName: matchboxIcons.ReportProblemOutlined,
iconLabel: 'Warning',
bg: 'yellow.300',
fill: 'yellow.700'
},
danger: {
iconName: matchboxIcons.ErrorOutline,
iconLabel: 'Error',
bg: 'red.700',
fill: 'red.700'
},
promo: {
iconName: matchboxIcons.Rocket,
bg: 'gray.900',
fill: 'gray.900'
}
};
function dismissBase() {
return "\ntransition: background ".concat(designTokens.tokens.motionDuration_fast, " ").concat(designTokens.tokens.motionEase_in_out, ";\n &: hover {\n cursor: pointer;\n}\n");
}
function dismissColor(props) {
switch (props.$status) {
case 'success':
return "\n &: hover {\n background: ".concat(designTokens.tokens.color_green_300, ";\n}\n");
case 'warning':
return "\n &: hover {\n background: ".concat(designTokens.tokens.color_yellow_300, ";\n}\n");
case 'danger':
return "\n &: hover {\n background: ".concat(designTokens.tokens.color_red_300, ";\n}\n");
// Gray banner no longer exists as of 4.0.0
case 'default':
default:
return "\n &: hover {\n background: ".concat(designTokens.tokens.color_blue_300, ";\n}\n");
}
}
/**
* Finds and clones a React component from display name
* @param {string} name
* @param {element} children
* @param {object} props
*
* @example
* getChild('MyChildComponent', props.children, { extra: 'prop' })
*/
function getChild(name, children) {
var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
return React__default["default"].Children.map(children, function (child, index) {
if ( /*#__PURE__*/React__default["default"].isValidElement(child) && typeof child.type !== 'string' && (child.type.displayName === name || child.type.name === name)) {
props.index = index;
return /*#__PURE__*/React__default["default"].cloneElement(child, props);
}
return null;
});
}
function excludeChild(names, children) {
return React__default["default"].Children.map(children, function (child) {
if ( /*#__PURE__*/React__default["default"].isValidElement(child) && names.includes(child.type.displayName)) {
return null;
}
return child;
});
}
function _templateObject10() {
var data = _taggedTemplateLiteral$1g(["\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n"]);
_templateObject10 = function _templateObject10() {
return data;
};
return data;
}
function _templateObject9() {
var data = _taggedTemplateLiteral$1g(["\n 0% {\n stroke-dasharray: 1 200;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 120 200;\n stroke-dashoffset: -25;\n }\n 100% {\n stroke-dasharray: 120 200;\n stroke-dashoffset: -145;\n }\n"]);
_templateObject9 = function _templateObject9() {
return data;
};
return data;
}
function _templateObject8() {
var data = _taggedTemplateLiteral$1g(["\n 0% {\n stroke-dasharray: 1 100;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 60 100;\n stroke-dashoffset: -15;\n }\n 100% {\n stroke-dasharray: 80 100;\n stroke-dashoffset: -68;\n }\n"]);
_templateObject8 = function _templateObject8() {
return data;
};
return data;
}
function _templateObject7$2() {
var data = _taggedTemplateLiteral$1g(["\n 0% {\n stroke-dasharray: 1 50;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 30 50;\n stroke-dashoffset: -10;\n }\n 100% {\n stroke-dasharray: 40 50;\n stroke-dashoffset: -48;\n }\n"]);
_templateObject7$2 = function _templateObject7() {
return data;
};
return data;
}
function _templateObject6$3() {
var data = _taggedTemplateLiteral$1g(["\n animation: ", " 1.5s ease-in-out infinite;\n "]);
_templateObject6$3 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5$a() {
var data = _taggedTemplateLiteral$1g(["\n stroke: ", ";\n stroke-width: ", ";\n stroke-linecap: round;\n\n ", "\n "]);
_templateObject5$a = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4$e() {
var data = _taggedTemplateLiteral$1g(["\n stroke-dasharray: 55 100;\n stroke-dashoffset: -15;\n "]);
_templateObject4$e = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3$m() {
var data = _taggedTemplateLiteral$1g(["\n stroke-dasharray: 110 200;\n stroke-dashoffset: -25;\n "]);
_templateObject3$m = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2$C() {
var data = _taggedTemplateLiteral$1g(["\n stroke-dasharray: 35 50;\n stroke-dashoffset: -10;\n "]);
_templateObject2$C = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$1g() {
var data = _taggedTemplateLiteral$1g(["\n fill: none;\n animation: ", " ", " linear infinite;\n "]);
_templateObject$1g = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1g(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var dimensions = function dimensions(props) {
var size;
switch (props.$size) {
case 'small':
size = '20px';
break;
case 'large':
size = '60px';
break;
case 'medium':
default:
size = '28px';
}
return "\n width: ".concat(size, ";\n height: ").concat(size, ";\n ");
};
var circleOuter = function circleOuter(props) {
return styled.css(_templateObject$1g(), rotateAnimation, props.$rotationOnly ? '1.2s' : '2s');
};
function getDefaultStrokes(size) {
switch (size) {
case 'small':
return styled.css(_templateObject2$C());
case 'large':
return styled.css(_templateObject3$m());
case 'medium':
default:
return styled.css(_templateObject4$e());
}
}
var circle = function circle(props) {
var color, strokeWidth, animation;
switch (props.color) {
case 'gray':
color = designTokens.tokens.color_gray_800;
break;
case 'orange':
color = designTokens.tokens.color_brand_orange;
break;
case 'white':
color = designTokens.tokens.color_white;
break;
case 'blue':
default:
color = designTokens.tokens.color_blue_700;
break;
}
switch (props.$size) {
case 'small':
strokeWidth = '2px';
animation = smallDashAnimation;
break;
case 'large':
strokeWidth = '4px';
animation = largeDashAnimation;
break;
case 'medium':
default:
strokeWidth = '3px';
animation = dashAnimation;
}
return styled.css(_templateObject5$a(), color, strokeWidth, props.$rotationOnly ? getDefaultStrokes(props.$size) : styled.css(_templateObject6$3(), animation));
};
var smallDashAnimation = styled.keyframes(_templateObject7$2());
var dashAnimation = styled.keyframes(_templateObject8());
var largeDashAnimation = styled.keyframes(_templateObject9());
var rotateAnimation = styled.keyframes(_templateObject10());
function _templateObject3$l() {
var data = _taggedTemplateLiteral$1f(["\n ", "\n"]);
_templateObject3$l = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2$B() {
var data = _taggedTemplateLiteral$1f(["\n ", "\n ", "\n"]);
_templateObject2$B = function _templateObject2() {
return data;
};
return data;
}
function _templateObject$1f() {
var data = _taggedTemplateLiteral$1f(["\n ", "\n ", "\n"]);
_templateObject$1f = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral$1f(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var system$b = styledSystem.compose(styledSystem.margin, styledSystem.position, styledSystem.width, styledSystem.height);
var StyledSpinner = styled__default["default"](Box)(_templateObject$1f(), system$b, dimensions);
var Styl