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

package/dist/coloreditor/tests/coloreditor-views.js

@@ -381,157 +381,171 @@
   Button.className = BUTTON_CLASSNAME;
   Button.defaultProps = defaultProps3;
 
-  // src/colorpalette/colorpalette-row.tsx
+  // src/button-group/button-group.spec.tsx
   var import_jsx_runtime4 = __require("react/jsx-runtime");
-  var ColorPaletteRow = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: props.children });
-
-  // src/colorpalette/colorpalette-tile.tsx
-  var import_jsx_runtime5 = __require("react/jsx-runtime");
-  var COLORPALETTETILE_CLASSNAME = `k-colorpalette-tile`;
+  var BUTTONGROUP_CLASSNAME = `k-button-group`;
   var states4 = [
-    States.hover,
-    States.focus,
-    States.selected
+    States.disabled
   ];
-  var options4 = {};
-  var ColorPaletteTile = (props) => {
+  var options4 = {
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
+  };
+  var defaultProps4 = {
+    fillMode: FillMode.solid
+  };
+  var ButtonGroup = (props) => {
     const _a = props, {
-      color,
-      tileSize,
-      hover,
-      focus,
-      selected
+      fillMode = defaultProps4.fillMode,
+      disabled,
+      stretched
     } = _a, other = __objRest(_a, [
-      "color",
-      "tileSize",
-      "hover",
-      "focus",
-      "selected"
+      "fillMode",
+      "disabled",
+      "stretched"
     ]);
-    const styles2 = {
-      "background-color": color,
-      "width": tileSize ? tileSize + "px" : "",
-      "height": tileSize ? tileSize + "px" : ""
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "td",
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
           props.className,
-          COLORPALETTETILE_CLASSNAME,
-          stateClassNames(COLORPALETTETILE_CLASSNAME, {
-            hover,
-            focus,
-            selected
-          })
+          BUTTONGROUP_CLASSNAME,
+          optionClassNames(BUTTONGROUP_CLASSNAME, {
+            fillMode
+          }),
+          stateClassNames(BUTTONGROUP_CLASSNAME, {
+            disabled
+          }),
+          {
+            [`${BUTTONGROUP_CLASSNAME}-stretched`]: stretched
+          }
         ),
-        style: styles2
+        children: props.children
       })
     );
   };
-  ColorPaletteTile.states = states4;
-  ColorPaletteTile.options = options4;
-  ColorPaletteTile.className = COLORPALETTETILE_CLASSNAME;
+  ButtonGroup.states = states4;
+  ButtonGroup.options = options4;
+  ButtonGroup.className = BUTTONGROUP_CLASSNAME;
+  ButtonGroup.defaultProps = defaultProps4;
 
-  // src/colorpalette/colorpalette.spec.tsx
-  var import_jsx_runtime6 = __require("react/jsx-runtime");
-  var COLORPALETTE_CLASSNAME = `k-colorpalette`;
+  // src/slider/slider.spec.tsx
+  var import_jsx_runtime5 = __require("react/jsx-runtime");
+  var SLIDER_CLASSNAME = "k-slider";
   var states5 = [
-    States.disabled
+    States.hover,
+    States.focus,
+    States.active,
+    States.disabled,
+    States.readonly
   ];
   var options5 = {};
-  var defaultProps4 = {
-    columns: 10
+  var defaultProps5 = {
+    type: "single",
+    orientation: "horizontal",
+    readonly: false,
+    disabled: false,
+    handlePosition: "end"
   };
-  var ColorPalette = (props) => {
-    const _a = props, {
-      palette,
-      columns = defaultProps4.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_runtime6.jsx)(ColorPaletteTile, { color, tileSize }));
-          });
-          const row = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ColorPaletteRow, { children: items });
-          newChildren.push(row);
-        });
-      }
+  var Slider = (props) => {
+    const {
+      type = defaultProps5.type,
+      orientation = defaultProps5.orientation,
+      readonly = defaultProps5.readonly,
+      disabled = defaultProps5.disabled,
+      handlePosition = defaultProps5.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_runtime6.jsx)(
-      "div",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          props.className,
-          COLORPALETTE_CLASSNAME,
-          stateClassNames(COLORPALETTE_CLASSNAME, {
-            disabled
-          })
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "k-colorpalette-table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("table", { className: "k-colorpalette-table k-palette", children: newChildren.length > 0 ? newChildren : props.children }) })
-      })
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "k-slider-track-wrap", children: [
+        type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "k-slider-selection" }),
+          type === "range" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: classNames(
+            "k-draghandle",
+            "k-draghandle-start",
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: classNames(
+            "k-draghandle",
+            `k-draghandle-${handlePosition}`,
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) })
+        ] })
+      ] }),
+      type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    ] });
   };
-  ColorPalette.states = states5;
-  ColorPalette.options = options5;
-  ColorPalette.className = COLORPALETTE_CLASSNAME;
-  ColorPalette.defaultProps = defaultProps4;
+  Slider.states = states5;
+  Slider.options = options5;
+  Slider.className = SLIDER_CLASSNAME;
+  Slider.defaultProps = defaultProps5;
 
-  // src/color-preview/color-preview.tsx
-  var import_jsx_runtime7 = __require("react/jsx-runtime");
-  var COLORPREVIEW_CLASSNAME = `k-color-preview`;
+  // src/slider/slider-tick.tsx
+  var import_jsx_runtime6 = __require("react/jsx-runtime");
+  var SLIDER_TICK_CLASSNAME = "k-tick";
   var states6 = [];
   var options6 = {};
-  var ColorPreview = (props) => {
-    const _a = props, {
-      color,
-      iconName
-    } = _a, other = __objRest(_a, [
-      "color",
-      "iconName"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-      "span",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          props.className,
-          COLORPREVIEW_CLASSNAME,
-          {
-            "k-icon-color-preview": iconName,
-            "k-no-color": !color
-          }
-        ),
-        children: [
-          iconName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: iconName, className: "k-color-preview-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "span",
-            {
-              className: "k-color-preview-mask",
-              style: { backgroundColor: color }
-            }
-          )
-        ]
-      })
-    );
+  var defaultProps6 = {
+    label: false
   };
-  ColorPreview.states = states6;
-  ColorPreview.options = options6;
-  ColorPreview.className = COLORPREVIEW_CLASSNAME;
+  var SliderTick = (props) => {
+    const {
+      style,
+      label = defaultProps6.label,
+      orientation,
+      large,
+      text
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { className: classNames(
+      props.className,
+      SLIDER_TICK_CLASSNAME,
+      {
+        [`k-tick-${orientation}`]: orientation,
+        "k-tick-large": large
+      }
+    ), style, children: label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-label", children: text }) });
+  };
+  SliderTick.states = states6;
+  SliderTick.options = options6;
+  SliderTick.className = SLIDER_TICK_CLASSNAME;
+  SliderTick.defaultProps = defaultProps6;
 
   // src/input/input.spec.tsx
-  var import_jsx_runtime8 = __require("react/jsx-runtime");
+  var import_jsx_runtime7 = __require("react/jsx-runtime");
   var INPUT_CLASSNAME = `k-input`;
   var states7 = [
     States.hover,
@@ -548,7 +562,7 @@
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps5 = {
+  var defaultProps7 = {
     size: Size.medium,
     rounded: Size.medium,
     fillMode: FillMode.solid
@@ -562,9 +576,9 @@
       valid,
       loading,
       readonly,
-      size = defaultProps5.size,
-      rounded = defaultProps5.rounded,
-      fillMode = defaultProps5.fillMode
+      size = defaultProps7.size,
+      rounded = defaultProps7.rounded,
+      fillMode = defaultProps7.fillMode
     } = _a, other = __objRest(_a, [
       "hover",
       "focus",
@@ -577,7 +591,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -592,10 +606,10 @@
   Input.states = states7;
   Input.options = options7;
   Input.className = INPUT_CLASSNAME;
-  Input.defaultProps = defaultProps5;
+  Input.defaultProps = defaultProps7;
 
   // src/input/picker.spec.tsx
-  var import_jsx_runtime9 = __require("react/jsx-runtime");
+  var import_jsx_runtime8 = __require("react/jsx-runtime");
   var PICKER_CLASSNAME = `k-picker`;
   var pickerStates = [
     States.hover,
@@ -612,7 +626,7 @@
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps6 = {
+  var defaultProps8 = {
     size: Size.medium,
     rounded: Roundness.medium,
     fillMode: FillMode.solid
@@ -626,9 +640,9 @@
       valid,
       loading,
       readonly,
-      size = defaultProps6.size,
-      rounded = defaultProps6.rounded,
-      fillMode = defaultProps6.fillMode
+      size = defaultProps8.size,
+      rounded = defaultProps8.rounded,
+      fillMode = defaultProps8.fillMode
     } = _a, other = __objRest(_a, [
       "hover",
       "focus",
@@ -641,7 +655,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -657,10 +671,10 @@
   Picker.states = pickerStates;
   Picker.options = pickerOptions;
   Picker.className = PICKER_CLASSNAME;
-  Picker.defaultProps = defaultProps6;
+  Picker.defaultProps = defaultProps8;
 
   // src/input/input-clear-value.tsx
-  var import_jsx_runtime10 = __require("react/jsx-runtime");
+  var import_jsx_runtime9 = __require("react/jsx-runtime");
   var className = `k-clear-value`;
   var states8 = [
     States.disabled,
@@ -676,20 +690,20 @@
       value
     } = props;
     if (disabled || readonly || loading || !value) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { name: "x" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "x" }) });
   };
   InputClearValue.states = states8;
   InputClearValue.options = options8;
   InputClearValue.className = className;
 
   // src/input/input-inner-input.tsx
-  var import_jsx_runtime11 = __require("react/jsx-runtime");
+  var import_jsx_runtime10 = __require("react/jsx-runtime");
   var className2 = `k-input-inner`;
   var states9 = [];
   var options9 = {};
-  var defaultProps7 = {
+  var defaultProps9 = {
     type: "text",
     autocomplete: "off",
     value: "",
@@ -697,17 +711,17 @@
   };
   var InputInnerInput = (props) => {
     const _a = props, {
-      value = defaultProps7.value,
-      type = defaultProps7.type,
-      placeholder = defaultProps7.placeholder,
-      autocomplete = defaultProps7.autocomplete
+      value = defaultProps9.value,
+      type = defaultProps9.type,
+      placeholder = defaultProps9.placeholder,
+      autocomplete = defaultProps9.autocomplete
     } = _a, other = __objRest(_a, [
       "value",
       "type",
       "placeholder",
       "autocomplete"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "input",
       __spreadProps(__spreadValues({}, other), {
         type,
@@ -723,7 +737,7 @@
   InputInnerInput.className = className2;
 
   // src/input/input-inner-span.tsx
-  var import_jsx_runtime12 = __require("react/jsx-runtime");
+  var import_jsx_runtime11 = __require("react/jsx-runtime");
   var className3 = `k-input-inner`;
   var states10 = [];
   var options10 = {};
@@ -741,15 +755,15 @@
       "valueIcon",
       "valueIconName"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className3, optionClassNames(className3, props)),
         children: [
           valueIcon,
-          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
+          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
           showValue && !value && placeholder,
-          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "k-input-value-text", children: value })
+          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "k-input-value-text", children: value })
         ]
       })
     );
@@ -759,8 +773,8 @@
   InputInnerSpan.className = className3;
 
   // src/input/input-inner-textarea.tsx
-  var import_jsx_runtime13 = __require("react/jsx-runtime");
-  var defaultProps8 = {
+  var import_jsx_runtime12 = __require("react/jsx-runtime");
+  var defaultProps10 = {
     value: "",
     placeholder: ""
   };
@@ -769,15 +783,15 @@
   var options11 = {};
   var InputInnerTextarea = (props) => {
     const _a = props, {
-      value = defaultProps8.value,
-      placeholder = defaultProps8.placeholder,
+      value = defaultProps10.value,
+      placeholder = defaultProps10.placeholder,
       rows
     } = _a, other = __objRest(_a, [
       "value",
       "placeholder",
       "rows"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "textarea",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className4, optionClassNames(className4, props)),
@@ -792,7 +806,7 @@
   InputInnerTextarea.className = className4;
 
   // src/input/input-loading-icon.tsx
-  var import_jsx_runtime14 = __require("react/jsx-runtime");
+  var import_jsx_runtime13 = __require("react/jsx-runtime");
   var className5 = `k-input-loading-icon`;
   var states12 = [
     States.disabled,
@@ -804,13 +818,13 @@
       loading
     } = props;
     if (disabled || !loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
   };
 
   // src/input/input-validation-icon.tsx
-  var import_jsx_runtime15 = __require("react/jsx-runtime");
+  var import_jsx_runtime14 = __require("react/jsx-runtime");
   var className6 = `k-input-validation-icon`;
   var states13 = [
     States.valid,
@@ -829,41 +843,55 @@
     const iconName = invalid ? "warning" : "check";
     const renderValidationIcon = Boolean(valid || invalid);
     if (disabled || loading || !renderValidationIcon) {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: classNames(className6), name: iconName });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { className: classNames(className6), name: iconName });
   };
   InputValidationIcon.states = states13;
   InputValidationIcon.options = options12;
   InputValidationIcon.className = className6;
 
   // src/input/input-prefix.tsx
-  var import_jsx_runtime16 = __require("react/jsx-runtime");
+  var import_jsx_runtime15 = __require("react/jsx-runtime");
+  var className7 = `k-input-prefix`;
+  var InputPrefix = (props) => {
+    if (!props.children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classNames(className7, props.className), children: props.children });
+  };
 
   // src/input/input-suffix.tsx
-  var import_jsx_runtime17 = __require("react/jsx-runtime");
+  var import_jsx_runtime16 = __require("react/jsx-runtime");
+  var className8 = `k-input-suffix`;
+  var InputSuffix = (props) => {
+    if (!props.children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: classNames(className8, props.className), children: props.children });
+  };
 
   // src/spinbutton/spinbutton.spec.tsx
-  var import_jsx_runtime18 = __require("react/jsx-runtime");
+  var import_jsx_runtime17 = __require("react/jsx-runtime");
   var SPINBUTTON_CLASSNAME = `k-spin-button`;
   var states14 = [];
   var options13 = {
     size: [Size.small, Size.medium, Size.large],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
   };
-  var defaultProps9 = {
+  var defaultProps11 = {
     size: Size.medium,
     fillMode: FillMode.solid
   };
   var SpinButton = (props) => {
     const _a = props, {
-      size = defaultProps9.size,
-      fillMode = defaultProps9.fillMode
+      size = defaultProps11.size,
+      fillMode = defaultProps11.fillMode
     } = _a, other = __objRest(_a, [
       "size",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -871,7 +899,7 @@
           props.className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Button,
             {
               className: "k-spinner-increase",
@@ -881,7 +909,7 @@
               fillMode
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             Button,
             {
               className: "k-spinner-decrease",
@@ -898,10 +926,10 @@
   SpinButton.states = states14;
   SpinButton.options = options13;
   SpinButton.className = SPINBUTTON_CLASSNAME;
-  SpinButton.defaultProps = defaultProps9;
+  SpinButton.defaultProps = defaultProps11;
 
   // src/numerictextbox/numerictextbox.spec.tsx
-  var import_jsx_runtime19 = __require("react/jsx-runtime");
+  var import_jsx_runtime18 = __require("react/jsx-runtime");
   var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
   var states15 = [
     States.hover,
@@ -918,7 +946,7 @@
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps10 = {
+  var defaultProps12 = {
     showSpinButton: true,
     showClearButton: true,
     size: Input.defaultProps.size,
@@ -940,8 +968,8 @@
       loading,
       disabled,
       readonly,
-      showClearButton = defaultProps10.showClearButton,
-      showSpinButton = defaultProps10.showSpinButton
+      showClearButton = defaultProps12.showClearButton,
+      showSpinButton = defaultProps12.showSpinButton
     } = _a, other = __objRest(_a, [
       "value",
       "placeholder",
@@ -959,7 +987,7 @@
       "showClearButton",
       "showSpinButton"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
       Input,
       __spreadProps(__spreadValues({}, other), {
         size,
@@ -975,8 +1003,8 @@
         readonly,
         className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -985,14 +1013,14 @@
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             InputClearValue,
             {
               loading,
@@ -1001,7 +1029,7 @@
               value
             }
           ),
-          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             SpinButton,
             {
               className: "k-input-spinner",
@@ -1016,7 +1044,459 @@
   NumericTextbox.states = states15;
   NumericTextbox.options = options14;
   NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
-  NumericTextbox.defaultProps = defaultProps10;
+  NumericTextbox.defaultProps = defaultProps12;
+
+  // src/textbox/textbox.spec.tsx
+  var import_jsx_runtime19 = __require("react/jsx-runtime");
+  var TEXTBOX_CLASSNAME = `k-textbox`;
+  var states16 = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
+  ];
+  var options15 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  };
+  var defaultProps13 = {
+    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 = defaultProps13.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_runtime19.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_runtime19.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            InputValidationIcon,
+            {
+              valid,
+              invalid,
+              loading,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            InputLoadingIcon,
+            {
+              loading,
+              disabled
+            }
+          ),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            InputClearValue,
+            {
+              loading,
+              disabled,
+              readonly,
+              value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(InputSuffix, { children: suffix })
+        ]
+      })
+    );
+  };
+  Textbox.states = states16;
+  Textbox.options = options15;
+  Textbox.className = TEXTBOX_CLASSNAME;
+  Textbox.defaultProps = defaultProps13;
+
+  // src/colorgradient/color-input.tsx
+  var import_jsx_runtime20 = __require("react/jsx-runtime");
+  var COLOR_INPUT_CLASSNAME = "k-colorgradient-inputs";
+  var states17 = [];
+  var options16 = {};
+  var defaultProps14 = {
+    mode: "rgba"
+  };
+  var ColorInput = (props) => {
+    const {
+      mode = defaultProps14.mode
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: classNames(COLOR_INPUT_CLASSNAME, "k-hstack"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-cologradient-toggle-mode" }) }),
+      mode === "rgba" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
+        ] })
+      ] }),
+      mode === "rgb" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
+        ] })
+      ] }),
+      mode === "hsva" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
+        ] })
+      ] }),
+      mode === "hsv" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
+        ] })
+      ] }),
+      mode === "hex" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack k-flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Textbox, { showClearButton: false, value: "#b88484AA", className: "k-hex-value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "HEX" })
+      ] }) })
+    ] });
+  };
+  ColorInput.states = states17;
+  ColorInput.options = options16;
+  ColorInput.className = COLOR_INPUT_CLASSNAME;
+  ColorInput.defaultProps = defaultProps14;
+
+  // src/colorgradient/color-contrast.tsx
+  var import_jsx_runtime21 = __require("react/jsx-runtime");
+  var COLOR_CONTRAST_CLASSNAME = "k-colorgradient-color-contrast";
+  var states18 = [];
+  var options17 = {};
+  var defaultProps15 = {};
+  var ColorContrast = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: classNames(COLOR_CONTRAST_CLASSNAME, "k-vbox"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "k-contrast-ratio", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-contrast-ratio-text", children: "Contrast ratio: 7.1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "k-contrast-validation !k-text-success", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "check" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "check" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "AA: 4.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "k-contrast-validation !k-text-success", children: [
+        "Pass",
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "check" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "AAA: 7.0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "k-contrast-validation !k-text-error", children: [
+        "Fail",
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "x" })
+      ] })
+    ] })
+  ] });
+  ColorContrast.states = states18;
+  ColorContrast.options = options17;
+  ColorContrast.className = COLOR_CONTRAST_CLASSNAME;
+  ColorContrast.defaultProps = defaultProps15;
+
+  // src/colorgradient/color-gradient.spec.tsx
+  var import_jsx_runtime22 = __require("react/jsx-runtime");
+  var COLOR_GRADIENT_CLASSNAME = "k-colorgradient";
+  var states19 = [
+    States.hover,
+    States.focus,
+    States.readonly,
+    States.disabled
+  ];
+  var options18 = {};
+  var defaultProps16 = {
+    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 = defaultProps16.mode,
+      readonly = defaultProps16.readonly,
+      disabled = defaultProps16.disabled,
+      dir,
+      contrast = defaultProps16.contrast,
+      hover,
+      focus,
+      hoverHandle,
+      focusHandle,
+      gradientStyle = defaultProps16.gradientStyle,
+      dragHandleStyle = defaultProps16.dragHandleStyle,
+      alphaStyle = defaultProps16.alphaStyle
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: classNames(
+      props.className,
+      COLOR_GRADIENT_CLASSNAME,
+      stateClassNames(COLOR_GRADIENT_CLASSNAME, {
+        hover,
+        focus,
+        readonly,
+        disabled
+      })
+    ), dir, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-hsv-rectangle", style: gradientStyle, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: classNames(
+          "k-hsv-draghandle",
+          "k-draghandle",
+          {
+            "k-hover": hoverHandle,
+            "k-focus": focusHandle
+          }
+        ), style: dragHandleStyle }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Slider, { type: "gradient", orientation: "vertical", className: "k-hue-slider", hover: hoverHandle, focus: focusHandle }),
+          mode !== "rgb" && mode !== "hsv" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Slider, { type: "gradient", orientation: "vertical", className: "k-alpha-slider", hover: hoverHandle, focus: focusHandle, trackStyle: alphaStyle })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorInput, { mode: props.mode }),
+      contrast && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ColorContrast, {})
+    ] });
+  };
+  ColorGradient.states = states19;
+  ColorGradient.options = options18;
+  ColorGradient.className = COLOR_GRADIENT_CLASSNAME;
+  ColorGradient.defaultProps = defaultProps16;
+
+  // src/colorpalette/colorpalette-row.tsx
+  var import_jsx_runtime23 = __require("react/jsx-runtime");
+  var ColorPaletteRow = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { children: props.children });
+
+  // src/colorpalette/colorpalette-tile.tsx
+  var import_jsx_runtime24 = __require("react/jsx-runtime");
+  var COLORPALETTETILE_CLASSNAME = `k-colorpalette-tile`;
+  var states20 = [
+    States.hover,
+    States.focus,
+    States.selected
+  ];
+  var options19 = {};
+  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_runtime24.jsx)(
+      "td",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          COLORPALETTETILE_CLASSNAME,
+          stateClassNames(COLORPALETTETILE_CLASSNAME, {
+            hover,
+            focus,
+            selected
+          })
+        ),
+        style: styles2
+      })
+    );
+  };
+  ColorPaletteTile.states = states20;
+  ColorPaletteTile.options = options19;
+  ColorPaletteTile.className = COLORPALETTETILE_CLASSNAME;
+
+  // src/colorpalette/colorpalette.spec.tsx
+  var import_jsx_runtime25 = __require("react/jsx-runtime");
+  var COLORPALETTE_CLASSNAME = `k-colorpalette`;
+  var states21 = [
+    States.disabled
+  ];
+  var options20 = {};
+  var defaultProps17 = {
+    columns: 10
+  };
+  var ColorPalette = (props) => {
+    const _a = props, {
+      palette,
+      columns = defaultProps17.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_runtime25.jsx)(ColorPaletteTile, { color, tileSize }));
+          });
+          const row = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ColorPaletteRow, { children: items });
+          newChildren.push(row);
+        });
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          COLORPALETTE_CLASSNAME,
+          stateClassNames(COLORPALETTE_CLASSNAME, {
+            disabled
+          })
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("table", { className: "k-colorpalette-table", children: newChildren.length > 0 ? newChildren : props.children })
+      })
+    );
+  };
+  ColorPalette.states = states21;
+  ColorPalette.options = options20;
+  ColorPalette.className = COLORPALETTE_CLASSNAME;
+  ColorPalette.defaultProps = defaultProps17;
+
+  // src/color-preview/color-preview.tsx
+  var import_jsx_runtime26 = __require("react/jsx-runtime");
+  var COLORPREVIEW_CLASSNAME = `k-color-preview`;
+  var states22 = [];
+  var options21 = {};
+  var ColorPreview = (props) => {
+    const _a = props, {
+      color,
+      iconName
+    } = _a, other = __objRest(_a, [
+      "color",
+      "iconName"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      "span",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          COLORPREVIEW_CLASSNAME,
+          {
+            "k-icon-color-preview": iconName,
+            "k-no-color": !color
+          }
+        ),
+        children: [
+          iconName && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: iconName, className: "k-color-preview-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "span",
+            {
+              className: "k-color-preview-mask",
+              style: { backgroundColor: color }
+            }
+          )
+        ]
+      })
+    );
+  };
+  ColorPreview.states = states22;
+  ColorPreview.options = options21;
+  ColorPreview.className = COLORPREVIEW_CLASSNAME;
 
   // src/colorpalette/colorpalette-presets.tsx
   var PALETTEPRESETS = {
@@ -1070,8 +1550,63 @@
     }
   };
 
+  // src/coloreditor/color-editor.spec.tsx
+  var import_jsx_runtime27 = __require("react/jsx-runtime");
+  var COLOREDITOR_CLASSNAME = "k-coloreditor";
+  var states23 = [
+    States.focus
+  ];
+  var options22 = {};
+  var defaultProps18 = {
+    view: "gradient",
+    currentColor: "fuchsia",
+    palette: PALETTEPRESETS.office
+  };
+  var ColorEditor = (props) => {
+    const {
+      view = defaultProps18.view,
+      color,
+      currentColor = defaultProps18.currentColor,
+      focus,
+      focusView,
+      dir,
+      group,
+      palette = defaultProps18.palette
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: classNames(
+      props.className,
+      "k-flatcolorpicker",
+      COLOREDITOR_CLASSNAME,
+      stateClassNames(COLOREDITOR_CLASSNAME, { focus })
+    ), dir, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "k-coloreditor-header k-hstack", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "k-coloreditor-header-actions k-hstack", children: group && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ButtonGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { fillMode: "flat", icon: "droplet-slider", selected: view === "gradient" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { fillMode: "flat", icon: "palette", selected: view === "palette" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "k-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "k-coloreditor-header-actions k-hstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { fillMode: "flat", icon: "droplet-slash" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "k-coloreditor-preview k-vstack", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorPreview, { className: "k-coloreditor-preview-color", color }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorPreview, { className: "k-coloreditor-current-color", color: currentColor })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "k-coloreditor-views k-vstack", children: view === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorGradient, { focus: focusView }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorPalette, { palette }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { className: "k-coloreditor-cancel", children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { themeColor: "primary", className: "k-coloreditor-apply", children: "Apply" })
+      ] })
+    ] });
+  };
+  ColorEditor.states = states23;
+  ColorEditor.options = options22;
+  ColorEditor.className = COLOREDITOR_CLASSNAME;
+  ColorEditor.defaultProps = defaultProps18;
+
   // src/coloreditor/tests/coloreditor-views.tsx
-  var import_jsx_runtime20 = __require("react/jsx-runtime");
+  var import_jsx_runtime28 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -1086,86 +1621,13 @@
     }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", { children: styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "ColorGradient View" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: "ColorPalette View" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-flatcolorpicker k-coloreditor", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-coloreditor-header k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-coloreditor-header-actions k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-button-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "color-canvas", selected: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "palette" })
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-spacer" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-coloreditor-header-actions k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "reset-color" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-coloreditor-preview k-vstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorPreview, { className: "k-coloreditor-preview-color", color: "rgba(0,0,0, 0.5)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorPreview, { className: "k-coloreditor-current-color", color: "fuchsia" })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-coloreditor-views k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-colorgradient", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-hsv-rectangle", style: { background: "rgb(255, 0, 0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-hsv-draghandle k-draghandle", style: { top: "50px", left: "73px" } }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-slider k-slider-vertical k-hue-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-slider-track", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-slider-selection" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-                ] }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-slider-track", style: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-slider-selection" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-                ] }) }) })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-colorgradient-inputs k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-colorgradient-toggle-mode" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-vstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
-              ] })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { className: "k-coloreditor-cancel", children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { themeColor: "primary", className: "k-coloreditor-apply", children: "Apply" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-flatcolorpicker k-coloreditor", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-coloreditor-header k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-coloreditor-header-actions k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-button-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "color-canvas" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "palette", selected: true })
-            ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-spacer" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-coloreditor-header-actions k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", icon: "reset-color" }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-coloreditor-preview k-vstack", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorPreview, { className: "k-coloreditor-preview-color", color: "rgba(0,0,0, 0.5)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorPreview, { className: "k-coloreditor-current-color", color: "fuchsia" })
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-coloreditor-views k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorPalette, { palette: PALETTEPRESETS.office }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(ActionButtons, { className: "k-coloreditor-footer", alignment: "end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { className: "k-coloreditor-cancel", children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { themeColor: "primary", className: "k-coloreditor-apply", children: "Apply" })
-          ] })
-        ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("style", { children: styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "ColorGradient View" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "ColorPalette View" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorEditor, { group: true, color: "rgba(0,0,0, 0.5)" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorEditor, { group: true, view: "palette", color: "rgba(0,0,0, 0.5)" }) })
       ] })
     ] })
   );