@brightspot/ui 1.2.0 → 1.3.0

package/dist/storybook/assets/ClipboardMixin.stories-Cr3efF-v.js

@@ -0,0 +1,228 @@
+import{x as m,i as b}from"./iframe-D-tG1MVV.js";import{t as u,C as h}from"./ComponentStatesMixin-BkLj42wt.js";import"./preload-helper-PPVm8Dsz.js";const x=t=>{class o extends t{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-element-connected",{}),e=>this.emit("btu-element-error",{error:e}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-element-disconnected")}emit(e,i){return this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!1,composed:!0,detail:i}))}}return o},y=t=>{class o extends t{connectedCallback(){const e=()=>{super.connectedCallback()};document.readyState!=="loading"?e():document.addEventListener("DOMContentLoaded",()=>e())}}return o};function s(t,o){let r=document.getElementById("aria-live-container");r||(r=document.createElement("div"),r.setAttribute("id","aria-live-container"),document.body.appendChild(r));const e=document.createElement("div"),i="speak-"+Date.now();e.setAttribute("id",i),e.setAttribute("aria-atomic","true"),e.setAttribute("aria-live","polite"),e.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(e),setTimeout(()=>{const d=document.getElementById(i);d&&(d.innerHTML=t)},150),window.BRIGHTSPOT?.ariaDebug===!0&&console.log(`ARIA Announced: "${t}"`),setTimeout(()=>{document.getElementById(i)?.remove()},2e3)}const g=t=>{class o extends t{async copy(e,i=3e3){if(e&&!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(e)}catch(d){console.error("Failed to copy text to clipboard:",d),s("Copy failed");return}this.states.add("btu-clipboard-copied"),this.requestUpdate(),this.emit("btu-clipboard-copied"),s("Copied!"),setTimeout(()=>{this.states.delete("btu-clipboard-copied"),this.requestUpdate()},i)}}}return o};var c=Object.freeze,v=Object.defineProperty,C=Object.getOwnPropertyDescriptor,f=(t,o,r,e)=>{for(var i=e>1?void 0:e?C(o,r):o,d=t.length-1,n;d>=0;d--)(n=t[d])&&(i=n(i)||i);return i},E=(t,o)=>c(v(t,"raw",{value:c(t.slice())})),l;const k={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.
+
+<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>
+</ul>
+
+<h3>Method API</h3>
+
+<table>
+  <thead>
+    <tr>
+      <th>Method</th>
+      <th>Parameters</th>
+      <th>Return Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>copy</code></td>
+      <td><code>text: string</code><br/><code>timeout?: number</code></td>
+      <td><code>Promise&lt;void&gt;</code></td>
+      <td>Copies text to clipboard. Timeout specifies how long to keep success state (default: 3000ms)</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3>Events</h3>
+
+<table>
+  <thead>
+    <tr>
+      <th>Event Name</th>
+      <th>Type</th>
+      <th>Description</th>
+      <th>Detail</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>btu-clipboard-copied</code></td>
+      <td>CustomEvent</td>
+      <td>Fired when text is successfully copied to clipboard</td>
+      <td><code>{}</code></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3>Dependencies</h3>
+
+<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>
+</ul>
+
+<h3>Mixin Composition</h3>
+
+<p>ClipboardMixin must be composed with ComponentStatesMixin and EventEmitterMixin. The recommended order is:</p>
+
+<p>✅ <strong>Correct composition order:</strong></p>
+\`\`\`
+ClipboardMixin(
+  ComponentStatesMixin(
+    EventEmitterMixin(
+      ReadyMixin(LitElement)
+    )
+  )
+)
+\`\`\`
+
+<p>❌ <strong>Incorrect - missing required mixins:</strong></p>
+\`\`\`
+ClipboardMixin(LitElement) // Error: ComponentStatesMixin required
+\`\`\`
+
+<h3>TypeScript Usage</h3>
+
+\`\`\`typescript
+import { ClipboardMixin } from './ClipboardMixin'
+import { ComponentStatesMixin } from './ComponentStatesMixin'
+import { EventEmitterMixin } from './EventEmitterMixin'
+import { ReadyMixin } from './ReadyMixin'
+import { LitElement, html } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+@customElement('my-copy-button')
+class MyCopyButton extends ClipboardMixin(
+  ComponentStatesMixin(
+    EventEmitterMixin(
+      ReadyMixin(LitElement)
+    )
+  )
+) {
+  async handleClick() {
+    await this.copy('Hello, World!', 5000)
+  }
+
+  render() {
+    const isCopied = this.states.has('btu-clipboard-copied')
+
+    return html\`
+      <button @click=\${this.handleClick}>
+        \${isCopied ? 'Copied!' : 'Copy Text'}
+      </button>
+    \`
+  }
+}
+\`\`\`
+
+<h3>CSS Styling</h3>
+
+<p>Style the copied state using the <code>:state()</code> pseudo-class:</p>
+
+\`\`\`css
+my-copy-button:state(btu-clipboard-copied) {
+  background-color: #10b981;
+  color: white;
+}
+
+my-copy-button:state(btu-clipboard-copied)::after {
+  content: ' ✓';
+}
+\`\`\`
+
+<h3>Behavior Notes</h3>
+<ul>
+  <li>The <code>copy()</code> method is debounced - duplicate calls while in success state are ignored</li>
+  <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 t=this.states.has("btu-clipboard-copied");return m`
+      <div style="display: flex; align-items: center; gap: 1rem;">
+        <input
+          type="text"
+          .value=${this.textToCopy}
+          @input=${o=>{this.textToCopy=o.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: ${t?"#10b981":"#3b82f6"}; border-radius: 4px; padding: 0.5rem 1rem; font-weight: 600; color: white; transition: background-color 0.2s; border: none; cursor: pointer;"
+        >
+          ${t?"✓ Copied!":"Copy"}
+        </button>
+      </div>
+    `}};p=f([u("clipboard-demo")],p);const a={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">
+          Edit the text and click "Copy" to copy it to your clipboard. The button will show feedback for 3 seconds.
+          Check the browser console to see the emitted event.
+        </p>
+      </div>
+
+      <clipboard-demo id="clipboard-demo"></clipboard-demo>
+
+      <div class="rounded bg-gray-100 p-4">
+        <p class="mb-2 text-sm font-semibold text-gray-700">Try pasting here to verify:</p>
+        <textarea
+          class="w-full rounded border border-gray-300 p-2"
+          rows="2"
+          placeholder="Paste copied text here (Cmd+V or Ctrl+V)"
+        ></textarea>
+      </div>
+
+      <script>
+        ;(() => {
+          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)
+            console.log('✅ Text successfully copied to clipboard')
+            console.log(
+              '🎯 State check: demo.states.has("btu-clipboard-copied") =',
+              demo.states.has('btu-clipboard-copied'),
+            )
+          })
+        })()
+      <\/script>
+    </div>`])))};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<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">
+          Edit the text and click "Copy" to copy it to your clipboard. The button will show feedback for 3 seconds.
+          Check the browser console to see the emitted event.
+        </p>
+      </div>
+
+      <clipboard-demo id="clipboard-demo"></clipboard-demo>
+
+      <div class="rounded bg-gray-100 p-4">
+        <p class="mb-2 text-sm font-semibold text-gray-700">Try pasting here to verify:</p>
+        <textarea
+          class="w-full rounded border border-gray-300 p-2"
+          rows="2"
+          placeholder="Paste copied text here (Cmd+V or Ctrl+V)"
+        ></textarea>
+      </div>
+
+      <script>
+        ;(() => {
+          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)
+            console.log('✅ Text successfully copied to clipboard')
+            console.log(
+              '🎯 State check: demo.states.has("btu-clipboard-copied") =',
+              demo.states.has('btu-clipboard-copied'),
+            )
+          })
+        })()
+      <\/script>
+    </div>\`
+}`,...a.parameters?.docs?.source}}};const S=["ClipboardMixinDemo"];export{a as ClipboardMixinDemo,S as __namedExportsOrder,k as default};

package/dist/storybook/assets/Color-64QXVMR3-BucypS4O.js

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

package/dist/storybook/assets/{Colors.stories-nEoNeHhf.js → Colors.stories-CeKs5FaB.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-Z4F0Cgki.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-D-tG1MVV.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">

package/dist/storybook/assets/ComponentStatesMixin-BkLj42wt.js

@@ -0,0 +1 @@
+import"./iframe-D-tG1MVV.js";const i=t=>(s,e)=>{e!==void 0?e.addInitializer((()=>{customElements.define(t,s)})):customElements.define(t,s)},a=t=>{class s extends t{constructor(){super(...arguments),this.internals=this.attachInternals(),this.states=this.internals.states}}return s};export{a as C,i as t};

package/dist/storybook/assets/ComponentStatesMixin.stories--YPoyrpQ.js

@@ -0,0 +1,313 @@
+import{x as c,i as p}from"./iframe-D-tG1MVV.js";import{t as m,C as u}from"./ComponentStatesMixin-BkLj42wt.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,g,d)=>{for(var t=d>1?void 0:d?h(o,g):o,s=e.length-1,n;s>=0;s--)(n=e[s])&&(t=n(t)||t);return t},f=(e,o)=>r(b(e,"raw",{value:r(e.slice())})),l;const E={title:"Mixins/Component States",tags:["autodocs"],parameters:{docs:{description:{component:`
+\`ComponentStatesMixin\` provides access to the **Custom State API** for managing component-specific states that can be styled with the \`:state()\` pseudo-class in CSS.
+
+Uses \`ElementInternals.states\` (\`CustomStateSet\`) to manage component states that are separate from attributes, providing better encapsulation and performance.
+
+<h3>What ComponentStatesMixin Provides</h3>
+<ul>
+    <li><strong>internals:</strong> <code>ElementInternals</code> instance for accessing internal element APIs</li>
+    <li><strong>states:</strong> <code>CustomStateSet</code> for managing component states (add, delete, has, clear)</li>
+    <li>Access to browser-native Custom State API</li>
+    <li>States can be styled externally using CSS <code>:state()</code> pseudo-class</li>
+</ul>
+
+<h3>Default Component States</h3>
+
+<p>The following states are available across all Brightspot UI components:</p>
+
+<table>
+  <thead>
+    <tr>
+      <th>State Name</th>
+      <th>Description</th>
+      <th>Usage</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>btu-error</code></td>
+      <td>Indicates an error state</td>
+      <td>Form validation errors, failed operations</td>
+    </tr>
+    <tr>
+      <td><code>btu-loading</code></td>
+      <td>Indicates a loading/pending state</td>
+      <td>Async operations in progress</td>
+    </tr>
+    <tr>
+      <td><code>btu-expanded</code></td>
+      <td>Indicates an expanded state</td>
+      <td>Collapsible/expandable components</td>
+    </tr>
+    <tr>
+      <td><code>btu-clipboard-copied</code></td>
+      <td>Indicates successful clipboard copy</td>
+      <td>Copy-to-clipboard operations</td>
+    </tr>
+  </tbody>
+</table>
+
+<h3>TypeScript Usage</h3>
+
+\`\`\`typescript
+import { ComponentStatesMixin } from './ComponentStatesMixin'
+import { LitElement } from 'lit'
+
+// Basic usage
+class MyComponent extends ComponentStatesMixin(LitElement) {
+  async fetchData() {
+    // Add loading state
+    this.states.add('btu-loading')
+    this.requestUpdate()
+
+    try {
+      const data = await fetch('/api/data')
+      this.states.delete('btu-loading')
+      this.requestUpdate()
+    } catch (error) {
+      this.states.delete('btu-loading')
+      this.states.add('btu-error')
+      this.requestUpdate()
+    }
+  }
+
+  checkState() {
+    if (this.states.has('btu-loading')) {
+      console.log('Component is loading...')
+    }
+  }
+}
+\`\`\`
+
+<h3>CSS Styling with :state()</h3>
+
+<p>Style components based on their current state using the \`:state()\` pseudo-class:</p>
+
+\`\`\`css
+/* Style component when in loading state */
+my-component:state(btu-loading) {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: wait;
+}
+
+/* Style component when in error state */
+my-component:state(btu-error) {
+  border-color: red;
+  background-color: #fee;
+}
+
+/* Style component when expanded */
+my-component:state(btu-expanded) {
+  height: auto;
+  max-height: 500px;
+}
+\`\`\`
+
+<h3>Learn More</h3>
+<ul>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states" target="_blank">MDN: ElementInternals.states</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:state" target="_blank">MDN: :state() pseudo-class</a></li>
+  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet" target="_blank">MDN: CustomStateSet</a></li>
+</ul>
+        `}}}};let i=class extends u(p){render(){return c`
+      <div style="border-radius: 4px; border: 2px solid #d1d5db; padding: 1rem; transition: all 0.2s;">
+        <p style="font-size: 0.875rem; color: #4b5563;">Current states will affect styling of this text box</p>
+      </div>
+    `}};i=x([m("state-demo")],i);const a={render:()=>c(l||(l=f([`<div class="flex flex-col gap-4">
+      <div>
+        <h4 class="mb-2 font-bold">Interactive Component States Demo</h4>
+        <p class="mb-4 text-sm text-gray-600">
+          Click the checkboxes to toggle states and observe the visual changes. Open your browser console to see state
+          change logs.
+        </p>
+      </div>
+
+      <state-demo id="state-demo"></state-demo>
+
+      <div class="flex flex-wrap gap-4">
+        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+          <input type="checkbox" id="toggle-error" />
+          <span>Error State</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+          <input type="checkbox" id="toggle-loading" />
+          <span>Loading State</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+          <input type="checkbox" id="toggle-expanded" />
+          <span>Expanded State</span>
+        </label>
+        <button id="clear-states" class="btu-button btu-button-gray btu-button-md">Clear All States</button>
+      </div>
+
+      <style>
+        state-demo:state(btu-error) {
+          border-color: #ef4444 !important;
+          background-color: #fee2e2 !important;
+        }
+
+        state-demo:state(btu-loading) {
+          opacity: 0.6;
+          cursor: wait;
+        }
+
+        state-demo:state(btu-expanded) {
+          padding: 2rem !important;
+          background-color: #dbeafe !important;
+        }
+      </style>
+
+      <script>
+        ;(() => {
+          const demo = document.getElementById('state-demo')
+          if (!demo) return
+
+          const toggleError = document.getElementById('toggle-error')
+          const toggleLoading = document.getElementById('toggle-loading')
+          const toggleExpanded = document.getElementById('toggle-expanded')
+          const clearStates = document.getElementById('clear-states')
+
+          toggleError?.addEventListener('change', e => {
+            if (e.target.checked) {
+              demo.states.add('btu-error')
+              console.log('✅ Added btu-error state')
+            } else {
+              demo.states.delete('btu-error')
+              console.log('❌ Removed btu-error state')
+            }
+            demo.requestUpdate()
+          })
+
+          toggleLoading?.addEventListener('change', e => {
+            if (e.target.checked) {
+              demo.states.add('btu-loading')
+              console.log('⏳ Added btu-loading state')
+            } else {
+              demo.states.delete('btu-loading')
+              console.log('❌ Removed btu-loading state')
+            }
+            demo.requestUpdate()
+          })
+
+          toggleExpanded?.addEventListener('change', e => {
+            if (e.target.checked) {
+              demo.states.add('btu-expanded')
+              console.log('📖 Added btu-expanded state')
+            } else {
+              demo.states.delete('btu-expanded')
+              console.log('❌ Removed btu-expanded state')
+            }
+            demo.requestUpdate()
+          })
+
+          clearStates?.addEventListener('click', () => {
+            demo.states.clear()
+            toggleError.checked = false
+            toggleLoading.checked = false
+            toggleExpanded.checked = false
+            console.log('🧹 Cleared all states')
+            demo.requestUpdate()
+          })
+        })()
+      <\/script>
+    </div>`])))};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-4">
+      <div>
+        <h4 class="mb-2 font-bold">Interactive Component States Demo</h4>
+        <p class="mb-4 text-sm text-gray-600">
+          Click the checkboxes to toggle states and observe the visual changes. Open your browser console to see state
+          change logs.
+        </p>
+      </div>
+
+      <state-demo id="state-demo"></state-demo>
+
+      <div class="flex flex-wrap gap-4">
+        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+          <input type="checkbox" id="toggle-error" />
+          <span>Error State</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+          <input type="checkbox" id="toggle-loading" />
+          <span>Loading State</span>
+        </label>
+        <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
+          <input type="checkbox" id="toggle-expanded" />
+          <span>Expanded State</span>
+        </label>
+        <button id="clear-states" class="btu-button btu-button-gray btu-button-md">Clear All States</button>
+      </div>
+
+      <style>
+        state-demo:state(btu-error) {
+          border-color: #ef4444 !important;
+          background-color: #fee2e2 !important;
+        }
+
+        state-demo:state(btu-loading) {
+          opacity: 0.6;
+          cursor: wait;
+        }
+
+        state-demo:state(btu-expanded) {
+          padding: 2rem !important;
+          background-color: #dbeafe !important;
+        }
+      </style>
+
+      <script>
+        ;(() => {
+          const demo = document.getElementById('state-demo')
+          if (!demo) return
+
+          const toggleError = document.getElementById('toggle-error')
+          const toggleLoading = document.getElementById('toggle-loading')
+          const toggleExpanded = document.getElementById('toggle-expanded')
+          const clearStates = document.getElementById('clear-states')
+
+          toggleError?.addEventListener('change', e => {
+            if (e.target.checked) {
+              demo.states.add('btu-error')
+              console.log('✅ Added btu-error state')
+            } else {
+              demo.states.delete('btu-error')
+              console.log('❌ Removed btu-error state')
+            }
+            demo.requestUpdate()
+          })
+
+          toggleLoading?.addEventListener('change', e => {
+            if (e.target.checked) {
+              demo.states.add('btu-loading')
+              console.log('⏳ Added btu-loading state')
+            } else {
+              demo.states.delete('btu-loading')
+              console.log('❌ Removed btu-loading state')
+            }
+            demo.requestUpdate()
+          })
+
+          toggleExpanded?.addEventListener('change', e => {
+            if (e.target.checked) {
+              demo.states.add('btu-expanded')
+              console.log('📖 Added btu-expanded state')
+            } else {
+              demo.states.delete('btu-expanded')
+              console.log('❌ Removed btu-expanded state')
+            }
+            demo.requestUpdate()
+          })
+
+          clearStates?.addEventListener('click', () => {
+            demo.states.clear()
+            toggleError.checked = false
+            toggleLoading.checked = false
+            toggleExpanded.checked = false
+            console.log('🧹 Cleared all states')
+            demo.requestUpdate()
+          })
+        })()
+      <\/script>
+    </div>\`
+}`,...a.parameters?.docs?.source}}};const C=["ComponentStates"];export{a as ComponentStates,C as __namedExportsOrder,E as default};