@brightspot/ui 1.11.0 → 3.0.0

package/dist/storybook/assets/Checkbox.stories-DXAGFS0M.js

@@ -0,0 +1,141 @@
+import{g as x,x as p}from"./iframe-Sf9RHZFu.js";import{o as t}from"./if-defined-CgfCxQoV.js";import{o as g}from"./style-map-B99QiqCo.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:f}=x("btu-checkbox"),S={customColorPrimary:"--checkbox-color-primary",customColorBorder:"--checkbox-color-border",customColorError:"--checkbox-color-error",customBorderRadius:"--checkbox-border-radius",customLabelSpacing:"--checkbox-label-spacing"},C=e=>Object.entries(S).reduce((r,[h,k])=>(e[h]&&(r[k]=e[h]),r),{}),P={title:"Components/Checkbox",component:"btu-checkbox",tags:["autodocs"],parameters:{docs:{subtitle:"A checkbox for selecting one or more options",description:{component:`
+<h3>When to use:</h3>
+<ul>
+  <li>For selecting one or more options from a set</li>
+  <li>In forms, filters, and settings toggles</li>
+  <li>For "select all" patterns with the indeterminate state</li>
+</ul>
+        `}},actions:{handles:y},controls:{expanded:!0}},args:{...v,label:"Remember me",checked:!1},argTypes:{...f,"--checkbox-color-primary":{table:{disable:!0}},"--checkbox-color-border":{table:{disable:!0}},"--checkbox-color-error":{table:{disable:!0}},"--checkbox-border-radius":{table:{disable:!0}},"--checkbox-label-spacing":{table:{disable:!0}},"--checkbox-box-size":{table:{disable:!0}},"--checkbox-icon-size":{table:{disable:!0}},customColorPrimary:{name:"--checkbox-color-primary",control:{type:"color"},description:"Background and border color when checked or indeterminate, and tinted background/border on unchecked hover",table:{category:"CSS Properties"}},customColorBorder:{name:"--checkbox-color-border",control:{type:"color"},description:"Border color in the unchecked state",table:{category:"CSS Properties"}},customColorError:{name:"--checkbox-color-error",control:{type:"color"},description:"Border and text color in the error state",table:{category:"CSS Properties"}},customBorderRadius:{name:"--checkbox-border-radius",control:{type:"text"},description:"Corner rounding of the checkbox square (default: 4px)",table:{category:"CSS Properties"}},customLabelSpacing:{name:"--checkbox-label-spacing",control:{type:"text"},description:"Distance between the checkbox and the label (default: 0.75rem)",table:{category:"CSS Properties"}}},render:e=>p`
+    <btu-checkbox
+      size=${t(e.size)}
+      label=${t(e.label)}
+      description=${t(e.description)}
+      error=${t(e.error)}
+      name=${t(e.name)}
+      value=${t(e.value)}
+      .checked=${e.checked??!1}
+      .indeterminate=${e.indeterminate??!1}
+      ?disabled=${e.disabled}
+      ?invalid=${e.invalid}
+      ?required=${e.required}
+      style=${g(C(e))}
+    ></btu-checkbox>
+  `},o={args:{}},c={args:{checked:!0,label:"Accepted terms"}},a={args:{label:"Remember me",description:"Save your login details for next time.",checked:!0}},n={args:{label:"Select all",indeterminate:!0},parameters:{docs:{description:{story:"Indeterminate state shows a minus icon. Clicking clears indeterminate and toggles the checked state."}}}},s={args:{label:"Unavailable option",disabled:!0}},l={args:{label:"Previously accepted",disabled:!0,checked:!0}},i={args:{label:"Accept terms and conditions",invalid:!0,error:"You must accept the terms to continue."}},d={render:()=>p`
+    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+      <span style="font-size: 0.875rem; font-weight: 600; color: oklch(var(--btu-theme-gray-700));">Toppings</span>
+      <btu-checkbox label="Pepperoni" name="toppings" checked></btu-checkbox>
+      <btu-checkbox label="Mushrooms" name="toppings"></btu-checkbox>
+      <btu-checkbox label="Extra cheese" name="toppings" checked></btu-checkbox>
+      <btu-checkbox label="Olives" name="toppings"></btu-checkbox>
+    </div>
+  `},b={args:{label:"Partial selection",disabled:!0,indeterminate:!0}},u={render:()=>p`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <btu-checkbox size="sm" label="Small (default)" checked></btu-checkbox>
+      <btu-checkbox size="md" label="Medium" checked></btu-checkbox>
+    </div>
+  `},m={render:()=>p`
+    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+      <btu-checkbox
+        label="Toggle me"
+        description="Toggle the checkbox to see the change event payload below."
+        @btu-checkbox-change=${e=>{const r=e.target.parentElement?.querySelector("#checkbox-event-output");r&&(r.textContent=`checked: ${e.detail.checked}`)}}
+      ></btu-checkbox>
+      <span
+        id="checkbox-event-output"
+        style="font-size: 0.75rem; font-family: monospace; color: oklch(var(--btu-theme-gray-500));"
+        >—</span
+      >
+    </div>
+  `,parameters:{docs:{description:{story:"Demonstrates the `btu-checkbox-change` event, which provides `{ checked: boolean }` in its detail."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {}
+}`,...o.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    checked: true,
+    label: 'Accepted terms'
+  }
+}`,...c.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Remember me',
+    description: 'Save your login details for next time.',
+    checked: true
+  }
+}`,...a.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Select all',
+    indeterminate: true
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Indeterminate state shows a minus icon. Clicking clears indeterminate and toggles the checked state.'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Unavailable option',
+    disabled: true
+  }
+}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Previously accepted',
+    disabled: true,
+    checked: true
+  }
+}`,...l.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Accept terms and conditions',
+    invalid: true,
+    error: 'You must accept the terms to continue.'
+  }
+}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+      <span style="font-size: 0.875rem; font-weight: 600; color: oklch(var(--btu-theme-gray-700));">Toppings</span>
+      <btu-checkbox label="Pepperoni" name="toppings" checked></btu-checkbox>
+      <btu-checkbox label="Mushrooms" name="toppings"></btu-checkbox>
+      <btu-checkbox label="Extra cheese" name="toppings" checked></btu-checkbox>
+      <btu-checkbox label="Olives" name="toppings"></btu-checkbox>
+    </div>
+  \`
+}`,...d.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    label: 'Partial selection',
+    disabled: true,
+    indeterminate: true
+  }
+}`,...b.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <btu-checkbox size="sm" label="Small (default)" checked></btu-checkbox>
+      <btu-checkbox size="md" label="Medium" checked></btu-checkbox>
+    </div>
+  \`
+}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  render: () => html\`
+    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+      <btu-checkbox
+        label="Toggle me"
+        description="Toggle the checkbox to see the change event payload below."
+        @btu-checkbox-change=\${(e: CustomEvent<{
+    checked: boolean;
+  }>) => {
+    const output = (e.target as HTMLElement).parentElement?.querySelector('#checkbox-event-output');
+    if (output) output.textContent = \`checked: \${e.detail.checked}\`;
+  }}
+      ></btu-checkbox>
+      <span
+        id="checkbox-event-output"
+        style="font-size: 0.75rem; font-family: monospace; color: oklch(var(--btu-theme-gray-500));"
+        >—</span
+      >
+    </div>
+  \`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates the \`btu-checkbox-change\` event, which provides \`{ checked: boolean }\` in its detail.'
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};const w=["Default","Checked","WithDescription","Indeterminate","Disabled","DisabledChecked","InvalidWithError","Group","DisabledIndeterminate","Sizes","Events"];export{c as Checked,o as Default,s as Disabled,l as DisabledChecked,b as DisabledIndeterminate,m as Events,d as Group,n as Indeterminate,i as InvalidWithError,u as Sizes,a as WithDescription,w as __namedExportsOrder,P as default};

package/dist/storybook/assets/{CircularProgress.stories-DRN8Mtvj.js → CircularProgress.stories-D4rftw22.js}

@@ -1,4 +1,4 @@
-import{g as S,E as h,x as T}from"./iframe-DloIUNZz.js";import{o as $}from"./style-map-DLXysq3r.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),O={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
+import{g as S,E as h,x as T}from"./iframe-Sf9RHZFu.js";import{o as $}from"./style-map-B99QiqCo.js";import"./preload-helper-PPVm8Dsz.js";const{events:V,args:A,argTypes:u}=S("btu-circular-progress"),O={title:"Components/Circular Progress",component:"btu-circular-progress",tags:["autodocs"],parameters:{docs:{subtitle:"A component for showing loading states or progress",description:{component:`
 <h3>When to use:</h3>
 <ul>
   <li>To indicate loading or processing state</li>
@@ -11,7 +11,7 @@ import{g as S,E as h,x as T}from"./iframe-DloIUNZz.js";import{o as $}from"./styl
   <li><strong>Indeterminate:</strong> Animated spinner for unknown duration (default)</li>
   <li><strong>Determinate:</strong> Shows specific progress value (0-100)</li>
 </ul>
-        `}},actions:{handles:V},controls:{expanded:!0}},args:{...A,indeterminate:!0,color:"primary",size:"sm",thickness:2,progress:0,"initial-animation":!0},argTypes:{...u,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},"--progress-size":{table:{disable:!0}},indeterminate:{...u.indeterminate,control:{type:"boolean"},description:"Whether the progress indicator is indeterminate (animated spinner). When false, shows determinate progress based on the progress value.",table:{category:"Attributes",defaultValue:{summary:"true"}}},color:{...u.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},size:{...u.size,control:{type:"select"},options:["sm","md","lg"],description:"Size variant: sm (16px), md (32px), lg (48px)",table:{category:"Attributes",defaultValue:{summary:"sm"}}},thickness:{...u.thickness,control:{type:"number",min:1,max:10},description:"Stroke width of the progress circle.",table:{category:"Attributes",defaultValue:{summary:"2"}}},progress:{...u.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value for determinate mode. Value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...u.label,control:{type:"text"},description:"Optional label text to display below the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},"initial-animation":{...u["initial-animation"],control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Only applies to determinate mode. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...u.ariaLabel,control:{type:"text"},description:'Optional aria-label attribute for screen readers. Describes what the progress indicator represents (e.g., "File upload progress").',table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaLabelledBy:{...u.ariaLabelledBy,control:{type:"text"},description:"Optional aria-labelledby attribute for screen readers. References the ID of an element that labels the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaValueText:{...u.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value in determinate mode.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...u.completionAnnouncement,control:{type:"text"},description:"Optional message to announce to screen readers when progress reaches 100%. If not provided, no announcement will be made on completion.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},customColor:{name:"--progress-color",control:{type:"color"},description:"Custom progress indicator color - overrides the theme color",table:{category:"CSS Properties"}},customTrackColor:{name:"--track-color",control:{type:"color"},description:"Custom track/background color - overrides default gray-100",table:{category:"CSS Properties"}},customSize:{name:"--progress-size",control:{type:"number",min:1,max:100},description:"Custom size in pixels - overrides the size preset",table:{category:"CSS Properties"}}},render:e=>{const t={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),e.customSize&&(t["--progress-size"]=`${e.customSize}px`),T`<btu-circular-progress
+        `}},actions:{handles:V},controls:{expanded:!0}},args:{...A,indeterminate:!0,color:"primary",size:"sm",thickness:2,progress:0,"initial-animation":!0},argTypes:{...u,"--progress-color":{table:{disable:!0}},"--track-color":{table:{disable:!0}},"--progress-size":{table:{disable:!0}},indeterminate:{...u.indeterminate,control:{type:"boolean"},description:"Whether the progress indicator is indeterminate (animated spinner). When false, shows determinate progress based on the progress value.",table:{category:"Attributes",defaultValue:{summary:"true"}}},color:{...u.color,control:{type:"select"},options:["black","white","primary","teal","gray","purple","rose","error","warning","success"],description:"Theme color of the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"primary"}}},size:{...u.size,control:{type:"select"},options:["sm","md","lg"],description:"Size variant: sm (16px), md (32px), lg (48px)",table:{category:"Attributes",defaultValue:{summary:"sm"}}},thickness:{...u.thickness,control:{type:"number",min:1,max:10},description:"Stroke width of the progress circle.",table:{category:"Attributes",defaultValue:{summary:"2"}}},progress:{...u.progress,control:{type:"range",min:0,max:100,step:1},description:"Progress value for determinate mode. Value between 0 and 100.",table:{category:"Attributes",defaultValue:{summary:"0"}}},label:{...u.label,control:{type:"text"},description:"Optional label text to display below the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},"initial-animation":{...u["initial-animation"],control:{type:"boolean"},description:"Whether to animate progress from 0 to target value when component first becomes visible in viewport. Only applies to determinate mode. Defaults to true.",table:{category:"Attributes",defaultValue:{summary:"true"}}},ariaLabel:{...u.ariaLabel,control:{type:"text"},description:'Optional aria-label attribute for screen readers. Describes what the progress indicator represents (e.g., "File upload progress").',table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaLabelledBy:{...u.ariaLabelledBy,control:{type:"text"},description:"Optional aria-labelledby attribute for screen readers. References the ID of an element that labels the progress indicator.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},ariaValueText:{...u.ariaValueText,control:{type:"text"},description:"Optional aria-valuetext attribute for screen readers. Provides human-readable text alternative for the progress value in determinate mode.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},completionAnnouncement:{...u.completionAnnouncement,control:{type:"text"},description:"Optional message to announce to screen readers when progress reaches 100%. If not provided, no announcement will be made on completion.",table:{category:"Attributes",defaultValue:{summary:"undefined"}}},customColor:{name:"--progress-color",control:{type:"color"},description:"Custom progress indicator color - overrides the theme color",table:{category:"css properties"}},customTrackColor:{name:"--track-color",control:{type:"color"},description:"Custom track/background color - overrides default gray-100",table:{category:"css properties"}},customSize:{name:"--progress-size",control:{type:"number",min:1,max:100},description:"Custom size in pixels - overrides the size preset",table:{category:"css properties"}}},render:e=>{const t={};return e.customColor&&(t["--progress-color"]=e.customColor),e.customTrackColor&&(t["--track-color"]=e.customTrackColor),e.customSize&&(t["--progress-size"]=`${e.customSize}px`),T`<btu-circular-progress
       ?indeterminate=${e.indeterminate}
       color="${e.color}"
       size="${e.size}"
@@ -52,7 +52,7 @@ Animated determinate progress indicators.
 
 Left: continuous percentage increments. 
 
-Right: step-based progress with 20% increments every 3 seconds, fractional labels, and \`aria-valuetext\` for accessibility (e.g., "3 of 5 steps completed").`}}}},y={render:()=>{let e;const t=()=>{const r=document.createElement("div"),i=document.createElement("div");i.className="flex flex-col items-center mb-4";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress circles animate in";const n=document.createElement("button");n.textContent="Reset",n.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",n.onclick=()=>{e.innerHTML="",e.appendChild(t())},i.appendChild(s),i.appendChild(n),r.appendChild(i);const p=document.createElement("div");p.style.height="150px",p.style.overflowY="auto",p.style.border="1px solid #e5e7eb",p.style.borderRadius="4px",p.style.padding="1rem";const l=document.createElement("div");l.className="flex flex-col items-center gap-8",l.style.minHeight="150vh";const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=30,o.size="lg",o.color="primary",o.label="30%",l.appendChild(o);const d=document.createElement("div");d.className="flex flex-col items-center",d.style.marginTop="30vh";const c=document.createElement("btu-circular-progress");c.indeterminate=!1,c.progress=50,c.size="lg",c.color="teal",c.label="50%",d.appendChild(c),l.appendChild(d);const b=document.createElement("div");b.className="flex flex-col items-center",b.style.marginTop="30vh";const m=document.createElement("btu-circular-progress");m.indeterminate=!1,m.progress=75,m.size="lg",m.color="purple",m.label="75%",b.appendChild(m),l.appendChild(b);const g=document.createElement("div");g.className="flex flex-col items-center",g.style.marginTop="30vh";const a=document.createElement("btu-circular-progress");return a.indeterminate=!1,a.progress=100,a.size="lg",a.color="success",a.label="100%",g.appendChild(a),l.appendChild(g),p.appendChild(l),r.appendChild(p),r};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation for determinate mode - progress circles animate from 0 to their target value when they become visible. Scroll within the container to see each circle animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-center gap-4";let t=0;const r=document.createElement("btu-circular-progress");r.indeterminate=!1,r.progress=0,r.size="lg",r.color="primary",r.label="0%";const i=document.createElement("div");i.className="text-sm text-gray-600",i.textContent="Status: In Progress...";const s=document.createElement("div");s.className="text-xs text-gray-500 mt-2",s.textContent="Event Log: (waiting for completion)",r.addEventListener("btu-progress-complete",()=>{i.textContent="Status: Complete! ✓",i.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let n=!1;const p=setInterval(()=>{n||(t=t+1,r.progress=t,r.label=`${t}%`,t<100&&(i.textContent="Status: In Progress...",i.className="text-sm text-gray-600"),t===100&&(n=!0,setTimeout(()=>{t=0,n=!1},3e3)))},50),l=new MutationObserver(o=>{o.forEach(d=>{d.removedNodes.forEach(c=>{(c===e||c.contains(e))&&(clearInterval(p),l.disconnect())})})});return setTimeout(()=>{e.parentNode&&l.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(i),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-progress-complete event that fires when determinate progress reaches 100%. The event fires each time progress completes a cycle."}}}},E={render:()=>{const e=document.createElement("div");e.className="flex flex-col gap-8";const t=document.createElement("div");t.className="flex flex-col gap-2";const r=document.createElement("h4");r.className="text-sm font-semibold text-gray-900",r.textContent="Indeterminate with aria-label";const i=document.createElement("p");i.className="text-xs text-gray-600 mb-2",i.textContent='Screen readers announce: "Loading application data"';const s=document.createElement("btu-circular-progress");s.indeterminate=!0,s.size="md",s.color="primary",s.ariaLabel="Loading application data",t.appendChild(r),t.appendChild(i),t.appendChild(s);const n=document.createElement("div");n.className="flex flex-col gap-2";const p=document.createElement("h4");p.className="text-sm font-semibold text-gray-900",p.textContent="Determinate with custom aria-valuetext";const l=document.createElement("p");l.className="text-xs text-gray-600 mb-2",l.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=60,o.size="md",o.color="teal",o.label="3/5",o.ariaLabel="File upload progress",o.ariaValueText="3 of 5 files uploaded",n.appendChild(p),n.appendChild(l),n.appendChild(o);const d=document.createElement("div");d.className="flex flex-col gap-2";const c=document.createElement("h4");c.className="text-sm font-semibold text-gray-900",c.textContent="With completion announcement";const b=document.createElement("p");b.className="text-xs text-gray-600 mb-2",b.textContent='Screen readers auto-announce when complete: "Download complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let g=0;const a=document.createElement("btu-circular-progress");a.indeterminate=!1,a.progress=0,a.size="md",a.color="success",a.label="0%",a.ariaLabel="Download progress",a.completionAnnouncement="Download complete!",a.addEventListener("btu-progress-complete",()=>{m.textContent='Announcement status: "Download complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{g<100?(g+=2,a.progress=g,a.label=`${g}%`,a.ariaValueText=`${g} percent complete`):clearInterval(w)},100);d.appendChild(c),d.appendChild(b),d.appendChild(a),d.appendChild(m);const N=new MutationObserver(z=>{z.forEach(D=>{D.removedNodes.forEach(L=>{(L===e||L.contains(e))&&(clearInterval(w),N.disconnect())})})});return setTimeout(()=>{e.parentNode&&N.observe(e.parentNode,{childList:!0})},0),e.appendChild(t),e.appendChild(n),e.appendChild(d),e},parameters:{docs:{description:{story:"\nDemonstrates accessibility best practices for screen reader users:\n\n**1. Indeterminate mode:** Set `ariaLabel` to describe what's loading.\n\n**2. Determinate mode:** Combine `ariaLabel` (what's progressing) with `ariaValueText` (human-readable progress like \"3 of 5 files uploaded\"). Set `completionAnnouncement` to automatically notify screen readers when progress reaches 100%.\n        "}}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+Right: step-based progress with 20% increments every 3 seconds, fractional labels, and \`aria-valuetext\` for accessibility (e.g., "3 of 5 steps completed").`}}}},y={render:()=>{let e;const t=()=>{const r=document.createElement("div"),i=document.createElement("div");i.className="flex flex-col items-center mb-4";const s=document.createElement("h3");s.className="text-lg font-semibold mb-2",s.textContent="Scroll within the container to see progress circles animate in";const n=document.createElement("button");n.textContent="Reset",n.className="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600",n.onclick=()=>{e.innerHTML="",e.appendChild(t())},i.appendChild(s),i.appendChild(n),r.appendChild(i);const p=document.createElement("div");p.style.height="150px",p.style.overflowY="auto",p.style.border="1px solid #e5e7eb",p.style.borderRadius="4px",p.style.padding="1rem";const l=document.createElement("div");l.className="flex flex-col items-center gap-8",l.style.minHeight="150vh";const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=30,o.size="lg",o.color="primary",o.label="30%",l.appendChild(o);const d=document.createElement("div");d.className="flex flex-col items-center",d.style.marginTop="30vh";const c=document.createElement("btu-circular-progress");c.indeterminate=!1,c.progress=50,c.size="lg",c.color="teal",c.label="50%",d.appendChild(c),l.appendChild(d);const b=document.createElement("div");b.className="flex flex-col items-center",b.style.marginTop="30vh";const m=document.createElement("btu-circular-progress");m.indeterminate=!1,m.progress=75,m.size="lg",m.color="purple",m.label="75%",b.appendChild(m),l.appendChild(b);const g=document.createElement("div");g.className="flex flex-col items-center",g.style.marginTop="30vh";const a=document.createElement("btu-circular-progress");return a.indeterminate=!1,a.progress=100,a.size="lg",a.color="success",a.label="100%",g.appendChild(a),l.appendChild(g),p.appendChild(l),r.appendChild(p),r};return e=t(),e},parameters:{docs:{description:{story:'Demonstrates the viewport animation for determinate mode - progress circles animate from 0 to their target value when they become visible. Scroll within the container to see each circle animate in. Click "Reset" to restart.'}}}},C={render:()=>{const e=document.createElement("div");e.className="flex flex-col items-center gap-4";let t=0;const r=document.createElement("btu-circular-progress");r.indeterminate=!1,r.progress=0,r.size="lg",r.color="primary",r.label="0%";const i=document.createElement("div");i.className="text-sm text-gray-600",i.textContent="Status: In Progress...";const s=document.createElement("div");s.className="text-xs text-gray-500 mt-2",s.textContent="Event Log: (waiting for completion)",r.addEventListener("btu-circular-progress-complete",()=>{i.textContent="Status: Complete! ✓",i.className="text-sm text-green-600 font-semibold",s.textContent=`Event Log: btu-circular-progress-complete fired at ${new Date().toLocaleTimeString()}`,s.className="text-xs text-green-600 mt-2"});let n=!1;const p=setInterval(()=>{n||(t=t+1,r.progress=t,r.label=`${t}%`,t<100&&(i.textContent="Status: In Progress...",i.className="text-sm text-gray-600"),t===100&&(n=!0,setTimeout(()=>{t=0,n=!1},3e3)))},50),l=new MutationObserver(o=>{o.forEach(d=>{d.removedNodes.forEach(c=>{(c===e||c.contains(e))&&(clearInterval(p),l.disconnect())})})});return setTimeout(()=>{e.parentNode&&l.observe(e.parentNode,{childList:!0})},0),e.appendChild(r),e.appendChild(i),e.appendChild(s),e},parameters:{docs:{description:{story:"Demonstrates the btu-circular-progress-complete event that fires when determinate progress reaches 100%. The event fires each time progress completes a cycle."}}}},E={render:()=>{const e=document.createElement("div");e.className="flex flex-col gap-8";const t=document.createElement("div");t.className="flex flex-col gap-2";const r=document.createElement("h4");r.className="text-sm font-semibold text-gray-900",r.textContent="Indeterminate with aria-label";const i=document.createElement("p");i.className="text-xs text-gray-600 mb-2",i.textContent='Screen readers announce: "Loading application data"';const s=document.createElement("btu-circular-progress");s.indeterminate=!0,s.size="md",s.color="primary",s.ariaLabel="Loading application data",t.appendChild(r),t.appendChild(i),t.appendChild(s);const n=document.createElement("div");n.className="flex flex-col gap-2";const p=document.createElement("h4");p.className="text-sm font-semibold text-gray-900",p.textContent="Determinate with custom aria-valuetext";const l=document.createElement("p");l.className="text-xs text-gray-600 mb-2",l.textContent='Screen readers announce: "File upload progress, 3 of 5 files uploaded"';const o=document.createElement("btu-circular-progress");o.indeterminate=!1,o.progress=60,o.size="md",o.color="teal",o.label="3/5",o.ariaLabel="File upload progress",o.ariaValueText="3 of 5 files uploaded",n.appendChild(p),n.appendChild(l),n.appendChild(o);const d=document.createElement("div");d.className="flex flex-col gap-2";const c=document.createElement("h4");c.className="text-sm font-semibold text-gray-900",c.textContent="With completion announcement";const b=document.createElement("p");b.className="text-xs text-gray-600 mb-2",b.textContent='Screen readers auto-announce when complete: "Download complete!"';const m=document.createElement("div");m.className="text-xs text-gray-500 mt-2",m.textContent="Announcement status: (waiting...)";let g=0;const a=document.createElement("btu-circular-progress");a.indeterminate=!1,a.progress=0,a.size="md",a.color="success",a.label="0%",a.ariaLabel="Download progress",a.completionAnnouncement="Download complete!",a.addEventListener("btu-circular-progress-complete",()=>{m.textContent='Announcement status: "Download complete!" announced at '+new Date().toLocaleTimeString(),m.className="text-xs text-green-600 mt-2"});const w=setInterval(()=>{g<100?(g+=2,a.progress=g,a.label=`${g}%`,a.ariaValueText=`${g} percent complete`):clearInterval(w)},100);d.appendChild(c),d.appendChild(b),d.appendChild(a),d.appendChild(m);const N=new MutationObserver(z=>{z.forEach(D=>{D.removedNodes.forEach(L=>{(L===e||L.contains(e))&&(clearInterval(w),N.disconnect())})})});return setTimeout(()=>{e.parentNode&&N.observe(e.parentNode,{childList:!0})},0),e.appendChild(t),e.appendChild(n),e.appendChild(d),e},parameters:{docs:{description:{story:"\nDemonstrates accessibility best practices for screen reader users:\n\n**1. Indeterminate mode:** Set `ariaLabel` to describe what's loading.\n\n**2. Determinate mode:** Combine `ariaLabel` (what's progressing) with `ariaValueText` (human-readable progress like \"3 of 5 files uploaded\"). Set `completionAnnouncement` to automatically notify screen readers when progress reaches 100%.\n        "}}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
   args: {},
   parameters: {
     docs: {
@@ -273,10 +273,10 @@ Right: step-based progress with 20% increments every 3 seconds, fractional label
     const eventLog = document.createElement('div');
     eventLog.className = 'text-xs text-gray-500 mt-2';
     eventLog.textContent = 'Event Log: (waiting for completion)';
-    progressEl.addEventListener('btu-progress-complete', () => {
+    progressEl.addEventListener('btu-circular-progress-complete', () => {
       statusDiv.textContent = 'Status: Complete! ✓';
       statusDiv.className = 'text-sm text-green-600 font-semibold';
-      eventLog.textContent = \`Event Log: btu-progress-complete fired at \${new Date().toLocaleTimeString()}\`;
+      eventLog.textContent = \`Event Log: btu-circular-progress-complete fired at \${new Date().toLocaleTimeString()}\`;
       eventLog.className = 'text-xs text-green-600 mt-2';
     });
     let isWaiting = false;
@@ -324,7 +324,7 @@ Right: step-based progress with 20% increments every 3 seconds, fractional label
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates the btu-progress-complete event that fires when determinate progress reaches 100%. The event fires each time progress completes a cycle.'
+        story: 'Demonstrates the btu-circular-progress-complete event that fires when determinate progress reaches 100%. The event fires each time progress completes a cycle.'
       }
     }
   }
@@ -393,7 +393,7 @@ Right: step-based progress with 20% increments every 3 seconds, fractional label
     progress3.label = '0%';
     progress3.ariaLabel = 'Download progress';
     progress3.completionAnnouncement = 'Download complete!';
-    progress3.addEventListener('btu-progress-complete', () => {
+    progress3.addEventListener('btu-circular-progress-complete', () => {
       announceLog.textContent = 'Announcement status: "Download complete!" announced at ' + new Date().toLocaleTimeString();
       announceLog.className = 'text-xs text-green-600 mt-2';
     });

package/dist/storybook/assets/{ClipboardMixin.stories-DR7Ou2Av.js → ClipboardMixin.stories-z2n2HWt1.js}

@@ -1,4 +1,4 @@
-import{x as m,i as b}from"./iframe-DloIUNZz.js";import{t as u}from"./custom-element-UsVr97OX.js";import{C as h}from"./ComponentStatesMixin-DMLCk9fE.js";import{E as x,R as y}from"./ReadyMixin-Cw2Dfbu2.js";import"./preload-helper-PPVm8Dsz.js";function n(e,i){let r=document.getElementById("aria-live-container");r||(r=document.createElement("div"),r.setAttribute("id","aria-live-container"),document.body.appendChild(r));const t=document.createElement("div"),o="speak-"+Date.now();t.setAttribute("id",o),t.setAttribute("aria-atomic","true"),t.setAttribute("aria-live","polite"),t.style.cssText="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;",r.appendChild(t),setTimeout(()=>{const d=document.getElementById(o);d&&(d.innerHTML=e)},150),window.BRIGHTSPOT?.ariaDebug===!0&&console.log(`ARIA Announced: "${e}"`),setTimeout(()=>{document.getElementById(o)?.remove()},2e3)}const g=e=>{class i extends e{async copy(t,o=3e3){if(t&&!this.states.has("btu-clipboard-copied")){try{if(!navigator.clipboard||typeof navigator.clipboard.writeText!="function")throw new Error("Clipboard API is not available in this environment.");await navigator.clipboard.writeText(t)}catch(d){console.error("Failed to copy text to clipboard:",d),n("Copy failed");return}this.states.add("btu-clipboard-copied"),this.requestUpdate(),this.emit("btu-clipboard-copied"),n("Copied!"),setTimeout(()=>{this.states.delete("btu-clipboard-copied"),this.requestUpdate()},o)}}}return i};var c=Object.freeze,f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,C=(e,i,r,t)=>{for(var o=t>1?void 0:t?v(i,r):i,d=e.length-1,s;d>=0;d--)(s=e[d])&&(o=s(o)||o);return o},E=(e,i)=>c(f(e,"raw",{value:c(e.slice())})),l;const I={title:"Mixins/Clipboard",tags:["autodocs"],parameters:{docs:{description:{component:`
+import{x as m,i as h}from"./iframe-Sf9RHZFu.js";import{t as u}from"./custom-element-UsVr97OX.js";import{C as b}from"./ComponentStatesMixin-DLd0feFg.js";import{E as y,R as x}from"./ReadyMixin-CQw8N6P9.js";import"./preload-helper-PPVm8Dsz.js";function n(e,d){let r=document.getElementById("aria-live-container");r||(r=document.createElement("div"),r.setAttribute("id","aria-live-container"),document.body.appendChild(r));const t=document.createElement("div"),i="speak-"+Date.now();t.setAttribute("id",i),t.setAttribute("aria-atomic","true"),t.setAttribute("aria-live","polite"),t.style.cssText="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;",r.appendChild(t),setTimeout(()=>{const o=document.getElementById(i);o&&(o.innerHTML=e)},150),window.BRIGHTSPOT?.ariaDebug===!0&&console.log(`ARIA Announced: "${e}"`),setTimeout(()=>{document.getElementById(i)?.remove()},2e3)}const g=e=>{class d extends e{get copiedStateKey(){return`${this.tagName.toLowerCase()}-copied`}async copy(t,i=3e3){if(!t)return;const o=this.copiedStateKey;if(!this.states.has(o)){try{if(!navigator.clipboard||typeof navigator.clipboard.writeText!="function")throw new Error("Clipboard API is not available in this environment.");await navigator.clipboard.writeText(t)}catch(a){console.error("Failed to copy text to clipboard:",a),n("Copy failed");return}this.states.add(o),this.requestUpdate(),this.emit(o),n("Copied!"),setTimeout(()=>{this.states.delete(o),this.requestUpdate()},i)}}}return d};var c=Object.freeze,f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,C=(e,d,r,t)=>{for(var i=t>1?void 0:t?v(d,r):d,o=e.length-1,a;o>=0;o--)(a=e[o])&&(i=a(i)||i);return i},E=(e,d)=>c(f(e,"raw",{value:c(e.slice())})),l;const I={title:"Mixins/Clipboard",tags:["autodocs"],parameters:{docs:{description:{component:`
 \`ClipboardMixin\` adds clipboard copy functionality via a <code>copy()</code> method that writes text to the system clipboard.
 
 It adds a temporary state and emits an event, which web components can use for visual feedback.
@@ -6,8 +6,8 @@ It adds a temporary state and emits an event, which web components can use for v
 <h3>What ClipboardMixin Provides</h3>
 <ul>
     <li><strong>copy(text, timeout?):</strong> Async method to copy text to clipboard using native Clipboard API (<code>navigator.clipboard.writeText</code>)</li>
-    <li>Automatic <code>btu-clipboard-copied</code> state management (3 seconds default)</li>
-    <li>Emits <code>btu-clipboard-copied</code> event on successful copy</li>
+    <li>Automatic <code>&lt;consumer-tag&gt;-copied</code> state management (3 seconds default) — resolved from the host's <code>tagName</code> at runtime</li>
+    <li>Emits <code>&lt;consumer-tag&gt;-copied</code> event on successful copy (e.g., <code>btu-copy-to-clipboard-copied</code> from <code>&lt;btu-copy-to-clipboard&gt;</code>)</li>
 </ul>
 
 <h3>Method API</h3>
@@ -44,9 +44,9 @@ It adds a temporary state and emits an event, which web components can use for v
   </thead>
   <tbody>
     <tr>
-      <td><code>btu-clipboard-copied</code></td>
+      <td><code>&lt;consumer-tag&gt;-copied</code></td>
       <td>CustomEvent</td>
-      <td>Fired when text is successfully copied to clipboard</td>
+      <td>Fired when text is successfully copied to clipboard. Name resolves to the host element's tagName at runtime (e.g. <code>btu-copy-to-clipboard-copied</code>, <code>my-copy-button-copied</code>).</td>
       <td><code>{}</code></td>
     </tr>
   </tbody>
@@ -56,8 +56,8 @@ It adds a temporary state and emits an event, which web components can use for v
 
 <p><strong>ClipboardMixin requires the following mixins to function properly:</strong></p>
 <ul>
-  <li><strong><a href="?path=/docs/mixins-component-states--docs">ComponentStatesMixin</a>:</strong> For managing the <code>btu-clipboard-copied</code> state</li>
-  <li><strong><a href="?path=/docs/mixins-events--docs">EventEmitterMixin</a>:</strong> For emitting the <code>btu-clipboard-copied</code> event</li>
+  <li><strong><a href="?path=/docs/mixins-component-states--docs">ComponentStatesMixin</a>:</strong> For managing the <code>&lt;consumer-tag&gt;-copied</code> state</li>
+  <li><strong><a href="?path=/docs/mixins-events--docs">EventEmitterMixin</a>:</strong> For emitting the <code>&lt;consumer-tag&gt;-copied</code> event</li>
 </ul>
 
 <h3>Mixin Composition</h3>
@@ -103,10 +103,13 @@ class MyCopyButton extends ClipboardMixin(
   }
 
   render() {
-    const isCopied = this.states.has('btu-clipboard-copied')
+    const isCopied = this.states.has('my-copy-button-copied')
 
     return html\`
-      <button @click=\${this.handleClick}>
+      <button
+        class="btu-button \${isCopied ? 'btu-button-success' : 'btu-button-primary'} btu-button-sm"
+        @click=\${this.handleClick}
+      >
         \${isCopied ? 'Copied!' : 'Copy Text'}
       </button>
     \`
@@ -116,15 +119,15 @@ class MyCopyButton extends ClipboardMixin(
 
 <h3>CSS Styling</h3>
 
-<p>Style the copied state using the <code>:state()</code> pseudo-class:</p>
+<p>Style the copied state using the <code>:state()</code> pseudo-class. The state name matches the host element's tagName with a <code>-copied</code> suffix:</p>
 
 \`\`\`css
-my-copy-button:state(btu-clipboard-copied) {
+my-copy-button:state(my-copy-button-copied) {
   background-color: #10b981;
   color: white;
 }
 
-my-copy-button:state(btu-clipboard-copied)::after {
+my-copy-button:state(my-copy-button-copied)::after {
   content: ' ✓';
 }
 \`\`\`
@@ -135,23 +138,23 @@ my-copy-button:state(btu-clipboard-copied)::after {
   <li>State automatically clears after the specified timeout (default: 3 seconds)</li>
   <li>Empty strings are ignored (no-op)</li>
 </ul>
-        `}}}};let p=class extends g(h(x(y(b)))){constructor(){super(...arguments),this.textToCopy="Hello from ClipboardMixin!"}async handleCopy(){await this.copy(this.textToCopy)}render(){const e=this.states.has("btu-clipboard-copied");return m`
+        `}}}};let p=class extends g(b(y(x(h)))){constructor(){super(...arguments),this.textToCopy="Hello from ClipboardMixin!"}async handleCopy(){await this.copy(this.textToCopy)}render(){const e=this.states.has("clipboard-demo-copied");return m`
       <div style="display: flex; align-items: center; gap: 1rem;">
         <input
           type="text"
           .value=${this.textToCopy}
-          @input=${i=>{this.textToCopy=i.target.value}}
+          @input=${d=>{this.textToCopy=d.target.value}}
           style="flex: 1; border-radius: 4px; border: 1px solid #d1d5db; padding: 0.5rem 0.75rem;"
           placeholder="Enter text to copy"
         />
         <button
           @click=${this.handleCopy}
-          style="background-color: ${e?"#10b981":"#3b82f6"}; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 600; color: white; transition: background-color 0.2s; border: none; cursor: pointer;"
+          class="${e?"btu-button-success":"btu-button-primary"} btu-button-sm btu-button"
         >
           ${e?"✓ Copied!":"Copy"}
         </button>
       </div>
-    `}};p=C([u("clipboard-demo")],p);const a={render:()=>m(l||(l=E([`<div class="flex flex-col gap-4">
+    `}};p=C([u("clipboard-demo")],p);const s={render:()=>m(l||(l=E([`<div class="flex flex-col gap-4">
       <div>
         <h4 class="mb-2 font-bold">Interactive Clipboard Demo</h4>
         <p class="mb-4 text-sm text-gray-600">
@@ -176,18 +179,18 @@ my-copy-button:state(btu-clipboard-copied)::after {
           const demo = document.getElementById('clipboard-demo')
           if (!demo) return
 
-          // Listen for copy event
-          demo.addEventListener('btu-clipboard-copied', e => {
-            console.log('📋 btu-clipboard-copied event fired', e.detail)
+          // Listen for copy event (name matches the demo element's tagName + -copied)
+          demo.addEventListener('clipboard-demo-copied', e => {
+            console.log('📋 clipboard-demo-copied event fired', e.detail)
             console.log('✅ Text successfully copied to clipboard')
             console.log(
-              '🎯 State check: demo.states.has("btu-clipboard-copied") =',
-              demo.states.has('btu-clipboard-copied'),
+              '🎯 State check: demo.states.has("clipboard-demo-copied") =',
+              demo.states.has('clipboard-demo-copied'),
             )
           })
         })()
       <\/script>
-    </div>`])))};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+    </div>`])))};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   render: () => html\`<div class="flex flex-col gap-4">
       <div>
         <h4 class="mb-2 font-bold">Interactive Clipboard Demo</h4>
@@ -213,16 +216,16 @@ my-copy-button:state(btu-clipboard-copied)::after {
           const demo = document.getElementById('clipboard-demo')
           if (!demo) return
 
-          // Listen for copy event
-          demo.addEventListener('btu-clipboard-copied', e => {
-            console.log('📋 btu-clipboard-copied event fired', e.detail)
+          // Listen for copy event (name matches the demo element's tagName + -copied)
+          demo.addEventListener('clipboard-demo-copied', e => {
+            console.log('📋 clipboard-demo-copied event fired', e.detail)
             console.log('✅ Text successfully copied to clipboard')
             console.log(
-              '🎯 State check: demo.states.has("btu-clipboard-copied") =',
-              demo.states.has('btu-clipboard-copied'),
+              '🎯 State check: demo.states.has("clipboard-demo-copied") =',
+              demo.states.has('clipboard-demo-copied'),
             )
           })
         })()
       <\/script>
     </div>\`
-}`,...a.parameters?.docs?.source}}};const D=["ClipboardMixinDemo"];export{a as ClipboardMixinDemo,D as __namedExportsOrder,I as default};
+}`,...s.parameters?.docs?.source}}};const D=["ClipboardMixinDemo"];export{s as ClipboardMixinDemo,D as __namedExportsOrder,I as default};

package/dist/storybook/assets/{Color-6BZIO3FS-Die62Y0Z.js → Color-6BZIO3FS-C6KyMgZz.js}

@@ -1 +1 @@
-import{g as ce,P as he,M as de,F as fe,B as U}from"./blocks-dP2DwISI.js";import{r as y,R as v,S as M,aj as ge,ak as P}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";var be=P({"../../../node_modules/color-name/index.js"(r,o){o.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]}}}),Y=P({"../../../node_modules/color-convert/conversions.js"(r,o){var s=be(),h={};for(let e of Object.keys(s))h[s[e]]=e;var u={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"]}};o.exports=u;for(let e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:n,labels:t}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:n}),Object.defineProperty(u[e],"labels",{value:t})}u.rgb.hsl=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,l=Math.min(n,t,a),i=Math.max(n,t,a),c=i-l,d,g;i===l?d=0:n===i?d=(t-a)/c:t===i?d=2+(a-n)/c:a===i&&(d=4+(n-t)/c),d=Math.min(d*60,360),d<0&&(d+=360);let b=(l+i)/2;return i===l?g=0:b<=.5?g=c/(i+l):g=c/(2-i-l),[d,g*100,b*100]},u.rgb.hsv=function(e){let n,t,a,l,i,c=e[0]/255,d=e[1]/255,g=e[2]/255,b=Math.max(c,d,g),p=b-Math.min(c,d,g),m=function(w){return(b-w)/6/p+1/2};return p===0?(l=0,i=0):(i=p/b,n=m(c),t=m(d),a=m(g),c===b?l=a-t:d===b?l=1/3+n-a:g===b&&(l=2/3+t-n),l<0?l+=1:l>1&&(l-=1)),[l*360,i*100,b*100]},u.rgb.hwb=function(e){let n=e[0],t=e[1],a=e[2],l=u.rgb.hsl(e)[0],i=1/255*Math.min(n,Math.min(t,a));return a=1-1/255*Math.max(n,Math.max(t,a)),[l,i*100,a*100]},u.rgb.cmyk=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,l=Math.min(1-n,1-t,1-a),i=(1-n-l)/(1-l)||0,c=(1-t-l)/(1-l)||0,d=(1-a-l)/(1-l)||0;return[i*100,c*100,d*100,l*100]};function f(e,n){return(e[0]-n[0])**2+(e[1]-n[1])**2+(e[2]-n[2])**2}u.rgb.keyword=function(e){let n=h[e];if(n)return n;let t=1/0,a;for(let l of Object.keys(s)){let i=s[l],c=f(e,i);c<t&&(t=c,a=l)}return a},u.keyword.rgb=function(e){return s[e]},u.rgb.xyz=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255;n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;let l=n*.4124+t*.3576+a*.1805,i=n*.2126+t*.7152+a*.0722,c=n*.0193+t*.1192+a*.9505;return[l*100,i*100,c*100]},u.rgb.lab=function(e){let n=u.rgb.xyz(e),t=n[0],a=n[1],l=n[2];t/=95.047,a/=100,l/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,l=l>.008856?l**(1/3):7.787*l+16/116;let i=116*a-16,c=500*(t-a),d=200*(a-l);return[i,c,d]},u.hsl.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100,l,i,c;if(t===0)return c=a*255,[c,c,c];a<.5?l=a*(1+t):l=a+t-a*t;let d=2*a-l,g=[0,0,0];for(let b=0;b<3;b++)i=n+1/3*-(b-1),i<0&&i++,i>1&&i--,6*i<1?c=d+(l-d)*6*i:2*i<1?c=l:3*i<2?c=d+(l-d)*(2/3-i)*6:c=d,g[b]=c*255;return g},u.hsl.hsv=function(e){let n=e[0],t=e[1]/100,a=e[2]/100,l=t,i=Math.max(a,.01);a*=2,t*=a<=1?a:2-a,l*=i<=1?i:2-i;let c=(a+t)/2,d=a===0?2*l/(i+l):2*t/(a+t);return[n,d*100,c*100]},u.hsv.rgb=function(e){let n=e[0]/60,t=e[1]/100,a=e[2]/100,l=Math.floor(n)%6,i=n-Math.floor(n),c=255*a*(1-t),d=255*a*(1-t*i),g=255*a*(1-t*(1-i));switch(a*=255,l){case 0:return[a,g,c];case 1:return[d,a,c];case 2:return[c,a,g];case 3:return[c,d,a];case 4:return[g,c,a];case 5:return[a,c,d]}},u.hsv.hsl=function(e){let n=e[0],t=e[1]/100,a=e[2]/100,l=Math.max(a,.01),i,c;c=(2-t)*a;let d=(2-t)*l;return i=t*l,i/=d<=1?d:2-d,i=i||0,c/=2,[n,i*100,c*100]},u.hwb.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100,l=t+a,i;l>1&&(t/=l,a/=l);let c=Math.floor(6*n),d=1-a;i=6*n-c,(c&1)!==0&&(i=1-i);let g=t+i*(d-t),b,p,m;switch(c){default:case 6:case 0:b=d,p=g,m=t;break;case 1:b=g,p=d,m=t;break;case 2:b=t,p=d,m=g;break;case 3:b=t,p=g,m=d;break;case 4:b=g,p=t,m=d;break;case 5:b=d,p=t,m=g;break}return[b*255,p*255,m*255]},u.cmyk.rgb=function(e){let n=e[0]/100,t=e[1]/100,a=e[2]/100,l=e[3]/100,i=1-Math.min(1,n*(1-l)+l),c=1-Math.min(1,t*(1-l)+l),d=1-Math.min(1,a*(1-l)+l);return[i*255,c*255,d*255]},u.xyz.rgb=function(e){let n=e[0]/100,t=e[1]/100,a=e[2]/100,l,i,c;return l=n*3.2406+t*-1.5372+a*-.4986,i=n*-.9689+t*1.8758+a*.0415,c=n*.0557+t*-.204+a*1.057,l=l>.0031308?1.055*l**(1/2.4)-.055:l*12.92,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,c=c>.0031308?1.055*c**(1/2.4)-.055:c*12.92,l=Math.min(Math.max(0,l),1),i=Math.min(Math.max(0,i),1),c=Math.min(Math.max(0,c),1),[l*255,i*255,c*255]},u.xyz.lab=function(e){let n=e[0],t=e[1],a=e[2];n/=95.047,t/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,t=t>.008856?t**(1/3):7.787*t+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;let l=116*t-16,i=500*(n-t),c=200*(t-a);return[l,i,c]},u.lab.xyz=function(e){let n=e[0],t=e[1],a=e[2],l,i,c;i=(n+16)/116,l=t/500+i,c=i-a/200;let d=i**3,g=l**3,b=c**3;return i=d>.008856?d:(i-16/116)/7.787,l=g>.008856?g:(l-16/116)/7.787,c=b>.008856?b:(c-16/116)/7.787,l*=95.047,i*=100,c*=108.883,[l,i,c]},u.lab.lch=function(e){let n=e[0],t=e[1],a=e[2],l;l=Math.atan2(a,t)*360/2/Math.PI,l<0&&(l+=360);let i=Math.sqrt(t*t+a*a);return[n,i,l]},u.lch.lab=function(e){let n=e[0],t=e[1],a=e[2]/360*2*Math.PI,l=t*Math.cos(a),i=t*Math.sin(a);return[n,l,i]},u.rgb.ansi16=function(e,n=null){let[t,a,l]=e,i=n===null?u.rgb.hsv(e)[2]:n;if(i=Math.round(i/50),i===0)return 30;let c=30+(Math.round(l/255)<<2|Math.round(a/255)<<1|Math.round(t/255));return i===2&&(c+=60),c},u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])},u.rgb.ansi256=function(e){let n=e[0],t=e[1],a=e[2];return n===t&&t===a?n<8?16:n>248?231:Math.round((n-8)/247*24)+232:16+36*Math.round(n/255*5)+6*Math.round(t/255*5)+Math.round(a/255*5)},u.ansi16.rgb=function(e){let n=e%10;if(n===0||n===7)return e>50&&(n+=3.5),n=n/10.5*255,[n,n,n];let t=(~~(e>50)+1)*.5,a=(n&1)*t*255,l=(n>>1&1)*t*255,i=(n>>2&1)*t*255;return[a,l,i]},u.ansi256.rgb=function(e){if(e>=232){let i=(e-232)*10+8;return[i,i,i]}e-=16;let n,t=Math.floor(e/36)/5*255,a=Math.floor((n=e%36)/6)/5*255,l=n%6/5*255;return[t,a,l]},u.rgb.hex=function(e){let n=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(n.length)+n},u.hex.rgb=function(e){let n=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!n)return[0,0,0];let t=n[0];n[0].length===3&&(t=t.split("").map(d=>d+d).join(""));let a=parseInt(t,16),l=a>>16&255,i=a>>8&255,c=a&255;return[l,i,c]},u.rgb.hcg=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,l=Math.max(Math.max(n,t),a),i=Math.min(Math.min(n,t),a),c=l-i,d,g;return c<1?d=i/(1-c):d=0,c<=0?g=0:l===n?g=(t-a)/c%6:l===t?g=2+(a-n)/c:g=4+(n-t)/c,g/=6,g%=1,[g*360,c*100,d*100]},u.hsl.hcg=function(e){let n=e[1]/100,t=e[2]/100,a=t<.5?2*n*t:2*n*(1-t),l=0;return a<1&&(l=(t-.5*a)/(1-a)),[e[0],a*100,l*100]},u.hsv.hcg=function(e){let n=e[1]/100,t=e[2]/100,a=n*t,l=0;return a<1&&(l=(t-a)/(1-a)),[e[0],a*100,l*100]},u.hcg.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100;if(t===0)return[a*255,a*255,a*255];let l=[0,0,0],i=n%1*6,c=i%1,d=1-c,g=0;switch(Math.floor(i)){case 0:l[0]=1,l[1]=c,l[2]=0;break;case 1:l[0]=d,l[1]=1,l[2]=0;break;case 2:l[0]=0,l[1]=1,l[2]=c;break;case 3:l[0]=0,l[1]=d,l[2]=1;break;case 4:l[0]=c,l[1]=0,l[2]=1;break;default:l[0]=1,l[1]=0,l[2]=d}return g=(1-t)*a,[(t*l[0]+g)*255,(t*l[1]+g)*255,(t*l[2]+g)*255]},u.hcg.hsv=function(e){let n=e[1]/100,t=e[2]/100,a=n+t*(1-n),l=0;return a>0&&(l=n/a),[e[0],l*100,a*100]},u.hcg.hsl=function(e){let n=e[1]/100,t=e[2]/100*(1-n)+.5*n,a=0;return t>0&&t<.5?a=n/(2*t):t>=.5&&t<1&&(a=n/(2*(1-t))),[e[0],a*100,t*100]},u.hcg.hwb=function(e){let n=e[1]/100,t=e[2]/100,a=n+t*(1-n);return[e[0],(a-n)*100,(1-a)*100]},u.hwb.hcg=function(e){let n=e[1]/100,t=1-e[2]/100,a=t-n,l=0;return a<1&&(l=(t-a)/(1-a)),[e[0],a*100,l*100]},u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},u.gray.hsl=function(e){return[0,0,e[0]]},u.gray.hsv=u.gray.hsl,u.gray.hwb=function(e){return[0,100,e[0]]},u.gray.cmyk=function(e){return[0,0,0,e[0]]},u.gray.lab=function(e){return[e[0],0,0]},u.gray.hex=function(e){let n=Math.round(e[0]/100*255)&255,t=((n<<16)+(n<<8)+n).toString(16).toUpperCase();return"000000".substring(t.length)+t},u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),ve=P({"../../../node_modules/color-convert/route.js"(r,o){var s=Y();function h(){let n={},t=Object.keys(s);for(let a=t.length,l=0;l<a;l++)n[t[l]]={distance:-1,parent:null};return n}function u(n){let t=h(),a=[n];for(t[n].distance=0;a.length;){let l=a.pop(),i=Object.keys(s[l]);for(let c=i.length,d=0;d<c;d++){let g=i[d],b=t[g];b.distance===-1&&(b.distance=t[l].distance+1,b.parent=l,a.unshift(g))}}return t}function f(n,t){return function(a){return t(n(a))}}function e(n,t){let a=[t[n].parent,n],l=s[t[n].parent][n],i=t[n].parent;for(;t[i].parent;)a.unshift(t[i].parent),l=f(s[t[i].parent][i],l),i=t[i].parent;return l.conversion=a,l}o.exports=function(n){let t=u(n),a={},l=Object.keys(t);for(let i=l.length,c=0;c<i;c++){let d=l[c];t[d].parent!==null&&(a[d]=e(d,t))}return a}}}),me=P({"../../../node_modules/color-convert/index.js"(r,o){var s=Y(),h=ve(),u={},f=Object.keys(s);function e(t){let a=function(...l){let i=l[0];return i==null?i:(i.length>1&&(l=i),t(l))};return"conversion"in t&&(a.conversion=t.conversion),a}function n(t){let a=function(...l){let i=l[0];if(i==null)return i;i.length>1&&(l=i);let c=t(l);if(typeof c=="object")for(let d=c.length,g=0;g<d;g++)c[g]=Math.round(c[g]);return c};return"conversion"in t&&(a.conversion=t.conversion),a}f.forEach(t=>{u[t]={},Object.defineProperty(u[t],"channels",{value:s[t].channels}),Object.defineProperty(u[t],"labels",{value:s[t].labels});let a=h(t);Object.keys(a).forEach(l=>{let i=a[l];u[t][l]=n(i),u[t][l].raw=e(i)})}),o.exports=u}}),_=ge(me());function pe(r,o,{signal:s,edges:h}={}){let u,f=null,e=h!=null&&h.includes("leading"),n=h==null||h.includes("trailing"),t=()=>{f!==null&&(r.apply(u,f),u=void 0,f=null)},a=()=>{n&&t(),d()},l=null,i=()=>{l!=null&&clearTimeout(l),l=setTimeout(()=>{l=null,a()},o)},c=()=>{l!==null&&(clearTimeout(l),l=null)},d=()=>{c(),u=void 0,f=null},g=()=>{t()},b=function(...p){if(s?.aborted)return;u=this,f=p;let m=l==null;i(),e&&m&&t()};return b.schedule=i,b.cancel=d,b.flush=g,s?.addEventListener("abort",d,{once:!0}),b}function C(){return(C=Object.assign||function(r){for(var o=1;o<arguments.length;o++){var s=arguments[o];for(var h in s)Object.prototype.hasOwnProperty.call(s,h)&&(r[h]=s[h])}return r}).apply(this,arguments)}function X(r,o){if(r==null)return{};var s,h,u={},f=Object.keys(r);for(h=0;h<f.length;h++)o.indexOf(s=f[h])>=0||(u[s]=r[s]);return u}function L(r){var o=y.useRef(r),s=y.useRef(function(h){o.current&&o.current(h)});return o.current=r,s.current}var S=function(r,o,s){return o===void 0&&(o=0),s===void 0&&(s=1),r>s?s:r<o?o:r},O=function(r){return"touches"in r},T=function(r){return r&&r.ownerDocument.defaultView||self},G=function(r,o,s){var h=r.getBoundingClientRect(),u=O(o)?(function(f,e){for(var n=0;n<f.length;n++)if(f[n].identifier===e)return f[n];return f[0]})(o.touches,s):o;return{left:S((u.pageX-(h.left+T(r).pageXOffset))/h.width),top:S((u.pageY-(h.top+T(r).pageYOffset))/h.height)}},A=function(r){!O(r)&&r.preventDefault()},F=v.memo(function(r){var o=r.onMove,s=r.onKey,h=X(r,["onMove","onKey"]),u=y.useRef(null),f=L(o),e=L(s),n=y.useRef(null),t=y.useRef(!1),a=y.useMemo(function(){var d=function(p){A(p),(O(p)?p.touches.length>0:p.buttons>0)&&u.current?f(G(u.current,p,n.current)):b(!1)},g=function(){return b(!1)};function b(p){var m=t.current,w=T(u.current),E=p?w.addEventListener:w.removeEventListener;E(m?"touchmove":"mousemove",d),E(m?"touchend":"mouseup",g)}return[function(p){var m=p.nativeEvent,w=u.current;if(w&&(A(m),!(function(k,j){return j&&!O(k)})(m,t.current)&&w)){if(O(m)){t.current=!0;var E=m.changedTouches||[];E.length&&(n.current=E[0].identifier)}w.focus(),f(G(w,m,n.current)),b(!0)}},function(p){var m=p.which||p.keyCode;m<37||m>40||(p.preventDefault(),e({left:m===39?.05:m===37?-.05:0,top:m===40?.05:m===38?-.05:0}))},b]},[e,f]),l=a[0],i=a[1],c=a[2];return y.useEffect(function(){return c},[c]),v.createElement("div",C({},h,{onTouchStart:l,onMouseDown:l,className:"react-colorful__interactive",ref:u,onKeyDown:i,tabIndex:0,role:"slider"}))}),N=function(r){return r.filter(Boolean).join(" ")},D=function(r){var o=r.color,s=r.left,h=r.top,u=h===void 0?.5:h,f=N(["react-colorful__pointer",r.className]);return v.createElement("div",{className:f,style:{top:100*u+"%",left:100*s+"%"}},v.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:o}}))},x=function(r,o,s){return o===void 0&&(o=0),s===void 0&&(s=Math.pow(10,o)),Math.round(s*r)/s},ye={grad:.9,turn:360,rad:360/(2*Math.PI)},xe=function(r){return Z(B(r))},B=function(r){return r[0]==="#"&&(r=r.substring(1)),r.length<6?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:r.length===4?x(parseInt(r[3]+r[3],16)/255,2):1}:{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16),a:r.length===8?x(parseInt(r.substring(6,8),16)/255,2):1}},we=function(r,o){return o===void 0&&(o="deg"),Number(r)*(ye[o]||1)},ke=function(r){var o=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return o?_e({h:we(o[1],o[2]),s:Number(o[3]),l:Number(o[4]),a:o[5]===void 0?1:Number(o[5])/(o[6]?100:1)}):{h:0,s:0,v:0,a:1}},_e=function(r){var o=r.s,s=r.l;return{h:r.h,s:(o*=(s<50?s:100-s)/100)>0?2*o/(s+o)*100:0,v:s+o,a:r.a}},Ee=function(r){return Ce(Q(r))},J=function(r){var o=r.s,s=r.v,h=r.a,u=(200-o)*s/100;return{h:x(r.h),s:x(u>0&&u<200?o*s/100/(u<=100?u:200-u)*100:0),l:x(u/2),a:x(h,2)}},K=function(r){var o=J(r);return"hsl("+o.h+", "+o.s+"%, "+o.l+"%)"},H=function(r){var o=J(r);return"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")"},Q=function(r){var o=r.h,s=r.s,h=r.v,u=r.a;o=o/360*6,s/=100,h/=100;var f=Math.floor(o),e=h*(1-s),n=h*(1-(o-f)*s),t=h*(1-(1-o+f)*s),a=f%6;return{r:x(255*[h,n,e,e,t,h][a]),g:x(255*[t,h,h,n,e,e][a]),b:x(255*[e,e,t,h,h,n][a]),a:x(u,2)}},Me=function(r){var o=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return o?Z({r:Number(o[1])/(o[2]?100/255:1),g:Number(o[3])/(o[4]?100/255:1),b:Number(o[5])/(o[6]?100/255:1),a:o[7]===void 0?1:Number(o[7])/(o[8]?100:1)}):{h:0,s:0,v:0,a:1}},R=function(r){var o=r.toString(16);return o.length<2?"0"+o:o},Ce=function(r){var o=r.r,s=r.g,h=r.b,u=r.a,f=u<1?R(x(255*u)):"";return"#"+R(o)+R(s)+R(h)+f},Z=function(r){var o=r.r,s=r.g,h=r.b,u=r.a,f=Math.max(o,s,h),e=f-Math.min(o,s,h),n=e?f===o?(s-h)/e:f===s?2+(h-o)/e:4+(o-s)/e:0;return{h:x(60*(n<0?n+6:n)),s:x(f?e/f*100:0),v:x(f/255*100),a:u}},ee=v.memo(function(r){var o=r.hue,s=r.onChange,h=N(["react-colorful__hue",r.className]);return v.createElement("div",{className:h},v.createElement(F,{onMove:function(u){s({h:360*u.left})},onKey:function(u){s({h:S(o+360*u.left,0,360)})},"aria-label":"Hue","aria-valuenow":x(o),"aria-valuemax":"360","aria-valuemin":"0"},v.createElement(D,{className:"react-colorful__hue-pointer",left:o/360,color:K({h:o,s:100,v:100,a:1})})))}),re=v.memo(function(r){var o=r.hsva,s=r.onChange,h={backgroundColor:K({h:o.h,s:100,v:100,a:1})};return v.createElement("div",{className:"react-colorful__saturation",style:h},v.createElement(F,{onMove:function(u){s({s:100*u.left,v:100-100*u.top})},onKey:function(u){s({s:S(o.s+100*u.left,0,100),v:S(o.v-100*u.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+x(o.s)+"%, Brightness "+x(o.v)+"%"},v.createElement(D,{className:"react-colorful__saturation-pointer",top:1-o.v/100,left:o.s/100,color:K(o)})))}),te=function(r,o){if(r===o)return!0;for(var s in r)if(r[s]!==o[s])return!1;return!0},ne=function(r,o){return r.replace(/\s/g,"")===o.replace(/\s/g,"")},$e=function(r,o){return r.toLowerCase()===o.toLowerCase()||te(B(r),B(o))};function ae(r,o,s){var h=L(s),u=y.useState(function(){return r.toHsva(o)}),f=u[0],e=u[1],n=y.useRef({color:o,hsva:f});y.useEffect(function(){if(!r.equal(o,n.current.color)){var a=r.toHsva(o);n.current={hsva:a,color:o},e(a)}},[o,r]),y.useEffect(function(){var a;te(f,n.current.hsva)||r.equal(a=r.fromHsva(f),n.current.color)||(n.current={hsva:f,color:a},h(a))},[f,r,h]);var t=y.useCallback(function(a){e(function(l){return Object.assign({},l,a)})},[]);return[f,t]}var Se=typeof window<"u"?y.useLayoutEffect:y.useEffect,Oe=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},W=new Map,le=function(r){Se(function(){var o=r.current?r.current.ownerDocument:document;if(o!==void 0&&!W.has(o)){var s=o.createElement("style");s.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}`,W.set(o,s);var h=Oe();h&&s.setAttribute("nonce",h),o.head.appendChild(s)}},[])},Ne=function(r){var o=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,f=r.onChange,e=X(r,["className","colorModel","color","onChange"]),n=y.useRef(null);le(n);var t=ae(s,u,f),a=t[0],l=t[1],i=N(["react-colorful",o]);return v.createElement("div",C({},e,{ref:n,className:i}),v.createElement(re,{hsva:a,onChange:l}),v.createElement(ee,{hue:a.h,onChange:l,className:"react-colorful__last-control"}))},je={defaultColor:"000",toHsva:xe,fromHsva:function(r){return Ee({h:r.h,s:r.s,v:r.v,a:1})},equal:$e},Re=function(r){return v.createElement(Ne,C({},r,{colorModel:je}))},ze=function(r){var o=r.className,s=r.hsva,h=r.onChange,u={backgroundImage:"linear-gradient(90deg, "+H(Object.assign({},s,{a:0}))+", "+H(Object.assign({},s,{a:1}))+")"},f=N(["react-colorful__alpha",o]),e=x(100*s.a);return v.createElement("div",{className:f},v.createElement("div",{className:"react-colorful__alpha-gradient",style:u}),v.createElement(F,{onMove:function(n){h({a:n.left})},onKey:function(n){h({a:S(s.a+n.left)})},"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},v.createElement(D,{className:"react-colorful__alpha-pointer",left:s.a,color:H(s)})))},oe=function(r){var o=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,f=r.onChange,e=X(r,["className","colorModel","color","onChange"]),n=y.useRef(null);le(n);var t=ae(s,u,f),a=t[0],l=t[1],i=N(["react-colorful",o]);return v.createElement("div",C({},e,{ref:n,className:i}),v.createElement(re,{hsva:a,onChange:l}),v.createElement(ee,{hue:a.h,onChange:l}),v.createElement(ze,{hsva:a,onChange:l,className:"react-colorful__last-control"}))},He={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:ke,fromHsva:H,equal:ne},Ie=function(r){return v.createElement(oe,C({},r,{colorModel:He}))},Pe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Me,fromHsva:function(r){var o=Q(r);return"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")"},equal:ne},qe=function(r){return v.createElement(oe,C({},r,{colorModel:Pe}))},Le=M.div({position:"relative",maxWidth:250}),Te=M.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"}}),Be=M.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Ke=r=>`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity="0.05" fill="${r?"white":"black"}"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,ue=M(U)(({value:r,selected:o,theme:s})=>({width:16,height:16,boxShadow:o?`${s.appBorderColor} 0 0 0 1px inset, ${s.textMutedColor}50 0 0 0 4px`:`${s.appBorderColor} 0 0 0 1px inset`,border:"none",borderRadius:s.appBorderRadius,"&, &:hover":{background:"unset",backgroundColor:"unset",backgroundImage:`linear-gradient(${r}, ${r}), ${Ke(s.base==="dark")}`}})),Ve=M(fe.Input)(({theme:r})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:r.typography.fonts.base,'[aria-readonly="true"] > &':{background:r.base==="light"?r.color.lighter:"transparent"}})),Xe=M(ue)(({disabled:r})=>({position:"absolute",top:4,left:4,zIndex:1,cursor:r?"not-allowed":"pointer"})),Fe=M(U)(({theme:r})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:r.input.color})),ie=(r=>(r.RGB="rgb",r.HSL="hsl",r.HEX="hex",r))(ie||{}),q=Object.values(ie),De=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Ge=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ae=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,V=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,We=/^\s*#?([0-9a-f]{3})\s*$/i,Ue={hex:Re,rgb:qe,hsl:Ie},z={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},se=r=>{let o=r?.match(De);if(!o)return[0,0,0,1];let[,s,h,u,f=1]=o;return[s,h,u,f].map(Number)},Ye=r=>{let[o,s,h,u]=se(r),[f,e,n]=_.default.rgb.hsl([o,s,h])||[0,0,0];return{valid:!0,value:r,keyword:_.default.rgb.keyword([o,s,h]),colorSpace:"rgb",rgb:r,hsl:`hsla(${f}, ${e}%, ${n}%, ${u})`,hex:`#${_.default.rgb.hex([o,s,h]).toLowerCase()}`}},Je=r=>{let[o,s,h,u]=se(r),[f,e,n]=_.default.hsl.rgb([o,s,h])||[0,0,0];return{valid:!0,value:r,keyword:_.default.hsl.keyword([o,s,h]),colorSpace:"hsl",rgb:`rgba(${f}, ${e}, ${n}, ${u})`,hsl:r,hex:`#${_.default.hsl.hex([o,s,h]).toLowerCase()}`}},Qe=r=>{let o=r.replace("#",""),s=_.default.keyword.rgb(o)||_.default.hex.rgb(o),h=_.default.rgb.hsl(s),u=r;/[^#a-f0-9]/i.test(r)?u=o:V.test(r)&&(u=`#${o}`);let f=!0;if(u.startsWith("#"))f=V.test(u);else try{_.default.keyword.hex(u)}catch{f=!1}return{valid:f,value:u,keyword:_.default.rgb.keyword(s),colorSpace:"hex",rgb:`rgba(${s[0]}, ${s[1]}, ${s[2]}, 1)`,hsl:`hsla(${h[0]}, ${h[1]}%, ${h[2]}%, 1)`,hex:u}},$=r=>{if(r)return Ge.test(r)?Ye(r):Ae.test(r)?Je(r):Qe(r)},Ze=(r,o,s)=>{if(!r||!o?.valid)return z[s];if(s!=="hex")return o?.[s]||z[s];if(!o.hex.startsWith("#"))try{return`#${_.default.keyword.hex(o.hex)}`}catch{return z.hex}let h=o.hex.match(We);if(!h)return V.test(o.hex)?o.hex:z.hex;let[u,f,e]=h[1].split("");return`#${u}${u}${f}${f}${e}${e}`},er=(r,o)=>{let[s,h]=y.useState(r||""),[u,f]=y.useState(()=>$(s)),[e,n]=y.useState(u?.colorSpace||"hex");y.useEffect(()=>{let i=r||"",c=$(i);h(i),f(c),n(c?.colorSpace||"hex")},[r]);let t=y.useMemo(()=>Ze(s,u,e).toLowerCase(),[s,u,e]),a=y.useCallback(i=>{let c=$(i),d=c?.value||i||"";h(d),d===""&&(f(void 0),o(void 0)),c&&(f(c),n(c.colorSpace),o(c.value))},[o]),l=y.useCallback(()=>{let i=(q.indexOf(e)+1)%q.length,c=q[i];n(c);let d=u?.[c]||"";h(d),o(d)},[u,e,o]);return{value:s,realValue:t,updateValue:a,color:u,colorSpace:e,cycleColorSpace:l}},I=r=>r.replace(/\s*/,"").toLowerCase(),rr=(r,o,s)=>{let[h,u]=y.useState(o?.valid?[o]:[]);y.useEffect(()=>{o===void 0&&u([])},[o]);let f=y.useMemo(()=>(r||[]).map(n=>typeof n=="string"?$(n):n.title?{...$(n.color),keyword:n.title}:$(n.color)).concat(h).filter(Boolean).slice(-27),[r,h]),e=y.useCallback(n=>{n?.valid&&(f.some(t=>t&&t[s]&&I(t[s]||"")===I(n[s]||""))||u(t=>t.concat(n)))},[s,f]);return{presets:f,addPreset:e}},tr=({name:r,value:o,onChange:s,onFocus:h,onBlur:u,presetColors:f,startOpen:e=!1,argType:n})=>{let t=y.useCallback(pe(s,200),[s]),{value:a,realValue:l,updateValue:i,color:c,colorSpace:d,cycleColorSpace:g}=er(o,t),{presets:b,addPreset:p}=rr(f??[],c,d),m=Ue[d],w=!!n?.table?.readonly,E=ce(r);return v.createElement(Le,null,v.createElement("label",{htmlFor:E,className:"sb-sr-only"},r),v.createElement(Ve,{id:E,value:a,onChange:k=>i(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),v.createElement(he,{defaultVisible:e,visible:w?!1:void 0,onVisibleChange:()=>c&&p(c),popover:v.createElement(Te,null,v.createElement(m,{color:l==="transparent"?"#000000":l,onChange:i,onFocus:h,onBlur:u}),b.length>0&&v.createElement(Be,null,b.map((k,j)=>v.createElement(ue,{key:`${k?.value||j}-${j}`,variant:"ghost",padding:"small",size:"small",ariaLabel:"Pick this color",tooltip:k?.keyword||k?.value||"",value:k?.value||"",selected:!!(c&&k&&k[d]&&I(k[d]||"")===I(c[d])),onClick:()=>k&&i(k.value||"")}))))},v.createElement(Xe,{variant:"ghost",padding:"small",size:"small",ariaLabel:"Open color picker",value:l,style:{margin:4},disabled:w})),a?v.createElement(Fe,{variant:"ghost",padding:"small",size:"small",ariaLabel:"Cycle through color spaces",disabled:w,onClick:w?void 0:g},v.createElement(de,null)):null)},or=tr;export{tr as ColorControl,or as default};
+import{g as ce,P as he,M as de,F as fe,B as U}from"./blocks-IXdn9TGW.js";import{r as y,R as v,S as M,aj as ge,ak as P}from"./iframe-Sf9RHZFu.js";import"./preload-helper-PPVm8Dsz.js";var be=P({"../../../node_modules/color-name/index.js"(r,o){o.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]}}}),Y=P({"../../../node_modules/color-convert/conversions.js"(r,o){var s=be(),h={};for(let e of Object.keys(s))h[s[e]]=e;var u={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"]}};o.exports=u;for(let e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);let{channels:n,labels:t}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:n}),Object.defineProperty(u[e],"labels",{value:t})}u.rgb.hsl=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,l=Math.min(n,t,a),i=Math.max(n,t,a),c=i-l,d,g;i===l?d=0:n===i?d=(t-a)/c:t===i?d=2+(a-n)/c:a===i&&(d=4+(n-t)/c),d=Math.min(d*60,360),d<0&&(d+=360);let b=(l+i)/2;return i===l?g=0:b<=.5?g=c/(i+l):g=c/(2-i-l),[d,g*100,b*100]},u.rgb.hsv=function(e){let n,t,a,l,i,c=e[0]/255,d=e[1]/255,g=e[2]/255,b=Math.max(c,d,g),p=b-Math.min(c,d,g),m=function(w){return(b-w)/6/p+1/2};return p===0?(l=0,i=0):(i=p/b,n=m(c),t=m(d),a=m(g),c===b?l=a-t:d===b?l=1/3+n-a:g===b&&(l=2/3+t-n),l<0?l+=1:l>1&&(l-=1)),[l*360,i*100,b*100]},u.rgb.hwb=function(e){let n=e[0],t=e[1],a=e[2],l=u.rgb.hsl(e)[0],i=1/255*Math.min(n,Math.min(t,a));return a=1-1/255*Math.max(n,Math.max(t,a)),[l,i*100,a*100]},u.rgb.cmyk=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,l=Math.min(1-n,1-t,1-a),i=(1-n-l)/(1-l)||0,c=(1-t-l)/(1-l)||0,d=(1-a-l)/(1-l)||0;return[i*100,c*100,d*100,l*100]};function f(e,n){return(e[0]-n[0])**2+(e[1]-n[1])**2+(e[2]-n[2])**2}u.rgb.keyword=function(e){let n=h[e];if(n)return n;let t=1/0,a;for(let l of Object.keys(s)){let i=s[l],c=f(e,i);c<t&&(t=c,a=l)}return a},u.keyword.rgb=function(e){return s[e]},u.rgb.xyz=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255;n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,a=a>.04045?((a+.055)/1.055)**2.4:a/12.92;let l=n*.4124+t*.3576+a*.1805,i=n*.2126+t*.7152+a*.0722,c=n*.0193+t*.1192+a*.9505;return[l*100,i*100,c*100]},u.rgb.lab=function(e){let n=u.rgb.xyz(e),t=n[0],a=n[1],l=n[2];t/=95.047,a/=100,l/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,l=l>.008856?l**(1/3):7.787*l+16/116;let i=116*a-16,c=500*(t-a),d=200*(a-l);return[i,c,d]},u.hsl.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100,l,i,c;if(t===0)return c=a*255,[c,c,c];a<.5?l=a*(1+t):l=a+t-a*t;let d=2*a-l,g=[0,0,0];for(let b=0;b<3;b++)i=n+1/3*-(b-1),i<0&&i++,i>1&&i--,6*i<1?c=d+(l-d)*6*i:2*i<1?c=l:3*i<2?c=d+(l-d)*(2/3-i)*6:c=d,g[b]=c*255;return g},u.hsl.hsv=function(e){let n=e[0],t=e[1]/100,a=e[2]/100,l=t,i=Math.max(a,.01);a*=2,t*=a<=1?a:2-a,l*=i<=1?i:2-i;let c=(a+t)/2,d=a===0?2*l/(i+l):2*t/(a+t);return[n,d*100,c*100]},u.hsv.rgb=function(e){let n=e[0]/60,t=e[1]/100,a=e[2]/100,l=Math.floor(n)%6,i=n-Math.floor(n),c=255*a*(1-t),d=255*a*(1-t*i),g=255*a*(1-t*(1-i));switch(a*=255,l){case 0:return[a,g,c];case 1:return[d,a,c];case 2:return[c,a,g];case 3:return[c,d,a];case 4:return[g,c,a];case 5:return[a,c,d]}},u.hsv.hsl=function(e){let n=e[0],t=e[1]/100,a=e[2]/100,l=Math.max(a,.01),i,c;c=(2-t)*a;let d=(2-t)*l;return i=t*l,i/=d<=1?d:2-d,i=i||0,c/=2,[n,i*100,c*100]},u.hwb.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100,l=t+a,i;l>1&&(t/=l,a/=l);let c=Math.floor(6*n),d=1-a;i=6*n-c,(c&1)!==0&&(i=1-i);let g=t+i*(d-t),b,p,m;switch(c){default:case 6:case 0:b=d,p=g,m=t;break;case 1:b=g,p=d,m=t;break;case 2:b=t,p=d,m=g;break;case 3:b=t,p=g,m=d;break;case 4:b=g,p=t,m=d;break;case 5:b=d,p=t,m=g;break}return[b*255,p*255,m*255]},u.cmyk.rgb=function(e){let n=e[0]/100,t=e[1]/100,a=e[2]/100,l=e[3]/100,i=1-Math.min(1,n*(1-l)+l),c=1-Math.min(1,t*(1-l)+l),d=1-Math.min(1,a*(1-l)+l);return[i*255,c*255,d*255]},u.xyz.rgb=function(e){let n=e[0]/100,t=e[1]/100,a=e[2]/100,l,i,c;return l=n*3.2406+t*-1.5372+a*-.4986,i=n*-.9689+t*1.8758+a*.0415,c=n*.0557+t*-.204+a*1.057,l=l>.0031308?1.055*l**(1/2.4)-.055:l*12.92,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,c=c>.0031308?1.055*c**(1/2.4)-.055:c*12.92,l=Math.min(Math.max(0,l),1),i=Math.min(Math.max(0,i),1),c=Math.min(Math.max(0,c),1),[l*255,i*255,c*255]},u.xyz.lab=function(e){let n=e[0],t=e[1],a=e[2];n/=95.047,t/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,t=t>.008856?t**(1/3):7.787*t+16/116,a=a>.008856?a**(1/3):7.787*a+16/116;let l=116*t-16,i=500*(n-t),c=200*(t-a);return[l,i,c]},u.lab.xyz=function(e){let n=e[0],t=e[1],a=e[2],l,i,c;i=(n+16)/116,l=t/500+i,c=i-a/200;let d=i**3,g=l**3,b=c**3;return i=d>.008856?d:(i-16/116)/7.787,l=g>.008856?g:(l-16/116)/7.787,c=b>.008856?b:(c-16/116)/7.787,l*=95.047,i*=100,c*=108.883,[l,i,c]},u.lab.lch=function(e){let n=e[0],t=e[1],a=e[2],l;l=Math.atan2(a,t)*360/2/Math.PI,l<0&&(l+=360);let i=Math.sqrt(t*t+a*a);return[n,i,l]},u.lch.lab=function(e){let n=e[0],t=e[1],a=e[2]/360*2*Math.PI,l=t*Math.cos(a),i=t*Math.sin(a);return[n,l,i]},u.rgb.ansi16=function(e,n=null){let[t,a,l]=e,i=n===null?u.rgb.hsv(e)[2]:n;if(i=Math.round(i/50),i===0)return 30;let c=30+(Math.round(l/255)<<2|Math.round(a/255)<<1|Math.round(t/255));return i===2&&(c+=60),c},u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])},u.rgb.ansi256=function(e){let n=e[0],t=e[1],a=e[2];return n===t&&t===a?n<8?16:n>248?231:Math.round((n-8)/247*24)+232:16+36*Math.round(n/255*5)+6*Math.round(t/255*5)+Math.round(a/255*5)},u.ansi16.rgb=function(e){let n=e%10;if(n===0||n===7)return e>50&&(n+=3.5),n=n/10.5*255,[n,n,n];let t=(~~(e>50)+1)*.5,a=(n&1)*t*255,l=(n>>1&1)*t*255,i=(n>>2&1)*t*255;return[a,l,i]},u.ansi256.rgb=function(e){if(e>=232){let i=(e-232)*10+8;return[i,i,i]}e-=16;let n,t=Math.floor(e/36)/5*255,a=Math.floor((n=e%36)/6)/5*255,l=n%6/5*255;return[t,a,l]},u.rgb.hex=function(e){let n=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return"000000".substring(n.length)+n},u.hex.rgb=function(e){let n=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!n)return[0,0,0];let t=n[0];n[0].length===3&&(t=t.split("").map(d=>d+d).join(""));let a=parseInt(t,16),l=a>>16&255,i=a>>8&255,c=a&255;return[l,i,c]},u.rgb.hcg=function(e){let n=e[0]/255,t=e[1]/255,a=e[2]/255,l=Math.max(Math.max(n,t),a),i=Math.min(Math.min(n,t),a),c=l-i,d,g;return c<1?d=i/(1-c):d=0,c<=0?g=0:l===n?g=(t-a)/c%6:l===t?g=2+(a-n)/c:g=4+(n-t)/c,g/=6,g%=1,[g*360,c*100,d*100]},u.hsl.hcg=function(e){let n=e[1]/100,t=e[2]/100,a=t<.5?2*n*t:2*n*(1-t),l=0;return a<1&&(l=(t-.5*a)/(1-a)),[e[0],a*100,l*100]},u.hsv.hcg=function(e){let n=e[1]/100,t=e[2]/100,a=n*t,l=0;return a<1&&(l=(t-a)/(1-a)),[e[0],a*100,l*100]},u.hcg.rgb=function(e){let n=e[0]/360,t=e[1]/100,a=e[2]/100;if(t===0)return[a*255,a*255,a*255];let l=[0,0,0],i=n%1*6,c=i%1,d=1-c,g=0;switch(Math.floor(i)){case 0:l[0]=1,l[1]=c,l[2]=0;break;case 1:l[0]=d,l[1]=1,l[2]=0;break;case 2:l[0]=0,l[1]=1,l[2]=c;break;case 3:l[0]=0,l[1]=d,l[2]=1;break;case 4:l[0]=c,l[1]=0,l[2]=1;break;default:l[0]=1,l[1]=0,l[2]=d}return g=(1-t)*a,[(t*l[0]+g)*255,(t*l[1]+g)*255,(t*l[2]+g)*255]},u.hcg.hsv=function(e){let n=e[1]/100,t=e[2]/100,a=n+t*(1-n),l=0;return a>0&&(l=n/a),[e[0],l*100,a*100]},u.hcg.hsl=function(e){let n=e[1]/100,t=e[2]/100*(1-n)+.5*n,a=0;return t>0&&t<.5?a=n/(2*t):t>=.5&&t<1&&(a=n/(2*(1-t))),[e[0],a*100,t*100]},u.hcg.hwb=function(e){let n=e[1]/100,t=e[2]/100,a=n+t*(1-n);return[e[0],(a-n)*100,(1-a)*100]},u.hwb.hcg=function(e){let n=e[1]/100,t=1-e[2]/100,a=t-n,l=0;return a<1&&(l=(t-a)/(1-a)),[e[0],a*100,l*100]},u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},u.gray.hsl=function(e){return[0,0,e[0]]},u.gray.hsv=u.gray.hsl,u.gray.hwb=function(e){return[0,100,e[0]]},u.gray.cmyk=function(e){return[0,0,0,e[0]]},u.gray.lab=function(e){return[e[0],0,0]},u.gray.hex=function(e){let n=Math.round(e[0]/100*255)&255,t=((n<<16)+(n<<8)+n).toString(16).toUpperCase();return"000000".substring(t.length)+t},u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),ve=P({"../../../node_modules/color-convert/route.js"(r,o){var s=Y();function h(){let n={},t=Object.keys(s);for(let a=t.length,l=0;l<a;l++)n[t[l]]={distance:-1,parent:null};return n}function u(n){let t=h(),a=[n];for(t[n].distance=0;a.length;){let l=a.pop(),i=Object.keys(s[l]);for(let c=i.length,d=0;d<c;d++){let g=i[d],b=t[g];b.distance===-1&&(b.distance=t[l].distance+1,b.parent=l,a.unshift(g))}}return t}function f(n,t){return function(a){return t(n(a))}}function e(n,t){let a=[t[n].parent,n],l=s[t[n].parent][n],i=t[n].parent;for(;t[i].parent;)a.unshift(t[i].parent),l=f(s[t[i].parent][i],l),i=t[i].parent;return l.conversion=a,l}o.exports=function(n){let t=u(n),a={},l=Object.keys(t);for(let i=l.length,c=0;c<i;c++){let d=l[c];t[d].parent!==null&&(a[d]=e(d,t))}return a}}}),me=P({"../../../node_modules/color-convert/index.js"(r,o){var s=Y(),h=ve(),u={},f=Object.keys(s);function e(t){let a=function(...l){let i=l[0];return i==null?i:(i.length>1&&(l=i),t(l))};return"conversion"in t&&(a.conversion=t.conversion),a}function n(t){let a=function(...l){let i=l[0];if(i==null)return i;i.length>1&&(l=i);let c=t(l);if(typeof c=="object")for(let d=c.length,g=0;g<d;g++)c[g]=Math.round(c[g]);return c};return"conversion"in t&&(a.conversion=t.conversion),a}f.forEach(t=>{u[t]={},Object.defineProperty(u[t],"channels",{value:s[t].channels}),Object.defineProperty(u[t],"labels",{value:s[t].labels});let a=h(t);Object.keys(a).forEach(l=>{let i=a[l];u[t][l]=n(i),u[t][l].raw=e(i)})}),o.exports=u}}),_=ge(me());function pe(r,o,{signal:s,edges:h}={}){let u,f=null,e=h!=null&&h.includes("leading"),n=h==null||h.includes("trailing"),t=()=>{f!==null&&(r.apply(u,f),u=void 0,f=null)},a=()=>{n&&t(),d()},l=null,i=()=>{l!=null&&clearTimeout(l),l=setTimeout(()=>{l=null,a()},o)},c=()=>{l!==null&&(clearTimeout(l),l=null)},d=()=>{c(),u=void 0,f=null},g=()=>{t()},b=function(...p){if(s?.aborted)return;u=this,f=p;let m=l==null;i(),e&&m&&t()};return b.schedule=i,b.cancel=d,b.flush=g,s?.addEventListener("abort",d,{once:!0}),b}function C(){return(C=Object.assign||function(r){for(var o=1;o<arguments.length;o++){var s=arguments[o];for(var h in s)Object.prototype.hasOwnProperty.call(s,h)&&(r[h]=s[h])}return r}).apply(this,arguments)}function X(r,o){if(r==null)return{};var s,h,u={},f=Object.keys(r);for(h=0;h<f.length;h++)o.indexOf(s=f[h])>=0||(u[s]=r[s]);return u}function L(r){var o=y.useRef(r),s=y.useRef(function(h){o.current&&o.current(h)});return o.current=r,s.current}var S=function(r,o,s){return o===void 0&&(o=0),s===void 0&&(s=1),r>s?s:r<o?o:r},O=function(r){return"touches"in r},T=function(r){return r&&r.ownerDocument.defaultView||self},G=function(r,o,s){var h=r.getBoundingClientRect(),u=O(o)?(function(f,e){for(var n=0;n<f.length;n++)if(f[n].identifier===e)return f[n];return f[0]})(o.touches,s):o;return{left:S((u.pageX-(h.left+T(r).pageXOffset))/h.width),top:S((u.pageY-(h.top+T(r).pageYOffset))/h.height)}},A=function(r){!O(r)&&r.preventDefault()},F=v.memo(function(r){var o=r.onMove,s=r.onKey,h=X(r,["onMove","onKey"]),u=y.useRef(null),f=L(o),e=L(s),n=y.useRef(null),t=y.useRef(!1),a=y.useMemo(function(){var d=function(p){A(p),(O(p)?p.touches.length>0:p.buttons>0)&&u.current?f(G(u.current,p,n.current)):b(!1)},g=function(){return b(!1)};function b(p){var m=t.current,w=T(u.current),E=p?w.addEventListener:w.removeEventListener;E(m?"touchmove":"mousemove",d),E(m?"touchend":"mouseup",g)}return[function(p){var m=p.nativeEvent,w=u.current;if(w&&(A(m),!(function(k,j){return j&&!O(k)})(m,t.current)&&w)){if(O(m)){t.current=!0;var E=m.changedTouches||[];E.length&&(n.current=E[0].identifier)}w.focus(),f(G(w,m,n.current)),b(!0)}},function(p){var m=p.which||p.keyCode;m<37||m>40||(p.preventDefault(),e({left:m===39?.05:m===37?-.05:0,top:m===40?.05:m===38?-.05:0}))},b]},[e,f]),l=a[0],i=a[1],c=a[2];return y.useEffect(function(){return c},[c]),v.createElement("div",C({},h,{onTouchStart:l,onMouseDown:l,className:"react-colorful__interactive",ref:u,onKeyDown:i,tabIndex:0,role:"slider"}))}),N=function(r){return r.filter(Boolean).join(" ")},D=function(r){var o=r.color,s=r.left,h=r.top,u=h===void 0?.5:h,f=N(["react-colorful__pointer",r.className]);return v.createElement("div",{className:f,style:{top:100*u+"%",left:100*s+"%"}},v.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:o}}))},x=function(r,o,s){return o===void 0&&(o=0),s===void 0&&(s=Math.pow(10,o)),Math.round(s*r)/s},ye={grad:.9,turn:360,rad:360/(2*Math.PI)},xe=function(r){return Z(B(r))},B=function(r){return r[0]==="#"&&(r=r.substring(1)),r.length<6?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:r.length===4?x(parseInt(r[3]+r[3],16)/255,2):1}:{r:parseInt(r.substring(0,2),16),g:parseInt(r.substring(2,4),16),b:parseInt(r.substring(4,6),16),a:r.length===8?x(parseInt(r.substring(6,8),16)/255,2):1}},we=function(r,o){return o===void 0&&(o="deg"),Number(r)*(ye[o]||1)},ke=function(r){var o=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return o?_e({h:we(o[1],o[2]),s:Number(o[3]),l:Number(o[4]),a:o[5]===void 0?1:Number(o[5])/(o[6]?100:1)}):{h:0,s:0,v:0,a:1}},_e=function(r){var o=r.s,s=r.l;return{h:r.h,s:(o*=(s<50?s:100-s)/100)>0?2*o/(s+o)*100:0,v:s+o,a:r.a}},Ee=function(r){return Ce(Q(r))},J=function(r){var o=r.s,s=r.v,h=r.a,u=(200-o)*s/100;return{h:x(r.h),s:x(u>0&&u<200?o*s/100/(u<=100?u:200-u)*100:0),l:x(u/2),a:x(h,2)}},K=function(r){var o=J(r);return"hsl("+o.h+", "+o.s+"%, "+o.l+"%)"},H=function(r){var o=J(r);return"hsla("+o.h+", "+o.s+"%, "+o.l+"%, "+o.a+")"},Q=function(r){var o=r.h,s=r.s,h=r.v,u=r.a;o=o/360*6,s/=100,h/=100;var f=Math.floor(o),e=h*(1-s),n=h*(1-(o-f)*s),t=h*(1-(1-o+f)*s),a=f%6;return{r:x(255*[h,n,e,e,t,h][a]),g:x(255*[t,h,h,n,e,e][a]),b:x(255*[e,e,t,h,h,n][a]),a:x(u,2)}},Me=function(r){var o=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);return o?Z({r:Number(o[1])/(o[2]?100/255:1),g:Number(o[3])/(o[4]?100/255:1),b:Number(o[5])/(o[6]?100/255:1),a:o[7]===void 0?1:Number(o[7])/(o[8]?100:1)}):{h:0,s:0,v:0,a:1}},R=function(r){var o=r.toString(16);return o.length<2?"0"+o:o},Ce=function(r){var o=r.r,s=r.g,h=r.b,u=r.a,f=u<1?R(x(255*u)):"";return"#"+R(o)+R(s)+R(h)+f},Z=function(r){var o=r.r,s=r.g,h=r.b,u=r.a,f=Math.max(o,s,h),e=f-Math.min(o,s,h),n=e?f===o?(s-h)/e:f===s?2+(h-o)/e:4+(o-s)/e:0;return{h:x(60*(n<0?n+6:n)),s:x(f?e/f*100:0),v:x(f/255*100),a:u}},ee=v.memo(function(r){var o=r.hue,s=r.onChange,h=N(["react-colorful__hue",r.className]);return v.createElement("div",{className:h},v.createElement(F,{onMove:function(u){s({h:360*u.left})},onKey:function(u){s({h:S(o+360*u.left,0,360)})},"aria-label":"Hue","aria-valuenow":x(o),"aria-valuemax":"360","aria-valuemin":"0"},v.createElement(D,{className:"react-colorful__hue-pointer",left:o/360,color:K({h:o,s:100,v:100,a:1})})))}),re=v.memo(function(r){var o=r.hsva,s=r.onChange,h={backgroundColor:K({h:o.h,s:100,v:100,a:1})};return v.createElement("div",{className:"react-colorful__saturation",style:h},v.createElement(F,{onMove:function(u){s({s:100*u.left,v:100-100*u.top})},onKey:function(u){s({s:S(o.s+100*u.left,0,100),v:S(o.v-100*u.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+x(o.s)+"%, Brightness "+x(o.v)+"%"},v.createElement(D,{className:"react-colorful__saturation-pointer",top:1-o.v/100,left:o.s/100,color:K(o)})))}),te=function(r,o){if(r===o)return!0;for(var s in r)if(r[s]!==o[s])return!1;return!0},ne=function(r,o){return r.replace(/\s/g,"")===o.replace(/\s/g,"")},$e=function(r,o){return r.toLowerCase()===o.toLowerCase()||te(B(r),B(o))};function ae(r,o,s){var h=L(s),u=y.useState(function(){return r.toHsva(o)}),f=u[0],e=u[1],n=y.useRef({color:o,hsva:f});y.useEffect(function(){if(!r.equal(o,n.current.color)){var a=r.toHsva(o);n.current={hsva:a,color:o},e(a)}},[o,r]),y.useEffect(function(){var a;te(f,n.current.hsva)||r.equal(a=r.fromHsva(f),n.current.color)||(n.current={hsva:f,color:a},h(a))},[f,r,h]);var t=y.useCallback(function(a){e(function(l){return Object.assign({},l,a)})},[]);return[f,t]}var Se=typeof window<"u"?y.useLayoutEffect:y.useEffect,Oe=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},W=new Map,le=function(r){Se(function(){var o=r.current?r.current.ownerDocument:document;if(o!==void 0&&!W.has(o)){var s=o.createElement("style");s.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}`,W.set(o,s);var h=Oe();h&&s.setAttribute("nonce",h),o.head.appendChild(s)}},[])},Ne=function(r){var o=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,f=r.onChange,e=X(r,["className","colorModel","color","onChange"]),n=y.useRef(null);le(n);var t=ae(s,u,f),a=t[0],l=t[1],i=N(["react-colorful",o]);return v.createElement("div",C({},e,{ref:n,className:i}),v.createElement(re,{hsva:a,onChange:l}),v.createElement(ee,{hue:a.h,onChange:l,className:"react-colorful__last-control"}))},je={defaultColor:"000",toHsva:xe,fromHsva:function(r){return Ee({h:r.h,s:r.s,v:r.v,a:1})},equal:$e},Re=function(r){return v.createElement(Ne,C({},r,{colorModel:je}))},ze=function(r){var o=r.className,s=r.hsva,h=r.onChange,u={backgroundImage:"linear-gradient(90deg, "+H(Object.assign({},s,{a:0}))+", "+H(Object.assign({},s,{a:1}))+")"},f=N(["react-colorful__alpha",o]),e=x(100*s.a);return v.createElement("div",{className:f},v.createElement("div",{className:"react-colorful__alpha-gradient",style:u}),v.createElement(F,{onMove:function(n){h({a:n.left})},onKey:function(n){h({a:S(s.a+n.left)})},"aria-label":"Alpha","aria-valuetext":e+"%","aria-valuenow":e,"aria-valuemin":"0","aria-valuemax":"100"},v.createElement(D,{className:"react-colorful__alpha-pointer",left:s.a,color:H(s)})))},oe=function(r){var o=r.className,s=r.colorModel,h=r.color,u=h===void 0?s.defaultColor:h,f=r.onChange,e=X(r,["className","colorModel","color","onChange"]),n=y.useRef(null);le(n);var t=ae(s,u,f),a=t[0],l=t[1],i=N(["react-colorful",o]);return v.createElement("div",C({},e,{ref:n,className:i}),v.createElement(re,{hsva:a,onChange:l}),v.createElement(ee,{hue:a.h,onChange:l}),v.createElement(ze,{hsva:a,onChange:l,className:"react-colorful__last-control"}))},He={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:ke,fromHsva:H,equal:ne},Ie=function(r){return v.createElement(oe,C({},r,{colorModel:He}))},Pe={defaultColor:"rgba(0, 0, 0, 1)",toHsva:Me,fromHsva:function(r){var o=Q(r);return"rgba("+o.r+", "+o.g+", "+o.b+", "+o.a+")"},equal:ne},qe=function(r){return v.createElement(oe,C({},r,{colorModel:Pe}))},Le=M.div({position:"relative",maxWidth:250}),Te=M.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"}}),Be=M.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Ke=r=>`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity="0.05" fill="${r?"white":"black"}"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,ue=M(U)(({value:r,selected:o,theme:s})=>({width:16,height:16,boxShadow:o?`${s.appBorderColor} 0 0 0 1px inset, ${s.textMutedColor}50 0 0 0 4px`:`${s.appBorderColor} 0 0 0 1px inset`,border:"none",borderRadius:s.appBorderRadius,"&, &:hover":{background:"unset",backgroundColor:"unset",backgroundImage:`linear-gradient(${r}, ${r}), ${Ke(s.base==="dark")}`}})),Ve=M(fe.Input)(({theme:r})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:r.typography.fonts.base,'[aria-readonly="true"] > &':{background:r.base==="light"?r.color.lighter:"transparent"}})),Xe=M(ue)(({disabled:r})=>({position:"absolute",top:4,left:4,zIndex:1,cursor:r?"not-allowed":"pointer"})),Fe=M(U)(({theme:r})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:r.input.color})),ie=(r=>(r.RGB="rgb",r.HSL="hsl",r.HEX="hex",r))(ie||{}),q=Object.values(ie),De=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Ge=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Ae=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,V=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,We=/^\s*#?([0-9a-f]{3})\s*$/i,Ue={hex:Re,rgb:qe,hsl:Ie},z={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},se=r=>{let o=r?.match(De);if(!o)return[0,0,0,1];let[,s,h,u,f=1]=o;return[s,h,u,f].map(Number)},Ye=r=>{let[o,s,h,u]=se(r),[f,e,n]=_.default.rgb.hsl([o,s,h])||[0,0,0];return{valid:!0,value:r,keyword:_.default.rgb.keyword([o,s,h]),colorSpace:"rgb",rgb:r,hsl:`hsla(${f}, ${e}%, ${n}%, ${u})`,hex:`#${_.default.rgb.hex([o,s,h]).toLowerCase()}`}},Je=r=>{let[o,s,h,u]=se(r),[f,e,n]=_.default.hsl.rgb([o,s,h])||[0,0,0];return{valid:!0,value:r,keyword:_.default.hsl.keyword([o,s,h]),colorSpace:"hsl",rgb:`rgba(${f}, ${e}, ${n}, ${u})`,hsl:r,hex:`#${_.default.hsl.hex([o,s,h]).toLowerCase()}`}},Qe=r=>{let o=r.replace("#",""),s=_.default.keyword.rgb(o)||_.default.hex.rgb(o),h=_.default.rgb.hsl(s),u=r;/[^#a-f0-9]/i.test(r)?u=o:V.test(r)&&(u=`#${o}`);let f=!0;if(u.startsWith("#"))f=V.test(u);else try{_.default.keyword.hex(u)}catch{f=!1}return{valid:f,value:u,keyword:_.default.rgb.keyword(s),colorSpace:"hex",rgb:`rgba(${s[0]}, ${s[1]}, ${s[2]}, 1)`,hsl:`hsla(${h[0]}, ${h[1]}%, ${h[2]}%, 1)`,hex:u}},$=r=>{if(r)return Ge.test(r)?Ye(r):Ae.test(r)?Je(r):Qe(r)},Ze=(r,o,s)=>{if(!r||!o?.valid)return z[s];if(s!=="hex")return o?.[s]||z[s];if(!o.hex.startsWith("#"))try{return`#${_.default.keyword.hex(o.hex)}`}catch{return z.hex}let h=o.hex.match(We);if(!h)return V.test(o.hex)?o.hex:z.hex;let[u,f,e]=h[1].split("");return`#${u}${u}${f}${f}${e}${e}`},er=(r,o)=>{let[s,h]=y.useState(r||""),[u,f]=y.useState(()=>$(s)),[e,n]=y.useState(u?.colorSpace||"hex");y.useEffect(()=>{let i=r||"",c=$(i);h(i),f(c),n(c?.colorSpace||"hex")},[r]);let t=y.useMemo(()=>Ze(s,u,e).toLowerCase(),[s,u,e]),a=y.useCallback(i=>{let c=$(i),d=c?.value||i||"";h(d),d===""&&(f(void 0),o(void 0)),c&&(f(c),n(c.colorSpace),o(c.value))},[o]),l=y.useCallback(()=>{let i=(q.indexOf(e)+1)%q.length,c=q[i];n(c);let d=u?.[c]||"";h(d),o(d)},[u,e,o]);return{value:s,realValue:t,updateValue:a,color:u,colorSpace:e,cycleColorSpace:l}},I=r=>r.replace(/\s*/,"").toLowerCase(),rr=(r,o,s)=>{let[h,u]=y.useState(o?.valid?[o]:[]);y.useEffect(()=>{o===void 0&&u([])},[o]);let f=y.useMemo(()=>(r||[]).map(n=>typeof n=="string"?$(n):n.title?{...$(n.color),keyword:n.title}:$(n.color)).concat(h).filter(Boolean).slice(-27),[r,h]),e=y.useCallback(n=>{n?.valid&&(f.some(t=>t&&t[s]&&I(t[s]||"")===I(n[s]||""))||u(t=>t.concat(n)))},[s,f]);return{presets:f,addPreset:e}},tr=({name:r,value:o,onChange:s,onFocus:h,onBlur:u,presetColors:f,startOpen:e=!1,argType:n})=>{let t=y.useCallback(pe(s,200),[s]),{value:a,realValue:l,updateValue:i,color:c,colorSpace:d,cycleColorSpace:g}=er(o,t),{presets:b,addPreset:p}=rr(f??[],c,d),m=Ue[d],w=!!n?.table?.readonly,E=ce(r);return v.createElement(Le,null,v.createElement("label",{htmlFor:E,className:"sb-sr-only"},r),v.createElement(Ve,{id:E,value:a,onChange:k=>i(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),v.createElement(he,{defaultVisible:e,visible:w?!1:void 0,onVisibleChange:()=>c&&p(c),popover:v.createElement(Te,null,v.createElement(m,{color:l==="transparent"?"#000000":l,onChange:i,onFocus:h,onBlur:u}),b.length>0&&v.createElement(Be,null,b.map((k,j)=>v.createElement(ue,{key:`${k?.value||j}-${j}`,variant:"ghost",padding:"small",size:"small",ariaLabel:"Pick this color",tooltip:k?.keyword||k?.value||"",value:k?.value||"",selected:!!(c&&k&&k[d]&&I(k[d]||"")===I(c[d])),onClick:()=>k&&i(k.value||"")}))))},v.createElement(Xe,{variant:"ghost",padding:"small",size:"small",ariaLabel:"Open color picker",value:l,style:{margin:4},disabled:w})),a?v.createElement(Fe,{variant:"ghost",padding:"small",size:"small",ariaLabel:"Cycle through color spaces",disabled:w,onClick:w?void 0:g},v.createElement(de,null)):null)},or=tr;export{tr as ColorControl,or as default};

package/dist/storybook/assets/{Colors.stories-bIq_ssbI.js → Colors.stories-CX-Ny3B_.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";const b=c=>{const r=[...c.palette?.entries()??[]];return r.length>0&&r[0][1].includes("-gradient")?a`
+import{x as a}from"./iframe-Sf9RHZFu.js";import"./preload-helper-PPVm8Dsz.js";const b=c=>{const r=[...c.palette?.entries()??[]];return r.length>0&&r[0][1].includes("-gradient")?a`
       <div class="my-10 flex flex-wrap gap-4">
         ${r.map(([e,d])=>a`
             <div class="w-[200px] overflow-clip rounded-lg bg-white shadow-md">