@progress/kendo-react-inputs 9.5.0-develop.6 → 10.0.0-develop.1

package/checkbox/Checkbox.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 Ce=require("react"),e=require("prop-types"),o=require("@progress/kendo-react-common"),ye=require("../package-metadata.js"),xe=require("@progress/kendo-react-intl"),S=require("../messages/index.js");function Pe(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const r in s)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(s,r);Object.defineProperty(u,r,k.get?k:{enumerable:!0,get:()=>s[r]})}}return u.default=s,Object.freeze(u)}const t=Pe(Ce),A=o.createPropsContext(),I=t.forwardRef((s,u)=>{o.validatePackage(ye.packageMetadata);const r=o.usePropsContext(A,s),{ariaDescribedBy:k,ariaLabelledBy:W,checked:O,className:G,labelClassName:J,children:Q,defaultChecked:X,disabled:n,defaultValue:Y,id:q,size:h=$.size,rounded:v=$.rounded,label:B,labelPlacement:z,name:Z,labelOptional:ee,onChange:g,onFocus:C,onBlur:y,tabIndex:te,value:i,required:m,valid:D,validationMessage:F,validityStyles:T,autoFocus:ae,visited:Ve,touched:Ee,modified:Me,...ne}=r,l=t.useRef(null),K=t.useCallback(()=>{l.current&&l.current.focus()},[]),d=t.useCallback(()=>({element:l.current,focus:K,get name(){return l.current&&l.current.name}}),[K]);t.useImperativeHandle(u,d);const[oe,le]=t.useState(X),[ce,se]=t.useState(Y),R=typeof i=="boolean"||i===null,x=O!==void 0,b=R,P=b?i:ce,V=x?O:b?void 0:oe,w=V===void 0&&P,j=w?P:V,p=w||b?i===null?i:void 0:i||P,re=j===null||p===null,L=o.useId(),ie=xe.useLocalization(),_=a=>ie.toLanguageString(a,S.messages[a]),H=_(S.checkboxValidation),de=_(S.checkboxOptionalText),E=D!==void 0?D:m?!!V:!0;t.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(E?"":F||H)},[E,F,H]);const f=t.useCallback((a,c)=>{!b&&!n&&(se(c),!x&&!n&&le(c)),g&&!n&&o.dispatchEvent(g,a,{...d(),value:c},{value:c})},[x,n,g,b,d]),ue=t.useCallback(a=>{const c=a.target.checked;f(a,c)},[f,i]),be=t.useCallback(a=>{if(n)return;const{keyCode:c}=a,ge=a.currentTarget.checked;c===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),f(a,!ge))},[n,f]),ke=t.useCallback(a=>{if(n)return;const{keyCode:c}=a;c===o.Keys.space&&a.preventDefault()},[n]),me=t.useCallback(a=>{C&&!n&&o.dispatchEvent(C,a,d(),void 0)},[C,n,d]),pe=t.useCallback(a=>{y&&!n&&o.dispatchEvent(y,a,d(),void 0)},[y,n,d]),fe=o.useDir(l,r.dir),he=o.classNames("k-checkbox-wrap",G),U={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[h]||h}`]:h,[`k-rounded-${o.kendoThemeMaps.roundedMap[v]||v}`]:v,"k-indeterminate":re,"k-disabled":n,"k-invalid k-invalid":!(E||T!==void 0||T===!0)}),ref:l,name:Z,id:q||L,disabled:n,required:m!==void 0?m:!1,tabIndex:o.getTabIndex(te,n),role:"checkbox",checked:!!j,"aria-describedby":k,"aria-labelledby":W,"aria-disabled":n||void 0,"aria-required":m,autoFocus:ae,...ne,onChange:ue,onKeyDown:be,onKeyUp:ke,onFocus:me,onBlur:pe},ve=p===void 0?t.createElement("input",{...U}):t.createElement("input",{...U,value:R?void 0:p===null?"":p}),M=B!==void 0?t.createElement("label",{className:o.classNames("k-checkbox-label",J),htmlFor:q||L,style:{userSelect:"none"}},B,ee&&t.createElement("span",{className:"k-label-optional"},de)):null,N=t.createElement("span",{className:he},ve,Q);return t.createElement(t.Fragment,null,z==="before"?t.createElement("div",{dir:"rtl"},N,M):z==="after"?t.createElement("div",{dir:"ltr"},N,M):t.createElement("div",{dir:fe},N,M))});I.propTypes={checked:e.bool,className:e.string,defaultChecked:e.bool,defaultValue:e.any,dir:e.string,disabled:e.bool,id:e.string,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large"]),ariaLabelledBy:e.string,ariaDescribedBy:e.string,label:e.any,labelPlacement:e.string,labelOptional:e.bool,name:e.string,tabIndex:e.number,value:e.any,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,autoFocus:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const $={size:"medium",rounded:"medium",autoFocus:!1};I.displayName="KendoCheckbox";exports.Checkbox=I;exports.CheckboxPropsContext=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ge=require("react"),e=require("prop-types"),o=require("@progress/kendo-react-common"),ye=require("@progress/kendo-react-intl"),I=require("../messages/index.js");function xe(c){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const r in c)if(r!=="default"){const m=Object.getOwnPropertyDescriptor(c,r);Object.defineProperty(d,r,m.get?m:{enumerable:!0,get:()=>c[r]})}}return d.default=c,Object.freeze(d)}const t=xe(ge),A=o.createPropsContext(),M=t.forwardRef((c,d)=>{const r=o.usePropsContext(A,c),{ariaDescribedBy:m,ariaLabelledBy:W,checked:O,className:G,labelClassName:J,children:Q,defaultChecked:X,disabled:n,defaultValue:Y,id:B,size:h=$.size,rounded:v=$.rounded,label:q,labelPlacement:z,name:Z,labelOptional:ee,onChange:C,onFocus:g,onBlur:y,tabIndex:te,value:i,required:p,valid:D,validationMessage:F,validityStyles:T,autoFocus:ae,visited:Pe,touched:Ve,modified:Ee,...ne}=r,l=t.useRef(null),K=t.useCallback(()=>{l.current&&l.current.focus()},[]),u=t.useCallback(()=>({element:l.current,focus:K,get name(){return l.current&&l.current.name}}),[K]);t.useImperativeHandle(d,u);const[oe,le]=t.useState(X),[se,ce]=t.useState(Y),R=typeof i=="boolean"||i===null,x=O!==void 0,b=R,P=b?i:se,V=x?O:b?void 0:oe,w=V===void 0&&P,j=w?P:V,k=w||b?i===null?i:void 0:i||P,re=j===null||k===null,L=o.useId(),ie=ye.useLocalization(),_=a=>ie.toLanguageString(a,I.messages[a]),H=_(I.checkboxValidation),ue=_(I.checkboxOptionalText),E=D!==void 0?D:p?!!V:!0;t.useEffect(()=>{l.current&&l.current.setCustomValidity&&l.current.setCustomValidity(E?"":F||H)},[E,F,H]);const f=t.useCallback((a,s)=>{!b&&!n&&(ce(s),!x&&!n&&le(s)),C&&!n&&o.dispatchEvent(C,a,{...u(),value:s},{value:s})},[x,n,C,b,u]),de=t.useCallback(a=>{const s=a.target.checked;f(a,s)},[f,i]),be=t.useCallback(a=>{if(n)return;const{keyCode:s}=a,Ce=a.currentTarget.checked;s===o.Keys.space&&(a.preventDefault(),a.stopPropagation(),f(a,!Ce))},[n,f]),me=t.useCallback(a=>{if(n)return;const{keyCode:s}=a;s===o.Keys.space&&a.preventDefault()},[n]),pe=t.useCallback(a=>{g&&!n&&o.dispatchEvent(g,a,u(),void 0)},[g,n,u]),ke=t.useCallback(a=>{y&&!n&&o.dispatchEvent(y,a,u(),void 0)},[y,n,u]),fe=o.useDir(l,r.dir),he=o.classNames("k-checkbox-wrap",G),U={type:"checkbox",className:o.classNames("k-checkbox",{[`k-checkbox-${o.kendoThemeMaps.sizeMap[h]||h}`]:h,[`k-rounded-${o.kendoThemeMaps.roundedMap[v]||v}`]:v,"k-indeterminate":re,"k-disabled":n,"k-invalid k-invalid":!(E||T!==void 0||T===!0)}),ref:l,name:Z,id:B||L,disabled:n,required:p!==void 0?p:!1,tabIndex:o.getTabIndex(te,n),role:"checkbox",checked:!!j,"aria-describedby":m,"aria-labelledby":W,"aria-disabled":n||void 0,"aria-required":p,autoFocus:ae,...ne,onChange:de,onKeyDown:be,onKeyUp:me,onFocus:pe,onBlur:ke},ve=k===void 0?t.createElement("input",{...U}):t.createElement("input",{...U,value:R?void 0:k===null?"":k}),N=q!==void 0?t.createElement("label",{className:o.classNames("k-checkbox-label",J),htmlFor:B||L,style:{userSelect:"none"}},q,ee&&t.createElement("span",{className:"k-label-optional"},ue)):null,S=t.createElement("span",{className:he},ve,Q);return t.createElement(t.Fragment,null,z==="before"?t.createElement("div",{dir:"rtl"},S,N):z==="after"?t.createElement("div",{dir:"ltr"},S,N):t.createElement("div",{dir:fe},S,N))});M.propTypes={checked:e.bool,className:e.string,defaultChecked:e.bool,defaultValue:e.any,dir:e.string,disabled:e.bool,id:e.string,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large"]),ariaLabelledBy:e.string,ariaDescribedBy:e.string,label:e.any,labelPlacement:e.string,labelOptional:e.bool,name:e.string,tabIndex:e.number,value:e.any,validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,autoFocus:e.bool,onChange:e.func,onFocus:e.func,onBlur:e.func};const $={size:"medium",rounded:"medium",autoFocus:!1};M.displayName="KendoCheckbox";exports.Checkbox=M;exports.CheckboxPropsContext=A;

package/checkbox/Checkbox.mjs

@@ -7,13 +7,11 @@
  */
 import * as a from "react";
 import e from "prop-types";
-import { createPropsContext as ye, validatePackage as xe, usePropsContext as Ve, useId as Pe, dispatchEvent as V, Keys as H, useDir as Ee, classNames as P, kendoThemeMaps as U, getTabIndex as Be } from "@progress/kendo-react-common";
-import { packageMetadata as Ie } from "../package-metadata.mjs";
-import { useLocalization as Fe } from "@progress/kendo-react-intl";
-import { messages as Me, checkboxValidation as Ne, checkboxOptionalText as ze } from "../messages/index.mjs";
-const Se = ye(), A = a.forwardRef((W, j) => {
-  xe(Ie);
-  const E = Ve(Se, W), {
+import { createPropsContext as ye, usePropsContext as xe, useId as Ve, dispatchEvent as V, Keys as H, useDir as Ee, classNames as E, kendoThemeMaps as U, getTabIndex as Pe } from "@progress/kendo-react-common";
+import { useLocalization as Be } from "@progress/kendo-react-intl";
+import { messages as Ie, checkboxValidation as Fe, checkboxOptionalText as Ne } from "../messages/index.mjs";
+const ze = ye(), A = a.forwardRef((W, j) => {
+  const P = xe(ze, W), {
     ariaDescribedBy: G,
     ariaLabelledBy: J,
     checked: B,
@@ -27,7 +25,7 @@ const Se = ye(), A = a.forwardRef((W, j) => {
     size: b = $.size,
     rounded: m = $.rounded,
     label: F,
-    labelPlacement: M,
+    labelPlacement: N,
     name: ee,
     labelOptional: ae,
     onChange: p,
@@ -36,16 +34,16 @@ const Se = ye(), A = a.forwardRef((W, j) => {
     tabIndex: te,
     value: s,
     required: i,
-    valid: N,
-    validationMessage: z,
+    valid: z,
+    validationMessage: M,
     validityStyles: S,
     autoFocus: oe,
     // Removed to support direct use in Form Field component
-    visited: De,
-    touched: Ke,
-    modified: Te,
+    visited: Me,
+    touched: Se,
+    modified: De,
     ...le
-  } = E, l = a.useRef(null), D = a.useCallback(() => {
+  } = P, l = a.useRef(null), D = a.useCallback(() => {
     l.current && l.current.focus();
   }, []), c = a.useCallback(
     () => ({
@@ -58,10 +56,10 @@ const Se = ye(), A = a.forwardRef((W, j) => {
     [D]
   );
   a.useImperativeHandle(j, c);
-  const [ne, se] = a.useState(Z), [ce, re] = a.useState(_), K = typeof s == "boolean" || s === null, h = B !== void 0, r = K, v = r ? s : ce, C = h ? B : r ? void 0 : ne, T = C === void 0 && v, w = T ? v : C, d = T || r ? s === null ? s : void 0 : s || v, ie = w === null || d === null, L = Pe(), de = Fe(), O = (t) => de.toLanguageString(t, Me[t]), q = O(Ne), ue = O(ze), g = N !== void 0 ? N : i ? !!C : !0;
+  const [ne, se] = a.useState(Z), [ce, re] = a.useState(_), K = typeof s == "boolean" || s === null, h = B !== void 0, r = K, v = r ? s : ce, C = h ? B : r ? void 0 : ne, T = C === void 0 && v, w = T ? v : C, d = T || r ? s === null ? s : void 0 : s || v, ie = w === null || d === null, L = Ve(), de = Be(), O = (t) => de.toLanguageString(t, Ie[t]), q = O(Fe), ue = O(Ne), g = z !== void 0 ? z : i ? !!C : !0;
   a.useEffect(() => {
-    l.current && l.current.setCustomValidity && l.current.setCustomValidity(g ? "" : z || q);
-  }, [g, z, q]);
+    l.current && l.current.setCustomValidity && l.current.setCustomValidity(g ? "" : M || q);
+  }, [g, M, q]);
   const u = a.useCallback(
     (t, n) => {
       !r && !o && (re(n), !h && !o && se(n)), p && !o && V(
@@ -107,9 +105,9 @@ const Se = ye(), A = a.forwardRef((W, j) => {
       f && !o && V(f, t, c(), void 0);
     },
     [f, o, c]
-  ), he = Ee(l, E.dir), ve = P("k-checkbox-wrap", Q), R = {
+  ), he = Ee(l, P.dir), ve = E("k-checkbox-wrap", Q), R = {
     type: "checkbox",
-    className: P("k-checkbox", {
+    className: E("k-checkbox", {
       [`k-checkbox-${U.sizeMap[b] || b}`]: b,
       [`k-rounded-${U.roundedMap[m] || m}`]: m,
       "k-indeterminate": ie,
@@ -121,7 +119,7 @@ const Se = ye(), A = a.forwardRef((W, j) => {
     id: I || L,
     disabled: o,
     required: i !== void 0 ? i : !1,
-    tabIndex: Be(te, o),
+    tabIndex: Pe(te, o),
     role: "checkbox",
     checked: !!w,
     "aria-describedby": G,
@@ -142,14 +140,14 @@ const Se = ye(), A = a.forwardRef((W, j) => {
   ), y = F !== void 0 ? /* @__PURE__ */ a.createElement(
     "label",
     {
-      className: P("k-checkbox-label", X),
+      className: E("k-checkbox-label", X),
       htmlFor: I || L,
       style: { userSelect: "none" }
     },
     F,
     ae && /* @__PURE__ */ a.createElement("span", { className: "k-label-optional" }, ue)
   ) : null, x = /* @__PURE__ */ a.createElement("span", { className: ve }, Ce, Y);
-  return /* @__PURE__ */ a.createElement(a.Fragment, null, M === "before" ? /* @__PURE__ */ a.createElement("div", { dir: "rtl" }, x, y) : M === "after" ? /* @__PURE__ */ a.createElement("div", { dir: "ltr" }, x, y) : /* @__PURE__ */ a.createElement("div", { dir: he }, x, y));
+  return /* @__PURE__ */ a.createElement(a.Fragment, null, N === "before" ? /* @__PURE__ */ a.createElement("div", { dir: "rtl" }, x, y) : N === "after" ? /* @__PURE__ */ a.createElement("div", { dir: "ltr" }, x, y) : /* @__PURE__ */ a.createElement("div", { dir: he }, x, y));
 });
 A.propTypes = {
   checked: e.bool,
@@ -186,5 +184,5 @@ const $ = {
 A.displayName = "KendoCheckbox";
 export {
   A as Checkbox,
-  Se as CheckboxPropsContext
+  ze as CheckboxPropsContext
 };

package/colors/ColorGradient.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 E=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),H=require("../package-metadata.js"),m=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),x=require("./ColorInput.js"),w=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),D=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function L(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=L(E),A="rgba",S="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},r.validatePackage(H.packageMetadata);const s=t.value||t.defaultValue||o.parseColor(S,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid)}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),y=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(y,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=S);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=D.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:this.props.style,ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>this.gradientWrapper=s?s.element:void 0},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(G.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(m.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(m.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>this.alphaSlider=s}))),l.createElement(x,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode}),this.props.backgroundColor&&l.createElement(w.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let f=c;const k=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(k,f));R.displayName="KendoReactColorGradient";exports.ColorGradient=R;exports.ColorGradientPropsContext=k;exports.ColorGradientWithoutContext=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),n=require("prop-types"),r=require("@progress/kendo-react-common"),H=require("../package-metadata.js"),m=require("../slider/Slider.js"),v=require("./utils/misc.js"),o=require("./utils/color-parser.js"),d=require("./utils/color-cache.js"),w=require("./ColorInput.js"),x=require("./ColorContrastLabels.js"),G=require("./ColorContrastSvg.js"),L=require("@progress/kendo-react-intl"),g=require("../messages/index.js");function D(u){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const s in u)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(u,s);Object.defineProperty(t,s,e.get?e:{enumerable:!0,get:()=>u[s]})}}return t.default=u,Object.freeze(t)}const l=D(E),A="rgba",k="rgba(255, 255, 255, 1)",b=2,C=5,c=class c extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.hsvGradientRef=l.createRef(),this.showLicenseWatermark=!1,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onHexChange=(e,a,i)=>{if(this.isUncontrolled){const h=o.getHSV(a);this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:o.getRGBA(a),hex:e})}else d.cacheHex(this.state.guid,a,e);this.dispatchChangeEvent(a,i,i.nativeEvent)},this.onRgbaChange=(e,a)=>{const i=o.getColorFromRGBA(e);if(this.isUncontrolled){const h=o.getHSV(i),p=o.parseColor(i,"hex");this.setState({hsva:h,backgroundColor:o.getColorFromHue(h.h),rgba:e,hex:p})}else d.cacheRgba(this.state.guid,i,e);this.dispatchChangeEvent(i,a.syntheticEvent,a.nativeEvent)},this.onAlphaSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{a:e.value/100}),e.syntheticEvent,e.nativeEvent)},this.onHueSliderChange=e=>{this.handleHsvaChange(Object.assign({},this.state.hsva,{h:e.value}),e.syntheticEvent,e.nativeEvent)},this.onDrag=e=>{this.gradientWrapper.classList.add("k-dragging"),this.changePosition(e.event)},this.onRelease=()=>{this.gradientWrapper.classList.remove("k-dragging")},this.onGradientWrapperClick=e=>{this.changePosition(e)},this.onHsvGradientKeyDown=e=>{var a;(a=this.hsvNavigation)==null||a.triggerKeyboardEvent(e)},this.onHsvGradientValueChange=(e,a,i)=>{const h=parseInt(e.style.top,10)+i,p=parseInt(e.style.left,10)+a;e.style.top=`${h}px`,e.style.left=`${p}px`,this.moveDragHandle(p,h)},this.changePosition=e=>{const a=this.getGradientRectMetrics(),i=e.clientX-a.left,h=e.clientY-a.top;this.moveDragHandle(i,h)},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus.call(void 0,{nativeEvent:e,target:this})},this.onKeyDown=e=>{var a;(a=this.navigation)==null||a.triggerKeyboardEvent(e)},this.showLicenseWatermark=!r.validatePackage(H.packageMetadata,{component:"ColorGradient"});const s=t.value||t.defaultValue||o.parseColor(k,A);this.state=Object.assign({},c.getStateFromValue(s),{isFirstRender:!0,guid:this.props.id})}static getDerivedStateFromProps(t,s){return t.value&&!s.isFirstRender?c.getStateFromValue(t.value,s.guid):null}componentDidMount(){if(this.setAlphaSliderBackground(this.state.backgroundColor),this.state.isFirstRender&&this.setState({isFirstRender:!1}),this.wrapperRef&&this.hsvGradientRef){let t=0,s=0;this.hsvNavigation=new r.Navigation({tabIndex:0,root:this.hsvGradientRef,selectors:[".k-hsv-rectangle .k-hsv-draghandle"],keyboardEvents:{keydown:{ArrowDown:(e,a,i)=>{s=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,0,s)},ArrowUp:(e,a,i)=>{s=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,0,s)},ArrowLeft:(e,a,i)=>{t=i.shiftKey?-(this.props.gradientSliderSmallStep||b):-(this.props.gradientSliderStep||C),this.onHsvGradientValueChange(e,t,0)},ArrowRight:(e,a,i)=>{t=i.shiftKey?this.props.gradientSliderSmallStep||b:this.props.gradientSliderStep||C,this.onHsvGradientValueChange(e,t,0)}}}})}this.wrapperRef&&this.wrapperRef.current&&(this.props.isInsidePopup?this.hsvGradientRef.current&&this.hsvGradientRef.current.focus():this.navigation=new r.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-colorgradient"],keyboardEvents:{keydown:{Tab:(t,s,e)=>{r.getActiveElement(document)===t?r.disableNavigatableContainer(t):r.keepFocusInContainer(e,t,r.TABBABLE_ELEMENTS)},Enter:(t,s,e)=>{r.getActiveElement(document)===t&&(r.focusFirstFocusableChild(t),r.enableNavigatableContainer(t))},Escape:(t,s,e)=>{r.getActiveElement(document)!==t&&(t.focus(),r.disableNavigatableContainer(t))}}}}))}componentWillUnmount(){d.removeCachedColor(this.state.guid)}componentDidUpdate(t,s){s.backgroundColor!==this.state.backgroundColor&&this.setAlphaSliderBackground(this.state.backgroundColor)}renderRectangleDragHandle(){const t={};if(!this.state.isFirstRender){const s=this.getGradientRectMetrics(),e=(1-this.state.hsva.v)*s.height,a=this.state.hsva.s*s.width;t.top=`${e}px`,t.left=`${a}px`}return l.createElement("div",{ref:this.hsvGradientRef,role:"slider",tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-valuetext":this.props.ariaValueText,"aria-valuenow":parseInt(this.state.hex.substring(1),16),"aria-label":this.props.ariaLabelHSV,"aria-orientation":void 0,"aria-disabled":this.props.disabled?"true":void 0,className:"k-hsv-draghandle k-draghandle",style:t,onKeyDown:this.onHsvGradientKeyDown})}moveDragHandle(t,s){const e=this.getGradientRectMetrics(),a=e.width,i=e.height,h=v.fitIntoBounds(s,0,i),p=v.fitIntoBounds(t,0,a),y=Object.assign({},this.state.hsva,{s:p/a,v:1-h/i});this.handleHsvaChange(y,{},{})}handleHsvaChange(t,s,e){const a=o.getColorFromHSV(t),i=o.parseColor(a,"hex");this.isUncontrolled||d.cacheHsva(this.state.guid,a,t),this.setState({hsva:t,backgroundColor:o.getColorFromHue(t.h),rgba:o.getRGBA(a),hex:i}),this.dispatchChangeEvent(a,s,e)}dispatchChangeEvent(t,s,e){this.props.onChange&&this.props.onChange.call(void 0,{syntheticEvent:s,nativeEvent:e,target:this,value:t})}static getStateFromValue(t,s){v.isPresent(o.parseColor(t,"hex"))||(t=k);const e=d.getCachedHsva(s,t)||o.getHSV(t),a=d.getCachedRgba(s,t)||o.getRGBA(t),i=d.getCachedHex(s,t)||o.parseColor(t,"hex"),h=o.getColorFromHue(e.h);return{hsva:e,backgroundColor:h,rgba:a,hex:i}}setAlphaSliderBackground(t){this.props.opacity&&this.alphaSlider&&this.alphaSlider.sliderTrack&&(this.alphaSlider.sliderTrack.style.background=`linear-gradient(to ${this.props._adaptive?"right":"top"}, transparent, ${t})`)}get isUncontrolled(){return this.props.value===void 0}getGradientRectMetrics(){return this.gradientWrapper.getBoundingClientRect()}render(){const t=L.provideLocalizationService(this);return l.createElement("div",{id:this.props.id,role:this.props.role,className:r.classNames("k-colorgradient",{[`k-colorgradient-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),"aria-disabled":this.props.disabled?"true":void 0,style:{position:"relative",...this.props.style},ref:this.wrapperRef,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),"aria-label":this.props.ariaLabel,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,onFocus:this.onFocus,onKeyDown:this.onKeyDown},l.createElement("div",{className:`k-colorgradient-canvas ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement("div",{className:"k-hsv-rectangle",style:{background:this.state.backgroundColor}},l.createElement(r.Draggable,{onDrag:this.onDrag,onRelease:this.onRelease,ref:s=>this.gradientWrapper=s?s.element:void 0},l.createElement("div",{className:"k-hsv-gradient",style:{touchAction:"none"},onClick:this.onGradientWrapperClick},this.renderRectangleDragHandle())),this.props.backgroundColor&&!this.state.isFirstRender&&l.createElement(G.ColorContrastSvg,{metrics:this.gradientWrapper?this.getGradientRectMetrics():void 0,hsva:this.state.hsva,backgroundColor:this.props.backgroundColor})),l.createElement("div",{className:`k-hsv-controls ${this.props._adaptive?"k-vstack":"k-hstack"}`},l.createElement(m.Slider,{value:this.state.hsva.h,buttons:!1,vertical:!this.props._adaptive,min:0,max:360,step:5,onChange:this.onHueSliderChange,className:"k-hue-slider k-colorgradient-slider",disabled:this.props.disabled,ariaLabel:t.toLanguageString(g.colorGradientHueSliderLabel,g.messages[g.colorGradientHueSliderLabel])}),this.props.opacity&&l.createElement(m.Slider,{value:v.isPresent(this.state.hsva.a)?this.state.hsva.a*100:100,buttons:!1,vertical:!this.props._adaptive,min:0,max:100,step:1,ariaLabel:t.toLanguageString(g.colorGradientAlphaSliderLabel,g.messages[g.colorGradientAlphaSliderLabel]),onChange:this.onAlphaSliderChange,className:"k-alpha-slider k-colorgradient-slider",disabled:this.props.disabled,ref:s=>this.alphaSlider=s}))),l.createElement(w,{rgba:this.state.rgba,onRgbaChange:this.onRgbaChange,hex:this.state.hex,onHexChange:this.onHexChange,opacity:this.props.opacity,disabled:this.props.disabled,defaultInputMode:this.props.format,size:this.props.size,fillMode:this.props.fillMode}),this.props.backgroundColor&&l.createElement(x.ColorContrastLabels,{bgColor:o.getRGBA(this.props.backgroundColor),rgba:this.state.rgba}),this.showLicenseWatermark&&l.createElement(r.WatermarkOverlay,null))}};c.displayName="ColorGradient",c.propTypes={defaultValue:n.string,value:n.string,onChange:n.func,onFocus:n.func,opacity:n.bool,backgroundColor:n.string,format:n.any,disabled:n.bool,style:n.any,id:n.string,role:n.string,ariaLabel:n.string,ariaLabelledBy:n.string,ariaDescribedBy:n.string,className:n.string,size:n.oneOf(["small","medium","large",null])},c.defaultProps={opacity:!0,role:"textbox",format:"rgb",size:"medium"};let f=c;const S=r.createPropsContext(),R=r.withIdHOC(r.withPropsContext(S,f));R.displayName="KendoReactColorGradient";exports.ColorGradient=R;exports.ColorGradientPropsContext=S;exports.ColorGradientWithoutContext=f;

package/colors/ColorGradient.mjs

@@ -5,22 +5,22 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as o from "react";
-import r from "prop-types";
-import { validatePackage as L, Navigation as f, getActiveElement as u, disableNavigatableContainer as C, keepFocusInContainer as F, TABBABLE_ELEMENTS as G, focusFirstFocusableChild as A, enableNavigatableContainer as N, getTabIndex as k, classNames as I, kendoThemeMaps as M, Draggable as _, createPropsContext as T, withIdHOC as B, withPropsContext as P } from "@progress/kendo-react-common";
-import { packageMetadata as V } from "../package-metadata.mjs";
+import * as r from "react";
+import o from "prop-types";
+import { validatePackage as D, Navigation as f, getActiveElement as u, disableNavigatableContainer as C, keepFocusInContainer as F, TABBABLE_ELEMENTS as G, focusFirstFocusableChild as A, enableNavigatableContainer as N, getTabIndex as k, classNames as I, kendoThemeMaps as M, Draggable as _, WatermarkOverlay as T, createPropsContext as B, withIdHOC as P, withPropsContext as V } from "@progress/kendo-react-common";
+import { packageMetadata as K } from "../package-metadata.mjs";
 import { Slider as S } from "../slider/Slider.mjs";
 import { isPresent as R, fitIntoBounds as y } from "./utils/misc.mjs";
-import { getHSV as b, getColorFromHue as p, getRGBA as c, getColorFromRGBA as K, parseColor as d, getColorFromHSV as U } from "./utils/color-parser.mjs";
-import { cacheHex as z, cacheRgba as O, removeCachedColor as $, cacheHsva as W, getCachedHsva as j, getCachedRgba as X, getCachedHex as Y } from "./utils/color-cache.mjs";
-import q from "./ColorInput.mjs";
-import { ColorContrastLabels as J } from "./ColorContrastLabels.mjs";
-import { ColorContrastSvg as Q } from "./ColorContrastSvg.mjs";
-import { provideLocalizationService as Z } from "@progress/kendo-react-intl";
-import { colorGradientHueSliderLabel as E, messages as x, colorGradientAlphaSliderLabel as H } from "../messages/index.mjs";
-const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends o.Component {
+import { getHSV as b, getColorFromHue as p, getRGBA as c, getColorFromRGBA as O, parseColor as d, getColorFromHSV as U } from "./utils/color-parser.mjs";
+import { cacheHex as z, cacheRgba as W, removeCachedColor as $, cacheHsva as j, getCachedHsva as X, getCachedRgba as Y, getCachedHex as q } from "./utils/color-cache.mjs";
+import J from "./ColorInput.mjs";
+import { ColorContrastLabels as Q } from "./ColorContrastLabels.mjs";
+import { ColorContrastSvg as Z } from "./ColorContrastSvg.mjs";
+import { provideLocalizationService as ee } from "@progress/kendo-react-intl";
+import { colorGradientHueSliderLabel as E, messages as w, colorGradientAlphaSliderLabel as x } from "../messages/index.mjs";
+const te = "rgba", H = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h extends r.Component {
   constructor(t) {
-    super(t), this.wrapperRef = o.createRef(), this.hsvGradientRef = o.createRef(), this.focus = () => {
+    super(t), this.wrapperRef = r.createRef(), this.hsvGradientRef = r.createRef(), this.showLicenseWatermark = !1, this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
     }, this.onHexChange = (e, s, i) => {
       if (this.isUncontrolled) {
@@ -30,12 +30,12 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         z(this.state.guid, s, e);
       this.dispatchChangeEvent(s, i, i.nativeEvent);
     }, this.onRgbaChange = (e, s) => {
-      const i = K(e);
+      const i = O(e);
       if (this.isUncontrolled) {
         const n = b(i), l = d(i, "hex");
         this.setState({ hsva: n, backgroundColor: p(n.h), rgba: e, hex: l });
       } else
-        O(this.state.guid, i, e);
+        W(this.state.guid, i, e);
       this.dispatchChangeEvent(i, s.syntheticEvent, s.nativeEvent);
     }, this.onAlphaSliderChange = (e) => {
       this.handleHsvaChange(
@@ -69,8 +69,8 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
     }, this.onKeyDown = (e) => {
       var s;
       (s = this.navigation) == null || s.triggerKeyboardEvent(e);
-    }, L(V);
-    const a = t.value || t.defaultValue || d(w, ee);
+    }, this.showLicenseWatermark = !D(K, { component: "ColorGradient" });
+    const a = t.value || t.defaultValue || d(H, te);
     this.state = Object.assign({}, h.getStateFromValue(a), {
       isFirstRender: !0,
       guid: this.props.id
@@ -150,7 +150,7 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
       const a = this.getGradientRectMetrics(), e = (1 - this.state.hsva.v) * a.height, s = this.state.hsva.s * a.width;
       t.top = `${e}px`, t.left = `${s}px`;
     }
-    return /* @__PURE__ */ o.createElement(
+    return /* @__PURE__ */ r.createElement(
       "div",
       {
         ref: this.hsvGradientRef,
@@ -171,18 +171,18 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   moveDragHandle(t, a) {
-    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = y(a, 0, i), l = y(t, 0, s), D = Object.assign({}, this.state.hsva, {
+    const e = this.getGradientRectMetrics(), s = e.width, i = e.height, n = y(a, 0, i), l = y(t, 0, s), L = Object.assign({}, this.state.hsva, {
       s: l / s,
       v: 1 - n / i
     });
-    this.handleHsvaChange(D, {}, {});
+    this.handleHsvaChange(L, {}, {});
   }
   /**
    * @hidden
    */
   handleHsvaChange(t, a, e) {
     const s = U(t), i = d(s, "hex");
-    this.isUncontrolled || W(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
+    this.isUncontrolled || j(this.state.guid, s, t), this.setState({ hsva: t, backgroundColor: p(t.h), rgba: c(s), hex: i }), this.dispatchChangeEvent(s, a, e);
   }
   /**
    * @hidden
@@ -199,8 +199,8 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   static getStateFromValue(t, a) {
-    R(d(t, "hex")) || (t = w);
-    const e = j(a, t) || b(t), s = X(a, t) || c(t), i = Y(a, t) || d(t, "hex"), n = p(e.h);
+    R(d(t, "hex")) || (t = H);
+    const e = X(a, t) || b(t), s = Y(a, t) || c(t), i = q(a, t) || d(t, "hex"), n = p(e.h);
     return { hsva: e, backgroundColor: n, rgba: s, hex: i };
   }
   /**
@@ -225,8 +225,8 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
    * @hidden
    */
   render() {
-    const t = Z(this);
-    return /* @__PURE__ */ o.createElement(
+    const t = ee(this);
+    return /* @__PURE__ */ r.createElement(
       "div",
       {
         id: this.props.id,
@@ -240,7 +240,7 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           this.props.className
         ),
         "aria-disabled": this.props.disabled ? "true" : void 0,
-        style: this.props.style,
+        style: { position: "relative", ...this.props.style },
         ref: this.wrapperRef,
         tabIndex: k(this.props.tabIndex, this.props.disabled),
         "aria-label": this.props.ariaLabel,
@@ -249,14 +249,14 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
         onFocus: this.onFocus,
         onKeyDown: this.onKeyDown
       },
-      /* @__PURE__ */ o.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ o.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ o.createElement(
+      /* @__PURE__ */ r.createElement("div", { className: `k-colorgradient-canvas ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } }, /* @__PURE__ */ r.createElement(
         _,
         {
           onDrag: this.onDrag,
           onRelease: this.onRelease,
           ref: (a) => this.gradientWrapper = a ? a.element : void 0
         },
-        /* @__PURE__ */ o.createElement(
+        /* @__PURE__ */ r.createElement(
           "div",
           {
             className: "k-hsv-gradient",
@@ -265,14 +265,14 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           },
           this.renderRectangleDragHandle()
         )
-      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ o.createElement(
-        Q,
+      ), this.props.backgroundColor && !this.state.isFirstRender && /* @__PURE__ */ r.createElement(
+        Z,
         {
           metrics: this.gradientWrapper ? this.getGradientRectMetrics() : void 0,
           hsva: this.state.hsva,
           backgroundColor: this.props.backgroundColor
         }
-      )), /* @__PURE__ */ o.createElement("div", { className: `k-hsv-controls ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ o.createElement(
+      )), /* @__PURE__ */ r.createElement("div", { className: `k-hsv-controls ${this.props._adaptive ? "k-vstack" : "k-hstack"}` }, /* @__PURE__ */ r.createElement(
         S,
         {
           value: this.state.hsva.h,
@@ -286,10 +286,10 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           disabled: this.props.disabled,
           ariaLabel: t.toLanguageString(
             E,
-            x[E]
+            w[E]
           )
         }
-      ), this.props.opacity && /* @__PURE__ */ o.createElement(
+      ), this.props.opacity && /* @__PURE__ */ r.createElement(
         S,
         {
           value: R(this.state.hsva.a) ? this.state.hsva.a * 100 : 100,
@@ -299,8 +299,8 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           max: 100,
           step: 1,
           ariaLabel: t.toLanguageString(
-            H,
-            x[H]
+            x,
+            w[x]
           ),
           onChange: this.onAlphaSliderChange,
           className: "k-alpha-slider k-colorgradient-slider",
@@ -308,8 +308,8 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           ref: (a) => this.alphaSlider = a
         }
       ))),
-      /* @__PURE__ */ o.createElement(
-        q,
+      /* @__PURE__ */ r.createElement(
+        J,
         {
           rgba: this.state.rgba,
           onRgbaChange: this.onRgbaChange,
@@ -322,27 +322,28 @@ const ee = "rgba", w = "rgba(255, 255, 255, 1)", g = 2, v = 5, h = class h exten
           fillMode: this.props.fillMode
         }
       ),
-      this.props.backgroundColor && /* @__PURE__ */ o.createElement(J, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba })
+      this.props.backgroundColor && /* @__PURE__ */ r.createElement(Q, { bgColor: c(this.props.backgroundColor), rgba: this.state.rgba }),
+      this.showLicenseWatermark && /* @__PURE__ */ r.createElement(T, null)
     );
   }
 };
 h.displayName = "ColorGradient", h.propTypes = {
-  defaultValue: r.string,
-  value: r.string,
-  onChange: r.func,
-  onFocus: r.func,
-  opacity: r.bool,
-  backgroundColor: r.string,
-  format: r.any,
-  disabled: r.bool,
-  style: r.any,
-  id: r.string,
-  role: r.string,
-  ariaLabel: r.string,
-  ariaLabelledBy: r.string,
-  ariaDescribedBy: r.string,
-  className: r.string,
-  size: r.oneOf(["small", "medium", "large", null])
+  defaultValue: o.string,
+  value: o.string,
+  onChange: o.func,
+  onFocus: o.func,
+  opacity: o.bool,
+  backgroundColor: o.string,
+  format: o.any,
+  disabled: o.bool,
+  style: o.any,
+  id: o.string,
+  role: o.string,
+  ariaLabel: o.string,
+  ariaLabelledBy: o.string,
+  ariaDescribedBy: o.string,
+  className: o.string,
+  size: o.oneOf(["small", "medium", "large", null])
 }, h.defaultProps = {
   opacity: !0,
   role: "textbox",
@@ -350,15 +351,15 @@ h.displayName = "ColorGradient", h.propTypes = {
   size: "medium"
 };
 let m = h;
-const te = T(), se = B(
-  P(
-    te,
+const se = B(), ae = P(
+  V(
+    se,
     m
   )
 );
-se.displayName = "KendoReactColorGradient";
+ae.displayName = "KendoReactColorGradient";
 export {
-  se as ColorGradient,
-  te as ColorGradientPropsContext,
+  ae as ColorGradient,
+  se as ColorGradientPropsContext,
   m as ColorGradientWithoutContext
 };

package/colors/ColorPalette.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 k=require("react"),s=require("prop-types"),P=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),R=require("../package-metadata.js"),T=require("./models/palette-presets.js"),F=require("./utils/misc.js"),N=require("./utils/color-parser.js");function D(l){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const e in l)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(l,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>l[e]})}}return t.default=l,Object.freeze(t)}const a=D(k),C=24,h=10,g="office",n=class n extends a.Component{constructor(t){super(t),this.wrapperRef=a.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},r.validatePackage(R.packageMetadata),this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new P.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor);return t.colors.length?a.createElement("div",{id:this.props.id,role:"grid",className:r.classNames("k-colorpalette",{[`k-colorpalette-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},a.createElement("table",{className:"k-colorpalette-table",role:"presentation"},a.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:N.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=T.PALETTEPRESETS[this.props.palette];return F.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||h}:{colors:[],columns:0}}return{colors:this.props.palette||[],columns:this.props.columns||h}}renderRows(t,e,o){return t.map((i,c)=>a.createElement("tr",{role:"row",key:c},this.renderColumns(i,c,e,o)))}renderColumns(t,e,o,i){const c=o!==void 0&&o.row===e,b=o&&o.col,S=i!==void 0&&i.row===e,E=i&&i.col;return t.map((u,d)=>{const f=c&&b===d,y=r.classNames("k-colorpalette-tile",{"k-selected":f,"k-focus":S&&E===d});return a.createElement("td",{role:"gridcell",className:y,"aria-label":u,"aria-selected":f?!0:this.props.disabled?void 0:!1,style:{backgroundColor:u},onClick:w=>this.onColorClick(u,w),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};n.displayName="ColorPalette",n.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string,size:s.oneOf(["small","medium","large",null])},n.defaultProps={palette:g,tileSize:C,size:"medium"};let p=n;const v=r.createPropsContext(),m=r.withIdHOC(r.withPropsContext(v,p));m.displayName="KendoReactColorPalette";exports.ColorPalette=m;exports.ColorPalettePropsContext=v;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=h;exports.DEFAULT_PRESET=g;exports.DEFAULT_TILE_SIZE=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),s=require("prop-types"),R=require("./utils/color-palette.service.js"),r=require("@progress/kendo-react-common"),k=require("./models/palette-presets.js"),T=require("./utils/misc.js"),F=require("./utils/color-parser.js");function N(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const l=N(P),C=24,h=10,g="office",n=class n extends l.Component{constructor(t){super(t),this.wrapperRef=l.createRef(),this.paletteService=null,this.focus=()=>{this.wrapperRef&&this.wrapperRef.current&&this.wrapperRef.current.focus()},this.onKeyDown=e=>{switch(e.key){case r.KEYS.down:this.handleCellNavigation(0,1);break;case r.KEYS.up:this.handleCellNavigation(0,-1);break;case r.KEYS.right:this.handleCellNavigation(1,0);break;case r.KEYS.left:this.handleCellNavigation(-1,0);break;case r.KEYS.enter:this.handleEnter(e);break;default:return}e.preventDefault()},this.onColorClick=(e,o)=>{this.isUncontrolled?this.setState({selectedColor:e,focusedColor:e}):this.setState({focusedColor:e}),this.dispatchChangeEvent(e,o)},this.onFocus=e=>{this.paletteService&&(this.setState({focusedColor:this.state.selectedColor||this.paletteService.colorRows[0][0]}),this.props.onFocus&&this.props.onFocus.call(void 0,e))},this.onBlur=()=>{this.setState({focusedColor:void 0})},this.state={selectedColor:this.props.value!==void 0?this.props.value:this.props.defaultValue?this.props.defaultValue:void 0,isFirstRender:!0}}get guid(){return this.props.id}render(){const t=this.getPaletteInfo(),e=this.paletteService=new R.ColorPaletteService;e.setColorMatrix(t.colors,t.columns);const o=e.getCellCoordsFor(this.state.selectedColor),i=e.getCellCoordsFor(this.state.focusedColor);return t.colors.length?l.createElement("div",{id:this.props.id,role:"grid",className:r.classNames("k-colorpalette",{[`k-colorpalette-${r.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size,"k-disabled":this.props.disabled},this.props.className),onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onKeyDown,"aria-disabled":this.props.ariaDisabled||(this.props.disabled?"true":void 0),"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:r.getTabIndex(this.props.tabIndex,this.props.disabled),ref:this.wrapperRef},l.createElement("table",{className:"k-colorpalette-table",role:"presentation"},l.createElement("tbody",{role:"rowgroup"},this.renderRows(e.colorRows,o,i)))):""}static getDerivedStateFromProps(t,e){if(!e.isFirstRender&&t.value!==void 0){if(t.value===""&&e.selectedColor!==void 0)return{selectedColor:void 0};if(t.value!==""&&t.value!==e.selectedColor)return{selectedColor:t.value}}else if(e.isFirstRender)return{isFirstRender:!1};return null}handleCellNavigation(t,e){if(this.paletteService)if(this.focusedColorCooridanates){const o=this.paletteService.getNextCell(this.focusedColorCooridanates,t,e);this.setState({focusedColor:this.paletteService.getColorAt(o)})}else this.setState({focusedColor:this.paletteService.colorRows[0][0]})}handleEnter(t){this.isUncontrolled&&this.setState({selectedColor:this.state.focusedColor}),this.dispatchChangeEvent(this.state.focusedColor,t)}dispatchChangeEvent(t,e){r.dispatchEvent(this.props.onChange,e,this,{value:t,rgbaValue:F.parseColor(t,"rgba")})}get focusedColorCooridanates(){return this.state.focusedColor&&this.paletteService?this.paletteService.getCellCoordsFor(this.state.focusedColor):void 0}get isUncontrolled(){return this.props.value===void 0}getPaletteInfo(){if(typeof this.props.palette=="string"){const t=k.PALETTEPRESETS[this.props.palette];return T.isPresent(t)?{colors:t.colors,columns:this.props.columns||t.columns||h}:{colors:[],columns:0}}return{colors:this.props.palette||[],columns:this.props.columns||h}}renderRows(t,e,o){return t.map((i,c)=>l.createElement("tr",{role:"row",key:c},this.renderColumns(i,c,e,o)))}renderColumns(t,e,o,i){const c=o!==void 0&&o.row===e,b=o&&o.col,S=i!==void 0&&i.row===e,E=i&&i.col;return t.map((u,d)=>{const f=c&&b===d,y=r.classNames("k-colorpalette-tile",{"k-selected":f,"k-focus":S&&E===d});return l.createElement("td",{role:"gridcell",className:y,"aria-label":u,"aria-selected":f?!0:this.props.disabled?void 0:!1,style:{backgroundColor:u},onClick:w=>this.onColorClick(u,w),id:this.createCellId({row:e,col:d}),key:d})})}createCellId(t){return`${this.guid}_${t.row}_${t.col}`}};n.displayName="ColorPalette",n.propTypes={palette:s.oneOfType([s.arrayOf(s.string.isRequired),s.string]),columns:s.number,tileSize:s.any,defaultValue:s.string,value:s.string,disabled:s.bool,tabIndex:s.number,onChange:s.func,onFocus:s.func,id:s.string,ariaLabelledBy:s.string,ariaDescribedBy:s.string,className:s.string,size:s.oneOf(["small","medium","large",null])},n.defaultProps={palette:g,tileSize:C,size:"medium"};let p=n;const m=r.createPropsContext(),v=r.withIdHOC(r.withPropsContext(m,p));v.displayName="KendoReactColorPalette";exports.ColorPalette=v;exports.ColorPalettePropsContext=m;exports.ColorPaletteWithoutContext=p;exports.DEFAULT_COLUMNS_COUNT=h;exports.DEFAULT_PRESET=g;exports.DEFAULT_TILE_SIZE=C;

package/colors/ColorPalette.mjs

@@ -8,12 +8,11 @@
 import * as i from "react";
 import s from "prop-types";
 import { ColorPaletteService as S } from "./utils/color-palette.service.mjs";
-import { KEYS as l, validatePackage as w, classNames as u, kendoThemeMaps as E, getTabIndex as k, dispatchEvent as y, createPropsContext as R, withIdHOC as F, withPropsContext as N } from "@progress/kendo-react-common";
-import { packageMetadata as P } from "../package-metadata.mjs";
-import { PALETTEPRESETS as T } from "./models/palette-presets.mjs";
-import { isPresent as I } from "./utils/misc.mjs";
-import { parseColor as D } from "./utils/color-parser.mjs";
-const z = 24, f = 10, L = "office", a = class a extends i.Component {
+import { KEYS as l, classNames as u, kendoThemeMaps as w, getTabIndex as E, dispatchEvent as y, createPropsContext as k, withIdHOC as R, withPropsContext as F } from "@progress/kendo-react-common";
+import { PALETTEPRESETS as N } from "./models/palette-presets.mjs";
+import { isPresent as T } from "./utils/misc.mjs";
+import { parseColor as P } from "./utils/color-parser.mjs";
+const I = 24, f = 10, D = "office", a = class a extends i.Component {
   constructor(t) {
     super(t), this.wrapperRef = i.createRef(), this.paletteService = null, this.focus = () => {
       this.wrapperRef && this.wrapperRef.current && this.wrapperRef.current.focus();
@@ -44,7 +43,7 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
       this.paletteService && (this.setState({ focusedColor: this.state.selectedColor || this.paletteService.colorRows[0][0] }), this.props.onFocus && this.props.onFocus.call(void 0, e));
     }, this.onBlur = () => {
       this.setState({ focusedColor: void 0 });
-    }, w(P), this.state = {
+    }, this.state = {
       selectedColor: this.props.value !== void 0 ? this.props.value : this.props.defaultValue ? this.props.defaultValue : void 0,
       isFirstRender: !0
     };
@@ -67,7 +66,7 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
         className: u(
           "k-colorpalette",
           {
-            [`k-colorpalette-${E.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
+            [`k-colorpalette-${w.sizeMap[this.props.size] || this.props.size}`]: this.props.size,
             "k-disabled": this.props.disabled
           },
           this.props.className
@@ -78,7 +77,7 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
         "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? "true" : void 0),
         "aria-labelledby": this.props.ariaLabelledBy,
         "aria-describedby": this.props.ariaDescribedBy,
-        tabIndex: k(this.props.tabIndex, this.props.disabled),
+        tabIndex: E(this.props.tabIndex, this.props.disabled),
         ref: this.wrapperRef
       },
       /* @__PURE__ */ i.createElement("table", { className: "k-colorpalette-table", role: "presentation" }, /* @__PURE__ */ i.createElement("tbody", { role: "rowgroup" }, this.renderRows(e.colorRows, o, r)))
@@ -113,7 +112,7 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
     this.isUncontrolled && this.setState({ selectedColor: this.state.focusedColor }), this.dispatchChangeEvent(this.state.focusedColor, t);
   }
   dispatchChangeEvent(t, e) {
-    y(this.props.onChange, e, this, { value: t, rgbaValue: D(t, "rgba") });
+    y(this.props.onChange, e, this, { value: t, rgbaValue: P(t, "rgba") });
   }
   get focusedColorCooridanates() {
     return this.state.focusedColor && this.paletteService ? this.paletteService.getCellCoordsFor(this.state.focusedColor) : void 0;
@@ -123,8 +122,8 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
   }
   getPaletteInfo() {
     if (typeof this.props.palette == "string") {
-      const t = T[this.props.palette];
-      return I(t) ? {
+      const t = N[this.props.palette];
+      return T(t) ? {
         colors: t.colors,
         columns: this.props.columns || t.columns || f
       } : { colors: [], columns: 0 };
@@ -135,17 +134,17 @@ const z = 24, f = 10, L = "office", a = class a extends i.Component {
     return t.map((r, n) => /* @__PURE__ */ i.createElement("tr", { role: "row", key: n }, this.renderColumns(r, n, e, o)));
   }
   renderColumns(t, e, o, r) {
-    const n = o !== void 0 && o.row === e, C = o && o.col, m = r !== void 0 && r.row === e, g = r && r.col;
+    const n = o !== void 0 && o.row === e, C = o && o.col, m = r !== void 0 && r.row === e, v = r && r.col;
     return t.map((d, c) => {
-      const h = n && C === c, v = u("k-colorpalette-tile", {
+      const h = n && C === c, g = u("k-colorpalette-tile", {
         "k-selected": h,
-        "k-focus": m && g === c
+        "k-focus": m && v === c
       });
       return /* @__PURE__ */ i.createElement(
         "td",
         {
           role: "gridcell",
-          className: v,
+          className: g,
           "aria-label": d,
           "aria-selected": h ? !0 : this.props.disabled ? void 0 : !1,
           style: { backgroundColor: d },
@@ -176,23 +175,23 @@ a.displayName = "ColorPalette", a.propTypes = {
   className: s.string,
   size: s.oneOf(["small", "medium", "large", null])
 }, a.defaultProps = {
-  palette: L,
-  tileSize: z,
+  palette: D,
+  tileSize: I,
   size: "medium"
 };
 let p = a;
-const U = R(), B = F(
-  N(
-    U,
+const z = k(), L = R(
+  F(
+    z,
     p
   )
 );
-B.displayName = "KendoReactColorPalette";
+L.displayName = "KendoReactColorPalette";
 export {
-  B as ColorPalette,
-  U as ColorPalettePropsContext,
+  L as ColorPalette,
+  z as ColorPalettePropsContext,
   p as ColorPaletteWithoutContext,
   f as DEFAULT_COLUMNS_COUNT,
-  L as DEFAULT_PRESET,
-  z as DEFAULT_TILE_SIZE
+  D as DEFAULT_PRESET,
+  I as DEFAULT_TILE_SIZE
 };