@preply/ds-docs 0.100.1 → 1.0.0
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.
- package/dist/assets/{00.applications-SuGhZ2d6.js → 00.applications-CQSwS143.js} +3 -3
- package/dist/assets/{00.favicons.guide-DzTzQGOX.js → 00.favicons.guide-B5VhuzDN.js} +1 -1
- package/dist/assets/{00.token-explorer-YKX25K0Z.js → 00.token-explorer-D52-d6td.js} +1 -1
- package/dist/assets/{00.using-responsive-props-B53R_GrL.js → 00.using-responsive-props-BfY7f1x1.js} +1 -1
- package/dist/assets/{01.semantic-tokens-BRIHpkCy.js → 01.semantic-tokens-CG1v-2wG.js} +1 -1
- package/dist/assets/{10.fonts.guide-CpnQZZLi.js → 10.fonts.guide-CSfRFAZF.js} +1 -1
- package/dist/assets/{10.ssr-Kxsb6CV_.js → 10.ssr-iKr3ztu4.js} +2 -2
- package/dist/assets/{11.languageFont.explorer-Ckz-uF4N.js → 11.languageFont.explorer-CbzOJ5IK.js} +4 -4
- package/dist/assets/{11.ssr.app-router-DC-0dbEn.js → 11.ssr.app-router-s2wtNWNt.js} +1 -1
- package/dist/assets/{20.libraries-CmacBW8t.js → 20.libraries-r7trOO77.js} +1 -1
- package/dist/assets/{30.icons.explorer-CfMFkyQd.js → 30.icons.explorer-Bh0UPMFQ.js} +2 -2
- package/dist/assets/{30.storybook-lO7E7IxU.js → 30.storybook-C2GceniE.js} +7 -3
- package/dist/assets/{40.illustrations.explorer-RiA5UJEs.js → 40.illustrations.explorer-C-DTEZUZ.js} +1 -1
- package/dist/assets/{90.advanced-CQ8Bc0wk.js → 90.advanced-Bsh9fJpy.js} +1 -1
- package/dist/assets/Avatar-BV779HK5.css +1 -0
- package/dist/assets/Avatar-CkEVjZGg.js +6 -0
- package/dist/assets/Avatar-CtBp3Are.css +1 -0
- package/dist/assets/Avatar-wjE18wgf.js +1 -0
- package/dist/assets/{Avatar.stories-HAUC3h0w.js → Avatar.stories-DYxmMq9t.js} +1 -1
- package/dist/assets/AvatarWithStatus-f9H17LD-.css +1 -0
- package/dist/assets/{AvatarWithStatus.stories-BeLSoM6l.js → AvatarWithStatus.stories-B4Qed7F5.js} +4 -4
- package/dist/assets/Badge-C4CfUBO_.css +1 -0
- package/dist/assets/{Badge.stories-YB7vNEb0.js → Badge.stories-BmIuSixc.js} +1 -1
- package/dist/assets/Box-lCJVjGLs.css +1 -0
- package/dist/assets/Box.stories-C1U6RAs1.js +12 -0
- package/dist/assets/{Button-N0VRM6A0.css → Button-CCEL4lDe.css} +1 -1
- package/dist/assets/Button-hx0d4Fw0.js +1 -0
- package/dist/assets/Button.stories-B9QlZfbQ.js +127 -0
- package/dist/assets/Chips-sGKCdMmW.css +1 -0
- package/dist/assets/{Chips.stories-CJsvbrSL.js → Chips.stories-BGXfMuKf.js} +1 -1
- package/dist/assets/{Color-ERTF36HU-x3UpVubc.js → Color-ERTF36HU-DPTAjghN.js} +1 -1
- package/dist/assets/{DocsRenderer-CFRXHY34-D8Tq4G-5.js → DocsRenderer-CFRXHY34-CDQRo9Fu.js} +1 -1
- package/dist/assets/{FieldAdditionalText-DCd07ysy.js → FieldAdditionalText-BoS3oi_w.js} +1 -1
- package/dist/assets/FieldAdditionalText-CZRrM30T.css +1 -0
- package/dist/assets/{FieldAdditionalText.stories-6JjvlIna.js → FieldAdditionalText.stories-b-Yl8cTR.js} +1 -1
- package/dist/assets/{FieldButton-DWzsuKt5.css → FieldButton-BinDyPEe.css} +1 -1
- package/dist/assets/{FieldButton-F9R8bzuR.js → FieldButton-C7ilyHtZ.js} +1 -1
- package/dist/assets/{FieldButton.stories-Dmgk0NRP.js → FieldButton.stories-BblHJhq4.js} +1 -1
- package/dist/assets/FieldLayout-Cnz4ymGS.css +1 -0
- package/dist/assets/FieldLayout-DsdOLmaV.js +1 -0
- package/dist/assets/{FieldLayout.stories-gLIudz9F.js → FieldLayout.stories-DD9NO5r3.js} +1 -1
- package/dist/assets/FieldLayoutBase-CXzegFO5.css +1 -0
- package/dist/assets/{FieldLayoutBase-BAZH_iVk.js → FieldLayoutBase-Df6Ude-W.js} +2 -2
- package/dist/assets/{Heading-C_b1pABg.css → Heading-9L-D4b_z.css} +1 -1
- package/dist/assets/Heading-C40luK_D.js +2 -0
- package/dist/assets/{Heading-o4ElOKlL.css → Heading-C9WOVajU.css} +1 -1
- package/dist/assets/Heading-D-AZG0v4.js +1 -0
- package/dist/assets/{Heading.stories-s72xKv_y.js → Heading.stories-wJ6iUmE9.js} +1 -1
- package/dist/assets/Icon-BcKHAqQd.css +1 -0
- package/dist/assets/Icon-Cn3B7mqs.js +8 -0
- package/dist/assets/Icon-DFfpTv8V.js +1 -0
- package/dist/assets/{Icon-RSC-auOdhCGC.js → Icon-RSC-BGMItX4l.js} +1 -1
- package/dist/assets/{Icon.stories-DrSDJY-K.js → Icon.stories-DkX3szLd.js} +1 -1
- package/dist/assets/{InputText-DEpRpqG2.js → InputText-DYbGFufD.js} +1 -1
- package/dist/assets/{LayoutFlex-BaK05rll.css → LayoutFlex-0Ka3g7cK.css} +1 -1
- package/dist/assets/LayoutFlex-CvJvga_4.css +1 -0
- package/dist/assets/LayoutFlex-DaMkUPaJ.js +1 -0
- package/dist/assets/LayoutFlex-DpaYy_Wf.css +1 -0
- package/dist/assets/LayoutFlex-YVO1KNoK.js +1 -0
- package/dist/assets/LayoutFlex.stories-CcKsp4GP.js +19 -0
- package/dist/assets/LayoutGrid-DjKT1qP4.css +1 -0
- package/dist/assets/LayoutGrid-DnQoHEcf.js +1 -0
- package/dist/assets/LayoutGrid-SpXCETqa.css +1 -0
- package/dist/assets/LayoutGrid.stories-D5NKoT-Z.js +32 -0
- package/dist/assets/LayoutGridItem-B88Bd_ld.css +1 -0
- package/dist/assets/LayoutGridItem-QKsx1EOv.js +1 -0
- package/dist/assets/Link-oQl9RUkp.css +1 -0
- package/dist/assets/{Link.stories-027t2FnU.js → Link.stories-k6aarBWf.js} +20 -13
- package/dist/assets/Loader-C9AFWM0q.css +1 -0
- package/dist/assets/Loader.stories-H4PEvPAK.js +8 -0
- package/dist/assets/{NumberField.stories-BkIJHxVu.js → NumberField.stories-DXrAL_iJ.js} +1 -1
- package/dist/assets/{ObserveIntersection-Cr2BzgPx.js → ObserveIntersection-BQNATzj7.js} +1 -1
- package/dist/assets/ObserveIntersection.stories-6LMtyIGO.js +27 -0
- package/dist/assets/{PasswordField.stories-LShIvEnK.js → PasswordField.stories-C-to4kZf.js} +1 -1
- package/dist/assets/PreplyLogo-CWFbG33k.css +1 -0
- package/dist/assets/{PreplyLogo.stories-D9ffWvsM.js → PreplyLogo.stories-D4zo7fOn.js} +2 -2
- package/dist/assets/RootProvider-CLBjXsMY.js +1 -0
- package/dist/assets/SelectField-Bm2mCPMq.css +1 -0
- package/dist/assets/{SelectField.stories-CGmVU2iA.js → SelectField.stories-aJHxyEsN.js} +1 -1
- package/dist/assets/{ShowOnIntersection.stories-DWk9gluP.js → ShowOnIntersection.stories-Bu7UQKNF.js} +1 -1
- package/dist/assets/Spinner-C9dAh4yO.css +1 -0
- package/dist/assets/{Spinner-DNhrV5BK.js → Spinner-DXNC0i3g.js} +1 -1
- package/dist/assets/{StoryContextDSWeb-CViICLux.js → StoryContextDSWeb-CwCKdulo.js} +1 -1
- package/dist/assets/Text-B7-ttl-t.js +1 -0
- package/dist/assets/{Text-D6vaNiUQ.css → Text-CppB69QI.css} +1 -1
- package/dist/assets/Text-RoftugNM.js +1 -0
- package/dist/assets/Text.stories-D2QLJfT1.js +16 -0
- package/dist/assets/TextField-CwltHVM_.css +1 -0
- package/dist/assets/TextField-Cwr0pxnn.js +1 -0
- package/dist/assets/{TextField.stories-DPLzV9sr.js → TextField.stories-DUo5LLQU.js} +1 -1
- package/dist/assets/TextHighlighted-etaYnV4Y.js +1 -0
- package/dist/assets/TextHighlighted-o7T0QkK3.css +1 -0
- package/dist/assets/{TextHighlighted.stories-DB_R-gDs.js → TextHighlighted.stories-BqJ9iPjF.js} +1 -1
- package/dist/assets/TextInline-33nGjmep.css +1 -0
- package/dist/assets/{TextInline.stories-HT10loYE.js → TextInline.stories-B85Mb57Y.js} +1 -1
- package/dist/assets/{TextareaField.stories-px51-LZi.js → TextareaField.stories-Dvwpg0NA.js} +1 -1
- package/dist/assets/Toast-CacYvSDt.css +1 -0
- package/dist/assets/{Toast.stories-CmTZ3lau.js → Toast.stories-CbeQyWFA.js} +2 -2
- package/dist/assets/align-self-BDyC8hb6.css +1 -0
- package/dist/assets/align-self-oTRF0AIz.js +1 -0
- package/dist/assets/{breakpoints-D9ah2srw.js → breakpoints-B6lLqNjC.js} +1 -1
- package/dist/assets/{breakpoints-Dn5rWbf8.js → breakpoints-CzjEEu4s.js} +1 -1
- package/dist/assets/{breakpoints-BN25rAYx.js → breakpoints-DiXvjTVB.js} +1 -1
- package/dist/assets/{changelog-DGKwXUfP.js → changelog-Dr0p3GMF.js} +125 -108
- package/dist/assets/{chunk-NUUEMKO5-FMRMymcK.js → chunk-NUUEMKO5-B_IYSwMe.js} +1 -1
- package/dist/assets/classNames-DypE0CS3.js +1 -0
- package/dist/assets/{entry-preview-_th98VNw.js → entry-preview-Bp5F4iKw.js} +1 -1
- package/dist/assets/{getTokenVar-DTR7cOAc.js → getTokenVar-CC49GUkX.js} +1 -1
- package/dist/assets/{hover-B59di2Vi.js → hover-BDdMF_J2.js} +1 -1
- package/dist/assets/{hover-DjMp0VDE.js → hover-Cnk3mL37.js} +1 -1
- package/dist/assets/{hover-As2R_PZU.js → hover-Dam80V47.js} +1 -1
- package/dist/assets/iframe-CFAYM9Mj.js +2 -0
- package/dist/assets/{index-BdKDgH-N.js → index-BVSiPB0X.js} +5 -5
- package/dist/assets/{index-Cdgl62si.js → index-CBPKHXgm.js} +1 -1
- package/dist/assets/{index-CAEOHB9f.js → index-Cg4KN2Wb.js} +1 -1
- package/dist/assets/{intro-Dvcj45i2.js → intro-CwbnCGp9.js} +1 -1
- package/dist/assets/layout-relative-BO2ebDZL.css +1 -0
- package/dist/assets/layout-relative-CYbB23-W.css +1 -0
- package/dist/assets/layout-relative-Cl5Y3N4W.js +1 -0
- package/dist/assets/layout-relative-CmMGsNg3.js +1 -0
- package/dist/assets/{migrating-from-less-D0RjJs9l.js → migrating-from-less-C4d9GytH.js} +1 -1
- package/dist/assets/{options-Cmszy4eB.js → options-B-izEUN2.js} +1 -1
- package/dist/assets/playground-Dy_2mh6-.css +1 -0
- package/dist/assets/{playground.stories-CPIQUnVO.js → playground.stories-exUu4mie.js} +209 -208
- package/dist/assets/preview-BgQjD1RN.js +1 -0
- package/dist/assets/{preview-Dq4CwTqY.js → preview-DbbP98Wn.js} +1 -1
- package/dist/assets/{preview-vuEtMDr6.js → preview-DhgJvzIj.js} +2 -2
- package/dist/assets/text-accent-BbG6aEsK.js +1 -0
- package/dist/assets/text-accent-CRIVfBVN.js +1 -0
- package/dist/assets/text-accent-iqrc1CRU.css +1 -0
- package/dist/assets/text-centered-B2RJ_w5b.css +1 -0
- package/dist/assets/text-centered-Cbki6SCH.js +1 -0
- package/dist/assets/text-centered-CcR3xfWS.js +1 -0
- package/dist/assets/text-centered-Mh098fWh.css +1 -0
- package/dist/assets/{tokens-BF82AwVd.js → tokens-CGo3Lkkz.js} +1 -1
- package/dist/assets/{tokens-Bqw-E6go.js → tokens-CyAiZv2A.js} +1 -1
- package/dist/assets/{tokens-DA876hrI.js → tokens-DMBUszWZ.js} +1 -1
- package/dist/assets/{useTheme-ByES4oDS.js → useTheme-pdzgtlkQ.js} +1 -1
- package/dist/assets/{welcome-p3FME8OW.js → welcome-CRjOYcVM.js} +1 -1
- package/dist/iframe.html +1 -1
- package/dist/preview-stats.json +912 -987
- package/dist/project.json +1 -1
- package/dist/sb-addons/interactions-12/manager-bundle.js +58 -56
- package/dist/sb-manager/globals-runtime.js +5 -5
- package/package.json +16 -16
- package/dist/assets/Avatar-Bf-ZQ5SI.js +0 -6
- package/dist/assets/Avatar-C2bZgjPC.css +0 -1
- package/dist/assets/Avatar-D4PHplD2.css +0 -1
- package/dist/assets/Avatar-DUpkb2KC.js +0 -1
- package/dist/assets/AvatarWithStatus-CQH8pdXh.css +0 -1
- package/dist/assets/Badge-DyIodSmT.css +0 -1
- package/dist/assets/Box-Ca7OsY0c.css +0 -1
- package/dist/assets/Box.stories-yFcUfGK0.js +0 -12
- package/dist/assets/Button-Bi4jW9CV.js +0 -1
- package/dist/assets/Button.stories-De8WlQy7.js +0 -123
- package/dist/assets/Chips-C7eOEIzP.css +0 -1
- package/dist/assets/FieldAdditionalText-Dt30WqOi.css +0 -1
- package/dist/assets/FieldLayout-BYUVHDic.js +0 -1
- package/dist/assets/FieldLayout-CLzA8pBH.css +0 -1
- package/dist/assets/FieldLayoutBase-CA9Dmb-I.css +0 -1
- package/dist/assets/Heading-Des9-Kxs.js +0 -2
- package/dist/assets/Heading-eTizhp-a.js +0 -1
- package/dist/assets/Icon-BEGCR1FC.js +0 -1
- package/dist/assets/Icon-D66V3Lr7.css +0 -1
- package/dist/assets/Icon-DqOWgXnU.js +0 -8
- package/dist/assets/LayoutFlex-4LBfyC68.js +0 -1
- package/dist/assets/LayoutFlex-BsmGUxSb.css +0 -1
- package/dist/assets/LayoutFlex-CI-IyFab.js +0 -1
- package/dist/assets/LayoutFlex-DmMxJGKY.css +0 -1
- package/dist/assets/LayoutFlex.stories-D3WU4z6n.js +0 -19
- package/dist/assets/LayoutGrid-BHkpEiNP.css +0 -1
- package/dist/assets/LayoutGrid-Bbpoq4GZ.js +0 -1
- package/dist/assets/LayoutGrid-DL1Pib1N.css +0 -1
- package/dist/assets/LayoutGrid.stories-ByBJ8ZKQ.js +0 -32
- package/dist/assets/LayoutGridItem-BYGrMSD0.css +0 -1
- package/dist/assets/LayoutGridItem-yCAtLcT1.js +0 -1
- package/dist/assets/Link-BR07cPLn.css +0 -1
- package/dist/assets/Loader-DS2G2nvd.css +0 -1
- package/dist/assets/Loader.stories-Bg8CFUeL.js +0 -8
- package/dist/assets/ObserveIntersection.stories-py33xXDa.js +0 -24
- package/dist/assets/PreplyLogo-BtQbOpx9.css +0 -1
- package/dist/assets/RootProvider-BvHSkgDA.js +0 -1
- package/dist/assets/SelectField-C0MEcwkv.css +0 -1
- package/dist/assets/Spinner-CbwfZ3c6.css +0 -1
- package/dist/assets/Text-CfFW9YKH.js +0 -1
- package/dist/assets/Text-a99inIAW.js +0 -1
- package/dist/assets/Text.stories-DwWKizgM.js +0 -16
- package/dist/assets/TextField-5xfz0nlz.css +0 -1
- package/dist/assets/TextField-C2nBL3Da.js +0 -1
- package/dist/assets/TextHighlighted-BBQxVK8S.css +0 -1
- package/dist/assets/TextHighlighted-CojzyNhw.js +0 -1
- package/dist/assets/TextInline-D6fVMZ22.css +0 -1
- package/dist/assets/Toast-BH8aT7PL.css +0 -1
- package/dist/assets/align-self-B97O5ntC.css +0 -1
- package/dist/assets/align-self-bURpNU3k.js +0 -1
- package/dist/assets/classNames-Cqk1oqv4.js +0 -1
- package/dist/assets/iframe-C6ga-lcz.js +0 -2
- package/dist/assets/layout-relative-A0sx6VRO.css +0 -1
- package/dist/assets/layout-relative-DU9bR1fO.css +0 -1
- package/dist/assets/layout-relative-mMzJCmVd.js +0 -1
- package/dist/assets/layout-relative-qgYNk7GR.js +0 -1
- package/dist/assets/playground-DruFSVKj.css +0 -1
- package/dist/assets/preview-soLZ0BKj.js +0 -1
- package/dist/assets/text-accent-Bgi4eAtI.js +0 -1
- package/dist/assets/text-accent-Cu7YjM5H.js +0 -1
- package/dist/assets/text-accent-Dx3UOWlW.css +0 -1
- package/dist/assets/text-centered-B7xS0eZv.js +0 -1
- package/dist/assets/text-centered-C60nJKZS.css +0 -1
- package/dist/assets/text-centered-Cr-fOXNg.css +0 -1
- package/dist/assets/text-centered-yu4Ks4Ko.js +0 -1
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{F as a}from"./TokyoUIFav-Dzux4Kv4.js";import{r as U}from"./render-icon-DsMGBPwY.js";import{B as M,a as t}from"./Button-hx0d4Fw0.js";import{w as O}from"./componentNames-BSriaIOD.js";import{B as $,a as W}from"./classNames-DypE0CS3.js";import{S as G}from"./StoryContextDSWeb-CwCKdulo.js";import{g as m}from"./getTokenVar-CEGfaPeF.js";import{c as g}from"./tokens-D22H5zrO.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./Spinner-DXNC0i3g.js";import"./useHostname-B91Ahm0o.js";import"./index-CC6DAVyL.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-CLBjXsMY.js";import"./useTheme-pdzgtlkQ.js";import"./constants-mdQROz_Y.js";const s=({variant:r=$,size:n=W,url:i,a11yLabel:N,svg:A,...L})=>e.jsx(M,{...L,isIconButton:!0,variant:r,size:n,url:i,a11yLabel:N,preplyDsComponent:O.IconButton,children:U(A,{"aria-hidden":"true",focusable:"false"})});try{s.displayName="IconButton",s.__docgenInfo={description:"",displayName:"IconButton",props:{size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"Responsive<ButtonSize> | undefined"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"ButtonVariant | undefined"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"string | undefined"}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"boolean | undefined"}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"boolean | undefined"}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"boolean | undefined"}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"boolean | undefined"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"MouseEventHandler<Element> | undefined"}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"boolean | undefined"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"ReactElement<any, string | JSXElementConstructor<any>> | undefined"}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"string | undefined"}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"string | undefined"}},dsInternalSimulation:{defaultValue:null,description:"@deprecated This is meant for internal DS usage only. Do not use it in your code.",name:"dsInternalSimulation",required:!1,type:{name:'"hover" | "focus" | "active" | undefined'}},svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"SvgComponentOrElement"}},selected:{defaultValue:null,description:"",name:"selected",required:!1,type:{name:"boolean | undefined"}}}}}catch{}const ce={title:"components/Button",component:t,subcomponents:{IconButton:s},decorators:[r=>e.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:e.jsx(G,{theme:"tokyo-ui",children:r()})})]},o=()=>e.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[e.jsx(t,{children:"Button"}),e.jsx(t,{leadingSvgIcon:a,children:"Button"}),e.jsx(t,{trailingSvgIcon:a,children:"Button"}),e.jsx(s,{svg:a,assistiveText:"Favourite"})]});o.tags=["!autodocs","!test"];o.parameters={chromatic:{disableSnapshot:!0}};const c=()=>{const r=m(g.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[e.jsx(t,{variant:"primary",children:"Primary"}),e.jsx(t,{variant:"secondary",children:"Secondary"}),e.jsx(t,{variant:"tertiary",children:"Tertiary"}),e.jsx(t,{variant:"ghost",children:"Ghost"}),e.jsx("div",{style:{backgroundColor:r,borderRadius:"8px"},children:e.jsx(t,{variant:"inverted",children:"Inverted"})}),e.jsx(t,{variant:"critical",children:"Critical"}),e.jsx(t,{variant:"onColor",children:"onColor"})]})},d=()=>{const r=m(g.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"1rem"},children:[e.jsx(s,{variant:"primary",svg:a,assistiveText:"primary"}),e.jsx(s,{variant:"secondary",svg:a,assistiveText:"secondary"}),e.jsx(s,{variant:"tertiary",svg:a,assistiveText:"tertiary"}),e.jsx(s,{variant:"ghost",svg:a,assistiveText:"ghost"}),e.jsx("div",{style:{backgroundColor:r,borderRadius:"8px"},children:e.jsx(s,{variant:"inverted",svg:a,assistiveText:"inverted"})}),e.jsx(s,{variant:"critical",svg:a,assistiveText:"critical"}),e.jsx(s,{variant:"onColor",svg:a,assistiveText:"onColor"})]})};d.storyName="Variants (IconButton)";const v=()=>{const r=m(g.background.primaryInverted);return e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsxs("div",{style:{display:"flex",gap:"4px"},children:[e.jsx(t,{variant:"ai",children:"AI"}),e.jsx(s,{variant:"ai",svg:a,assistiveText:"Fav"})]}),e.jsxs("div",{style:{display:"flex",gap:"4px",backgroundColor:r},children:[e.jsx(t,{variant:"classroom",children:"Classroom"}),e.jsx(s,{variant:"classroom",svg:a,assistiveText:"Fav"})]})]})},p=()=>e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsxs("div",{style:{display:"flex",gap:"4px"},children:[e.jsx(t,{size:"small",children:"Small"}),e.jsx(s,{size:"small",svg:a,assistiveText:"Fav"})]}),e.jsxs("div",{style:{display:"flex",gap:"4px"},children:[e.jsx(t,{size:"medium",children:"Medium"}),e.jsx(s,{size:"medium",svg:a,assistiveText:"Fav"})]}),e.jsxs("div",{style:{display:"flex",gap:"4px"},children:[e.jsx(t,{size:"large",children:"Large"}),e.jsx(s,{size:"large",svg:a,assistiveText:"Fav"})]})]}),l=()=>e.jsx(t,{wrap:!0,children:"Do the really quite unusually long thing"});l.tags=["!autodocs"];l.decorators=[r=>e.jsx("div",{style:{width:"200px"},children:r()})];const u=()=>{const r=m(g.background.primaryInverted);return e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"0.5rem"},children:["small","medium","large"].map(n=>["primary","secondary","tertiary","ghost","inverted","critical","ai","onColor","classroom"].map(i=>e.jsxs("div",{style:{display:"flex",gap:"0.25rem",backgroundColor:i==="inverted"||i==="classroom"?r:void 0},children:[e.jsx(t,{size:n,variant:i,children:"Button"}),e.jsx(s,{size:n,variant:i,svg:a,assistiveText:"Fav"}),e.jsx(t,{size:n,variant:i,leadingSvgIcon:a,children:"Button"}),e.jsx(t,{size:n,variant:i,trailingSvgIcon:a,children:"Button"}),e.jsx(t,{size:n,variant:i,busy:!0,assistiveText:"Fav",children:"Button"}),e.jsx(s,{size:n,variant:i,svg:a,assistiveText:"Fav",busy:!0}),e.jsx(t,{size:n,variant:i,disabled:!0,children:"Button"}),e.jsx(s,{size:n,variant:i,svg:a,assistiveText:"Fav",disabled:!0})]},`${n}-${i}`)))})};u.tags=["!autodocs"];var y,x,f;o.parameters={...o.parameters,docs:{...(y=o.parameters)==null?void 0:y.docs,source:{originalSource:`() => <div style={{
|
|
2
|
+
display: 'flex',
|
|
3
|
+
gap: '1rem'
|
|
4
|
+
}}>
|
|
5
|
+
<Button>Button</Button>
|
|
6
|
+
<Button leadingSvgIcon={Fav}>Button</Button>
|
|
7
|
+
<Button trailingSvgIcon={Fav}>Button</Button>
|
|
8
|
+
<IconButton svg={Fav} assistiveText="Favourite" />
|
|
9
|
+
</div>`,...(f=(x=o.parameters)==null?void 0:x.docs)==null?void 0:f.source}}};var B,h,j;c.parameters={...c.parameters,docs:{...(B=c.parameters)==null?void 0:B.docs,source:{originalSource:`() => {
|
|
10
|
+
const grey = getTokenVar(color.background.primaryInverted);
|
|
11
|
+
return <div style={{
|
|
12
|
+
display: 'flex',
|
|
13
|
+
gap: '1rem'
|
|
14
|
+
}}>
|
|
15
|
+
<Button variant="primary">Primary</Button>
|
|
16
|
+
<Button variant="secondary">Secondary</Button>
|
|
17
|
+
<Button variant="tertiary">Tertiary</Button>
|
|
18
|
+
<Button variant="ghost">Ghost</Button>
|
|
19
|
+
<div style={{
|
|
20
|
+
backgroundColor: grey,
|
|
21
|
+
borderRadius: '8px'
|
|
22
|
+
}}>
|
|
23
|
+
<Button variant="inverted">Inverted</Button>
|
|
24
|
+
</div>
|
|
25
|
+
<Button variant="critical">Critical</Button>
|
|
26
|
+
<Button variant="onColor">onColor</Button>
|
|
27
|
+
</div>;
|
|
28
|
+
}`,...(j=(h=c.parameters)==null?void 0:h.docs)==null?void 0:j.source}}};var I,T,b;d.parameters={...d.parameters,docs:{...(I=d.parameters)==null?void 0:I.docs,source:{originalSource:`() => {
|
|
29
|
+
const grey = getTokenVar(color.background.primaryInverted);
|
|
30
|
+
return <div style={{
|
|
31
|
+
display: 'flex',
|
|
32
|
+
gap: '1rem'
|
|
33
|
+
}}>
|
|
34
|
+
<IconButton variant="primary" svg={Fav} assistiveText="primary" />
|
|
35
|
+
<IconButton variant="secondary" svg={Fav} assistiveText="secondary" />
|
|
36
|
+
<IconButton variant="tertiary" svg={Fav} assistiveText="tertiary" />
|
|
37
|
+
<IconButton variant="ghost" svg={Fav} assistiveText="ghost" />
|
|
38
|
+
<div style={{
|
|
39
|
+
backgroundColor: grey,
|
|
40
|
+
borderRadius: '8px'
|
|
41
|
+
}}>
|
|
42
|
+
<IconButton variant="inverted" svg={Fav} assistiveText="inverted" />
|
|
43
|
+
</div>
|
|
44
|
+
<IconButton variant="critical" svg={Fav} assistiveText="critical" />
|
|
45
|
+
<IconButton variant="onColor" svg={Fav} assistiveText="onColor" />
|
|
46
|
+
</div>;
|
|
47
|
+
}`,...(b=(T=d.parameters)==null?void 0:T.docs)==null?void 0:b.source}}};var F,S,V;v.parameters={...v.parameters,docs:{...(F=v.parameters)==null?void 0:F.docs,source:{originalSource:`() => {
|
|
48
|
+
const grey = getTokenVar(color.background.primaryInverted);
|
|
49
|
+
return <div style={{
|
|
50
|
+
display: 'flex',
|
|
51
|
+
gap: '8px'
|
|
52
|
+
}}>
|
|
53
|
+
<div style={{
|
|
54
|
+
display: 'flex',
|
|
55
|
+
gap: '4px'
|
|
56
|
+
}}>
|
|
57
|
+
<Button variant="ai">AI</Button>
|
|
58
|
+
<IconButton variant="ai" svg={Fav} assistiveText="Fav" />
|
|
59
|
+
</div>
|
|
60
|
+
<div style={{
|
|
61
|
+
display: 'flex',
|
|
62
|
+
gap: '4px',
|
|
63
|
+
backgroundColor: grey
|
|
64
|
+
}}>
|
|
65
|
+
<Button variant="classroom">Classroom</Button>
|
|
66
|
+
<IconButton variant="classroom" svg={Fav} assistiveText="Fav" />
|
|
67
|
+
</div>
|
|
68
|
+
</div>;
|
|
69
|
+
}`,...(V=(S=v.parameters)==null?void 0:S.docs)==null?void 0:V.source}}};var C,z,k;p.parameters={...p.parameters,docs:{...(C=p.parameters)==null?void 0:C.docs,source:{originalSource:`() => <div style={{
|
|
70
|
+
display: 'flex',
|
|
71
|
+
alignItems: 'center',
|
|
72
|
+
gap: '8px'
|
|
73
|
+
}}>
|
|
74
|
+
<div style={{
|
|
75
|
+
display: 'flex',
|
|
76
|
+
gap: '4px'
|
|
77
|
+
}}>
|
|
78
|
+
<Button size="small">Small</Button>
|
|
79
|
+
<IconButton size="small" svg={Fav} assistiveText="Fav" />
|
|
80
|
+
</div>
|
|
81
|
+
<div style={{
|
|
82
|
+
display: 'flex',
|
|
83
|
+
gap: '4px'
|
|
84
|
+
}}>
|
|
85
|
+
<Button size="medium">Medium</Button>
|
|
86
|
+
<IconButton size="medium" svg={Fav} assistiveText="Fav" />
|
|
87
|
+
</div>
|
|
88
|
+
<div style={{
|
|
89
|
+
display: 'flex',
|
|
90
|
+
gap: '4px'
|
|
91
|
+
}}>
|
|
92
|
+
<Button size="large">Large</Button>
|
|
93
|
+
<IconButton size="large" svg={Fav} assistiveText="Fav" />
|
|
94
|
+
</div>
|
|
95
|
+
</div>`,...(k=(z=p.parameters)==null?void 0:z.docs)==null?void 0:k.source}}};var q,_,w;l.parameters={...l.parameters,docs:{...(q=l.parameters)==null?void 0:q.docs,source:{originalSource:"() => <Button wrap>Do the really quite unusually long thing</Button>",...(w=(_=l.parameters)==null?void 0:_.docs)==null?void 0:w.source}}};var D,E,R;u.parameters={...u.parameters,docs:{...(D=u.parameters)==null?void 0:D.docs,source:{originalSource:`() => {
|
|
96
|
+
const grey = getTokenVar(color.background.primaryInverted);
|
|
97
|
+
return <div style={{
|
|
98
|
+
display: 'flex',
|
|
99
|
+
flexDirection: 'column',
|
|
100
|
+
gap: '0.5rem'
|
|
101
|
+
}}>
|
|
102
|
+
{(['small', 'medium', 'large'] as const).map(size => (['primary', 'secondary', 'tertiary', 'ghost', 'inverted', 'critical', 'ai', 'onColor', 'classroom'] as const).map(variant => <div key={\`\${size}-\${variant}\`} style={{
|
|
103
|
+
display: 'flex',
|
|
104
|
+
gap: '0.25rem',
|
|
105
|
+
backgroundColor: variant === 'inverted' || variant === 'classroom' ? grey : undefined
|
|
106
|
+
}}>
|
|
107
|
+
<Button size={size} variant={variant}>
|
|
108
|
+
Button
|
|
109
|
+
</Button>
|
|
110
|
+
<IconButton size={size} variant={variant} svg={Fav} assistiveText="Fav" />
|
|
111
|
+
<Button size={size} variant={variant} leadingSvgIcon={Fav}>
|
|
112
|
+
Button
|
|
113
|
+
</Button>
|
|
114
|
+
<Button size={size} variant={variant} trailingSvgIcon={Fav}>
|
|
115
|
+
Button
|
|
116
|
+
</Button>
|
|
117
|
+
<Button size={size} variant={variant} busy assistiveText="Fav">
|
|
118
|
+
Button
|
|
119
|
+
</Button>
|
|
120
|
+
<IconButton size={size} variant={variant} svg={Fav} assistiveText="Fav" busy />
|
|
121
|
+
<Button size={size} variant={variant} disabled>
|
|
122
|
+
Button
|
|
123
|
+
</Button>
|
|
124
|
+
<IconButton size={size} variant={variant} svg={Fav} assistiveText="Fav" disabled />
|
|
125
|
+
</div>))}
|
|
126
|
+
</div>;
|
|
127
|
+
}`,...(R=(E=u.parameters)==null?void 0:E.docs)==null?void 0:R.source}}};const ve=["Icons","Variants","VariantsIconButton","MiscVariants","Sizes","WrappingText","Combinations"];export{u as Combinations,o as Icons,v as MiscVariants,p as Sizes,c as Variants,d as VariantsIconButton,l as WrappingText,ve as __namedExportsOrder,ce as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._chips_1xxr1_3{display:flex;gap:var(--813599);flex-wrap:wrap}._chips_1xxr1_3:is(ul){list-style:none;margin:0;padding:0}._chips_1xxr1_3 ._chip_1xxr1_3{box-sizing:border-box;cursor:pointer;height:var(--ece0fe);width:fit-content;font-size:var(--475c79);font-weight:var(--a3f251);line-height:var(--e33d9e);color:var(--628fb7);background-color:var(--3546c3);border:solid var(--26b8e3);border-radius:var(--fa4b1a);border-color:var(--c03289);display:flex;align-items:center}._chips_1xxr1_3 ._chip_1xxr1_3 button{all:unset}@media (hover: hover) and (pointer: fine){._chips_1xxr1_3 ._chip_1xxr1_3:hover{background-color:var(--302ecf)}}._chips_1xxr1_3 ._chip_1xxr1_3:has(._chip-toggle_1xxr1_37:focus-visible){outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--05dd73)}._chips_1xxr1_3 ._chip_1xxr1_3:has(._chip-toggle_1xxr1_37:active){border-color:var(--11d206);background-color:var(--a5c761)}._chips_1xxr1_3 ._chip_1xxr1_3:has(._chip-toggle_1xxr1_37[aria-pressed=true]){border-color:var(--11d206);background-color:var(--a5c761)}._chips_1xxr1_3 ._chip_1xxr1_3 ._chip-toggle_1xxr1_37{padding:var(--66b80b) var(--813599);display:flex;gap:var(--66b80b)}._chips_1xxr1_3 ._chip_1xxr1_3 ._chip-remove_1xxr1_54{height:fit-content;width:fit-content;display:flex;justify-content:center;align-items:center;padding:var(--66b80b) var(--813599) var(--66b80b) 0;border-radius:inherit}._chips_1xxr1_3 ._chip_1xxr1_3 ._chip-remove_1xxr1_54:focus-visible{outline:solid var(--26b8e3) var(--5b4fe9);outline-offset:var(--109103) var(--05dd73)}._chips_1xxr1_3[data-variant=choice] ._chip_1xxr1_3:has(._chip-toggle_1xxr1_37[aria-pressed=true]){color:var(--c2b191);background-color:var(--4983fe)}._chips_1xxr1_3[data-variant=choice] ._chip_1xxr1_3 ._chip-remove_1xxr1_54{display:none}._chips_1xxr1_3[data-variant=filter] ._chip_1xxr1_3:has(._chip-toggle_1xxr1_37[aria-pressed=false]) ._chip-remove_1xxr1_54{display:none}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as e}from"./jsx-runtime-CKrituN3.js";import{F as D}from"./TokyoUIFav-Dzux4Kv4.js";import{a as p}from"./chunk-D5ZWXAHU-D9pYMJqw.js";import{r as o}from"./index-CBqU2yxZ.js";import{I as C}from"./Icon-
|
|
1
|
+
import{j as e}from"./jsx-runtime-CKrituN3.js";import{F as D}from"./TokyoUIFav-Dzux4Kv4.js";import{a as p}from"./chunk-D5ZWXAHU-D9pYMJqw.js";import{r as o}from"./index-CBqU2yxZ.js";import{I as C}from"./Icon-Cn3B7mqs.js";import{g as E}from"./classNames-DypE0CS3.js";import{w as O}from"./componentNames-BSriaIOD.js";import{S as U}from"./StoryContextDSWeb-CwCKdulo.js";import"./v4-CQkTLCs1.js";import"./_commonjsHelpers-BosuxZz1.js";import"./text-accent-CRIVfBVN.js";import"./render-icon-DsMGBPwY.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-CLBjXsMY.js";import"./useTheme-pdzgtlkQ.js";import"./constants-mdQROz_Y.js";const Y="_chips_1xxr1_3",G="_chip_1xxr1_3",b={chips:Y,chip:G,"chip-toggle":"_chip-toggle_1xxr1_37","chip-remove":"_chip-remove_1xxr1_54"},H=({title:s,titleId:r,...t},n)=>o.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":r,...t},s?o.createElement("title",{id:r},s):null,o.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),K=o.forwardRef(H),a=({variant:s="choice",children:r,"aria-label":t,dataset:n})=>{const i={...n,variant:s};return e.jsx("ul",{"aria-label":t,className:b.chips,...E(i,{preplyDsComponent:O.Chips}),children:r})};a.Item=function({label:r,leadingSvgIcon:t,pressed:n,onToggle:i,onRemove:l,"aria-controls":v,dataset:W}){const g=()=>i==null?void 0:i(!n),L=l??g;return e.jsxs("li",{className:b.chip,...E(W,{preplyDsComponent:O.Chip}),children:[e.jsxs("button",{type:"button",className:b["chip-toggle"],"aria-pressed":n,"aria-controls":v,onClick:g,onKeyUp:z=>{switch(z.key){case"Backspace":case"Delete":if(!n)return;g();break}},children:[t&&e.jsx(C,{size:"24",svg:t}),r]}),e.jsx("button",{type:"button",className:b["chip-remove"],onClick:L,"aria-label":"Remove","aria-controls":v,children:e.jsx(C,{size:"24",svg:K})})]})};try{a.displayName="Chips",a.__docgenInfo={description:"A Chips container.\n\nAdd `Chips.Item` children to render a list of Chips.",displayName:"Chips",props:{variant:{defaultValue:{value:"choice"},description:"The Chip list variant;\n- For simple checkbox-like behaviour, use `choice`.\n- For more complex filtering controls, use `filter`.",name:"variant",required:!1,type:{name:'"choice" | "filter" | undefined'}},"aria-label":{defaultValue:null,description:`Allows assistive technologies to correctly identify and announce
|
|
2
2
|
the Chip list.
|
|
3
3
|
@example <Chips aria-label="tutor filter">
|
|
4
4
|
// When the Chip below is in focus, screen readers may announce it as:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{al as Me,am as ie,an as Ce,ao as $,a2 as ue,a0 as $e,x as Ie,ap as Oe,aq as Ne}from"./index-BdKDgH-N.js";import{R as h,r as m}from"./index-CBqU2yxZ.js";import{g as fe}from"./_commonjsHelpers-BosuxZz1.js";import"./iframe-C6ga-lcz.js";import"../sb-preview/runtime.js";import"./jsx-runtime-CKrituN3.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";var Se={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]};const F=Se,he={};for(const e of Object.keys(F))he[F[e]]=e;const u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};var de=u;for(const e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);const{channels:t,labels:n}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:t}),Object.defineProperty(u[e],"labels",{value:n})}u.rgb.hsl=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.min(t,n,r),a=Math.max(t,n,r),s=a-o;let l,c;a===o?l=0:t===a?l=(n-r)/s:n===a?l=2+(r-t)/s:r===a&&(l=4+(t-n)/s),l=Math.min(l*60,360),l<0&&(l+=360);const i=(o+a)/2;return a===o?c=0:i<=.5?c=s/(a+o):c=s/(2-a-o),[l,c*100,i*100]};u.rgb.hsv=function(e){let t,n,r,o,a;const s=e[0]/255,l=e[1]/255,c=e[2]/255,i=Math.max(s,l,c),d=i-Math.min(s,l,c),f=function(g){return(i-g)/6/d+1/2};return d===0?(o=0,a=0):(a=d/i,t=f(s),n=f(l),r=f(c),s===i?o=r-n:l===i?o=1/3+t-r:c===i&&(o=2/3+n-t),o<0?o+=1:o>1&&(o-=1)),[o*360,a*100,i*100]};u.rgb.hwb=function(e){const t=e[0],n=e[1];let r=e[2];const o=u.rgb.hsl(e)[0],a=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[o,a*100,r*100]};u.rgb.cmyk=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.min(1-t,1-n,1-r),a=(1-t-o)/(1-o)||0,s=(1-n-o)/(1-o)||0,l=(1-r-o)/(1-o)||0;return[a*100,s*100,l*100,o*100]};function Re(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}u.rgb.keyword=function(e){const t=he[e];if(t)return t;let n=1/0,r;for(const o of Object.keys(F)){const a=F[o],s=Re(e,a);s<n&&(n=s,r=o)}return r};u.keyword.rgb=function(e){return F[e]};u.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;const o=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,s=t*.0193+n*.1192+r*.9505;return[o*100,a*100,s*100]};u.rgb.lab=function(e){const t=u.rgb.xyz(e);let n=t[0],r=t[1],o=t[2];n/=95.047,r/=100,o/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;const a=116*r-16,s=500*(n-r),l=200*(r-o);return[a,s,l]};u.hsl.rgb=function(e){const t=e[0]/360,n=e[1]/100,r=e[2]/100;let o,a,s;if(n===0)return s=r*255,[s,s,s];r<.5?o=r*(1+n):o=r+n-r*n;const l=2*r-o,c=[0,0,0];for(let i=0;i<3;i++)a=t+1/3*-(i-1),a<0&&a++,a>1&&a--,6*a<1?s=l+(o-l)*6*a:2*a<1?s=o:3*a<2?s=l+(o-l)*(2/3-a)*6:s=l,c[i]=s*255;return c};u.hsl.hsv=function(e){const t=e[0];let n=e[1]/100,r=e[2]/100,o=n;const a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,o*=a<=1?a:2-a;const s=(r+n)/2,l=r===0?2*o/(a+o):2*n/(r+n);return[t,l*100,s*100]};u.hsv.rgb=function(e){const t=e[0]/60,n=e[1]/100;let r=e[2]/100;const o=Math.floor(t)%6,a=t-Math.floor(t),s=255*r*(1-n),l=255*r*(1-n*a),c=255*r*(1-n*(1-a));switch(r*=255,o){case 0:return[r,c,s];case 1:return[l,r,s];case 2:return[s,r,c];case 3:return[s,l,r];case 4:return[c,s,r];case 5:return[r,s,l]}};u.hsv.hsl=function(e){const t=e[0],n=e[1]/100,r=e[2]/100,o=Math.max(r,.01);let a,s;s=(2-n)*r;const l=(2-n)*o;return a=n*o,a/=l<=1?l:2-l,a=a||0,s/=2,[t,a*100,s*100]};u.hwb.rgb=function(e){const t=e[0]/360;let n=e[1]/100,r=e[2]/100;const o=n+r;let a;o>1&&(n/=o,r/=o);const s=Math.floor(6*t),l=1-r;a=6*t-s,s&1&&(a=1-a);const c=n+a*(l-n);let i,d,f;switch(s){default:case 6:case 0:i=l,d=c,f=n;break;case 1:i=c,d=l,f=n;break;case 2:i=n,d=l,f=c;break;case 3:i=n,d=c,f=l;break;case 4:i=c,d=n,f=l;break;case 5:i=l,d=n,f=c;break}return[i*255,d*255,f*255]};u.cmyk.rgb=function(e){const t=e[0]/100,n=e[1]/100,r=e[2]/100,o=e[3]/100,a=1-Math.min(1,t*(1-o)+o),s=1-Math.min(1,n*(1-o)+o),l=1-Math.min(1,r*(1-o)+o);return[a*255,s*255,l*255]};u.xyz.rgb=function(e){const t=e[0]/100,n=e[1]/100,r=e[2]/100;let o,a,s;return o=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,s=t*.0557+n*-.204+r*1.057,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,s=s>.0031308?1.055*s**(1/2.4)-.055:s*12.92,o=Math.min(Math.max(0,o),1),a=Math.min(Math.max(0,a),1),s=Math.min(Math.max(0,s),1),[o*255,a*255,s*255]};u.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];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;const o=116*n-16,a=500*(t-n),s=200*(n-r);return[o,a,s]};u.lab.xyz=function(e){const t=e[0],n=e[1],r=e[2];let o,a,s;a=(t+16)/116,o=n/500+a,s=a-r/200;const l=a**3,c=o**3,i=s**3;return a=l>.008856?l:(a-16/116)/7.787,o=c>.008856?c:(o-16/116)/7.787,s=i>.008856?i:(s-16/116)/7.787,o*=95.047,a*=100,s*=108.883,[o,a,s]};u.lab.lch=function(e){const t=e[0],n=e[1],r=e[2];let o;o=Math.atan2(r,n)*360/2/Math.PI,o<0&&(o+=360);const s=Math.sqrt(n*n+r*r);return[t,s,o]};u.lch.lab=function(e){const t=e[0],n=e[1],o=e[2]/360*2*Math.PI,a=n*Math.cos(o),s=n*Math.sin(o);return[t,a,s]};u.rgb.ansi16=function(e,t=null){const[n,r,o]=e;let a=t===null?u.rgb.hsv(e)[2]:t;if(a=Math.round(a/50),a===0)return 30;let s=30+(Math.round(o/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return a===2&&(s+=60),s};u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])};u.rgb.ansi256=function(e){const 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)};u.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];const n=(~~(e>50)+1)*.5,r=(t&1)*n*255,o=(t>>1&1)*n*255,a=(t>>2&1)*n*255;return[r,o,a]};u.ansi256.rgb=function(e){if(e>=232){const a=(e-232)*10+8;return[a,a,a]}e-=16;let t;const n=Math.floor(e/36)/5*255,r=Math.floor((t=e%36)/6)/5*255,o=t%6/5*255;return[n,r,o]};u.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};u.hex.rgb=function(e){const 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(l=>l+l).join(""));const r=parseInt(n,16),o=r>>16&255,a=r>>8&255,s=r&255;return[o,a,s]};u.rgb.hcg=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),s=o-a;let l,c;return s<1?l=a/(1-s):l=0,s<=0?c=0:o===t?c=(n-r)/s%6:o===n?c=2+(r-t)/s:c=4+(t-n)/s,c/=6,c%=1,[c*360,s*100,l*100]};u.hsl.hcg=function(e){const t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n);let o=0;return r<1&&(o=(n-.5*r)/(1-r)),[e[0],r*100,o*100]};u.hsv.hcg=function(e){const t=e[1]/100,n=e[2]/100,r=t*n;let o=0;return r<1&&(o=(n-r)/(1-r)),[e[0],r*100,o*100]};u.hcg.rgb=function(e){const t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];const o=[0,0,0],a=t%1*6,s=a%1,l=1-s;let c=0;switch(Math.floor(a)){case 0:o[0]=1,o[1]=s,o[2]=0;break;case 1:o[0]=l,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=s;break;case 3:o[0]=0,o[1]=l,o[2]=1;break;case 4:o[0]=s,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=l}return c=(1-n)*r,[(n*o[0]+c)*255,(n*o[1]+c)*255,(n*o[2]+c)*255]};u.hcg.hsv=function(e){const t=e[1]/100,n=e[2]/100,r=t+n*(1-t);let o=0;return r>0&&(o=t/r),[e[0],o*100,r*100]};u.hcg.hsl=function(e){const t=e[1]/100,r=e[2]/100*(1-t)+.5*t;let o=0;return r>0&&r<.5?o=t/(2*r):r>=.5&&r<1&&(o=t/(2*(1-r))),[e[0],o*100,r*100]};u.hcg.hwb=function(e){const t=e[1]/100,n=e[2]/100,r=t+n*(1-t);return[e[0],(r-t)*100,(1-r)*100]};u.hwb.hcg=function(e){const t=e[1]/100,r=1-e[2]/100,o=r-t;let a=0;return o<1&&(a=(r-o)/(1-o)),[e[0],o*100,a*100]};u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]};u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]};u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]};u.gray.hsl=function(e){return[0,0,e[0]]};u.gray.hsv=u.gray.hsl;u.gray.hwb=function(e){return[0,100,e[0]]};u.gray.cmyk=function(e){return[0,0,0,e[0]]};u.gray.lab=function(e){return[e[0],0,0]};u.gray.hex=function(e){const t=Math.round(e[0]/100*255)&255,r=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(r.length)+r};u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]};const X=de;function je(){const e={},t=Object.keys(X);for(let n=t.length,r=0;r<n;r++)e[t[r]]={distance:-1,parent:null};return e}function ze(e){const t=je(),n=[e];for(t[e].distance=0;n.length;){const r=n.pop(),o=Object.keys(X[r]);for(let a=o.length,s=0;s<a;s++){const l=o[s],c=t[l];c.distance===-1&&(c.distance=t[r].distance+1,c.parent=r,n.unshift(l))}}return t}function He(e,t){return function(n){return t(e(n))}}function Fe(e,t){const n=[t[e].parent,e];let r=X[t[e].parent][e],o=t[e].parent;for(;t[o].parent;)n.unshift(t[o].parent),r=He(X[t[o].parent][o],r),o=t[o].parent;return r.conversion=n,r}var Te=function(e){const t=ze(e),n={},r=Object.keys(t);for(let o=r.length,a=0;a<o;a++){const s=r[a];t[s].parent!==null&&(n[s]=Fe(s,t))}return n};const K=de,Pe=Te,N={},Le=Object.keys(K);function qe(e){const t=function(...n){const r=n[0];return r==null?r:(r.length>1&&(n=r),e(n))};return"conversion"in e&&(t.conversion=e.conversion),t}function Be(e){const t=function(...n){const r=n[0];if(r==null)return r;r.length>1&&(n=r);const o=e(n);if(typeof o=="object")for(let a=o.length,s=0;s<a;s++)o[s]=Math.round(o[s]);return o};return"conversion"in e&&(t.conversion=e.conversion),t}Le.forEach(e=>{N[e]={},Object.defineProperty(N[e],"channels",{value:K[e].channels}),Object.defineProperty(N[e],"labels",{value:K[e].labels});const t=Pe(e);Object.keys(t).forEach(r=>{const o=t[r];N[e][r]=Be(o),N[e][r].raw=qe(o)})});var Xe=N;const _=fe(Xe);var De=Me,We=function(){return De.Date.now()},Ke=We,Ve=/\s/;function Ae(e){for(var t=e.length;t--&&Ve.test(e.charAt(t)););return t}var Ge=Ae,Ue=Ge,Ye=/^\s+/;function Je(e){return e&&e.slice(0,Ue(e)+1).replace(Ye,"")}var Qe=Je,Ze=Qe,te=ie,et=Ce,ne=NaN,tt=/^[-+]0x[0-9a-f]+$/i,nt=/^0b[01]+$/i,rt=/^0o[0-7]+$/i,ot=parseInt;function at(e){if(typeof e=="number")return e;if(et(e))return ne;if(te(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=te(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=Ze(e);var n=nt.test(e);return n||rt.test(e)?ot(e.slice(2),n?2:8):tt.test(e)?ne:+e}var st=at,lt=ie,W=Ke,re=st,ct="Expected a function",it=Math.max,ut=Math.min;function ft(e,t,n){var r,o,a,s,l,c,i=0,d=!1,f=!1,g=!0;if(typeof e!="function")throw new TypeError(ct);t=re(t)||0,lt(n)&&(d=!!n.leading,f="maxWait"in n,a=f?it(re(n.maxWait)||0,t):a,g="trailing"in n?!!n.trailing:g);function x(v){var C=r,z=o;return r=o=void 0,i=v,s=e.apply(z,C),s}function j(v){return i=v,l=setTimeout(b,t),d?x(v):s}function M(v){var C=v-c,z=v-i,ee=t-C;return f?ut(ee,a-z):ee}function p(v){var C=v-c,z=v-i;return c===void 0||C>=t||C<0||f&&z>=a}function b(){var v=W();if(p(v))return w(v);l=setTimeout(b,M(v))}function w(v){return l=void 0,g&&r?x(v):(r=o=void 0,s)}function E(){l!==void 0&&clearTimeout(l),i=0,r=c=o=l=void 0}function k(){return l===void 0?s:w(W())}function I(){var v=W(),C=p(v);if(r=arguments,o=this,c=v,C){if(l===void 0)return j(c);if(f)return clearTimeout(l),l=setTimeout(b,t),x(c)}return l===void 0&&(l=setTimeout(b,t)),s}return I.cancel=E,I.flush=k,I}var ht=ft;const dt=fe(ht);function O(){return(O=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 J(e,t){if(e==null)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}function V(e){var t=m.useRef(e),n=m.useRef(function(r){t.current&&t.current(r)});return t.current=e,n.current}var R=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e<t?t:e},H=function(e){return"touches"in e},A=function(e){return e&&e.ownerDocument.defaultView||self},oe=function(e,t,n){var r=e.getBoundingClientRect(),o=H(t)?function(a,s){for(var l=0;l<a.length;l++)if(a[l].identifier===s)return a[l];return a[0]}(t.touches,n):t;return{left:R((o.pageX-(r.left+A(e).pageXOffset))/r.width),top:R((o.pageY-(r.top+A(e).pageYOffset))/r.height)}},ae=function(e){!H(e)&&e.preventDefault()},Q=h.memo(function(e){var t=e.onMove,n=e.onKey,r=J(e,["onMove","onKey"]),o=m.useRef(null),a=V(t),s=V(n),l=m.useRef(null),c=m.useRef(!1),i=m.useMemo(function(){var x=function(p){ae(p),(H(p)?p.touches.length>0:p.buttons>0)&&o.current?a(oe(o.current,p,l.current)):M(!1)},j=function(){return M(!1)};function M(p){var b=c.current,w=A(o.current),E=p?w.addEventListener:w.removeEventListener;E(b?"touchmove":"mousemove",x),E(b?"touchend":"mouseup",j)}return[function(p){var b=p.nativeEvent,w=o.current;if(w&&(ae(b),!function(k,I){return I&&!H(k)}(b,c.current)&&w)){if(H(b)){c.current=!0;var E=b.changedTouches||[];E.length&&(l.current=E[0].identifier)}w.focus(),a(oe(w,b,l.current)),M(!0)}},function(p){var b=p.which||p.keyCode;b<37||b>40||(p.preventDefault(),s({left:b===39?.05:b===37?-.05:0,top:b===40?.05:b===38?-.05:0}))},M]},[s,a]),d=i[0],f=i[1],g=i[2];return m.useEffect(function(){return g},[g]),h.createElement("div",O({},r,{onTouchStart:d,onMouseDown:d,className:"react-colorful__interactive",ref:o,onKeyDown:f,tabIndex:0,role:"slider"}))}),T=function(e){return e.filter(Boolean).join(" ")},Z=function(e){var t=e.color,n=e.left,r=e.top,o=r===void 0?.5:r,a=T(["react-colorful__pointer",e.className]);return h.createElement("div",{className:a,style:{top:100*o+"%",left:100*n+"%"}},h.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},y=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=Math.pow(10,t)),Math.round(n*e)/n},gt={grad:.9,turn:360,rad:360/(2*Math.PI)},mt=function(e){return be(G(e))},G=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?y(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?y(parseInt(e.substring(6,8),16)/255,2):1}},bt=function(e,t){return t===void 0&&(t="deg"),Number(e)*(gt[t]||1)},vt=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?pt({h:bt(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}},pt=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}},yt=function(e){return wt(me(e))},ge=function(e){var t=e.s,n=e.v,r=e.a,o=(200-t)*n/100;return{h:y(e.h),s:y(o>0&&o<200?t*n/100/(o<=100?o:200-o)*100:0),l:y(o/2),a:y(r,2)}},U=function(e){var t=ge(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},B=function(e){var t=ge(e);return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},me=function(e){var t=e.h,n=e.s,r=e.v,o=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),s=r*(1-n),l=r*(1-(t-a)*n),c=r*(1-(1-t+a)*n),i=a%6;return{r:y(255*[r,l,s,s,c,r][i]),g:y(255*[c,r,r,l,s,s][i]),b:y(255*[s,s,c,r,r,l][i]),a:y(o,2)}},xt=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?be({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}},P=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},wt=function(e){var t=e.r,n=e.g,r=e.b,o=e.a,a=o<1?P(y(255*o)):"";return"#"+P(t)+P(n)+P(r)+a},be=function(e){var t=e.r,n=e.g,r=e.b,o=e.a,a=Math.max(t,n,r),s=a-Math.min(t,n,r),l=s?a===t?(n-r)/s:a===n?2+(r-t)/s:4+(t-n)/s:0;return{h:y(60*(l<0?l+6:l)),s:y(a?s/a*100:0),v:y(a/255*100),a:o}},ve=h.memo(function(e){var t=e.hue,n=e.onChange,r=T(["react-colorful__hue",e.className]);return h.createElement("div",{className:r},h.createElement(Q,{onMove:function(o){n({h:360*o.left})},onKey:function(o){n({h:R(t+360*o.left,0,360)})},"aria-label":"Hue","aria-valuenow":y(t),"aria-valuemax":"360","aria-valuemin":"0"},h.createElement(Z,{className:"react-colorful__hue-pointer",left:t/360,color:U({h:t,s:100,v:100,a:1})})))}),pe=h.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:U({h:t.h,s:100,v:100,a:1})};return h.createElement("div",{className:"react-colorful__saturation",style:r},h.createElement(Q,{onMove:function(o){n({s:100*o.left,v:100-100*o.top})},onKey:function(o){n({s:R(t.s+100*o.left,0,100),v:R(t.v-100*o.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+y(t.s)+"%, Brightness "+y(t.v)+"%"},h.createElement(Z,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:U(t)})))}),ye=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},xe=function(e,t){return e.replace(/\s/g,"")===t.replace(/\s/g,"")},kt=function(e,t){return e.toLowerCase()===t.toLowerCase()||ye(G(e),G(t))};function we(e,t,n){var r=V(n),o=m.useState(function(){return e.toHsva(t)}),a=o[0],s=o[1],l=m.useRef({color:t,hsva:a});m.useEffect(function(){if(!e.equal(t,l.current.color)){var i=e.toHsva(t);l.current={hsva:i,color:t},s(i)}},[t,e]),m.useEffect(function(){var i;ye(a,l.current.hsva)||e.equal(i=e.fromHsva(a),l.current.color)||(l.current={hsva:a,color:i},r(i))},[a,e,r]);var c=m.useCallback(function(i){s(function(d){return Object.assign({},d,i)})},[]);return[a,c]}var _t=typeof window<"u"?m.useLayoutEffect:m.useEffect,Et=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},se=new Map,ke=function(e){_t(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!se.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}`,se.set(t,n);var r=Et();r&&n.setAttribute("nonce",r),t.head.appendChild(n)}},[])},Mt=function(e){var t=e.className,n=e.colorModel,r=e.color,o=r===void 0?n.defaultColor:r,a=e.onChange,s=J(e,["className","colorModel","color","onChange"]),l=m.useRef(null);ke(l);var c=we(n,o,a),i=c[0],d=c[1],f=T(["react-colorful",t]);return h.createElement("div",O({},s,{ref:l,className:f}),h.createElement(pe,{hsva:i,onChange:d}),h.createElement(ve,{hue:i.h,onChange:d,className:"react-colorful__last-control"}))},Ct={defaultColor:"000",toHsva:mt,fromHsva:function(e){return yt({h:e.h,s:e.s,v:e.v,a:1})},equal:kt},$t=function(e){return h.createElement(Mt,O({},e,{colorModel:Ct}))},It=function(e){var t=e.className,n=e.hsva,r=e.onChange,o={backgroundImage:"linear-gradient(90deg, "+B(Object.assign({},n,{a:0}))+", "+B(Object.assign({},n,{a:1}))+")"},a=T(["react-colorful__alpha",t]),s=y(100*n.a);return h.createElement("div",{className:a},h.createElement("div",{className:"react-colorful__alpha-gradient",style:o}),h.createElement(Q,{onMove:function(l){r({a:l.left})},onKey:function(l){r({a:R(n.a+l.left)})},"aria-label":"Alpha","aria-valuetext":s+"%","aria-valuenow":s,"aria-valuemin":"0","aria-valuemax":"100"},h.createElement(Z,{className:"react-colorful__alpha-pointer",left:n.a,color:B(n)})))},_e=function(e){var t=e.className,n=e.colorModel,r=e.color,o=r===void 0?n.defaultColor:r,a=e.onChange,s=J(e,["className","colorModel","color","onChange"]),l=m.useRef(null);ke(l);var c=we(n,o,a),i=c[0],d=c[1],f=T(["react-colorful",t]);return h.createElement("div",O({},s,{ref:l,className:f}),h.createElement(pe,{hsva:i,onChange:d}),h.createElement(ve,{hue:i.h,onChange:d}),h.createElement(It,{hsva:i,onChange:d,className:"react-colorful__last-control"}))},Ot={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:vt,fromHsva:B,equal:xe},Nt=function(e){return h.createElement(_e,O({},e,{colorModel:Ot}))},St={defaultColor:"rgba(0, 0, 0, 1)",toHsva:xt,fromHsva:function(e){var t=me(e);return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},equal:xe},Rt=function(e){return h.createElement(_e,O({},e,{colorModel:St}))},jt=$.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),zt=$(ue)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Ht=$.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"}}),Ft=$($e)(({theme:e})=>({fontFamily:e.typography.fonts.base})),Tt=$.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Pt=$.div(({theme:e,active:t})=>({width:16,height:16,boxShadow:t?`${e.appBorderColor} 0 0 0 1px inset, ${e.textMutedColor}50 0 0 0 4px`:`${e.appBorderColor} 0 0 0 1px inset`,borderRadius:e.appBorderRadius})),Lt=`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>')`,le=({value:e,style:t,...n})=>{let r=`linear-gradient(${e}, ${e}), ${Lt}, linear-gradient(#fff, #fff)`;return h.createElement(Pt,{...n,style:{...t,backgroundImage:r}})},qt=$(Ie.Input)(({theme:e,readOnly:t})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:e.typography.fonts.base})),Bt=$(Oe)(({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})),Ee=(e=>(e.RGB="rgb",e.HSL="hsl",e.HEX="hex",e))(Ee||{}),L=Object.values(Ee),Xt=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Dt=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Wt=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,Y=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Kt=/^\s*#?([0-9a-f]{3})\s*$/i,Vt={hex:$t,rgb:Rt,hsl:Nt},q={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},ce=e=>{let t=e==null?void 0:e.match(Xt);if(!t)return[0,0,0,1];let[,n,r,o,a=1]=t;return[n,r,o,a].map(Number)},S=e=>{if(!e)return;let t=!0;if(Dt.test(e)){let[s,l,c,i]=ce(e),[d,f,g]=_.rgb.hsl([s,l,c])||[0,0,0];return{valid:t,value:e,keyword:_.rgb.keyword([s,l,c]),colorSpace:"rgb",rgb:e,hsl:`hsla(${d}, ${f}%, ${g}%, ${i})`,hex:`#${_.rgb.hex([s,l,c]).toLowerCase()}`}}if(Wt.test(e)){let[s,l,c,i]=ce(e),[d,f,g]=_.hsl.rgb([s,l,c])||[0,0,0];return{valid:t,value:e,keyword:_.hsl.keyword([s,l,c]),colorSpace:"hsl",rgb:`rgba(${d}, ${f}, ${g}, ${i})`,hsl:e,hex:`#${_.hsl.hex([s,l,c]).toLowerCase()}`}}let n=e.replace("#",""),r=_.keyword.rgb(n)||_.hex.rgb(n),o=_.rgb.hsl(r),a=e;if(/[^#a-f0-9]/i.test(e)?a=n:Y.test(e)&&(a=`#${n}`),a.startsWith("#"))t=Y.test(a);else try{_.keyword.hex(a)}catch{t=!1}return{valid:t,value:a,keyword:_.rgb.keyword(r),colorSpace:"hex",rgb:`rgba(${r[0]}, ${r[1]}, ${r[2]}, 1)`,hsl:`hsla(${o[0]}, ${o[1]}%, ${o[2]}%, 1)`,hex:a}},At=(e,t,n)=>{if(!e||!(t!=null&&t.valid))return q[n];if(n!=="hex")return(t==null?void 0:t[n])||q[n];if(!t.hex.startsWith("#"))try{return`#${_.keyword.hex(t.hex)}`}catch{return q.hex}let r=t.hex.match(Kt);if(!r)return Y.test(t.hex)?t.hex:q.hex;let[o,a,s]=r[1].split("");return`#${o}${o}${a}${a}${s}${s}`},Gt=(e,t)=>{let[n,r]=m.useState(e||""),[o,a]=m.useState(()=>S(n)),[s,l]=m.useState((o==null?void 0:o.colorSpace)||"hex");m.useEffect(()=>{let f=e||"",g=S(f);r(f),a(g),l((g==null?void 0:g.colorSpace)||"hex")},[e]);let c=m.useMemo(()=>At(n,o,s).toLowerCase(),[n,o,s]),i=m.useCallback(f=>{let g=S(f),x=(g==null?void 0:g.value)||f||"";r(x),x===""&&(a(void 0),t(void 0)),g&&(a(g),l(g.colorSpace),t(g.value))},[t]),d=m.useCallback(()=>{let f=L.indexOf(s)+1;f>=L.length&&(f=0),l(L[f]);let g=(o==null?void 0:o[L[f]])||"";r(g),t(g)},[o,s,t]);return{value:n,realValue:c,updateValue:i,color:o,colorSpace:s,cycleColorSpace:d}},D=e=>e.replace(/\s*/,"").toLowerCase(),Ut=(e,t,n)=>{let[r,o]=m.useState(t!=null&&t.valid?[t]:[]);m.useEffect(()=>{t===void 0&&o([])},[t]);let a=m.useMemo(()=>(e||[]).map(l=>typeof l=="string"?S(l):l.title?{...S(l.color),keyword:l.title}:S(l.color)).concat(r).filter(Boolean).slice(-27),[e,r]),s=m.useCallback(l=>{l!=null&&l.valid&&(a.some(c=>D(c[n])===D(l[n]))||o(c=>c.concat(l)))},[n,a]);return{presets:a,addPreset:s}},Yt=({name:e,value:t,onChange:n,onFocus:r,onBlur:o,presetColors:a,startOpen:s=!1,argType:l})=>{var E;let c=m.useCallback(dt(n,200),[n]),{value:i,realValue:d,updateValue:f,color:g,colorSpace:x,cycleColorSpace:j}=Gt(t,c),{presets:M,addPreset:p}=Ut(a,g,x),b=Vt[x],w=!!((E=l==null?void 0:l.table)!=null&&E.readonly);return h.createElement(jt,{"aria-readonly":w},h.createElement(zt,{startOpen:s,trigger:w?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>p(g),tooltip:h.createElement(Ht,null,h.createElement(b,{color:d==="transparent"?"#000000":d,onChange:f,onFocus:r,onBlur:o}),M.length>0&&h.createElement(Tt,null,M.map((k,I)=>h.createElement(ue,{key:`${k.value}-${I}`,hasChrome:!1,tooltip:h.createElement(Ft,{note:k.keyword||k.value})},h.createElement(le,{value:k[x],active:g&&D(k[x])===D(g[x]),onClick:()=>f(k.value)})))))},h.createElement(le,{value:d,style:{margin:4}})),h.createElement(qt,{id:Ne(e),value:i,onChange:k=>f(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),i?h.createElement(Bt,{onClick:j}):null)},ln=Yt;export{Yt as ColorControl,ln as default};
|
|
1
|
+
import{al as Me,am as ie,an as Ce,ao as $,a2 as ue,a0 as $e,x as Ie,ap as Oe,aq as Ne}from"./index-BVSiPB0X.js";import{R as h,r as m}from"./index-CBqU2yxZ.js";import{g as fe}from"./_commonjsHelpers-BosuxZz1.js";import"./iframe-CFAYM9Mj.js";import"../sb-preview/runtime.js";import"./jsx-runtime-CKrituN3.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";var Se={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]};const F=Se,he={};for(const e of Object.keys(F))he[F[e]]=e;const u={rgb:{channels:3,labels:"rgb"},hsl:{channels:3,labels:"hsl"},hsv:{channels:3,labels:"hsv"},hwb:{channels:3,labels:"hwb"},cmyk:{channels:4,labels:"cmyk"},xyz:{channels:3,labels:"xyz"},lab:{channels:3,labels:"lab"},lch:{channels:3,labels:"lch"},hex:{channels:1,labels:["hex"]},keyword:{channels:1,labels:["keyword"]},ansi16:{channels:1,labels:["ansi16"]},ansi256:{channels:1,labels:["ansi256"]},hcg:{channels:3,labels:["h","c","g"]},apple:{channels:3,labels:["r16","g16","b16"]},gray:{channels:1,labels:["gray"]}};var de=u;for(const e of Object.keys(u)){if(!("channels"in u[e]))throw new Error("missing channels property: "+e);if(!("labels"in u[e]))throw new Error("missing channel labels property: "+e);if(u[e].labels.length!==u[e].channels)throw new Error("channel and label counts mismatch: "+e);const{channels:t,labels:n}=u[e];delete u[e].channels,delete u[e].labels,Object.defineProperty(u[e],"channels",{value:t}),Object.defineProperty(u[e],"labels",{value:n})}u.rgb.hsl=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.min(t,n,r),a=Math.max(t,n,r),s=a-o;let l,c;a===o?l=0:t===a?l=(n-r)/s:n===a?l=2+(r-t)/s:r===a&&(l=4+(t-n)/s),l=Math.min(l*60,360),l<0&&(l+=360);const i=(o+a)/2;return a===o?c=0:i<=.5?c=s/(a+o):c=s/(2-a-o),[l,c*100,i*100]};u.rgb.hsv=function(e){let t,n,r,o,a;const s=e[0]/255,l=e[1]/255,c=e[2]/255,i=Math.max(s,l,c),d=i-Math.min(s,l,c),f=function(g){return(i-g)/6/d+1/2};return d===0?(o=0,a=0):(a=d/i,t=f(s),n=f(l),r=f(c),s===i?o=r-n:l===i?o=1/3+t-r:c===i&&(o=2/3+n-t),o<0?o+=1:o>1&&(o-=1)),[o*360,a*100,i*100]};u.rgb.hwb=function(e){const t=e[0],n=e[1];let r=e[2];const o=u.rgb.hsl(e)[0],a=1/255*Math.min(t,Math.min(n,r));return r=1-1/255*Math.max(t,Math.max(n,r)),[o,a*100,r*100]};u.rgb.cmyk=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.min(1-t,1-n,1-r),a=(1-t-o)/(1-o)||0,s=(1-n-o)/(1-o)||0,l=(1-r-o)/(1-o)||0;return[a*100,s*100,l*100,o*100]};function Re(e,t){return(e[0]-t[0])**2+(e[1]-t[1])**2+(e[2]-t[2])**2}u.rgb.keyword=function(e){const t=he[e];if(t)return t;let n=1/0,r;for(const o of Object.keys(F)){const a=F[o],s=Re(e,a);s<n&&(n=s,r=o)}return r};u.keyword.rgb=function(e){return F[e]};u.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;const o=t*.4124+n*.3576+r*.1805,a=t*.2126+n*.7152+r*.0722,s=t*.0193+n*.1192+r*.9505;return[o*100,a*100,s*100]};u.rgb.lab=function(e){const t=u.rgb.xyz(e);let n=t[0],r=t[1],o=t[2];n/=95.047,r/=100,o/=108.883,n=n>.008856?n**(1/3):7.787*n+16/116,r=r>.008856?r**(1/3):7.787*r+16/116,o=o>.008856?o**(1/3):7.787*o+16/116;const a=116*r-16,s=500*(n-r),l=200*(r-o);return[a,s,l]};u.hsl.rgb=function(e){const t=e[0]/360,n=e[1]/100,r=e[2]/100;let o,a,s;if(n===0)return s=r*255,[s,s,s];r<.5?o=r*(1+n):o=r+n-r*n;const l=2*r-o,c=[0,0,0];for(let i=0;i<3;i++)a=t+1/3*-(i-1),a<0&&a++,a>1&&a--,6*a<1?s=l+(o-l)*6*a:2*a<1?s=o:3*a<2?s=l+(o-l)*(2/3-a)*6:s=l,c[i]=s*255;return c};u.hsl.hsv=function(e){const t=e[0];let n=e[1]/100,r=e[2]/100,o=n;const a=Math.max(r,.01);r*=2,n*=r<=1?r:2-r,o*=a<=1?a:2-a;const s=(r+n)/2,l=r===0?2*o/(a+o):2*n/(r+n);return[t,l*100,s*100]};u.hsv.rgb=function(e){const t=e[0]/60,n=e[1]/100;let r=e[2]/100;const o=Math.floor(t)%6,a=t-Math.floor(t),s=255*r*(1-n),l=255*r*(1-n*a),c=255*r*(1-n*(1-a));switch(r*=255,o){case 0:return[r,c,s];case 1:return[l,r,s];case 2:return[s,r,c];case 3:return[s,l,r];case 4:return[c,s,r];case 5:return[r,s,l]}};u.hsv.hsl=function(e){const t=e[0],n=e[1]/100,r=e[2]/100,o=Math.max(r,.01);let a,s;s=(2-n)*r;const l=(2-n)*o;return a=n*o,a/=l<=1?l:2-l,a=a||0,s/=2,[t,a*100,s*100]};u.hwb.rgb=function(e){const t=e[0]/360;let n=e[1]/100,r=e[2]/100;const o=n+r;let a;o>1&&(n/=o,r/=o);const s=Math.floor(6*t),l=1-r;a=6*t-s,s&1&&(a=1-a);const c=n+a*(l-n);let i,d,f;switch(s){default:case 6:case 0:i=l,d=c,f=n;break;case 1:i=c,d=l,f=n;break;case 2:i=n,d=l,f=c;break;case 3:i=n,d=c,f=l;break;case 4:i=c,d=n,f=l;break;case 5:i=l,d=n,f=c;break}return[i*255,d*255,f*255]};u.cmyk.rgb=function(e){const t=e[0]/100,n=e[1]/100,r=e[2]/100,o=e[3]/100,a=1-Math.min(1,t*(1-o)+o),s=1-Math.min(1,n*(1-o)+o),l=1-Math.min(1,r*(1-o)+o);return[a*255,s*255,l*255]};u.xyz.rgb=function(e){const t=e[0]/100,n=e[1]/100,r=e[2]/100;let o,a,s;return o=t*3.2406+n*-1.5372+r*-.4986,a=t*-.9689+n*1.8758+r*.0415,s=t*.0557+n*-.204+r*1.057,o=o>.0031308?1.055*o**(1/2.4)-.055:o*12.92,a=a>.0031308?1.055*a**(1/2.4)-.055:a*12.92,s=s>.0031308?1.055*s**(1/2.4)-.055:s*12.92,o=Math.min(Math.max(0,o),1),a=Math.min(Math.max(0,a),1),s=Math.min(Math.max(0,s),1),[o*255,a*255,s*255]};u.xyz.lab=function(e){let t=e[0],n=e[1],r=e[2];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;const o=116*n-16,a=500*(t-n),s=200*(n-r);return[o,a,s]};u.lab.xyz=function(e){const t=e[0],n=e[1],r=e[2];let o,a,s;a=(t+16)/116,o=n/500+a,s=a-r/200;const l=a**3,c=o**3,i=s**3;return a=l>.008856?l:(a-16/116)/7.787,o=c>.008856?c:(o-16/116)/7.787,s=i>.008856?i:(s-16/116)/7.787,o*=95.047,a*=100,s*=108.883,[o,a,s]};u.lab.lch=function(e){const t=e[0],n=e[1],r=e[2];let o;o=Math.atan2(r,n)*360/2/Math.PI,o<0&&(o+=360);const s=Math.sqrt(n*n+r*r);return[t,s,o]};u.lch.lab=function(e){const t=e[0],n=e[1],o=e[2]/360*2*Math.PI,a=n*Math.cos(o),s=n*Math.sin(o);return[t,a,s]};u.rgb.ansi16=function(e,t=null){const[n,r,o]=e;let a=t===null?u.rgb.hsv(e)[2]:t;if(a=Math.round(a/50),a===0)return 30;let s=30+(Math.round(o/255)<<2|Math.round(r/255)<<1|Math.round(n/255));return a===2&&(s+=60),s};u.hsv.ansi16=function(e){return u.rgb.ansi16(u.hsv.rgb(e),e[2])};u.rgb.ansi256=function(e){const 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)};u.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];const n=(~~(e>50)+1)*.5,r=(t&1)*n*255,o=(t>>1&1)*n*255,a=(t>>2&1)*n*255;return[r,o,a]};u.ansi256.rgb=function(e){if(e>=232){const a=(e-232)*10+8;return[a,a,a]}e-=16;let t;const n=Math.floor(e/36)/5*255,r=Math.floor((t=e%36)/6)/5*255,o=t%6/5*255;return[n,r,o]};u.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};u.hex.rgb=function(e){const 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(l=>l+l).join(""));const r=parseInt(n,16),o=r>>16&255,a=r>>8&255,s=r&255;return[o,a,s]};u.rgb.hcg=function(e){const t=e[0]/255,n=e[1]/255,r=e[2]/255,o=Math.max(Math.max(t,n),r),a=Math.min(Math.min(t,n),r),s=o-a;let l,c;return s<1?l=a/(1-s):l=0,s<=0?c=0:o===t?c=(n-r)/s%6:o===n?c=2+(r-t)/s:c=4+(t-n)/s,c/=6,c%=1,[c*360,s*100,l*100]};u.hsl.hcg=function(e){const t=e[1]/100,n=e[2]/100,r=n<.5?2*t*n:2*t*(1-n);let o=0;return r<1&&(o=(n-.5*r)/(1-r)),[e[0],r*100,o*100]};u.hsv.hcg=function(e){const t=e[1]/100,n=e[2]/100,r=t*n;let o=0;return r<1&&(o=(n-r)/(1-r)),[e[0],r*100,o*100]};u.hcg.rgb=function(e){const t=e[0]/360,n=e[1]/100,r=e[2]/100;if(n===0)return[r*255,r*255,r*255];const o=[0,0,0],a=t%1*6,s=a%1,l=1-s;let c=0;switch(Math.floor(a)){case 0:o[0]=1,o[1]=s,o[2]=0;break;case 1:o[0]=l,o[1]=1,o[2]=0;break;case 2:o[0]=0,o[1]=1,o[2]=s;break;case 3:o[0]=0,o[1]=l,o[2]=1;break;case 4:o[0]=s,o[1]=0,o[2]=1;break;default:o[0]=1,o[1]=0,o[2]=l}return c=(1-n)*r,[(n*o[0]+c)*255,(n*o[1]+c)*255,(n*o[2]+c)*255]};u.hcg.hsv=function(e){const t=e[1]/100,n=e[2]/100,r=t+n*(1-t);let o=0;return r>0&&(o=t/r),[e[0],o*100,r*100]};u.hcg.hsl=function(e){const t=e[1]/100,r=e[2]/100*(1-t)+.5*t;let o=0;return r>0&&r<.5?o=t/(2*r):r>=.5&&r<1&&(o=t/(2*(1-r))),[e[0],o*100,r*100]};u.hcg.hwb=function(e){const t=e[1]/100,n=e[2]/100,r=t+n*(1-t);return[e[0],(r-t)*100,(1-r)*100]};u.hwb.hcg=function(e){const t=e[1]/100,r=1-e[2]/100,o=r-t;let a=0;return o<1&&(a=(r-o)/(1-o)),[e[0],o*100,a*100]};u.apple.rgb=function(e){return[e[0]/65535*255,e[1]/65535*255,e[2]/65535*255]};u.rgb.apple=function(e){return[e[0]/255*65535,e[1]/255*65535,e[2]/255*65535]};u.gray.rgb=function(e){return[e[0]/100*255,e[0]/100*255,e[0]/100*255]};u.gray.hsl=function(e){return[0,0,e[0]]};u.gray.hsv=u.gray.hsl;u.gray.hwb=function(e){return[0,100,e[0]]};u.gray.cmyk=function(e){return[0,0,0,e[0]]};u.gray.lab=function(e){return[e[0],0,0]};u.gray.hex=function(e){const t=Math.round(e[0]/100*255)&255,r=((t<<16)+(t<<8)+t).toString(16).toUpperCase();return"000000".substring(r.length)+r};u.rgb.gray=function(e){return[(e[0]+e[1]+e[2])/3/255*100]};const X=de;function je(){const e={},t=Object.keys(X);for(let n=t.length,r=0;r<n;r++)e[t[r]]={distance:-1,parent:null};return e}function ze(e){const t=je(),n=[e];for(t[e].distance=0;n.length;){const r=n.pop(),o=Object.keys(X[r]);for(let a=o.length,s=0;s<a;s++){const l=o[s],c=t[l];c.distance===-1&&(c.distance=t[r].distance+1,c.parent=r,n.unshift(l))}}return t}function He(e,t){return function(n){return t(e(n))}}function Fe(e,t){const n=[t[e].parent,e];let r=X[t[e].parent][e],o=t[e].parent;for(;t[o].parent;)n.unshift(t[o].parent),r=He(X[t[o].parent][o],r),o=t[o].parent;return r.conversion=n,r}var Te=function(e){const t=ze(e),n={},r=Object.keys(t);for(let o=r.length,a=0;a<o;a++){const s=r[a];t[s].parent!==null&&(n[s]=Fe(s,t))}return n};const K=de,Pe=Te,N={},Le=Object.keys(K);function qe(e){const t=function(...n){const r=n[0];return r==null?r:(r.length>1&&(n=r),e(n))};return"conversion"in e&&(t.conversion=e.conversion),t}function Be(e){const t=function(...n){const r=n[0];if(r==null)return r;r.length>1&&(n=r);const o=e(n);if(typeof o=="object")for(let a=o.length,s=0;s<a;s++)o[s]=Math.round(o[s]);return o};return"conversion"in e&&(t.conversion=e.conversion),t}Le.forEach(e=>{N[e]={},Object.defineProperty(N[e],"channels",{value:K[e].channels}),Object.defineProperty(N[e],"labels",{value:K[e].labels});const t=Pe(e);Object.keys(t).forEach(r=>{const o=t[r];N[e][r]=Be(o),N[e][r].raw=qe(o)})});var Xe=N;const _=fe(Xe);var De=Me,We=function(){return De.Date.now()},Ke=We,Ve=/\s/;function Ae(e){for(var t=e.length;t--&&Ve.test(e.charAt(t)););return t}var Ge=Ae,Ue=Ge,Ye=/^\s+/;function Je(e){return e&&e.slice(0,Ue(e)+1).replace(Ye,"")}var Qe=Je,Ze=Qe,te=ie,et=Ce,ne=NaN,tt=/^[-+]0x[0-9a-f]+$/i,nt=/^0b[01]+$/i,rt=/^0o[0-7]+$/i,ot=parseInt;function at(e){if(typeof e=="number")return e;if(et(e))return ne;if(te(e)){var t=typeof e.valueOf=="function"?e.valueOf():e;e=te(t)?t+"":t}if(typeof e!="string")return e===0?e:+e;e=Ze(e);var n=nt.test(e);return n||rt.test(e)?ot(e.slice(2),n?2:8):tt.test(e)?ne:+e}var st=at,lt=ie,W=Ke,re=st,ct="Expected a function",it=Math.max,ut=Math.min;function ft(e,t,n){var r,o,a,s,l,c,i=0,d=!1,f=!1,g=!0;if(typeof e!="function")throw new TypeError(ct);t=re(t)||0,lt(n)&&(d=!!n.leading,f="maxWait"in n,a=f?it(re(n.maxWait)||0,t):a,g="trailing"in n?!!n.trailing:g);function x(v){var C=r,z=o;return r=o=void 0,i=v,s=e.apply(z,C),s}function j(v){return i=v,l=setTimeout(b,t),d?x(v):s}function M(v){var C=v-c,z=v-i,ee=t-C;return f?ut(ee,a-z):ee}function p(v){var C=v-c,z=v-i;return c===void 0||C>=t||C<0||f&&z>=a}function b(){var v=W();if(p(v))return w(v);l=setTimeout(b,M(v))}function w(v){return l=void 0,g&&r?x(v):(r=o=void 0,s)}function E(){l!==void 0&&clearTimeout(l),i=0,r=c=o=l=void 0}function k(){return l===void 0?s:w(W())}function I(){var v=W(),C=p(v);if(r=arguments,o=this,c=v,C){if(l===void 0)return j(c);if(f)return clearTimeout(l),l=setTimeout(b,t),x(c)}return l===void 0&&(l=setTimeout(b,t)),s}return I.cancel=E,I.flush=k,I}var ht=ft;const dt=fe(ht);function O(){return(O=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 J(e,t){if(e==null)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)t.indexOf(n=a[r])>=0||(o[n]=e[n]);return o}function V(e){var t=m.useRef(e),n=m.useRef(function(r){t.current&&t.current(r)});return t.current=e,n.current}var R=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=1),e>n?n:e<t?t:e},H=function(e){return"touches"in e},A=function(e){return e&&e.ownerDocument.defaultView||self},oe=function(e,t,n){var r=e.getBoundingClientRect(),o=H(t)?function(a,s){for(var l=0;l<a.length;l++)if(a[l].identifier===s)return a[l];return a[0]}(t.touches,n):t;return{left:R((o.pageX-(r.left+A(e).pageXOffset))/r.width),top:R((o.pageY-(r.top+A(e).pageYOffset))/r.height)}},ae=function(e){!H(e)&&e.preventDefault()},Q=h.memo(function(e){var t=e.onMove,n=e.onKey,r=J(e,["onMove","onKey"]),o=m.useRef(null),a=V(t),s=V(n),l=m.useRef(null),c=m.useRef(!1),i=m.useMemo(function(){var x=function(p){ae(p),(H(p)?p.touches.length>0:p.buttons>0)&&o.current?a(oe(o.current,p,l.current)):M(!1)},j=function(){return M(!1)};function M(p){var b=c.current,w=A(o.current),E=p?w.addEventListener:w.removeEventListener;E(b?"touchmove":"mousemove",x),E(b?"touchend":"mouseup",j)}return[function(p){var b=p.nativeEvent,w=o.current;if(w&&(ae(b),!function(k,I){return I&&!H(k)}(b,c.current)&&w)){if(H(b)){c.current=!0;var E=b.changedTouches||[];E.length&&(l.current=E[0].identifier)}w.focus(),a(oe(w,b,l.current)),M(!0)}},function(p){var b=p.which||p.keyCode;b<37||b>40||(p.preventDefault(),s({left:b===39?.05:b===37?-.05:0,top:b===40?.05:b===38?-.05:0}))},M]},[s,a]),d=i[0],f=i[1],g=i[2];return m.useEffect(function(){return g},[g]),h.createElement("div",O({},r,{onTouchStart:d,onMouseDown:d,className:"react-colorful__interactive",ref:o,onKeyDown:f,tabIndex:0,role:"slider"}))}),T=function(e){return e.filter(Boolean).join(" ")},Z=function(e){var t=e.color,n=e.left,r=e.top,o=r===void 0?.5:r,a=T(["react-colorful__pointer",e.className]);return h.createElement("div",{className:a,style:{top:100*o+"%",left:100*n+"%"}},h.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},y=function(e,t,n){return t===void 0&&(t=0),n===void 0&&(n=Math.pow(10,t)),Math.round(n*e)/n},gt={grad:.9,turn:360,rad:360/(2*Math.PI)},mt=function(e){return be(G(e))},G=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?y(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?y(parseInt(e.substring(6,8),16)/255,2):1}},bt=function(e,t){return t===void 0&&(t="deg"),Number(e)*(gt[t]||1)},vt=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?pt({h:bt(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}},pt=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}},yt=function(e){return wt(me(e))},ge=function(e){var t=e.s,n=e.v,r=e.a,o=(200-t)*n/100;return{h:y(e.h),s:y(o>0&&o<200?t*n/100/(o<=100?o:200-o)*100:0),l:y(o/2),a:y(r,2)}},U=function(e){var t=ge(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},B=function(e){var t=ge(e);return"hsla("+t.h+", "+t.s+"%, "+t.l+"%, "+t.a+")"},me=function(e){var t=e.h,n=e.s,r=e.v,o=e.a;t=t/360*6,n/=100,r/=100;var a=Math.floor(t),s=r*(1-n),l=r*(1-(t-a)*n),c=r*(1-(1-t+a)*n),i=a%6;return{r:y(255*[r,l,s,s,c,r][i]),g:y(255*[c,r,r,l,s,s][i]),b:y(255*[s,s,c,r,r,l][i]),a:y(o,2)}},xt=function(e){var t=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return t?be({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}},P=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},wt=function(e){var t=e.r,n=e.g,r=e.b,o=e.a,a=o<1?P(y(255*o)):"";return"#"+P(t)+P(n)+P(r)+a},be=function(e){var t=e.r,n=e.g,r=e.b,o=e.a,a=Math.max(t,n,r),s=a-Math.min(t,n,r),l=s?a===t?(n-r)/s:a===n?2+(r-t)/s:4+(t-n)/s:0;return{h:y(60*(l<0?l+6:l)),s:y(a?s/a*100:0),v:y(a/255*100),a:o}},ve=h.memo(function(e){var t=e.hue,n=e.onChange,r=T(["react-colorful__hue",e.className]);return h.createElement("div",{className:r},h.createElement(Q,{onMove:function(o){n({h:360*o.left})},onKey:function(o){n({h:R(t+360*o.left,0,360)})},"aria-label":"Hue","aria-valuenow":y(t),"aria-valuemax":"360","aria-valuemin":"0"},h.createElement(Z,{className:"react-colorful__hue-pointer",left:t/360,color:U({h:t,s:100,v:100,a:1})})))}),pe=h.memo(function(e){var t=e.hsva,n=e.onChange,r={backgroundColor:U({h:t.h,s:100,v:100,a:1})};return h.createElement("div",{className:"react-colorful__saturation",style:r},h.createElement(Q,{onMove:function(o){n({s:100*o.left,v:100-100*o.top})},onKey:function(o){n({s:R(t.s+100*o.left,0,100),v:R(t.v-100*o.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+y(t.s)+"%, Brightness "+y(t.v)+"%"},h.createElement(Z,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:U(t)})))}),ye=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},xe=function(e,t){return e.replace(/\s/g,"")===t.replace(/\s/g,"")},kt=function(e,t){return e.toLowerCase()===t.toLowerCase()||ye(G(e),G(t))};function we(e,t,n){var r=V(n),o=m.useState(function(){return e.toHsva(t)}),a=o[0],s=o[1],l=m.useRef({color:t,hsva:a});m.useEffect(function(){if(!e.equal(t,l.current.color)){var i=e.toHsva(t);l.current={hsva:i,color:t},s(i)}},[t,e]),m.useEffect(function(){var i;ye(a,l.current.hsva)||e.equal(i=e.fromHsva(a),l.current.color)||(l.current={hsva:a,color:i},r(i))},[a,e,r]);var c=m.useCallback(function(i){s(function(d){return Object.assign({},d,i)})},[]);return[a,c]}var _t=typeof window<"u"?m.useLayoutEffect:m.useEffect,Et=function(){return typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0},se=new Map,ke=function(e){_t(function(){var t=e.current?e.current.ownerDocument:document;if(t!==void 0&&!se.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}`,se.set(t,n);var r=Et();r&&n.setAttribute("nonce",r),t.head.appendChild(n)}},[])},Mt=function(e){var t=e.className,n=e.colorModel,r=e.color,o=r===void 0?n.defaultColor:r,a=e.onChange,s=J(e,["className","colorModel","color","onChange"]),l=m.useRef(null);ke(l);var c=we(n,o,a),i=c[0],d=c[1],f=T(["react-colorful",t]);return h.createElement("div",O({},s,{ref:l,className:f}),h.createElement(pe,{hsva:i,onChange:d}),h.createElement(ve,{hue:i.h,onChange:d,className:"react-colorful__last-control"}))},Ct={defaultColor:"000",toHsva:mt,fromHsva:function(e){return yt({h:e.h,s:e.s,v:e.v,a:1})},equal:kt},$t=function(e){return h.createElement(Mt,O({},e,{colorModel:Ct}))},It=function(e){var t=e.className,n=e.hsva,r=e.onChange,o={backgroundImage:"linear-gradient(90deg, "+B(Object.assign({},n,{a:0}))+", "+B(Object.assign({},n,{a:1}))+")"},a=T(["react-colorful__alpha",t]),s=y(100*n.a);return h.createElement("div",{className:a},h.createElement("div",{className:"react-colorful__alpha-gradient",style:o}),h.createElement(Q,{onMove:function(l){r({a:l.left})},onKey:function(l){r({a:R(n.a+l.left)})},"aria-label":"Alpha","aria-valuetext":s+"%","aria-valuenow":s,"aria-valuemin":"0","aria-valuemax":"100"},h.createElement(Z,{className:"react-colorful__alpha-pointer",left:n.a,color:B(n)})))},_e=function(e){var t=e.className,n=e.colorModel,r=e.color,o=r===void 0?n.defaultColor:r,a=e.onChange,s=J(e,["className","colorModel","color","onChange"]),l=m.useRef(null);ke(l);var c=we(n,o,a),i=c[0],d=c[1],f=T(["react-colorful",t]);return h.createElement("div",O({},s,{ref:l,className:f}),h.createElement(pe,{hsva:i,onChange:d}),h.createElement(ve,{hue:i.h,onChange:d}),h.createElement(It,{hsva:i,onChange:d,className:"react-colorful__last-control"}))},Ot={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:vt,fromHsva:B,equal:xe},Nt=function(e){return h.createElement(_e,O({},e,{colorModel:Ot}))},St={defaultColor:"rgba(0, 0, 0, 1)",toHsva:xt,fromHsva:function(e){var t=me(e);return"rgba("+t.r+", "+t.g+", "+t.b+", "+t.a+")"},equal:xe},Rt=function(e){return h.createElement(_e,O({},e,{colorModel:St}))},jt=$.div({position:"relative",maxWidth:250,'&[aria-readonly="true"]':{opacity:.5}}),zt=$(ue)({position:"absolute",zIndex:1,top:4,left:4,"[aria-readonly=true] &":{cursor:"not-allowed"}}),Ht=$.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"}}),Ft=$($e)(({theme:e})=>({fontFamily:e.typography.fonts.base})),Tt=$.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Pt=$.div(({theme:e,active:t})=>({width:16,height:16,boxShadow:t?`${e.appBorderColor} 0 0 0 1px inset, ${e.textMutedColor}50 0 0 0 4px`:`${e.appBorderColor} 0 0 0 1px inset`,borderRadius:e.appBorderRadius})),Lt=`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>')`,le=({value:e,style:t,...n})=>{let r=`linear-gradient(${e}, ${e}), ${Lt}, linear-gradient(#fff, #fff)`;return h.createElement(Pt,{...n,style:{...t,backgroundImage:r}})},qt=$(Ie.Input)(({theme:e,readOnly:t})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:e.typography.fonts.base})),Bt=$(Oe)(({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})),Ee=(e=>(e.RGB="rgb",e.HSL="hsl",e.HEX="hex",e))(Ee||{}),L=Object.values(Ee),Xt=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,Dt=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,Wt=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,Y=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,Kt=/^\s*#?([0-9a-f]{3})\s*$/i,Vt={hex:$t,rgb:Rt,hsl:Nt},q={hex:"transparent",rgb:"rgba(0, 0, 0, 0)",hsl:"hsla(0, 0%, 0%, 0)"},ce=e=>{let t=e==null?void 0:e.match(Xt);if(!t)return[0,0,0,1];let[,n,r,o,a=1]=t;return[n,r,o,a].map(Number)},S=e=>{if(!e)return;let t=!0;if(Dt.test(e)){let[s,l,c,i]=ce(e),[d,f,g]=_.rgb.hsl([s,l,c])||[0,0,0];return{valid:t,value:e,keyword:_.rgb.keyword([s,l,c]),colorSpace:"rgb",rgb:e,hsl:`hsla(${d}, ${f}%, ${g}%, ${i})`,hex:`#${_.rgb.hex([s,l,c]).toLowerCase()}`}}if(Wt.test(e)){let[s,l,c,i]=ce(e),[d,f,g]=_.hsl.rgb([s,l,c])||[0,0,0];return{valid:t,value:e,keyword:_.hsl.keyword([s,l,c]),colorSpace:"hsl",rgb:`rgba(${d}, ${f}, ${g}, ${i})`,hsl:e,hex:`#${_.hsl.hex([s,l,c]).toLowerCase()}`}}let n=e.replace("#",""),r=_.keyword.rgb(n)||_.hex.rgb(n),o=_.rgb.hsl(r),a=e;if(/[^#a-f0-9]/i.test(e)?a=n:Y.test(e)&&(a=`#${n}`),a.startsWith("#"))t=Y.test(a);else try{_.keyword.hex(a)}catch{t=!1}return{valid:t,value:a,keyword:_.rgb.keyword(r),colorSpace:"hex",rgb:`rgba(${r[0]}, ${r[1]}, ${r[2]}, 1)`,hsl:`hsla(${o[0]}, ${o[1]}%, ${o[2]}%, 1)`,hex:a}},At=(e,t,n)=>{if(!e||!(t!=null&&t.valid))return q[n];if(n!=="hex")return(t==null?void 0:t[n])||q[n];if(!t.hex.startsWith("#"))try{return`#${_.keyword.hex(t.hex)}`}catch{return q.hex}let r=t.hex.match(Kt);if(!r)return Y.test(t.hex)?t.hex:q.hex;let[o,a,s]=r[1].split("");return`#${o}${o}${a}${a}${s}${s}`},Gt=(e,t)=>{let[n,r]=m.useState(e||""),[o,a]=m.useState(()=>S(n)),[s,l]=m.useState((o==null?void 0:o.colorSpace)||"hex");m.useEffect(()=>{let f=e||"",g=S(f);r(f),a(g),l((g==null?void 0:g.colorSpace)||"hex")},[e]);let c=m.useMemo(()=>At(n,o,s).toLowerCase(),[n,o,s]),i=m.useCallback(f=>{let g=S(f),x=(g==null?void 0:g.value)||f||"";r(x),x===""&&(a(void 0),t(void 0)),g&&(a(g),l(g.colorSpace),t(g.value))},[t]),d=m.useCallback(()=>{let f=L.indexOf(s)+1;f>=L.length&&(f=0),l(L[f]);let g=(o==null?void 0:o[L[f]])||"";r(g),t(g)},[o,s,t]);return{value:n,realValue:c,updateValue:i,color:o,colorSpace:s,cycleColorSpace:d}},D=e=>e.replace(/\s*/,"").toLowerCase(),Ut=(e,t,n)=>{let[r,o]=m.useState(t!=null&&t.valid?[t]:[]);m.useEffect(()=>{t===void 0&&o([])},[t]);let a=m.useMemo(()=>(e||[]).map(l=>typeof l=="string"?S(l):l.title?{...S(l.color),keyword:l.title}:S(l.color)).concat(r).filter(Boolean).slice(-27),[e,r]),s=m.useCallback(l=>{l!=null&&l.valid&&(a.some(c=>D(c[n])===D(l[n]))||o(c=>c.concat(l)))},[n,a]);return{presets:a,addPreset:s}},Yt=({name:e,value:t,onChange:n,onFocus:r,onBlur:o,presetColors:a,startOpen:s=!1,argType:l})=>{var E;let c=m.useCallback(dt(n,200),[n]),{value:i,realValue:d,updateValue:f,color:g,colorSpace:x,cycleColorSpace:j}=Gt(t,c),{presets:M,addPreset:p}=Ut(a,g,x),b=Vt[x],w=!!((E=l==null?void 0:l.table)!=null&&E.readonly);return h.createElement(jt,{"aria-readonly":w},h.createElement(zt,{startOpen:s,trigger:w?[null]:void 0,closeOnOutsideClick:!0,onVisibleChange:()=>p(g),tooltip:h.createElement(Ht,null,h.createElement(b,{color:d==="transparent"?"#000000":d,onChange:f,onFocus:r,onBlur:o}),M.length>0&&h.createElement(Tt,null,M.map((k,I)=>h.createElement(ue,{key:`${k.value}-${I}`,hasChrome:!1,tooltip:h.createElement(Ft,{note:k.keyword||k.value})},h.createElement(le,{value:k[x],active:g&&D(k[x])===D(g[x]),onClick:()=>f(k.value)})))))},h.createElement(le,{value:d,style:{margin:4}})),h.createElement(qt,{id:Ne(e),value:i,onChange:k=>f(k.target.value),onFocus:k=>k.target.select(),readOnly:w,placeholder:"Choose color..."}),i?h.createElement(Bt,{onClick:j}):null)},ln=Yt;export{Yt as ColorControl,ln as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{D as c,d as l}from"./chunk-NUUEMKO5-
|
|
1
|
+
import{D as c,d as l}from"./chunk-NUUEMKO5-B_IYSwMe.js";import"./iframe-CFAYM9Mj.js";import"../sb-preview/runtime.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./index-BVSiPB0X.js";import"./jsx-runtime-CKrituN3.js";import"./index-D5dhze5r.js";import"./index-D-8MO0q_.js";import"./index-DF3CPj03.js";import"./index-DrFu-skq.js";import"./client-cjKEjqP-.js";export{c as DocsRenderer,l as defaultComponents};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as
|
|
1
|
+
import{j as l}from"./jsx-runtime-CKrituN3.js";import{m as o,s as r,g as s}from"./classNames-DypE0CS3.js";import{w as i}from"./componentNames-BSriaIOD.js";import{a as m}from"./constants-DL6gdbsq.js";const p="_FieldAdditionalText_1bg40_4",_={FieldAdditionalText:p,"FieldAdditionalText--variant-normal":"_FieldAdditionalText--variant-normal_1bg40_11","FieldAdditionalText--variant-error":"_FieldAdditionalText--variant-error_1bg40_14"},a=({id:e,variant:t=m,children:d})=>{const n=o(_,i.FieldAdditionalText,[r("variant",t)]);return l.jsx("p",{id:e,className:n.join(" "),...s({preplyDsComponent:i.FieldAdditionalText}),children:d})};try{a.displayName="FieldAdditionalText",a.__docgenInfo={description:"",displayName:"FieldAdditionalText",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"FieldAdditionalTextVariant | undefined"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string | undefined"}}}}}catch{}export{a as F};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._FieldAdditionalText_1bg40_4{margin:0;font-weight:var(--026ea8);font-size:var(--3f1843);line-height:var(--030292);letter-spacing:var(--c142cd)}._FieldAdditionalText--variant-normal_1bg40_11{color:var(--3d280d)}._FieldAdditionalText--variant-error_1bg40_14{color:var(--9167e9)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as r}from"./jsx-runtime-CKrituN3.js";import{F as t}from"./FieldAdditionalText-
|
|
1
|
+
import{j as r}from"./jsx-runtime-CKrituN3.js";import{F as t}from"./FieldAdditionalText-BoS3oi_w.js";import{S as p}from"./StoryContextDSWeb-CwCKdulo.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-DypE0CS3.js";import"./componentNames-BSriaIOD.js";import"./constants-DL6gdbsq.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-CLBjXsMY.js";import"./useTheme-pdzgtlkQ.js";import"./constants-mdQROz_Y.js";const P={title:"components/FieldAdditionalText",component:t,decorators:[n=>r.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:r.jsx(p,{theme:"tokyo-ui",children:n()})})]},e=()=>r.jsx(t,{children:"Provide a telephone number so we can contact you."}),o=()=>r.jsx(t,{variant:"error",children:"Please fill out this field."});var i,a,s;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:"() => <FieldAdditionalText>Provide a telephone number so we can contact you.</FieldAdditionalText>",...(s=(a=e.parameters)==null?void 0:a.docs)==null?void 0:s.source}}};var d,m,l;o.parameters={...o.parameters,docs:{...(d=o.parameters)==null?void 0:d.docs,source:{originalSource:'() => <FieldAdditionalText variant="error">Please fill out this field.</FieldAdditionalText>',...(l=(m=o.parameters)==null?void 0:m.docs)==null?void 0:l.source}}};const b=["Normal","Error"];export{o as Error,e as Normal,b as __namedExportsOrder,P as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._FieldButton_ti9le_4{display:flex;justify-content:center;align-items:center;min-width:var(--d57208);height:var(--3caeb9);border-width:1px;border-style:solid;border-radius:var(--0191ea);border-color:var(--ea1746);background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;-ms-touch-action:manipulation;touch-action:manipulation}@media (hover: hover) and (pointer: fine){._FieldButton_ti9le_4:hover{background-color:var(--0bbea4)}}._FieldButton_ti9le_4:active{background-color:var(--33e933)}._FieldButton_ti9le_4:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}._FieldButton_ti9le_4 svg{width:var(--f02c4e);height:var(--f02c4e)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as a}from"./jsx-runtime-CKrituN3.js";import{m as p,g as m}from"./classNames-
|
|
1
|
+
import{j as a}from"./jsx-runtime-CKrituN3.js";import{m as p,g as m}from"./classNames-DypE0CS3.js";import{w as n}from"./componentNames-BSriaIOD.js";const c="_FieldButton_ti9le_4",f={FieldButton:c},o=({svg:t,assistiveText:r,onClick:e,dataset:i})=>{const l=p(f,n.FieldButton),d=s=>{s.stopPropagation(),e==null||e(s)},u={...m(i,{preplyDsComponent:n.FieldButton}),className:l.join(" "),title:r,onClick:d};return a.jsx("button",{...u,type:"button",children:a.jsx(t,{"aria-hidden":"true",focusable:"false"})})};try{o.displayName="FieldButton",o.__docgenInfo={description:"",displayName:"FieldButton",props:{svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"ReactSVGComponentType"}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"MouseEventHandler<Element>"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}}}}}catch{}export{o as F};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-CKrituN3.js";import{F as a}from"./LibraryExplore-Doyt8zmK.js";import{F as i}from"./FieldButton-
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{F as a}from"./LibraryExplore-Doyt8zmK.js";import{F as i}from"./FieldButton-C7ilyHtZ.js";import{S as p}from"./StoryContextDSWeb-CwCKdulo.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-DypE0CS3.js";import"./componentNames-BSriaIOD.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-CLBjXsMY.js";import"./useTheme-pdzgtlkQ.js";import"./constants-mdQROz_Y.js";const g={title:"components/FieldButton",component:i,decorators:[m=>t.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:t.jsx(p,{theme:"tokyo-ui",children:m()})})]},o=()=>t.jsx(i,{svg:a,assistiveText:"Lorem Ipsum",onClick:()=>{}});o.storyName="FieldButton";var e,r,s;o.parameters={...o.parameters,docs:{...(e=o.parameters)==null?void 0:e.docs,source:{originalSource:'() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />',...(s=(r=o.parameters)==null?void 0:r.docs)==null?void 0:s.source}}};const h=["Base"];export{o as Base,h as __namedExportsOrder,g as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._FieldLayout--input_1pfku_5{border-radius:var(--c4b051);display:flex;position:relative;align-items:center;background-color:var(--302ecf);color:var(--41d493);background-color:var(--211bc0)}@media (hover: hover) and (pointer: fine){._FieldLayout--input_1pfku_5:hover input,._FieldLayout--input_1pfku_5:hover textarea{border-color:var(--0bd642)}}._FieldLayout--input_1pfku_5 input,._FieldLayout--input_1pfku_5 textarea{border-color:var(--29cd58);border-width:var(--d9baa3);border-radius:var(--c4b051);border-style:solid;background:none;outline:none;font-size:var(--0c62d6);font-weight:var(--cb99be);line-height:var(--829b1e);letter-spacing:var(--035113);font-style:var(--a833d1);font-variation-settings:var(--5bcea1);padding:calc(var(--d9baa3) + var(--1ba55a));padding-right:calc(var(--477fda) - var(--d9baa3));padding-left:calc(var(--477fda) - var(--d9baa3))}._FieldLayout--input_1pfku_5 input::placeholder,._FieldLayout--input_1pfku_5 textarea::placeholder{color:var(--d9209f)}._FieldLayout--icon_1pfku_42{position:absolute;top:0;display:flex;align-items:center;height:100%;left:calc(var(--477fda) - var(--d9baa3));font-size:0;pointer-events:none}._FieldLayout--icon_1pfku_42 svg{color:var(--cbc724)}._FieldLayout--has-icon_1pfku_55 ._FieldLayout--input_1pfku_5 input{padding-left:calc(calc(var(--477fda) - var(--d9baa3)) + var(--7c1b1c) + var(--1ba55a))}._FieldLayout--has-button_1pfku_58 ._FieldLayout--input_1pfku_5 input{padding-right:58px}._FieldLayout--has-error_1pfku_61 ._FieldLayout--input_1pfku_5{background-color:var(--95df5b)}._FieldLayout--has-error_1pfku_61 ._FieldLayout--input_1pfku_5 input,._FieldLayout--has-error_1pfku_61 ._FieldLayout--input_1pfku_5 textarea{border-color:var(--eaf4a3);color:var(--7b0f41)}._FieldLayout--has-error_1pfku_61 ._FieldLayout--icon_1pfku_42 svg{color:var(--7b0f41)}._FieldLayout--is-focused_1pfku_72 ._FieldLayout--input_1pfku_5 input,._FieldLayout--is-focused_1pfku_72 ._FieldLayout--input_1pfku_5 textarea{border-color:var(--398094)}._FieldLayout--is-disabled_1pfku_76 ._FieldLayout--input_1pfku_5{background-color:var(--04daeb)}._FieldLayout--is-disabled_1pfku_76 ._FieldLayout--input_1pfku_5 input,._FieldLayout--is-disabled_1pfku_76 ._FieldLayout--input_1pfku_5 textarea{border-color:transparent}._FieldLayout--input_1pfku_5 button{position:absolute;top:calc(var(--1ba55a) + var(--6947b0));right:var(--6947b0);margin-top:calc(-1 * var(--1ba55a));margin-bottom:calc(-1 * var(--1ba55a))}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{j as d}from"./jsx-runtime-CKrituN3.js";import{r}from"./index-CBqU2yxZ.js";import{F as E}from"./FieldLayoutBase-Df6Ude-W.js";import{d as o,b as a}from"./classNames-DypE0CS3.js";import{w as t}from"./componentNames-BSriaIOD.js";const s={"FieldLayout--input":"_FieldLayout--input_1pfku_5","FieldLayout--icon":"_FieldLayout--icon_1pfku_42","FieldLayout--has-icon":"_FieldLayout--has-icon_1pfku_55","FieldLayout--has-button":"_FieldLayout--has-button_1pfku_58","FieldLayout--has-error":"_FieldLayout--has-error_1pfku_61","FieldLayout--is-focused":"_FieldLayout--is-focused_1pfku_72","FieldLayout--is-disabled":"_FieldLayout--is-disabled_1pfku_76"},w=({id:p,className:m,input:F,icon:i,button:c,disabled:f,isFocused:y,hasError:b,inputHandle:e,onClick:u,preplyDsComponent:_,...q},V)=>{const n=r.useRef(null);r.useImperativeHandle(V,()=>({setFocus:()=>e==null?void 0:e.setFocus(),scrollIntoView:()=>{var l;return(l=n==null?void 0:n.current)==null?void 0:l.scrollIntoView()}}));const L=o(s,t.FieldLayout,[a("is-disabled",void 0,f),a("is-focused",void 0,y),a("has-error",void 0,b),a("has-icon",void 0,!!i),a("has-button",void 0,!!c)]),N=m?[m,...L]:L,g=o(s,t.FieldLayout,["input"]),C=o(s,t.FieldLayout,["icon"]),v=l=>{e==null||e.setFocus(),u==null||u(l)};return d.jsx(E,{id:p,className:N.join(" "),disabled:f,isFocused:y,hasError:b,...q,preplyDsComponent:_??t.FieldLayout,ref:n,children:d.jsxs("div",{className:g.join(" "),onClick:v,children:[i&&d.jsx("span",{className:C.join(" "),children:i}),F,c]})})},h=r.forwardRef(w);try{h.displayName="FieldLayout",h.__docgenInfo={description:"A component for building custom fields.",displayName:"FieldLayout",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},preplyDsComponent:{defaultValue:null,description:"@see getDatasetProps",name:"preplyDsComponent",required:!1,type:{name:"string | undefined"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"ReactNode"}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean | undefined"}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"boolean | undefined"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string | undefined"}},hideLabel:{defaultValue:null,description:"",name:"hideLabel",required:!1,type:{name:"boolean | undefined"}},wrapLabel:{defaultValue:null,description:"",name:"wrapLabel",required:!1,type:{name:"boolean | undefined"}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",required:!1,type:{name:"ReactNode"}},additionalText:{defaultValue:null,description:"",name:"additionalText",required:!1,type:{name:"ReactNode"}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"boolean | undefined"}},isFocused:{defaultValue:null,description:"",name:"isFocused",required:!1,type:{name:"boolean | undefined"}},isTouched:{defaultValue:null,description:"",name:"isTouched",required:!1,type:{name:"boolean | undefined"}},isChanged:{defaultValue:null,description:"",name:"isChanged",required:!1,type:{name:"boolean | undefined"}},hasValue:{defaultValue:null,description:"",name:"hasValue",required:!1,type:{name:"boolean | undefined"}},input:{defaultValue:null,description:"An `<input>` element.",name:"input",required:!0,type:{name:"ReactElement<any, string | JSXElementConstructor<any>>"}},inputHandle:{defaultValue:null,description:"A ref handle to the `<input>` element, used to manage focus when\nclicking on elements within the layout, such as the button and icon.",name:"inputHandle",required:!0,type:{name:"InputImperativeHandle | null"}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined"}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"ReactElement<FieldButtonProps, string | JSXElementConstructor<any>> | undefined"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"MouseEventHandler<Element> | undefined"}}}}}catch{}export{h as F};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{j as t}from"./jsx-runtime-CKrituN3.js";import{F as s,a as m}from"./User-louGEvpx.js";import{F as p}from"./FieldButton-
|
|
1
|
+
import{j as t}from"./jsx-runtime-CKrituN3.js";import{F as s,a as m}from"./User-louGEvpx.js";import{F as p}from"./FieldButton-C7ilyHtZ.js";import{I as l}from"./Icon-Cn3B7mqs.js";import{I as u}from"./InputText-DYbGFufD.js";import{F as a}from"./FieldLayout-DsdOLmaV.js";import{S as d}from"./StoryContextDSWeb-CwCKdulo.js";import"./index-CBqU2yxZ.js";import"./_commonjsHelpers-BosuxZz1.js";import"./classNames-DypE0CS3.js";import"./componentNames-BSriaIOD.js";import"./text-accent-CRIVfBVN.js";import"./render-icon-DsMGBPwY.js";import"./FieldLayoutBase-Df6Ude-W.js";import"./getInputProps-CQF_KcrT.js";import"./FieldAdditionalText-BoS3oi_w.js";import"./constants-DL6gdbsq.js";import"./StorybookGlobalStyle-C718IdTK.js";import"./styled-components.browser.esm-BUFlhth0.js";import"./RootProvider-CLBjXsMY.js";import"./useTheme-pdzgtlkQ.js";import"./constants-mdQROz_Y.js";const J={title:"components/FieldLayout",component:a,decorators:[e=>t.jsx("div",{"data-preply-ds-theme":"tokyo-ui",children:t.jsx(d,{theme:"tokyo-ui",children:e()})})]},o=()=>{const e={current:null};return t.jsx(a,{id:"foo1",input:t.jsx(u,{type:"text",id:"foo1",ref:e,defaultValue:"John Smith"}),icon:t.jsx(l,{svg:s,label:"The hat"}),button:t.jsx(p,{svg:m,assistiveText:"Do the thing",onClick:()=>{}}),label:"Full name",inputHandle:e.current})};o.storyName="FieldLayout";var r,i,n;o.parameters={...o.parameters,docs:{...(r=o.parameters)==null?void 0:r.docs,source:{originalSource:`() => {
|
|
2
2
|
const ref = {
|
|
3
3
|
current: null
|
|
4
4
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._InputText_1406w_4,._InputPassword_1406w_11,._InputDate_1406w_18,._InputTime_1406w_25,._InputNumber_1406w_32,._Textarea_1406w_39{display:block;width:100%;padding:calc(var(--d9baa3) + var(--1ba55a));padding-left:calc(var(--477fda) - var(--d9baa3));padding-right:var(--d9baa3)}._Textarea--resize-none_1406w_46{resize:none}._Textarea--resize-vertical_1406w_49{resize:vertical}._Textarea--resize-horizontal_1406w_52{resize:horizontal}._Textarea--resize-both_1406w_55{resize:both}._Checkbox_1406w_58,._Radio_1406w_61{display:inline-block}._Select_1406w_64{display:block;width:100%;padding:calc(var(--d9baa3) + var(--1ba55a));padding-left:calc(var(--477fda) - var(--d9baa3));padding-right:var(--d9baa3)}._FieldLabel_11ap2_4{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:var(--8d63e4);line-height:var(--d4313c);color:var(--e41135);font-size:var(--343d89);font-weight:var(--b44390);line-height:var(--360264);letter-spacing:var(--b8c41f);font-style:var(--0ab3be);display:flex;gap:var(--6947b0);max-width:max-content}._FieldLabel--wrap_11ap2_19{display:inline}._FieldLabel--wrapGap_11ap2_22{width:var(--6947b0);display:inline-block}._FieldLabel--required_11ap2_26{display:flex;gap:var(--6947b0);color:var(--3d280d)}._FieldLabel--hide_11ap2_31{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}._FieldLayoutBase_cx0t1_2{display:flex;flex-direction:column;gap:var(--6947b0)}._FieldLayoutBase_cx0t1_2 input,._FieldLayoutBase_cx0t1_2 textarea{display:block;width:100%}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as l}from"./jsx-runtime-CKrituN3.js";import{r as p}from"./index-CBqU2yxZ.js";import{u as z,g as H,a as k}from"./getInputProps-CQF_KcrT.js";import{g as C,m as D,b as
|
|
2
|
-
@see getDatasetProps`,name:"preplyDsComponent",required:!1,type:{name:"string | undefined"}},
|
|
1
|
+
import{j as l}from"./jsx-runtime-CKrituN3.js";import{r as p}from"./index-CBqU2yxZ.js";import{u as z,g as H,a as k}from"./getInputProps-CQF_KcrT.js";import{g as C,m as D,b as v,d as B}from"./classNames-DypE0CS3.js";import{F as A}from"./FieldAdditionalText-BoS3oi_w.js";const g={textarea:"textarea",select:"select"},K=()=>{},S=(e,a)=>{const{type:n,id:t,name:r,className:d,onChange:i,onFocus:u,onBlur:f,onClick:y,onKeyDown:_,onKeyUp:b,onCopy:q,onPaste:L,required:E,readOnly:c,disabled:m,dataset:V,preplyDsComponent:x}=e,s=p.useRef(null);p.useImperativeHandle(a,()=>({setFocus:()=>{var o;return(o=s.current)==null?void 0:o.focus()},scrollIntoView:()=>{var o;return(o=s.current)==null?void 0:o.scrollIntoView()}}));const R=z({disabled:m,captureChildEvents:!0,onBlur:f,onFocus:u}),I=g[n]||"input",j=I===n in g?void 0:n,P={...{ref:s,type:j,id:t,name:r,className:d,...R,onChange:i||K,onClick:y,onKeyDown:_,onKeyUp:b,onCopy:q,onPaste:L,required:E,readOnly:c,disabled:m},...H(e),...C(V,{preplyDsComponent:x}),...k(e)};return l.jsx(I,{...P,ref:s})},N=p.forwardRef(S);try{N.displayName="InputBase",N.__docgenInfo={description:"",displayName:"InputBase",props:{type:{defaultValue:null,description:"",name:"type",required:!0,type:{name:'"number" | "url" | "email" | "tel" | "text" | "search" | "password" | "date" | "time" | "textarea" | "select" | "checkbox" | "radio"'}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:'"url" | "name" | "off" | "on" | "email" | "username" | "language" | "tel" | "new-password" | "current-password" | undefined'}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string | undefined"}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"number | undefined"}},id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"string | undefined"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string | undefined"}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"string | undefined"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"ChangeEventHandler<Element> | undefined"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"FocusEventHandler<Element> | undefined"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"FocusEventHandler<Element> | undefined"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"MouseEventHandler<Element> | undefined"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"KeyboardEventHandler<Element> | undefined"}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"KeyboardEventHandler<Element> | undefined"}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"ClipboardEventHandler<Element> | undefined"}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"ClipboardEventHandler<Element> | undefined"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean | undefined"}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"boolean | undefined"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"boolean | undefined"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string | undefined"}},preplyDsComponent:{defaultValue:null,description:`@deprecated preplyDsComponent is meant for internal Design SYstem use only!!
|
|
2
|
+
@see getDatasetProps`,name:"preplyDsComponent",required:!1,type:{name:"string | undefined"}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"number | undefined"}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"ResizeOptions | undefined"}},min:{defaultValue:null,description:"",name:"min",required:!1,type:{name:"string | undefined"}},max:{defaultValue:null,description:"",name:"max",required:!1,type:{name:"string | undefined"}},checked:{defaultValue:null,description:"",name:"checked",required:!1,type:{name:"boolean | undefined"}}}}}catch{}function me(e,a,n,t=[]){return p.useMemo(()=>{if(!(!a&&!n))return r=>{a==null||a(r);const d=e(r);n==null||n(d)}},[a,n,...t])}const U="_InputText_1406w_4",G="_InputPassword_1406w_11",O="_InputDate_1406w_18",$="_InputTime_1406w_25",M="_InputNumber_1406w_32",Y="_Textarea_1406w_39",Q="_Checkbox_1406w_58",W="_Radio_1406w_61",J="_Select_1406w_64",fe={InputText:U,InputPassword:G,InputDate:O,InputTime:$,InputNumber:M,Textarea:Y,"Textarea--resize-none":"_Textarea--resize-none_1406w_46","Textarea--resize-vertical":"_Textarea--resize-vertical_1406w_49","Textarea--resize-horizontal":"_Textarea--resize-horizontal_1406w_52","Textarea--resize-both":"_Textarea--resize-both_1406w_55",Checkbox:Q,Radio:W,Select:J},X="_FieldLabel_11ap2_4",h={FieldLabel:X,"FieldLabel--wrap":"_FieldLabel--wrap_11ap2_19","FieldLabel--wrapGap":"_FieldLabel--wrapGap_11ap2_22","FieldLabel--required":"_FieldLabel--required_11ap2_26","FieldLabel--hide":"_FieldLabel--hide_11ap2_31"},F="FieldLabel",Z="•",ee="Required",ae=({label:e=ee})=>{const a=B(h,F,["required"]);return l.jsxs("span",{className:a.join(" "),children:[l.jsx("span",{children:Z}),l.jsx("span",{children:e})]})},ne=()=>{const e=B(h,F,["wrapGap"]);return l.jsx("span",{className:e.join(" ")})},w=({id:e,label:a,hideLabel:n,wrapLabel:t=!1,required:r,requiredLabel:d})=>{const i=D(h,F,[v("hide",void 0,n),v("wrap",void 0,t)]);return l.jsxs("label",{htmlFor:e,className:i.join(" "),children:[a,t&&l.jsx(ne,{}),r&&l.jsx(ae,{label:d})]})};try{w.displayName="FieldLabel",w.__docgenInfo={description:"",displayName:"FieldLabel",props:{id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},label:{defaultValue:{value:"Required"},description:"",name:"label",required:!1,type:{name:"ReactNode"}},hideLabel:{defaultValue:null,description:"",name:"hideLabel",required:!1,type:{name:"boolean | undefined"}},wrapLabel:{defaultValue:{value:"false"},description:"",name:"wrapLabel",required:!1,type:{name:"boolean | undefined"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean | undefined"}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",required:!1,type:{name:"ReactNode"}}}}}catch{}const le="_FieldLayoutBase_cx0t1_2",te={FieldLayoutBase:le},re="FieldLayoutBase",de=({id:e,className:a,label:n,hideLabel:t,wrapLabel:r=!1,required:d,requiredLabel:i,additionalText:u,preserveSpace:f,hasError:y,dataset:_,children:b,preplyDsComponent:q},L)=>{const c=[...D(te,re)];a&&c.push(a);const m={className:c.join(" "),...C(_,{preplyDsComponent:q})},V={id:e,label:n,hideLabel:t,wrapLabel:r,required:d,requiredLabel:i},x=!u&&f?l.jsx("span",{children:" "}):void 0,s=y?"error":"normal";return l.jsxs("div",{...m,ref:L,children:[l.jsx(w,{...V}),b,u&&l.jsx(A,{id:`${e}-desc`,variant:s,children:u}),x]})},T=p.forwardRef(de);try{T.displayName="FieldLayoutBase",T.__docgenInfo={description:"",displayName:"FieldLayoutBase",props:{id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string | undefined"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"ReactNode"}},hideLabel:{defaultValue:null,description:"",name:"hideLabel",required:!1,type:{name:"boolean | undefined"}},wrapLabel:{defaultValue:{value:"false"},description:"",name:"wrapLabel",required:!1,type:{name:"boolean | undefined"}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"boolean | undefined"}},requiredLabel:{defaultValue:null,description:"",name:"requiredLabel",required:!1,type:{name:"ReactNode"}},additionalText:{defaultValue:null,description:"",name:"additionalText",required:!1,type:{name:"ReactNode"}},preserveSpace:{defaultValue:null,description:"",name:"preserveSpace",required:!1,type:{name:"boolean | undefined"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean | undefined"}},isFocused:{defaultValue:null,description:"",name:"isFocused",required:!1,type:{name:"boolean | undefined"}},isTouched:{defaultValue:null,description:"",name:"isTouched",required:!1,type:{name:"boolean | undefined"}},isChanged:{defaultValue:null,description:"",name:"isChanged",required:!1,type:{name:"boolean | undefined"}},hasValue:{defaultValue:null,description:"",name:"hasValue",required:!1,type:{name:"boolean | undefined"}},hasError:{defaultValue:null,description:"",name:"hasError",required:!1,type:{name:"boolean | undefined"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"Dataset | undefined"}},preplyDsComponent:{defaultValue:null,description:"@see getDatasetProps",name:"preplyDsComponent",required:!1,type:{name:"string | undefined"}}}}}catch{}export{T as F,N as I,fe as s,me as u};
|