| 1 |
import{a as L,t as _,k as h,bs as y,j as n,w as V,cS as q,aL as R,bz as U,b0 as W,a$ as G,aq as J,ba as Q,p as w,aU as j,bd as O,be as k,b9 as X,z as Y}from"./main-162.js";import{C as Z}from"./bf-424-108.js";import{I as P}from"./bf-553-160.js";function ae({subtitle:$,objectPaths:o,id:p,allowImportant:A,state:N,hslaPaths:S}){const{css:i}=L(),{element:g,fieldKey:x}=_(),[B,K]=h(U),[E,M]=h(W),[z,D]=h(G),[F,I]=h(J);let T,v,c="";const C=e=>X(e,{themeVars:E,styles:F,themeColors:z}),b=e=>y(C(e.object),Q(C(e.object),e.path)),r=[];if(Array.isArray(o))o.forEach(e=>{const{paths:t,object:s}=e;Object.keys(e.paths).forEach(d=>{r[d]={object:s,path:t[d]}})});else{const{paths:e,object:t}=o;Object.keys(e).forEach(l=>{r[l]={object:t,path:e[l]}})}const a={"outline-color":"","outline-width":"","outline-offset":"","outline-style":""},m=Object.keys(r);for(let e=0;e<m.length;e+=1){const t=m[e];if(m.length===2&&t==="outline"){const s=b(r[t]),l=s==null?void 0:s.split(/(?!\(.*)\s(?![^(]*?\))/g);a["outline-width"]=y(r[t],l[0])||"",a["outline-style"]=y(r[t],l[1])||"",a["outline-color"]=y(r[t],l[2])||"";break}t!=="outline-offset"&&(a[t]=b(r[t]))}a["outline-offset"]=b(r["outline-offset"]),a["outline-width"]&&(c+=`Width: ${a["outline-width"]}; `),a["outline-style"]&&(c+=`Style: ${a["outline-style"]}; `),a["outline-color"]&&(v=a["outline-color"],c+=`Color: ${a["outline-color"]}; `);const f=(e,t,s="")=>{Object.keys(e).map(d=>{Y(t,e[d],s)})},H=()=>{if(Array.isArray(o))o.map(e=>{const{paths:t}=e;e.object==="themeVars"?M(s=>w(s,l=>{f(t,l)})):e.object==="themeColors"&&D(s=>w(s,l=>{f(t,l)}))}),j(O(g,x,"outline Clear","",{styles:k("styles")}));else{const{paths:e}=o;I(t=>w(t,s=>{f(e,s)})),j(O(g,x,"outline Clear","",{styles:k("styles")}))}};return console.log(o),n.jsxs("div",{className:i(V.flxc),children:[A&&c&&n.jsx(P,{id:p,className:i({mr:3}),paths:o.paths,propertyPath:T}),n.jsxs("div",{title:c||"Add outline Style",className:i(u.preview_wrp,B.id===p&&u.active),children:[n.jsxs("button",{onClick:e=>q(e,K,{component:"outline-style",subtitle:$,objectPaths:o,state:N,id:p,hslaPaths:S}),type:"button",className:i(u.pickrBtn),"data-testid":`${p}-modal-btn`,children:[n.jsx(Z,{bg:v,h:24,w:24,className:i(V.mr2)}),n.jsx("span",{className:i(u.clrVal),children:c||"Add outline Style"})]}),c&&n.jsx("button",{title:"Clear Value",className:i(u.clearBtn),onClick:H,type:"button","aria-label":"Clear outline","data-testid":`${p}-clear-btn`,children:n.jsx(R,{size:"12"})})]})]})}const u={preview_wrp:{bd:"var(--white-0-95)",w:130,mnw:130,brs:10,p:3,flx:"center-between",":hover":{bs:"0 0 0 1px var(--white-0-83)"}},preview:{w:25,h:25,b:"1px solid gray",brs:7,curp:1,mr:7},clearBtn:{brs:"50%",p:4,w:17,h:17,b:"none",flx:"center",bd:"transparent",cr:"var(--white-0-50)",curp:1,":hover":{cr:"var(--black-0)",bd:"#d3d1d1"}},pickrBtn:{b:"none",curp:1,flx:"center",bd:"transparent",p:0},clrVal:{w:73,ws:"nowrap",textOverflow:"ellipsis",ow:"hidden"},active:{focusShadow:1}};export{ae as O}; |
