@storybook/addon-docs
Version:
Document component usage and properties in Markdown
164 lines (90 loc) • 249 kB
JavaScript
import { getControlSetterButtonId, getControlId, cloneDeep, pickBy, uniq } from './chunk-SPFYY5GD.mjs';
import { __commonJS, __toESM, __require } from './chunk-QUZPS4B6.mjs';
import * as React20 from 'react';
import React20__default, { createContext, lazy, useState, useCallback, useEffect, useId, useRef, Component, cloneElement, useMemo, Suspense, useContext, Children } from 'react';
import { deprecate, once, logger } from 'storybook/internal/client-logger';
import { withReset, SyntaxHighlighter, FlexBar, Form, IconButton, codeCommon, components, Zoom, ActionBar, ResetWrapper, Button, Link, Code, nameSpaceClassNames, H2, H3, Loader, TabsState, EmptyTabContent, ErrorFormatter, getStoryHref, WithTooltipPure } from 'storybook/internal/components';
import { includeConditionalArg } from 'storybook/internal/csf';
import { AddIcon, SubtractIcon, ChevronSmallUpIcon, ChevronSmallDownIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon, ZoomIcon, ZoomOutIcon, ZoomResetIcon, EyeCloseIcon, EyeIcon, DocumentIcon, UndoIcon, LinkIcon } from '@storybook/icons';
import { styled, ignoreSsrWarning, useTheme, themes, ThemeProvider, convert, ensure } from 'storybook/theming';
import { NAVIGATE_URL, STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS, GLOBALS_UPDATED } from 'storybook/internal/core-events';
import { filterArgTypes, composeConfigs, Preview as Preview$1, DocsContext as DocsContext$1 } from 'storybook/preview-api';
import { SNIPPET_RENDERED, SourceType } from 'storybook/internal/docs-tools';
import { dedent } from 'ts-dedent';
import { Channel } from 'storybook/internal/channels';
var require_memoizerific=__commonJS({"../../node_modules/memoizerific/memoizerific.js"(exports,module){(function(f2){if(typeof exports=="object"&&typeof module<"u")module.exports=f2();else if(typeof define=="function"&&define.amd)define([],f2);else {var g2;typeof window<"u"?g2=window:typeof global<"u"?g2=global:typeof self<"u"?g2=self:g2=this,g2.memoizerific=f2();}})(function(){return function e2(t2,n2,r2){function s2(o3,u2){if(!n2[o3]){if(!t2[o3]){var a2=typeof __require=="function"&&__require;if(!u2&&a2)return a2(o3,!0);if(i2)return i2(o3,!0);var f2=new Error("Cannot find module '"+o3+"'");throw f2.code="MODULE_NOT_FOUND",f2}var l2=n2[o3]={exports:{}};t2[o3][0].call(l2.exports,function(e3){var n3=t2[o3][1][e3];return s2(n3||e3)},l2,l2.exports,e2,t2,n2,r2);}return n2[o3].exports}for(var i2=typeof __require=="function"&&__require,o2=0;o2<r2.length;o2++)s2(r2[o2]);return s2}({1:[function(_dereq_,module3,exports3){module3.exports=function(forceSimilar){if(typeof Map!="function"||forceSimilar){var Similar=_dereq_("./similar");return new Similar}else return new Map};},{"./similar":2}],2:[function(_dereq_,module3,exports3){function Similar(){return this.list=[],this.lastItem=void 0,this.size=0,this}Similar.prototype.get=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key))return this.lastItem.val;if(index=this.indexOf(key),index>=0)return this.lastItem=this.list[index],this.list[index].val},Similar.prototype.set=function(key,val){var index;return this.lastItem&&this.isEqual(this.lastItem.key,key)?(this.lastItem.val=val,this):(index=this.indexOf(key),index>=0?(this.lastItem=this.list[index],this.list[index].val=val,this):(this.lastItem={key,val},this.list.push(this.lastItem),this.size++,this))},Similar.prototype.delete=function(key){var index;if(this.lastItem&&this.isEqual(this.lastItem.key,key)&&(this.lastItem=void 0),index=this.indexOf(key),index>=0)return this.size--,this.list.splice(index,1)[0]},Similar.prototype.has=function(key){var index;return this.lastItem&&this.isEqual(this.lastItem.key,key)?!0:(index=this.indexOf(key),index>=0?(this.lastItem=this.list[index],!0):!1)},Similar.prototype.forEach=function(callback,thisArg){var i2;for(i2=0;i2<this.size;i2++)callback.call(thisArg||this,this.list[i2].val,this.list[i2].key,this);},Similar.prototype.indexOf=function(key){var i2;for(i2=0;i2<this.size;i2++)if(this.isEqual(this.list[i2].key,key))return i2;return -1},Similar.prototype.isEqual=function(val1,val2){return val1===val2||val1!==val1&&val2!==val2},module3.exports=Similar;},{}],3:[function(_dereq_,module3,exports3){var MapOrSimilar=_dereq_("map-or-similar");module3.exports=function(limit){var cache=new MapOrSimilar(!1),lru=[];return function(fn){var memoizerific=function(){var currentCache=cache,newMap,fnResult,argsLengthMinusOne=arguments.length-1,lruPath=Array(argsLengthMinusOne+1),isMemoized=!0,i2;if((memoizerific.numArgs||memoizerific.numArgs===0)&&memoizerific.numArgs!==argsLengthMinusOne+1)throw new Error("Memoizerific functions should always be called with the same number of arguments");for(i2=0;i2<argsLengthMinusOne;i2++){if(lruPath[i2]={cacheItem:currentCache,arg:arguments[i2]},currentCache.has(arguments[i2])){currentCache=currentCache.get(arguments[i2]);continue}isMemoized=!1,newMap=new MapOrSimilar(!1),currentCache.set(arguments[i2],newMap),currentCache=newMap;}return isMemoized&&(currentCache.has(arguments[argsLengthMinusOne])?fnResult=currentCache.get(arguments[argsLengthMinusOne]):isMemoized=!1),isMemoized||(fnResult=fn.apply(null,arguments),currentCache.set(arguments[argsLengthMinusOne],fnResult)),limit>0&&(lruPath[argsLengthMinusOne]={cacheItem:currentCache,arg:arguments[argsLengthMinusOne]},isMemoized?moveToMostRecentLru(lru,lruPath):lru.push(lruPath),lru.length>limit&&removeCachedResult(lru.shift())),memoizerific.wasMemoized=isMemoized,memoizerific.numArgs=argsLengthMinusOne+1,fnResult};return memoizerific.limit=limit,memoizerific.wasMemoized=!1,memoizerific.cache=cache,memoizerific.lru=lru,memoizerific}};function moveToMostRecentLru(lru,lruPath){var lruLen=lru.length,lruPathLen=lruPath.length,isMatch,i2,ii;for(i2=0;i2<lruLen;i2++){for(isMatch=!0,ii=0;ii<lruPathLen;ii++)if(!isEqual(lru[i2][ii].arg,lruPath[ii].arg)){isMatch=!1;break}if(isMatch)break}lru.push(lru.splice(i2,1)[0]);}function removeCachedResult(removedLru){var removedLruLen=removedLru.length,currentLru=removedLru[removedLruLen-1],tmp,i2;for(currentLru.cacheItem.delete(currentLru.arg),i2=removedLruLen-2;i2>=0&&(currentLru=removedLru[i2],tmp=currentLru.cacheItem.get(currentLru.arg),!tmp||!tmp.size);i2--)currentLru.cacheItem.delete(currentLru.arg);}function isEqual(val1,val2){return val1===val2||val1!==val1&&val2!==val2}},{"map-or-similar":1}]},{},[3])(3)});}});function _extends(){return _extends=Object.assign?Object.assign.bind():function(n2){for(var e2=1;e2<arguments.length;e2++){var t2=arguments[e2];for(var r2 in t2)({}).hasOwnProperty.call(t2,r2)&&(n2[r2]=t2[r2]);}return n2},_extends.apply(null,arguments)}function _assertThisInitialized(e2){if(e2===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e2}function _setPrototypeOf(t2,e2){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t3,e3){return t3.__proto__=e3,t3},_setPrototypeOf(t2,e2)}function _inheritsLoose(t2,o2){t2.prototype=Object.create(o2.prototype),t2.prototype.constructor=t2,_setPrototypeOf(t2,o2);}function _getPrototypeOf(t2){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t3){return t3.__proto__||Object.getPrototypeOf(t3)},_getPrototypeOf(t2)}function _isNativeFunction(t2){try{return Function.toString.call(t2).indexOf("[native code]")!==-1}catch{return typeof t2=="function"}}function _isNativeReflectConstruct(){try{var t2=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch{}return (_isNativeReflectConstruct=function(){return !!t2})()}function _construct(t2,e2,r2){if(_isNativeReflectConstruct())return Reflect.construct.apply(null,arguments);var o2=[null];o2.push.apply(o2,e2);var p2=new(t2.bind.apply(t2,o2));return r2&&_setPrototypeOf(p2,r2.prototype),p2}function _wrapNativeSuper(t2){var r2=typeof Map=="function"?new Map:void 0;return _wrapNativeSuper=function(t3){if(t3===null||!_isNativeFunction(t3))return t3;if(typeof t3!="function")throw new TypeError("Super expression must either be null or a function");if(r2!==void 0){if(r2.has(t3))return r2.get(t3);r2.set(t3,Wrapper11);}function Wrapper11(){return _construct(t3,arguments,_getPrototypeOf(this).constructor)}return Wrapper11.prototype=Object.create(t3.prototype,{constructor:{value:Wrapper11,enumerable:!1,writable:!0,configurable:!0}}),_setPrototypeOf(Wrapper11,t3)},_wrapNativeSuper(t2)}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 a2=args[0],b2=[],c2;for(c2=1;c2<args.length;c2+=1)b2.push(args[c2]);return b2.forEach(function(d2){a2=a2.replace(/%[a-z]/,d2);}),a2}var PolishedError=function(_Error){_inheritsLoose(PolishedError2,_Error);function PolishedError2(code){for(var _this,_len2=arguments.length,args=new Array(_len2>1?_len2-1:0),_key2=1;_key2<_len2;_key2++)args[_key2-1]=arguments[_key2];return _this=_Error.call(this,format.apply(void 0,[ERRORS[code]].concat(args)))||this,_assertThisInitialized(_this)}return PolishedError2}(_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,convert2){if(convert2===void 0&&(convert2=convertToInt),saturation===0)return convert2(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 convert2(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(color){if(typeof color!="string")return color;var normalizedColorName=color.toLowerCase();return namedColorMap[normalizedColorName]?"#"+namedColorMap[normalizedColorName]:color}var hexRegex=/^#[a-fA-F0-9]{6}$/,hexRgbaRegex=/^#[a-fA-F0-9]{8}$/,reducedHexRegex=/^#[a-fA-F0-9]{3}$/,reducedRgbaHexRegex=/^#[a-fA-F0-9]{4}$/,rgbRegex=/^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i,rgbaRegex=/^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i,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,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(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}}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(color){var red=color.red/255,green=color.green/255,blue=color.blue/255,max=Math.max(red,green,blue),min=Math.min(red,green,blue),lightness=(max+min)/2;if(max===min)return color.alpha!==void 0?{hue:0,saturation:0,lightness,alpha:color.alpha}:{hue:0,saturation:0,lightness};var hue,delta=max-min,saturation=lightness>.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,color.alpha!==void 0?{hue,saturation,lightness,alpha:color.alpha}:{hue,saturation,lightness}}function parseToHsl(color){return rgbToHsl(parseToRgb(color))}var reduceHexValue=function(value2){return value2.length===7&&value2[1]===value2[2]&&value2[3]===value2[4]&&value2[5]===value2[6]?"#"+value2[1]+value2[3]+value2[5]:value2},reduceHexValue$1=reduceHexValue;function numberToHex(value2){var hex=value2.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)}function hsl(value2,saturation,lightness){if(typeof value2=="number"&&typeof saturation=="number"&&typeof lightness=="number")return hslToHex(value2,saturation,lightness);if(typeof value2=="object"&&saturation===void 0&&lightness===void 0)return hslToHex(value2.hue,value2.saturation,value2.lightness);throw new PolishedError(1)}function hsla(value2,saturation,lightness,alpha){if(typeof value2=="number"&&typeof saturation=="number"&&typeof lightness=="number"&&typeof alpha=="number")return alpha>=1?hslToHex(value2,saturation,lightness):"rgba("+hslToRgb(value2,saturation,lightness)+","+alpha+")";if(typeof value2=="object"&&saturation===void 0&&lightness===void 0&&alpha===void 0)return value2.alpha>=1?hslToHex(value2.hue,value2.saturation,value2.lightness):"rgba("+hslToRgb(value2.hue,value2.saturation,value2.lightness)+","+value2.alpha+")";throw new PolishedError(2)}function rgb(value2,green,blue){if(typeof value2=="number"&&typeof green=="number"&&typeof blue=="number")return reduceHexValue$1("#"+numberToHex(value2)+numberToHex(green)+numberToHex(blue));if(typeof value2=="object"&&green===void 0&&blue===void 0)return reduceHexValue$1("#"+numberToHex(value2.red)+numberToHex(value2.green)+numberToHex(value2.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(color){return typeof color.red=="number"&&typeof color.green=="number"&&typeof color.blue=="number"&&(typeof color.alpha!="number"||typeof color.alpha>"u")},isRgba=function(color){return typeof color.red=="number"&&typeof color.green=="number"&&typeof color.blue=="number"&&typeof color.alpha=="number"},isHsl=function(color){return typeof color.hue=="number"&&typeof color.saturation=="number"&&typeof color.lightness=="number"&&(typeof color.alpha!="number"||typeof color.alpha>"u")},isHsla=function(color){return typeof color.hue=="number"&&typeof color.saturation=="number"&&typeof color.lightness=="number"&&typeof color.alpha=="number"};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)}function curried(f2,length,acc){return function(){var combined=acc.concat(Array.prototype.slice.call(arguments));return combined.length>=length?f2.apply(this,combined):curried(f2,length,combined)}}function curry(f2){return curried(f2,f2.length,[])}function adjustHue(degree,color){if(color==="transparent")return color;var hslColor=parseToHsl(color);return toColorString(_extends({},hslColor,{hue:hslColor.hue+parseFloat(degree)}))}curry(adjustHue);function guard(lowerBoundary,upperBoundary,value2){return Math.max(lowerBoundary,Math.min(upperBoundary,value2))}function darken(amount,color){if(color==="transparent")return color;var hslColor=parseToHsl(color);return toColorString(_extends({},hslColor,{lightness:guard(0,1,hslColor.lightness-parseFloat(amount))}))}var curriedDarken=curry(darken),curriedDarken$1=curriedDarken;function desaturate(amount,color){if(color==="transparent")return color;var hslColor=parseToHsl(color);return toColorString(_extends({},hslColor,{saturation:guard(0,1,hslColor.saturation-parseFloat(amount))}))}curry(desaturate);function lighten(amount,color){if(color==="transparent")return color;var hslColor=parseToHsl(color);return toColorString(_extends({},hslColor,{lightness:guard(0,1,hslColor.lightness+parseFloat(amount))}))}var curriedLighten=curry(lighten),curriedLighten$1=curriedLighten;function mix(weight,color,otherColor){if(color==="transparent")return otherColor;if(otherColor==="transparent")return color;if(weight===0)return otherColor;var parsedColor1=parseToRgb(color),color1=_extends({},parsedColor1,{alpha:typeof parsedColor1.alpha=="number"?parsedColor1.alpha:1}),parsedColor2=parseToRgb(otherColor),color2=_extends({},parsedColor2,{alpha:typeof parsedColor2.alpha=="number"?parsedColor2.alpha:1}),alphaDelta=color1.alpha-color2.alpha,x2=parseFloat(weight)*2-1,y2=x2*alphaDelta===-1?x2:x2+alphaDelta,z2=1+x2*alphaDelta,weight1=(y2/z2+1)/2,weight2=1-weight1,mixedColor={red:Math.floor(color1.red*weight1+color2.red*weight2),green:Math.floor(color1.green*weight1+color2.green*weight2),blue:Math.floor(color1.blue*weight1+color2.blue*weight2),alpha:color1.alpha*parseFloat(weight)+color2.alpha*(1-parseFloat(weight))};return rgba(mixedColor)}var curriedMix=curry(mix),mix$1=curriedMix;function opacify(amount,color){if(color==="transparent")return color;var parsedColor=parseToRgb(color),alpha=typeof parsedColor.alpha=="number"?parsedColor.alpha:1,colorWithAlpha=_extends({},parsedColor,{alpha:guard(0,1,(alpha*100+parseFloat(amount)*100)/100)});return rgba(colorWithAlpha)}var curriedOpacify=curry(opacify),curriedOpacify$1=curriedOpacify;function saturate(amount,color){if(color==="transparent")return color;var hslColor=parseToHsl(color);return toColorString(_extends({},hslColor,{saturation:guard(0,1,hslColor.saturation+parseFloat(amount))}))}curry(saturate);function setHue(hue,color){return color==="transparent"?color:toColorString(_extends({},parseToHsl(color),{hue:parseFloat(hue)}))}curry(setHue);function setLightness(lightness,color){return color==="transparent"?color:toColorString(_extends({},parseToHsl(color),{lightness:parseFloat(lightness)}))}curry(setLightness);function setSaturation(saturation,color){return color==="transparent"?color:toColorString(_extends({},parseToHsl(color),{saturation:parseFloat(saturation)}))}curry(setSaturation);function shade(percentage,color){return color==="transparent"?color:mix$1(parseFloat(percentage),"rgb(0, 0, 0)",color)}curry(shade);function tint(percentage,color){return color==="transparent"?color:mix$1(parseFloat(percentage),"rgb(255, 255, 255)",color)}curry(tint);function transparentize(amount,color){if(color==="transparent")return color;var parsedColor=parseToRgb(color),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),curriedTransparentize$1=curriedTransparentize;var Wrapper=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(.3,theme.color.defaultText),fontSize:theme.typography.size.s2})),EmptyBlock=props=>React20__default.createElement(Wrapper,{...props,className:"docblock-emptyblock sb-unstyled"});var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme})=>({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 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"})),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${ignoreSsrWarning}`]:{margin:0}})),SourceSkeleton=()=>React20__default.createElement(SourceSkeletonWrapper,null,React20__default.createElement(SourceSkeletonPlaceholder,null),React20__default.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}}),React20__default.createElement(SourceSkeletonPlaceholder,{style:{width:"30%"}}),React20__default.createElement(SourceSkeletonPlaceholder,{style:{width:"80%"}})),Source=({isLoading,error,language,code,dark,format:format3=!0,...rest})=>{let{typography}=useTheme();if(isLoading)return React20__default.createElement(SourceSkeleton,null);if(error)return React20__default.createElement(EmptyBlock,null,error);let syntaxHighlighter=React20__default.createElement(StyledSyntaxHighlighter,{bordered:!0,copyable:!0,format:format3,language:language??"jsx",className:"docblock-source sb-unstyled",...rest},code);if(typeof dark>"u")return syntaxHighlighter;let overrideTheme=dark?themes.dark:themes.light;return React20__default.createElement(ThemeProvider,{theme:convert({...overrideTheme,fontCode:typography.fonts.mono,fontBase:typography.fonts.base})},syntaxHighlighter)};var toGlobalSelector=element=>`& :where(${element}:not(.sb-anchor, .sb-unstyled, .sb-unstyled ${element}))`,breakpoint=600,Title=styled.h1(withReset,({theme})=>({color:theme.color.defaultText,fontSize:theme.typography.size.m3,fontWeight:theme.typography.weight.bold,lineHeight:"32px",[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.l1,lineHeight:"36px",marginBottom:"16px"}})),Subtitle=styled.h2(withReset,({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s3,lineHeight:"20px",borderBottom:"none",marginBottom:15,[`@media (min-width: ${breakpoint}px)`]:{fontSize:theme.typography.size.m1,lineHeight:"28px",marginBottom:24},color:curriedTransparentize$1(.25,theme.color.defaultText)})),DocsContent=styled.div(({theme})=>{let reset={fontFamily:theme.typography.fonts.base,fontSize:theme.typography.size.s3,margin:0,WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"grayscale",WebkitTapHighlightColor:"rgba(0, 0, 0, 0)",WebkitOverflowScrolling:"touch"},headers={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"},"& code":{fontSize:"inherit"}},code={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(.1,theme.color.defaultText):curriedTransparentize$1(.3,theme.color.defaultText),backgroundColor:theme.base==="light"?theme.color.lighter:theme.color.border};return {maxWidth:1e3,width:"100%",minWidth:0,[toGlobalSelector("a")]:{...reset,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}},[toGlobalSelector("blockquote")]:{...reset,margin:"16px 0",borderLeft:`4px solid ${theme.color.medium}`,padding:"0 15px",color:theme.color.dark,"& > :first-of-type":{marginTop:0},"& > :last-child":{marginBottom:0}},[toGlobalSelector("div")]:reset,[toGlobalSelector("dl")]:{...reset,margin:"16px 0",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}},[toGlobalSelector("h1")]:{...reset,...headers,fontSize:`${theme.typography.size.l1}px`,fontWeight:theme.typography.weight.bold},[toGlobalSelector("h2")]:{...reset,...headers,fontSize:`${theme.typography.size.m2}px`,paddingBottom:4,borderBottom:`1px solid ${theme.appBorderColor}`},[toGlobalSelector("h3")]:{...reset,...headers,fontSize:`${theme.typography.size.m1}px`,fontWeight:theme.typography.weight.bold},[toGlobalSelector("h4")]:{...reset,...headers,fontSize:`${theme.typography.size.s3}px`},[toGlobalSelector("h5")]:{...reset,...headers,fontSize:`${theme.typography.size.s2}px`},[toGlobalSelector("h6")]:{...reset,...headers,fontSize:`${theme.typography.size.s2}px`,color:theme.color.dark},[toGlobalSelector("hr")]:{border:"0 none",borderTop:`1px solid ${theme.appBorderColor}`,height:4,padding:0},[toGlobalSelector("img")]:{maxWidth:"100%"},[toGlobalSelector("li")]:{...reset,fontSize:theme.typography.size.s2,color:theme.color.defaultText,lineHeight:"24px","& + li":{marginTop:".25em"},"& ul, & ol":{marginTop:".25em",marginBottom:0},"& code":code},[toGlobalSelector("ol")]:{...reset,margin:"16px 0",paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0}},[toGlobalSelector("p")]:{...reset,margin:"16px 0",fontSize:theme.typography.size.s2,lineHeight:"24px",color:theme.color.defaultText,"& code":code},[toGlobalSelector("pre")]:{...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"}},[toGlobalSelector("span")]:{...reset,"&.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"}}},[toGlobalSelector("table")]:{...reset,margin:"16px 0",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}},[toGlobalSelector("ul")]:{...reset,margin:"16px 0",paddingLeft:30,"& :first-of-type":{marginTop:0},"& :last-child":{marginBottom:0},listStyle:"disc"}}}),DocsWrapper=styled.div(({theme})=>({background:theme.background.content,display:"flex",flexDirection:"row-reverse",justifyContent:"center",padding:"4rem 20px",minHeight:"100vh",boxSizing:"border-box",gap:"3rem",[`@media (min-width: ${breakpoint}px)`]:{}})),DocsPageWrapper=({children,toc})=>React20__default.createElement(DocsWrapper,{className:"sbdocs sbdocs-wrapper"},toc,React20__default.createElement(DocsContent,{className:"sbdocs sbdocs-content"},children));var getBlockBackgroundStyle=theme=>({borderRadius:theme.appBorderRadius,background:theme.background.content,boxShadow:theme.base==="light"?"rgba(0, 0, 0, 0.10) 0 1px 3px 0":"rgba(0, 0, 0, 0.20) 0 2px 5px 0",border:`1px solid ${theme.appBorderColor}`});var{window:globalWindow}=globalThis,IFrame=class extends Component{constructor(){super(...arguments);this.iframe=null;}componentDidMount(){let{id}=this.props;this.iframe=globalWindow.document.getElementById(id);}shouldComponentUpdate(nextProps){let{scale}=nextProps;return scale!==this.props.scale&&this.setIframeBodyStyle({width:`${scale*100}%`,height:`${scale*100}%`,transform:`scale(${1/scale})`,transformOrigin:"top left"}),!1}setIframeBodyStyle(style){return Object.assign(this.iframe.contentDocument.body.style,style)}render(){let{id,title,src,allowFullScreen,scale,...rest}=this.props;return React20__default.createElement("iframe",{id,title,src,...allowFullScreen?{allow:"fullscreen"}:{},loading:"lazy",...rest})}};var ZoomContext=createContext({scale:1});var{PREVIEW_URL}=globalThis,BASE_URL=PREVIEW_URL||"iframe.html",storyBlockIdFromId=({story,primary})=>`story--${story.id}${primary?"--primary":""}`,InlineStory=props=>{let storyRef=useRef(),[showLoader,setShowLoader]=useState(!0),[error,setError]=useState(),{story,height,autoplay,forceInitialArgs,renderStoryToElement}=props;return useEffect(()=>{if(!(story&&storyRef.current))return ()=>{};let element=storyRef.current,cleanup=renderStoryToElement(story,element,{showMain:()=>{},showError:({title,description})=>setError(new Error(`${title} - ${description}`)),showException:err=>setError(err)},{autoplay,forceInitialArgs});return setShowLoader(!1),()=>{Promise.resolve().then(()=>cleanup());}},[autoplay,renderStoryToElement,story]),error?React20__default.createElement("pre",null,React20__default.createElement(ErrorFormatter,{error})):React20__default.createElement(React20__default.Fragment,null,height?React20__default.createElement("style",null,`#${storyBlockIdFromId(props)} { min-height: ${height}; transform: translateZ(0); overflow: auto }`):null,showLoader&&React20__default.createElement(StorySkeleton,null),React20__default.createElement("div",{ref:storyRef,id:`${storyBlockIdFromId(props)}-inner`,"data-name":story.name}))},IFrameStory=({story,height="500px"})=>React20__default.createElement("div",{style:{width:"100%",height}},React20__default.createElement(ZoomContext.Consumer,null,({scale})=>React20__default.createElement(IFrame,{key:"iframe",id:`iframe--${story.id}`,title:story.name,src:getStoryHref(BASE_URL,story.id,{viewMode:"story"}),allowFullScreen:!0,scale,style:{width:"100%",height:"100%",border:"0 none"}}))),ErrorMessage=styled.strong(({theme})=>({color:theme.color.orange})),Story=props=>{let{inline,story}=props;return inline&&!props.autoplay&&story.usesMount?React20__default.createElement(ErrorMessage,null,"This story mounts inside of play. Set"," ",React20__default.createElement("a",{href:"https://storybook.js.org/docs/api/doc-blocks/doc-block-story#autoplay"},"autoplay")," ","to true to view this story."):React20__default.createElement("div",{id:storyBlockIdFromId(props),className:"sb-story sb-unstyled","data-story-block":"true"},inline?React20__default.createElement(InlineStory,{...props}):React20__default.createElement(IFrameStory,{...props}))},StorySkeleton=()=>React20__default.createElement(Loader,null);var Bar=styled(FlexBar)({position:"absolute",left:0,right:0,top:0,transition:"transform .2s linear"}),Wrapper2=styled.div({display:"flex",alignItems:"center",gap:4}),IconPlaceholder=styled.div(({theme})=>({width:14,height:14,borderRadius:2,margin:"0 7px",backgroundColor:theme.appBorderColor,animation:`${theme.animation.glow} 1.5s ease-in-out infinite`})),Toolbar=({isLoading,storyId,baseUrl,zoom,resetZoom,...rest})=>React20__default.createElement(Bar,{...rest},React20__default.createElement(Wrapper2,{key:"left"},isLoading?[1,2,3].map(key=>React20__default.createElement(IconPlaceholder,{key})):React20__default.createElement(React20__default.Fragment,null,React20__default.createElement(IconButton,{key:"zoomin",onClick:e2=>{e2.preventDefault(),zoom(.8);},title:"Zoom in"},React20__default.createElement(ZoomIcon,null)),React20__default.createElement(IconButton,{key:"zoomout",onClick:e2=>{e2.preventDefault(),zoom(1.25);},title:"Zoom out"},React20__default.createElement(ZoomOutIcon,null)),React20__default.createElement(IconButton,{key:"zoomreset",onClick:e2=>{e2.preventDefault(),resetZoom();},title:"Reset zoom"},React20__default.createElement(ZoomResetIcon,null)))));var ChildrenContainer=styled.div(({isColumn,columns,layout})=>({display:isColumn||!columns?"block":"flex",position:"relative",flexWrap:"wrap",overflow:"auto",flexDirection:isColumn?"column":"row","& .innerZoomElementWrapper > *":isColumn?{width:layout!=="fullscreen"?"calc(100% - 20px)":"100%",display:"block"}:{maxWidth:layout!=="fullscreen"?"calc(100% - 20px)":"100%",display:"inline-block"}}),({layout="padded",inline})=>layout==="centered"||layout==="padded"?{padding:inline?"32px 22px":"0px","& .innerZoomElementWrapper > *":{width:"auto",border:"8px solid transparent!important"}}:{},({layout="padded",inline})=>layout==="centered"&&inline?{display:"flex",justifyContent:"center",justifyItems:"center",alignContent:"center",alignItems:"center"}:{},({columns})=>columns&&columns>1?{".innerZoomElementWrapper > *":{minWidth:`calc(100% / ${columns} - 20px)`}}:{}),StyledSource=styled(Source)(({theme})=>({margin:0,borderTopLeftRadius:0,borderTopRightRadius:0,borderBottomLeftRadius:theme.appBorderRadius,borderBottomRightRadius:theme.appBorderRadius,border:"none",background:theme.base==="light"?"rgba(0, 0, 0, 0.85)":curriedDarken$1(.05,theme.background.content),color:theme.color.lightest,button:{background:theme.base==="light"?"rgba(0, 0, 0, 0.85)":curriedDarken$1(.05,theme.background.content)}})),PreviewContainer=styled.div(({theme,withSource,isExpanded})=>({position:"relative",overflow:"hidden",margin:"25px 0 40px",...getBlockBackgroundStyle(theme),borderBottomLeftRadius:withSource&&isExpanded&&0,borderBottomRightRadius:withSource&&isExpanded&&0,borderBottomWidth:isExpanded&&0,"h3 + &":{marginTop:"16px"}}),({withToolbar})=>withToolbar&&{paddingTop:40}),getSource=(withSource,expanded,setExpanded)=>{switch(!0){case!!(withSource&&withSource.error):return {source:null,actionItem:{title:"No code available",className:"docblock-code-toggle docblock-code-toggle--disabled",disabled:!0,onClick:()=>setExpanded(!1)}};case expanded:return {source:React20__default.createElement(StyledSource,{...withSource,dark:!0}),actionItem:{title:"Hide code",className:"docblock-code-toggle docblock-code-toggle--expanded",onClick:()=>setExpanded(!1)}};default:return {source:React20__default.createElement(StyledSource,{...withSource,dark:!0}),actionItem:{title:"Show code",className:"docblock-code-toggle",onClick:()=>setExpanded(!0)}}}};function getStoryId(children){if(Children.count(children)===1){let elt=children;if(elt.props)return elt.props.id}return null}var PositionedToolbar=styled(Toolbar)({position:"absolute",top:0,left:0,right:0,height:40}),Relative=styled.div({overflow:"hidden",position:"relative"}),Preview=({isLoading,isColumn,columns,children,withSource,withToolbar=!1,isExpanded=!1,additionalActions,className,layout="padded",inline=!1,...props})=>{let[expanded,setExpanded]=useState(isExpanded),{source,actionItem}=getSource(withSource,expanded,setExpanded),[scale,setScale]=useState(1),previewClasses=[className].concat(["sbdocs","sbdocs-preview","sb-unstyled"]),defaultActionItems=withSource?[actionItem]:[],[additionalActionItems,setAdditionalActionItems]=useState(additionalActions?[...additionalActions]:[]),actionItems=[...defaultActionItems,...additionalActionItems],{window:globalWindow4}=globalThis,copyToClipboard=useCallback(async text=>{let{createCopyToClipboardFunction}=await import('storybook/internal/components');createCopyToClipboardFunction();},[]),onCopyCapture=e2=>{let selection=globalWindow4.getSelection();selection&&selection.type==="Range"||(e2.preventDefault(),additionalActionItems.filter(item=>item.title==="Copied").length===0&©ToClipboard(source?.props.code??"").then(()=>{setAdditionalActionItems([...additionalActionItems,{title:"Copied",onClick:()=>{}}]),globalWindow4.setTimeout(()=>setAdditionalActionItems(additionalActionItems.filter(item=>item.title!=="Copied")),1500);}));};return React20__default.createElement(PreviewContainer,{withSource,withToolbar,...props,className:previewClasses.join(" ")},withToolbar&&React20__default.createElement(PositionedToolbar,{isLoading,border:!0,zoom:z2=>setScale(scale*z2),resetZoom:()=>setScale(1),storyId:getStoryId(children),baseUrl:"./iframe.html"}),React20__default.createElement(ZoomContext.Provider,{value:{scale}},React20__default.createElement(Relative,{className:"docs-s