@progress/kendo-react-inputs 9.4.0-develop.1 → 9.4.0-develop.11

package/colors/FlatColorPicker.mjs

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

package/colors/HexInput.mjs

@@ -5,18 +5,17 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";
 import * as i from "react";
-import { parseColor as a } from "./utils/color-parser.mjs";
-import { isPresent as o } from "./utils/misc.mjs";
+import { parseColor as o } from "./utils/color-parser.mjs";
+import { isPresent as a } from "./utils/misc.mjs";
 import { TextBox as h } from "../textbox/Textbox.mjs";
-class p extends i.Component {
+class u extends i.Component {
   constructor(e) {
     super(e), this.onChange = (t) => {
-      const s = t.target.value, r = a(s, "rgba");
-      this.setState({ hex: s }), o(r) && this.props.onHexChange(s, r, t);
+      const s = t.target.value, r = o(s, "rgba");
+      this.setState({ hex: s }), a(r) && this.props.onHexChange(s, r, t);
     }, this.onBlur = () => {
-      o(a(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
+      a(o(this.state.hex, "rgba")) || this.setState({ hex: this.state.originalHex });
     }, this.state = { hex: this.props.hex, originalHex: this.props.hex };
   }
   render() {
@@ -27,7 +26,9 @@ class p extends i.Component {
         onChange: this.onChange,
         onBlur: this.onBlur,
         disabled: this.props.disabled,
-        className: "k-hex-value"
+        className: "k-hex-value",
+        size: this.props.size,
+        fillMode: this.props.fillMode
       }
     );
   }
@@ -36,5 +37,5 @@ class p extends i.Component {
   }
 }
 export {
-  p as default
+  u 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 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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),a=require("@progress/kendo-react-popup"),u=require("@progress/kendo-react-common");function s(e){const o=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(o,t,c.get?c:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const n=s(r),m="bottom",p="top",i=e=>{const o=e.popupSettings||{},t=e.dir==="rtl"?"right":"left",c=n.useMemo(()=>({horizontal:t,vertical:m}),[t]),l=n.useMemo(()=>({horizontal:t,vertical:p}),[t]);return n.createElement(n.Fragment,null,e.input,e.button,!e._mobileMode&&n.createElement(a.Popup,{style:{...(o||{}).style,direction:e.dir},...o,anchor:e.popupAnchor,anchorAlign:c,popupAlign:l,show:e.open,onOpen:e.onOpen,onClose:e.onClose,className:u.classNames(o.className),popupClass:"k-colorpicker-popup k-color-picker-popup"},e.content),e._mobileMode&&e._actionSheet)};i.displayName="KendoPickerComponent";exports.Picker=i;

package/colors/Picker.mjs

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