# fluent-cart/1.7.0/assets/chunks/ColorPickerField.js

FluentCart A New Era of eCommerce – Faster, Lighter, and Simpler, version 1.7.0. 2 lines.

- Page: https://pluginprobe.com/plugins/fluent-cart/1.7.0/code/assets/chunks/ColorPickerField.js
- Raw: https://pluginprobe.com/plugins/fluent-cart/1.7.0/raw/assets/chunks/ColorPickerField.js
- Modified: 2026-09-29T12:49:18+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/fluent-cart/1.7.0/code/assets/chunks/ColorPickerField.js#L10-L20`.

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

```