@acusti/uikit-docs 0.4.4 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (84) hide show
  1. package/.storybook/main.ts +19 -4
  2. package/CHANGELOG.md +60 -0
  3. package/dist/assets/CSSValueInput-B69U5DrZ.js +5 -0
  4. package/dist/assets/{CSSValueInput-BgAgo3f9.css → CSSValueInput-DKgB9IQs.css} +1 -1
  5. package/dist/assets/CSSValueInput.stories-vCftVQHX.js +113 -0
  6. package/dist/assets/Color-6BZIO3FS-BHsDhiaJ.js +1 -0
  7. package/dist/assets/DatePicker.stories-X2JO2cn6.js +585 -0
  8. package/dist/assets/DocsRenderer-LL677BLK-i2bqAbNY.js +2 -0
  9. package/dist/assets/Dropdown-QkqMQiyU.css +1 -0
  10. package/dist/assets/Dropdown-_IIsqrAA.js +101 -0
  11. package/dist/assets/Dropdown.stories-msGED41R.js +364 -0
  12. package/dist/assets/InputText-_BMv0r1n.css +1 -0
  13. package/dist/assets/InputText.stories-CG1EnzrQ.js +148 -0
  14. package/dist/assets/Introduction-orXeKug7.js +184 -0
  15. package/dist/assets/MonthCalendar.stories-CJT-JiqF.js +177 -0
  16. package/dist/assets/WithTooltip-65CFNBJE-DlgYg9W2.js +9 -0
  17. package/dist/assets/blocks-C4xgyV4X.js +46 -0
  18. package/dist/assets/chunk-242VQQM5-DEt_wvrI.js +1 -0
  19. package/dist/assets/chunk-YKABRMAI-BpCcWWoG.js +18 -0
  20. package/dist/assets/client-Bvdml6v2.js +9 -0
  21. package/dist/assets/clsx-Bdud1Ih_.js +1 -0
  22. package/dist/assets/compiler-runtime-BOsKKfMw.js +1 -0
  23. package/dist/assets/components-CuDS54ZU.js +92 -0
  24. package/dist/assets/dist-6e4YoSiG.js +1 -0
  25. package/dist/assets/dist-BreUZhw6.js +1 -0
  26. package/dist/assets/formatter-EIJCOSYU-4RP_9NAI.js +1 -0
  27. package/dist/assets/iframe-BsC6HWDY.js +1221 -0
  28. package/dist/assets/jsx-runtime-CZwoFFIL.js +1 -0
  29. package/dist/assets/lib-WXkUx4TK.js +1 -0
  30. package/dist/assets/preload-helper-Bhb7V-Yo.js +1 -0
  31. package/dist/assets/react-18-6aLPZbD-.js +1 -0
  32. package/dist/assets/react-DcwytXSz.js +1 -0
  33. package/dist/assets/react-dom-CFVoDXTy.js +1 -0
  34. package/dist/assets/syntaxhighlighter-ED5Y7EFY-BQSv6pbL.js +6 -0
  35. package/dist/assets/theming-DLDZLcJn.js +39 -0
  36. package/dist/assets/useIsOutOfBounds.stories-CI4DMSUD.js +105 -0
  37. package/dist/assets/{useKeyboardEvents-BH4Zd7d3.css → useKeyboardEvents-CKMYGqVT.css} +1 -1
  38. package/dist/assets/useKeyboardEvents.stories-CNX299tr.js +3 -0
  39. package/dist/favicon-wrapper.svg +46 -0
  40. package/dist/favicon.svg +1 -1
  41. package/dist/iframe.html +59 -40
  42. package/dist/index.html +8 -16
  43. package/dist/index.json +1 -1
  44. package/dist/project.json +1 -1
  45. package/dist/sb-addons/docs-1/manager-bundle.js +1 -149
  46. package/dist/sb-addons/storybook-2/manager-bundle.js +1 -1
  47. package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +548 -108
  48. package/dist/sb-common-assets/favicon-wrapper.svg +46 -0
  49. package/dist/sb-common-assets/favicon.svg +1 -1
  50. package/dist/sb-manager/globals-runtime.js +73064 -67182
  51. package/dist/sb-manager/globals.js +6 -16
  52. package/dist/sb-manager/manager-stores.js +23 -0
  53. package/dist/sb-manager/runtime.js +17712 -10309
  54. package/dist/vite-inject-mocker-entry.js +2 -0
  55. package/package.json +11 -9
  56. package/stories/CSSValueInput.stories.tsx +1 -1
  57. package/stories/DatePicker.stories.tsx +182 -45
  58. package/stories/InputText.stories.tsx +36 -0
  59. package/tsconfig.json +1 -0
  60. package/tsconfig.tsbuildinfo +1 -1
  61. package/dist/assets/CSSValueInput-BoZriUnh.js +0 -1
  62. package/dist/assets/CSSValueInput.stories-D1VcYZJ0.js +0 -113
  63. package/dist/assets/Color-AVL7NMMY-BeW0C7pE.js +0 -1
  64. package/dist/assets/DatePicker.stories-BSWV31FV.js +0 -244
  65. package/dist/assets/DocsRenderer-PQXLIZUC-D92GwNti.js +0 -2
  66. package/dist/assets/Dropdown-D5cyjefk.css +0 -1
  67. package/dist/assets/Dropdown-DUP_ybXe.js +0 -84
  68. package/dist/assets/Dropdown.stories-2Wtw1otE.js +0 -336
  69. package/dist/assets/InputText-Tkbh5amB.css +0 -1
  70. package/dist/assets/InputText.stories-BYt2Aj0_.js +0 -90
  71. package/dist/assets/Introduction-nSE2hjmb.js +0 -183
  72. package/dist/assets/MonthCalendar.stories-IJrL6wIl.js +0 -169
  73. package/dist/assets/blocks-Du178fXa.js +0 -658
  74. package/dist/assets/client-B2qWCcIR.js +0 -25
  75. package/dist/assets/clsx-hXifHU8N.js +0 -9
  76. package/dist/assets/iframe-ByGa_ItU.js +0 -1102
  77. package/dist/assets/index-BRXcJgsA.js +0 -1
  78. package/dist/assets/index-BVajFqaV.js +0 -1
  79. package/dist/assets/index-DwJ-mRZ2.js +0 -9
  80. package/dist/assets/jsx-runtime-D_zvdyIk.js +0 -9
  81. package/dist/assets/react-18-djOrgGe8.js +0 -1
  82. package/dist/assets/useIsOutOfBounds.stories-e48KZd_G.js +0 -105
  83. package/dist/assets/useKeyboardEvents.stories-CJbDuGfk.js +0 -3
  84. package/dist/sb-manager/globals-module-info.js +0 -797
@@ -1,13 +1,15 @@
1
+ import { type StorybookConfig } from '@storybook/react-vite';
2
+ import react from '@vitejs/plugin-react';
1
3
  import { dirname, join } from 'path';
2
4
 
3
- import type { StorybookConfig } from '@storybook/react-vite';
5
+ import { compilerOptions } from '../../../vite.config.base.js';
4
6
 
5
7
  // https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments
6
8
  const _require = typeof require === 'undefined' ? import.meta : require;
7
- const getAbsolutePath = (value: string): any =>
9
+ const getAbsolutePath = (value: string): string =>
8
10
  dirname(_require.resolve(join(value, 'package.json'))).replace(/^file:\/\//, '');
9
11
 
10
- const config: StorybookConfig = {
12
+ const main: StorybookConfig = {
11
13
  addons: [getAbsolutePath('@storybook/addon-docs')],
12
14
  framework: {
13
15
  name: getAbsolutePath('@storybook/react-vite'),
@@ -15,6 +17,19 @@ const config: StorybookConfig = {
15
17
  },
16
18
  stories: ['../stories/Introduction.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
17
19
  typescript: { check: false, reactDocgen: 'react-docgen' },
20
+ async viteFinal(viteConfig) {
21
+ const { mergeConfig } = await import('vite');
22
+
23
+ return mergeConfig(viteConfig, {
24
+ plugins: [
25
+ react({
26
+ babel: {
27
+ plugins: [['babel-plugin-react-compiler', compilerOptions]],
28
+ },
29
+ }),
30
+ ],
31
+ });
32
+ },
18
33
  };
19
34
 
20
- export default config;
35
+ export default main;
package/CHANGELOG.md CHANGED
@@ -1,5 +1,65 @@
1
1
  # @acusti/uikit-docs
2
2
 
3
+ ## 0.4.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [48c735b]
8
+ - Updated dependencies [f578799]
9
+ - @acusti/dropdown@0.53.0
10
+
11
+ ## 0.4.5
12
+
13
+ ### Patch Changes
14
+
15
+ - Add support for `props.minHeight` for multi-line `InputText` elements to
16
+ ensure that the textarea element is never resized shorter than that value
17
+ and render `minHeight`/`maxHeight` as inline styles when using
18
+ `field-sizing: content` to render auto-resizing textareas
19
+ - d72a772: **Breaking:** DatePicker now uncontrolled with
20
+ `defaultDateStart`/`defaultDateEnd` props
21
+ - **Renamed props:**: `dateStart` → `defaultDateStart`, `dateEnd` →
22
+ `defaultDateEnd`
23
+ - **Behavior change:**: DatePicker is now fully uncontrolled - props
24
+ only set initial values, not ongoing state
25
+ - **Reset pattern:**: To reset the picker’s state, change the
26
+ component’s `key` prop instead of updating date props
27
+ - **Migration:**
28
+ - Replace `dateStart`/`dateEnd` with
29
+ `defaultDateStart`/`defaultDateEnd`
30
+ - Implement key-based reset for clearing selected dates
31
+ - Remove any logic that updates date props to control the picker
32
+ externally
33
+
34
+ **Before:**
35
+
36
+ ```tsx
37
+ <DatePicker
38
+ dateStart={selectedDate}
39
+ dateEnd={endDate}
40
+ onChange={handleChange}
41
+ />
42
+ ```
43
+
44
+ **After:**
45
+
46
+ ```tsx
47
+ <DatePicker
48
+ key={resetKey}
49
+ defaultDateStart={selectedDate}
50
+ defaultDateEnd={endDate}
51
+ onChange={handleChange}
52
+ />
53
+ ```
54
+
55
+ This change resolves ` react-hooks/set-state-in-effect` ESLint errors
56
+ and follows React conventions for uncontrolled components.
57
+
58
+ - Updated dependencies
59
+ - Updated dependencies [d72a772]
60
+ - @acusti/input-text@2.3.0
61
+ - @acusti/date-picker@0.15.0
62
+
3
63
  ## 0.4.4
4
64
 
5
65
  ### Patch Changes
@@ -0,0 +1,5 @@
1
+ import{E as e,r as t}from"./iframe-BsC6HWDY.js";import{t as n}from"./jsx-runtime-CZwoFFIL.js";import{t as r}from"./compiler-runtime-BOsKKfMw.js";import{t as i}from"./clsx-Bdud1Ih_.js";var a=Object.freeze({angle:/(deg|grad|rad|turn)\s*$/i,integer:/$/i,length:/(em|rem|ch|ex|vh|vw|vmin|vmax|px|cm|mm|in|pc|pt|%)\s*$/i,percent:/(%)\s*$/,time:/(s|ms)\s*$/i}),o=`length`,s=Object.freeze({angle:`deg`,integer:``,length:`px`,percent:`%`,time:`s`}),c=(e,t)=>parseFloat(e.toFixed(t)),l=({cssValueType:e,defaultUnit:t=s[e],value:n})=>{if(typeof n==`number`)return t;let r=a[e].exec(n);return r===null||!r[1]?t:r[1]},u=e=>typeof e==`number`?e:parseFloat(e),ee=e=>{let t=u(e.value);return Number.isNaN(t)?e.value.toString().trim():`${t}${l(e)}`},te=r(),d=e(t(),1),f=n();function ne(e){let t=(0,te.c)(80),{autoCapitalize:n,autoComplete:r,autoFocus:i,className:a,disabled:o,discardOnEscape:s,doubleClickToEdit:c,enterKeyHint:l,form:u,id:ee,initialValue:ne,list:m,max:_,maxHeight:v,maxLength:y,min:re,minHeight:b,minLength:x,multiLine:S,multiple:C,name:w,onBlur:T,onChange:E,onChangeValue:D,onFocus:ie,onKeyDown:O,onKeyUp:k,pattern:ae,placeholder:A,readOnly:oe,ref:j,required:M,rows:N,selectTextOnFocus:P,size:F,step:I,style:L,submitOnEnter:R,tabIndex:z,title:B,type:V}=e,H=N===void 0?1:N,se=V===void 0?`text`:V,U=(0,d.useRef)(null),W=ne??``,G=(0,d.useRef)(W),K;t[0]!==v||t[1]!==b||t[2]!==S?(K=()=>{if(!U.current||p)return;if(!S){U.current.style.height=``;return}let{transitionDelay:e,transitionDuration:t}=U.current.style;U.current.style.transitionDelay=`0s`,U.current.style.transitionDuration=`0s`,U.current.style.height=``;let n=typeof b==`string`?parseFloat(b):b,r=typeof v==`string`?parseFloat(v):v,i=Math.max(n??0,Math.min(U.current.scrollHeight,r??1/0));i&&(U.current.style.height=`${i}px`),setTimeout(()=>{U.current&&(U.current.style.transitionDelay=e===`0s`?``:e,U.current.style.transitionDuration=t===`0s`?``:t)},0)},t[0]=v,t[1]=b,t[2]=S,t[3]=K):K=t[3];let q=K,J;t[4]!==S||t[5]!==j||t[6]!==q?(J=e=>{U.current=e;let t;if(typeof j==`function`?t=j(e):j&&(j.current=e),!e||!S||p)return t;q();let n=new ResizeObserver(q);return n.observe(e),()=>{n.disconnect(),typeof t==`function`&&t()}},t[4]=S,t[5]=j,t[6]=q,t[7]=J):J=t[7];let ce=J,Y,X;t[8]===W?(Y=t[9],X=t[10]):(Y=()=>{G.current=W,U.current&&(U.current.value=W)},X=[W],t[8]=W,t[9]=Y,t[10]=X),(0,d.useEffect)(Y,X);let[Z,Q]=(0,d.useState)(oe??c),$=(0,d.useRef)(!0),le;t[11]===c?le=t[12]:(le=()=>{c&&Q(!1)},t[11]=c,t[12]=le);let ue=le,de;t[13]!==E||t[14]!==D?(de=e=>{E&&E(e),D&&D(e.target.value)},t[13]=E,t[14]=D,t[15]=de):de=t[15];let fe=de,pe;t[16]!==S||t[17]!==ie||t[18]!==q?(pe=e=>{ie&&ie(e),S&&q()},t[16]=S,t[17]=ie,t[18]=q,t[19]=pe):pe=t[19];let me=pe,he;t[20]!==c||t[21]!==T||t[22]!==P?(he=e=>{T&&T(e),G.current=e.currentTarget.value,c&&Q(!0),P&&($.current=!0)},t[20]=c,t[21]=T,t[22]=P,t[23]=he):he=t[23];let ge=he,_e;t[24]===P?_e=t[25]:(_e=e=>{if(!P)return;let t=e.currentTarget;if(!$.current||($.current=!1,!t.value)||t.ownerDocument.activeElement!==t)return;let n=t.value.length;t.selectionStart===0&&t.selectionEnd===n||(t.selectionStart=0,t.selectionEnd=n)},t[24]=P,t[25]=_e);let ve=_e,ye;t[26]!==s||t[27]!==c||t[28]!==fe||t[29]!==S||t[30]!==O||t[31]!==Z||t[32]!==R?(ye=e=>{if(O&&O(e),!(e.key!==`Enter`&&e.key!==`Escape`)){if(e.key===`Enter`&&(R||S&&g(e))&&(!S||!e.shiftKey&&!e.altKey&&!e.ctrlKey)){e.preventDefault(),e.currentTarget.closest(`form`)?.requestSubmit(),e.currentTarget.blur();return}!s&&!c||(e.key===`Escape`&&s?e.currentTarget.value!==G.current&&(e.currentTarget.value=G.current,fe(e)):e.key===`Enter`&&c&&Z&&Q(!1),e.currentTarget.blur())}},t[26]=s,t[27]=c,t[28]=fe,t[29]=S,t[30]=O,t[31]=Z,t[32]=R,t[33]=ye):ye=t[33];let be=ye,xe;t[34]!==v||t[35]!==b||t[36]!==S||t[37]!==L?(xe=S&&p?{...L,fieldSizing:`content`,maxHeight:h(v)?void 0:v,minHeight:h(b)?void 0:b}:L,t[34]=v,t[35]=b,t[36]=S,t[37]=L,t[38]=xe):xe=t[38];let Se=xe,Ce=S?`textarea`:`input`,we;t[39]!==_||t[40]!==re||t[41]!==S||t[42]!==H||t[43]!==q||t[44]!==I?(we=S?{onInput:q,rows:H}:{max:_,min:re,step:I},t[39]=_,t[40]=re,t[41]=S,t[42]=H,t[43]=q,t[44]=I,t[45]=we):we=t[45];let Te;return t[46]!==Ce||t[47]!==n||t[48]!==r||t[49]!==i||t[50]!==a||t[51]!==o||t[52]!==l||t[53]!==u||t[54]!==ge||t[55]!==fe||t[56]!==me||t[57]!==be||t[58]!==ce||t[59]!==ve||t[60]!==ee||t[61]!==Se||t[62]!==m||t[63]!==y||t[64]!==x||t[65]!==C||t[66]!==w||t[67]!==k||t[68]!==ae||t[69]!==A||t[70]!==Z||t[71]!==M||t[72]!==F||t[73]!==ue||t[74]!==we||t[75]!==z||t[76]!==B||t[77]!==se||t[78]!==W?(Te=(0,f.jsx)(Ce,{autoCapitalize:n,autoComplete:r,autoFocus:i,className:a,defaultValue:W,disabled:o,enterKeyHint:l,form:u,id:ee,list:m,maxLength:y,minLength:x,multiple:C,name:w,onBlur:ge,onChange:fe,onDoubleClick:ue,onFocus:me,onKeyDown:be,onKeyUp:k,onSelect:ve,pattern:ae,placeholder:A,readOnly:Z,ref:ce,required:M,size:F,style:Se,tabIndex:z,title:B,type:se,...we}),t[46]=Ce,t[47]=n,t[48]=r,t[49]=i,t[50]=a,t[51]=o,t[52]=l,t[53]=u,t[54]=ge,t[55]=fe,t[56]=me,t[57]=be,t[58]=ce,t[59]=ve,t[60]=ee,t[61]=Se,t[62]=m,t[63]=y,t[64]=x,t[65]=C,t[66]=w,t[67]=k,t[68]=ae,t[69]=A,t[70]=Z,t[71]=M,t[72]=F,t[73]=ue,t[74]=we,t[75]=z,t[76]=B,t[77]=se,t[78]=W,t[79]=Te):Te=t[79],Te}var p=typeof CSS>`u`?!0:CSS.supports(`field-sizing`,`content`),m=/mac|iphone|ipad|ipod/i;function h(e){return e==null||e===``||e===0||e===1/0}function g(e){let t=globalThis.navigator?.platform??``;return m.test(t)?e.metaKey:e.ctrlKey}var _=`cssvalueinput`;function v(e){let t=(0,te.c)(56),{allowEmpty:n,className:r,cssValueType:a,disabled:p,getValueAsNumber:m,icon:h,label:g,max:v,min:y,name:re,onBlur:b,onChange:x,onFocus:S,onKeyDown:C,onKeyUp:w,onSubmitValue:T,placeholder:E,ref:D,step:ie,tabIndex:O,title:k,unit:ae,validator:A,value:oe}=e,j=n===void 0?!0:n,M=a===void 0?o:a,N=m===void 0?u:m,P=ie===void 0?1:ie,F=ae===void 0?s[M]:ae,I=typeof oe==`number`&&Number.isFinite(oe)?`${oe}`:oe,L=(0,d.useRef)(I??``),R,z;t[0]===I?(R=t[1],z=t[2]):(R=()=>{L.current=I??``},z=[I],t[0]=I,t[1]=R,t[2]=z),(0,d.useEffect)(R,z);let B;t[3]===T?B=t[4]:(B=e=>{L.current=e.currentTarget.value,T(e.currentTarget.value)},t[3]=T,t[4]=B);let V=B,H;t[5]!==j||t[6]!==M||t[7]!==N||t[8]!==V||t[9]!==v||t[10]!==y||t[11]!==b||t[12]!==F||t[13]!==A?(H=e=>{let t=e.currentTarget;b&&b(e);let n=t.value.trim();if(j&&!n){V(e);return}let r=N(n),i=Number.isFinite(r),a=F?l({cssValueType:M,defaultUnit:F,value:L.current}):``;if(!i){let r=!1;A instanceof RegExp?r=A.test(n):A&&(r=A(n)),r?V(e):t.value=L.current;return}let o=r;if(i&&(y!=null&&r<y?o=y:v!=null&&r>v?o=v:M===`integer`&&(o=Math.floor(r))),o!==r){let e=l({cssValueType:M,defaultUnit:a,value:n});t.value=o+e}else t.value=ee({cssValueType:M,defaultUnit:a,value:n});V(e)},t[5]=j,t[6]=M,t[7]=N,t[8]=V,t[9]=v,t[10]=y,t[11]=b,t[12]=F,t[13]=A,t[14]=H):H=t[14];let se=H,U;t[15]!==M||t[16]!==N||t[17]!==v||t[18]!==y||t[19]!==P||t[20]!==F?(U=e=>{let{currentValue:t,multiplier:n,signum:r}=e,i=n===void 0?1:n,a=r===void 0?1:r,o=i*P*a,s=N(t);if(typeof t==`string`&&Number.isNaN(s))return t;let u=s+o;u=M===`integer`?Math.floor(u):c(u,5),typeof v==`number`&&Number.isFinite(v)&&(u=Math.min(v,u)),typeof y==`number`&&Number.isFinite(y)&&(u=Math.max(y,u));let ee=l({cssValueType:M,defaultUnit:F,value:t});return`${u}${ee}`},t[15]=M,t[16]=N,t[17]=v,t[18]=y,t[19]=P,t[20]=F,t[21]=U):U=t[21];let W=U,G;t[22]!==W||t[23]!==C||t[24]!==E||t[25]!==F?(G=e=>{let t=e.currentTarget;if(C&&C(e),e.key!==`ArrowDown`&&e.key!==`ArrowUp`)return;let n=t.value??E??`0${F}`,r=W({currentValue:n,multiplier:e.shiftKey?10:1,signum:e.key===`ArrowUp`?1:-1});r!==n&&(e.stopPropagation(),e.preventDefault(),t.value=r)},t[22]=W,t[23]=C,t[24]=E,t[25]=F,t[26]=G):G=t[26];let K=G,q;t[27]!==V||t[28]!==w?(q=e=>{w&&w(e),(e.key===`ArrowUp`||e.key===`ArrowDown`)&&V(e)},t[27]=V,t[28]=w,t[29]=q):q=t[29];let J=q,ce=g?void 0:k,Y;t[30]!==r||t[31]!==p?(Y=i(_,r,{disabled:p}),t[30]=r,t[31]=p,t[32]=Y):Y=t[32];let X;t[33]===h?X=t[34]:(X=h==null?null:(0,f.jsx)(`div`,{className:`${_}-icon`,children:h}),t[33]=h,t[34]=X);let Z;t[35]===g?Z=t[36]:(Z=g?(0,f.jsx)(`div`,{className:`${_}-label`,children:(0,f.jsx)(`p`,{className:`${_}-label-text`,children:g})}):null,t[35]=g,t[36]=Z);let Q;t[37]!==p||t[38]!==se||t[39]!==K||t[40]!==J||t[41]!==re||t[42]!==x||t[43]!==S||t[44]!==E||t[45]!==D||t[46]!==O||t[47]!==I?(Q=(0,f.jsx)(`div`,{className:`${_}-value`,children:(0,f.jsx)(ne,{disabled:p,discardOnEscape:!0,initialValue:I,name:re,onBlur:se,onChange:x,onFocus:S,onKeyDown:K,onKeyUp:J,placeholder:E,ref:D,selectTextOnFocus:!0,tabIndex:O})}),t[37]=p,t[38]=se,t[39]=K,t[40]=J,t[41]=re,t[42]=x,t[43]=S,t[44]=E,t[45]=D,t[46]=O,t[47]=I,t[48]=Q):Q=t[48];let $;return t[49]!==ce||t[50]!==Y||t[51]!==X||t[52]!==Z||t[53]!==Q||t[54]!==k?($=(0,f.jsxs)(`label`,{"aria-label":ce,className:Y,title:k,children:[X,Z,Q]}),t[49]=ce,t[50]=Y,t[51]=X,t[52]=Z,t[53]=Q,t[54]=k,t[55]=$):$=t[55],$}v.__docgenInfo={description:``,methods:[],displayName:`CSSValueInput`,props:{allowEmpty:{required:!1,tsType:{name:`boolean`},description:`Boolean indicating if the user can submit an empty value (i.e. clear
2
+ the value). Defaults to true.`,defaultValue:{value:`true`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:``},cssValueType:{required:!1,tsType:{name:`CSSValueType`},description:``,defaultValue:{value:`"length"`,computed:!1}},disabled:{required:!1,tsType:{name:`boolean`},description:``},getValueAsNumber:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(value: number | string) => number`,signature:{arguments:[{type:{name:`union`,raw:`number | string`,elements:[{name:`number`},{name:`string`}]},name:`value`}],return:{name:`number`}}},description:`Function that receives a value and converts it to its numerical equivalent
3
+ (i.e. '12px' → 12). Defaults to parseFloat().`,defaultValue:{value:`(value) => typeof value === "number" ? value : parseFloat(value)`,computed:!1}},icon:{required:!1,tsType:{name:`ReactNode`},description:``},label:{required:!1,tsType:{name:`string`},description:``},max:{required:!1,tsType:{name:`number`},description:``},min:{required:!1,tsType:{name:`number`},description:``},name:{required:!1,tsType:{name:`string`},description:``},onBlur:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: FocusEvent<HTMLInputElement>) => unknown`,signature:{arguments:[{type:{name:`FocusEvent`,elements:[{name:`HTMLInputElement`}],raw:`FocusEvent<HTMLInputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onChange:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: ChangeEvent<HTMLInputElement>) => unknown`,signature:{arguments:[{type:{name:`ChangeEvent`,elements:[{name:`HTMLInputElement`}],raw:`ChangeEvent<HTMLInputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onFocus:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: FocusEvent<HTMLInputElement>) => unknown`,signature:{arguments:[{type:{name:`FocusEvent`,elements:[{name:`HTMLInputElement`}],raw:`FocusEvent<HTMLInputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onKeyDown:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: KeyboardEvent<HTMLInputElement>) => unknown`,signature:{arguments:[{type:{name:`KeyboardEvent`,elements:[{name:`HTMLInputElement`}],raw:`KeyboardEvent<HTMLInputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onKeyUp:{required:!1,tsType:{name:`signature`,type:`function`,raw:`(event: KeyboardEvent<HTMLInputElement>) => unknown`,signature:{arguments:[{type:{name:`KeyboardEvent`,elements:[{name:`HTMLInputElement`}],raw:`KeyboardEvent<HTMLInputElement>`},name:`event`}],return:{name:`unknown`}}},description:``},onSubmitValue:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: string) => unknown`,signature:{arguments:[{type:{name:`string`},name:`value`}],return:{name:`unknown`}}},description:`Custom event handler triggered when the user presses enter/return
4
+ or blurs the input after making a change. Hitting esc will restore
5
+ the previous submitted value or original value.`},placeholder:{required:!1,tsType:{name:`string`},description:``},ref:{required:!1,tsType:{name:`Ref`,elements:[{name:`HTMLInputElement`}],raw:`Ref<HTMLInputElement>`},description:``},step:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`1`,computed:!1}},tabIndex:{required:!1,tsType:{name:`number`},description:``},title:{required:!1,tsType:{name:`string`},description:``},unit:{required:!1,tsType:{name:`string`},description:``,defaultValue:{value:`DEFAULT_UNIT_BY_CSS_VALUE_TYPE[cssValueType]`,computed:!0}},validator:{required:!1,tsType:{name:`union`,raw:`((value: string) => boolean) | RegExp`,elements:[{name:`unknown`},{name:`RegExp`}]},description:`Regex or validator function to validate non-numeric values`},value:{required:!1,tsType:{name:`string`},description:``}}};export{v as t};
@@ -1 +1 @@
1
- .cssvalueinput{display:flex;align-items:center;border-radius:4px;padding:10px 14px}.innerZoomElementWrapper .cssvalueinput{background-color:#1ea7fd40}.cssvalueinput-icon{width:20px;height:20px;margin-right:8px}.cssvalueinput-icon svg{width:100%;height:100%}.cssvalueinput-label{padding-right:10px}.cssvalueinput-label-text{font-family:system-ui;font-size:14px;margin:0}.cssvalueinput-value input{width:65px;padding:3px 6px;font-size:13px;line-height:13px}
1
+ .cssvalueinput{border-radius:4px;align-items:center;padding:10px 14px;display:flex}.innerZoomElementWrapper .cssvalueinput{background-color:#1ea7fd40}.cssvalueinput-icon{width:20px;height:20px;margin-right:8px}.cssvalueinput-icon svg{width:100%;height:100%}.cssvalueinput-label{padding-right:10px}.cssvalueinput-label-text{margin:0;font-family:system-ui;font-size:14px}.cssvalueinput-value input{width:65px;padding:3px 6px;font-size:13px;line-height:13px}
@@ -0,0 +1,113 @@
1
+ import{t as e}from"./jsx-runtime-CZwoFFIL.js";import"./compiler-runtime-BOsKKfMw.js";import{t}from"./CSSValueInput-B69U5DrZ.js";/* empty css */var n=e(),r={component:t,parameters:{docs:{description:{component:"`CSSValueInput` is a React component that renders a text input that can take and update a CSS value of a particular type with a default unit. The input’s behavior is similar to those in design applications such as Adobe Illustrator or XD."}}},tags:[`autodocs`],title:`UIKit/Controls/CSSValueInput`};const i={args:{className:`my-special-input`,cssValueType:`length`,label:`Font size`,name:`fontsize`,placeholder:`1rem`,tabIndex:1,unit:`rem`,validator:/^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|inherit)$/,value:`24px`}},a={args:{className:`my-panel-input`,cssValueType:`time`,label:`Duration`,max:20,min:0,name:`duration`,placeholder:`0.25s`,step:.1,unit:`s`}},o={args:{className:`flex-item-example`,cssValueType:`angle`,icon:(0,n.jsx)(`svg`,{width:`100px`,height:`100px`,viewBox:`0 0 100 100`,version:`1.1`,xmlns:`http://www.w3.org/2000/svg`,children:(0,n.jsx)(`g`,{stroke:`none`,strokeWidth:`1`,fill:`none`,children:(0,n.jsxs)(`g`,{transform:`translate(2, 2)`,stroke:`#222F3E`,strokeWidth:`4`,children:[(0,n.jsx)(`path`,{d:`M56.5106952,10.5464071 C60.8135865,11.5200327 64.8423906,13.2161538 68.4628809,15.5005439 L76.8618891,8.97963811 L87.0203619,19.1381109 L80.4994561,27.5371191 C82.7838462,31.1576094 84.4799673,35.1864135 85.4535929,39.4893048 L96,40.816875 L96,55.183125 L85.4535929,56.5106952 C84.4799673,60.8135865 82.7838462,64.8423906 80.4994561,68.4628809 L87.0203619,76.8618891 L76.8618891,87.0203619 L68.4628809,80.4994561 C64.8423906,82.7838462 60.8135865,84.4799673 56.5106952,85.4535929 L55.183125,96 L40.816875,96 L39.4893048,85.4535929 C35.1864135,84.4799673 31.1576094,82.7838462 27.5371191,80.4994561 L19.1381109,87.0203619 L8.97963811,76.8618891 L15.5005439,68.4628809 C13.2161538,64.8423906 11.5200327,60.8135865 10.5464071,56.5106952 L0,55.183125 L0,40.816875 L10.5464071,39.4893048 C11.5200327,35.1864135 13.2161538,31.1576094 15.5005439,27.5371191 L8.97963811,19.1381109 L19.1381109,8.97963811 L27.5371191,15.5005439 C31.1576094,13.2161538 35.1864135,11.5200327 39.4893048,10.5464071 L40.816875,0 L55.183125,0 L56.5106952,10.5464071 Z`,id:`Layer-1`}),(0,n.jsx)(`circle`,{cx:`48`,cy:`48`,r:`14.4`})]})})}),label:`Rotate Z`,name:`rotatez`,placeholder:`0deg`,step:45,unit:`deg`,value:`90deg`}},s={args:{cssValueType:`percent`,label:`Width`,min:0,name:`width`,placeholder:`100%`,step:10,unit:`%`,value:`30%`}},c={args:{className:`my-special-input`,cssValueType:`length`,name:`labelless`,placeholder:`1rem`,title:`No label`,unit:`rem`,value:`24px`}},l={args:{className:`letter-spacing`,getValueAsNumber:e=>typeof e==`number`?e:typeof e==`string`&&e.toLowerCase()===`normal`?0:parseFloat(e),label:`Letter spacing`,name:`letterspacing`,placeholder:`normal`,tabIndex:2}},u={args:{className:`background-size`,label:`Background Size`,name:`backgroundsize`,unit:`%`,validator:/^(auto|contain|cover)$/,value:`cover`}},d={args:{cssValueType:`integer`,label:`z-index`,name:`zindex`,value:`0`}},f={args:{cssValueType:`integer`,label:`opacity`,name:`opacity`,value:`0`}},p={args:{cssValueType:`length`,label:`line height`,name:`line-height`,step:.1,unit:``,value:`1.4`}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
2
+ args: {
3
+ className: 'my-special-input',
4
+ cssValueType: 'length',
5
+ label: 'Font size',
6
+ name: 'fontsize',
7
+ placeholder: '1rem',
8
+ tabIndex: 1,
9
+ unit: 'rem',
10
+ validator: /^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|inherit)$/,
11
+ value: '24px'
12
+ }
13
+ }`,...i.parameters?.docs?.source}}},a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
14
+ args: {
15
+ className: 'my-panel-input',
16
+ cssValueType: 'time',
17
+ label: 'Duration',
18
+ max: 20,
19
+ min: 0,
20
+ name: 'duration',
21
+ placeholder: '0.25s',
22
+ step: 0.1,
23
+ unit: 's'
24
+ }
25
+ }`,...a.parameters?.docs?.source}}},o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
26
+ args: {
27
+ className: 'flex-item-example',
28
+ cssValueType: 'angle',
29
+ icon: <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
30
+ <g stroke="none" strokeWidth="1" fill="none">
31
+ <g transform="translate(2, 2)" stroke="#222F3E" strokeWidth="4">
32
+ <path d="M56.5106952,10.5464071 C60.8135865,11.5200327 64.8423906,13.2161538 68.4628809,15.5005439 L76.8618891,8.97963811 L87.0203619,19.1381109 L80.4994561,27.5371191 C82.7838462,31.1576094 84.4799673,35.1864135 85.4535929,39.4893048 L96,40.816875 L96,55.183125 L85.4535929,56.5106952 C84.4799673,60.8135865 82.7838462,64.8423906 80.4994561,68.4628809 L87.0203619,76.8618891 L76.8618891,87.0203619 L68.4628809,80.4994561 C64.8423906,82.7838462 60.8135865,84.4799673 56.5106952,85.4535929 L55.183125,96 L40.816875,96 L39.4893048,85.4535929 C35.1864135,84.4799673 31.1576094,82.7838462 27.5371191,80.4994561 L19.1381109,87.0203619 L8.97963811,76.8618891 L15.5005439,68.4628809 C13.2161538,64.8423906 11.5200327,60.8135865 10.5464071,56.5106952 L0,55.183125 L0,40.816875 L10.5464071,39.4893048 C11.5200327,35.1864135 13.2161538,31.1576094 15.5005439,27.5371191 L8.97963811,19.1381109 L19.1381109,8.97963811 L27.5371191,15.5005439 C31.1576094,13.2161538 35.1864135,11.5200327 39.4893048,10.5464071 L40.816875,0 L55.183125,0 L56.5106952,10.5464071 Z" id="Layer-1"></path>
33
+ <circle cx="48" cy="48" r="14.4"></circle>
34
+ </g>
35
+ </g>
36
+ </svg>,
37
+ label: 'Rotate Z',
38
+ name: 'rotatez',
39
+ placeholder: '0deg',
40
+ step: 45,
41
+ unit: 'deg',
42
+ value: '90deg'
43
+ }
44
+ }`,...o.parameters?.docs?.source}}},s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
45
+ args: {
46
+ cssValueType: 'percent',
47
+ label: 'Width',
48
+ min: 0,
49
+ name: 'width',
50
+ placeholder: '100%',
51
+ step: 10,
52
+ unit: '%',
53
+ value: '30%'
54
+ }
55
+ }`,...s.parameters?.docs?.source}}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
56
+ args: {
57
+ className: 'my-special-input',
58
+ cssValueType: 'length',
59
+ name: 'labelless',
60
+ placeholder: '1rem',
61
+ title: 'No label',
62
+ unit: 'rem',
63
+ value: '24px'
64
+ }
65
+ }`,...c.parameters?.docs?.source}}},l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
66
+ args: {
67
+ className: 'letter-spacing',
68
+ getValueAsNumber: (value: number | string) => {
69
+ if (typeof value === 'number') return value;
70
+ // “normal” for letter-spacing is effectively equivalent to 0
71
+ if (typeof value === 'string' && value.toLowerCase() === 'normal') {
72
+ return 0;
73
+ }
74
+ return parseFloat(value);
75
+ },
76
+ label: 'Letter spacing',
77
+ name: 'letterspacing',
78
+ placeholder: 'normal',
79
+ tabIndex: 2
80
+ }
81
+ }`,...l.parameters?.docs?.source}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
82
+ args: {
83
+ className: 'background-size',
84
+ label: 'Background Size',
85
+ name: 'backgroundsize',
86
+ unit: '%',
87
+ validator: /^(auto|contain|cover)$/,
88
+ value: 'cover'
89
+ }
90
+ }`,...u.parameters?.docs?.source}}},d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
91
+ args: {
92
+ cssValueType: 'integer',
93
+ label: 'z-index',
94
+ name: 'zindex',
95
+ value: '0'
96
+ }
97
+ }`,...d.parameters?.docs?.source}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
98
+ args: {
99
+ cssValueType: 'integer',
100
+ label: 'opacity',
101
+ name: 'opacity',
102
+ value: '0'
103
+ }
104
+ }`,...f.parameters?.docs?.source}}},p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
105
+ args: {
106
+ cssValueType: 'length',
107
+ label: 'line height',
108
+ name: 'line-height',
109
+ step: 0.1,
110
+ unit: '',
111
+ value: '1.4'
112
+ }
113
+ }`,...p.parameters?.docs?.source}}};const m=[`Length`,`Time`,`Angle`,`Percent`,`LabelLess`,`CustomGetValueAsNumber`,`BackgroundSize`,`ZIndex`,`NumberValue`,`LineHeight`];export{o as Angle,u as BackgroundSize,l as CustomGetValueAsNumber,c as LabelLess,i as Length,p as LineHeight,f as NumberValue,s as Percent,a as Time,d as ZIndex,m as __namedExportsOrder,r as default};
@@ -0,0 +1 @@
1
+ import{E as e,n as t,r as n,t as r}from"./iframe-BsC6HWDY.js";import{c as i,h as a}from"./dist-6e4YoSiG.js";import{s as o}from"./theming-DLDZLcJn.js";import"./react-dom-CFVoDXTy.js";import"./jsx-runtime-CZwoFFIL.js";import{a as s,t as c,u as l}from"./components-CuDS54ZU.js";var u=e(n(),1),d=r({"../../../node_modules/color-name/index.js"(e,t){t.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]}}}),f=r({"../../../node_modules/color-convert/conversions.js"(e,t){var n=d(),r={};for(let e of Object.keys(n))r[n[e]]=e;var i={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`]}};t.exports=i;for(let e of Object.keys(i)){if(!(`channels`in i[e]))throw Error(`missing channels property: `+e);if(!(`labels`in i[e]))throw Error(`missing channel labels property: `+e);if(i[e].labels.length!==i[e].channels)throw Error(`channel and label counts mismatch: `+e);let{channels:t,labels:n}=i[e];delete i[e].channels,delete i[e].labels,Object.defineProperty(i[e],`channels`,{value:t}),Object.defineProperty(i[e],`labels`,{value:n})}i.rgb.hsl=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(t,n,r),a=Math.max(t,n,r),o=a-i,s,c;a===i?s=0:t===a?s=(n-r)/o:n===a?s=2+(r-t)/o:r===a&&(s=4+(t-n)/o),s=Math.min(s*60,360),s<0&&(s+=360);let l=(i+a)/2;return c=a===i?0:l<=.5?o/(a+i):o/(2-a-i),[s,c*100,l*100]},i.rgb.hsv=function(e){let t,n,r,i,a,o=e[0]/255,s=e[1]/255,c=e[2]/255,l=Math.max(o,s,c),u=l-Math.min(o,s,c),d=function(e){return(l-e)/6/u+1/2};return u===0?(i=0,a=0):(a=u/l,t=d(o),n=d(s),r=d(c),o===l?i=r-n:s===l?i=1/3+t-r:c===l&&(i=2/3+n-t),i<0?i+=1:i>1&&--i),[i*360,a*100,l*100]},i.rgb.hwb=function(e){let t=e[0],n=e[1],r=e[2],a=i.rgb.hsl(e)[0],o=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[a,o*100,r*100]},i.rgb.cmyk=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.min(1-t,1-n,1-r),a=(1-t-i)/(1-i)||0,o=(1-n-i)/(1-i)||0,s=(1-r-i)/(1-i)||0;return[a*100,o*100,s*100,i*100]};function a(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}i.rgb.keyword=function(e){let t=r[e];if(t)return t;let i=1/0,o;for(let t of Object.keys(n)){let r=n[t],s=a(e,r);s<i&&(i=s,o=t)}return o},i.keyword.rgb=function(e){return n[e]},i.rgb.xyz=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255;t=t>.04045?((t+.055)/1.055)**2.4:t/12.92,n=n>.04045?((n+.055)/1.055)**2.4:n/12.92,r=r>.04045?((r+.055)/1.055)**2.4:r/12.92;let i=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,o=t*.0193+n*.1192+r*.9505;return[i*100,a*100,o*100]},i.rgb.lab=function(e){let t=i.rgb.xyz(e),n=t[0],r=t[1],a=t[2];return n/=95.047,r/=100,a/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,a=a>.008856?a**(1/3):7.787*a+16/116,[116*r-16,500*(n-r),200*(r-a)]},i.hsl.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i,a,o;if(n===0)return o=r*255,[o,o,o];i=r<.5?r*(1+n):r+n-r*n;let s=2*r-i,c=[0,0,0];for(let e=0;e<3;e++)a=t+1/3*-(e-1),a<0&&a++,a>1&&a--,o=6*a<1?s+(i-s)*6*a:2*a<1?i:3*a<2?s+(i-s)*(2/3-a)*6:s,c[e]=o*255;return c},i.hsl.hsv=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=n,a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,i*=a<=1?a:2-a;let o=(r+n)/2;return[t,(r===0?2*i/(a+i):2*n/(r+n))*100,o*100]},i.hsv.rgb=function(e){let t=e[0]/60,n=e[1]/100,r=e[2]/100,i=Math.floor(t)%6,a=t-Math.floor(t),o=255*r*(1-n),s=255*r*(1-n*a),c=255*r*(1-n*(1-a));switch(r*=255,i){case 0:return[r,c,o];case 1:return[s,r,o];case 2:return[o,r,c];case 3:return[o,s,r];case 4:return[c,o,r];case 5:return[r,o,s]}},i.hsv.hsl=function(e){let t=e[0],n=e[1]/100,r=e[2]/100,i=Math.max(r,.01),a,o;o=(2-n)*r;let s=(2-n)*i;return a=n*i,a/=s<=1?s:2-s,a||=0,o/=2,[t,a*100,o*100]},i.hwb.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100,i=n+r,a;i>1&&(n/=i,r/=i);let o=Math.floor(6*t),s=1-r;a=6*t-o,o&1&&(a=1-a);let c=n+a*(s-n),l,u,d;switch(o){default:case 6:case 0:l=s,u=c,d=n;break;case 1:l=c,u=s,d=n;break;case 2:l=n,u=s,d=c;break;case 3:l=n,u=c,d=s;break;case 4:l=c,u=n,d=s;break;case 5:l=s,u=n,d=c;break}return[l*255,u*255,d*255]},i.cmyk.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i=e[3]/100,a=1-Math.min(1,t*(1-i)+i),o=1-Math.min(1,n*(1-i)+i),s=1-Math.min(1,r*(1-i)+i);return[a*255,o*255,s*255]},i.xyz.rgb=function(e){let t=e[0]/100,n=e[1]/100,r=e[2]/100,i,a,o;return i=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,o=t*.0557+n*-.204+r*1.057,i=i>.0031308?1.055*i**(1/2.4)-.055:i*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,i=Math.min(Math.max(0,i),1),a=Math.min(Math.max(0,a),1),o=Math.min(Math.max(0,o),1),[i*255,a*255,o*255]},i.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];return t/=95.047,n/=100,r/=108.883,t=t>.008856?t**(1/3):7.787*t+16/116,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,[116*n-16,500*(t-n),200*(n-r)]},i.lab.xyz=function(e){let t=e[0],n=e[1],r=e[2],i,a,o;a=(t+16)/116,i=n/500+a,o=a-r/200;let s=a**3,c=i**3,l=o**3;return a=s>.008856?s:(a-16/116)/7.787,i=c>.008856?c:(i-16/116)/7.787,o=l>.008856?l:(o-16/116)/7.787,i*=95.047,a*=100,o*=108.883,[i,a,o]},i.lab.lch=function(e){let t=e[0],n=e[1],r=e[2],i;return i=Math.atan2(r,n)*360/2/Math.PI,i<0&&(i+=360),[t,Math.sqrt(n*n+r*r),i]},i.lch.lab=function(e){let t=e[0],n=e[1],r=e[2]/360*2*Math.PI;return[t,n*Math.cos(r),n*Math.sin(r)]},i.rgb.ansi16=function(e,t=null){let[n,r,a]=e,o=t===null?i.rgb.hsv(e)[2]:t;if(o=Math.round(o/50),o===0)return 30;let s=30+(Math.round(a/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return o===2&&(s+=60),s},i.hsv.ansi16=function(e){return i.rgb.ansi16(i.hsv.rgb(e),e[2])},i.rgb.ansi256=function(e){let t=e[0],n=e[1],r=e[2];return t===n&&n===r?t<8?16:t>248?231:Math.round((t-8)/247*24)+232:16+36*Math.round(t/255*5)+6*Math.round(n/255*5)+Math.round(r/255*5)},i.ansi16.rgb=function(e){let t=e%10;if(t===0||t===7)return e>50&&(t+=3.5),t=t/10.5*255,[t,t,t];let n=(~~(e>50)+1)*.5;return[(t&1)*n*255,(t>>1&1)*n*255,(t>>2&1)*n*255]},i.ansi256.rgb=function(e){if(e>=232){let t=(e-232)*10+8;return[t,t,t]}e-=16;let t;return[Math.floor(e/36)/5*255,Math.floor((t=e%36)/6)/5*255,t%6/5*255]},i.rgb.hex=function(e){let t=(((Math.round(e[0])&255)<<16)+((Math.round(e[1])&255)<<8)+(Math.round(e[2])&255)).toString(16).toUpperCase();return`000000`.substring(t.length)+t},i.hex.rgb=function(e){let t=e.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);if(!t)return[0,0,0];let n=t[0];t[0].length===3&&(n=n.split(``).map(e=>e+e).join(``));let r=parseInt(n,16);return[r>>16&255,r>>8&255,r&255]},i.rgb.hcg=function(e){let t=e[0]/255,n=e[1]/255,r=e[2]/255,i=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),o=i-a,s,c;return s=o<1?a/(1-o):0,c=o<=0?0:i===t?(n-r)/o%6:i===n?2+(r-t)/o:4+(t-n)/o,c/=6,c%=1,[c*360,o*100,s*100]},i.hsl.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n),i=0;return r<1&&(i=(n-.5*r)/(1-r)),[e[0],r*100,i*100]},i.hsv.hcg=function(e){let t=e[1]/100,n=e[2]/100,r=t*n,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.hcg.rgb=function(e){let t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];let i=[0,0,0],a=t%1*6,o=a%1,s=1-o,c=0;switch(Math.floor(a)){case 0:i[0]=1,i[1]=o,i[2]=0;break;case 1:i[0]=s,i[1]=1,i[2]=0;break;case 2:i[0]=0,i[1]=1,i[2]=o;break;case 3:i[0]=0,i[1]=s,i[2]=1;break;case 4:i[0]=o,i[1]=0,i[2]=1;break;default:i[0]=1,i[1]=0,i[2]=s}return c=(1-n)*r,[(n*i[0]+c)*255,(n*i[1]+c)*255,(n*i[2]+c)*255]},i.hcg.hsv=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t),r=0;return n>0&&(r=t/n),[e[0],r*100,n*100]},i.hcg.hsl=function(e){let t=e[1]/100,n=e[2]/100*(1-t)+.5*t,r=0;return n>0&&n<.5?r=t/(2*n):n>=.5&&n<1&&(r=t/(2*(1-n))),[e[0],r*100,n*100]},i.hcg.hwb=function(e){let t=e[1]/100,n=t+e[2]/100*(1-t);return[e[0],(n-t)*100,(1-n)*100]},i.hwb.hcg=function(e){let t=e[1]/100,n=1-e[2]/100,r=n-t,i=0;return r<1&&(i=(n-r)/(1-r)),[e[0],r*100,i*100]},i.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]},i.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]},i.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]},i.gray.hsl=function(e){return[0,0,e[0]]},i.gray.hsv=i.gray.hsl,i.gray.hwb=function(e){return[0,100,e[0]]},i.gray.cmyk=function(e){return[0,0,0,e[0]]},i.gray.lab=function(e){return[e[0],0,0]},i.gray.hex=function(e){let t=Math.round(e[0]/100*255)&255,n=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return`000000`.substring(n.length)+n},i.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]}}}),p=r({"../../../node_modules/color-convert/route.js"(e,t){var n=f();function r(){let e={},t=Object.keys(n);for(let n=t.length,r=0;r<n;r++)e[t[r]]={distance:-1,parent:null};return e}function i(e){let t=r(),i=[e];for(t[e].distance=0;i.length;){let e=i.pop(),r=Object.keys(n[e]);for(let n=r.length,a=0;a<n;a++){let n=r[a],o=t[n];o.distance===-1&&(o.distance=t[e].distance+1,o.parent=e,i.unshift(n))}}return t}function a(e,t){return function(n){return t(e(n))}}function o(e,t){let r=[t[e].parent,e],i=n[t[e].parent][e],o=t[e].parent;for(;t[o].parent;)r.unshift(t[o].parent),i=a(n[t[o].parent][o],i),o=t[o].parent;return i.conversion=r,i}t.exports=function(e){let t=i(e),n={},r=Object.keys(t);for(let e=r.length,i=0;i<e;i++){let e=r[i];t[e].parent!==null&&(n[e]=o(e,t))}return n}}}),m=t(r({"../../../node_modules/color-convert/index.js"(e,t){var n=f(),r=p(),i={},a=Object.keys(n);function o(e){let t=function(...t){let n=t[0];return n==null?n:(n.length>1&&(t=n),e(t))};return`conversion`in e&&(t.conversion=e.conversion),t}function s(e){let t=function(...t){let n=t[0];if(n==null)return n;n.length>1&&(t=n);let r=e(t);if(typeof r==`object`)for(let e=r.length,t=0;t<e;t++)r[t]=Math.round(r[t]);return r};return`conversion`in e&&(t.conversion=e.conversion),t}a.forEach(e=>{i[e]={},Object.defineProperty(i[e],`channels`,{value:n[e].channels}),Object.defineProperty(i[e],`labels`,{value:n[e].labels});let t=r(e);Object.keys(t).forEach(n=>{let r=t[n];i[e][n]=s(r),i[e][n].raw=o(r)})}),t.exports=i}})(),1);function h(e,t,{signal:n,edges:r}={}){let i,a=null,o=r!=null&&r.includes(`leading`),s=r==null||r.includes(`trailing`),c=()=>{a!==null&&(e.apply(i,a),i=void 0,a=null)},l=()=>{s&&c(),p()},u=null,d=()=>{u!=null&&clearTimeout(u),u=setTimeout(()=>{u=null,l()},t)},f=()=>{u!==null&&(clearTimeout(u),u=null)},p=()=>{f(),i=void 0,a=null},m=()=>{c()},h=function(...e){if(n?.aborted)return;i=this,a=e;let t=u==null;d(),o&&t&&c()};return h.schedule=d,h.cancel=p,h.flush=m,n?.addEventListener(`abort`,p,{once:!0}),h}function g(e,...t){return _(e,v,...t)}function _(e,t,...n){let r=function(...r){let i=0,a=n.slice().map(e=>e===t?r[i++]:e),o=r.slice(i);return e.apply(this,a.concat(o))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}var v=Symbol(`partial.placeholder`);g.placeholder=v;function y(e,...t){return b(e,x,...t)}function b(e,t,...n){let r=function(...r){let i=n.filter(e=>e===t).length,a=Math.max(r.length-i,0),o=r.slice(0,a),s=a,c=n.slice().map(e=>e===t?r[s++]:e);return e.apply(this,o.concat(c))};return e.prototype&&(r.prototype=Object.create(e.prototype)),r}var x=Symbol(`partialRight.placeholder`);y.placeholder=x;function S(){return(S=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function C(e,t){if(e==null)return{};var n,r,i={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(i[n]=e[n]);return i}function w(e){var t=(0,u.useRef)(e),n=(0,u.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var T=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e<t?t:e},E=function(e){return`touches`in e},D=function(e){return e&&e.ownerDocument.defaultView||self},ee=function(e,t,n){var r=e.getBoundingClientRect(),i=E(t)?(function(e,t){for(var n=0;n<e.length;n++)if(e[n].identifier===t)return e[n];return e[0]})(t.touches,n):t;return{left:T((i.pageX-(r.left+D(e).pageXOffset))/r.width),top:T((i.pageY-(r.top+D(e).pageYOffset))/r.height)}},O=function(e){!E(e)&&e.preventDefault()},k=u.memo(function(e){var t=e.onMove,n=e.onKey,r=C(e,[`onMove`,`onKey`]),i=(0,u.useRef)(null),a=w(t),o=w(n),s=(0,u.useRef)(null),c=(0,u.useRef)(!1),l=(0,u.useMemo)(function(){var e=function(e){O(e),(E(e)?e.touches.length>0:e.buttons>0)&&i.current?a(ee(i.current,e,s.current)):n(!1)},t=function(){return n(!1)};function n(n){var r=c.current,a=D(i.current),o=n?a.addEventListener:a.removeEventListener;o(r?`touchmove`:`mousemove`,e),o(r?`touchend`:`mouseup`,t)}return[function(e){var t=e.nativeEvent,r=i.current;if(r&&(O(t),!(function(e,t){return t&&!E(e)})(t,c.current)&&r)){if(E(t)){c.current=!0;var o=t.changedTouches||[];o.length&&(s.current=o[0].identifier)}r.focus(),a(ee(r,t,s.current)),n(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),o({left:t===39?.05:t===37?-.05:0,top:t===40?.05:t===38?-.05:0}))},n]},[o,a]),d=l[0],f=l[1],p=l[2];return(0,u.useEffect)(function(){return p},[p]),u.createElement(`div`,S({},r,{onTouchStart:d,onMouseDown:d,className:`react-colorful__interactive`,ref:i,onKeyDown:f,tabIndex:0,role:`slider`}))}),A=function(e){return e.filter(Boolean).join(` `)},j=function(e){var t=e.color,n=e.left,r=e.top,i=r===void 0?.5:r,a=A([`react-colorful__pointer`,e.className]);return u.createElement(`div`,{className:a,style:{top:100*i+`%`,left:100*n+`%`}},u.createElement(`div`,{className:`react-colorful__pointer-fill`,style:{backgroundColor:t}}))},M=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=10**t),Math.round(n*e)/n},te={grad:.9,turn:360,rad:360/(2*Math.PI)},ne=function(e){return R(N(e))},N=function(e){return e[0]===`#`&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:e.length===4?M(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:e.length===8?M(parseInt(e.substring(6,8),16)/255,2):1}},re=function(e,t){return t===void 0&&(t=`deg`),Number(e)*(te[t]||1)},ie=function(e){var t=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?ae({h:re(t[1],t[2]),s:Number(t[3]),l:Number(t[4]),a:t[5]===void 0?1:Number(t[5])/(t[6]?100:1)}):{h:0,s:0,v:0,a:1}},ae=function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t,a:e.a}},oe=function(e){return le(I(e))},se=function(e){var t=e.s,n=e.v,r=e.a,i=(200-t)*n/100;return{h:M(e.h),s:M(i>0&&i<200?t*n/100/(i<=100?i:200-i)*100:0),l:M(i/2),a:M(r,2)}},P=function(e){var t=se(e);return`hsl(`+t.h+`, `+t.s+`%, `+t.l+`%)`},F=function(e){var t=se(e);return`hsla(`+t.h+`, `+t.s+`%, `+t.l+`%, `+t.a+`)`},I=function(e){var t=e.h,n=e.s,r=e.v,i=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),o=r*(1-n),s=r*(1-(t-a)*n),c=r*(1-(1-t+a)*n),l=a%6;return{r:M(255*[r,s,o,o,c,r][l]),g:M(255*[c,r,r,s,o,o][l]),b:M(255*[o,o,c,r,r,s][l]),a:M(i,2)}},ce=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?R({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:t[7]===void 0?1:Number(t[7])/(t[8]?100:1)}):{h:0,s:0,v:0,a:1}},L=function(e){var t=e.toString(16);return t.length<2?`0`+t:t},le=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=i<1?L(M(255*i)):``;return`#`+L(t)+L(n)+L(r)+a},R=function(e){var t=e.r,n=e.g,r=e.b,i=e.a,a=Math.max(t,n,r),o=a-Math.min(t,n,r),s=o?a===t?(n-r)/o:a===n?2+(r-t)/o:4+(t-n)/o:0;return{h:M(60*(s<0?s+6:s)),s:M(a?o/a*100:0),v:M(a/255*100),a:i}},z=u.memo(function(e){var t=e.hue,n=e.onChange,r=A([`react-colorful__hue`,e.className]);return u.createElement(`div`,{className:r},u.createElement(k,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:T(t+360*e.left,0,360)})},"aria-label":`Hue`,"aria-valuenow":M(t),"aria-valuemax":`360`,"aria-valuemin":`0`},u.createElement(j,{className:`react-colorful__hue-pointer`,left:t/360,color:P({h:t,s:100,v:100,a:1})})))}),B=u.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:P({h:t.h,s:100,v:100,a:1})};return u.createElement(`div`,{className:`react-colorful__saturation`,style:r},u.createElement(k,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:T(t.s+100*e.left,0,100),v:T(t.v-100*e.top,0,100)})},"aria-label":`Color`,"aria-valuetext":`Saturation `+M(t.s)+`%, Brightness `+M(t.v)+`%`},u.createElement(j,{className:`react-colorful__saturation-pointer`,top:1-t.v/100,left:t.s/100,color:P(t)})))}),V=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},H=function(e,t){return e.replace(/\s/g,``)===t.replace(/\s/g,``)},ue=function(e,t){return e.toLowerCase()===t.toLowerCase()||V(N(e),N(t))};function U(e,t,n){var r=w(n),i=(0,u.useState)(function(){return e.toHsva(t)}),a=i[0],o=i[1],s=(0,u.useRef)({color:t,hsva:a});return(0,u.useEffect)(function(){if(!e.equal(t,s.current.color)){var n=e.toHsva(t);s.current={hsva:n,color:t},o(n)}},[t,e]),(0,u.useEffect)(function(){var t;V(a,s.current.hsva)||e.equal(t=e.fromHsva(a),s.current.color)||(s.current={hsva:a,color:t},r(t))},[a,e,r]),[a,(0,u.useCallback)(function(e){o(function(t){return Object.assign({},t,e)})},[])]}var de,fe=typeof window<`u`?u.useLayoutEffect:u.useEffect,pe=function(){return de||(typeof __webpack_nonce__<`u`?__webpack_nonce__:void 0)},W=new Map,G=function(e){fe(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!W.has(t)){var n=t.createElement(`style`);n.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(t,n);var r=pe();r&&n.setAttribute(`nonce`,r),t.head.appendChild(n)}},[])},me=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=C(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,u.useRef)(null);G(s);var c=U(n,i,a),l=c[0],d=c[1],f=A([`react-colorful`,t]);return u.createElement(`div`,S({},o,{ref:s,className:f}),u.createElement(B,{hsva:l,onChange:d}),u.createElement(z,{hue:l.h,onChange:d,className:`react-colorful__last-control`}))},he={defaultColor:`000`,toHsva:ne,fromHsva:function(e){return oe({h:e.h,s:e.s,v:e.v,a:1})},equal:ue},ge=function(e){return u.createElement(me,S({},e,{colorModel:he}))},_e=function(e){var t=e.className,n=e.hsva,r=e.onChange,i={backgroundImage:`linear-gradient(90deg, `+F(Object.assign({},n,{a:0}))+`, `+F(Object.assign({},n,{a:1}))+`)`},a=A([`react-colorful__alpha`,t]),o=M(100*n.a);return u.createElement(`div`,{className:a},u.createElement(`div`,{className:`react-colorful__alpha-gradient`,style:i}),u.createElement(k,{onMove:function(e){r({a:e.left})},onKey:function(e){r({a:T(n.a+e.left)})},"aria-label":`Alpha`,"aria-valuetext":o+`%`,"aria-valuenow":o,"aria-valuemin":`0`,"aria-valuemax":`100`},u.createElement(j,{className:`react-colorful__alpha-pointer`,left:n.a,color:F(n)})))},K=function(e){var t=e.className,n=e.colorModel,r=e.color,i=r===void 0?n.defaultColor:r,a=e.onChange,o=C(e,[`className`,`colorModel`,`color`,`onChange`]),s=(0,u.useRef)(null);G(s);var c=U(n,i,a),l=c[0],d=c[1],f=A([`react-colorful`,t]);return u.createElement(`div`,S({},o,{ref:s,className:f}),u.createElement(B,{hsva:l,onChange:d}),u.createElement(z,{hue:l.h,onChange:d}),u.createElement(_e,{hsva:l,onChange:d,className:`react-colorful__last-control`}))},ve={defaultColor:`hsla(0, 0%, 0%, 1)`,toHsva:ie,fromHsva:F,equal:H},ye=function(e){return u.createElement(K,S({},e,{colorModel:ve}))},be={defaultColor:`rgba(0, 0, 0, 1)`,toHsva:ce,fromHsva:function(e){var t=I(e);return`rgba(`+t.r+`, `+t.g+`, `+t.b+`, `+t.a+`)`},equal:H},xe=function(e){return u.createElement(K,S({},e,{colorModel:be}))},Se=o.div({position:`relative`,maxWidth:250}),Ce=o.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=o.div({display:`grid`,gridTemplateColumns:`repeat(9, 16px)`,gap:6,padding:3,marginTop:5,width:200}),Te=e=>`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="${e?`white`:`black`}"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,q=o(c)(({value:e,selected:t,theme:n})=>({width:16,height:16,boxShadow:t?`${n.appBorderColor} 0 0 0 1px inset, ${n.textMutedColor}50 0 0 0 4px`:`${n.appBorderColor} 0 0 0 1px inset`,border:`none`,borderRadius:n.appBorderRadius,"&, &:hover":{background:`unset`,backgroundColor:`unset`,backgroundImage:`linear-gradient(${e}, ${e}), ${Te(n.base===`dark`)}`}})),Ee=o(s.Input)(({theme:e})=>({width:`100%`,paddingLeft:30,paddingRight:30,boxSizing:`border-box`,fontFamily:e.typography.fonts.base,'[aria-readonly="true"] > &':{background:e.base===`light`?e.color.lighter:`transparent`}})),De=o(q)(({disabled:e})=>({position:`absolute`,top:4,left:4,zIndex:1,cursor:e?`not-allowed`:`pointer`})),Oe=o(c)(({theme:e})=>({position:`absolute`,zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:`border-box`,cursor:`pointer`,color:e.input.color})),J=(e=>(e.RGB=`rgb`,e.HSL=`hsl`,e.HEX=`hex`,e))(J||{}),Y=Object.values(J),ke=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Ae=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,je=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,X=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Me=/^\s*#?([0-9a-f]{3})\s*$/i,Ne={hex:ge,rgb:xe,hsl:ye},Z={hex:`transparent`,rgb:`rgba(0, 0, 0, 0)`,hsl:`hsla(0, 0%, 0%, 0)`},Pe=e=>{let t=e?.match(ke);if(!t)return[0,0,0,1];let[,n,r,i,a=1]=t;return[n,r,i,a].map(Number)},Fe=e=>{let[t,n,r,i]=Pe(e),[a,o,s]=m.default.rgb.hsl([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:m.default.rgb.keyword([t,n,r]),colorSpace:`rgb`,rgb:e,hsl:`hsla(${a}, ${o}%, ${s}%, ${i})`,hex:`#${m.default.rgb.hex([t,n,r]).toLowerCase()}`}},Ie=e=>{let[t,n,r,i]=Pe(e),[a,o,s]=m.default.hsl.rgb([t,n,r])||[0,0,0];return{valid:!0,value:e,keyword:m.default.hsl.keyword([t,n,r]),colorSpace:`hsl`,rgb:`rgba(${a}, ${o}, ${s}, ${i})`,hsl:e,hex:`#${m.default.hsl.hex([t,n,r]).toLowerCase()}`}},Le=e=>{let t=e.replace(`#`,``),n=m.default.keyword.rgb(t)||m.default.hex.rgb(t),r=m.default.rgb.hsl(n),i=e;/[^#a-f0-9]/i.test(e)?i=t:X.test(e)&&(i=`#${t}`);let a=!0;if(i.startsWith(`#`))a=X.test(i);else try{m.default.keyword.hex(i)}catch{a=!1}return{valid:a,value:i,keyword:m.default.rgb.keyword(n),colorSpace:`hex`,rgb:`rgba(${n[0]}, ${n[1]}, ${n[2]}, 1)`,hsl:`hsla(${r[0]}, ${r[1]}%, ${r[2]}%, 1)`,hex:i}},Q=e=>{if(e)return Ae.test(e)?Fe(e):je.test(e)?Ie(e):Le(e)},Re=(e,t,n)=>{if(!e||!t?.valid)return Z[n];if(n!==`hex`)return t?.[n]||Z[n];if(!t.hex.startsWith(`#`))try{return`#${m.default.keyword.hex(t.hex)}`}catch{return Z.hex}let r=t.hex.match(Me);if(!r)return X.test(t.hex)?t.hex:Z.hex;let[i,a,o]=r[1].split(``);return`#${i}${i}${a}${a}${o}${o}`},ze=(e,t)=>{let[n,r]=(0,u.useState)(e||``),[i,a]=(0,u.useState)(()=>Q(n)),[o,s]=(0,u.useState)(i?.colorSpace||`hex`);return(0,u.useEffect)(()=>{let t=e||``,n=Q(t);r(t),a(n),s(n?.colorSpace||`hex`)},[e]),{value:n,realValue:(0,u.useMemo)(()=>Re(n,i,o).toLowerCase(),[n,i,o]),updateValue:(0,u.useCallback)(e=>{let n=Q(e),i=n?.value||e||``;r(i),i===``&&(a(void 0),t(void 0)),n&&(a(n),s(n.colorSpace),t(n.value))},[t]),color:i,colorSpace:o,cycleColorSpace:(0,u.useCallback)(()=>{let e=Y[(Y.indexOf(o)+1)%Y.length];s(e);let n=i?.[e]||``;r(n),t(n)},[i,o,t])}},$=e=>e.replace(/\s*/,``).toLowerCase(),Be=(e,t,n)=>{let[r,i]=(0,u.useState)(t?.valid?[t]:[]);(0,u.useEffect)(()=>{t===void 0&&i([])},[t]);let a=(0,u.useMemo)(()=>(e||[]).map(e=>typeof e==`string`?Q(e):e.title?{...Q(e.color),keyword:e.title}:Q(e.color)).concat(r).filter(Boolean).slice(-27),[e,r]);return{presets:a,addPreset:(0,u.useCallback)(e=>{e?.valid&&(a.some(t=>t&&t[n]&&$(t[n]||``)===$(e[n]||``))||i(t=>t.concat(e)))},[n,a])}},Ve=({name:e,value:t,onChange:n,onFocus:r,onBlur:o,presetColors:s,startOpen:c=!1,argType:d})=>{let{value:f,realValue:p,updateValue:m,color:g,colorSpace:_,cycleColorSpace:v}=ze(t,(0,u.useCallback)(h(n,200),[n])),{presets:y,addPreset:b}=Be(s??[],g,_),x=Ne[_],S=!!d?.table?.readonly,C=a(e);return u.createElement(Se,null,u.createElement(`label`,{htmlFor:C,className:`sb-sr-only`},e),u.createElement(Ee,{id:C,value:f,onChange:e=>m(e.target.value),onFocus:e=>e.target.select(),readOnly:S,placeholder:`Choose color...`}),u.createElement(l,{defaultVisible:c,visible:S?!1:void 0,onVisibleChange:()=>g&&b(g),popover:u.createElement(Ce,null,u.createElement(x,{color:p===`transparent`?`#000000`:p,onChange:m,onFocus:r,onBlur:o}),y.length>0&&u.createElement(we,null,y.map((e,t)=>u.createElement(q,{key:`${e?.value||t}-${t}`,variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Pick this color`,tooltip:e?.keyword||e?.value||``,value:e?.value||``,selected:!!(g&&e&&e[_]&&$(e[_]||``)===$(g[_])),onClick:()=>e&&m(e.value||``)}))))},u.createElement(De,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Open color picker`,value:p,style:{margin:4},disabled:S})),f?u.createElement(Oe,{variant:`ghost`,padding:`small`,size:`small`,ariaLabel:`Cycle through color spaces`,disabled:S,onClick:S?void 0:v},u.createElement(i,null)):null)},He=Ve;export{Ve as ColorControl,He as default};