import{j as o,b as s}from"./BlockEditorTranslator-Do4trUgb.js";import{e as i,f as p}from"./Icons-DvCYCYqp.js";const{Button:d,Dropdown:m,ColorPicker:x}=wp.components,{Fragment:j}=wp.element,C=l=>{const{label:n,value:e,onChange:r}=l,c=()=>{r(null)};return o.jsxs("div",{className:"fct-color-picker-control-wrap",children:[o.jsx("span",{className:"label",children:n}),o.jsx("div",{className:"fct-color-picker-control-action-wrap",children:o.jsx(m,{popoverProps:{placement:"bottom-start"},renderToggle:({isOpen:a,onToggle:t})=>o.jsx(j,{children:o.jsxs("div",{className:"fct-color-picker-control-action",children:[o.jsx("div",{className:`picker-button ${e?"has-color":""}`,style:{backgroundColor:e},onClick:t,"aria-expanded":a,children:!e&&o.jsx(i,{})}),o.jsx("span",{className:`picker-text ${e?"has-color":""}`,children:e||s("Add...")}),e&&o.jsx("span",{className:"picker-remove",onClick:c,children:o.jsx(p,{})})]})}),renderContent:()=>o.jsxs("div",{children:[o.jsx(x,{enableAlpha:!0,color:e,onChange:r}),o.jsx(d,{onClick:c,variant:"secondary",size:"compact",children:s("Clear")})]})})})]})};export{C};
