storybook-addon-performance
Version:
A storybook addon to help better understand and debug performance for React components
743 lines (665 loc) • 185 kB
JavaScript
import {
ScrollArea,
SyntaxHighlighter2
} from "./chunk-YFBCBFHB.mjs";
import {
WithToolTipState,
auto
} from "./chunk-LKODVILQ.mjs";
import {
require_memoizerific
} from "./chunk-Q2VOVBQB.mjs";
import {
scope
} from "./chunk-5P57YNEQ.mjs";
import {
__toESM
} from "./chunk-TTFRSOOU.mjs";
// ../../node_modules/.pnpm/@storybook+components@7.6.10_@types+react-dom@16.9.17_@types+react@16.9.17_react-dom@16.14.0_react@16.14.0/node_modules/@storybook/components/dist/index.mjs
import * as React5 from "react";
import React5__default, { memo, lazy, forwardRef as forwardRef2, useMemo as useMemo2, Fragment, createElement as createElement2, Children, Suspense, useRef as useRef3, useState as useState2, useCallback as useCallback2, useLayoutEffect, Component, useEffect as useEffect2 } from "react";
import { styled, ignoreSsrWarning, isPropValid, keyframes, color, typography } from "@storybook/theming";
// ../../node_modules/.pnpm/use-resize-observer@9.1.0_react-dom@16.14.0_react@16.14.0/node_modules/use-resize-observer/dist/bundle.esm.js
import { useRef, useEffect, useCallback, useState, useMemo } from "react";
function useResolvedElement(subscriber, refOrElement) {
var lastReportRef = useRef(null);
var refOrElementRef = useRef(null);
refOrElementRef.current = refOrElement;
var cbElementRef = useRef(null);
useEffect(function() {
evaluateSubscription();
});
var evaluateSubscription = useCallback(function() {
var cbElement = cbElementRef.current;
var refOrElement2 = refOrElementRef.current;
var element = cbElement ? cbElement : refOrElement2 ? refOrElement2 instanceof Element ? refOrElement2 : refOrElement2.current : null;
if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.subscriber === subscriber) {
return;
}
if (lastReportRef.current && lastReportRef.current.cleanup) {
lastReportRef.current.cleanup();
}
lastReportRef.current = {
element,
subscriber,
// Only calling the subscriber, if there's an actual element to report.
// Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.
cleanup: element ? subscriber(element) : void 0
};
}, [subscriber]);
useEffect(function() {
return function() {
if (lastReportRef.current && lastReportRef.current.cleanup) {
lastReportRef.current.cleanup();
lastReportRef.current = null;
}
};
}, []);
return useCallback(function(element) {
cbElementRef.current = element;
evaluateSubscription();
}, [evaluateSubscription]);
}
function extractSize(entry, boxProp, sizeType) {
if (!entry[boxProp]) {
if (boxProp === "contentBoxSize") {
return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
}
return void 0;
}
return entry[boxProp][0] ? entry[boxProp][0][sizeType] : (
// TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
// behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
// @ts-ignore
entry[boxProp][sizeType]
);
}
function useResizeObserver(opts) {
if (opts === void 0) {
opts = {};
}
var onResize = opts.onResize;
var onResizeRef = useRef(void 0);
onResizeRef.current = onResize;
var round = opts.round || Math.round;
var resizeObserverRef = useRef();
var _useState = useState({
width: void 0,
height: void 0
}), size = _useState[0], setSize = _useState[1];
var didUnmount = useRef(false);
useEffect(function() {
didUnmount.current = false;
return function() {
didUnmount.current = true;
};
}, []);
var previous = useRef({
width: void 0,
height: void 0
});
var refCallback = useResolvedElement(useCallback(function(element) {
if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
resizeObserverRef.current = {
box: opts.box,
round,
instance: new ResizeObserver(function(entries) {
var entry = entries[0];
var boxProp = opts.box === "border-box" ? "borderBoxSize" : opts.box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize";
var reportedWidth = extractSize(entry, boxProp, "inlineSize");
var reportedHeight = extractSize(entry, boxProp, "blockSize");
var newWidth = reportedWidth ? round(reportedWidth) : void 0;
var newHeight = reportedHeight ? round(reportedHeight) : void 0;
if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
var newSize = {
width: newWidth,
height: newHeight
};
previous.current.width = newWidth;
previous.current.height = newHeight;
if (onResizeRef.current) {
onResizeRef.current(newSize);
} else {
if (!didUnmount.current) {
setSize(newSize);
}
}
}
})
};
}
resizeObserverRef.current.instance.observe(element, {
box: opts.box
});
return function() {
if (resizeObserverRef.current) {
resizeObserverRef.current.instance.unobserve(element);
}
};
}, [opts.box, round]), opts.ref);
return useMemo(function() {
return {
ref: refCallback,
width: size.width,
height: size.height
};
}, [refCallback, size.width, size.height]);
}
// ../../node_modules/.pnpm/@storybook+components@7.6.10_@types+react-dom@16.9.17_@types+react@16.9.17_react-dom@16.14.0_react@16.14.0/node_modules/@storybook/components/dist/index.mjs
var import_memoizerific = __toESM(require_memoizerific(), 1);
// ../../node_modules/.pnpm/@storybook+csf@0.1.2/node_modules/@storybook/csf/dist/index.mjs
var B = Object.create;
var R = Object.defineProperty;
var b = Object.getOwnPropertyDescriptor;
var C = Object.getOwnPropertyNames;
var h = Object.getPrototypeOf;
var w = Object.prototype.hasOwnProperty;
var I = (r, e) => () => (e || r((e = { exports: {} }).exports, e), e.exports);
var E = (r, e, n, t) => {
if (e && typeof e == "object" || typeof e == "function")
for (let a of C(e))
!w.call(r, a) && a !== n && R(r, a, { get: () => e[a], enumerable: !(t = b(e, a)) || t.enumerable });
return r;
};
var v = (r, e, n) => (n = r != null ? B(h(r)) : {}, E(e || !r || !r.__esModule ? R(n, "default", { value: r, enumerable: true }) : n, r));
var x = I((T) => {
Object.defineProperty(T, "__esModule", { value: true }), T.isEqual = function() {
var r = Object.prototype.toString, e = Object.getPrototypeOf, n = Object.getOwnPropertySymbols ? function(t) {
return Object.keys(t).concat(Object.getOwnPropertySymbols(t));
} : Object.keys;
return function(t, a) {
return function i(o, s, p) {
var y, g, d, A3 = r.call(o), F = r.call(s);
if (o === s)
return true;
if (o == null || s == null)
return false;
if (p.indexOf(o) > -1 && p.indexOf(s) > -1)
return true;
if (p.push(o, s), A3 != F || (y = n(o), g = n(s), y.length != g.length || y.some(function(l) {
return !i(o[l], s[l], p);
})))
return false;
switch (A3.slice(8, -1)) {
case "Symbol":
return o.valueOf() == s.valueOf();
case "Date":
case "Number":
return +o == +s || +o != +o && +s != +s;
case "RegExp":
case "Function":
case "String":
case "Boolean":
return "" + o == "" + s;
case "Set":
case "Map":
y = o.entries(), g = s.entries();
do
if (!i((d = y.next()).value, g.next().value, p))
return false;
while (!d.done);
return true;
case "ArrayBuffer":
o = new Uint8Array(o), s = new Uint8Array(s);
case "DataView":
o = new Uint8Array(o.buffer), s = new Uint8Array(s.buffer);
case "Float32Array":
case "Float64Array":
case "Int8Array":
case "Int16Array":
case "Int32Array":
case "Uint8Array":
case "Uint16Array":
case "Uint32Array":
case "Uint8ClampedArray":
case "Arguments":
case "Array":
if (o.length != s.length)
return false;
for (d = 0; d < o.length; d++)
if ((d in o || d in s) && (d in o != d in s || !i(o[d], s[d], p)))
return false;
return true;
case "Object":
return i(e(o), e(s), p);
default:
return false;
}
}(t, a, []);
};
}();
});
var c = v(x());
var L = (r) => r.toLowerCase().replace(/[ ’–—―′¿'`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "-").replace(/-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
// ../../node_modules/.pnpm/@storybook+components@7.6.10_@types+react-dom@16.9.17_@types+react@16.9.17_react-dom@16.14.0_react@16.14.0/node_modules/@storybook/components/dist/index.mjs
var nameSpaceClassNames = ({ ...props }, key) => {
let classes = [props.class, props.className];
return delete props.class, props.className = ["sbdocs", `sbdocs-${key}`, ...classes].filter(Boolean).join(" "), props;
};
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source)
Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
}
return target;
}, _extends.apply(this, arguments);
}
function _assertThisInitialized(self) {
if (self === void 0)
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return self;
}
function _setPrototypeOf(o, p) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o2, p2) {
return o2.__proto__ = p2, o2;
}, _setPrototypeOf(o, p);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype), subClass.prototype.constructor = subClass, _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(o2) {
return o2.__proto__ || Object.getPrototypeOf(o2);
}, _getPrototypeOf(o);
}
function _isNativeFunction(fn) {
return Function.toString.call(fn).indexOf("[native code]") !== -1;
}
function _isNativeReflectConstruct() {
if (typeof Reflect > "u" || !Reflect.construct || Reflect.construct.sham)
return false;
if (typeof Proxy == "function")
return true;
try {
return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
})), true;
} catch {
return false;
}
}
function _construct(Parent, args, Class) {
return _isNativeReflectConstruct() ? _construct = Reflect.construct.bind() : _construct = function(Parent2, args2, Class2) {
var a = [null];
a.push.apply(a, args2);
var Constructor = Function.bind.apply(Parent2, a), instance = new Constructor();
return Class2 && _setPrototypeOf(instance, Class2.prototype), instance;
}, _construct.apply(null, arguments);
}
function _wrapNativeSuper(Class) {
var _cache = typeof Map == "function" ? /* @__PURE__ */ new Map() : void 0;
return _wrapNativeSuper = function(Class2) {
if (Class2 === null || !_isNativeFunction(Class2))
return Class2;
if (typeof Class2 != "function")
throw new TypeError("Super expression must either be null or a function");
if (typeof _cache < "u") {
if (_cache.has(Class2))
return _cache.get(Class2);
_cache.set(Class2, Wrapper3);
}
function Wrapper3() {
return _construct(Class2, arguments, _getPrototypeOf(this).constructor);
}
return Wrapper3.prototype = Object.create(Class2.prototype, { constructor: { value: Wrapper3, enumerable: false, writable: true, configurable: true } }), _setPrototypeOf(Wrapper3, Class2);
}, _wrapNativeSuper(Class);
}
var ERRORS = { 1: `Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).
`, 2: `Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).
`, 3: `Passed an incorrect argument to a color function, please pass a string representation of a color.
`, 4: `Couldn't generate valid rgb string from %s, it returned %s.
`, 5: `Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.
`, 6: `Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).
`, 7: `Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).
`, 8: `Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.
`, 9: `Please provide a number of steps to the modularScale helper.
`, 10: `Please pass a number or one of the predefined scales to the modularScale helper as the ratio.
`, 11: `Invalid value passed as base to modularScale, expected number or em string but got "%s"
`, 12: `Expected a string ending in "px" or a number passed as the first argument to %s(), got "%s" instead.
`, 13: `Expected a string ending in "px" or a number passed as the second argument to %s(), got "%s" instead.
`, 14: `Passed invalid pixel value ("%s") to %s(), please pass a value like "12px" or 12.
`, 15: `Passed invalid base value ("%s") to %s(), please pass a value like "12px" or 12.
`, 16: `You must provide a template to this method.
`, 17: `You passed an unsupported selector state to this method.
`, 18: `minScreen and maxScreen must be provided as stringified numbers with the same units.
`, 19: `fromSize and toSize must be provided as stringified numbers with the same units.
`, 20: `expects either an array of objects or a single object with the properties prop, fromSize, and toSize.
`, 21: "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n", 22: "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n", 23: `fontFace expects a name of a font-family.
`, 24: `fontFace expects either the path to the font file(s) or a name of a local copy.
`, 25: `fontFace expects localFonts to be an array.
`, 26: `fontFace expects fileFormats to be an array.
`, 27: `radialGradient requries at least 2 color-stops to properly render.
`, 28: `Please supply a filename to retinaImage() as the first argument.
`, 29: `Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.
`, 30: "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n", 31: `The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation
`, 32: `To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])
To pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')
`, 33: `The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation
`, 34: `borderRadius expects a radius value as a string or number as the second argument.
`, 35: `borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.
`, 36: `Property must be a string value.
`, 37: `Syntax Error at %s.
`, 38: `Formula contains a function that needs parentheses at %s.
`, 39: `Formula is missing closing parenthesis at %s.
`, 40: `Formula has too many closing parentheses at %s.
`, 41: `All values in a formula must have the same unit or be unitless.
`, 42: `Please provide a number of steps to the modularScale helper.
`, 43: `Please pass a number or one of the predefined scales to the modularScale helper as the ratio.
`, 44: `Invalid value passed as base to modularScale, expected number or em/rem string but got %s.
`, 45: `Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.
`, 46: `Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.
`, 47: `minScreen and maxScreen must be provided as stringified numbers with the same units.
`, 48: `fromSize and toSize must be provided as stringified numbers with the same units.
`, 49: `Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.
`, 50: `Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.
`, 51: `Expects the first argument object to have the properties prop, fromSize, and toSize.
`, 52: `fontFace expects either the path to the font file(s) or a name of a local copy.
`, 53: `fontFace expects localFonts to be an array.
`, 54: `fontFace expects fileFormats to be an array.
`, 55: `fontFace expects a name of a font-family.
`, 56: `linearGradient requries at least 2 color-stops to properly render.
`, 57: `radialGradient requries at least 2 color-stops to properly render.
`, 58: `Please supply a filename to retinaImage() as the first argument.
`, 59: `Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.
`, 60: "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n", 61: `Property must be a string value.
`, 62: `borderRadius expects a radius value as a string or number as the second argument.
`, 63: `borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.
`, 64: `The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.
`, 65: `To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').
`, 66: `The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.
`, 67: `You must provide a template to this method.
`, 68: `You passed an unsupported selector state to this method.
`, 69: `Expected a string ending in "px" or a number passed as the first argument to %s(), got %s instead.
`, 70: `Expected a string ending in "px" or a number passed as the second argument to %s(), got %s instead.
`, 71: `Passed invalid pixel value %s to %s(), please pass a value like "12px" or 12.
`, 72: `Passed invalid base value %s to %s(), please pass a value like "12px" or 12.
`, 73: `Please provide a valid CSS variable.
`, 74: `CSS variable not found and no default was provided.
`, 75: `important requires a valid style object, got a %s instead.
`, 76: `fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.
`, 77: `remToPx expects a value in "rem" but you provided it in "%s".
`, 78: `base must be set in "px" or "%" but you set it in "%s".
` };
function format() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++)
args[_key] = arguments[_key];
var a = args[0], b2 = [], c2;
for (c2 = 1; c2 < args.length; c2 += 1)
b2.push(args[c2]);
return b2.forEach(function(d) {
a = a.replace(/%[a-z]/, d);
}), a;
}
var PolishedError = function(_Error) {
_inheritsLoose(PolishedError2, _Error);
function PolishedError2(code) {
var _this;
if (false)
_this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
else {
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++)
args[_key2 - 1] = arguments[_key2];
_this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
}
return _assertThisInitialized(_this);
}
return PolishedError2;
}(_wrapNativeSuper(Error));
function colorToInt(color2) {
return Math.round(color2 * 255);
}
function convertToInt(red, green, blue) {
return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
}
function hslToRgb(hue, saturation, lightness, convert) {
if (convert === void 0 && (convert = convertToInt), saturation === 0)
return convert(lightness, lightness, lightness);
var huePrime = (hue % 360 + 360) % 360 / 60, chroma = (1 - Math.abs(2 * lightness - 1)) * saturation, secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1)), red = 0, green = 0, blue = 0;
huePrime >= 0 && huePrime < 1 ? (red = chroma, green = secondComponent) : huePrime >= 1 && huePrime < 2 ? (red = secondComponent, green = chroma) : huePrime >= 2 && huePrime < 3 ? (green = chroma, blue = secondComponent) : huePrime >= 3 && huePrime < 4 ? (green = secondComponent, blue = chroma) : huePrime >= 4 && huePrime < 5 ? (red = secondComponent, blue = chroma) : huePrime >= 5 && huePrime < 6 && (red = chroma, blue = secondComponent);
var lightnessModification = lightness - chroma / 2, finalRed = red + lightnessModification, finalGreen = green + lightnessModification, finalBlue = blue + lightnessModification;
return convert(finalRed, finalGreen, finalBlue);
}
var namedColorMap = { aliceblue: "f0f8ff", antiquewhite: "faebd7", aqua: "00ffff", aquamarine: "7fffd4", azure: "f0ffff", beige: "f5f5dc", bisque: "ffe4c4", black: "000", blanchedalmond: "ffebcd", blue: "0000ff", blueviolet: "8a2be2", brown: "a52a2a", burlywood: "deb887", cadetblue: "5f9ea0", chartreuse: "7fff00", chocolate: "d2691e", coral: "ff7f50", cornflowerblue: "6495ed", cornsilk: "fff8dc", crimson: "dc143c", cyan: "00ffff", darkblue: "00008b", darkcyan: "008b8b", darkgoldenrod: "b8860b", darkgray: "a9a9a9", darkgreen: "006400", darkgrey: "a9a9a9", darkkhaki: "bdb76b", darkmagenta: "8b008b", darkolivegreen: "556b2f", darkorange: "ff8c00", darkorchid: "9932cc", darkred: "8b0000", darksalmon: "e9967a", darkseagreen: "8fbc8f", darkslateblue: "483d8b", darkslategray: "2f4f4f", darkslategrey: "2f4f4f", darkturquoise: "00ced1", darkviolet: "9400d3", deeppink: "ff1493", deepskyblue: "00bfff", dimgray: "696969", dimgrey: "696969", dodgerblue: "1e90ff", firebrick: "b22222", floralwhite: "fffaf0", forestgreen: "228b22", fuchsia: "ff00ff", gainsboro: "dcdcdc", ghostwhite: "f8f8ff", gold: "ffd700", goldenrod: "daa520", gray: "808080", green: "008000", greenyellow: "adff2f", grey: "808080", honeydew: "f0fff0", hotpink: "ff69b4", indianred: "cd5c5c", indigo: "4b0082", ivory: "fffff0", khaki: "f0e68c", lavender: "e6e6fa", lavenderblush: "fff0f5", lawngreen: "7cfc00", lemonchiffon: "fffacd", lightblue: "add8e6", lightcoral: "f08080", lightcyan: "e0ffff", lightgoldenrodyellow: "fafad2", lightgray: "d3d3d3", lightgreen: "90ee90", lightgrey: "d3d3d3", lightpink: "ffb6c1", lightsalmon: "ffa07a", lightseagreen: "20b2aa", lightskyblue: "87cefa", lightslategray: "789", lightslategrey: "789", lightsteelblue: "b0c4de", lightyellow: "ffffe0", lime: "0f0", limegreen: "32cd32", linen: "faf0e6", magenta: "f0f", maroon: "800000", mediumaquamarine: "66cdaa", mediumblue: "0000cd", mediumorchid: "ba55d3", mediumpurple: "9370db", mediumseagreen: "3cb371", mediumslateblue: "7b68ee", mediumspringgreen: "00fa9a", mediumturquoise: "48d1cc", mediumvioletred: "c71585", midnightblue: "191970", mintcream: "f5fffa", mistyrose: "ffe4e1", moccasin: "ffe4b5", navajowhite: "ffdead", navy: "000080", oldlace: "fdf5e6", olive: "808000", olivedrab: "6b8e23", orange: "ffa500", orangered: "ff4500", orchid: "da70d6", palegoldenrod: "eee8aa", palegreen: "98fb98", paleturquoise: "afeeee", palevioletred: "db7093", papayawhip: "ffefd5", peachpuff: "ffdab9", peru: "cd853f", pink: "ffc0cb", plum: "dda0dd", powderblue: "b0e0e6", purple: "800080", rebeccapurple: "639", red: "f00", rosybrown: "bc8f8f", royalblue: "4169e1", saddlebrown: "8b4513", salmon: "fa8072", sandybrown: "f4a460", seagreen: "2e8b57", seashell: "fff5ee", sienna: "a0522d", silver: "c0c0c0", skyblue: "87ceeb", slateblue: "6a5acd", slategray: "708090", slategrey: "708090", snow: "fffafa", springgreen: "00ff7f", steelblue: "4682b4", tan: "d2b48c", teal: "008080", thistle: "d8bfd8", tomato: "ff6347", turquoise: "40e0d0", violet: "ee82ee", wheat: "f5deb3", white: "fff", whitesmoke: "f5f5f5", yellow: "ff0", yellowgreen: "9acd32" };
function nameToHex(color2) {
if (typeof color2 != "string")
return color2;
var normalizedColorName = color2.toLowerCase();
return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color2;
}
var hexRegex = /^#[a-fA-F0-9]{6}$/;
var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
function parseToRgb(color2) {
if (typeof color2 != "string")
throw new PolishedError(3);
var normalizedColor = nameToHex(color2);
if (normalizedColor.match(hexRegex))
return { red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16), green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16), blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16) };
if (normalizedColor.match(hexRgbaRegex)) {
var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
return { red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16), green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16), blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16), alpha };
}
if (normalizedColor.match(reducedHexRegex))
return { red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16), green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16), blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16) };
if (normalizedColor.match(reducedRgbaHexRegex)) {
var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
return { red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16), green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16), blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16), alpha: _alpha };
}
var rgbMatched = rgbRegex.exec(normalizedColor);
if (rgbMatched)
return { red: parseInt("" + rgbMatched[1], 10), green: parseInt("" + rgbMatched[2], 10), blue: parseInt("" + rgbMatched[3], 10) };
var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
if (rgbaMatched)
return { red: parseInt("" + rgbaMatched[1], 10), green: parseInt("" + rgbaMatched[2], 10), blue: parseInt("" + rgbaMatched[3], 10), alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4]) };
var hslMatched = hslRegex.exec(normalizedColor);
if (hslMatched) {
var hue = parseInt("" + hslMatched[1], 10), saturation = parseInt("" + hslMatched[2], 10) / 100, lightness = parseInt("" + hslMatched[3], 10) / 100, rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")", hslRgbMatched = rgbRegex.exec(rgbColorString);
if (!hslRgbMatched)
throw new PolishedError(4, normalizedColor, rgbColorString);
return { red: parseInt("" + hslRgbMatched[1], 10), green: parseInt("" + hslRgbMatched[2], 10), blue: parseInt("" + hslRgbMatched[3], 10) };
}
var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
if (hslaMatched) {
var _hue = parseInt("" + hslaMatched[1], 10), _saturation = parseInt("" + hslaMatched[2], 10) / 100, _lightness = parseInt("" + hslaMatched[3], 10) / 100, _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")", _hslRgbMatched = rgbRegex.exec(_rgbColorString);
if (!_hslRgbMatched)
throw new PolishedError(4, normalizedColor, _rgbColorString);
return { red: parseInt("" + _hslRgbMatched[1], 10), green: parseInt("" + _hslRgbMatched[2], 10), blue: parseInt("" + _hslRgbMatched[3], 10), alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4]) };
}
throw new PolishedError(5);
}
function rgbToHsl(color2) {
var red = color2.red / 255, green = color2.green / 255, blue = color2.blue / 255, max = Math.max(red, green, blue), min = Math.min(red, green, blue), lightness = (max + min) / 2;
if (max === min)
return color2.alpha !== void 0 ? { hue: 0, saturation: 0, lightness, alpha: color2.alpha } : { hue: 0, saturation: 0, lightness };
var hue, delta = max - min, saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
switch (max) {
case red:
hue = (green - blue) / delta + (green < blue ? 6 : 0);
break;
case green:
hue = (blue - red) / delta + 2;
break;
default:
hue = (red - green) / delta + 4;
break;
}
return hue *= 60, color2.alpha !== void 0 ? { hue, saturation, lightness, alpha: color2.alpha } : { hue, saturation, lightness };
}
function parseToHsl(color2) {
return rgbToHsl(parseToRgb(color2));
}
var reduceHexValue = function(value) {
return value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6] ? "#" + value[1] + value[3] + value[5] : value;
};
var reduceHexValue$1 = reduceHexValue;
function numberToHex(value) {
var hex = value.toString(16);
return hex.length === 1 ? "0" + hex : hex;
}
function colorToHex(color2) {
return numberToHex(Math.round(color2 * 255));
}
function convertToHex(red, green, blue) {
return reduceHexValue$1("#" + colorToHex(red) + colorToHex(green) + colorToHex(blue));
}
function hslToHex(hue, saturation, lightness) {
return hslToRgb(hue, saturation, lightness, convertToHex);
}
function hsl(value, saturation, lightness) {
if (typeof value == "number" && typeof saturation == "number" && typeof lightness == "number")
return hslToHex(value, saturation, lightness);
if (typeof value == "object" && saturation === void 0 && lightness === void 0)
return hslToHex(value.hue, value.saturation, value.lightness);
throw new PolishedError(1);
}
function hsla(value, saturation, lightness, alpha) {
if (typeof value == "number" && typeof saturation == "number" && typeof lightness == "number" && typeof alpha == "number")
return alpha >= 1 ? hslToHex(value, saturation, lightness) : "rgba(" + hslToRgb(value, saturation, lightness) + "," + alpha + ")";
if (typeof value == "object" && saturation === void 0 && lightness === void 0 && alpha === void 0)
return value.alpha >= 1 ? hslToHex(value.hue, value.saturation, value.lightness) : "rgba(" + hslToRgb(value.hue, value.saturation, value.lightness) + "," + value.alpha + ")";
throw new PolishedError(2);
}
function rgb(value, green, blue) {
if (typeof value == "number" && typeof green == "number" && typeof blue == "number")
return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
if (typeof value == "object" && green === void 0 && blue === void 0)
return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
throw new PolishedError(6);
}
function rgba(firstValue, secondValue, thirdValue, fourthValue) {
if (typeof firstValue == "string" && typeof secondValue == "number") {
var rgbValue = parseToRgb(firstValue);
return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
} else {
if (typeof firstValue == "number" && typeof secondValue == "number" && typeof thirdValue == "number" && typeof fourthValue == "number")
return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
if (typeof firstValue == "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0)
return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
}
throw new PolishedError(7);
}
var isRgb = function(color2) {
return typeof color2.red == "number" && typeof color2.green == "number" && typeof color2.blue == "number" && (typeof color2.alpha != "number" || typeof color2.alpha > "u");
};
var isRgba = function(color2) {
return typeof color2.red == "number" && typeof color2.green == "number" && typeof color2.blue == "number" && typeof color2.alpha == "number";
};
var isHsl = function(color2) {
return typeof color2.hue == "number" && typeof color2.saturation == "number" && typeof color2.lightness == "number" && (typeof color2.alpha != "number" || typeof color2.alpha > "u");
};
var isHsla = function(color2) {
return typeof color2.hue == "number" && typeof color2.saturation == "number" && typeof color2.lightness == "number" && typeof color2.alpha == "number";
};
function toColorString(color2) {
if (typeof color2 != "object")
throw new PolishedError(8);
if (isRgba(color2))
return rgba(color2);
if (isRgb(color2))
return rgb(color2);
if (isHsla(color2))
return hsla(color2);
if (isHsl(color2))
return hsl(color2);
throw new PolishedError(8);
}
function curried(f, length, acc) {
return function() {
var combined = acc.concat(Array.prototype.slice.call(arguments));
return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
};
}
function curry(f) {
return curried(f, f.length, []);
}
function guard(lowerBoundary, upperBoundary, value) {
return Math.max(lowerBoundary, Math.min(upperBoundary, value));
}
function darken(amount, color2) {
if (color2 === "transparent")
return color2;
var hslColor = parseToHsl(color2);
return toColorString(_extends({}, hslColor, { lightness: guard(0, 1, hslColor.lightness - parseFloat(amount)) }));
}
var curriedDarken = curry(darken);
var curriedDarken$1 = curriedDarken;
function lighten(amount, color2) {
if (color2 === "transparent")
return color2;
var hslColor = parseToHsl(color2);
return toColorString(_extends({}, hslColor, { lightness: guard(0, 1, hslColor.lightness + parseFloat(amount)) }));
}
var curriedLighten = curry(lighten);
var curriedLighten$1 = curriedLighten;
function transparentize(amount, color2) {
if (color2 === "transparent")
return color2;
var parsedColor = parseToRgb(color2), alpha = typeof parsedColor.alpha == "number" ? parsedColor.alpha : 1, colorWithAlpha = _extends({}, parsedColor, { alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100) });
return rgba(colorWithAlpha);
}
var curriedTransparentize = curry(transparentize);
var curriedTransparentize$1 = curriedTransparentize;
var headerCommon = ({ theme }) => ({ margin: "20px 0 8px", padding: 0, cursor: "text", position: "relative", color: theme.color.defaultText, "&:first-of-type": { marginTop: 0, paddingTop: 0 }, "&:hover a.anchor": { textDecoration: "none" }, "& tt, & code": { fontSize: "inherit" } });
var codeCommon = ({ theme }) => ({ lineHeight: 1, margin: "0 2px", padding: "3px 5px", whiteSpace: "nowrap", borderRadius: 3, fontSize: theme.typography.size.s2 - 1, border: theme.base === "light" ? `1px solid ${theme.color.mediumlight}` : `1px solid ${theme.color.darker}`, color: theme.base === "light" ? curriedTransparentize$1(0.1, theme.color.defaultText) : curriedTransparentize$1(0.3, theme.color.defaultText), backgroundColor: theme.base === "light" ? theme.color.lighter : theme.color.border });
var withReset = ({ theme }) => ({ fontFamily: theme.typography.fonts.base, fontSize: theme.typography.size.s3, margin: 0, WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale", WebkitTapHighlightColor: "rgba(0, 0, 0, 0)", WebkitOverflowScrolling: "touch" });
var withMargin = { margin: "16px 0" };
var Link = ({ href: input, children, ...props }) => {
let isStorybookPath = /^\//.test(input), isAnchorUrl = /^#.*/.test(input), href = isStorybookPath ? `./?path=${input}` : input;
return React5__default.createElement("a", { href, target: isAnchorUrl ? "_self" : "_top", ...props }, children);
};
var A = styled(Link)(withReset, ({ theme }) => ({ fontSize: "inherit", lineHeight: "24px", color: theme.color.secondary, textDecoration: "none", "&.absent": { color: "#cc0000" }, "&.anchor": { display: "block", paddingLeft: 30, marginLeft: -30, cursor: "pointer", position: "absolute", top: 0, left: 0, bottom: 0 } }));
var Blockquote = styled.blockquote(withReset, withMargin, ({ theme }) => ({ borderLeft: `4px solid ${theme.color.medium}`, padding: "0 15px", color: theme.color.dark, "& > :first-of-type": { marginTop: 0 }, "& > :last-child": { marginBottom: 0 } }));
var isReactChildString = (child) => typeof child == "string";
var isInlineCodeRegex = /[\n\r]/g;
var DefaultCodeBlock = styled.code(({ theme }) => ({ fontFamily: theme.typography.fonts.mono, WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale", display: "inline-block", paddingLeft: 2, paddingRight: 2, verticalAlign: "baseline", color: "inherit" }), codeCommon);
var StyledSyntaxHighlighter = styled(SyntaxHighlighter2)(({ theme }) => ({ fontFamily: theme.typography.fonts.mono, fontSize: `${theme.typography.size.s2 - 1}px`, lineHeight: "19px", margin: "25px 0 40px", borderRadius: theme.appBorderRadius, boxShadow: theme.base === "light" ? "rgba(0, 0, 0, 0.10) 0 1px 3px 0" : "rgba(0, 0, 0, 0.20) 0 2px 5px 0", "pre.prismjs": { padding: 20, background: "inherit" } }));
var Code = ({ className, children, ...props }) => {
var _a;
let language = (className || "").match(/lang-(\S+)/), childrenArray = Children.toArray(children);
return childrenArray.filter(isReactChildString).some((child) => child.match(isInlineCodeRegex)) ? React5__default.createElement(StyledSyntaxHighlighter, { bordered: true, copyable: true, language: (_a = language == null ? void 0 : language[1]) != null ? _a : "plaintext", format: false, ...props }, children) : React5__default.createElement(DefaultCodeBlock, { ...props, className }, childrenArray);
};
var Div = styled.div(withReset);
var DL = styled.dl(withReset, withMargin, { padding: 0, "& dt": { fontSize: "14px", fontWeight: "bold", fontStyle: "italic", padding: 0, margin: "16px 0 4px" }, "& dt:first-of-type": { padding: 0 }, "& dt > :first-of-type": { marginTop: 0 }, "& dt > :last-child": { marginBottom: 0 }, "& dd": { margin: "0 0 16px", padding: "0 15px" }, "& dd > :first-of-type": { marginTop: 0 }, "& dd > :last-child": { marginBottom: 0 } });
var H1 = styled.h1(withReset, headerCommon, ({ theme }) => ({ fontSize: `${theme.typography.size.l1}px`, fontWeight: theme.typography.weight.bold }));
var H2 = styled.h2(withReset, headerCommon, ({ theme }) => ({ fontSize: `${theme.typography.size.m2}px`, paddingBottom: 4, borderBottom: `1px solid ${theme.appBorderColor}` }));
var H3 = styled.h3(withReset, headerCommon, ({ theme }) => ({ fontSize: `${theme.typography.size.m1}px` }));
var H4 = styled.h4(withReset, headerCommon, ({ theme }) => ({ fontSize: `${theme.typography.size.s3}px` }));
var H5 = styled.h5(withReset, headerCommon, ({ theme }) => ({ fontSize: `${theme.typography.size.s2}px` }));
var H6 = styled.h6(withReset, headerCommon, ({ theme }) => ({ fontSize: `${theme.typography.size.s2}px`, color: theme.color.dark }));
var HR = styled.hr(({ theme }) => ({ border: "0 none", borderTop: `1px solid ${theme.appBorderColor}`, height: 4, padding: 0 }));
var Img = styled.img({ maxWidth: "100%" });
var LI = styled.li(withReset, ({ theme }) => ({ fontSize: theme.typography.size.s2, color: theme.color.defaultText, lineHeight: "24px", "& + li": { marginTop: ".25em" }, "& ul, & ol": { marginTop: ".25em", marginBottom: 0 }, "& code": codeCommon({ theme }) }));
var listCommon = { paddingLeft: 30, "& :first-of-type": { marginTop: 0 }, "& :last-child": { marginBottom: 0 } };
var OL = styled.ol(withReset, withMargin, listCommon, { listStyle: "decimal" });
var P = styled.p(withReset, withMargin, ({ theme }) => ({ fontSize: theme.typography.size.s2, lineHeight: "24px", color: theme.color.defaultText, "& code": codeCommon({ theme }) }));
var Pre = styled.pre(withReset, withMargin, ({ theme }) => ({ fontFamily: theme.typography.fonts.mono, WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale", lineHeight: "18px", padding: "11px 1rem", whiteSpace: "pre-wrap", color: "inherit", borderRadius: 3, margin: "1rem 0", "&:not(.prismjs)": { background: "transparent", border: "none", borderRadius: 0, padding: 0, margin: 0 }, "& pre, &.prismjs": { padding: 15, margin: 0, whiteSpace: "pre-wrap", color: "inherit", fontSize: "13px", lineHeight: "19px", code: { color: "inherit", fontSize: "inherit" } }, "& code": { whiteSpace: "pre" }, "& code, & tt": { border: "none" } }));
var Span = styled.span(withReset, ({ theme }) => ({ "&.frame": { display: "block", overflow: "hidden", "& > span": { border: `1px solid ${theme.color.medium}`, display: "block", float: "left", overflow: "hidden", margin: "13px 0 0", padding: 7, width: "auto" }, "& span img": { display: "block", float: "left" }, "& span span": { clear: "both", color: theme.color.darkest, display: "block", padding: "5px 0 0" } }, "&.align-center": { display: "block", overflow: "hidden", clear: "both", "& > span": { display: "block", overflow: "hidden", margin: "13px auto 0", textAlign: "center" }, "& span img": { margin: "0 auto", textAlign: "center" } }, "&.align-right": { display: "block", overflow: "hidden", clear: "both", "& > span": { display: "block", overflow: "hidden", margin: "13px 0 0", textAlign: "right" }, "& span img": { margin: 0, textAlign: "right" } }, "&.float-left": { display: "block", marginRight: 13, overflow: "hidden", float: "left", "& span": { margin: "13px 0 0" } }, "&.float-right": { display: "block", marginLeft: 13, overflow: "hidden", float: "right", "& > span": { display: "block", overflow: "hidden", margin: "13px auto 0", textAlign: "right" } } }));
var Table = styled.table(withReset, withMargin, ({ theme }) => ({ fontSize: theme.typography.size.s2, lineHeight: "24px", padding: 0, borderCollapse: "collapse", "& tr": { borderTop: `1px solid ${theme.appBorderColor}`, backgroundColor: theme.appContentBg, margin: 0, padding: 0 }, "& tr:nth-of-type(2n)": { backgroundColor: theme.base === "dark" ? theme.color.darker : theme.color.lighter }, "& tr th": { fontWeight: "bold", color: theme.color.defaultText, border: `1px solid ${theme.appBorderColor}`, margin: 0, padding: "6px 13px" }, "& tr td": { border: `1px solid ${theme.appBorderColor}`, color: theme.color.defaultText, margin: 0, padding: "6px 13px" }, "& tr th :first-of-type, & tr td :first-of-type": { marginTop: 0 }, "& tr th :last-child, & tr td :last-child": { marginBottom: 0 } }));
var TT = styled.title(codeCommon);
var listCommon2 = { paddingLeft: 30, "& :first-of-type": { marginTop: 0 }, "& :last-child": { marginBottom: 0 } };
var UL = styled.ul(withReset, withMargin, listCommon2, { listStyle: "disc" });
var ResetWrapper = styled.div(withReset);
var components = { h1: (props) => React5__default.createElement(H1, { ...nameSpaceClassNames(props, "h1") }), h2: (props) => React5__default.createElement(H2, { ...nameSpaceClassNames(props, "h2") }), h3: (props) => React5__default.createElement(H3, { ...nameSpaceClassNames(props, "h3") }), h4: (props) => React5__default.createElement(H4, { ...nameSpaceClassNames(props, "h4") }), h5: (props) => React5__default.createElement(H5, { ...nameSpaceClassNames(props, "h5") }), h6: (props) => React5__default.createElement(H6, { ...nameSpaceClassNames(props, "h6") }), pre: (props) => React5__default.createElement(Pre, { ...nameSpaceClassNames(props, "pre") }), a: (props) => React5__default.createElement(A, { ...nameSpaceClassNames(props, "a") }), hr: (props) => React5__default.createElement(HR, { ...nameSpaceClassNames(props, "hr") }), dl: (props) => React5__default.createElement(DL, { ...nameSpaceClassNames(props, "dl") }), blockquote: (props) => React5__default.createElement(Blockquote, { ...nameSpaceClassNames(props, "blockquote") }), table: (props) => React5__default.createElement(Table, { ...nameSpaceClassNames(props, "table") }), img: (props) => React5__default.createElement(Img, { ...nameSpaceClassNames(props, "img") }), div: (props) => React5__default.createElement(Div, { ...nameSpaceClassNames(props, "div") }), span: (props) => React5__default.createElement(Span, { ...nameSpaceClassNames(props, "span") }), li: (props) => React5__default.createElement(LI, { ...nameSpaceClassNames(props, "li") }), ul: (props) => React5__default.createElement(UL, { ...nameSpaceClassNames(props, "ul") }), ol: (props) => React5__default.createElement(OL, { ...nameSpaceClassNames(props, "ol") }), p: (props) => React5__default.createElement(P, { ...nameSpaceClassNames(props, "p") }), code: (props) => React5__default.createElement(Code, { ...nameSpaceClassNames(props, "code") }), tt: (props) => React5__default.createElement(TT, { ...nameSpaceClassNames(props, "tt") }), resetwrapper: (props) => React5__default.createElement(ResetWrapper, { ...nameSpaceClassNames(props, "resetwrapper") }) };
var BadgeWrapper = styled.div(({ theme }) => ({ display: "inline-block", fontSize: 11, lineHeight: "12px", alignSelf: "center", padding: "4px 12px", borderRadius: "3em", fontWeight: theme.typography.weight.bold }), { svg: { height: 12, width: 12, marginRight: 4, marginTop: -2, path: { fill: "currentColor" } } }, ({ theme, status }) => {
switch (status) {
case "critical":
return { color: theme.color.critical, background: theme.background.critical };
case "negative":
return { color: theme.color.negativeText, background: theme.background.negative, boxShadow: theme.base === "light" ? `inset 0 0 0 1px ${curriedTransparentize$1(0.9, theme.color.negativeText)}` : "none" };
case "warning":
return { color: theme.color.warningText, background: theme.background.warning, boxShadow: theme.base === "light" ? `inset 0 0 0 1px ${curriedTransparentize$1(0.9, theme.color.warningText)}` : "none" };
case "neutral":
return { color: theme.color.dark, background: theme.color.mediumlight, boxShadow: theme.base === "light" ? `inset 0 0 0 1px ${curriedTransparentize$1(0.9, theme.color.dark)}` : "none" };
case "positive":
return { color: theme.color.positiveText, background: theme.background.positive, boxShadow: theme.base === "light" ? `inset 0 0 0 1px ${curriedTransparentize$1(0.9, theme.color.positiveText)}` : "none" };
default:
return {};
}
});
var icons = { user: React5__default.createElement(React5__default.Fragment, null, React5__default.createElement("path", { d: "M14 7A7 7 0 1 1 0 7a7 7 0 0 1 14 0ZM2.67 11.15c.7-1 2.6-1.81 3.2-1.9.22-.04.23-.66.23-.66s-.67-.66-.81-1.55c-.4 0-.63-.94-.24-1.27l-.02-.13c-.06-.6-.28-2.6 1.97-2.6s2.03 2 1.97 2.6l-.02.13c.4.33.15 1.27-.24 1.27-.14.89-.8 1.55-.8 1.55s0 .62.22.66c.6.09 2.5.9 3.2 1.9a6 6 0 1 0-8.66 0Z" })), useralt: React5__default.createElement(React5__default.Fragment, null, React5__default.createElement("path", { d: "M7.27 13.16a11.39 11.39 0 0 0 5.18-1.23v-.25c0-1.57-3.24-3-4.1-3.13-.27-.05-.28-.79-.28-.79s.8-.78.96-1.83c.47 0 .75-1.12.29-1.52.02-.41.6-3.25-2.32-3.25S4.65 4 4.67 4.41c-.46.4-.17 1.52.29 1.52.17 1.05.96 1.83.96 1.83s0 .74-.27.79c-.86.13-4.04 1.53-4.1 3.08a11.44 11.44 0 0 0 5.72 1.53Z" })), useradd: React5__default.createElement(React5__default.Fragment, null, React5__default.createElement("path", { d: "M1.18 11.9c-.4-.17-.8-.36-1.18-.58.06-1.44 3.02-2.74 3.82-2.87.25-.04.26-.73.26-.73s-.74-.73-.9-1.7c-.43 0-.7-1.05-.27-1.42l-.01-.14c-.07-.67-.31-2.88 2.18-2.88 2.48 0 2.24 2.2 2.17 2.88l-.01.14c.43.37.16 1.41-.27 1.41-.16.98-.9 1.71-.9 1.71s.01.69.26.73c.8.13 3.82 1.46 3.82 2.91v.24a10.63 10.63 0 0 1-8.97.3ZM11.5 2.16c.28 0 .5.22.5.5v1.5h1.5a.5.5 0 0 1 0 1H12v1.5a.5.5 0 0 1-1 0v-1.5H9.5a.5.5 0 1 1 0-1H11v-1.5c0-.28.22-.5.5-.5Z" })), users: React5__default.createElement(React5__default.Fragment, null, React5__default.createElement("path", { d: "M9.21 11.62A10.59 10.59 0 0 1 0 11.07c.06-1.35 2.93-2.58 3.7-2.7.25-.03.26-.68.26-.68s-.72-.69-.87-1.6c-.42 0-.68-.99-.26-1.33 0-.03 0-.08-.02-.14-.07-.63-.3-2.71 2.12-2.71 2.41 0 2.18 2.08 2.11 2.71l-.01.14c.42.34.16 1.32-.26 1.32-.16.92-.87 1.6-.87 1.6s0 .66.25.7c.78.11 3.7 1.36 3.7 2.73v.22l-.64.3Z" }), React5__default.createElement("path", { d: "M8.81 8.42a9.64 9.64 0 0 0-.74-.4 5.2 5.2 0 0 1 1.7-.76c.17-.02.17-.47.17-.47s-.49-.47-.6-1.1c-.28 0-.46-.68-.17-.91l-.01-.1c-.05-.43-.2-1.86 1.45-1.86 1.66 0 1.5 1.43 1.45 1.86v.1c.28.23.1.9-.18.9-.11.64-.6 1.11-.6 1.11s0 .45.17.47c.54.08 2.55.94 2.55 1.89v.62a10.6 10.6 0 0 1-3.3.56 2.97 2.97 0 0 0-.58-.88c-.37-.41-.85-.76-1.31-1.03Z" })), profile: React5__default.createElement(React5__default.Fragment, null, React5__default.createElement("path", { d: "M9.1 7.35a5.06 5.06 0 0 1-4.52-.28C4.6 6.4 6.02 5.77 6.4 5.7c.12-.02.12-.35.12-.35s-.35-.34-.43-.81c-.2 0-.33-.5-.12-.67l-.01-.07C5.93 3.48 5.81 2.42 7 2.42S8.07 3.48 8.04 3.8v.07c.2.17.07.67-.13.67-.