@progress/kendo-react-inputs 9.4.0-develop.24 → 9.4.0-develop.3

package/colors/FlatColorPicker.mjs

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

package/colors/HexInput.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";const l=require("react"),o=require("./utils/color-parser.js"),n=require("./utils/misc.js"),h=require("../textbox/Textbox.js");function c(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=c(l);class u extends a.Component{constructor(e){super(e),this.onChange=t=>{const s=t.target.value,i=o.parseColor(s,"rgba");this.setState({hex:s}),n.isPresent(i)&&this.props.onHexChange(s,i,t)},this.onBlur=()=>{n.isPresent(o.parseColor(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return a.createElement(h.TextBox,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled,className:"k-hex-value",size:this.props.size,fillMode:this.props.fillMode})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}}module.exports=u;
+"use client";"use strict";const c=require("react"),o=require("./utils/color-parser.js"),i=require("./utils/misc.js"),l=require("../textbox/Textbox.js");function h(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const a=h(c);class u extends a.Component{constructor(e){super(e),this.onChange=t=>{const s=t.target.value,n=o.parseColor(s,"rgba");this.setState({hex:s}),i.isPresent(n)&&this.props.onHexChange(s,n,t)},this.onBlur=()=>{i.isPresent(o.parseColor(this.state.hex,"rgba"))||this.setState({hex:this.state.originalHex})},this.state={hex:this.props.hex,originalHex:this.props.hex}}render(){return a.createElement(l.TextBox,{value:this.state.hex,onChange:this.onChange,onBlur:this.onBlur,disabled:this.props.disabled,className:"k-hex-value"})}static getDerivedStateFromProps(e,t){return e.hex!==t.originalHex?{hex:e.hex,originalHex:e.hex}:null}}module.exports=u;

package/colors/HexInput.mjs

@@ -5,17 +5,18 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as i from "react";
-import { parseColor as o } from "./utils/color-parser.mjs";
-import { isPresent as a } from "./utils/misc.mjs";
+import { parseColor as a } from "./utils/color-parser.mjs";
+import { isPresent as o } from "./utils/misc.mjs";
 import { TextBox as h } from "../textbox/Textbox.mjs";
-class u extends i.Component {
+class p extends i.Component {
   constructor(e) {
     super(e), this.onChange = (t) => {
-      const s = t.target.value, r = o(s, "rgba");
-      this.setState({ hex: s }), a(r) && this.props.onHexChange(s, r, t);
+      const s = t.target.value, r = a(s, "rgba");
+      this.setState({ hex: s }), o(r) && this.props.onHexChange(s, r, t);
     }, this.onBlur = () => {
-      a(o(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
+      o(a(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
     }, this.state = { hex: this.props.hex, originalHex: this.props.hex };
   }
   render() {
@@ -26,9 +27,7 @@ class u extends i.Component {
         onChange: this.onChange,
         onBlur: this.onBlur,
         disabled: this.props.disabled,
-        className: "k-hex-value",
-        size: this.props.size,
-        fillMode: this.props.fillMode
+        className: "k-hex-value"
       }
     );
   }
@@ -37,5 +36,5 @@ class u extends i.Component {
   }
 }
 export {
-  u as default
+  p as default
 };

package/colors/Picker.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 a=require("react"),r=require("@progress/kendo-react-popup"),u=require("@progress/kendo-react-common");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=s(a),m="bottom",d="top",i=e=>{const n=e.popupSettings||{},t=e.dir==="rtl"?"right":"left",c=o.useMemo(()=>({horizontal:t,vertical:m}),[t]),l=o.useMemo(()=>({horizontal:t,vertical:d}),[t]);return o.createElement(o.Fragment,null,e.input,e.button,!e._mobileMode&&o.createElement(r.Popup,{style:{...(n||{}).style,direction:e.dir},...n,anchor:e.popupAnchor,anchorAlign:c,popupAlign:l,show:e.open,onOpen:e.onOpen,onClose:e.onClose,className:u.classNames(n.className),popupClass:"k-colorpicker-popup"},e.content),e._mobileMode&&e._actionSheet)};i.displayName="KendoPickerComponent";exports.Picker=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),i=require("@progress/kendo-react-popup"),u=require("@progress/kendo-react-common");function s(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const c=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const o=s(a),p="bottom",m="top",r=e=>{const n=e.popupSettings||{},t=e.dir==="rtl"?"right":"left",c=o.useMemo(()=>({horizontal:t,vertical:p}),[t]),l=o.useMemo(()=>({horizontal:t,vertical:m}),[t]);return o.createElement(o.Fragment,null,e.input,e.button,o.createElement(i.Popup,{style:{...(n||{}).style,direction:e.dir},...n,anchor:e.popupAnchor,anchorAlign:c,popupAlign:l,show:e.open,onOpen:e.onOpen,onClose:e.onClose,className:u.classNames(n.className),popupClass:"k-color-picker-popup"},e.content))};r.displayName="KendoPickerComponent";exports.Picker=r;

package/colors/Picker.mjs

@@ -5,38 +5,39 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as o from "react";
-import { Popup as c } from "@progress/kendo-react-popup";
+import { Popup as i } from "@progress/kendo-react-popup";
 import { classNames as a } from "@progress/kendo-react-common";
-const m = "bottom", r = "top", s = (e) => {
-  const n = e.popupSettings || {}, t = e.dir === "rtl" ? "right" : "left", i = o.useMemo(
-    () => ({ horizontal: t, vertical: m }),
-    [t]
+const r = "bottom", s = "top", m = (t) => {
+  const n = t.popupSettings || {}, e = t.dir === "rtl" ? "right" : "left", c = o.useMemo(
+    () => ({ horizontal: e, vertical: r }),
+    [e]
   ), l = o.useMemo(
-    () => ({ horizontal: t, vertical: r }),
-    [t]
+    () => ({ horizontal: e, vertical: s }),
+    [e]
   );
-  return /* @__PURE__ */ o.createElement(o.Fragment, null, e.input, e.button, !e._mobileMode && /* @__PURE__ */ o.createElement(
-    c,
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, t.input, t.button, /* @__PURE__ */ o.createElement(
+    i,
     {
       style: {
         ...(n || {}).style,
-        direction: e.dir
+        direction: t.dir
       },
       ...n,
-      anchor: e.popupAnchor,
-      anchorAlign: i,
+      anchor: t.popupAnchor,
+      anchorAlign: c,
       popupAlign: l,
-      show: e.open,
-      onOpen: e.onOpen,
-      onClose: e.onClose,
+      show: t.open,
+      onOpen: t.onOpen,
+      onClose: t.onClose,
       className: a(n.className),
-      popupClass: "k-colorpicker-popup"
+      popupClass: "k-color-picker-popup"
     },
-    e.content
-  ), e._mobileMode && e._actionSheet);
+    t.content
+  ));
 };
-s.displayName = "KendoPickerComponent";
+m.displayName = "KendoPickerComponent";
 export {
-  s as Picker
+  m as Picker
 };