@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/dist/colorpicker/tests/colorpicker-dropdown.js

@@ -824,27 +824,227 @@
   ColorPicker.className = COLORPICKER_CLASSNAME;
   ColorPicker.defaultProps = defaultProps7;
 
-  // src/spinbutton/spinbutton.spec.tsx
+  // src/action-buttons/action-buttons.spec.tsx
   var import_jsx_runtime15 = __require("react/jsx-runtime");
-  var SPINBUTTON_CLASSNAME = `k-spin-button`;
+  var ACTIONBUTTONS_CLASSNAME = `k-actions`;
   var states12 = [];
-  var options11 = {
+  var options11 = {};
+  var defaultProps8 = {
+    alignment: "start",
+    orientation: "horizontal"
+  };
+  var ActionButtons = (props) => {
+    const _a = props, {
+      alignment = defaultProps8.alignment,
+      orientation = defaultProps8.orientation
+    } = _a, other = __objRest(_a, [
+      "alignment",
+      "orientation"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          ACTIONBUTTONS_CLASSNAME,
+          {
+            [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
+            [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
+          },
+          props.className
+        ),
+        children: props.children
+      })
+    );
+  };
+  ActionButtons.states = states12;
+  ActionButtons.options = options11;
+  ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
+  ActionButtons.defaultProps = defaultProps8;
+
+  // src/button-group/button-group.spec.tsx
+  var import_jsx_runtime16 = __require("react/jsx-runtime");
+  var BUTTONGROUP_CLASSNAME = `k-button-group`;
+  var states13 = [
+    States.disabled
+  ];
+  var options12 = {
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
+  };
+  var defaultProps9 = {
+    fillMode: FillMode.solid
+  };
+  var ButtonGroup = (props) => {
+    const _a = props, {
+      fillMode = defaultProps9.fillMode,
+      disabled,
+      stretched
+    } = _a, other = __objRest(_a, [
+      "fillMode",
+      "disabled",
+      "stretched"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BUTTONGROUP_CLASSNAME,
+          optionClassNames(BUTTONGROUP_CLASSNAME, {
+            fillMode
+          }),
+          stateClassNames(BUTTONGROUP_CLASSNAME, {
+            disabled
+          }),
+          {
+            [`${BUTTONGROUP_CLASSNAME}-stretched`]: stretched
+          }
+        ),
+        children: props.children
+      })
+    );
+  };
+  ButtonGroup.states = states13;
+  ButtonGroup.options = options12;
+  ButtonGroup.className = BUTTONGROUP_CLASSNAME;
+  ButtonGroup.defaultProps = defaultProps9;
+
+  // src/slider/slider.spec.tsx
+  var import_jsx_runtime17 = __require("react/jsx-runtime");
+  var SLIDER_CLASSNAME = "k-slider";
+  var states14 = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.disabled,
+    States.readonly
+  ];
+  var options13 = {};
+  var defaultProps10 = {
+    type: "single",
+    orientation: "horizontal",
+    readonly: false,
+    disabled: false,
+    handlePosition: "end"
+  };
+  var Slider = (props) => {
+    const {
+      type = defaultProps10.type,
+      orientation = defaultProps10.orientation,
+      readonly = defaultProps10.readonly,
+      disabled = defaultProps10.disabled,
+      handlePosition = defaultProps10.handlePosition,
+      hover,
+      focus,
+      active,
+      trackStyle,
+      dir
+    } = props;
+    let iconIncrease;
+    let iconDecrease;
+    if (orientation === "horizontal") {
+      iconIncrease = "caret-alt-right";
+      iconDecrease = "caret-alt-left";
+    } else if (orientation === "vertical") {
+      iconIncrease = "caret-alt-up";
+      iconDecrease = "caret-alt-down";
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: classNames(
+      SLIDER_CLASSNAME,
+      props.className,
+      stateClassNames(SLIDER_CLASSNAME, {
+        readonly,
+        disabled
+      }),
+      {
+        [`k-slider-${orientation}`]: orientation,
+        "k-colorgradient-slider": type === "gradient",
+        "k-range-slider": type === "range"
+      }
+    ), dir, children: [
+      type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-slider-track-wrap", children: [
+        type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-slider-selection" }),
+          type === "range" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: classNames(
+            "k-draghandle",
+            "k-draghandle-start",
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: classNames(
+            "k-draghandle",
+            `k-draghandle-${handlePosition}`,
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) })
+        ] })
+      ] }),
+      type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    ] });
+  };
+  Slider.states = states14;
+  Slider.options = options13;
+  Slider.className = SLIDER_CLASSNAME;
+  Slider.defaultProps = defaultProps10;
+
+  // src/slider/slider-tick.tsx
+  var import_jsx_runtime18 = __require("react/jsx-runtime");
+  var SLIDER_TICK_CLASSNAME = "k-tick";
+  var states15 = [];
+  var options14 = {};
+  var defaultProps11 = {
+    label: false
+  };
+  var SliderTick = (props) => {
+    const {
+      style,
+      label = defaultProps11.label,
+      orientation,
+      large,
+      text
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: classNames(
+      props.className,
+      SLIDER_TICK_CLASSNAME,
+      {
+        [`k-tick-${orientation}`]: orientation,
+        "k-tick-large": large
+      }
+    ), style, children: label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-label", children: text }) });
+  };
+  SliderTick.states = states15;
+  SliderTick.options = options14;
+  SliderTick.className = SLIDER_TICK_CLASSNAME;
+  SliderTick.defaultProps = defaultProps11;
+
+  // src/spinbutton/spinbutton.spec.tsx
+  var import_jsx_runtime19 = __require("react/jsx-runtime");
+  var SPINBUTTON_CLASSNAME = `k-spin-button`;
+  var states16 = [];
+  var options15 = {
     size: [Size.small, Size.medium, Size.large],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
   };
-  var defaultProps8 = {
+  var defaultProps12 = {
     size: Size.medium,
     fillMode: FillMode.solid
   };
   var SpinButton = (props) => {
     const _a = props, {
-      size = defaultProps8.size,
-      fillMode = defaultProps8.fillMode
+      size = defaultProps12.size,
+      fillMode = defaultProps12.fillMode
     } = _a, other = __objRest(_a, [
       "size",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -852,7 +1052,7 @@
           props.className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Button,
             {
               className: "k-spinner-increase",
@@ -862,7 +1062,7 @@
               fillMode
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Button,
             {
               className: "k-spinner-decrease",
@@ -876,15 +1076,15 @@
       })
     );
   };
-  SpinButton.states = states12;
-  SpinButton.options = options11;
+  SpinButton.states = states16;
+  SpinButton.options = options15;
   SpinButton.className = SPINBUTTON_CLASSNAME;
-  SpinButton.defaultProps = defaultProps8;
+  SpinButton.defaultProps = defaultProps12;
 
   // src/numerictextbox/numerictextbox.spec.tsx
-  var import_jsx_runtime16 = __require("react/jsx-runtime");
+  var import_jsx_runtime20 = __require("react/jsx-runtime");
   var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
-  var states13 = [
+  var states17 = [
     States.hover,
     States.focus,
     States.valid,
@@ -894,12 +1094,12 @@
     States.disabled,
     States.readonly
   ];
-  var options12 = {
+  var options16 = {
     size: [Size.small, Size.medium, Size.large],
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps9 = {
+  var defaultProps13 = {
     showSpinButton: true,
     showClearButton: true,
     size: Input.defaultProps.size,
@@ -921,8 +1121,8 @@
       loading,
       disabled,
       readonly,
-      showClearButton = defaultProps9.showClearButton,
-      showSpinButton = defaultProps9.showSpinButton
+      showClearButton = defaultProps13.showClearButton,
+      showSpinButton = defaultProps13.showSpinButton
     } = _a, other = __objRest(_a, [
       "value",
       "placeholder",
@@ -940,7 +1140,7 @@
       "showClearButton",
       "showSpinButton"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       Input,
       __spreadProps(__spreadValues({}, other), {
         size,
@@ -956,8 +1156,8 @@
         readonly,
         className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -966,14 +1166,14 @@
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             InputClearValue,
             {
               loading,
@@ -982,7 +1182,7 @@
               value
             }
           ),
-          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             SpinButton,
             {
               className: "k-input-spinner",
@@ -994,13 +1194,531 @@
       })
     );
   };
-  NumericTextbox.states = states13;
-  NumericTextbox.options = options12;
+  NumericTextbox.states = states17;
+  NumericTextbox.options = options16;
   NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
-  NumericTextbox.defaultProps = defaultProps9;
+  NumericTextbox.defaultProps = defaultProps13;
+
+  // src/textbox/textbox.spec.tsx
+  var import_jsx_runtime21 = __require("react/jsx-runtime");
+  var TEXTBOX_CLASSNAME = `k-textbox`;
+  var states18 = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
+  ];
+  var options17 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  };
+  var defaultProps14 = {
+    showClearButton: true,
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+  };
+  var Textbox = (props) => {
+    const _a = props, {
+      prefix,
+      suffix,
+      value,
+      placeholder,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      showClearButton = defaultProps14.showClearButton
+    } = _a, other = __objRest(_a, [
+      "prefix",
+      "suffix",
+      "value",
+      "placeholder",
+      "size",
+      "rounded",
+      "fillMode",
+      "hover",
+      "focus",
+      "valid",
+      "invalid",
+      "required",
+      "loading",
+      "disabled",
+      "readonly",
+      "showClearButton"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      Input,
+      __spreadProps(__spreadValues({}, other), {
+        size,
+        rounded,
+        fillMode,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        className: classNames(props.className, TEXTBOX_CLASSNAME),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            InputValidationIcon,
+            {
+              valid,
+              invalid,
+              loading,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            InputLoadingIcon,
+            {
+              loading,
+              disabled
+            }
+          ),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            InputClearValue,
+            {
+              loading,
+              disabled,
+              readonly,
+              value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(InputSuffix, { children: suffix })
+        ]
+      })
+    );
+  };
+  Textbox.states = states18;
+  Textbox.options = options17;
+  Textbox.className = TEXTBOX_CLASSNAME;
+  Textbox.defaultProps = defaultProps14;
+
+  // src/colorgradient/color-input.tsx
+  var import_jsx_runtime22 = __require("react/jsx-runtime");
+  var COLOR_INPUT_CLASSNAME = "k-colorgradient-inputs";
+  var states19 = [];
+  var options18 = {};
+  var defaultProps15 = {
+    mode: "rgba"
+  };
+  var ColorInput = (props) => {
+    const {
+      mode = defaultProps15.mode
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: classNames(COLOR_INPUT_CLASSNAME, "k-hstack"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-cologradient-toggle-mode" }) }),
+      mode === "rgba" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
+        ] })
+      ] }),
+      mode === "rgb" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
+        ] })
+      ] }),
+      mode === "hsva" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
+        ] })
+      ] }),
+      mode === "hsv" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
+        ] })
+      ] }),
+      mode === "hex" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-vstack k-flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Textbox, { showClearButton: false, value: "#b88484AA", className: "k-hex-value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "k-colorgradient-input-label", children: "HEX" })
+      ] }) })
+    ] });
+  };
+  ColorInput.states = states19;
+  ColorInput.options = options18;
+  ColorInput.className = COLOR_INPUT_CLASSNAME;
+  ColorInput.defaultProps = defaultProps15;
+
+  // src/colorgradient/color-contrast.tsx
+  var import_jsx_runtime23 = __require("react/jsx-runtime");
+  var COLOR_CONTRAST_CLASSNAME = "k-colorgradient-color-contrast";
+  var states20 = [];
+  var options19 = {};
+  var defaultProps16 = {};
+  var ColorContrast = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: classNames(COLOR_CONTRAST_CLASSNAME, "k-vbox"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "k-contrast-ratio", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "k-contrast-ratio-text", children: "Contrast ratio: 7.1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "k-contrast-validation !k-text-success", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "check" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "check" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "AA: 4.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "k-contrast-validation !k-text-success", children: [
+        "Pass",
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "check" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "AAA: 7.0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "k-contrast-validation !k-text-error", children: [
+        "Fail",
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "x" })
+      ] })
+    ] })
+  ] });
+  ColorContrast.states = states20;
+  ColorContrast.options = options19;
+  ColorContrast.className = COLOR_CONTRAST_CLASSNAME;
+  ColorContrast.defaultProps = defaultProps16;
+
+  // src/colorgradient/color-gradient.spec.tsx
+  var import_jsx_runtime24 = __require("react/jsx-runtime");
+  var COLOR_GRADIENT_CLASSNAME = "k-colorgradient";
+  var states21 = [
+    States.hover,
+    States.focus,
+    States.readonly,
+    States.disabled
+  ];
+  var options20 = {};
+  var defaultProps17 = {
+    mode: "rgba",
+    readonly: false,
+    disabled: false,
+    contrast: false,
+    gradientStyle: { background: "rgb(255, 0, 0 )" },
+    dragHandleStyle: { top: "50px", left: "73px" },
+    alphaStyle: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }
+  };
+  var ColorGradient = (props) => {
+    const {
+      mode = defaultProps17.mode,
+      readonly = defaultProps17.readonly,
+      disabled = defaultProps17.disabled,
+      dir,
+      contrast = defaultProps17.contrast,
+      hover,
+      focus,
+      hoverHandle,
+      focusHandle,
+      gradientStyle = defaultProps17.gradientStyle,
+      dragHandleStyle = defaultProps17.dragHandleStyle,
+      alphaStyle = defaultProps17.alphaStyle
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: classNames(
+      props.className,
+      COLOR_GRADIENT_CLASSNAME,
+      stateClassNames(COLOR_GRADIENT_CLASSNAME, {
+        hover,
+        focus,
+        readonly,
+        disabled
+      })
+    ), dir, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-hsv-rectangle", style: gradientStyle, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: classNames(
+          "k-hsv-draghandle",
+          "k-draghandle",
+          {
+            "k-hover": hoverHandle,
+            "k-focus": focusHandle
+          }
+        ), style: dragHandleStyle }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Slider, { type: "gradient", orientation: "vertical", className: "k-hue-slider", hover: hoverHandle, focus: focusHandle }),
+          mode !== "rgb" && mode !== "hsv" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Slider, { type: "gradient", orientation: "vertical", className: "k-alpha-slider", hover: hoverHandle, focus: focusHandle, trackStyle: alphaStyle })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorInput, { mode: props.mode }),
+      contrast && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ColorContrast, {})
+    ] });
+  };
+  ColorGradient.states = states21;
+  ColorGradient.options = options20;
+  ColorGradient.className = COLOR_GRADIENT_CLASSNAME;
+  ColorGradient.defaultProps = defaultProps17;
+
+  // src/colorpalette/colorpalette-row.tsx
+  var import_jsx_runtime25 = __require("react/jsx-runtime");
+  var ColorPaletteRow = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("tr", { children: props.children });
+
+  // src/colorpalette/colorpalette-tile.tsx
+  var import_jsx_runtime26 = __require("react/jsx-runtime");
+  var COLORPALETTETILE_CLASSNAME = `k-colorpalette-tile`;
+  var states22 = [
+    States.hover,
+    States.focus,
+    States.selected
+  ];
+  var options21 = {};
+  var ColorPaletteTile = (props) => {
+    const _a = props, {
+      color,
+      tileSize,
+      hover,
+      focus,
+      selected
+    } = _a, other = __objRest(_a, [
+      "color",
+      "tileSize",
+      "hover",
+      "focus",
+      "selected"
+    ]);
+    const styles2 = {
+      "background-color": color,
+      "width": tileSize ? tileSize + "px" : "",
+      "height": tileSize ? tileSize + "px" : ""
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "td",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          COLORPALETTETILE_CLASSNAME,
+          stateClassNames(COLORPALETTETILE_CLASSNAME, {
+            hover,
+            focus,
+            selected
+          })
+        ),
+        style: styles2
+      })
+    );
+  };
+  ColorPaletteTile.states = states22;
+  ColorPaletteTile.options = options21;
+  ColorPaletteTile.className = COLORPALETTETILE_CLASSNAME;
+
+  // src/colorpalette/colorpalette.spec.tsx
+  var import_jsx_runtime27 = __require("react/jsx-runtime");
+  var COLORPALETTE_CLASSNAME = `k-colorpalette`;
+  var states23 = [
+    States.disabled
+  ];
+  var options22 = {};
+  var defaultProps18 = {
+    columns: 10
+  };
+  var ColorPalette = (props) => {
+    const _a = props, {
+      palette,
+      columns = defaultProps18.columns,
+      tileSize,
+      disabled
+    } = _a, other = __objRest(_a, [
+      "palette",
+      "columns",
+      "tileSize",
+      "disabled"
+    ]);
+    const newChildren = [];
+    if (palette) {
+      const cols = columns || palette.columns;
+      const colors = palette.colors ? palette.colors : palette;
+      if (Array.isArray(colors)) {
+        Array.from({ length: Math.ceil(colors.length / cols) }, (_, i) => {
+          const items = [];
+          colors.slice(i * cols, (i + 1) * cols).map((color) => {
+            items.push(/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorPaletteTile, { color, tileSize }));
+          });
+          const row = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorPaletteRow, { children: items });
+          newChildren.push(row);
+        });
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          COLORPALETTE_CLASSNAME,
+          stateClassNames(COLORPALETTE_CLASSNAME, {
+            disabled
+          })
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("table", { className: "k-colorpalette-table", children: newChildren.length > 0 ? newChildren : props.children })
+      })
+    );
+  };
+  ColorPalette.states = states23;
+  ColorPalette.options = options22;
+  ColorPalette.className = COLORPALETTE_CLASSNAME;
+  ColorPalette.defaultProps = defaultProps18;
+
+  // src/colorpalette/colorpalette-presets.tsx
+  var PALETTEPRESETS = {
+    basic: {
+      colors: ["#000000", "#7f7f7f", "#880015", "#ed1c24", "#ff7f27", "#fff200", "#22b14c", "#00a2e8", "#3f48cc", "#a349a4", "#ffffff", "#c3c3c3", "#b97a57", "#ffaec9", "#ffc90e", "#efe4b0", "#b5e61d", "#99d9ea", "#7092be", "#c8bfe7"],
+      columns: 10
+    },
+    office: {
+      colors: ["#ffffff", "#000000", "#e6e6e6", "#435569", "#4371c4", "#ed7e32", "#a5a4a5", "#febf04", "#5a9bd5", "#71ae48", "#f2f2f3", "#7f7f7f", "#d1cece", "#d5dde3", "#dae1f4", "#fce5d4", "#deeded", "#fff2cc", "#deeaf6", "#e1efd9", "#d7d8d8", "#585959", "#aeabab", "#adbaca", "#b4c5e7", "#f6caac", "#dbdbdb", "#ffe498", "#bcd6ee", "#c5e0b2", "#bfbfc0", "#3f3f3f", "#767070", "#8595b1", "#8fabdb", "#f5b183", "#c9c8c9", "#fed965", "#9bc4e5", "#a8d08d", "#a5a5a6", "#262625", "#393939", "#334050", "#2e5496", "#c45a11", "#7b7b7a", "#bf9000", "#2f75b5", "#548235", "#7f7f7f", "#0b0c0c", "#161616", "#222a34", "#203764", "#843d0b", "#525252", "#7f6000", "#1d4d79", "#375623"],
+      columns: 10
+    },
+    apex: {
+      colors: ["#ffffff", "#000000", "#c9c2d1", "#69676d", "#ceb966", "#9cb084", "#6bb1c9", "#6585cf", "#7e6bc9", "#a379bb", "#f2f2f2", "#7f7f7f", "#f4f2f5", "#e0e0e2", "#f5f1e0", "#ebefe6", "#e1eff4", "#e0e6f5", "#e5e1f4", "#ece4f1", "#d8d8d8", "#595959", "#e9e6ec", "#c2c1c5", "#ebe3c1", "#d7dfcd", "#c3dfe9", "#c1ceeb", "#cbc3e9", "#dac9e3", "#bfbfbf", "#3f3f3f", "#dedae3", "#a4a3a8", "#e1d5a3", "#c3cfb5", "#a6d0de", "#a2b5e2", "#b1a6de", "#c7aed6", "#a5a5a5", "#262626", "#9688a5", "#4e4d51", "#ae9638", "#758c5a", "#3d8da9", "#365bb0", "#533da9", "#7d4d99", "#7f7f7f", "#0c0c0c", "#635672", "#343336", "#746425", "#4e5d3c", "#295e70", "#243c75", "#372970", "#533366"],
+      columns: 10
+    },
+    austin: {
+      colors: ["#ffffff", "#000000", "#caf278", "#3e3d2d", "#94c600", "#71685a", "#ff6700", "#909465", "#956b43", "#fea022", "#f2f2f2", "#7f7f7f", "#f4fce4", "#dddcd0", "#efffc0", "#e3e1dc", "#ffe0cb", "#e8e9df", "#ece1d6", "#feecd2", "#d8d8d8", "#595959", "#e9f9c9", "#bbb9a1", "#dfff82", "#c8c3ba", "#ffc299", "#d2d4c0", "#dac3ad", "#fed9a6", "#bfbfbf", "#3f3f3f", "#dff7ae", "#ada598", "#cfff43", "#ada598", "#ffa365", "#bcbfa1", "#c8a585", "#fec67a", "#a5a5a5", "#262626", "#a9ea25", "#2e2d21", "#6f9400", "#544e43", "#bf4d00", "#6c6f4b", "#6f5032", "#d77b00", "#7f7f7f", "#0c0c0c", "#74a50f", "#1f1e16", "#4a6300", "#38342d", "#7f3300", "#484a32", "#4a3521", "#8f5200"],
+      columns: 10
+    },
+    clarity: {
+      colors: ["#ffffff", "#292934", "#f3f2dc", "#d2533c", "#93a299", "#ad8f67", "#726056", "#4c5a6a", "#808da0", "#79463d", "#f2f2f2", "#e7e7ec", "#e7e5b9", "#f6dcd8", "#e9ecea", "#eee8e0", "#e4dedb", "#d8dde3", "#e5e8ec", "#e9d6d3", "#d8d8d8", "#c4c4d1", "#d5d185", "#edbab1", "#d3d9d6", "#ded2c2", "#c9beb8", "#b2bcc8", "#ccd1d9", "#d3aea7", "#bfbfbf", "#8a8aa3", "#aca73b", "#e4978a", "#bec7c1", "#cdbba3", "#af9e94", "#8c9bac", "#b2bac6", "#bd857c", "#a5a5a5", "#56566e", "#56531d", "#a43925", "#6b7c72", "#866b48", "#554840", "#39434f", "#5c697b", "#5a342d", "#7f7f7f", "#3b3b4b", "#22210b", "#6d2619", "#47534c", "#594730", "#39302b", "#262d35", "#3d4652", "#3c231e"],
+      columns: 10
+    },
+    slipstream: {
+      colors: ["#ffffff", "#000000", "#b4dcfa", "#212745", "#4e67c8", "#5eccf3", "#a7ea52", "#5dceaf", "#ff8021", "#f14124", "#f2f2f2", "#7f7f7f", "#8bc9f7", "#c7cce4", "#dbe0f4", "#def4fc", "#edfadc", "#def5ef", "#ffe5d2", "#fcd9d3", "#d8d8d8", "#595959", "#4facf3", "#909aca", "#b8c2e9", "#beeafa", "#dbf6b9", "#beebdf", "#ffcca6", "#f9b3a7", "#bfbfbf", "#3f3f3f", "#0d78c9", "#5967af", "#94a3de", "#9ee0f7", "#caf297", "#9de1cf", "#ffb279", "#f68d7b", "#a5a5a5", "#262626", "#063c64", "#181d33", "#31479f", "#11b2eb", "#81d319", "#34ac8b", "#d85c00", "#c3260c", "#7f7f7f", "#0c0c0c", "#021828", "#101322", "#202f6a", "#0b769c", "#568c11", "#22725c", "#903d00", "#821908"],
+      columns: 10
+    },
+    metro: {
+      colors: ["#ffffff", "#000000", "#d6ecff", "#4e5b6f", "#7fd13b", "#ea157a", "#feb80a", "#00addc", "#738ac8", "#1ab39f", "#f2f2f2", "#7f7f7f", "#a7d6ff", "#d9dde4", "#e5f5d7", "#fad0e4", "#fef0cd", "#c5f2ff", "#e2e7f4", "#c9f7f1", "#d8d8d8", "#595959", "#60b5ff", "#b3bcca", "#cbecb0", "#f6a1c9", "#fee29c", "#8be6ff", "#c7d0e9", "#94efe3", "#bfbfbf", "#3f3f3f", "#007dea", "#8d9baf", "#b2e389", "#f272af", "#fed46b", "#51d9ff", "#aab8de", "#5fe7d5", "#a5a5a5", "#262626", "#003e75", "#3a4453", "#5ea226", "#af0f5b", "#c58c00", "#0081a5", "#425ea9", "#138677", "#7f7f7f", "#0c0c0c", "#00192e", "#272d37", "#3f6c19", "#750a3d", "#835d00", "#00566e", "#2c3f71", "#0c594f"],
+      columns: 10
+    },
+    flow: {
+      colors: ["#ffffff", "#000000", "#dbf5f9", "#04617b", "#0f6fc6", "#009dd9", "#0bd0d9", "#10cf9b", "#7cca62", "#a5c249", "#f2f2f2", "#7f7f7f", "#b2e9f2", "#b4ecfc", "#c7e2fa", "#c4eeff", "#c9fafc", "#c9faed", "#e4f4df", "#edf2da", "#d8d8d8", "#595959", "#76d9e8", "#6adafa", "#90c6f6", "#89deff", "#93f5f9", "#94f6db", "#cae9c0", "#dbe6b6", "#bfbfbf", "#3f3f3f", "#21b2c8", "#20c8f7", "#59a9f2", "#4fceff", "#5df0f6", "#5ff2ca", "#b0dfa0", "#c9da91", "#a5a5a5", "#262626", "#105964", "#02485c", "#0b5394", "#0075a2", "#089ca2", "#0b9b74", "#54a838", "#7e9532", "#7f7f7f", "#0c0c0c", "#062328", "#01303d", "#073763", "#004e6c", "#05686c", "#07674d", "#387025", "#546321"],
+      columns: 10
+    },
+    hardcover: {
+      colors: ["#ffffff", "#000000", "#ece9c6", "#895d1d", "#873624", "#d6862d", "#d0be40", "#877f6c", "#972109", "#aeb795", "#f2f2f2", "#7f7f7f", "#e1dca5", "#f2e0c6", "#f0d0c9", "#f6e6d5", "#f5f2d8", "#e7e5e1", "#fbc7bc", "#eef0e9", "#d8d8d8", "#595959", "#d0c974", "#e6c28d", "#e2a293", "#eeceaa", "#ece5b2", "#cfccc3", "#f78f7a", "#dee2d4", "#bfbfbf", "#3f3f3f", "#a29a36", "#daa454", "#d4735e", "#e6b681", "#e2d88c", "#b7b2a5", "#f35838", "#ced3bf", "#a5a5a5", "#262626", "#514d1b", "#664515", "#65281a", "#a2641f", "#a39428", "#655f50", "#711806", "#879464", "#7f7f7f", "#0c0c0c", "#201e0a", "#442e0e", "#431b11", "#6c4315", "#6d621a", "#433f35", "#4b1004", "#5a6243"],
+      columns: 10
+    },
+    trek: {
+      colors: ["#ffffff", "#000000", "#fbeec9", "#4e3b30", "#f0a22e", "#a5644e", "#b58b80", "#c3986d", "#a19574", "#c17529", "#f2f2f2", "#7f7f7f", "#f7e09e", "#e1d6cf", "#fcecd5", "#eddfda", "#f0e7e5", "#f3eae1", "#ece9e3", "#f5e3d1", "#d8d8d8", "#595959", "#f3cc5f", "#c4ad9f", "#f9d9ab", "#dcc0b6", "#e1d0cc", "#e7d5c4", "#d9d4c7", "#ebc7a3", "#bfbfbf", "#3f3f3f", "#d29f0f", "#a78470", "#f6c781", "#cba092", "#d2b9b2", "#dbc1a7", "#c6bfab", "#e1ac76", "#a5a5a5", "#262626", "#694f07", "#3a2c24", "#c87d0e", "#7b4b3a", "#926255", "#a17242", "#7b7153", "#90571e", "#7f7f7f", "#0c0c0c", "#2a1f03", "#271d18", "#855309", "#523226", "#614138", "#6b4c2c", "#524b37", "#603a14"],
+      columns: 10
+    },
+    verve: {
+      colors: ["#ffffff", "#000000", "#d2d2d2", "#666666", "#ff388c", "#e40059", "#9c007f", "#68007f", "#005bd3", "#00349e", "#f2f2f2", "#7f7f7f", "#bdbdbd", "#e0e0e0", "#ffd7e8", "#ffc6dc", "#ffb8f1", "#f1b2ff", "#c3dcff", "#b8cfff", "#d8d8d8", "#595959", "#9d9d9d", "#c1c1c1", "#ffafd1", "#ff8eba", "#ff71e4", "#e365ff", "#87baff", "#72a0ff", "#bfbfbf", "#3f3f3f", "#696969", "#a3a3a3", "#ff87ba", "#ff5597", "#ff2ad7", "#d519ff", "#4b98ff", "#2b71ff", "#a5a5a5", "#262626", "#343434", "#4c4c4c", "#e90062", "#ab0042", "#75005f", "#4e005f", "#00449e", "#002676", "#7f7f7f", "#0c0c0c", "#151515", "#333333", "#9b0041", "#72002c", "#4e003f", "#34003f", "#002d69", "#00194f"],
+      columns: 10
+    },
+    monochrome: {
+      colors: ["#000000", "#1a1a1a", "#333333", "#4d4d4d", "#666666", "#808080", "#999999", "#b3b3b3", "#cccccc", "#e6e6e6", "#f2f2f2", "#ffffff"],
+      columns: 12
+    }
+  };
+
+  // src/coloreditor/color-editor.spec.tsx
+  var import_jsx_runtime28 = __require("react/jsx-runtime");
+  var COLOREDITOR_CLASSNAME = "k-coloreditor";
+  var states24 = [
+    States.focus
+  ];
+  var options23 = {};
+  var defaultProps19 = {
+    view: "gradient",
+    currentColor: "fuchsia",
+    palette: PALETTEPRESETS.office
+  };
+  var ColorEditor = (props) => {
+    const {
+      view = defaultProps19.view,
+      color,
+      currentColor = defaultProps19.currentColor,
+      focus,
+      focusView,
+      dir,
+      group,
+      palette = defaultProps19.palette
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: classNames(
+      props.className,
+      "k-flatcolorpicker",
+      COLOREDITOR_CLASSNAME,
+      stateClassNames(COLOREDITOR_CLASSNAME, { focus })
+    ), dir, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "k-coloreditor-header k-hstack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-coloreditor-header-actions k-hstack", children: group && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ButtonGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { fillMode: "flat", icon: "droplet-slider", selected: view === "gradient" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { fillMode: "flat", icon: "palette", selected: view === "palette" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "k-coloreditor-header-actions k-hstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { fillMode: "flat", icon: "droplet-slash" }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "k-coloreditor-preview k-vstack", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorPreview, { className: "k-coloreditor-preview-color", color }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorPreview, { className: "k-coloreditor-current-color", color: currentColor })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorGradient, { focus: focusView }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorPalette, { palette }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { className: "k-coloreditor-cancel", children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { themeColor: "primary", className: "k-coloreditor-apply", children: "Apply" })
+      ] })
+    ] });
+  };
+  ColorEditor.states = states24;
+  ColorEditor.options = options23;
+  ColorEditor.className = COLOREDITOR_CLASSNAME;
+  ColorEditor.defaultProps = defaultProps19;
 
   // src/colorpicker/tests/colorpicker-dropdown.tsx
-  var import_jsx_runtime17 = __require("react/jsx-runtime");
+  var import_jsx_runtime29 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -1015,164 +1733,18 @@
     }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("style", { children: styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "ColorPicker With ColorGradient View" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "ColorPicker With ColorPalette View" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorPicker, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-animation-container k-animation-container-shown", style: { position: "relative", width: "min-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-popup k-colorpicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-flatcolorpicker k-coloreditor", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-header k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-coloreditor-header-actions k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { fillMode: "flat", icon: "color-canvas", selected: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { fillMode: "flat", icon: "palette" })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-spacer" }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-header-actions k-hstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { fillMode: "flat", icon: "reset-color" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-preview k-vstack", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorPreview, { className: "k-coloreditor-preview-color", color: "rgba(0,0,0, 0.5)" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorPreview, { className: "k-coloreditor-current-color", color: "fuchsia" })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-coloreditor-views k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-colorgradient", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-hsv-rectangle", style: { background: "rgb(255, 0, 0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-hsv-draghandle k-draghandle", style: { top: "50px", left: "73px" } }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-slider k-slider-vertical k-hue-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-slider-track", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-slider-selection" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-                  ] }) }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-slider-track", style: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-slider-selection" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-                  ] }) }) })
-                ] })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-colorgradient-inputs k-hstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-colorgradient-toggle-mode" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-vstack", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-colorgradient-input-label", children: "R" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-vstack", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-colorgradient-input-label", children: "G" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-vstack", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-colorgradient-input-label", children: "B" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-vstack", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-colorgradient-input-label", children: "A" })
-                ] })
-              ] })
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-footer k-actions k-actions-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { className: "k-coloreditor-cancel", children: "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { themeColor: "primary", className: "k-coloreditor-apply", children: "Apply" })
-            ] })
-          ] }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("style", { children: styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "ColorPicker With ColorGradient View" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: "ColorPicker With ColorPalette View" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColorPicker, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "k-animation-container k-animation-container-shown", style: { position: "relative", width: "min-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "k-child-animation-container", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "k-popup k-color-picker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColorEditor, { group: true, color: "rgba(0,0,0, 0.5)", currentColor: "fuchsia" }) }) }) })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { position: "relative" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorPicker, { value: "fuchsia" }),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-animation-container k-animation-container-shown", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-popup k-colorpicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-flatcolorpicker k-coloreditor", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-header k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-coloreditor-header-actions k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { fillMode: "flat", icon: "color-canvas" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { fillMode: "flat", icon: "palette", selected: true })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-spacer" }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-header-actions k-hstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { fillMode: "flat", icon: "reset-color" }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-preview k-vstack", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorPreview, { className: "k-coloreditor-preview-color", color: "rgba(0,0,0, 0.5)" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorPreview, { className: "k-coloreditor-current-color", color: "fuchsia" })
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-coloreditor-views k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-colorpalette", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "k-colorpalette-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("table", { className: "k-colorpalette-table k-palette", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tbody", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(255, 255, 255)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(0, 0, 0)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(230, 230, 230)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(67, 85, 105)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(67, 113, 196)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(237, 126, 50)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(165, 164, 165)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(254, 191, 4)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(90, 155, 213)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(113, 174, 72)" } })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(242, 242, 243)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(127, 127, 127)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(209, 206, 206)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(213, 221, 227)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(218, 225, 244)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(252, 229, 212)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(222, 237, 237)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(255, 242, 204)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(222, 234, 246)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(225, 239, 217)" } })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(215, 216, 216)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(88, 89, 89)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(174, 171, 171)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(173, 186, 202)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(180, 197, 231)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(246, 202, 172)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(219, 219, 219)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(255, 228, 152)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(188, 214, 238)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(197, 224, 178)" } })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(191, 191, 192)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(63, 63, 63)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(118, 112, 112)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(133, 149, 177)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(143, 171, 219)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(245, 177, 131)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(201, 200, 201)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(254, 217, 101)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(155, 196, 229)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(168, 208, 141)" } })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(165, 165, 166)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(38, 38, 37)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(57, 57, 57)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(51, 64, 80)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(46, 84, 150)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(196, 90, 17)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(123, 123, 122)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(191, 144, 0)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(47, 117, 181)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(84, 130, 53)" } })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("tr", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(127, 127, 127)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(11, 12, 12)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(22, 22, 22)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(34, 42, 52)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(32, 55, 100)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(132, 61, 11)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(82, 82, 82)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(127, 96, 0)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(29, 77, 121)" } }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("td", { className: "k-colorpalette-tile", style: { backgroundColor: "rgb(55, 86, 35)" } })
-              ] })
-            ] }) }) }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "k-coloreditor-footer k-actions k-actions-end", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { className: "k-coloreditor-cancel", children: "Cancel" }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { themeColor: "primary", className: "k-coloreditor-apply", children: "Apply" })
-            ] })
-          ] }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColorPicker, { value: "fuchsia" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "k-animation-container k-animation-container-shown", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "k-child-animation-container", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "k-popup k-color-picker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ColorEditor, { group: true, view: "palette", color: "rgba(0,0,0, 0.5)", currentColor: "fuchsia" }) }) }) })
         ] }) })
       ] })
     ] })