react-carousel-query/node_modules/@storybook/components/dist/modern/index-e954c1de.js

A infinite carousel component made with react that handles the pagination for you.

import React__default,{lazy,Suspense,Children,memo,useRef,useState,useEffect,Component,forwardRef,useLayoutEffect,useCallback,createElement,Fragment,createContext,cloneElement,useMemo}from'react';import{styled,themes,ThemeProvider,convert,isPropValid,keyframes,useTheme}from'@storybook/theming';import memoize$2 from'memoizerific';import{sanitize,includeConditionalArg}from'@storybook/csf';import qs from'qs';import{logger,once}from'@storybook/client-logger';/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */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 __awaiter(thisArg,_arguments,P,generator){function adopt(value){return value instanceof P?value:new P(function(resolve){resolve(value);});}return new(P||(P=Promise))(function(resolve,reject){function fulfilled(value){try{step(generator.next(value));}catch(e){reject(e);}}function rejected(value){try{step(generator["throw"](value));}catch(e){reject(e);}}function step(result){result.done?resolve(result.value):adopt(result.value).then(fulfilled,rejected);}step((generator=generator.apply(thisArg,_arguments||[])).next());});}const nameSpaceClassNames=(_a,key)=>{var props=__rest(_a,[]);const classes=[props.class,props.className];// eslint-disable-next-line no-param-reassign
delete props.class;// eslint-disable-next-line no-param-reassign
props.className=['sbdocs',`sbdocs-${key}`,...classes].filter(Boolean).join(' ');return props;};function _extends$1(){_extends$1=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends$1.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){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _inheritsLoose(subClass,superClass){subClass.prototype=Object.create(superClass.prototype);subClass.prototype.constructor=subClass;_setPrototypeOf(subClass,superClass);}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _isNativeFunction(fn){return Function.toString.call(fn).indexOf("[native code]")!==-1;}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}function _construct(Parent,args,Class){if(_isNativeReflectConstruct()){_construct=Reflect.construct;}else{_construct=function _construct(Parent,args,Class){var a=[null];a.push.apply(a,args);var Constructor=Function.bind.apply(Parent,a);var instance=new Constructor();if(Class)_setPrototypeOf(instance,Class.prototype);return instance;};}return _construct.apply(null,arguments);}function _wrapNativeSuper(Class){var _cache=typeof Map==="function"?new Map():undefined;_wrapNativeSuper=function _wrapNativeSuper(Class){if(Class===null||!_isNativeFunction(Class))return Class;if(typeof Class!=="function"){throw new TypeError("Super expression must either be null or a function");}if(typeof _cache!=="undefined"){if(_cache.has(Class))return _cache.get(Class);_cache.set(Class,Wrapper);}function Wrapper(){return _construct(Class,arguments,_getPrototypeOf(this).constructor);}Wrapper.prototype=Object.create(Class.prototype,{constructor:{value:Wrapper,enumerable:false,writable:true,configurable:true}});return _setPrototypeOf(Wrapper,Class);};return _wrapNativeSuper(Class);}/**
 * Parse errors.md and turn it into a simple hash of code: message
 * @private
 */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 }).\n\n","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 }).\n\n","3":"Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n","4":"Couldn't generate valid rgb string from %s, it returned %s.\n\n","5":"Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n","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 }).\n\n","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 }).\n\n","8":"Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n","9":"Please provide a number of steps to the modularScale helper.\n\n","10":"Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n","11":"Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n","12":"Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n","13":"Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n","14":"Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n","15":"Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n","16":"You must provide a template to this method.\n\n","17":"You passed an unsupported selector state to this method.\n\n","18":"minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n","19":"fromSize and toSize must be provided as stringified numbers with the same units.\n\n","20":"expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n","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.\n\n","24":"fontFace expects either the path to the font file(s) or a name of a local copy.\n\n","25":"fontFace expects localFonts to be an array.\n\n","26":"fontFace expects fileFormats to be an array.\n\n","27":"radialGradient requries at least 2 color-stops to properly render.\n\n","28":"Please supply a filename to retinaImage() as the first argument.\n\n","29":"Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n","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\n\n","32":"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')\n\n","33":"The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n","34":"borderRadius expects a radius value as a string or number as the second argument.\n\n","35":"borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n","36":"Property must be a string value.\n\n","37":"Syntax Error at %s.\n\n","38":"Formula contains a function that needs parentheses at %s.\n\n","39":"Formula is missing closing parenthesis at %s.\n\n","40":"Formula has too many closing parentheses at %s.\n\n","41":"All values in a formula must have the same unit or be unitless.\n\n","42":"Please provide a number of steps to the modularScale helper.\n\n","43":"Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n","44":"Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n","45":"Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n","46":"Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n","47":"minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n","48":"fromSize and toSize must be provided as stringified numbers with the same units.\n\n","49":"Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n","50":"Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n","51":"Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n","52":"fontFace expects either the path to the font file(s) or a name of a local copy.\n\n","53":"fontFace expects localFonts to be an array.\n\n","54":"fontFace expects fileFormats to be an array.\n\n","55":"fontFace expects a name of a font-family.\n\n","56":"linearGradient requries at least 2 color-stops to properly render.\n\n","57":"radialGradient requries at least 2 color-stops to properly render.\n\n","58":"Please supply a filename to retinaImage() as the first argument.\n\n","59":"Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n","60":"Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n","61":"Property must be a string value.\n\n","62":"borderRadius expects a radius value as a string or number as the second argument.\n\n","63":"borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n","64":"The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n","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').\n\n","66":"The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n","67":"You must provide a template to this method.\n\n","68":"You passed an unsupported selector state to this method.\n\n","69":"Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n","70":"Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n","71":"Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n","72":"Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n","73":"Please provide a valid CSS variable.\n\n","74":"CSS variable not found and no default was provided.\n\n","75":"important requires a valid style object, got a %s instead.\n\n","76":"fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n","77":"remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n","78":"base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"};/**
 * super basic version of sprintf
 * @private
 */function format$1(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}var a=args[0];var b=[];var c;for(c=1;c<args.length;c+=1){b.push(args[c]);}b.forEach(function(d){a=a.replace(/%[a-z]/,d);});return a;}/**
 * Create an error file out of errors.md for development and a simple web link to the full errors
 * in production mode.
 * @private
 */var PolishedError=/*#__PURE__*/function(_Error){_inheritsLoose(PolishedError,_Error);function PolishedError(code){var _this;if(process.env.NODE_ENV==='production'){_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$1.apply(void 0,[ERRORS[code]].concat(args)))||this;}return _assertThisInitialized(_this);}return PolishedError;}(/*#__PURE__*/_wrapNativeSuper(Error));function colorToInt(color){return Math.round(color*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;}if(saturation===0){// achromatic
return convert(lightness,lightness,lightness);}// formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
var huePrime=(hue%360+360)%360/60;var chroma=(1-Math.abs(2*lightness-1))*saturation;var secondComponent=chroma*(1-Math.abs(huePrime%2-1));var red=0;var green=0;var blue=0;if(huePrime>=0&&huePrime<1){red=chroma;green=secondComponent;}else if(huePrime>=1&&huePrime<2){red=secondComponent;green=chroma;}else if(huePrime>=2&&huePrime<3){green=chroma;blue=secondComponent;}else if(huePrime>=3&&huePrime<4){green=secondComponent;blue=chroma;}else if(huePrime>=4&&huePrime<5){red=secondComponent;blue=chroma;}else if(huePrime>=5&&huePrime<6){red=chroma;blue=secondComponent;}var lightnessModification=lightness-chroma/2;var finalRed=red+lightnessModification;var finalGreen=green+lightnessModification;var 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'};/**
 * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
 * @private
 */function nameToHex(color){if(typeof color!=='string')return color;var normalizedColorName=color.toLowerCase();return namedColorMap[normalizedColorName]?"#"+namedColorMap[normalizedColorName]:color;}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;/**
 * Returns an RgbColor or RgbaColor object. This utility function is only useful
 * if want to extract a color component. With the color util `toColorString` you
 * can convert a RgbColor or RgbaColor object back to a string.
 *
 * @example
 * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
 * const color1 = parseToRgb('rgb(255, 0, 0)');
 * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
 * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
 */function parseToRgb(color){if(typeof color!=='string'){throw new PolishedError(3);}var normalizedColor=nameToHex(color);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: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);var saturation=parseInt(""+hslMatched[2],10)/100;var lightness=parseInt(""+hslMatched[3],10)/100;var rgbColorString="rgb("+hslToRgb(hue,saturation,lightness)+")";var 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);var _saturation=parseInt(""+hslaMatched[2],10)/100;var _lightness=parseInt(""+hslaMatched[3],10)/100;var _rgbColorString="rgb("+hslToRgb(_hue,_saturation,_lightness)+")";var _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(color){// make sure rgb are contained in a set of [0, 255]
var red=color.red/255;var green=color.green/255;var blue=color.blue/255;var max=Math.max(red,green,blue);var min=Math.min(red,green,blue);var lightness=(max+min)/2;if(max===min){// achromatic
if(color.alpha!==undefined){return{hue:0,saturation:0,lightness:lightness,alpha:color.alpha};}else{return{hue:0,saturation:0,lightness:lightness};}}var hue;var delta=max-min;var 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:// blue case
hue=(red-green)/delta+4;break;}hue*=60;if(color.alpha!==undefined){return{hue:hue,saturation:saturation,lightness:lightness,alpha:color.alpha};}return{hue:hue,saturation:saturation,lightness:lightness};}/**
 * Returns an HslColor or HslaColor object. This utility function is only useful
 * if want to extract a color component. With the color util `toColorString` you
 * can convert a HslColor or HslaColor object back to a string.
 *
 * @example
 * // Assigns `{ hue: 0, saturation: 1, lightness: 0.5 }` to color1
 * const color1 = parseToHsl('rgb(255, 0, 0)');
 * // Assigns `{ hue: 128, saturation: 1, lightness: 0.5, alpha: 0.75 }` to color2
 * const color2 = parseToHsl('hsla(128, 100%, 50%, 0.75)');
 */function parseToHsl(color){// Note: At a later stage we can optimize this function as right now a hsl
// color would be parsed converted to rgb values and converted back to hsl.
return rgbToHsl(parseToRgb(color));}/**
 * Reduces hex values if possible e.g. #ff8866 to #f86
 * @private
 */var reduceHexValue=function reduceHexValue(value){if(value.length===7&&value[1]===value[2]&&value[3]===value[4]&&value[5]===value[6]){return"#"+value[1]+value[3]+value[5];}return value;};var reduceHexValue$1=reduceHexValue;function numberToHex(value){var hex=value.toString(16);return hex.length===1?"0"+hex:hex;}function colorToHex(color){return numberToHex(Math.round(color*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);}/**
 * Returns a string value for the color. The returned result is the smallest possible hex notation.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: hsl(359, 0.75, 0.4),
 *   background: hsl({ hue: 360, saturation: 0.75, lightness: 0.4 }),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${hsl(359, 0.75, 0.4)};
 *   background: ${hsl({ hue: 360, saturation: 0.75, lightness: 0.4 })};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "#b3191c";
 *   background: "#b3191c";
 * }
 */function hsl(value,saturation,lightness){if(typeof value==='number'&&typeof saturation==='number'&&typeof lightness==='number'){return hslToHex(value,saturation,lightness);}else if(typeof value==='object'&&saturation===undefined&&lightness===undefined){return hslToHex(value.hue,value.saturation,value.lightness);}throw new PolishedError(1);}/**
 * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: hsla(359, 0.75, 0.4, 0.7),
 *   background: hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 }),
 *   background: hsla(359, 0.75, 0.4, 1),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${hsla(359, 0.75, 0.4, 0.7)};
 *   background: ${hsla({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0,7 })};
 *   background: ${hsla(359, 0.75, 0.4, 1)};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "rgba(179,25,28,0.7)";
 *   background: "rgba(179,25,28,0.7)";
 *   background: "#b3191c";
 * }
 */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+")";}else if(typeof value==='object'&&saturation===undefined&&lightness===undefined&&alpha===undefined){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);}/**
 * Returns a string value for the color. The returned result is the smallest possible hex notation.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: rgb(255, 205, 100),
 *   background: rgb({ red: 255, green: 205, blue: 100 }),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${rgb(255, 205, 100)};
 *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "#ffcd64";
 *   background: "#ffcd64";
 * }
 */function rgb(value,green,blue){if(typeof value==='number'&&typeof green==='number'&&typeof blue==='number'){return reduceHexValue$1("#"+numberToHex(value)+numberToHex(green)+numberToHex(blue));}else if(typeof value==='object'&&green===undefined&&blue===undefined){return reduceHexValue$1("#"+numberToHex(value.red)+numberToHex(value.green)+numberToHex(value.blue));}throw new PolishedError(6);}/**
 * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
 *
 * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: rgba(255, 205, 100, 0.7),
 *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
 *   background: rgba(255, 205, 100, 1),
 *   background: rgba('#ffffff', 0.4),
 *   background: rgba('black', 0.7),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${rgba(255, 205, 100, 0.7)};
 *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
 *   background: ${rgba(255, 205, 100, 1)};
 *   background: ${rgba('#ffffff', 0.4)};
 *   background: ${rgba('black', 0.7)};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "rgba(255,205,100,0.7)";
 *   background: "rgba(255,205,100,0.7)";
 *   background: "#ffcd64";
 *   background: "rgba(255,255,255,0.4)";
 *   background: "rgba(0,0,0,0.7)";
 * }
 */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+")";}else if(typeof firstValue==='object'&&secondValue===undefined&&thirdValue===undefined&&fourthValue===undefined){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 isRgb(color){return typeof color.red==='number'&&typeof color.green==='number'&&typeof color.blue==='number'&&(typeof color.alpha!=='number'||typeof color.alpha==='undefined');};var isRgba=function isRgba(color){return typeof color.red==='number'&&typeof color.green==='number'&&typeof color.blue==='number'&&typeof color.alpha==='number';};var isHsl=function isHsl(color){return typeof color.hue==='number'&&typeof color.saturation==='number'&&typeof color.lightness==='number'&&(typeof color.alpha!=='number'||typeof color.alpha==='undefined');};var isHsla=function isHsla(color){return typeof color.hue==='number'&&typeof color.saturation==='number'&&typeof color.lightness==='number'&&typeof color.alpha==='number';};/**
 * Converts a RgbColor, RgbaColor, HslColor or HslaColor object to a color string.
 * This util is useful in case you only know on runtime which color object is
 * used. Otherwise we recommend to rely on `rgb`, `rgba`, `hsl` or `hsla`.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: toColorString({ red: 255, green: 205, blue: 100 }),
 *   background: toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 }),
 *   background: toColorString({ hue: 240, saturation: 1, lightness: 0.5 }),
 *   background: toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 }),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${toColorString({ red: 255, green: 205, blue: 100 })};
 *   background: ${toColorString({ red: 255, green: 205, blue: 100, alpha: 0.72 })};
 *   background: ${toColorString({ hue: 240, saturation: 1, lightness: 0.5 })};
 *   background: ${toColorString({ hue: 360, saturation: 0.75, lightness: 0.4, alpha: 0.72 })};
 * `
 *
 * // CSS in JS Output
 * element {
 *   background: "#ffcd64";
 *   background: "rgba(255,205,100,0.72)";
 *   background: "#00f";
 *   background: "rgba(179,25,25,0.72)";
 * }
 */function toColorString(color){if(typeof color!=='object')throw new PolishedError(8);if(isRgba(color))return rgba(color);if(isRgb(color))return rgb(color);if(isHsla(color))return hsla(color);if(isHsl(color))return hsl(color);throw new PolishedError(8);}// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
// eslint-disable-next-line no-unused-vars
// eslint-disable-next-line no-unused-vars
// eslint-disable-next-line no-redeclare
function curried(f,length,acc){return function fn(){// eslint-disable-next-line prefer-rest-params
var combined=acc.concat(Array.prototype.slice.call(arguments));return combined.length>=length?f.apply(this,combined):curried(f,length,combined);};}// eslint-disable-next-line no-redeclare
function curry(f){// eslint-disable-line no-redeclare
return curried(f,f.length,[]);}function guard(lowerBoundary,upperBoundary,value){return Math.max(lowerBoundary,Math.min(upperBoundary,value));}/**
 * Returns a string value for the darkened color.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: darken(0.2, '#FFCD64'),
 *   background: darken('0.2', 'rgba(255,205,100,0.7)'),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${darken(0.2, '#FFCD64')};
 *   background: ${darken('0.2', 'rgba(255,205,100,0.7)')};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "#ffbd31";
 *   background: "rgba(255,189,49,0.7)";
 * }
 */function darken(amount,color){if(color==='transparent')return color;var hslColor=parseToHsl(color);return toColorString(_extends$1({},hslColor,{lightness:guard(0,1,hslColor.lightness-parseFloat(amount))}));}// prettier-ignore
var curriedDarken=/*#__PURE__*/curry/* ::<number | string, string, string> */(darken);var curriedDarken$1=curriedDarken;/**
 * Returns a string value for the lightened color.
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: lighten(0.2, '#CCCD64'),
 *   background: lighten('0.2', 'rgba(204,205,100,0.7)'),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${lighten(0.2, '#FFCD64')};
 *   background: ${lighten('0.2', 'rgba(204,205,100,0.7)')};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "#e5e6b1";
 *   background: "rgba(229,230,177,0.7)";
 * }
 */function lighten(amount,color){if(color==='transparent')return color;var hslColor=parseToHsl(color);return toColorString(_extends$1({},hslColor,{lightness:guard(0,1,hslColor.lightness+parseFloat(amount))}));}// prettier-ignore
var curriedLighten=/*#__PURE__*/curry/* ::<number | string, string, string> */(lighten);var curriedLighten$1=curriedLighten;/**
 * Increases the opacity of a color. Its range for the amount is between 0 to 1.
 *
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: opacify(0.1, 'rgba(255, 255, 255, 0.9)');
 *   background: opacify(0.2, 'hsla(0, 0%, 100%, 0.5)'),
 *   background: opacify('0.5', 'rgba(255, 0, 0, 0.2)'),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${opacify(0.1, 'rgba(255, 255, 255, 0.9)')};
 *   background: ${opacify(0.2, 'hsla(0, 0%, 100%, 0.5)')},
 *   background: ${opacify('0.5', 'rgba(255, 0, 0, 0.2)')},
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "#fff";
 *   background: "rgba(255,255,255,0.7)";
 *   background: "rgba(255,0,0,0.7)";
 * }
 */function opacify(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends$1({},parsedColor,{alpha:guard(0,1,(alpha*100+parseFloat(amount)*100)/100)});return rgba(colorWithAlpha);}// prettier-ignore
var curriedOpacify=/*#__PURE__*/curry/* ::<number | string, string, string> */(opacify);var curriedOpacify$1=curriedOpacify;/**
 * Decreases the opacity of a color. Its range for the amount is between 0 to 1.
 *
 *
 * @example
 * // Styles as object usage
 * const styles = {
 *   background: transparentize(0.1, '#fff'),
 *   background: transparentize(0.2, 'hsl(0, 0%, 100%)'),
 *   background: transparentize('0.5', 'rgba(255, 0, 0, 0.8)'),
 * }
 *
 * // styled-components usage
 * const div = styled.div`
 *   background: ${transparentize(0.1, '#fff')};
 *   background: ${transparentize(0.2, 'hsl(0, 0%, 100%)')};
 *   background: ${transparentize('0.5', 'rgba(255, 0, 0, 0.8)')};
 * `
 *
 * // CSS in JS Output
 *
 * element {
 *   background: "rgba(255,255,255,0.9)";
 *   background: "rgba(255,255,255,0.8)";
 *   background: "rgba(255,0,0,0.3)";
 * }
 */function transparentize(amount,color){if(color==='transparent')return color;var parsedColor=parseToRgb(color);var alpha=typeof parsedColor.alpha==='number'?parsedColor.alpha:1;var colorWithAlpha=_extends$1({},parsedColor,{alpha:guard(0,1,+(alpha*100-parseFloat(amount)*100).toFixed(2)/100)});return rgba(colorWithAlpha);}// prettier-ignore
var curriedTransparentize=/*#__PURE__*/curry/* ::<number | string, string, string> */(transparentize);var curriedTransparentize$1=curriedTransparentize;const 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'}});const 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});const 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'});const withMargin={margin:'16px 0'};const Link$1=_a=>{var{href:input,children}=_a,props=__rest(_a,["href","children"]);const isStorybookPath=/^\//.test(input);const isAnchorUrl=/^#.*/.test(input);const href=isStorybookPath?`?path=${input}`:input;const target=isAnchorUrl?'_self':'_top';return React__default.createElement("a",Object.assign({href:href,target:target},props),children);};const A$2=styled(Link$1)(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}}));const 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}}));const Wrapper$8=styled.div(withReset,({theme})=>({backgroundColor:theme.base==='light'?'rgba(0,0,0,.01)':'rgba(255,255,255,.01)',borderRadius:theme.appBorderRadius,border:`1px dashed ${theme.appBorderColor}`,display:'flex',alignItems:'center',justifyContent:'center',padding:20,margin:'25px 0 40px',color:curriedTransparentize$1(0.3,theme.color.defaultText),fontSize:theme.typography.size.s2}));const EmptyBlock=props=>React__default.createElement(Wrapper$8,Object.assign({},props,{className:"docblock-emptyblock"}));const LazySyntaxHighlighter=lazy(()=>import('./syntaxhighlighter-30e0778c.js'));const LazySyntaxHighlighterWithFormatter=lazy(()=>__awaiter(void 0,void 0,void 0,function*(){const[{SyntaxHighlighter},{formatter}]=yield Promise.all([import('./syntaxhighlighter-30e0778c.js'),import('./formatter-b0bf94cd.js')]);return{default:props=>React__default.createElement(SyntaxHighlighter,Object.assign({},props,{formatter:formatter}))};}));const SyntaxHighlighter=props=>React__default.createElement(Suspense,{fallback:React__default.createElement("div",null)},props.format!==false?React__default.createElement(LazySyntaxHighlighterWithFormatter,Object.assign({},props)):React__default.createElement(LazySyntaxHighlighter,Object.assign({},props)));const StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({// DocBlocks-specific styling and overrides
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 SourceError;(function(SourceError){SourceError["NO_STORY"]="There\u2019s no story here.";SourceError["SOURCE_UNAVAILABLE"]="Oh no! The source is not available.";})(SourceError||(SourceError={}));const SourceSkeletonWrapper=styled.div(({theme})=>({background:theme.background.content,borderRadius:theme.appBorderRadius,border:`1px solid ${theme.appBorderColor}`,boxShadow:theme.base==='light'?'rgba(0, 0, 0, 0.10) 0 1px 3px 0':'rgba(0, 0, 0, 0.20) 0 2px 5px 0',margin:'25px 0 40px',padding:'20px 20px 20px 22px'}));const SourceSkeletonPlaceholder=styled.div(({theme})=>({animation:`${theme.animation.glow} 1.5s ease-in-out infinite`,background:theme.appBorderColor,height:17,marginTop:1,width:'60%',[`&:first-child`]:{margin:0}}));const SourceSkeleton=()=>React__default.createElement(SourceSkeletonWrapper,null,React__default.createElement(SourceSkeletonPlaceholder,null),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'30%'}}),React__default.createElement(SourceSkeletonPlaceholder,{style:{width:'80%'}}));/**
 * Syntax-highlighted source code for a component (or anything!)
 */const Source=props=>{const{isLoading,error}=props;if(isLoading){return React__default.createElement(SourceSkeleton,null);}if(error){return React__default.createElement(EmptyBlock,null,error);}const _a=props,{language,code,dark,format}=_a,rest=__rest(_a,["language","code","dark","format"]);const syntaxHighlighter=React__default.createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,format:format,language:language,className:"docblock-source"},rest),code);if(typeof dark==='undefined'){return syntaxHighlighter;}const overrideTheme=dark?themes.dark:themes.light;return React__default.createElement(ThemeProvider,{theme:convert(overrideTheme)},syntaxHighlighter);};Source.defaultProps={format:false};const isReactChildString=child=>typeof child==='string';const isInlineCodeRegex=/[\n\r]/g;const DefaultCodeBlock=styled.code(({theme})=>({// from reset
fontFamily:theme.typography.fonts.mono,WebkitFontSmoothing:'antialiased',MozOsxFontSmoothing:'grayscale',display:'inline-block',paddingLeft:2,paddingRight:2,verticalAlign:'baseline',color:'inherit'}),codeCommon);const Code=_a=>{var _b;var{className,children}=_a,props=__rest(_a,["className","children"]);const language=(className||'').match(/lang-(\S+)/);const childrenArray=Children.toArray(children);const isInlineCode=!childrenArray.filter(isReactChildString).some(child=>child.match(isInlineCodeRegex));if(isInlineCode){return React__default.createElement(DefaultCodeBlock,Object.assign({},props,{className:className}),childrenArray);}return React__default.createElement(StyledSyntaxHighlighter,Object.assign({bordered:true,copyable:true,language:(_b=language===null||language===void 0?void 0:language[1])!==null&&_b!==void 0?_b:'plaintext',format:false},props),children);};const Div=styled.div(withReset);const DL=styled.dl(withReset,Object.assign(Object.assign({},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}}));const H1=styled.h1(withReset,headerCommon,({theme})=>({fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.black}));const H2=styled.h2(withReset,headerCommon,({theme})=>({fontSize:`${theme.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${theme.appBorderColor}`}));const H3=styled.h3(withReset,headerCommon,({theme})=>({fontSize:`${theme.typography.size.m1}px`}));const H4=styled.h4(withReset,headerCommon,({theme})=>({fontSize:`${theme.typography.size.s3}px`}));const H5=styled.h5(withReset,headerCommon,({theme})=>({fontSize:`${theme.typography.size.s2}px`}));const H6=styled.h6(withReset,headerCommon,({theme})=>({fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark}));const HR=styled.hr(({theme})=>({border:'0 none',borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0}));const Img=styled.img({maxWidth:'100%'});const 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})}));const listCommon$1={paddingLeft:30,'& :first-of-type':{marginTop:0},'& :last-child':{marginBottom:0}};const OL=styled.ol(withReset,withMargin,Object.assign(Object.assign({},listCommon$1),{listStyle:'decimal'}));const P$1=styled.p(withReset,withMargin,({theme})=>({fontSize:theme.typography.size.s2,lineHeight:'24px',color:theme.color.defaultText,'& code':codeCommon({theme})}));const Pre=styled.pre(withReset,withMargin,({theme})=>({// reset
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'}}));const 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'}}}));const Table$1=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}}));const TT=styled.title(codeCommon);const listCommon={paddingLeft:30,'& :first-of-type':{marginTop:0},'& :last-child':{marginBottom:0}};const UL=styled.ul(withReset,withMargin,Object.assign(Object.assign({},listCommon),{listStyle:'disc'}));/**
 * This is a "local" reset to style subtrees with Storybook styles
 *
 * We can't style individual elements (e.g. h1, h2, etc.) in here
 * because the CSS specificity is too high, so those styles can too
 * easily override child elements that are not expecting it.
 */const ResetWrapper=styled.div(withReset);const components$1={h1:props=>React__default.createElement(H1,Object.assign({},nameSpaceClassNames(props,'h1'))),h2:props=>React__default.createElement(H2,Object.assign({},nameSpaceClassNames(props,'h2'))),h3:props=>React__default.createElement(H3,Object.assign({},nameSpaceClassNames(props,'h3'))),h4:props=>React__default.createElement(H4,Object.assign({},nameSpaceClassNames(props,'h4'))),h5:props=>React__default.createElement(H5,Object.assign({},nameSpaceClassNames(props,'h5'))),h6:props=>React__default.createElement(H6,Object.assign({},nameSpaceClassNames(props,'h6'))),pre:props=>React__default.createElement(Pre,Object.assign({},nameSpaceClassNames(props,'pre'))),a:props=>React__default.createElement(A$2,Object.assign({},nameSpaceClassNames(props,'a'))),hr:props=>React__default.createElement(HR,Object.assign({},nameSpaceClassNames(props,'hr'))),dl:props=>React__default.createElement(DL,Object.assign({},nameSpaceClassNames(props,'dl'))),blockquote:props=>React__default.createElement(Blockquote,Object.assign({},nameSpaceClassNames(props,'blockquote'))),table:props=>React__default.createElement(Table$1,Object.assign({},nameSpaceClassNames(props,'table'))),img:props=>React__default.createElement(Img,Object.assign({},nameSpaceClassNames(props,'img'))),div:props=>React__default.createElement(Div,Object.assign({},nameSpaceClassNames(props,'div'))),span:props=>React__default.createElement(Span,Object.assign({},nameSpaceClassNames(props,'span'))),li:props=>React__default.createElement(LI,Object.assign({},nameSpaceClassNames(props,'li'))),ul:props=>React__default.createElement(UL,Object.assign({},nameSpaceClassNames(props,'ul'))),ol:props=>React__default.createElement(OL,Object.assign({},nameSpaceClassNames(props,'ol'))),p:props=>React__default.createElement(P$1,Object.assign({},nameSpaceClassNames(props,'p'))),code:props=>React__default.createElement(Code,Object.assign({},nameSpaceClassNames(props,'code'))),tt:props=>React__default.createElement(TT,Object.assign({},nameSpaceClassNames(props,'tt'))),resetwrapper:props=>React__default.createElement(ResetWrapper,Object.assign({},nameSpaceClassNames(props,'resetwrapper')))};const 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};}c