npm - @brightspot/ui - Versions diffs - 1.0.0-alpha.3 → 1.0.0-alpha.5 - Mend

@brightspot/ui 1.0.0-alpha.3 → 1.0.0-alpha.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/dist/storybook/{906.72b6fffa.iframe.bundle.js.map → 906.a03add0d.iframe.bundle.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"906.72b6fffa.iframe.bundle.js","mappings":";;AAoBA;;AAEA;AACA;AClBA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;AAEA;;;ACtYA","sources":["webpack://@brightspot/ui/./node_modules/@storybook/addon-backgrounds/dist/preview.mjs","webpack://@brightspot/ui/./node_modules/@storybook/addon-outline/dist/preview.mjs","webpack://@brightspot/ui/./node_modules/@storybook/web-components/dist/chunk-X7CW7BOR.mjs"],"sourcesContent":["import { useEffect, useMemo } from 'storybook/internal/preview-api';\nimport { global } from '@storybook/global';\nimport { logger } from 'storybook/internal/client-logger';\nimport { dedent } from 'ts-dedent';\n\nvar PARAM_KEY=\"backgrounds\";var DEFAULT_BACKGROUNDS={light:{name:\"light\",value:\"#F8F8F8\"},dark:{name:\"dark\",value:\"#333\"}};var{document,window}=global,isReduceMotionEnabled=()=>!!window?.matchMedia(\"(prefers-reduced-motion: reduce)\")?.matches,clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement?.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:\"\"}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement?.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};var defaultGrid={cellSize:100,cellAmount:10,opacity:.8},BG_SELECTOR_BASE=\"addon-backgrounds\",GRID_SELECTOR_BASE=\"addon-backgrounds-grid\",transitionStyle=isReduceMotionEnabled()?\"\":\"transition: background-color 0.3s;\",withBackgroundAndGrid=(StoryFn,context)=>{let{globals,parameters:parameters2,viewMode,id}=context,{options=DEFAULT_BACKGROUNDS,disable,grid=defaultGrid}=parameters2[PARAM_KEY]\|\|{},data=globals[PARAM_KEY]\|\|{},backgroundName=data.value,item=backgroundName?options[backgroundName]:void 0,value=item?.value\|\|\"transparent\",showGrid=data.grid\|\|!1,shownBackground=!!item&&!disable,backgroundSelector=viewMode===\"docs\"?`#anchor--${id} .docs-story`:\".sb-show-main\",gridSelector=viewMode===\"docs\"?`#anchor--${id} .docs-story`:\".sb-show-main\",isLayoutPadded=parameters2.layout===void 0\|\|parameters2.layout===\"padded\",defaultOffset=viewMode===\"docs\"?20:isLayoutPadded?16:0,{cellAmount,cellSize,opacity,offsetX=defaultOffset,offsetY=defaultOffset}=grid,backgroundSelectorId=viewMode===\"docs\"?`${BG_SELECTOR_BASE}-docs-${id}`:`${BG_SELECTOR_BASE}-color`,backgroundTarget=viewMode===\"docs\"?id:null;useEffect(()=>{let backgroundStyles=`\n ${backgroundSelector} {\n background: ${value} !important;\n ${transitionStyle}\n }`;if(!shownBackground){clearStyles(backgroundSelectorId);return}addBackgroundStyle(backgroundSelectorId,backgroundStyles,backgroundTarget);},[backgroundSelector,backgroundSelectorId,backgroundTarget,shownBackground,value]);let gridSelectorId=viewMode===\"docs\"?`${GRID_SELECTOR_BASE}-docs-${id}`:`${GRID_SELECTOR_BASE}`;return useEffect(()=>{if(!showGrid){clearStyles(gridSelectorId);return}let gridSize=[`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(\", \"),gridStyles=`\n ${gridSelector} {\n background-size: ${gridSize} !important;\n background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;\n background-blend-mode: difference !important;\n background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;\n }\n `;addGridStyle(gridSelectorId,gridStyles);},[cellAmount,cellSize,gridSelector,gridSelectorId,showGrid,offsetX,offsetY,opacity]),StoryFn()};var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue===\"transparent\")return \"transparent\";if(backgrounds.find(background=>background.value===currentSelectedValue)\|\|currentSelectedValue)return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(\", \");logger.warn(dedent`\n Backgrounds Addon: could not find the default color \"${defaultName}\".\n These are the available colors for your story based on your configuration:\n ${availableColors}.\n `);}return \"transparent\"};var withBackground=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,globalsBackgroundColor=globals[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=useMemo(()=>backgroundsConfig.disable?\"transparent\":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!==\"transparent\",[selectedBackgroundColor]),selector=context.viewMode===\"docs\"?`#anchor--${context.id} .docs-story`:\".sb-show-main\",backgroundStyles=useMemo(()=>`\n ${selector} {\n background: ${selectedBackgroundColor} !important;\n ${isReduceMotionEnabled()?\"\":\"transition: background-color 0.3s;\"}\n }\n `,[selectedBackgroundColor,selector]);return useEffect(()=>{let selectorId=context.viewMode===\"docs\"?`addon-backgrounds-docs-${context.id}`:\"addon-backgrounds-color\";if(!isActive){clearStyles(selectorId);return}addBackgroundStyle(selectorId,backgroundStyles,context.viewMode===\"docs\"?context.id:null);},[isActive,backgroundStyles,context]),StoryFn()};var withGrid=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals[PARAM_KEY]?.grid===!0&&gridParameters.disable!==!0,{cellAmount,cellSize,opacity}=gridParameters,isInDocs=context.viewMode===\"docs\",defaultOffset=parameters2.layout===void 0\|\|parameters2.layout===\"padded\"?16:0,offsetX=gridParameters.offsetX??(isInDocs?20:defaultOffset),offsetY=gridParameters.offsetY??(isInDocs?20:defaultOffset),gridStyles=useMemo(()=>{let selector=context.viewMode===\"docs\"?`#anchor--${context.id} .docs-story`:\".sb-show-main\",backgroundSize=[`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(\", \");return `\n ${selector} {\n background-size: ${backgroundSize} !important;\n background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;\n background-blend-mode: difference !important;\n background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;\n }\n `},[cellSize]);return useEffect(()=>{let selectorId=context.viewMode===\"docs\"?`addon-backgrounds-grid-docs-${context.id}`:\"addon-backgrounds-grid\";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};\n\nexport { decorators, initialGlobals, parameters };\n","import { useMemo, useEffect } from 'storybook/internal/preview-api';\nimport { global } from '@storybook/global';\nimport { dedent } from 'ts-dedent';\n\nvar PARAM_KEY=\"outline\";var clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=input=>{let selector=typeof input==\"string\"?input:input.join(\"\"),element=global.document.getElementById(selector);element&&element.parentElement&&element.parentElement.removeChild(element);},addOutlineStyles=(selector,css)=>{let existingStyle=global.document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=global.document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css,global.document.head.appendChild(style);}};function outlineCSS(selector){return dedent`\n ${selector} body {\n outline: 1px solid #2980b9 !important;\n }\n\n ${selector} article {\n outline: 1px solid #3498db !important;\n }\n\n ${selector} nav {\n outline: 1px solid #0088c3 !important;\n }\n\n ${selector} aside {\n outline: 1px solid #33a0ce !important;\n }\n\n ${selector} section {\n outline: 1px solid #66b8da !important;\n }\n\n ${selector} header {\n outline: 1px solid #99cfe7 !important;\n }\n\n ${selector} footer {\n outline: 1px solid #cce7f3 !important;\n }\n\n ${selector} h1 {\n outline: 1px solid #162544 !important;\n }\n\n ${selector} h2 {\n outline: 1px solid #314e6e !important;\n }\n\n ${selector} h3 {\n outline: 1px solid #3e5e85 !important;\n }\n\n ${selector} h4 {\n outline: 1px solid #449baf !important;\n }\n\n ${selector} h5 {\n outline: 1px solid #c7d1cb !important;\n }\n\n ${selector} h6 {\n outline: 1px solid #4371d0 !important;\n }\n\n ${selector} main {\n outline: 1px solid #2f4f90 !important;\n }\n\n ${selector} address {\n outline: 1px solid #1a2c51 !important;\n }\n\n ${selector} div {\n outline: 1px solid #036cdb !important;\n }\n\n ${selector} p {\n outline: 1px solid #ac050b !important;\n }\n\n ${selector} hr {\n outline: 1px solid #ff063f !important;\n }\n\n ${selector} pre {\n outline: 1px solid #850440 !important;\n }\n\n ${selector} blockquote {\n outline: 1px solid #f1b8e7 !important;\n }\n\n ${selector} ol {\n outline: 1px solid #ff050c !important;\n }\n\n ${selector} ul {\n outline: 1px solid #d90416 !important;\n }\n\n ${selector} li {\n outline: 1px solid #d90416 !important;\n }\n\n ${selector} dl {\n outline: 1px solid #fd3427 !important;\n }\n\n ${selector} dt {\n outline: 1px solid #ff0043 !important;\n }\n\n ${selector} dd {\n outline: 1px solid #e80174 !important;\n }\n\n ${selector} figure {\n outline: 1px solid #ff00bb !important;\n }\n\n ${selector} figcaption {\n outline: 1px solid #bf0032 !important;\n }\n\n ${selector} table {\n outline: 1px solid #00cc99 !important;\n }\n\n ${selector} caption {\n outline: 1px solid #37ffc4 !important;\n }\n\n ${selector} thead {\n outline: 1px solid #98daca !important;\n }\n\n ${selector} tbody {\n outline: 1px solid #64a7a0 !important;\n }\n\n ${selector} tfoot {\n outline: 1px solid #22746b !important;\n }\n\n ${selector} tr {\n outline: 1px solid #86c0b2 !important;\n }\n\n ${selector} th {\n outline: 1px solid #a1e7d6 !important;\n }\n\n ${selector} td {\n outline: 1px solid #3f5a54 !important;\n }\n\n ${selector} col {\n outline: 1px solid #6c9a8f !important;\n }\n\n ${selector} colgroup {\n outline: 1px solid #6c9a9d !important;\n }\n\n ${selector} button {\n outline: 1px solid #da8301 !important;\n }\n\n ${selector} datalist {\n outline: 1px solid #c06000 !important;\n }\n\n ${selector} fieldset {\n outline: 1px solid #d95100 !important;\n }\n\n ${selector} form {\n outline: 1px solid #d23600 !important;\n }\n\n ${selector} input {\n outline: 1px solid #fca600 !important;\n }\n\n ${selector} keygen {\n outline: 1px solid #b31e00 !important;\n }\n\n ${selector} label {\n outline: 1px solid #ee8900 !important;\n }\n\n ${selector} legend {\n outline: 1px solid #de6d00 !important;\n }\n\n ${selector} meter {\n outline: 1px solid #e8630c !important;\n }\n\n ${selector} optgroup {\n outline: 1px solid #b33600 !important;\n }\n\n ${selector} option {\n outline: 1px solid #ff8a00 !important;\n }\n\n ${selector} output {\n outline: 1px solid #ff9619 !important;\n }\n\n ${selector} progress {\n outline: 1px solid #e57c00 !important;\n }\n\n ${selector} select {\n outline: 1px solid #e26e0f !important;\n }\n\n ${selector} textarea {\n outline: 1px solid #cc5400 !important;\n }\n\n ${selector} details {\n outline: 1px solid #33848f !important;\n }\n\n ${selector} summary {\n outline: 1px solid #60a1a6 !important;\n }\n\n ${selector} command {\n outline: 1px solid #438da1 !important;\n }\n\n ${selector} menu {\n outline: 1px solid #449da6 !important;\n }\n\n ${selector} del {\n outline: 1px solid #bf0000 !important;\n }\n\n ${selector} ins {\n outline: 1px solid #400000 !important;\n }\n\n ${selector} img {\n outline: 1px solid #22746b !important;\n }\n\n ${selector} iframe {\n outline: 1px solid #64a7a0 !important;\n }\n\n ${selector} embed {\n outline: 1px solid #98daca !important;\n }\n\n ${selector} object {\n outline: 1px solid #00cc99 !important;\n }\n\n ${selector} param {\n outline: 1px solid #37ffc4 !important;\n }\n\n ${selector} video {\n outline: 1px solid #6ee866 !important;\n }\n\n ${selector} audio {\n outline: 1px solid #027353 !important;\n }\n\n ${selector} source {\n outline: 1px solid #012426 !important;\n }\n\n ${selector} canvas {\n outline: 1px solid #a2f570 !important;\n }\n\n ${selector} track {\n outline: 1px solid #59a600 !important;\n }\n\n ${selector} map {\n outline: 1px solid #7be500 !important;\n }\n\n ${selector} area {\n outline: 1px solid #305900 !important;\n }\n\n ${selector} a {\n outline: 1px solid #ff62ab !important;\n }\n\n ${selector} em {\n outline: 1px solid #800b41 !important;\n }\n\n ${selector} strong {\n outline: 1px solid #ff1583 !important;\n }\n\n ${selector} i {\n outline: 1px solid #803156 !important;\n }\n\n ${selector} b {\n outline: 1px solid #cc1169 !important;\n }\n\n ${selector} u {\n outline: 1px solid #ff0430 !important;\n }\n\n ${selector} s {\n outline: 1px solid #f805e3 !important;\n }\n\n ${selector} small {\n outline: 1px solid #d107b2 !important;\n }\n\n ${selector} abbr {\n outline: 1px solid #4a0263 !important;\n }\n\n ${selector} q {\n outline: 1px solid #240018 !important;\n }\n\n ${selector} cite {\n outline: 1px solid #64003c !important;\n }\n\n ${selector} dfn {\n outline: 1px solid #b4005a !important;\n }\n\n ${selector} sub {\n outline: 1px solid #dba0c8 !important;\n }\n\n ${selector} sup {\n outline: 1px solid #cc0256 !important;\n }\n\n ${selector} time {\n outline: 1px solid #d6606d !important;\n }\n\n ${selector} code {\n outline: 1px solid #e04251 !important;\n }\n\n ${selector} kbd {\n outline: 1px solid #5e001f !important;\n }\n\n ${selector} samp {\n outline: 1px solid #9c0033 !important;\n }\n\n ${selector} var {\n outline: 1px solid #d90047 !important;\n }\n\n ${selector} mark {\n outline: 1px solid #ff0053 !important;\n }\n\n ${selector} bdi {\n outline: 1px solid #bf3668 !important;\n }\n\n ${selector} bdo {\n outline: 1px solid #6f1400 !important;\n }\n\n ${selector} ruby {\n outline: 1px solid #ff7b93 !important;\n }\n\n ${selector} rt {\n outline: 1px solid #ff2f54 !important;\n }\n\n ${selector} rp {\n outline: 1px solid #803e49 !important;\n }\n\n ${selector} span {\n outline: 1px solid #cc2643 !important;\n }\n\n ${selector} br {\n outline: 1px solid #db687d !important;\n }\n\n ${selector} wbr {\n outline: 1px solid #db175b !important;\n }`}var withOutline=(StoryFn,context)=>{let{globals}=context,isActive=[!0,\"true\"].includes(globals[PARAM_KEY]),isInDocs=context.viewMode===\"docs\",outlineStyles=useMemo(()=>outlineCSS(isInDocs?'[data-story-block=\"true\"]':\".sb-show-main\"),[context]);return useEffect(()=>{let selectorId=isInDocs?`addon-outline-docs-${context.id}`:\"addon-outline\";return isActive?addOutlineStyles(selectorId,outlineStyles):clearStyles(selectorId),()=>{clearStyles(selectorId);}},[isActive,outlineStyles,context]),StoryFn()};var decorators=[withOutline],initialGlobals={[PARAM_KEY]:!1};\n\nexport { decorators, initialGlobals };\n","import { simulatePageLoad, simulateDOMContentLoaded } from 'storybook/internal/preview-api';\nimport { global } from '@storybook/global';\nimport { render as render$1 } from 'lit';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { dedent } from 'ts-dedent';\n\nvar __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var entry_preview_exports={};__export(entry_preview_exports,{parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var {Node}=global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val;}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),isTemplateResult(element)){(forceRemount\|\|!canvasElement.querySelector('[id=\"root-inner\"]'))&&(canvasElement.innerHTML='<div id=\"root-inner\"></div>');let renderTo=canvasElement.querySelector('[id=\"root-inner\"]');render$1(element,renderTo),simulatePageLoad(canvasElement);}else if(typeof element==\"string\")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML=\"\",canvasElement.appendChild(element),simulateDOMContentLoaded();}else showError({title:`Expecting an HTML snippet or DOM node from the story: \"${name}\" of \"${kind}\".`,description:dedent`\n Did you forget to return the HTML snippet from the story?\n Use \"() => <your snippet or node>\" or when defining the story.\n `});}var parameters={renderer:\"web-components\"};\n\nexport { entry_preview_exports, parameters, render, renderToCanvas };\n"],"names":[],"sourceRoot":""}
1	+ {"version":3,"file":"906.a03add0d.iframe.bundle.js","mappings":";;AAoBA;;AAEA;AACA;AClBA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;AAEA;;;ACtYA","sources":["webpack://@brightspot/ui/./node_modules/@storybook/addon-backgrounds/dist/preview.mjs","webpack://@brightspot/ui/./node_modules/@storybook/addon-outline/dist/preview.mjs","webpack://@brightspot/ui/./node_modules/@storybook/web-components/dist/chunk-X7CW7BOR.mjs"],"sourcesContent":["import { useEffect, useMemo } from 'storybook/internal/preview-api';\nimport { global } from '@storybook/global';\nimport { logger } from 'storybook/internal/client-logger';\nimport { dedent } from 'ts-dedent';\n\nvar PARAM_KEY=\"backgrounds\";var DEFAULT_BACKGROUNDS={light:{name:\"light\",value:\"#F8F8F8\"},dark:{name:\"dark\",value:\"#333\"}};var{document,window}=global,isReduceMotionEnabled=()=>!!window?.matchMedia(\"(prefers-reduced-motion: reduce)\")?.matches,clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement?.removeChild(element);},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css,document.head.appendChild(style);}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:\"\"}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement?.insertBefore(style,existingGridStyle):document.head.appendChild(style);}};var defaultGrid={cellSize:100,cellAmount:10,opacity:.8},BG_SELECTOR_BASE=\"addon-backgrounds\",GRID_SELECTOR_BASE=\"addon-backgrounds-grid\",transitionStyle=isReduceMotionEnabled()?\"\":\"transition: background-color 0.3s;\",withBackgroundAndGrid=(StoryFn,context)=>{let{globals,parameters:parameters2,viewMode,id}=context,{options=DEFAULT_BACKGROUNDS,disable,grid=defaultGrid}=parameters2[PARAM_KEY]\|\|{},data=globals[PARAM_KEY]\|\|{},backgroundName=data.value,item=backgroundName?options[backgroundName]:void 0,value=item?.value\|\|\"transparent\",showGrid=data.grid\|\|!1,shownBackground=!!item&&!disable,backgroundSelector=viewMode===\"docs\"?`#anchor--${id} .docs-story`:\".sb-show-main\",gridSelector=viewMode===\"docs\"?`#anchor--${id} .docs-story`:\".sb-show-main\",isLayoutPadded=parameters2.layout===void 0\|\|parameters2.layout===\"padded\",defaultOffset=viewMode===\"docs\"?20:isLayoutPadded?16:0,{cellAmount,cellSize,opacity,offsetX=defaultOffset,offsetY=defaultOffset}=grid,backgroundSelectorId=viewMode===\"docs\"?`${BG_SELECTOR_BASE}-docs-${id}`:`${BG_SELECTOR_BASE}-color`,backgroundTarget=viewMode===\"docs\"?id:null;useEffect(()=>{let backgroundStyles=`\n ${backgroundSelector} {\n background: ${value} !important;\n ${transitionStyle}\n }`;if(!shownBackground){clearStyles(backgroundSelectorId);return}addBackgroundStyle(backgroundSelectorId,backgroundStyles,backgroundTarget);},[backgroundSelector,backgroundSelectorId,backgroundTarget,shownBackground,value]);let gridSelectorId=viewMode===\"docs\"?`${GRID_SELECTOR_BASE}-docs-${id}`:`${GRID_SELECTOR_BASE}`;return useEffect(()=>{if(!showGrid){clearStyles(gridSelectorId);return}let gridSize=[`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(\", \"),gridStyles=`\n ${gridSelector} {\n background-size: ${gridSize} !important;\n background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;\n background-blend-mode: difference !important;\n background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;\n }\n `;addGridStyle(gridSelectorId,gridStyles);},[cellAmount,cellSize,gridSelector,gridSelectorId,showGrid,offsetX,offsetY,opacity]),StoryFn()};var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue===\"transparent\")return \"transparent\";if(backgrounds.find(background=>background.value===currentSelectedValue)\|\|currentSelectedValue)return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(\", \");logger.warn(dedent`\n Backgrounds Addon: could not find the default color \"${defaultName}\".\n These are the available colors for your story based on your configuration:\n ${availableColors}.\n `);}return \"transparent\"};var withBackground=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,globalsBackgroundColor=globals[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=useMemo(()=>backgroundsConfig.disable?\"transparent\":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!==\"transparent\",[selectedBackgroundColor]),selector=context.viewMode===\"docs\"?`#anchor--${context.id} .docs-story`:\".sb-show-main\",backgroundStyles=useMemo(()=>`\n ${selector} {\n background: ${selectedBackgroundColor} !important;\n ${isReduceMotionEnabled()?\"\":\"transition: background-color 0.3s;\"}\n }\n `,[selectedBackgroundColor,selector]);return useEffect(()=>{let selectorId=context.viewMode===\"docs\"?`addon-backgrounds-docs-${context.id}`:\"addon-backgrounds-color\";if(!isActive){clearStyles(selectorId);return}addBackgroundStyle(selectorId,backgroundStyles,context.viewMode===\"docs\"?context.id:null);},[isActive,backgroundStyles,context]),StoryFn()};var withGrid=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals[PARAM_KEY]?.grid===!0&&gridParameters.disable!==!0,{cellAmount,cellSize,opacity}=gridParameters,isInDocs=context.viewMode===\"docs\",defaultOffset=parameters2.layout===void 0\|\|parameters2.layout===\"padded\"?16:0,offsetX=gridParameters.offsetX??(isInDocs?20:defaultOffset),offsetY=gridParameters.offsetY??(isInDocs?20:defaultOffset),gridStyles=useMemo(()=>{let selector=context.viewMode===\"docs\"?`#anchor--${context.id} .docs-story`:\".sb-show-main\",backgroundSize=[`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSizecellAmount}px ${cellSizecellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(\", \");return `\n ${selector} {\n background-size: ${backgroundSize} !important;\n background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;\n background-blend-mode: difference !important;\n background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),\n linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),\n linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;\n }\n `},[cellSize]);return useEffect(()=>{let selectorId=context.viewMode===\"docs\"?`addon-backgrounds-grid-docs-${context.id}`:\"addon-backgrounds-grid\";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles);},[isActive,gridStyles,context]),StoryFn()};var decorators=globalThis.FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...!globalThis.FEATURES?.backgroundsStoryGlobals&&{values:Object.values(DEFAULT_BACKGROUNDS)}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=globalThis.FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};\n\nexport { decorators, initialGlobals, parameters };\n","import { useMemo, useEffect } from 'storybook/internal/preview-api';\nimport { global } from '@storybook/global';\nimport { dedent } from 'ts-dedent';\n\nvar PARAM_KEY=\"outline\";var clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle);},clearStyle=input=>{let selector=typeof input==\"string\"?input:input.join(\"\"),element=global.document.getElementById(selector);element&&element.parentElement&&element.parentElement.removeChild(element);},addOutlineStyles=(selector,css)=>{let existingStyle=global.document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else {let style=global.document.createElement(\"style\");style.setAttribute(\"id\",selector),style.innerHTML=css,global.document.head.appendChild(style);}};function outlineCSS(selector){return dedent`\n ${selector} body {\n outline: 1px solid #2980b9 !important;\n }\n\n ${selector} article {\n outline: 1px solid #3498db !important;\n }\n\n ${selector} nav {\n outline: 1px solid #0088c3 !important;\n }\n\n ${selector} aside {\n outline: 1px solid #33a0ce !important;\n }\n\n ${selector} section {\n outline: 1px solid #66b8da !important;\n }\n\n ${selector} header {\n outline: 1px solid #99cfe7 !important;\n }\n\n ${selector} footer {\n outline: 1px solid #cce7f3 !important;\n }\n\n ${selector} h1 {\n outline: 1px solid #162544 !important;\n }\n\n ${selector} h2 {\n outline: 1px solid #314e6e !important;\n }\n\n ${selector} h3 {\n outline: 1px solid #3e5e85 !important;\n }\n\n ${selector} h4 {\n outline: 1px solid #449baf !important;\n }\n\n ${selector} h5 {\n outline: 1px solid #c7d1cb !important;\n }\n\n ${selector} h6 {\n outline: 1px solid #4371d0 !important;\n }\n\n ${selector} main {\n outline: 1px solid #2f4f90 !important;\n }\n\n ${selector} address {\n outline: 1px solid #1a2c51 !important;\n }\n\n ${selector} div {\n outline: 1px solid #036cdb !important;\n }\n\n ${selector} p {\n outline: 1px solid #ac050b !important;\n }\n\n ${selector} hr {\n outline: 1px solid #ff063f !important;\n }\n\n ${selector} pre {\n outline: 1px solid #850440 !important;\n }\n\n ${selector} blockquote {\n outline: 1px solid #f1b8e7 !important;\n }\n\n ${selector} ol {\n outline: 1px solid #ff050c !important;\n }\n\n ${selector} ul {\n outline: 1px solid #d90416 !important;\n }\n\n ${selector} li {\n outline: 1px solid #d90416 !important;\n }\n\n ${selector} dl {\n outline: 1px solid #fd3427 !important;\n }\n\n ${selector} dt {\n outline: 1px solid #ff0043 !important;\n }\n\n ${selector} dd {\n outline: 1px solid #e80174 !important;\n }\n\n ${selector} figure {\n outline: 1px solid #ff00bb !important;\n }\n\n ${selector} figcaption {\n outline: 1px solid #bf0032 !important;\n }\n\n ${selector} table {\n outline: 1px solid #00cc99 !important;\n }\n\n ${selector} caption {\n outline: 1px solid #37ffc4 !important;\n }\n\n ${selector} thead {\n outline: 1px solid #98daca !important;\n }\n\n ${selector} tbody {\n outline: 1px solid #64a7a0 !important;\n }\n\n ${selector} tfoot {\n outline: 1px solid #22746b !important;\n }\n\n ${selector} tr {\n outline: 1px solid #86c0b2 !important;\n }\n\n ${selector} th {\n outline: 1px solid #a1e7d6 !important;\n }\n\n ${selector} td {\n outline: 1px solid #3f5a54 !important;\n }\n\n ${selector} col {\n outline: 1px solid #6c9a8f !important;\n }\n\n ${selector} colgroup {\n outline: 1px solid #6c9a9d !important;\n }\n\n ${selector} button {\n outline: 1px solid #da8301 !important;\n }\n\n ${selector} datalist {\n outline: 1px solid #c06000 !important;\n }\n\n ${selector} fieldset {\n outline: 1px solid #d95100 !important;\n }\n\n ${selector} form {\n outline: 1px solid #d23600 !important;\n }\n\n ${selector} input {\n outline: 1px solid #fca600 !important;\n }\n\n ${selector} keygen {\n outline: 1px solid #b31e00 !important;\n }\n\n ${selector} label {\n outline: 1px solid #ee8900 !important;\n }\n\n ${selector} legend {\n outline: 1px solid #de6d00 !important;\n }\n\n ${selector} meter {\n outline: 1px solid #e8630c !important;\n }\n\n ${selector} optgroup {\n outline: 1px solid #b33600 !important;\n }\n\n ${selector} option {\n outline: 1px solid #ff8a00 !important;\n }\n\n ${selector} output {\n outline: 1px solid #ff9619 !important;\n }\n\n ${selector} progress {\n outline: 1px solid #e57c00 !important;\n }\n\n ${selector} select {\n outline: 1px solid #e26e0f !important;\n }\n\n ${selector} textarea {\n outline: 1px solid #cc5400 !important;\n }\n\n ${selector} details {\n outline: 1px solid #33848f !important;\n }\n\n ${selector} summary {\n outline: 1px solid #60a1a6 !important;\n }\n\n ${selector} command {\n outline: 1px solid #438da1 !important;\n }\n\n ${selector} menu {\n outline: 1px solid #449da6 !important;\n }\n\n ${selector} del {\n outline: 1px solid #bf0000 !important;\n }\n\n ${selector} ins {\n outline: 1px solid #400000 !important;\n }\n\n ${selector} img {\n outline: 1px solid #22746b !important;\n }\n\n ${selector} iframe {\n outline: 1px solid #64a7a0 !important;\n }\n\n ${selector} embed {\n outline: 1px solid #98daca !important;\n }\n\n ${selector} object {\n outline: 1px solid #00cc99 !important;\n }\n\n ${selector} param {\n outline: 1px solid #37ffc4 !important;\n }\n\n ${selector} video {\n outline: 1px solid #6ee866 !important;\n }\n\n ${selector} audio {\n outline: 1px solid #027353 !important;\n }\n\n ${selector} source {\n outline: 1px solid #012426 !important;\n }\n\n ${selector} canvas {\n outline: 1px solid #a2f570 !important;\n }\n\n ${selector} track {\n outline: 1px solid #59a600 !important;\n }\n\n ${selector} map {\n outline: 1px solid #7be500 !important;\n }\n\n ${selector} area {\n outline: 1px solid #305900 !important;\n }\n\n ${selector} a {\n outline: 1px solid #ff62ab !important;\n }\n\n ${selector} em {\n outline: 1px solid #800b41 !important;\n }\n\n ${selector} strong {\n outline: 1px solid #ff1583 !important;\n }\n\n ${selector} i {\n outline: 1px solid #803156 !important;\n }\n\n ${selector} b {\n outline: 1px solid #cc1169 !important;\n }\n\n ${selector} u {\n outline: 1px solid #ff0430 !important;\n }\n\n ${selector} s {\n outline: 1px solid #f805e3 !important;\n }\n\n ${selector} small {\n outline: 1px solid #d107b2 !important;\n }\n\n ${selector} abbr {\n outline: 1px solid #4a0263 !important;\n }\n\n ${selector} q {\n outline: 1px solid #240018 !important;\n }\n\n ${selector} cite {\n outline: 1px solid #64003c !important;\n }\n\n ${selector} dfn {\n outline: 1px solid #b4005a !important;\n }\n\n ${selector} sub {\n outline: 1px solid #dba0c8 !important;\n }\n\n ${selector} sup {\n outline: 1px solid #cc0256 !important;\n }\n\n ${selector} time {\n outline: 1px solid #d6606d !important;\n }\n\n ${selector} code {\n outline: 1px solid #e04251 !important;\n }\n\n ${selector} kbd {\n outline: 1px solid #5e001f !important;\n }\n\n ${selector} samp {\n outline: 1px solid #9c0033 !important;\n }\n\n ${selector} var {\n outline: 1px solid #d90047 !important;\n }\n\n ${selector} mark {\n outline: 1px solid #ff0053 !important;\n }\n\n ${selector} bdi {\n outline: 1px solid #bf3668 !important;\n }\n\n ${selector} bdo {\n outline: 1px solid #6f1400 !important;\n }\n\n ${selector} ruby {\n outline: 1px solid #ff7b93 !important;\n }\n\n ${selector} rt {\n outline: 1px solid #ff2f54 !important;\n }\n\n ${selector} rp {\n outline: 1px solid #803e49 !important;\n }\n\n ${selector} span {\n outline: 1px solid #cc2643 !important;\n }\n\n ${selector} br {\n outline: 1px solid #db687d !important;\n }\n\n ${selector} wbr {\n outline: 1px solid #db175b !important;\n }`}var withOutline=(StoryFn,context)=>{let{globals}=context,isActive=[!0,\"true\"].includes(globals[PARAM_KEY]),isInDocs=context.viewMode===\"docs\",outlineStyles=useMemo(()=>outlineCSS(isInDocs?'[data-story-block=\"true\"]':\".sb-show-main\"),[context]);return useEffect(()=>{let selectorId=isInDocs?`addon-outline-docs-${context.id}`:\"addon-outline\";return isActive?addOutlineStyles(selectorId,outlineStyles):clearStyles(selectorId),()=>{clearStyles(selectorId);}},[isActive,outlineStyles,context]),StoryFn()};var decorators=[withOutline],initialGlobals={[PARAM_KEY]:!1};\n\nexport { decorators, initialGlobals };\n","import { simulatePageLoad, simulateDOMContentLoaded } from 'storybook/internal/preview-api';\nimport { global } from '@storybook/global';\nimport { render as render$1 } from 'lit';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { dedent } from 'ts-dedent';\n\nvar __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var entry_preview_exports={};__export(entry_preview_exports,{parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var {Node}=global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val;}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),isTemplateResult(element)){(forceRemount\|\|!canvasElement.querySelector('[id=\"root-inner\"]'))&&(canvasElement.innerHTML='<div id=\"root-inner\"></div>');let renderTo=canvasElement.querySelector('[id=\"root-inner\"]');render$1(element,renderTo),simulatePageLoad(canvasElement);}else if(typeof element==\"string\")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML=\"\",canvasElement.appendChild(element),simulateDOMContentLoaded();}else showError({title:`Expecting an HTML snippet or DOM node from the story: \"${name}\" of \"${kind}\".`,description:dedent`\n Did you forget to return the HTML snippet from the story?\n Use \"() => <your snippet or node>\" or when defining the story.\n `});}var parameters={renderer:\"web-components\"};\n\nexport { entry_preview_exports, parameters, render, renderToCanvas };\n"],"names":[],"sourceRoot":""}

package/dist/storybook/936.31ecad10.iframe.bundle.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";(self.webpackChunk_brightspot_ui=self.webpackChunk_brightspot_ui||[]).push([[936],{"./node_modules/@storybook/blocks/dist/Color-YHDXOIA2.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ColorControl:()=>ColorControl,default:()=>Color_default});var _chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@storybook/blocks/dist/chunk-2PTXLE6R.mjs"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/index.js"),storybook_internal_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@storybook/core/dist/components/index.js"),storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@storybook/core/dist/theming/index.js"),_storybook_icons__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@storybook/icons/dist/index.mjs"),require_color_name=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__.P$)({"../../node_modules/color-name/index.js"(exports,module){module.exports={aliceblue:[240,248,255],antiquewhite:[250,235,215],aqua:[0,255,255],aquamarine:[127,255,212],azure:[240,255,255],beige:[245,245,220],bisque:[255,228,196],black:[0,0,0],blanchedalmond:[255,235,205],blue:[0,0,255],blueviolet:[138,43,226],brown:[165,42,42],burlywood:[222,184,135],cadetblue:[95,158,160],chartreuse:[127,255,0],chocolate:[210,105,30],coral:[255,127,80],cornflowerblue:[100,149,237],cornsilk:[255,248,220],crimson:[220,20,60],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgoldenrod:[184,134,11],darkgray:[169,169,169],darkgreen:[0,100,0],darkgrey:[169,169,169],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkseagreen:[143,188,143],darkslateblue:[72,61,139],darkslategray:[47,79,79],darkslategrey:[47,79,79],darkturquoise:[0,206,209],darkviolet:[148,0,211],deeppink:[255,20,147],deepskyblue:[0,191,255],dimgray:[105,105,105],dimgrey:[105,105,105],dodgerblue:[30,144,255],firebrick:[178,34,34],floralwhite:[255,250,240],forestgreen:[34,139,34],fuchsia:[255,0,255],gainsboro:[220,220,220],ghostwhite:[248,248,255],gold:[255,215,0],goldenrod:[218,165,32],gray:[128,128,128],green:[0,128,0],greenyellow:[173,255,47],grey:[128,128,128],honeydew:[240,255,240],hotpink:[255,105,180],indianred:[205,92,92],indigo:[75,0,130],ivory:[255,255,240],khaki:[240,230,140],lavender:[230,230,250],lavenderblush:[255,240,245],lawngreen:[124,252,0],lemonchiffon:[255,250,205],lightblue:[173,216,230],lightcoral:[240,128,128],lightcyan:[224,255,255],lightgoldenrodyellow:[250,250,210],lightgray:[211,211,211],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightsalmon:[255,160,122],lightseagreen:[32,178,170],lightskyblue:[135,206,250],lightslategray:[119,136,153],lightslategrey:[119,136,153],lightsteelblue:[176,196,222],lightyellow:[255,255,224],lime:[0,255,0],limegreen:[50,205,50],linen:[250,240,230],magenta:[255,0,255],maroon:[128,0,0],mediumaquamarine:[102,205,170],mediumblue:[0,0,205],mediumorchid:[186,85,211],mediumpurple:[147,112,219],mediumseagreen:[60,179,113],mediumslateblue:[123,104,238],mediumspringgreen:[0,250,154],mediumturquoise:[72,209,204],mediumvioletred:[199,21,133],midnightblue:[25,25,112],mintcream:[245,255,250],mistyrose:[255,228,225],moccasin:[255,228,181],navajowhite:[255,222,173],navy:[0,0,128],oldlace:[253,245,230],olive:[128,128,0],olivedrab:[107,142,35],orange:[255,165,0],orangered:[255,69,0],orchid:[218,112,214],palegoldenrod:[238,232,170],palegreen:[152,251,152],paleturquoise:[175,238,238],palevioletred:[219,112,147],papayawhip:[255,239,213],peachpuff:[255,218,185],peru:[205,133,63],pink:[255,192,203],plum:[221,160,221],powderblue:[176,224,230],purple:[128,0,128],rebeccapurple:[102,51,153],red:[255,0,0],rosybrown:[188,143,143],royalblue:[65,105,225],saddlebrown:[139,69,19],salmon:[250,128,114],sandybrown:[244,164,96],seagreen:[46,139,87],seashell:[255,245,238],sienna:[160,82,45],silver:[192,192,192],skyblue:[135,206,235],slateblue:[106,90,205],slategray:[112,128,144],slategrey:[112,128,144],snow:[255,250,250],springgreen:[0,255,127],steelblue:[70,130,180],tan:[210,180,140],teal:[0,128,128],thistle:[216,191,216],tomato:[255,99,71],turquoise:[64,224,208],violet:[238,130,238],wheat:[245,222,179],white:[255,255,255],whitesmoke:[245,245,245],yellow:[255,255,0],yellowgreen:[154,205,50]}}}),require_conversions=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__.P$)({"../../node_modules/color-convert/conversions.js"(exports,module){var cssKeywords=require_color_name(),reverseKeywords={};for(let key of Object.keys(cssKeywords))reverseKeywords[cssKeywords[key]]=key;var convert2={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};module.exports=convert2;for(let model of Object.keys(convert2)){if(!("channels"in convert2[model]))throw new Error("missing channels property: "+model);if(!("labels"in convert2[model]))throw new Error("missing channel labels property: "+model);if(convert2[model].labels.length!==convert2[model].channels)throw new Error("channel and label counts mismatch: "+model);let{channels,labels}=convert2[model];delete convert2[model].channels,delete convert2[model].labels,Object.defineProperty(convert2[model],"channels",{value:channels}),Object.defineProperty(convert2[model],"labels",{value:labels})}function comparativeDistance(x2,y2){return(x2[0]-y2[0])**2+(x2[1]-y2[1])**2+(x2[2]-y2[2])**2}convert2.rgb.hsl=function(rgb){let h2,s2,r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,min=Math.min(r2,g2,b2),max=Math.max(r2,g2,b2),delta=max-min;max===min?h2=0:r2===max?h2=(g2-b2)/delta:g2===max?h2=2+(b2-r2)/delta:b2===max&&(h2=4+(r2-g2)/delta),h2=Math.min(60*h2,360),h2<0&&(h2+=360);let l2=(min+max)/2;return s2=max===min?0:l2<=.5?delta/(max+min):delta/(2-max-min),[h2,100*s2,100*l2]},convert2.rgb.hsv=function(rgb){let rdif,gdif,bdif,h2,s2,r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,v2=Math.max(r2,g2,b2),diff=v2-Math.min(r2,g2,b2),diffc=function(c2){return(v2-c2)/6/diff+.5};return 0===diff?(h2=0,s2=0):(s2=diff/v2,rdif=diffc(r2),gdif=diffc(g2),bdif=diffc(b2),r2===v2?h2=bdif-gdif:g2===v2?h2=1/3+rdif-bdif:b2===v2&&(h2=2/3+gdif-rdif),h2<0?h2+=1:h2>1&&(h2-=1)),[360*h2,100*s2,100*v2]},convert2.rgb.hwb=function(rgb){let r2=rgb[0],g2=rgb[1],b2=rgb[2],h2=convert2.rgb.hsl(rgb)[0],w2=1/255*Math.min(r2,Math.min(g2,b2));return b2=1-1/255*Math.max(r2,Math.max(g2,b2)),[h2,100*w2,100*b2]},convert2.rgb.cmyk=function(rgb){let r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,k2=Math.min(1-r2,1-g2,1-b2);return[100*((1-r2-k2)/(1-k2)||0),100*((1-g2-k2)/(1-k2)||0),100*((1-b2-k2)/(1-k2)||0),100*k2]},convert2.rgb.keyword=function(rgb){let reversed=reverseKeywords[rgb];if(reversed)return reversed;let currentClosestKeyword,currentClosestDistance=1/0;for(let keyword of Object.keys(cssKeywords)){let distance=comparativeDistance(rgb,cssKeywords[keyword]);distance<currentClosestDistance&&(currentClosestDistance=distance,currentClosestKeyword=keyword)}return currentClosestKeyword},convert2.keyword.rgb=function(keyword){return cssKeywords[keyword]},convert2.rgb.xyz=function(rgb){let r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255;return r2=r2>.04045?((r2+.055)/1.055)**2.4:r2/12.92,g2=g2>.04045?((g2+.055)/1.055)**2.4:g2/12.92,b2=b2>.04045?((b2+.055)/1.055)**2.4:b2/12.92,[100*(.4124*r2+.3576*g2+.1805*b2),100*(.2126*r2+.7152*g2+.0722*b2),100*(.0193*r2+.1192*g2+.9505*b2)]},convert2.rgb.lab=function(rgb){let xyz=convert2.rgb.xyz(rgb),x2=xyz[0],y2=xyz[1],z2=xyz[2];return x2/=95.047,y2/=100,z2/=108.883,x2=x2>.008856?x2**(1/3):7.787*x2+16/116,y2=y2>.008856?y2**(1/3):7.787*y2+16/116,z2=z2>.008856?z2**(1/3):7.787*z2+16/116,[116*y2-16,500*(x2-y2),200*(y2-z2)]},convert2.hsl.rgb=function(hsl){let t2,t3,val,h2=hsl[0]/360,s2=hsl[1]/100,l2=hsl[2]/100;if(0===s2)return val=255*l2,[val,val,val];t2=l2<.5?l2*(1+s2):l2+s2-l2*s2;let t1=2*l2-t2,rgb=[0,0,0];for(let i2=0;i2<3;i2++)t3=h2+1/3*-(i2-1),t3<0&&t3++,t3>1&&t3--,val=6*t3<1?t1+6*(t2-t1)*t3:2*t3<1?t2:3*t3<2?t1+(t2-t1)*(2/3-t3)*6:t1,rgb[i2]=255*val;return rgb},convert2.hsl.hsv=function(hsl){let h2=hsl[0],s2=hsl[1]/100,l2=hsl[2]/100,smin=s2,lmin=Math.max(l2,.01);return l2*=2,s2*=l2<=1?l2:2-l2,smin*=lmin<=1?lmin:2-lmin,[h2,100*(0===l2?2*smin/(lmin+smin):2*s2/(l2+s2)),100*((l2+s2)/2)]},convert2.hsv.rgb=function(hsv){let h2=hsv[0]/60,s2=hsv[1]/100,v2=hsv[2]/100,hi=Math.floor(h2)%6,f2=h2-Math.floor(h2),p2=255*v2*(1-s2),q2=255*v2*(1-s2*f2),t2=255*v2*(1-s2*(1-f2));switch(v2*=255,hi){case 0:return[v2,t2,p2];case 1:return[q2,v2,p2];case 2:return[p2,v2,t2];case 3:return[p2,q2,v2];case 4:return[t2,p2,v2];case 5:return[v2,p2,q2]}},convert2.hsv.hsl=function(hsv){let sl,l2,h2=hsv[0],s2=hsv[1]/100,v2=hsv[2]/100,vmin=Math.max(v2,.01);l2=(2-s2)*v2;let lmin=(2-s2)*vmin;return sl=s2*vmin,sl/=lmin<=1?lmin:2-lmin,sl=sl||0,l2/=2,[h2,100*sl,100*l2]},convert2.hwb.rgb=function(hwb){let f2,h2=hwb[0]/360,wh=hwb[1]/100,bl=hwb[2]/100,ratio=wh+bl;ratio>1&&(wh/=ratio,bl/=ratio);let i2=Math.floor(6*h2),v2=1-bl;f2=6*h2-i2,1&i2&&(f2=1-f2);let r2,g2,b2,n2=wh+f2*(v2-wh);switch(i2){default:case 6:case 0:r2=v2,g2=n2,b2=wh;break;case 1:r2=n2,g2=v2,b2=wh;break;case 2:r2=wh,g2=v2,b2=n2;break;case 3:r2=wh,g2=n2,b2=v2;break;case 4:r2=n2,g2=wh,b2=v2;break;case 5:r2=v2,g2=wh,b2=n2}return[255*r2,255*g2,255*b2]},convert2.cmyk.rgb=function(cmyk){let c2=cmyk[0]/100,m2=cmyk[1]/100,y2=cmyk[2]/100,k2=cmyk[3]/100;return[255*(1-Math.min(1,c2*(1-k2)+k2)),255*(1-Math.min(1,m2*(1-k2)+k2)),255*(1-Math.min(1,y2*(1-k2)+k2))]},convert2.xyz.rgb=function(xyz){let r2,g2,b2,x2=xyz[0]/100,y2=xyz[1]/100,z2=xyz[2]/100;return r2=3.2406*x2+-1.5372*y2+-.4986*z2,g2=-.9689*x2+1.8758*y2+.0415*z2,b2=.0557*x2+-.204*y2+1.057*z2,r2=r2>.0031308?1.055*r2**(1/2.4)-.055:12.92*r2,g2=g2>.0031308?1.055*g2**(1/2.4)-.055:12.92*g2,b2=b2>.0031308?1.055*b2**(1/2.4)-.055:12.92*b2,r2=Math.min(Math.max(0,r2),1),g2=Math.min(Math.max(0,g2),1),b2=Math.min(Math.max(0,b2),1),[255*r2,255*g2,255*b2]},convert2.xyz.lab=function(xyz){let x2=xyz[0],y2=xyz[1],z2=xyz[2];return x2/=95.047,y2/=100,z2/=108.883,x2=x2>.008856?x2**(1/3):7.787*x2+16/116,y2=y2>.008856?y2**(1/3):7.787*y2+16/116,z2=z2>.008856?z2**(1/3):7.787*z2+16/116,[116*y2-16,500*(x2-y2),200*(y2-z2)]},convert2.lab.xyz=function(lab){let x2,y2,z2;y2=(lab[0]+16)/116,x2=lab[1]/500+y2,z2=y2-lab[2]/200;let y22=y2**3,x22=x2**3,z22=z2**3;return y2=y22>.008856?y22:(y2-16/116)/7.787,x2=x22>.008856?x22:(x2-16/116)/7.787,z2=z22>.008856?z22:(z2-16/116)/7.787,x2*=95.047,y2*=100,z2*=108.883,[x2,y2,z2]},convert2.lab.lch=function(lab){let h2,l2=lab[0],a2=lab[1],b2=lab[2];return h2=360*Math.atan2(b2,a2)/2/Math.PI,h2<0&&(h2+=360),[l2,Math.sqrt(a2*a2+b2*b2),h2]},convert2.lch.lab=function(lch){let l2=lch[0],c2=lch[1],hr=lch[2]/360*2*Math.PI;return[l2,c2*Math.cos(hr),c2*Math.sin(hr)]},convert2.rgb.ansi16=function(args,saturation=null){let[r2,g2,b2]=args,value=null===saturation?convert2.rgb.hsv(args)[2]:saturation;if(value=Math.round(value/50),0===value)return 30;let ansi=30+(Math.round(b2/255)<<2|Math.round(g2/255)<<1|Math.round(r2/255));return 2===value&&(ansi+=60),ansi},convert2.hsv.ansi16=function(args){return convert2.rgb.ansi16(convert2.hsv.rgb(args),args[2])},convert2.rgb.ansi256=function(args){let r2=args[0],g2=args[1],b2=args[2];return r2===g2&&g2===b2?r2<8?16:r2>248?231:Math.round((r2-8)/247*24)+232:16+36*Math.round(r2/255*5)+6*Math.round(g2/255*5)+Math.round(b2/255*5)},convert2.ansi16.rgb=function(args){let color=args%10;if(0===color||7===color)return args>50&&(color+=3.5),color=color/10.5*255,[color,color,color];let mult=.5*(1+~~(args>50));return[(1&color)*mult*255,(color>>1&1)*mult*255,(color>>2&1)*mult*255]},convert2.ansi256.rgb=function(args){if(args>=232){let c2=10*(args-232)+8;return[c2,c2,c2]}let rem;return args-=16,[Math.floor(args/36)/5*255,Math.floor((rem=args%36)/6)/5*255,rem%6/5*255]},convert2.rgb.hex=function(args){let string=(((255&Math.round(args[0]))<<16)+((255&Math.round(args[1]))<<8)+(255&Math.round(args[2]))).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert2.hex.rgb=function(args){let match=args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!match)return[0,0,0];let colorString=match[0];3===match[0].length&&(colorString=colorString.split("").map(char=>char+char).join(""));let integer=parseInt(colorString,16);return[integer>>16&255,integer>>8&255,255&integer]},convert2.rgb.hcg=function(rgb){let grayscale,hue,r2=rgb[0]/255,g2=rgb[1]/255,b2=rgb[2]/255,max=Math.max(Math.max(r2,g2),b2),min=Math.min(Math.min(r2,g2),b2),chroma=max-min;return grayscale=chroma<1?min/(1-chroma):0,hue=chroma<=0?0:max===r2?(g2-b2)/chroma%6:max===g2?2+(b2-r2)/chroma:4+(r2-g2)/chroma,hue/=6,hue%=1,[360*hue,100*chroma,100*grayscale]},convert2.hsl.hcg=function(hsl){let s2=hsl[1]/100,l2=hsl[2]/100,c2=l2<.5?2*s2*l2:2*s2*(1-l2),f2=0;return c2<1&&(f2=(l2-.5*c2)/(1-c2)),[hsl[0],100*c2,100*f2]},convert2.hsv.hcg=function(hsv){let s2=hsv[1]/100,v2=hsv[2]/100,c2=s2*v2,f2=0;return c2<1&&(f2=(v2-c2)/(1-c2)),[hsv[0],100*c2,100*f2]},convert2.hcg.rgb=function(hcg){let h2=hcg[0]/360,c2=hcg[1]/100,g2=hcg[2]/100;if(0===c2)return[255*g2,255*g2,255*g2];let pure=[0,0,0],hi=h2%1*6,v2=hi%1,w2=1-v2,mg=0;switch(Math.floor(hi)){case 0:pure[0]=1,pure[1]=v2,pure[2]=0;break;case 1:pure[0]=w2,pure[1]=1,pure[2]=0;break;case 2:pure[0]=0,pure[1]=1,pure[2]=v2;break;case 3:pure[0]=0,pure[1]=w2,pure[2]=1;break;case 4:pure[0]=v2,pure[1]=0,pure[2]=1;break;default:pure[0]=1,pure[1]=0,pure[2]=w2}return mg=(1-c2)*g2,[255*(c2*pure[0]+mg),255*(c2*pure[1]+mg),255*(c2*pure[2]+mg)]},convert2.hcg.hsv=function(hcg){let c2=hcg[1]/100,v2=c2+hcg[2]/100*(1-c2),f2=0;return v2>0&&(f2=c2/v2),[hcg[0],100*f2,100*v2]},convert2.hcg.hsl=function(hcg){let c2=hcg[1]/100,l2=hcg[2]/100*(1-c2)+.5*c2,s2=0;return l2>0&&l2<.5?s2=c2/(2*l2):l2>=.5&&l2<1&&(s2=c2/(2*(1-l2))),[hcg[0],100*s2,100*l2]},convert2.hcg.hwb=function(hcg){let c2=hcg[1]/100,v2=c2+hcg[2]/100*(1-c2);return[hcg[0],100*(v2-c2),100*(1-v2)]},convert2.hwb.hcg=function(hwb){let w2=hwb[1]/100,v2=1-hwb[2]/100,c2=v2-w2,g2=0;return c2<1&&(g2=(v2-c2)/(1-c2)),[hwb[0],100*c2,100*g2]},convert2.apple.rgb=function(apple){return[apple[0]/65535*255,apple[1]/65535*255,apple[2]/65535*255]},convert2.rgb.apple=function(rgb){return[rgb[0]/255*65535,rgb[1]/255*65535,rgb[2]/255*65535]},convert2.gray.rgb=function(args){return[args[0]/100*255,args[0]/100*255,args[0]/100*255]},convert2.gray.hsl=function(args){return[0,0,args[0]]},convert2.gray.hsv=convert2.gray.hsl,convert2.gray.hwb=function(gray){return[0,100,gray[0]]},convert2.gray.cmyk=function(gray){return[0,0,0,gray[0]]},convert2.gray.lab=function(gray){return[gray[0],0,0]},convert2.gray.hex=function(gray){let val=255&Math.round(gray[0]/100*255),string=((val<<16)+(val<<8)+val).toString(16).toUpperCase();return"000000".substring(string.length)+string},convert2.rgb.gray=function(rgb){return[(rgb[0]+rgb[1]+rgb[2])/3/255*100]}}}),require_route=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__.P$)({"../../node_modules/color-convert/route.js"(exports,module){var conversions=require_conversions();function deriveBFS(fromModel){let graph=function buildGraph(){let graph={},models=Object.keys(conversions);for(let len=models.length,i2=0;i2<len;i2++)graph[models[i2]]={distance:-1,parent:null};return graph}(),queue=[fromModel];for(graph[fromModel].distance=0;queue.length;){let current=queue.pop(),adjacents=Object.keys(conversions[current]);for(let len=adjacents.length,i2=0;i2<len;i2++){let adjacent=adjacents[i2],node=graph[adjacent];-1===node.distance&&(node.distance=graph[current].distance+1,node.parent=current,queue.unshift(adjacent))}}return graph}function link(from,to){return function(args){return to(from(args))}}function wrapConversion(toModel,graph){let path=[graph[toModel].parent,toModel],fn=conversions[graph[toModel].parent][toModel],cur=graph[toModel].parent;for(;graph[cur].parent;)path.unshift(graph[cur].parent),fn=link(conversions[graph[cur].parent][cur],fn),cur=graph[cur].parent;return fn.conversion=path,fn}module.exports=function(fromModel){let graph=deriveBFS(fromModel),conversion={},models=Object.keys(graph);for(let len=models.length,i2=0;i2<len;i2++){let toModel=models[i2];null!==graph[toModel].parent&&(conversion[toModel]=wrapConversion(toModel,graph))}return conversion}}}),require_color_convert=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__.P$)({"../../node_modules/color-convert/index.js"(exports,module){var conversions=require_conversions(),route=require_route(),convert2={};Object.keys(conversions).forEach(fromModel=>{convert2[fromModel]={},Object.defineProperty(convert2[fromModel],"channels",{value:conversions[fromModel].channels}),Object.defineProperty(convert2[fromModel],"labels",{value:conversions[fromModel].labels});let routes=route(fromModel);Object.keys(routes).forEach(toModel=>{let fn=routes[toModel];convert2[fromModel][toModel]=function wrapRounded(fn){let wrappedFn=function(...args){let arg0=args[0];if(null==arg0)return arg0;arg0.length>1&&(args=arg0);let result=fn(args);if("object"==typeof result)for(let len=result.length,i2=0;i2<len;i2++)result[i2]=Math.round(result[i2]);return result};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn),convert2[fromModel][toModel].raw=function wrapRaw(fn){let wrappedFn=function(...args){let arg0=args[0];return null==arg0?arg0:(arg0.length>1&&(args=arg0),fn(args))};return"conversion"in fn&&(wrappedFn.conversion=fn.conversion),wrappedFn}(fn)})}),module.exports=convert2}}),import_color_convert=(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__.f1)(require_color_convert());function u(){return(u=Object.assign||function(e2){for(var r2=1;r2<arguments.length;r2++){var t2=arguments[r2];for(var n2 in t2)Object.prototype.hasOwnProperty.call(t2,n2)&&(e2[n2]=t2[n2])}return e2}).apply(this,arguments)}function c(e2,r2){if(null==e2)return{};var t2,n2,o2={},a2=Object.keys(e2);for(n2=0;n2<a2.length;n2++)r2.indexOf(t2=a2[n2])>=0||(o2[t2]=e2[t2]);return o2}function i(e2){var t2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(e2),n2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(function(e3){t2.current&&t2.current(e3)});return t2.current=e2,n2.current}var s=function(e2,r2,t2){return void 0===r2&&(r2=0),void 0===t2&&(t2=1),e2>t2?t2:e2<r2?r2:e2},f=function(e2){return"touches"in e2},v=function(e2){return e2&&e2.ownerDocument.defaultView||self},d=function(e2,r2,t2){var n2=e2.getBoundingClientRect(),o2=f(r2)?function(e3,r3){for(var t3=0;t3<e3.length;t3++)if(e3[t3].identifier===r3)return e3[t3];return e3[0]}(r2.touches,t2):r2;return{left:s((o2.pageX-(n2.left+v(e2).pageXOffset))/n2.width),top:s((o2.pageY-(n2.top+v(e2).pageYOffset))/n2.height)}},h=function(e2){!f(e2)&&e2.preventDefault()},m=react__WEBPACK_IMPORTED_MODULE_1__.memo(function(o2){var a2=o2.onMove,l2=o2.onKey,s2=c(o2,["onMove","onKey"]),m2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),g2=i(a2),p2=i(l2),b2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),_2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(!1),x2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(function(){var e2=function(e3){h(e3),(f(e3)?e3.touches.length>0:e3.buttons>0)&&m2.current?g2(d(m2.current,e3,b2.current)):t2(!1)},r2=function(){return t2(!1)};function t2(t3){var n2=_2.current,o3=v(m2.current),a3=t3?o3.addEventListener:o3.removeEventListener;a3(n2?"touchmove":"mousemove",e2),a3(n2?"touchend":"mouseup",r2)}return[function(e3){var e4,r3=e3.nativeEvent,n2=m2.current;if(n2&&(h(r3),e4=r3,(!_2.current||f(e4))&&n2)){if(f(r3)){_2.current=!0;var o3=r3.changedTouches||[];o3.length&&(b2.current=o3[0].identifier)}n2.focus(),g2(d(n2,r3,b2.current)),t2(!0)}},function(e3){var r3=e3.which||e3.keyCode;r3<37||r3>40||(e3.preventDefault(),p2({left:39===r3?.05:37===r3?-.05:0,top:40===r3?.05:38===r3?-.05:0}))},t2]},[p2,g2]),C2=x2[0],E2=x2[1],H2=x2[2];return(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function(){return H2},[H2]),react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",u({},s2,{onTouchStart:C2,onMouseDown:C2,className:"react-colorful__interactive",ref:m2,onKeyDown:E2,tabIndex:0,role:"slider"}))}),g=function(e2){return e2.filter(Boolean).join(" ")},p=function(r2){var t2=r2.color,n2=r2.left,o2=r2.top,a2=void 0===o2?.5:o2,l2=g(["react-colorful__pointer",r2.className]);return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",{className:l2,style:{top:100*a2+"%",left:100*n2+"%"}},react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t2}}))},b=function(e2,r2,t2){return void 0===r2&&(r2=0),void 0===t2&&(t2=Math.pow(10,r2)),Math.round(t2*e2)/t2},_={grad:.9,turn:360,rad:360/(2*Math.PI)},C=function(e2){return"#"===e2[0]&&(e2=e2.substring(1)),e2.length<6?{r:parseInt(e2[0]+e2[0],16),g:parseInt(e2[1]+e2[1],16),b:parseInt(e2[2]+e2[2],16),a:4===e2.length?b(parseInt(e2[3]+e2[3],16)/255,2):1}:{r:parseInt(e2.substring(0,2),16),g:parseInt(e2.substring(2,4),16),b:parseInt(e2.substring(4,6),16),a:8===e2.length?b(parseInt(e2.substring(6,8),16)/255,2):1}},E=function(e2,r2){return void 0===r2&&(r2="deg"),Number(e2)*(_[r2]||1)},N=function(e2){var r2=e2.s,t2=e2.l;return{h:e2.h,s:(r2*=(t2<50?t2:100-t2)/100)>0?2*r2/(t2+r2)*100:0,v:t2+r2,a:e2.a}},y=function(e2){var r2=e2.s,t2=e2.v,n2=e2.a,o2=(200-r2)*t2/100;return{h:b(e2.h),s:b(o2>0&&o2<200?r2*t2/100/(o2<=100?o2:200-o2)*100:0),l:b(o2/2),a:b(n2,2)}},q=function(e2){var r2=y(e2);return"hsl("+r2.h+", "+r2.s+"%, "+r2.l+"%)"},k=function(e2){var r2=y(e2);return"hsla("+r2.h+", "+r2.s+"%, "+r2.l+"%, "+r2.a+")"},I=function(e2){var r2=e2.h,t2=e2.s,n2=e2.v,o2=e2.a;r2=r2/360*6,t2/=100,n2/=100;var a2=Math.floor(r2),l2=n2*(1-t2),u2=n2*(1-(r2-a2)*t2),c2=n2*(1-(1-r2+a2)*t2),i2=a2%6;return{r:b(255*[n2,u2,l2,l2,c2,n2][i2]),g:b(255*[c2,n2,n2,u2,l2,l2][i2]),b:b(255*[l2,l2,c2,n2,n2,u2][i2]),a:b(o2,2)}},D=function(e2){var r2=e2.toString(16);return r2.length<2?"0"+r2:r2},K=function(e2){var r2=e2.r,t2=e2.g,n2=e2.b,o2=e2.a,a2=o2<1?D(b(255*o2)):"";return"#"+D(r2)+D(t2)+D(n2)+a2},L=function(e2){var r2=e2.r,t2=e2.g,n2=e2.b,o2=e2.a,a2=Math.max(r2,t2,n2),l2=a2-Math.min(r2,t2,n2),u2=l2?a2===r2?(t2-n2)/l2:a2===t2?2+(n2-r2)/l2:4+(r2-t2)/l2:0;return{h:b(60*(u2<0?u2+6:u2)),s:b(a2?l2/a2*100:0),v:b(a2/255*100),a:o2}},S=react__WEBPACK_IMPORTED_MODULE_1__.memo(function(r2){var t2=r2.hue,n2=r2.onChange,o2=g(["react-colorful__hue",r2.className]);return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",{className:o2},react__WEBPACK_IMPORTED_MODULE_1__.createElement(m,{onMove:function(e2){n2({h:360*e2.left})},onKey:function(e2){n2({h:s(t2+360*e2.left,0,360)})},"aria-label":"Hue","aria-valuenow":b(t2),"aria-valuemax":"360","aria-valuemin":"0"},react__WEBPACK_IMPORTED_MODULE_1__.createElement(p,{className:"react-colorful__hue-pointer",left:t2/360,color:q({h:t2,s:100,v:100,a:1})})))}),T=react__WEBPACK_IMPORTED_MODULE_1__.memo(function(r2){var t2=r2.hsva,n2=r2.onChange,o2={backgroundColor:q({h:t2.h,s:100,v:100,a:1})};return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",{className:"react-colorful__saturation",style:o2},react__WEBPACK_IMPORTED_MODULE_1__.createElement(m,{onMove:function(e2){n2({s:100*e2.left,v:100-100*e2.top})},onKey:function(e2){n2({s:s(t2.s+100*e2.left,0,100),v:s(t2.v-100*e2.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+b(t2.s)+"%, Brightness "+b(t2.v)+"%"},react__WEBPACK_IMPORTED_MODULE_1__.createElement(p,{className:"react-colorful__saturation-pointer",top:1-t2.v/100,left:t2.s/100,color:q(t2)})))}),F=function(e2,r2){if(e2===r2)return!0;for(var t2 in e2)if(e2[t2]!==r2[t2])return!1;return!0},P=function(e2,r2){return e2.replace(/\s/g,"")===r2.replace(/\s/g,"")};function Y(e2,t2,l2){var u2=i(l2),c2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(function(){return e2.toHsva(t2)}),s2=c2[0],f2=c2[1],v2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)({color:t2,hsva:s2});(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function(){if(!e2.equal(t2,v2.current.color)){var r2=e2.toHsva(t2);v2.current={hsva:r2,color:t2},f2(r2)}},[t2,e2]),(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function(){var r2;F(s2,v2.current.hsva)||e2.equal(r2=e2.fromHsva(s2),v2.current.color)||(v2.current={hsva:s2,color:r2},u2(r2))},[s2,e2,u2]);var d2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function(e3){f2(function(r2){return Object.assign({},r2,e3)})},[]);return[s2,d2]}var ColorSpace2,V=typeof window<"u"?react__WEBPACK_IMPORTED_MODULE_1__.useLayoutEffect:react__WEBPACK_IMPORTED_MODULE_1__.useEffect,J=new Map,Q=function(e2){V(function(){var r2=e2.current?e2.current.ownerDocument:document;if(void 0!==r2&&!J.has(r2)){var t2=r2.createElement("style");t2.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',J.set(r2,t2);var n2=__webpack_require__.nc;n2&&t2.setAttribute("nonce",n2),r2.head.appendChild(t2)}},[])},U=function(t2){var n2=t2.className,o2=t2.colorModel,a2=t2.color,l2=void 0===a2?o2.defaultColor:a2,i2=t2.onChange,s2=c(t2,["className","colorModel","color","onChange"]),f2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);Q(f2);var v2=Y(o2,l2,i2),d2=v2[0],h2=v2[1],m2=g(["react-colorful",n2]);return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",u({},s2,{ref:f2,className:m2}),react__WEBPACK_IMPORTED_MODULE_1__.createElement(T,{hsva:d2,onChange:h2}),react__WEBPACK_IMPORTED_MODULE_1__.createElement(S,{hue:d2.h,onChange:h2,className:"react-colorful__last-control"}))},W={defaultColor:"000",toHsva:function(e2){return L(C(e2))},fromHsva:function(e2){return function(e2){return K(I(e2))}({h:e2.h,s:e2.s,v:e2.v,a:1})},equal:function(e2,r2){return e2.toLowerCase()===r2.toLowerCase()||F(C(e2),C(r2))}},ee=function(r2){var t2=r2.className,n2=r2.hsva,o2=r2.onChange,a2={backgroundImage:"linear-gradient(90deg, "+k(Object.assign({},n2,{a:0}))+", "+k(Object.assign({},n2,{a:1}))+")"},l2=g(["react-colorful__alpha",t2]),u2=b(100*n2.a);return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",{className:l2},react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",{className:"react-colorful__alpha-gradient",style:a2}),react__WEBPACK_IMPORTED_MODULE_1__.createElement(m,{onMove:function(e2){o2({a:e2.left})},onKey:function(e2){o2({a:s(n2.a+e2.left)})},"aria-label":"Alpha","aria-valuetext":u2+"%","aria-valuenow":u2,"aria-valuemin":"0","aria-valuemax":"100"},react__WEBPACK_IMPORTED_MODULE_1__.createElement(p,{className:"react-colorful__alpha-pointer",left:n2.a,color:k(n2)})))},re=function(t2){var n2=t2.className,o2=t2.colorModel,a2=t2.color,l2=void 0===a2?o2.defaultColor:a2,i2=t2.onChange,s2=c(t2,["className","colorModel","color","onChange"]),f2=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);Q(f2);var v2=Y(o2,l2,i2),d2=v2[0],h2=v2[1],m2=g(["react-colorful",n2]);return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div",u({},s2,{ref:f2,className:m2}),react__WEBPACK_IMPORTED_MODULE_1__.createElement(T,{hsva:d2,onChange:h2}),react__WEBPACK_IMPORTED_MODULE_1__.createElement(S,{hue:d2.h,onChange:h2}),react__WEBPACK_IMPORTED_MODULE_1__.createElement(ee,{hsva:d2,onChange:h2,className:"react-colorful__last-control"}))},le={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:function(e2){var r2=/hsla?$?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*$?/i.exec(e2);return r2?N({h:E(r2[1],r2[2]),s:Number(r2[3]),l:Number(r2[4]),a:void 0===r2[5]?1:Number(r2[5])/(r2[6]?100:1)}):{h:0,s:0,v:0,a:1}},fromHsva:k,equal:P},Ee={defaultColor:"rgba(0, 0, 0, 1)",toHsva:function(e2){var r2=/rgba?$?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*$?/i.exec(e2);return r2?L({r:Number(r2[1])/(r2[2]?100/255:1),g:Number(r2[3])/(r2[4]?100/255:1),b:Number(r2[5])/(r2[6]?100/255:1),a:void 0===r2[7]?1:Number(r2[7])/(r2[8]?100:1)}):{h:0,s:0,v:0,a:1}},fromHsva:function(e2){var r2=I(e2);return"rgba("+r2.r+", "+r2.g+", "+r2.b+", "+r2.a+")"},equal:P},Wrapper=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),PickerTooltip=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4)(storybook_internal_components__WEBPACK_IMPORTED_MODULE_2__.kR)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),TooltipContent=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4)(storybook_internal_components__WEBPACK_IMPORTED_MODULE_2__._)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4.div(({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius})),Swatch=({value,style,...props})=>{let backgroundImage=`linear-gradient(${value}, ${value}), url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>'), linear-gradient(#fff, #fff)`;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(SwatchColor,{...props,style:{...style,backgroundImage}})},Input=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4)(storybook_internal_components__WEBPACK_IMPORTED_MODULE_2__.lV.Input)(({theme,readOnly})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=(0,storybook_internal_theming__WEBPACK_IMPORTED_MODULE_3__.I4)(_storybook_icons__WEBPACK_IMPORTED_MODULE_4__.QDE)(({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color})),ColorSpace=((ColorSpace2=ColorSpace||{}).RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/$([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?$/,RGB_REGEXP=/^\s*rgba?$([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?$\s*$/i,HSL_REGEXP=/^\s*hsla?$([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?$\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={hex:function(r2){return react__WEBPACK_IMPORTED_MODULE_1__.createElement(U,u({},r2,{colorModel:W}))},rgb:function(r2){return react__WEBPACK_IMPORTED_MODULE_1__.createElement(re,u({},r2,{colorModel:Ee}))},hsl:function(r2){return react__WEBPACK_IMPORTED_MODULE_1__.createElement(re,u({},r2,{colorModel:le}))}},fallbackColor={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},stringToArgs=value=>{let match=value?.match(COLOR_REGEXP);if(!match)return[0,0,0,1];let[,x2,y2,z2,a2=1]=match;return[x2,y2,z2,a2].map(Number)},parseValue=value=>{if(!value)return;let valid=!0;if(RGB_REGEXP.test(value)){let[r2,g2,b2,a2]=stringToArgs(value),[h2,s2,l2]=import_color_convert.default.rgb.hsl([r2,g2,b2])||[0,0,0];return{valid,value,keyword:import_color_convert.default.rgb.keyword([r2,g2,b2]),colorSpace:"rgb",rgb:value,hsl:`hsla(${h2}, ${s2}%, ${l2}%, ${a2})`,hex:`#${import_color_convert.default.rgb.hex([r2,g2,b2]).toLowerCase()}`}}if(HSL_REGEXP.test(value)){let[h2,s2,l2,a2]=stringToArgs(value),[r2,g2,b2]=import_color_convert.default.hsl.rgb([h2,s2,l2])||[0,0,0];return{valid,value,keyword:import_color_convert.default.hsl.keyword([h2,s2,l2]),colorSpace:"hsl",rgb:`rgba(${r2}, ${g2}, ${b2}, ${a2})`,hsl:value,hex:`#${import_color_convert.default.hsl.hex([h2,s2,l2]).toLowerCase()}`}}let plain=value.replace("#",""),rgb=import_color_convert.default.keyword.rgb(plain)||import_color_convert.default.hex.rgb(plain),hsl=import_color_convert.default.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped=`#${plain}`),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{import_color_convert.default.keyword.hex(mapped)}catch{valid=!1}return{valid,value:mapped,keyword:import_color_convert.default.rgb.keyword(rgb),colorSpace:"hex",rgb:`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`,hsl:`hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`,hex:mapped}},useColorInput=(initialValue,onChange)=>{let[value,setValue]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(initialValue||""),[color,setColor]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(()=>parseValue(value)),[colorSpace,setColorSpace]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(color?.colorSpace||"hex");(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{let nextValue=initialValue||"",nextColor=parseValue(nextValue);setValue(nextValue),setColor(nextColor),setColorSpace(nextColor?.colorSpace||"hex")},[initialValue]);let realValue=(0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>((value,color,colorSpace)=>{if(!value||!color?.valid)return fallbackColor[colorSpace];if("hex"!==colorSpace)return color?.[colorSpace]||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return`#${import_color_convert.default.keyword.hex(color.hex)}`}catch{return fallbackColor.hex}let short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;let[r2,g2,b2]=short[1].split("");return`#${r2}${r2}${g2}${g2}${b2}${b2}`})(value,color,colorSpace).toLowerCase(),[value,color,colorSpace]),updateValue=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(update=>{let parsed=parseValue(update),v2=parsed?.value||update||"";setValue(v2),""===v2&&(setColor(void 0),onChange(void 0)),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))},[onChange]),cycleColorSpace=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(()=>{let next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);let update=color?.[COLOR_SPACES[next]]||"";setValue(update),onChange(update)},[color,colorSpace,onChange]);return{value,realValue,updateValue,color,colorSpace,cycleColorSpace}},id=value=>value.replace(/\s*/,"").toLowerCase(),ColorControl=({name,value:initialValue,onChange,onFocus,onBlur,presetColors,startOpen=!1,argType})=>{let debouncedOnChange=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__.sg)(onChange,200),[onChange]),{value,realValue,updateValue,color,colorSpace,cycleColorSpace}=useColorInput(initialValue,debouncedOnChange),{presets,addPreset}=((presetColors,currentColor,colorSpace)=>{let[selectedColors,setSelectedColors]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(currentColor?.valid?[currentColor]:[]);(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{void 0===currentColor&&setSelectedColors([])},[currentColor]);let presets=(0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)(()=>(presetColors||[]).map(preset=>"string"==typeof preset?parseValue(preset):preset.title?{...parseValue(preset.color),keyword:preset.title}:parseValue(preset.color)).concat(selectedColors).filter(Boolean).slice(-27),[presetColors,selectedColors]),addPreset=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(color=>{color?.valid&&(presets.some(preset=>id(preset[colorSpace])===id(color[colorSpace]))||setSelectedColors(arr=>arr.concat(color)))},[colorSpace,presets]);return{presets,addPreset}})(presetColors,color,colorSpace),Picker=ColorPicker[colorSpace],readonly=!!argType?.table?.readonly;return react__WEBPACK_IMPORTED_MODULE_1__.createElement(Wrapper,{"aria-readonly":readonly},react__WEBPACK_IMPORTED_MODULE_1__.createElement(PickerTooltip,{startOpen,trigger:readonly?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>addPreset(color),tooltip:react__WEBPACK_IMPORTED_MODULE_1__.createElement(TooltipContent,null,react__WEBPACK_IMPORTED_MODULE_1__.createElement(Picker,{color:"transparent"===realValue?"#000000":realValue,onChange:updateValue,onFocus,onBlur}),presets.length>0&&react__WEBPACK_IMPORTED_MODULE_1__.createElement(Swatches,null,presets.map((preset,index)=>react__WEBPACK_IMPORTED_MODULE_1__.createElement(storybook_internal_components__WEBPACK_IMPORTED_MODULE_2__.kR,{key:`${preset.value}-${index}`,hasChrome:!1,tooltip:react__WEBPACK_IMPORTED_MODULE_1__.createElement(Note,{note:preset.keyword||preset.value})},react__WEBPACK_IMPORTED_MODULE_1__.createElement(Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:()=>updateValue(preset.value)})))))},react__WEBPACK_IMPORTED_MODULE_1__.createElement(Swatch,{value:realValue,style:{margin:4}})),react__WEBPACK_IMPORTED_MODULE_1__.createElement(Input,{id:(0,_chunk_2PTXLE6R_mjs__WEBPACK_IMPORTED_MODULE_0__.ZA)(name),value,onChange:e2=>updateValue(e2.target.value),onFocus:e2=>e2.target.select(),readOnly:readonly,placeholder:"Choose color..."}),value?react__WEBPACK_IMPORTED_MODULE_1__.createElement(ToggleIcon,{onClick:cycleColorSpace}):null)},Color_default=ColorControl}}]);

package/dist/storybook/iframe.html CHANGED Viewed

@@ -504,8 +504,8 @@
             window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
-      import './runtime~main.36ab40ff.iframe.bundle.js';
+      import './runtime~main.7d6d5df6.iframe.bundle.js';
-      import './906.72b6fffa.iframe.bundle.js';
+      import './906.a03add0d.iframe.bundle.js';
-      import './main.8dadaa0a.iframe.bundle.js';</script></body></html>
+      import './main.60eb2a33.iframe.bundle.js';</script></body></html>