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

package/dist/colorgradient/tests/colorgradient-modes.js

@@ -344,10 +344,126 @@
   Button.className = BUTTON_CLASSNAME;
   Button.defaultProps = defaultProps2;
 
-  // src/input/input.spec.tsx
+  // src/slider/slider.spec.tsx
   var import_jsx_runtime3 = __require("react/jsx-runtime");
-  var INPUT_CLASSNAME = `k-input`;
+  var SLIDER_CLASSNAME = "k-slider";
   var states3 = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.disabled,
+    States.readonly
+  ];
+  var options3 = {};
+  var defaultProps3 = {
+    type: "single",
+    orientation: "horizontal",
+    readonly: false,
+    disabled: false,
+    handlePosition: "end"
+  };
+  var Slider = (props) => {
+    const {
+      type = defaultProps3.type,
+      orientation = defaultProps3.orientation,
+      readonly = defaultProps3.readonly,
+      disabled = defaultProps3.disabled,
+      handlePosition = defaultProps3.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_runtime3.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_runtime3.jsx)(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track-wrap", children: [
+        type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "k-reset k-slider-items", children: props.children }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "k-slider-track", style: trackStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "k-slider-selection" }),
+          type === "range" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
+            "k-draghandle",
+            "k-draghandle-start",
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: classNames(
+            "k-draghandle",
+            `k-draghandle-${handlePosition}`,
+            stateClassNames(SLIDER_CLASSNAME, {
+              hover,
+              focus,
+              active
+            })
+          ) })
+        ] })
+      ] }),
+      type !== "gradient" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    ] });
+  };
+  Slider.states = states3;
+  Slider.options = options3;
+  Slider.className = SLIDER_CLASSNAME;
+  Slider.defaultProps = defaultProps3;
+
+  // src/slider/slider-tick.tsx
+  var import_jsx_runtime4 = __require("react/jsx-runtime");
+  var SLIDER_TICK_CLASSNAME = "k-tick";
+  var states4 = [];
+  var options4 = {};
+  var defaultProps4 = {
+    label: false
+  };
+  var SliderTick = (props) => {
+    const {
+      style,
+      label = defaultProps4.label,
+      orientation,
+      large,
+      text
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { className: classNames(
+      props.className,
+      SLIDER_TICK_CLASSNAME,
+      {
+        [`k-tick-${orientation}`]: orientation,
+        "k-tick-large": large
+      }
+    ), style, children: label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-label", children: text }) });
+  };
+  SliderTick.states = states4;
+  SliderTick.options = options4;
+  SliderTick.className = SLIDER_TICK_CLASSNAME;
+  SliderTick.defaultProps = defaultProps4;
+
+  // src/input/input.spec.tsx
+  var import_jsx_runtime5 = __require("react/jsx-runtime");
+  var INPUT_CLASSNAME = `k-input`;
+  var states5 = [
     States.hover,
     States.focus,
     States.valid,
@@ -357,12 +473,12 @@
     States.loading,
     States.readonly
   ];
-  var options3 = {
+  var options5 = {
     size: [Size.small, Size.medium, Size.large],
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps3 = {
+  var defaultProps5 = {
     size: Size.medium,
     rounded: Size.medium,
     fillMode: FillMode.solid
@@ -376,9 +492,9 @@
       valid,
       loading,
       readonly,
-      size = defaultProps3.size,
-      rounded = defaultProps3.rounded,
-      fillMode = defaultProps3.fillMode
+      size = defaultProps5.size,
+      rounded = defaultProps5.rounded,
+      fillMode = defaultProps5.fillMode
     } = _a, other = __objRest(_a, [
       "hover",
       "focus",
@@ -391,7 +507,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -403,13 +519,13 @@
       })
     );
   };
-  Input.states = states3;
-  Input.options = options3;
+  Input.states = states5;
+  Input.options = options5;
   Input.className = INPUT_CLASSNAME;
-  Input.defaultProps = defaultProps3;
+  Input.defaultProps = defaultProps5;
 
   // src/input/picker.spec.tsx
-  var import_jsx_runtime4 = __require("react/jsx-runtime");
+  var import_jsx_runtime6 = __require("react/jsx-runtime");
   var PICKER_CLASSNAME = `k-picker`;
   var pickerStates = [
     States.hover,
@@ -426,7 +542,7 @@
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps4 = {
+  var defaultProps6 = {
     size: Size.medium,
     rounded: Roundness.medium,
     fillMode: FillMode.solid
@@ -440,9 +556,9 @@
       valid,
       loading,
       readonly,
-      size = defaultProps4.size,
-      rounded = defaultProps4.rounded,
-      fillMode = defaultProps4.fillMode
+      size = defaultProps6.size,
+      rounded = defaultProps6.rounded,
+      fillMode = defaultProps6.fillMode
     } = _a, other = __objRest(_a, [
       "hover",
       "focus",
@@ -455,7 +571,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -471,17 +587,17 @@
   Picker.states = pickerStates;
   Picker.options = pickerOptions;
   Picker.className = PICKER_CLASSNAME;
-  Picker.defaultProps = defaultProps4;
+  Picker.defaultProps = defaultProps6;
 
   // src/input/input-clear-value.tsx
-  var import_jsx_runtime5 = __require("react/jsx-runtime");
+  var import_jsx_runtime7 = __require("react/jsx-runtime");
   var className = `k-clear-value`;
-  var states4 = [
+  var states6 = [
     States.disabled,
     States.loading,
     States.readonly
   ];
-  var options4 = {};
+  var options6 = {};
   var InputClearValue = (props) => {
     const {
       disabled,
@@ -490,20 +606,20 @@
       value
     } = props;
     if (disabled || readonly || loading || !value) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "x" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "x" }) });
   };
-  InputClearValue.states = states4;
-  InputClearValue.options = options4;
+  InputClearValue.states = states6;
+  InputClearValue.options = options6;
   InputClearValue.className = className;
 
   // src/input/input-inner-input.tsx
-  var import_jsx_runtime6 = __require("react/jsx-runtime");
+  var import_jsx_runtime8 = __require("react/jsx-runtime");
   var className2 = `k-input-inner`;
-  var states5 = [];
-  var options5 = {};
-  var defaultProps5 = {
+  var states7 = [];
+  var options7 = {};
+  var defaultProps7 = {
     type: "text",
     autocomplete: "off",
     value: "",
@@ -511,17 +627,17 @@
   };
   var InputInnerInput = (props) => {
     const _a = props, {
-      value = defaultProps5.value,
-      type = defaultProps5.type,
-      placeholder = defaultProps5.placeholder,
-      autocomplete = defaultProps5.autocomplete
+      value = defaultProps7.value,
+      type = defaultProps7.type,
+      placeholder = defaultProps7.placeholder,
+      autocomplete = defaultProps7.autocomplete
     } = _a, other = __objRest(_a, [
       "value",
       "type",
       "placeholder",
       "autocomplete"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "input",
       __spreadProps(__spreadValues({}, other), {
         type,
@@ -532,15 +648,15 @@
       })
     );
   };
-  InputInnerInput.states = states5;
-  InputInnerInput.options = options5;
+  InputInnerInput.states = states7;
+  InputInnerInput.options = options7;
   InputInnerInput.className = className2;
 
   // src/input/input-inner-span.tsx
-  var import_jsx_runtime7 = __require("react/jsx-runtime");
+  var import_jsx_runtime9 = __require("react/jsx-runtime");
   var className3 = `k-input-inner`;
-  var states6 = [];
-  var options6 = {};
+  var states8 = [];
+  var options8 = {};
   var InputInnerSpan = (props) => {
     const _a = props, {
       value,
@@ -555,43 +671,43 @@
       "valueIcon",
       "valueIconName"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className3, optionClassNames(className3, props)),
         children: [
           valueIcon,
-          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
+          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
           showValue && !value && placeholder,
-          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "k-input-value-text", children: value })
+          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-input-value-text", children: value })
         ]
       })
     );
   };
-  InputInnerSpan.states = states6;
-  InputInnerSpan.options = options6;
+  InputInnerSpan.states = states8;
+  InputInnerSpan.options = options8;
   InputInnerSpan.className = className3;
 
   // src/input/input-inner-textarea.tsx
-  var import_jsx_runtime8 = __require("react/jsx-runtime");
-  var defaultProps6 = {
+  var import_jsx_runtime10 = __require("react/jsx-runtime");
+  var defaultProps8 = {
     value: "",
     placeholder: ""
   };
   var className4 = `k-input-inner`;
-  var states7 = [];
-  var options7 = {};
+  var states9 = [];
+  var options9 = {};
   var InputInnerTextarea = (props) => {
     const _a = props, {
-      value = defaultProps6.value,
-      placeholder = defaultProps6.placeholder,
+      value = defaultProps8.value,
+      placeholder = defaultProps8.placeholder,
       rows
     } = _a, other = __objRest(_a, [
       "value",
       "placeholder",
       "rows"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "textarea",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className4, optionClassNames(className4, props)),
@@ -601,14 +717,14 @@
       })
     );
   };
-  InputInnerTextarea.states = states7;
-  InputInnerTextarea.options = options7;
+  InputInnerTextarea.states = states9;
+  InputInnerTextarea.options = options9;
   InputInnerTextarea.className = className4;
 
   // src/input/input-loading-icon.tsx
-  var import_jsx_runtime9 = __require("react/jsx-runtime");
+  var import_jsx_runtime11 = __require("react/jsx-runtime");
   var className5 = `k-input-loading-icon`;
-  var states8 = [
+  var states10 = [
     States.disabled,
     States.loading
   ];
@@ -618,21 +734,21 @@
       loading
     } = props;
     if (disabled || !loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
   };
 
   // src/input/input-validation-icon.tsx
-  var import_jsx_runtime10 = __require("react/jsx-runtime");
+  var import_jsx_runtime12 = __require("react/jsx-runtime");
   var className6 = `k-input-validation-icon`;
-  var states9 = [
+  var states11 = [
     States.valid,
     States.invalid,
     States.disabled,
     States.loading
   ];
-  var options8 = {};
+  var options10 = {};
   var InputValidationIcon = (props) => {
     const {
       valid,
@@ -643,55 +759,55 @@
     const iconName = invalid ? "warning" : "check";
     const renderValidationIcon = Boolean(valid || invalid);
     if (disabled || loading || !renderValidationIcon) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: classNames(className6), name: iconName });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: classNames(className6), name: iconName });
   };
-  InputValidationIcon.states = states9;
-  InputValidationIcon.options = options8;
+  InputValidationIcon.states = states11;
+  InputValidationIcon.options = options10;
   InputValidationIcon.className = className6;
 
   // src/input/input-prefix.tsx
-  var import_jsx_runtime11 = __require("react/jsx-runtime");
+  var import_jsx_runtime13 = __require("react/jsx-runtime");
   var className7 = `k-input-prefix`;
   var InputPrefix = (props) => {
     if (!props.children) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: classNames(className7, props.className), children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames(className7, props.className), children: props.children });
   };
 
   // src/input/input-suffix.tsx
-  var import_jsx_runtime12 = __require("react/jsx-runtime");
+  var import_jsx_runtime14 = __require("react/jsx-runtime");
   var className8 = `k-input-suffix`;
   var InputSuffix = (props) => {
     if (!props.children) {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: classNames(className8, props.className), children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: classNames(className8, props.className), children: props.children });
   };
 
   // src/spinbutton/spinbutton.spec.tsx
-  var import_jsx_runtime13 = __require("react/jsx-runtime");
+  var import_jsx_runtime15 = __require("react/jsx-runtime");
   var SPINBUTTON_CLASSNAME = `k-spin-button`;
-  var states10 = [];
-  var options9 = {
+  var states12 = [];
+  var options11 = {
     size: [Size.small, Size.medium, Size.large],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
   };
-  var defaultProps7 = {
+  var defaultProps9 = {
     size: Size.medium,
     fillMode: FillMode.solid
   };
   var SpinButton = (props) => {
     const _a = props, {
-      size = defaultProps7.size,
-      fillMode = defaultProps7.fillMode
+      size = defaultProps9.size,
+      fillMode = defaultProps9.fillMode
     } = _a, other = __objRest(_a, [
       "size",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -699,7 +815,7 @@
           props.className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               className: "k-spinner-increase",
@@ -709,7 +825,7 @@
               fillMode
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             Button,
             {
               className: "k-spinner-decrease",
@@ -723,15 +839,15 @@
       })
     );
   };
-  SpinButton.states = states10;
-  SpinButton.options = options9;
+  SpinButton.states = states12;
+  SpinButton.options = options11;
   SpinButton.className = SPINBUTTON_CLASSNAME;
-  SpinButton.defaultProps = defaultProps7;
+  SpinButton.defaultProps = defaultProps9;
 
   // src/numerictextbox/numerictextbox.spec.tsx
-  var import_jsx_runtime14 = __require("react/jsx-runtime");
+  var import_jsx_runtime16 = __require("react/jsx-runtime");
   var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
-  var states11 = [
+  var states13 = [
     States.hover,
     States.focus,
     States.valid,
@@ -741,12 +857,12 @@
     States.disabled,
     States.readonly
   ];
-  var options10 = {
+  var options12 = {
     size: [Size.small, Size.medium, Size.large],
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps8 = {
+  var defaultProps10 = {
     showSpinButton: true,
     showClearButton: true,
     size: Input.defaultProps.size,
@@ -768,8 +884,8 @@
       loading,
       disabled,
       readonly,
-      showClearButton = defaultProps8.showClearButton,
-      showSpinButton = defaultProps8.showSpinButton
+      showClearButton = defaultProps10.showClearButton,
+      showSpinButton = defaultProps10.showSpinButton
     } = _a, other = __objRest(_a, [
       "value",
       "placeholder",
@@ -787,7 +903,7 @@
       "showClearButton",
       "showSpinButton"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       Input,
       __spreadProps(__spreadValues({}, other), {
         size,
@@ -803,8 +919,8 @@
         readonly,
         className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -813,14 +929,14 @@
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             InputClearValue,
             {
               loading,
@@ -829,7 +945,7 @@
               value
             }
           ),
-          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             SpinButton,
             {
               className: "k-input-spinner",
@@ -841,15 +957,15 @@
       })
     );
   };
-  NumericTextbox.states = states11;
-  NumericTextbox.options = options10;
+  NumericTextbox.states = states13;
+  NumericTextbox.options = options12;
   NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
-  NumericTextbox.defaultProps = defaultProps8;
+  NumericTextbox.defaultProps = defaultProps10;
 
   // src/textbox/textbox.spec.tsx
-  var import_jsx_runtime15 = __require("react/jsx-runtime");
+  var import_jsx_runtime17 = __require("react/jsx-runtime");
   var TEXTBOX_CLASSNAME = `k-textbox`;
-  var states12 = [
+  var states14 = [
     States.hover,
     States.focus,
     States.valid,
@@ -859,12 +975,12 @@
     States.loading,
     States.readonly
   ];
-  var options11 = {
+  var options13 = {
     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 defaultProps11 = {
     showClearButton: true,
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
@@ -887,7 +1003,7 @@
       loading,
       disabled,
       readonly,
-      showClearButton = defaultProps9.showClearButton
+      showClearButton = defaultProps11.showClearButton
     } = _a, other = __objRest(_a, [
       "prefix",
       "suffix",
@@ -906,7 +1022,7 @@
       "readonly",
       "showClearButton"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       Input,
       __spreadProps(__spreadValues({}, other), {
         size,
@@ -922,9 +1038,9 @@
         readonly,
         className: classNames(props.className, TEXTBOX_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -933,14 +1049,14 @@
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
             InputClearValue,
             {
               loading,
@@ -949,18 +1065,208 @@
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(InputSuffix, { children: suffix })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputSuffix, { children: suffix })
         ]
       })
     );
   };
-  Textbox.states = states12;
-  Textbox.options = options11;
+  Textbox.states = states14;
+  Textbox.options = options13;
   Textbox.className = TEXTBOX_CLASSNAME;
-  Textbox.defaultProps = defaultProps9;
+  Textbox.defaultProps = defaultProps11;
+
+  // src/colorgradient/color-input.tsx
+  var import_jsx_runtime18 = __require("react/jsx-runtime");
+  var COLOR_INPUT_CLASSNAME = "k-colorgradient-inputs";
+  var states15 = [];
+  var options14 = {};
+  var defaultProps12 = {
+    mode: "rgba"
+  };
+  var ColorInput = (props) => {
+    const {
+      mode = defaultProps12.mode
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: classNames(COLOR_INPUT_CLASSNAME, "k-hstack"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-cologradient-toggle-mode" }) }),
+      mode === "rgba" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
+        ] })
+      ] }),
+      mode === "rgb" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
+        ] })
+      ] }),
+      mode === "hsva" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
+        ] })
+      ] }),
+      mode === "hsv" && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
+        ] })
+      ] }),
+      mode === "hex" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "k-vstack k-flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Textbox, { showClearButton: false, value: "#b88484AA", className: "k-hex-value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "k-colorgradient-input-label", children: "HEX" })
+      ] }) })
+    ] });
+  };
+  ColorInput.states = states15;
+  ColorInput.options = options14;
+  ColorInput.className = COLOR_INPUT_CLASSNAME;
+  ColorInput.defaultProps = defaultProps12;
+
+  // src/colorgradient/color-contrast.tsx
+  var import_jsx_runtime19 = __require("react/jsx-runtime");
+  var COLOR_CONTRAST_CLASSNAME = "k-colorgradient-color-contrast";
+  var states16 = [];
+  var options15 = {};
+  var defaultProps13 = {};
+  var ColorContrast = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: classNames(COLOR_CONTRAST_CLASSNAME, "k-vbox"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "k-contrast-ratio", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-contrast-ratio-text", children: "Contrast ratio: 7.1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "k-contrast-validation !k-text-success", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "AA: 4.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "k-contrast-validation !k-text-success", children: [
+        "Pass",
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "AAA: 7.0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "k-contrast-validation !k-text-error", children: [
+        "Fail",
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "x" })
+      ] })
+    ] })
+  ] });
+  ColorContrast.states = states16;
+  ColorContrast.options = options15;
+  ColorContrast.className = COLOR_CONTRAST_CLASSNAME;
+  ColorContrast.defaultProps = defaultProps13;
+
+  // src/colorgradient/color-gradient.spec.tsx
+  var import_jsx_runtime20 = __require("react/jsx-runtime");
+  var COLOR_GRADIENT_CLASSNAME = "k-colorgradient";
+  var states17 = [
+    States.hover,
+    States.focus,
+    States.readonly,
+    States.disabled
+  ];
+  var options16 = {};
+  var defaultProps14 = {
+    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 = defaultProps14.mode,
+      readonly = defaultProps14.readonly,
+      disabled = defaultProps14.disabled,
+      dir,
+      contrast = defaultProps14.contrast,
+      hover,
+      focus,
+      hoverHandle,
+      focusHandle,
+      gradientStyle = defaultProps14.gradientStyle,
+      dragHandleStyle = defaultProps14.dragHandleStyle,
+      alphaStyle = defaultProps14.alphaStyle
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: classNames(
+      props.className,
+      COLOR_GRADIENT_CLASSNAME,
+      stateClassNames(COLOR_GRADIENT_CLASSNAME, {
+        hover,
+        focus,
+        readonly,
+        disabled
+      })
+    ), dir, 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: gradientStyle, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: classNames(
+          "k-hsv-draghandle",
+          "k-draghandle",
+          {
+            "k-hover": hoverHandle,
+            "k-focus": focusHandle
+          }
+        ), style: dragHandleStyle }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Slider, { type: "gradient", orientation: "vertical", className: "k-hue-slider", hover: hoverHandle, focus: focusHandle }),
+          mode !== "rgb" && mode !== "hsv" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Slider, { type: "gradient", orientation: "vertical", className: "k-alpha-slider", hover: hoverHandle, focus: focusHandle, trackStyle: alphaStyle })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorInput, { mode: props.mode }),
+      contrast && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorContrast, {})
+    ] });
+  };
+  ColorGradient.states = states17;
+  ColorGradient.options = options16;
+  ColorGradient.className = COLOR_GRADIENT_CLASSNAME;
+  ColorGradient.defaultProps = defaultProps14;
 
   // src/colorgradient/tests/colorgradient-modes.tsx
-  var import_jsx_runtime16 = __require("react/jsx-runtime");
+  var import_jsx_runtime21 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -975,153 +1281,20 @@
     }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "RGBA" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "RGB" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-rectangle", style: { background: "rgba(255, 0, 0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-draghandle k-draghandle", style: { top: "50px", left: "73px" } }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-hue-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-              ] }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", style: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-              ] }) }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-inputs k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-colorgradient-toggle-mode" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
-            ] })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-rectangle", style: { background: "rgba(255, 0, 0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-draghandle k-draghandle", style: { top: "50px", left: "73px" } }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-controls k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-hue-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-            ] }) }) }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-inputs k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-colorgradient-toggle-mode" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "R" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "G" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "B" })
-            ] })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "HSVA" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "HSV" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-rectangle", style: { background: "rgba(255, 0, 0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-draghandle k-draghandle", style: { top: "50px", left: "73px" } }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-hue-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-              ] }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider", style: { "--kendo-slider-end": "100" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", style: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-              ] }) }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-inputs k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-colorgradient-toggle-mode" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "1.00" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "A" })
-            ] })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-rectangle", style: { background: "rgba(255, 0, 0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-draghandle k-draghandle", style: { top: "50px", left: "73px" } }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-controls k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-hue-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-            ] }) }) }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-inputs k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-colorgradient-toggle-mode" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "H" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "S" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(NumericTextbox, { showSpinButton: false, showClearButton: false, value: "132" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "V" })
-            ] })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "HEX" }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-canvas k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-rectangle", style: { background: "rgba(255, 0, 0)" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-gradient", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-hsv-draghandle k-draghandle", style: { top: "50px", left: "73px" } }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-hsv-controls k-hstack", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-hue-slider k-colorgradient-slider", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-              ] }) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider", style: { "--kendo-slider-end": "100" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-track-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-slider-track", style: { background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-slider-selection" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", { className: "k-draghandle k-draghandle-end" })
-              ] }) }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-colorgradient-inputs k-hstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-vstack", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { fillMode: "flat", icon: "arrows-kpi", className: "k-colorgradient-toggle-mode" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-vstack k-flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Textbox, { className: "k-hex-value", showClearButton: false, value: "#b88484AA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "k-colorgradient-input-label", children: "HEX" })
-            ] })
-          ] })
-        ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("style", { children: styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "RGBA" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "RGB" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ColorGradient, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ColorGradient, { mode: "rgb" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "HSVA" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "HSV" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ColorGradient, { mode: "hsva" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ColorGradient, { mode: "hsv" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "HEX" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ColorGradient, { mode: "hex" }) })
       ] })
     ] })
   );