diff --git a/feat-color-update/404.html b/feat-color-update/404.html index 717232b4..5b290776 100644 --- a/feat-color-update/404.html +++ b/feat-color-update/404.html @@ -5,7 +5,7 @@ Theme Builder - + diff --git a/feat-color-update/assets/index-BaL7DmUa.js b/feat-color-update/assets/index-DOqhRat4.js similarity index 99% rename from feat-color-update/assets/index-BaL7DmUa.js rename to feat-color-update/assets/index-DOqhRat4.js index 9b38e74f..aa7b3bca 100644 --- a/feat-color-update/assets/index-BaL7DmUa.js +++ b/feat-color-update/assets/index-DOqhRat4.js @@ -1535,7 +1535,7 @@ slotHeader=" -`}],ym=e=>e.startsWith("data:image")?e:`${p1}/assets/images/${e||"peace-in-a-box.svg"}`,ZH=e=>io.valid(e),Jwe=e=>io.valid(e)?io.hex(e).luminance():-1,Zl=(e=Ls,t=Ls)=>io.valid(e)&&io.valid(t)?io.contrast(e,t):-1,an=(e,t,r)=>{try{return e.replace(/-/g," ").split(" ").map((n,i)=>(t&&i===0?n[0]:n[0].toUpperCase())+n.substring(1,n.length)).join(r||"")}catch(n){console.error(n)}return"ERROR"},lx=({name:e,children:t,actionBar:r,className:n,density:i,navigation:s,withDevMode:o})=>{const{t:a}=gr(),{theme:l,darkMode:u,developerMode:c}=xr(f=>f),[h,d]=H.useState();return z.jsx("div",{className:"contents","data-density":i||"regular","data-color-scheme":u?"dark":"light",children:z.jsx(W6,{className:n,variant:"fixed","data-color":"neutral-bg-lvl-1",header:z.jsx(U6,{drawerOpen:h,onToggle:()=>d(!h),brand:z.jsxs("div",{className:"db-brand",children:[z.jsx("img",{className:"logo",src:ym(u&&l.branding.image.dark?l.branding.image.dark:l.branding.image.light),alt:"brand"}),e]}),secondaryAction:r,primaryAction:z.jsxs("div",{className:"flex gap-fix-sm",children:[o&&z.jsxs(Mt,{className:c?"":"opacity-0",icon:"wrench",variant:"ghost",noText:!0,onClick:()=>xr.setState({developerMode:!c}),children:["Developer Mode",z.jsx(eo,{placement:"bottom",children:a(c?"disableDevMode":"enableDevMode")})]}),z.jsxs(Mt,{variant:"ghost",icon:u?"sun":"moon",noText:!0,className:"p-0 w-siz-md",onClick:()=>{xr.setState({darkMode:!u})},children:[u?"🌞":"🌛",z.jsx(eo,{placement:"left",children:a(u?"enableLightMode":"enableDarkMode")})]})]}),children:s}),children:t})})},Xwe=()=>{const{t:e}=gr(),{editorMarkup:t}=xr(n=>n);H.useEffect(()=>{Iae.require("ace/ext/language_tools").addCompleter(Gwe())},[]);const r=async()=>{const n=await F_(t,{parser:"babel",plugins:[Mfe,G0e,Uwe],semi:!1});xr.setState({editorMarkup:n.replace(/\n$/,"").replace(";","")})};return z.jsx(lx,{name:e("editor"),children:z.jsxs("div",{className:"editor w-full h-full grid grid-cols-2 gap-fix-xs p-fix-xs",children:[z.jsxs("div",{className:"flex flex-col gap-fix-xs",children:[z.jsx(nue,{mode:"html",theme:"dracula",onChange:n=>xr.setState({editorMarkup:n}),name:"ace-editor",value:t||"",fontSize:16,showPrintMargin:!0,showGutter:!0,highlightActiveLine:!0,height:"100%",width:"100%",setOptions:{enableBasicAutocompletion:!0,enableLiveAutocompletion:!0,showLineNumbers:!0,useWorker:!1}}),z.jsxs("div",{className:"flex flex-wrap db-density-functional gap-fix-xs",children:[z.jsx(Mt,{icon:"grid_view",onClick:()=>r(),children:e("formatCode")}),z.jsx(Uo,{variant:"vertical"}),Kwe.map(n=>z.jsxs(Mt,{icon:"copy",onClick:()=>{navigator.clipboard.writeText(n.content||""),xr.setState({notification:`${n.label} Template copied`})},children:[n.label," Template"]},n.key))]})]}),z.jsx(fs,{className:"rounded-none h-full overflow-auto",children:k8(t,Xr)})]})})},Ywe=(e,t)=>{const r=ZH(t)?t:Ls,n=e.at(0),i=e.at(-3),s=Zl(r,n==null?void 0:n.hex)<3,o=Zl(r,i==null?void 0:i.hex)<3;return{originBgDark:(n==null?void 0:n.hex)??Ls,originBgLight:(i==null?void 0:i.hex)??Ls,originLightAlternative:o?rO(e,!1,i):t,originDarkAlternative:s?rO(e,!0,n):t}},Nl=10,IT=(e,t)=>{let r=new Ve;r.hex=e,r.hexToHsluv();const n=r.hsluv_l;let i,s;t?n<=80?(i=n+Nl,s=n+Nl*2):(i=n-Nl,s=n-Nl*2):n>=20?(i=n-Nl,s=n-Nl*2):(i=n+Nl,s=n+Nl*2),r.hsluv_l=i,r.hsluvToHex();const o=r.hex;r=new Ve,r.hex=e,r.hexToHsluv(),r.hsluv_l=s,r.hsluvToHex();const a=r.hex;return{hoverColor:o,pressedColor:a}},MN=98,RN=5,ob=(e,t,r)=>{const n=t?RN:MN,i=t?MN:RN;let s=new Ve;s.hex=e,s.hexToHsluv(),s.hsluv_l=n,s.hsluvToHex(),Zl(e,s.hex)<4.5&&(s=new Ve,s.hex=e,s.hexToHsluv(),s.hsluv_l=i,s.hsluvToHex());const o=r??e,a=Zl(e,o);return{onOrigin:r??s.hex,onOriginAlternative:s.hex,onOriginAccessible:a===1||a>=4.5,...IT(o,t)}},Zwe=(e,t,r,n)=>{const i=Xk(e,t,r),{originLightAlternative:s,originDarkAlternative:o,originBgLight:a,originBgDark:l}=Ywe(i,n),{hoverColor:u,pressedColor:c}=IT(n,!1),{hoverColor:h,pressedColor:d}=IT(n,!0);return{origin:t,originBgLight:a,originBgDark:l,originLight:n,originLightAlternative:s,originLightAccessible:n===s,originLightHovered:u,originLightPressed:c,originDark:n,originDarkAlternative:o,originDarkAccessible:n===o,originDarkHovered:h,originDarkPressed:d}},av=(e,t,r,n)=>{const i=n??t,{onOrigin:s,hoverColor:o,pressedColor:a,onOriginAccessible:l,onOriginAlternative:u}=ob(i,!1),{onOrigin:c,hoverColor:h,pressedColor:d,onOriginAccessible:f,onOriginAlternative:p}=ob(i,!0);return{...Zwe(e,t,r,i),onOriginLight:s,onOriginLightHovered:o,onOriginLightPressed:a,onOriginLightAccessible:l,onOriginLightAlternative:u,onOriginDark:c,onOriginDarkHovered:h,onOriginDarkPressed:d,onOriginDarkAccessible:f,onOriginDarkAlternative:p}},Fp=({name:e,color:t,onColorChange:r,error:n,alternative:i,contrast:s,contrastMin:o})=>{const{t:a}=gr();return z.jsxs(z.Fragment,{children:[z.jsx(Uo,{}),z.jsx("p",{className:"font-bold",children:e}),s&&z.jsxs(Lr,{semantic:s<(o??3)?"critical":"successful",size:"small",children:[s.toFixed(2),":1"]}),z.jsxs("div",{className:"grid grid-cols-2 gap-fix-md",children:[z.jsx(xn,{label:a("colorInputPicker"),type:"color",value:t,onChange:l=>{r(l.target.value)}}),z.jsx(xn,{label:a("colorInputHex"),placeholder:a("colorInputHex"),value:t,onChange:l=>{r(l.target.value)}})]}),n&&z.jsx(Lr,{semantic:"warning",children:a(n)}),i&&z.jsxs("div",{className:"grid grid-cols-2 gap-fix-md",children:[z.jsx("div",{className:"w-full h-full text-[0]",style:{backgroundColor:i},children:i}),z.jsx(Mt,{onClick:()=>{r(i)},children:a("overwrite")})]})]})},Ia=({label:e,color:t,setOriginColor:r,onAddColor:n,onDelete:i,isAddColor:s,customColor:o})=>{var D,C;const{t:a}=gr(),[l,u]=H.useState(t),[c,h]=H.useState(),[d,f]=H.useState(!0),[p,m]=H.useState(s?"":e),{theme:y,setCustomColors:b,luminanceSteps:v}=xr(w=>w),E=H.useCallback(()=>(s?l:t).origin,[s,l,t]);return z.jsx("div",{className:"color-picker-container",children:z.jsxs("div",{className:"color-input-container",children:[z.jsx($0,{children:z.jsxs("button",{className:"color-tag","data-icon":s?"plus":void 0,"data-icon-after":s||t.onOriginLightAccessible&&t.onOriginDarkAccessible&&t.originDarkAccessible&&t.originLightAccessible?void 0:"warning_triangle",style:s?{}:{"--db-current-origin-color":t.origin,"--db-current-icon-color":`var(--db-${e.toLowerCase()}-on-bg-inverted-contrast-high-default)`,"--db-current-color-enabled":`var(--db-${e.toLowerCase()}-on-bg-inverted-contrast-high-default)`,"--db-current-color-bg-enabled":`var(--db-${e.toLowerCase()}-bg-inverted-contrast-high-default)`,"--db-current-color-contrast-high-hover":`var(--db-${e.toLowerCase()}-bg-inverted-contrast-high-80-hovered)`,"--db-current-color-contrast-high-pressed":`var(--db-${e.toLowerCase()}-bg-inverted-contrast-high-80-pressed)`,"--db-current-color-border":`var(--db-${e.toLowerCase()}-on-bg-basic-emphasis-60-default)`},onClick:()=>h(!0),children:[a(e),!s&&z.jsx(eo,{placement:"bottom",className:"db-neutral-bg-lvl-1",children:a("adaptColor")})]})}),z.jsx(yf,{backdrop:"weak",open:c,onClose:()=>h(!1),drawerHeader:a("editColor",{colorName:p}),withCloseButton:!0,children:z.jsxs("div",{className:"flex flex-col gap-fix-sm mt-fix-md overflow-y-auto",children:[z.jsx(xn,{id:`input-${p}`,label:a("colorName"),required:!0,value:p,disabled:!o,customValidity:o&&((D=y.customColors)!=null&&D[p])&&e!==p?"invalid":"no-validation",message:o&&((C=y.customColors)!=null&&C[p])&&e!==p?a("customColorExists"):void 0,pattern:"[a-zA-Z0-9\\-_]+",onChange:w=>{m(w.target.value),f(w.target.validity.valid)}}),z.jsx(Fp,{name:"origin",color:E(),onColorChange:w=>{s?u(av(p,w,v)):r&&r(av(p,w,v))}}),!s&&z.jsxs(z.Fragment,{children:[z.jsx(Fp,{name:"origin-light",color:t.originLight??Ls,alternative:t.originLightAccessible?void 0:t.originLightAlternative,error:t.originLightAccessible?void 0:"accessibilityCritical",contrast:Zl(t.originLight,t.originBgLight),onColorChange:w=>{if(r){const{originLight:A,originLightAccessible:$,originLightPressed:L,originLightHovered:F,onOriginLight:N,onOriginLightHovered:O,onOriginLightPressed:P,onOriginLightAccessible:_,onOriginLightAlternative:T,originLightAlternative:I}=av(p,t.origin,v,w);r({...t,originLight:A,originLightAccessible:$,originLightAlternative:I,originLightPressed:L,originLightHovered:F,onOriginLight:N,onOriginLightHovered:O,onOriginLightPressed:P,onOriginLightAccessible:_,onOriginLightAlternative:T})}}}),z.jsx(Fp,{name:"on-origin-light",color:t.onOriginLight??Ls,alternative:t.onOriginLightAccessible?void 0:t.onOriginLightAlternative,error:t.onOriginLightAccessible?void 0:"accessibilityCritical",contrastMin:4.5,contrast:Zl(t.originLight,t.onOriginLight),onColorChange:w=>{if(r){const{onOrigin:A,onOriginAccessible:$,onOriginAlternative:L,hoverColor:F,pressedColor:N}=ob(t.originLight??Ls,!1,w);r({...t,onOriginLight:A,onOriginLightHovered:F,onOriginLightPressed:N,onOriginLightAccessible:$,onOriginLightAlternative:L})}}}),z.jsx(Fp,{name:"origin-dark",color:t.originDark??Ls,alternative:t.originDarkAccessible?void 0:t.originDarkAlternative,error:t.originDarkAccessible?void 0:"accessibilityCritical",contrast:Zl(t.originDark,t.originBgDark),onColorChange:w=>{if(r){const{originDark:A,originDarkAccessible:$,originDarkAlternative:L,originDarkPressed:F,originDarkHovered:N,onOriginDark:O,onOriginDarkHovered:P,onOriginDarkPressed:_,onOriginDarkAccessible:T,onOriginDarkAlternative:I}=av(p,t.origin,v,w);r({...t,originDark:A,originDarkAccessible:$,originDarkAlternative:L,originDarkPressed:F,originDarkHovered:N,onOriginDark:O,onOriginDarkHovered:P,onOriginDarkPressed:_,onOriginDarkAccessible:T,onOriginDarkAlternative:I})}}}),z.jsx(Fp,{name:"on-origin-dark",contrastMin:4.5,color:t.onOriginDark??Ls,alternative:t.onOriginDarkAccessible?void 0:t.onOriginDarkAlternative,error:t.onOriginDarkAccessible?void 0:"accessibilityCritical",contrast:Zl(t.originDark,t.onOriginDark),onColorChange:w=>{if(r){const{onOrigin:A,onOriginAccessible:$,onOriginAlternative:L,hoverColor:F,pressedColor:N}=ob(t.originDark??Ls,!0,w);r({...t,onOriginDark:A,onOriginDarkHovered:F,onOriginDarkPressed:N,onOriginDarkAccessible:$,onOriginDarkAlternative:L})}}})]}),o&&z.jsxs(z.Fragment,{children:[z.jsx(Uo,{}),z.jsxs("div",{className:"ml-auto flex gap-fix-md",children:[!s&&z.jsx(Mt,{icon:"bin",onClick:()=>{i&&i()},children:a("deleteColor")}),z.jsx(Mt,{className:"ml-auto",variant:"brand",disabled:p.length===0||e===p||!d,onClick:()=>{if(s)h(!1),n&&n(p,l),u({origin:"#ffffff"}),m("");else if(y.customColors){const w={};Object.keys(y.customColors).forEach(A=>{var $,L,F;($=y.customColors)!=null&&$[A]&&(A===e?w[p]=(L=y.customColors)==null?void 0:L[A]:w[A]=(F=y.customColors)==null?void 0:F[A])}),b(w)}},children:a(s?"addColor":"changeColor")})]})]})]})})]})})},Qwe=()=>{const{t:e}=gr(),{setColors:t,theme:r,setAdditionalColors:n,setCustomColors:i}=xr(s=>s);return z.jsxs(z.Fragment,{children:[z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx("h5",{children:e("colors")}),z.jsxs("div",{className:"flex flex-wrap gap-fix-xs",children:[z.jsx(Ia,{color:r.colors.neutral,label:"Neutral",setOriginColor:s=>t({...r.colors,neutral:s})}),z.jsx(Ia,{color:r.colors.brand,label:"brand",setOriginColor:s=>{t({...r.colors,brand:s})}}),z.jsx(Ia,{color:r.colors.informational,label:"Informational",setOriginColor:s=>t({...r.colors,informational:s})}),z.jsx(Ia,{color:r.colors.successful,label:"Successful",setOriginColor:s=>t({...r.colors,successful:s})}),z.jsx(Ia,{color:r.colors.warning,label:"Warning",setOriginColor:s=>t({...r.colors,warning:s})}),z.jsx(Ia,{color:r.colors.critical,label:"Critical",setOriginColor:s=>t({...r.colors,critical:s})})]})]}),z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx("h5",{children:e("additional-colors")}),z.jsx("div",{className:"flex flex-wrap gap-fix-xs",children:Object.entries(r.additionalColors).map(([s,o])=>z.jsx(Ia,{color:o,label:s,setOriginColor:a=>{n({...r.additionalColors,[s]:a})}},s))})]}),z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx("h5",{children:e("custom")}),z.jsxs("div",{className:"flex flex-wrap gap-fix-xs",children:[z.jsx(Ia,{color:{origin:"#ffffff"},label:e("addColor"),onAddColor:(s,o)=>{i({...r.customColors,[s]:o})},customColor:!0,isAddColor:!0}),r.customColors&&Object.entries(r.customColors).map(([s,o])=>z.jsx(Ia,{color:o,label:s,setOriginColor:a=>{i({...r.customColors,[s]:a})},customColor:!0,onDelete:()=>{const a={...r.customColors};delete a[s],i(a)}},s))]})]})]})},Xh=["adaptive","neutral","critical","informational","warning","successful"],jD=e=>e.charAt(0).toUpperCase()+e.slice(1),eSe=[{title:"Button",component:z.jsx("div",{className:"grid grid-cols-5 gap-fix-sm items-center",children:["outlined","filled","ghost","brand"].map(e=>z.jsxs(H.Fragment,{children:[z.jsxs("h6",{children:[jD(e),":"]}),z.jsx(Mt,{variant:e,children:"Default"}),z.jsx(Mt,{variant:e,icon:"user",children:"Icon"}),z.jsx(Mt,{variant:e,disabled:!0,children:"Disabled"}),z.jsx(Mt,{variant:e,size:"small",children:"Small"})]},`button-${e}`))})},{title:"Link",component:z.jsxs(H.Fragment,{children:[z.jsx(bd,{href:"#",children:"Text Link"}),z.jsx(bd,{href:"#",variant:"brand",children:"Brand Text Link"}),z.jsx(bd,{href:"#",disabled:!0,children:"Disabled Link"}),z.jsx(bd,{href:"#",size:"small",children:"Small Link"})]})},{title:"Infotext",component:z.jsxs(H.Fragment,{children:[Xh.map(e=>z.jsx(Lr,{semantic:e,children:jD(e)},`infotext-${e}`)),z.jsx(Lr,{size:"small",children:"Small"})]})},{title:"Tag",component:z.jsxs(H.Fragment,{children:[z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Weak:"}),Xh.map(e=>z.jsxs($0,{semantic:e,children:["Tag ",e]},`tag-${e}`))]}),z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Strong:"}),Xh.map(e=>z.jsxs($0,{semantic:e,emphasis:"strong",children:["Tag ",e]},`tag-strong-${e}`))]})]})},{title:"Badge",component:z.jsxs(H.Fragment,{children:[z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Weak:"}),Xh.map(e=>z.jsxs(CC,{semantic:e,children:["Badge ",e]},`badge-${e}`))]}),z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Strong:"}),Xh.map(e=>z.jsxs(CC,{semantic:e,emphasis:"strong",children:["Badge ",e]},`badge-strong-${e}`))]})]})},{title:"Notification",component:z.jsxs(H.Fragment,{children:[Xh.map(e=>z.jsx(k0,{semantic:e,variant:"standalone",headline:"Variant",linkVariant:"inline",link:z.jsx("a",{href:"#",children:"Link"}),children:jD(e)},`alert-component-${e}`)),z.jsx(k0,{variant:"docked",icon:"user",headline:"Type",linkVariant:"inline",link:z.jsx("a",{href:"#",children:"Link"}),children:"Docked"})]})},{title:"Input",component:z.jsxs(H.Fragment,{children:[z.jsx(xn,{variant:"floating",label:"Disabled",placeholder:"Disabled",message:"Disabled Message",disabled:!0}),z.jsx(xn,{variant:"floating",label:"Readonly",placeholder:"Readonly",message:"Readonly Message",readOnly:!0,value:"Readonly"}),z.jsx(xn,{variant:"floating",label:"Required",placeholder:"Required",message:"Required Message",required:!0})]})},{title:"Checkbox",component:z.jsxs(H.Fragment,{children:[z.jsx(TC,{name:"checkbox",children:"Checkbox"}),z.jsx(TC,{name:"checkbox",required:!0,children:"Checkbox required"})]})},{title:"Radio",component:z.jsxs(H.Fragment,{children:[z.jsx(AC,{name:"radio",children:"Radio"}),z.jsx(AC,{name:"radio",required:!0,children:"Radio required"})]})},{title:"Select",component:z.jsxs(H.Fragment,{children:[z.jsxs(Sc,{variant:"floating",label:"Select",placeholder:"Select",message:"Select Message",disabled:!0,children:[z.jsx("option",{children:"Option1"}),z.jsx("option",{children:"Option2"})]}),z.jsxs(Sc,{variant:"floating",label:"Disabled",placeholder:"Disabled",message:"Disabled Message",disabled:!0,children:[z.jsx("option",{children:"Option1"}),z.jsx("option",{children:"Option2"})]}),z.jsxs(Sc,{variant:"floating",label:"Required",placeholder:"Required",message:"Required Message",required:!0,children:[z.jsx("option",{children:"Option1"}),z.jsx("option",{children:"Option2"})]})]})},{title:"Textarea",component:z.jsxs(H.Fragment,{children:[z.jsx(fg,{variant:"floating",label:"Disabled",placeholder:"Disabled",message:"Disabled Message",disabled:!0}),z.jsx(fg,{variant:"floating",label:"Readonly",placeholder:"Readonly",message:"Readonly Message",readOnly:!0,value:"Readonly"}),z.jsx(fg,{variant:"floating",label:"Required",placeholder:"Required",message:"Required Message",required:!0})]})},{title:"Divider",component:z.jsxs(H.Fragment,{children:[z.jsx(Uo,{}),z.jsx(Uo,{emphasis:"strong"})]})}],tSe=()=>{const[e,t]=H.useState(""),{t:r}=gr();return z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx(xn,{variant:"floating",label:r("search"),placeholder:r("search"),type:"search",onChange:n=>t(n.target.value)}),z.jsx("div",{className:"grid gap-fix-sm",children:eSe.map(n=>n.title.toLowerCase().includes(e.toLowerCase())?z.jsx(fs,{spacing:"small",children:z.jsxs("div",{className:"flex flex-col gap-fix-sm",children:[z.jsx("h5",{children:n.title}),z.jsx("div",{className:"flex flex-wrap gap-fix-sm items-center",children:n.component})]})},`component-list-${n.title}`):null)})]})},BN=({hue:e,hex:t,saturation:r,luminance:n,children:i,index:s,hideText:o})=>z.jsxs("div",{className:"palette-box gap-fix-md",style:{backgroundColor:t,color:Jwe(t)<.4?"#fff":"#000","--color-index":s},children:[i,!o&&z.jsxs("div",{className:"flex flex-col",children:[z.jsxs("span",{className:"whitespace-nowrap",children:["hex: ",t]}),z.jsxs("span",{className:"whitespace-nowrap",children:["hsl: ",Math.round(e),"/",Math.round(r),"/",Math.round(n)]})]})]}),rSe=()=>{const{luminanceSteps:e,developerMode:t,theme:r}=xr(o=>o),{t:n}=gr(),[i,s]=H.useState({});return H.useEffect(()=>{s({...r.colors,...r.additionalColors,...r.customColors})},[r]),z.jsxs("div",{className:"flex flex-col",children:[t&&z.jsx(xn,{label:n("luminanceSteps"),value:e,onChange:o=>{const a=o.target.value.split(",").map(l=>Number(l||0));xr.setState({luminanceSteps:a})}}),z.jsxs("div",{className:"flex gap-fix-2xs",children:[z.jsxs("div",{className:"flex flex-col gap-fix-2xs items-center grid-color-palettes",children:[z.jsx("div",{className:"py-fix-sm",children:z.jsx("span",{className:"font-bold invisible",children:"Palette"})}),e.map((o,a)=>z.jsx("div",{className:"flex items-center",children:z.jsx("span",{className:"font-bold whitespace-nowrap pr-fix-xs md:pr-fix-lg",children:a})},`luminance-step-${o}`))]}),Object.entries(i).filter(([,o])=>ZH(o.origin)).map(([o,a],l)=>{const u=Xk(o,a.origin,e);return z.jsxs("div",{className:"flex flex-col gap-fix-2xs items-center grid-color-palettes",children:[z.jsx("div",{className:"py-fix-sm",children:z.jsx("span",{className:"font-bold",children:o})}),u.map(({hex:c,hue:h,saturation:d,luminance:f},p)=>z.jsx(H.Fragment,{children:z.jsx(zZ,{style:{"--color-index":p},placement:l>3?"left-start":"right-start",trigger:z.jsx(BN,{hex:c,hue:h,saturation:d,luminance:f,index:p}),children:z.jsx("div",{className:"flex flex-col gap-fix-2xs items-center grid-color-palettes",children:u.map((m,y)=>z.jsx(H.Fragment,{children:z.jsx(BN,{hex:m.hex,hue:m.hue,saturation:m.saturation,luminance:m.luminance,hideText:!0,children:z.jsx("span",{className:"m-auto",children:io.contrast(io.hex(c),io.hex(m.hex)).toFixed(2)})})},`popover-${o}-${m.hex}-${y}`))})})},`${o}-${c}-${p}`))]},`${o}-header`)})]})]})},ab=H.memo(({label:e,accept:t,onUpload:r,size:n,variant:i,noText:s,tooltip:o})=>{const{t:a}=gr();return z.jsxs("label",{className:"upload-button relative","data-icon":"upload","data-size":n,"data-variant":i,"data-no-text":s,children:[a(e),z.jsx("input",{type:"file",accept:t,className:"absolute w-full h-full",title:"",onChange:l=>{const u=l.target.files;if(u&&u.length>0){const c=new FileReader;c.addEventListener("load",()=>{r(c.result)},!1),c.readAsDataURL(u[0])}}}),o&&z.jsx(eo,{placement:"bottom",children:a(o)})]})});var QH={exports:{}};(function(e,t){var r={};/*! +`}],ym=e=>e.startsWith("data:image")?e:`${p1}/assets/images/${e||"peace-in-a-box.svg"}`,ZH=e=>io.valid(e),Jwe=e=>io.valid(e)?io.hex(e).luminance():-1,Zl=(e=Ls,t=Ls)=>io.valid(e)&&io.valid(t)?io.contrast(e,t):-1,an=(e,t,r)=>{try{return e.replace(/-/g," ").split(" ").map((n,i)=>(t&&i===0?n[0]:n[0].toUpperCase())+n.substring(1,n.length)).join(r||"")}catch(n){console.error(n)}return"ERROR"},lx=({name:e,children:t,actionBar:r,className:n,density:i,navigation:s,withDevMode:o})=>{const{t:a}=gr(),{theme:l,darkMode:u,developerMode:c}=xr(f=>f),[h,d]=H.useState();return z.jsx("div",{className:"contents","data-density":i||"regular","data-color-scheme":u?"dark":"light",children:z.jsx(W6,{className:n,variant:"fixed","data-color":"neutral-bg-lvl-1",header:z.jsx(U6,{drawerOpen:h,onToggle:()=>d(!h),brand:z.jsxs("div",{className:"db-brand",children:[z.jsx("img",{className:"logo",src:ym(u&&l.branding.image.dark?l.branding.image.dark:l.branding.image.light),alt:"brand"}),e]}),secondaryAction:r,primaryAction:z.jsxs("div",{className:"flex gap-fix-sm",children:[o&&z.jsxs(Mt,{className:c?"":"opacity-0",icon:"wrench",variant:"ghost",noText:!0,onClick:()=>xr.setState({developerMode:!c}),children:["Developer Mode",z.jsx(eo,{placement:"bottom",children:a(c?"disableDevMode":"enableDevMode")})]}),z.jsxs(Mt,{variant:"ghost",icon:u?"sun":"moon",noText:!0,className:"p-0 w-siz-md",onClick:()=>{xr.setState({darkMode:!u})},children:[u?"🌞":"🌛",z.jsx(eo,{placement:"left",children:a(u?"enableLightMode":"enableDarkMode")})]})]}),children:s}),children:t})})},Xwe=()=>{const{t:e}=gr(),{editorMarkup:t}=xr(n=>n);H.useEffect(()=>{Iae.require("ace/ext/language_tools").addCompleter(Gwe())},[]);const r=async()=>{const n=await F_(t,{parser:"babel",plugins:[Mfe,G0e,Uwe],semi:!1});xr.setState({editorMarkup:n.replace(/\n$/,"").replace(";","")})};return z.jsx(lx,{name:e("editor"),children:z.jsxs("div",{className:"editor w-full h-full grid grid-cols-2 gap-fix-xs p-fix-xs",children:[z.jsxs("div",{className:"flex flex-col gap-fix-xs",children:[z.jsx(nue,{mode:"html",theme:"dracula",onChange:n=>xr.setState({editorMarkup:n}),name:"ace-editor",value:t||"",fontSize:16,showPrintMargin:!0,showGutter:!0,highlightActiveLine:!0,height:"100%",width:"100%",setOptions:{enableBasicAutocompletion:!0,enableLiveAutocompletion:!0,showLineNumbers:!0,useWorker:!1}}),z.jsxs("div",{className:"flex flex-wrap db-density-functional gap-fix-xs",children:[z.jsx(Mt,{icon:"grid_view",onClick:()=>r(),children:e("formatCode")}),z.jsx(Uo,{variant:"vertical"}),Kwe.map(n=>z.jsxs(Mt,{icon:"copy",onClick:()=>{navigator.clipboard.writeText(n.content||""),xr.setState({notification:`${n.label} Template copied`})},children:[n.label," Template"]},n.key))]})]}),z.jsx(fs,{className:"rounded-none h-full overflow-auto",children:k8(t,Xr)})]})})},Ywe=(e,t)=>{const r=ZH(t)?t:Ls,n=e.at(0),i=e.at(-3),s=Zl(r,n==null?void 0:n.hex)<3,o=Zl(r,i==null?void 0:i.hex)<3;return{originBgDark:(n==null?void 0:n.hex)??Ls,originBgLight:(i==null?void 0:i.hex)??Ls,originLightAlternative:o?rO(e,!1,i):t,originDarkAlternative:s?rO(e,!0,n):t}},Nl=10,IT=(e,t)=>{let r=new Ve;r.hex=e,r.hexToHsluv();const n=r.hsluv_l;let i,s;t?n<=80?(i=n+Nl,s=n+Nl*2):(i=n-Nl,s=n-Nl*2):n>=20?(i=n-Nl,s=n-Nl*2):(i=n+Nl,s=n+Nl*2),r.hsluv_l=i,r.hsluvToHex();const o=r.hex;r=new Ve,r.hex=e,r.hexToHsluv(),r.hsluv_l=s,r.hsluvToHex();const a=r.hex;return{hoverColor:o,pressedColor:a}},MN=98,RN=5,ob=(e,t,r)=>{const n=t?RN:MN,i=t?MN:RN;let s=new Ve;s.hex=e,s.hexToHsluv(),s.hsluv_l=n,s.hsluvToHex(),Zl(e,s.hex)<4.5&&(s=new Ve,s.hex=e,s.hexToHsluv(),s.hsluv_l=i,s.hsluvToHex());const o=r??s.hex,a=Zl(e,o);return{onOrigin:o,onOriginAlternative:s.hex,onOriginAccessible:a===1||a>=4.5,...IT(o,t)}},Zwe=(e,t,r,n)=>{const i=Xk(e,t,r),{originLightAlternative:s,originDarkAlternative:o,originBgLight:a,originBgDark:l}=Ywe(i,n),{hoverColor:u,pressedColor:c}=IT(n,!1),{hoverColor:h,pressedColor:d}=IT(n,!0);return{origin:t,originBgLight:a,originBgDark:l,originLight:n,originLightAlternative:s,originLightAccessible:n===s,originLightHovered:u,originLightPressed:c,originDark:n,originDarkAlternative:o,originDarkAccessible:n===o,originDarkHovered:h,originDarkPressed:d}},av=(e,t,r,n)=>{const i=n??t,{onOrigin:s,hoverColor:o,pressedColor:a,onOriginAccessible:l,onOriginAlternative:u}=ob(i,!1),{onOrigin:c,hoverColor:h,pressedColor:d,onOriginAccessible:f,onOriginAlternative:p}=ob(i,!0);return{...Zwe(e,t,r,i),onOriginLight:s,onOriginLightHovered:o,onOriginLightPressed:a,onOriginLightAccessible:l,onOriginLightAlternative:u,onOriginDark:c,onOriginDarkHovered:h,onOriginDarkPressed:d,onOriginDarkAccessible:f,onOriginDarkAlternative:p}},Fp=({name:e,color:t,onColorChange:r,error:n,alternative:i,contrast:s,contrastMin:o})=>{const{t:a}=gr();return z.jsxs(z.Fragment,{children:[z.jsx(Uo,{}),z.jsx("p",{className:"font-bold",children:e}),s&&z.jsxs(Lr,{semantic:s<(o??3)?"critical":"successful",size:"small",children:[s.toFixed(2),":1"]}),z.jsxs("div",{className:"grid grid-cols-2 gap-fix-md",children:[z.jsx(xn,{label:a("colorInputPicker"),type:"color",value:t,onChange:l=>{r(l.target.value)}}),z.jsx(xn,{label:a("colorInputHex"),placeholder:a("colorInputHex"),value:t,onChange:l=>{r(l.target.value)}})]}),n&&z.jsx(Lr,{semantic:"warning",children:a(n)}),i&&z.jsxs("div",{className:"grid grid-cols-2 gap-fix-md",children:[z.jsx("div",{className:"w-full h-full text-[0]",style:{backgroundColor:i},children:i}),z.jsx(Mt,{onClick:()=>{r(i)},children:a("overwrite")})]})]})},Ia=({label:e,color:t,setOriginColor:r,onAddColor:n,onDelete:i,isAddColor:s,customColor:o})=>{var D,C;const{t:a}=gr(),[l,u]=H.useState(t),[c,h]=H.useState(),[d,f]=H.useState(!0),[p,m]=H.useState(s?"":e),{theme:y,setCustomColors:b,luminanceSteps:v}=xr(w=>w),E=H.useCallback(()=>(s?l:t).origin,[s,l,t]);return z.jsx("div",{className:"color-picker-container",children:z.jsxs("div",{className:"color-input-container",children:[z.jsx($0,{children:z.jsxs("button",{className:"color-tag","data-icon":s?"plus":void 0,"data-icon-after":s||t.onOriginLightAccessible&&t.onOriginDarkAccessible&&t.originDarkAccessible&&t.originLightAccessible?void 0:"warning_triangle",style:s?{}:{"--db-current-origin-color":t.origin,"--db-current-icon-color":`var(--db-${e.toLowerCase()}-on-bg-inverted-contrast-high-default)`,"--db-current-color-enabled":`var(--db-${e.toLowerCase()}-on-bg-inverted-contrast-high-default)`,"--db-current-color-bg-enabled":`var(--db-${e.toLowerCase()}-bg-inverted-contrast-high-default)`,"--db-current-color-contrast-high-hover":`var(--db-${e.toLowerCase()}-bg-inverted-contrast-high-80-hovered)`,"--db-current-color-contrast-high-pressed":`var(--db-${e.toLowerCase()}-bg-inverted-contrast-high-80-pressed)`,"--db-current-color-border":`var(--db-${e.toLowerCase()}-on-bg-basic-emphasis-60-default)`},onClick:()=>h(!0),children:[a(e),!s&&z.jsx(eo,{placement:"bottom",className:"db-neutral-bg-lvl-1",children:a("adaptColor")})]})}),z.jsx(yf,{backdrop:"weak",open:c,onClose:()=>h(!1),drawerHeader:a("editColor",{colorName:p}),withCloseButton:!0,children:z.jsxs("div",{className:"flex flex-col gap-fix-sm mt-fix-md overflow-y-auto",children:[z.jsx(xn,{id:`input-${p}`,label:a("colorName"),required:!0,value:p,disabled:!o,customValidity:o&&((D=y.customColors)!=null&&D[p])&&e!==p?"invalid":"no-validation",message:o&&((C=y.customColors)!=null&&C[p])&&e!==p?a("customColorExists"):void 0,pattern:"[a-zA-Z0-9\\-_]+",onChange:w=>{m(w.target.value),f(w.target.validity.valid)}}),z.jsx(Fp,{name:"origin",color:E(),onColorChange:w=>{s?u(av(p,w,v)):r&&r(av(p,w,v))}}),!s&&z.jsxs(z.Fragment,{children:[z.jsx(Fp,{name:"origin-light",color:t.originLight??Ls,alternative:t.originLightAccessible?void 0:t.originLightAlternative,error:t.originLightAccessible?void 0:"accessibilityCritical",contrast:Zl(t.originLight,t.originBgLight),onColorChange:w=>{if(r){const{originLight:A,originLightAccessible:$,originLightPressed:L,originLightHovered:F,onOriginLight:N,onOriginLightHovered:O,onOriginLightPressed:P,onOriginLightAccessible:_,onOriginLightAlternative:T,originLightAlternative:I}=av(p,t.origin,v,w);r({...t,originLight:A,originLightAccessible:$,originLightAlternative:I,originLightPressed:L,originLightHovered:F,onOriginLight:N,onOriginLightHovered:O,onOriginLightPressed:P,onOriginLightAccessible:_,onOriginLightAlternative:T})}}}),z.jsx(Fp,{name:"on-origin-light",color:t.onOriginLight??Ls,alternative:t.onOriginLightAccessible?void 0:t.onOriginLightAlternative,error:t.onOriginLightAccessible?void 0:"accessibilityCritical",contrastMin:4.5,contrast:Zl(t.originLight,t.onOriginLight),onColorChange:w=>{if(r){const{onOrigin:A,onOriginAccessible:$,onOriginAlternative:L,hoverColor:F,pressedColor:N}=ob(t.originLight??Ls,!1,w);r({...t,onOriginLight:A,onOriginLightHovered:F,onOriginLightPressed:N,onOriginLightAccessible:$,onOriginLightAlternative:L})}}}),z.jsx(Fp,{name:"origin-dark",color:t.originDark??Ls,alternative:t.originDarkAccessible?void 0:t.originDarkAlternative,error:t.originDarkAccessible?void 0:"accessibilityCritical",contrast:Zl(t.originDark,t.originBgDark),onColorChange:w=>{if(r){const{originDark:A,originDarkAccessible:$,originDarkAlternative:L,originDarkPressed:F,originDarkHovered:N,onOriginDark:O,onOriginDarkHovered:P,onOriginDarkPressed:_,onOriginDarkAccessible:T,onOriginDarkAlternative:I}=av(p,t.origin,v,w);r({...t,originDark:A,originDarkAccessible:$,originDarkAlternative:L,originDarkPressed:F,originDarkHovered:N,onOriginDark:O,onOriginDarkHovered:P,onOriginDarkPressed:_,onOriginDarkAccessible:T,onOriginDarkAlternative:I})}}}),z.jsx(Fp,{name:"on-origin-dark",contrastMin:4.5,color:t.onOriginDark??Ls,alternative:t.onOriginDarkAccessible?void 0:t.onOriginDarkAlternative,error:t.onOriginDarkAccessible?void 0:"accessibilityCritical",contrast:Zl(t.originDark,t.onOriginDark),onColorChange:w=>{if(r){const{onOrigin:A,onOriginAccessible:$,onOriginAlternative:L,hoverColor:F,pressedColor:N}=ob(t.originDark??Ls,!0,w);r({...t,onOriginDark:A,onOriginDarkHovered:F,onOriginDarkPressed:N,onOriginDarkAccessible:$,onOriginDarkAlternative:L})}}})]}),o&&z.jsxs(z.Fragment,{children:[z.jsx(Uo,{}),z.jsxs("div",{className:"ml-auto flex gap-fix-md",children:[!s&&z.jsx(Mt,{icon:"bin",onClick:()=>{i&&i()},children:a("deleteColor")}),z.jsx(Mt,{className:"ml-auto",variant:"brand",disabled:p.length===0||e===p||!d,onClick:()=>{if(s)h(!1),n&&n(p,l),u({origin:"#ffffff"}),m("");else if(y.customColors){const w={};Object.keys(y.customColors).forEach(A=>{var $,L,F;($=y.customColors)!=null&&$[A]&&(A===e?w[p]=(L=y.customColors)==null?void 0:L[A]:w[A]=(F=y.customColors)==null?void 0:F[A])}),b(w)}},children:a(s?"addColor":"changeColor")})]})]})]})})]})})},Qwe=()=>{const{t:e}=gr(),{setColors:t,theme:r,setAdditionalColors:n,setCustomColors:i}=xr(s=>s);return z.jsxs(z.Fragment,{children:[z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx("h5",{children:e("colors")}),z.jsxs("div",{className:"flex flex-wrap gap-fix-xs",children:[z.jsx(Ia,{color:r.colors.neutral,label:"Neutral",setOriginColor:s=>t({...r.colors,neutral:s})}),z.jsx(Ia,{color:r.colors.brand,label:"brand",setOriginColor:s=>{t({...r.colors,brand:s})}}),z.jsx(Ia,{color:r.colors.informational,label:"Informational",setOriginColor:s=>t({...r.colors,informational:s})}),z.jsx(Ia,{color:r.colors.successful,label:"Successful",setOriginColor:s=>t({...r.colors,successful:s})}),z.jsx(Ia,{color:r.colors.warning,label:"Warning",setOriginColor:s=>t({...r.colors,warning:s})}),z.jsx(Ia,{color:r.colors.critical,label:"Critical",setOriginColor:s=>t({...r.colors,critical:s})})]})]}),z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx("h5",{children:e("additional-colors")}),z.jsx("div",{className:"flex flex-wrap gap-fix-xs",children:Object.entries(r.additionalColors).map(([s,o])=>z.jsx(Ia,{color:o,label:s,setOriginColor:a=>{n({...r.additionalColors,[s]:a})}},s))})]}),z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx("h5",{children:e("custom")}),z.jsxs("div",{className:"flex flex-wrap gap-fix-xs",children:[z.jsx(Ia,{color:{origin:"#ffffff"},label:e("addColor"),onAddColor:(s,o)=>{i({...r.customColors,[s]:o})},customColor:!0,isAddColor:!0}),r.customColors&&Object.entries(r.customColors).map(([s,o])=>z.jsx(Ia,{color:o,label:s,setOriginColor:a=>{i({...r.customColors,[s]:a})},customColor:!0,onDelete:()=>{const a={...r.customColors};delete a[s],i(a)}},s))]})]})]})},Xh=["adaptive","neutral","critical","informational","warning","successful"],jD=e=>e.charAt(0).toUpperCase()+e.slice(1),eSe=[{title:"Button",component:z.jsx("div",{className:"grid grid-cols-5 gap-fix-sm items-center",children:["outlined","filled","ghost","brand"].map(e=>z.jsxs(H.Fragment,{children:[z.jsxs("h6",{children:[jD(e),":"]}),z.jsx(Mt,{variant:e,children:"Default"}),z.jsx(Mt,{variant:e,icon:"user",children:"Icon"}),z.jsx(Mt,{variant:e,disabled:!0,children:"Disabled"}),z.jsx(Mt,{variant:e,size:"small",children:"Small"})]},`button-${e}`))})},{title:"Link",component:z.jsxs(H.Fragment,{children:[z.jsx(bd,{href:"#",children:"Text Link"}),z.jsx(bd,{href:"#",variant:"brand",children:"Brand Text Link"}),z.jsx(bd,{href:"#",disabled:!0,children:"Disabled Link"}),z.jsx(bd,{href:"#",size:"small",children:"Small Link"})]})},{title:"Infotext",component:z.jsxs(H.Fragment,{children:[Xh.map(e=>z.jsx(Lr,{semantic:e,children:jD(e)},`infotext-${e}`)),z.jsx(Lr,{size:"small",children:"Small"})]})},{title:"Tag",component:z.jsxs(H.Fragment,{children:[z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Weak:"}),Xh.map(e=>z.jsxs($0,{semantic:e,children:["Tag ",e]},`tag-${e}`))]}),z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Strong:"}),Xh.map(e=>z.jsxs($0,{semantic:e,emphasis:"strong",children:["Tag ",e]},`tag-strong-${e}`))]})]})},{title:"Badge",component:z.jsxs(H.Fragment,{children:[z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Weak:"}),Xh.map(e=>z.jsxs(CC,{semantic:e,children:["Badge ",e]},`badge-${e}`))]}),z.jsxs("div",{className:"flex flex-wrap gap-fix-sm",children:[z.jsx("h6",{children:"Strong:"}),Xh.map(e=>z.jsxs(CC,{semantic:e,emphasis:"strong",children:["Badge ",e]},`badge-strong-${e}`))]})]})},{title:"Notification",component:z.jsxs(H.Fragment,{children:[Xh.map(e=>z.jsx(k0,{semantic:e,variant:"standalone",headline:"Variant",linkVariant:"inline",link:z.jsx("a",{href:"#",children:"Link"}),children:jD(e)},`alert-component-${e}`)),z.jsx(k0,{variant:"docked",icon:"user",headline:"Type",linkVariant:"inline",link:z.jsx("a",{href:"#",children:"Link"}),children:"Docked"})]})},{title:"Input",component:z.jsxs(H.Fragment,{children:[z.jsx(xn,{variant:"floating",label:"Disabled",placeholder:"Disabled",message:"Disabled Message",disabled:!0}),z.jsx(xn,{variant:"floating",label:"Readonly",placeholder:"Readonly",message:"Readonly Message",readOnly:!0,value:"Readonly"}),z.jsx(xn,{variant:"floating",label:"Required",placeholder:"Required",message:"Required Message",required:!0})]})},{title:"Checkbox",component:z.jsxs(H.Fragment,{children:[z.jsx(TC,{name:"checkbox",children:"Checkbox"}),z.jsx(TC,{name:"checkbox",required:!0,children:"Checkbox required"})]})},{title:"Radio",component:z.jsxs(H.Fragment,{children:[z.jsx(AC,{name:"radio",children:"Radio"}),z.jsx(AC,{name:"radio",required:!0,children:"Radio required"})]})},{title:"Select",component:z.jsxs(H.Fragment,{children:[z.jsxs(Sc,{variant:"floating",label:"Select",placeholder:"Select",message:"Select Message",disabled:!0,children:[z.jsx("option",{children:"Option1"}),z.jsx("option",{children:"Option2"})]}),z.jsxs(Sc,{variant:"floating",label:"Disabled",placeholder:"Disabled",message:"Disabled Message",disabled:!0,children:[z.jsx("option",{children:"Option1"}),z.jsx("option",{children:"Option2"})]}),z.jsxs(Sc,{variant:"floating",label:"Required",placeholder:"Required",message:"Required Message",required:!0,children:[z.jsx("option",{children:"Option1"}),z.jsx("option",{children:"Option2"})]})]})},{title:"Textarea",component:z.jsxs(H.Fragment,{children:[z.jsx(fg,{variant:"floating",label:"Disabled",placeholder:"Disabled",message:"Disabled Message",disabled:!0}),z.jsx(fg,{variant:"floating",label:"Readonly",placeholder:"Readonly",message:"Readonly Message",readOnly:!0,value:"Readonly"}),z.jsx(fg,{variant:"floating",label:"Required",placeholder:"Required",message:"Required Message",required:!0})]})},{title:"Divider",component:z.jsxs(H.Fragment,{children:[z.jsx(Uo,{}),z.jsx(Uo,{emphasis:"strong"})]})}],tSe=()=>{const[e,t]=H.useState(""),{t:r}=gr();return z.jsxs("div",{className:"flex flex-col gap-fix-md",children:[z.jsx(xn,{variant:"floating",label:r("search"),placeholder:r("search"),type:"search",onChange:n=>t(n.target.value)}),z.jsx("div",{className:"grid gap-fix-sm",children:eSe.map(n=>n.title.toLowerCase().includes(e.toLowerCase())?z.jsx(fs,{spacing:"small",children:z.jsxs("div",{className:"flex flex-col gap-fix-sm",children:[z.jsx("h5",{children:n.title}),z.jsx("div",{className:"flex flex-wrap gap-fix-sm items-center",children:n.component})]})},`component-list-${n.title}`):null)})]})},BN=({hue:e,hex:t,saturation:r,luminance:n,children:i,index:s,hideText:o})=>z.jsxs("div",{className:"palette-box gap-fix-md",style:{backgroundColor:t,color:Jwe(t)<.4?"#fff":"#000","--color-index":s},children:[i,!o&&z.jsxs("div",{className:"flex flex-col",children:[z.jsxs("span",{className:"whitespace-nowrap",children:["hex: ",t]}),z.jsxs("span",{className:"whitespace-nowrap",children:["hsl: ",Math.round(e),"/",Math.round(r),"/",Math.round(n)]})]})]}),rSe=()=>{const{luminanceSteps:e,developerMode:t,theme:r}=xr(o=>o),{t:n}=gr(),[i,s]=H.useState({});return H.useEffect(()=>{s({...r.colors,...r.additionalColors,...r.customColors})},[r]),z.jsxs("div",{className:"flex flex-col",children:[t&&z.jsx(xn,{label:n("luminanceSteps"),value:e,onChange:o=>{const a=o.target.value.split(",").map(l=>Number(l||0));xr.setState({luminanceSteps:a})}}),z.jsxs("div",{className:"flex gap-fix-2xs",children:[z.jsxs("div",{className:"flex flex-col gap-fix-2xs items-center grid-color-palettes",children:[z.jsx("div",{className:"py-fix-sm",children:z.jsx("span",{className:"font-bold invisible",children:"Palette"})}),e.map((o,a)=>z.jsx("div",{className:"flex items-center",children:z.jsx("span",{className:"font-bold whitespace-nowrap pr-fix-xs md:pr-fix-lg",children:a})},`luminance-step-${o}`))]}),Object.entries(i).filter(([,o])=>ZH(o.origin)).map(([o,a],l)=>{const u=Xk(o,a.origin,e);return z.jsxs("div",{className:"flex flex-col gap-fix-2xs items-center grid-color-palettes",children:[z.jsx("div",{className:"py-fix-sm",children:z.jsx("span",{className:"font-bold",children:o})}),u.map(({hex:c,hue:h,saturation:d,luminance:f},p)=>z.jsx(H.Fragment,{children:z.jsx(zZ,{style:{"--color-index":p},placement:l>3?"left-start":"right-start",trigger:z.jsx(BN,{hex:c,hue:h,saturation:d,luminance:f,index:p}),children:z.jsx("div",{className:"flex flex-col gap-fix-2xs items-center grid-color-palettes",children:u.map((m,y)=>z.jsx(H.Fragment,{children:z.jsx(BN,{hex:m.hex,hue:m.hue,saturation:m.saturation,luminance:m.luminance,hideText:!0,children:z.jsx("span",{className:"m-auto",children:io.contrast(io.hex(c),io.hex(m.hex)).toFixed(2)})})},`popover-${o}-${m.hex}-${y}`))})})},`${o}-${c}-${p}`))]},`${o}-header`)})]})]})},ab=H.memo(({label:e,accept:t,onUpload:r,size:n,variant:i,noText:s,tooltip:o})=>{const{t:a}=gr();return z.jsxs("label",{className:"upload-button relative","data-icon":"upload","data-size":n,"data-variant":i,"data-no-text":s,children:[a(e),z.jsx("input",{type:"file",accept:t,className:"absolute w-full h-full",title:"",onChange:l=>{const u=l.target.files;if(u&&u.length>0){const c=new FileReader;c.addEventListener("load",()=>{r(c.result)},!1),c.readAsDataURL(u[0])}}}),o&&z.jsx(eo,{placement:"bottom",children:a(o)})]})});var QH={exports:{}};(function(e,t){var r={};/*! JSZip v3.10.1 - A JavaScript class for generating and reading zip files diff --git a/feat-color-update/customization.html b/feat-color-update/customization.html index 717232b4..5b290776 100644 --- a/feat-color-update/customization.html +++ b/feat-color-update/customization.html @@ -5,7 +5,7 @@ Theme Builder - + diff --git a/feat-color-update/demo.html b/feat-color-update/demo.html index 717232b4..5b290776 100644 --- a/feat-color-update/demo.html +++ b/feat-color-update/demo.html @@ -5,7 +5,7 @@ Theme Builder - + diff --git a/feat-color-update/index.html b/feat-color-update/index.html index 717232b4..5b290776 100644 --- a/feat-color-update/index.html +++ b/feat-color-update/index.html @@ -5,7 +5,7 @@ Theme Builder - + diff --git a/feat-color-update/playground.html b/feat-color-update/playground.html index 717232b4..5b290776 100644 --- a/feat-color-update/playground.html +++ b/feat-color-update/playground.html @@ -5,7 +5,7 @@ Theme Builder - +