@progress/kendo-react-inputs 11.0.0-develop.8 → 11.0.0

package/colors/FlatColorPicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),Q=require("./ColorPalette.js"),U=require("./ColorGradient.js"),X=require("../package-metadata.js"),Y=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function Z(e){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const b in e)if(b!=="default"){const v=Object.getOwnPropertyDescriptor(e,b);Object.defineProperty(h,b,v.get?v:{enumerable:!0,get:()=>e[b]})}}return h.default=e,Object.freeze(h)}const t=Z(J),M=t.forwardRef((e,h)=>{const b=!n.validatePackage(X.packageMetadata,{component:"FlatColorPicker"}),v=t.useRef(null),B=t.useRef(null),A=t.useRef(null),{defaultValue:E,showButtons:w=!0,showPreview:x=!0,showClearButton:F=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:N="gradient",size:i="medium"}=e,[C,z]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,V]=t.useState((d!=null?d:[])[0]==="gradient"&&N==="gradient"),[c,y]=t.useState(e.value||E||void 0),[k,G]=t.useState(e.value||E||void 0),_=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const m=Y.useLocalization(),L=t.useCallback(()=>{v.current&&v.current.focus()},[v]);t.useImperativeHandle(v,()=>({element:B.current,focus:L,props:e,value:_}),[_,L,e]),t.useImperativeHandle(h,()=>v.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),S=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&N==="gradient"?V(!g):a==="gradient"&&N==="palette"&&V(!0)},[N,g]),T=t.useCallback(a=>{var u;const r=E||void 0;if(y(r),G(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const I={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,I)}},[E,e.onPreviewChange]),q=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),j=t.useCallback(a=>{if(c!==void 0&&G(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),D=t.useCallback(()=>{y(k),e.setOpen&&e.setOpen(!1)},[k]),K=t.useCallback(a=>{if(y(k),e.onPreviewChange){const r={value:k,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[k,e.onPreviewChange]),H=t.useCallback(a=>{var u,I;if((!a.relatedTarget||!((u=B.current)!=null&&u.contains(a.relatedTarget)))&&!((I=e._gradientSettings)!=null&&I._adaptive)&&(!w&&c!==void 0&&G(c),!w&&e.onChange)){const $={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,$)}},[c,w,e.onChange]),O=t.useMemo(()=>new n.Navigation({root:B,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),W=t.useCallback(O.triggerKeyboardEvent.bind(O),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:B,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:H,onKeyDown:W},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.dropletSliderIcon,selected:g,onClick:()=>S("gradient")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.paletteIcon,selected:!g,onClick:()=>S("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.paletteIcon,selected:!g,onClick:()=>S("palette")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.dropletSliderIcon,selected:g,onClick:()=>S("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:C,onClick:()=>R("ColorGradient"),icon:"droplet-slider",svgIcon:f.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!C,onClick:()=>R("ColorPalette"),icon:"palette",svgIcon:f.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},F&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:T,"aria-label":m.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:f.dropletSlashIcon}),x&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":_===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":k===void 0}),onClick:K},t.createElement("span",{className:"k-color-preview-mask",style:{background:k||void 0}})))),b&&t.createElement(n.WatermarkOverlay,null)),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&C||d&&g)&&t.createElement(U.ColorGradient,{ref:A,role:"none",ariaLabel:void 0,value:c,onChange:q,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!C||d&&!g)&&t.createElement(Q.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:q,size:i,...e._paletteSettings})),w&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-end k-actions-horizontal"},t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:D},l.messages[l.flatColorPickerCancelBtn]),t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:j},l.messages[l.flatColorPickerApplyBtn])))}),p={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};M.displayName="KendoFlatColorPicker";M.propTypes=p;exports.FlatColorPicker=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-buttons"),f=require("@progress/kendo-svg-icons"),Q=require("./ColorPalette.js"),U=require("./ColorGradient.js"),X=require("../package-metadata.js"),Y=require("@progress/kendo-react-intl"),l=require("../messages/index.js");function Z(e){const h=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const b in e)if(b!=="default"){const v=Object.getOwnPropertyDescriptor(e,b);Object.defineProperty(h,b,v.get?v:{enumerable:!0,get:()=>e[b]})}}return h.default=e,Object.freeze(h)}const t=Z(J),M=t.forwardRef((e,h)=>{const b=!n.validatePackage(X.packageMetadata,{component:"FlatColorPicker"}),v=t.useRef(null),B=t.useRef(null),A=t.useRef(null),{defaultValue:E,showButtons:w=!0,showPreview:x=!0,showClearButton:F=!0,view:P=e.views?void 0:"ColorGradient",views:d=P?void 0:["gradient","palette"],activeView:N="gradient",size:i="medium"}=e,[C,z]=t.useState((P||"ColorGradient")==="ColorGradient"),[g,V]=t.useState((d!=null?d:[])[0]==="gradient"&&N==="gradient"),[c,y]=t.useState(e.value||E||void 0),[k,G]=t.useState(e.value||E||void 0),_=e.value!==void 0?e.value:void 0;t.useEffect(()=>{y(e.value)},[e.value]);const m=Y.useLocalization(),L=t.useCallback(()=>{v.current&&v.current.focus()},[v]);t.useImperativeHandle(v,()=>({element:B.current,focus:L,props:e,value:_}),[_,L,e]),t.useImperativeHandle(h,()=>v.current);const R=t.useCallback(a=>{(a==="ColorGradient"&&!C||a==="ColorPalette"&&C)&&z(!C)},[C]),S=t.useCallback(a=>{a==="gradient"&&!g||a==="palette"&&g||a==="palette"&&N==="gradient"?V(!g):a==="gradient"&&N==="palette"&&V(!0)},[N,g]),T=t.useCallback(a=>{var u;const r=E||void 0;if(y(r),G(r),(u=e._gradientSettings)!=null&&u._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(r),e.onPreviewChange){const I={value:r,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,I)}},[E,e.onPreviewChange]),q=t.useCallback(a=>{var r;if(y(a.value),e.onPreviewChange){const u={value:a.value,nativeEvent:a.nativeEvent,syntheticEvent:a.syntheticEvent};e.onPreviewChange.call(void 0,u)}(r=e._gradientSettings)!=null&&r._adaptive&&e.setAdaptiveModeValue&&e.setAdaptiveModeValue(a.value)},[e.onPreviewChange]),j=t.useCallback(a=>{if(c!==void 0&&G(c),e.onChange){const r={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,r)}},[c,e.onChange]),D=t.useCallback(()=>{y(k),e.setOpen&&e.setOpen(!1)},[k]),K=t.useCallback(a=>{if(y(k),e.onPreviewChange){const r={value:k,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onPreviewChange.call(void 0,r)}},[k,e.onPreviewChange]),H=t.useCallback(a=>{var u,I;if((!a.relatedTarget||!((u=B.current)!=null&&u.contains(a.relatedTarget)))&&!((I=e._gradientSettings)!=null&&I._adaptive)&&(!w&&c!==void 0&&G(c),!w&&e.onChange)){const $={value:c,nativeEvent:a.nativeEvent,syntheticEvent:a};e.onChange.call(void 0,$)}},[c,w,e.onChange]),O=t.useMemo(()=>new n.Navigation({root:B,selectors:[".k-coloreditor"],tabIndex:0,keyboardEvents:{keydown:{Tab:(a,r,u)=>{n.getActiveElement(document)===a?n.disableNavigatableContainer(a):n.keepFocusInContainer(u,a)},Enter:(a,r,u)=>{n.getActiveElement(document)===a&&(n.focusFirstFocusableChild(a),n.enableNavigatableContainer(a))},Escape:(a,r,u)=>{n.getActiveElement(document)!==a&&(a.focus(),n.disableNavigatableContainer(a))}}}}),[]),W=t.useCallback(O.triggerKeyboardEvent.bind(O),[]);return t.createElement("div",{id:e.id,role:"textbox","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledBy,"aria-disabled":e.disabled?"true":void 0,style:{position:"relative",...e.style},ref:B,tabIndex:n.getTabIndex(e.tabIndex,e.disabled),className:n.classNames("k-flatcolorpicker k-coloreditor",{[`k-coloreditor-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,"k-disabled":e.disabled},e.className),onBlur:H,onKeyDown:W},e.header||t.createElement("div",{className:"k-coloreditor-header k-hstack"},t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},d&&d[0]==="gradient"&&d[1]==="palette"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.dropletSliderIcon,selected:g,onClick:()=>S("gradient")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.paletteIcon,selected:!g,onClick:()=>S("palette")})),d&&d[0]==="palette"&&d[1]==="gradient"&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.paletteIcon,selected:!g,onClick:()=>S("palette")}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,svgIcon:f.dropletSliderIcon,selected:g,onClick:()=>S("gradient")})),P&&t.createElement(s.ButtonGroup,{className:"k-button-group-flat"},t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorGradientBtn,l.messages[l.flatColorPickerColorGradientBtn]),togglable:!0,fillMode:"flat",size:i,selected:C,onClick:()=>R("ColorGradient"),icon:"droplet-slider",svgIcon:f.dropletSliderIcon}),t.createElement(s.Button,{type:"button","aria-label":m.toLanguageString(l.flatColorPickerColorPaletteBtn,l.messages[l.flatColorPickerColorPaletteBtn]),togglable:!0,fillMode:"flat",size:i,selected:!C,onClick:()=>R("ColorPalette"),icon:"palette",svgIcon:f.paletteIcon}))),t.createElement("div",{className:"k-spacer"}),t.createElement("div",{className:"k-coloreditor-header-actions k-hstack"},F&&t.createElement(s.Button,{type:"button",fillMode:"flat",size:i,onClick:T,"aria-label":m.toLanguageString(l.flatColorPickerClearBtn,l.messages[l.flatColorPickerClearBtn]),icon:"droplet-slash",svgIcon:f.dropletSlashIcon}),x&&t.createElement("div",{className:"k-coloreditor-preview k-vstack"},t.createElement("span",{className:n.classNames("k-coloreditor-preview-color","k-color-preview",{"k-no-color":_===void 0})},t.createElement("span",{className:"k-color-preview-mask",style:{background:c||void 0}})),t.createElement("span",{className:n.classNames("k-coloreditor-current-color","k-color-preview",{"k-no-color":k===void 0}),onClick:K},t.createElement("span",{className:"k-color-preview-mask",style:{background:k||void 0}})))),b&&t.createElement(n.WatermarkOverlay,null)),t.createElement("div",{className:"k-coloreditor-views k-vstack"},(P&&C||d&&g)&&t.createElement(U.ColorGradient,{ref:A,role:"none",ariaLabel:void 0,value:c,onChange:q,opacity:e.opacity,format:e.format,size:i,_adaptive:e._gradientSettings?e._gradientSettings._adaptive:void 0,...e._gradientSettings}),(P&&!C||d&&!g)&&t.createElement(Q.ColorPalette,{ariaDisabled:!0,ariaLabelledBy:"required_label",value:c,onChange:q,size:i,...e._paletteSettings})),w&&t.createElement("div",{className:"k-coloreditor-footer k-actions k-actions-start k-actions-horizontal"},t.createElement(s.Button,{type:"button",themeColor:"primary",className:"k-coloreditor-apply",size:i,onClick:j},l.messages[l.flatColorPickerApplyBtn]),t.createElement(s.Button,{type:"button",className:"k-coloreditor-cancel",size:i,onClick:D},l.messages[l.flatColorPickerCancelBtn])))}),p={id:o.string,style:o.any,className:o.string,value:o.string,defaultValue:o.string,onPreviewChange:o.func,onChange:o.func,opacity:o.bool,format:o.any,tabIndex:o.number,ariaLabel:o.string,ariaLabelledBy:o.string,disabled:o.bool,view:o.any,header:o.any,showClearButton:o.bool,showPreview:o.bool,showButtons:o.bool,views:o.array,size:o.oneOf([null,"small","medium","large"])};M.displayName="KendoFlatColorPicker";M.propTypes=p;exports.FlatColorPicker=M;

package/colors/FlatColorPicker.mjs

@@ -5,18 +5,18 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
+import * as t from "react";
 import l from "prop-types";
-import { validatePackage as ee, Navigation as ae, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as te, focusFirstFocusableChild as le, enableNavigatableContainer as ne, getTabIndex as oe, classNames as V, kendoThemeMaps as ie, WatermarkOverlay as re } from "@progress/kendo-react-common";
+import { validatePackage as ee, Navigation as te, getActiveElement as _, disableNavigatableContainer as K, keepFocusInContainer as ae, focusFirstFocusableChild as le, enableNavigatableContainer as ne, getTabIndex as oe, classNames as V, kendoThemeMaps as ie, WatermarkOverlay as re } from "@progress/kendo-react-common";
 import { ButtonGroup as L, Button as s } from "@progress/kendo-react-buttons";
 import { dropletSliderIcon as M, paletteIcon as G, dropletSlashIcon as ce } from "@progress/kendo-svg-icons";
 import { ColorPalette as de } from "./ColorPalette.mjs";
 import { ColorGradient as se } from "./ColorGradient.mjs";
 import { packageMetadata as ue } from "../package-metadata.mjs";
 import { useLocalization as ve } from "@progress/kendo-react-intl";
-import { flatColorPickerColorGradientBtn as k, messages as u, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as O, flatColorPickerCancelBtn as ge, flatColorPickerApplyBtn as me } from "../messages/index.mjs";
-const T = a.forwardRef((e, D) => {
-  const H = !ee(ue, { component: "FlatColorPicker" }), f = a.useRef(null), y = a.useRef(null), W = a.useRef(null), {
+import { flatColorPickerColorGradientBtn as k, messages as u, flatColorPickerColorPaletteBtn as C, flatColorPickerClearBtn as O, flatColorPickerApplyBtn as ge, flatColorPickerCancelBtn as me } from "../messages/index.mjs";
+const T = t.forwardRef((e, D) => {
+  const H = !ee(ue, { component: "FlatColorPicker" }), f = t.useRef(null), y = t.useRef(null), W = t.useRef(null), {
     defaultValue: b,
     showButtons: w = !0,
     showPreview: q = !0,
@@ -25,18 +25,18 @@ const T = a.forwardRef((e, D) => {
     views: r = h ? void 0 : ["gradient", "palette"],
     activeView: P = "gradient",
     size: o = "medium"
-  } = e, [v, j] = a.useState(
+  } = e, [v, j] = t.useState(
     (h || "ColorGradient") === "ColorGradient"
-  ), [d, x] = a.useState(
+  ), [d, x] = t.useState(
     (r != null ? r : [])[0] === "gradient" && P === "gradient"
-  ), [i, E] = a.useState(e.value || b || void 0), [g, I] = a.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
-  a.useEffect(() => {
+  ), [i, E] = t.useState(e.value || b || void 0), [g, I] = t.useState(e.value || b || void 0), B = e.value !== void 0 ? e.value : void 0;
+  t.useEffect(() => {
     E(e.value);
   }, [e.value]);
-  const m = ve(), R = a.useCallback(() => {
+  const m = ve(), R = t.useCallback(() => {
     f.current && f.current.focus();
   }, [f]);
-  a.useImperativeHandle(
+  t.useImperativeHandle(
     f,
     () => ({
       element: y.current,
@@ -45,106 +45,106 @@ const T = a.forwardRef((e, D) => {
       value: B
     }),
     [B, R, e]
-  ), a.useImperativeHandle(D, () => f.current);
-  const A = a.useCallback(
-    (t) => {
-      (t === "ColorGradient" && !v || t === "ColorPalette" && v) && j(!v);
+  ), t.useImperativeHandle(D, () => f.current);
+  const A = t.useCallback(
+    (a) => {
+      (a === "ColorGradient" && !v || a === "ColorPalette" && v) && j(!v);
     },
     [v]
-  ), N = a.useCallback(
-    (t) => {
-      t === "gradient" && !d || t === "palette" && d || t === "palette" && P === "gradient" ? x(!d) : t === "gradient" && P === "palette" && x(!0);
+  ), N = t.useCallback(
+    (a) => {
+      a === "gradient" && !d || a === "palette" && d || a === "palette" && P === "gradient" ? x(!d) : a === "gradient" && P === "palette" && x(!0);
     },
     [P, d]
-  ), J = a.useCallback(
-    (t) => {
+  ), J = t.useCallback(
+    (a) => {
       var c;
       const n = b || void 0;
       if (E(n), I(n), (c = e._gradientSettings) != null && c._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(n), e.onPreviewChange) {
         const S = {
           value: n,
-          nativeEvent: t.nativeEvent,
-          syntheticEvent: t
+          nativeEvent: a.nativeEvent,
+          syntheticEvent: a
         };
         e.onPreviewChange.call(void 0, S);
       }
     },
     [b, e.onPreviewChange]
-  ), F = a.useCallback(
-    (t) => {
+  ), F = t.useCallback(
+    (a) => {
       var n;
-      if (E(t.value), e.onPreviewChange) {
+      if (E(a.value), e.onPreviewChange) {
         const c = {
-          value: t.value,
-          nativeEvent: t.nativeEvent,
-          syntheticEvent: t.syntheticEvent
+          value: a.value,
+          nativeEvent: a.nativeEvent,
+          syntheticEvent: a.syntheticEvent
         };
         e.onPreviewChange.call(void 0, c);
       }
-      (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(t.value);
+      (n = e._gradientSettings) != null && n._adaptive && e.setAdaptiveModeValue && e.setAdaptiveModeValue(a.value);
     },
     [e.onPreviewChange]
-  ), Q = a.useCallback(
-    (t) => {
+  ), Q = t.useCallback(
+    (a) => {
       if (i !== void 0 && I(i), e.onChange) {
         const n = {
           value: i,
-          nativeEvent: t.nativeEvent,
-          syntheticEvent: t
+          nativeEvent: a.nativeEvent,
+          syntheticEvent: a
         };
         e.onChange.call(void 0, n);
       }
     },
     [i, e.onChange]
-  ), U = a.useCallback(() => {
+  ), U = t.useCallback(() => {
     E(g), e.setOpen && e.setOpen(!1);
-  }, [g]), X = a.useCallback(
-    (t) => {
+  }, [g]), X = t.useCallback(
+    (a) => {
       if (E(g), e.onPreviewChange) {
         const n = {
           value: g,
-          nativeEvent: t.nativeEvent,
-          syntheticEvent: t
+          nativeEvent: a.nativeEvent,
+          syntheticEvent: a
         };
         e.onPreviewChange.call(void 0, n);
       }
     },
     [g, e.onPreviewChange]
-  ), Y = a.useCallback(
-    (t) => {
+  ), Y = t.useCallback(
+    (a) => {
       var c, S;
-      if ((!t.relatedTarget || !((c = y.current) != null && c.contains(t.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
+      if ((!a.relatedTarget || !((c = y.current) != null && c.contains(a.relatedTarget))) && !((S = e._gradientSettings) != null && S._adaptive) && (!w && i !== void 0 && I(i), !w && e.onChange)) {
         const p = {
           value: i,
-          nativeEvent: t.nativeEvent,
-          syntheticEvent: t
+          nativeEvent: a.nativeEvent,
+          syntheticEvent: a
         };
         e.onChange.call(void 0, p);
       }
     },
     [i, w, e.onChange]
-  ), z = a.useMemo(
-    () => new ae({
+  ), z = t.useMemo(
+    () => new te({
       root: y,
       selectors: [".k-coloreditor"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
-          Tab: (t, n, c) => {
-            _(document) === t ? K(t) : te(c, t);
+          Tab: (a, n, c) => {
+            _(document) === a ? K(a) : ae(c, a);
           },
-          Enter: (t, n, c) => {
-            _(document) === t && (le(t), ne(t));
+          Enter: (a, n, c) => {
+            _(document) === a && (le(a), ne(a));
           },
-          Escape: (t, n, c) => {
-            _(document) !== t && (t.focus(), K(t));
+          Escape: (a, n, c) => {
+            _(document) !== a && (a.focus(), K(a));
           }
         }
       }
     }),
     []
-  ), Z = a.useCallback(z.triggerKeyboardEvent.bind(z), []);
-  return /* @__PURE__ */ a.createElement(
+  ), Z = t.useCallback(z.triggerKeyboardEvent.bind(z), []);
+  return /* @__PURE__ */ t.createElement(
     "div",
     {
       id: e.id,
@@ -166,7 +166,7 @@ const T = a.forwardRef((e, D) => {
       onBlur: Y,
       onKeyDown: Z
     },
-    e.header || /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    e.header || /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header k-hstack" }, /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, r && r[0] === "gradient" && r[1] === "palette" && /* @__PURE__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -181,7 +181,7 @@ const T = a.forwardRef((e, D) => {
         selected: d,
         onClick: () => N("gradient")
       }
-    ), /* @__PURE__ */ a.createElement(
+    ), /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -196,7 +196,7 @@ const T = a.forwardRef((e, D) => {
         selected: !d,
         onClick: () => N("palette")
       }
-    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    )), r && r[0] === "palette" && r[1] === "gradient" && /* @__PURE__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -211,7 +211,7 @@ const T = a.forwardRef((e, D) => {
         selected: !d,
         onClick: () => N("palette")
       }
-    ), /* @__PURE__ */ a.createElement(
+    ), /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -226,7 +226,7 @@ const T = a.forwardRef((e, D) => {
         selected: d,
         onClick: () => N("gradient")
       }
-    )), h && /* @__PURE__ */ a.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ a.createElement(
+    )), h && /* @__PURE__ */ t.createElement(L, { className: "k-button-group-flat" }, /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -242,7 +242,7 @@ const T = a.forwardRef((e, D) => {
         icon: "droplet-slider",
         svgIcon: M
       }
-    ), /* @__PURE__ */ a.createElement(
+    ), /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -258,7 +258,7 @@ const T = a.forwardRef((e, D) => {
         icon: "palette",
         svgIcon: G
       }
-    ))), /* @__PURE__ */ a.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, $ && /* @__PURE__ */ a.createElement(
+    ))), /* @__PURE__ */ t.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, $ && /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -272,21 +272,21 @@ const T = a.forwardRef((e, D) => {
         icon: "droplet-slash",
         svgIcon: ce
       }
-    ), q && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ a.createElement(
+    ), q && /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ t.createElement(
       "span",
       {
         className: V("k-coloreditor-preview-color", "k-color-preview", {
           "k-no-color": B === void 0
         })
       },
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ t.createElement(
         "span",
         {
           className: "k-color-preview-mask",
           style: { background: i || void 0 }
         }
       )
-    ), /* @__PURE__ */ a.createElement(
+    ), /* @__PURE__ */ t.createElement(
       "span",
       {
         className: V("k-coloreditor-current-color", "k-color-preview", {
@@ -294,15 +294,15 @@ const T = a.forwardRef((e, D) => {
         }),
         onClick: X
       },
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ t.createElement(
         "span",
         {
           className: "k-color-preview-mask",
           style: { background: g || void 0 }
         }
       )
-    ))), H && /* @__PURE__ */ a.createElement(re, null)),
-    /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && v || r && d) && /* @__PURE__ */ a.createElement(
+    ))), H && /* @__PURE__ */ t.createElement(re, null)),
+    /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-views k-vstack" }, (h && v || r && d) && /* @__PURE__ */ t.createElement(
       se,
       {
         ref: W,
@@ -316,7 +316,7 @@ const T = a.forwardRef((e, D) => {
         _adaptive: e._gradientSettings ? e._gradientSettings._adaptive : void 0,
         ...e._gradientSettings
       }
-    ), (h && !v || r && !d) && /* @__PURE__ */ a.createElement(
+    ), (h && !v || r && !d) && /* @__PURE__ */ t.createElement(
       de,
       {
         ariaDisabled: !0,
@@ -327,7 +327,7 @@ const T = a.forwardRef((e, D) => {
         ...e._paletteSettings
       }
     )),
-    w && /* @__PURE__ */ a.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end k-actions-horizontal" }, /* @__PURE__ */ a.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[ge]), /* @__PURE__ */ a.createElement(
+    w && /* @__PURE__ */ t.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-start k-actions-horizontal" }, /* @__PURE__ */ t.createElement(
       s,
       {
         type: "button",
@@ -336,8 +336,8 @@ const T = a.forwardRef((e, D) => {
         size: o,
         onClick: Q
       },
-      u[me]
-    ))
+      u[ge]
+    ), /* @__PURE__ */ t.createElement(s, { type: "button", className: "k-coloreditor-cancel", size: o, onClick: U }, u[me]))
   );
 }), ke = {
   id: l.string,