@progress/kendo-react-inputs 9.4.0-develop.18 → 9.4.0-develop.2

package/colors/FlatColorPicker.mjs

@@ -5,142 +5,127 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+"use client";
 import * as e from "react";
-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;
+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(() => {
-    C(a.value);
+    s(a.value);
   }, [a.value]);
-  const m = se(), x = e.useCallback(() => {
-    h.current && h.current.focus();
-  }, [h]);
+  const g = ae(), y = e.useCallback(() => {
+    v.current && v.current.focus();
+  }, [v]);
   e.useImperativeHandle(
-    h,
+    v,
     () => ({
-      element: y.current,
-      focus: x,
+      element: C.current,
+      focus: y,
       props: a,
-      value: B
+      value: f
     }),
-    [B, x, a]
-  ), e.useImperativeHandle(D, () => h.current);
-  const R = e.useCallback(
+    [f, y, a]
+  ), e.useImperativeHandle(x, () => v.current);
+  const w = e.useCallback(
     (t) => {
-      (t === "ColorGradient" && !v || t === "ColorPalette" && v) && $(!v);
+      (t === "ColorGradient" && !c || t === "ColorPalette" && c) && T(!c);
     },
-    [v]
-  ), I = e.useCallback(
+    [c]
+  ), _ = e.useCallback(
     (t) => {
-      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,
+      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
         };
-        a.onPreviewChange.call(void 0, r);
+        a.onPreviewChange.call(void 0, n);
       }
     },
-    [u, a.onPreviewChange]
-  ), z = e.useCallback(
+    [r, a.onPreviewChange]
+  ), P = e.useCallback(
     (t) => {
-      if (C(t.value), a.onPreviewChange) {
-        const r = {
+      if (s(t.value), a.onPreviewChange) {
+        const n = {
           value: t.value,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t.syntheticEvent
         };
-        a.onPreviewChange.call(void 0, r);
+        a.onPreviewChange.call(void 0, n);
       }
     },
     [a.onPreviewChange]
-  ), J = e.useCallback(
+  ), M = e.useCallback(
     (t) => {
-      if (n !== void 0 && N(n), a.onChange) {
-        const r = {
-          value: n,
+      if (l !== void 0 && b(l), a.onChange) {
+        const n = {
+          value: l,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onChange.call(void 0, r);
+        a.onChange.call(void 0, n);
       }
     },
-    [n, a.onChange]
-  ), Q = e.useCallback(() => {
-    C(g);
-  }, [g]), U = e.useCallback(
+    [l, a.onChange]
+  ), K = e.useCallback(() => {
+    s(i);
+  }, [i]), z = e.useCallback(
     (t) => {
-      if (C(g), a.onPreviewChange) {
-        const r = {
-          value: g,
+      if (s(i), a.onPreviewChange) {
+        const n = {
+          value: i,
           nativeEvent: t.nativeEvent,
           syntheticEvent: t
         };
-        a.onPreviewChange.call(void 0, r);
+        a.onPreviewChange.call(void 0, n);
       }
     },
-    [g, a.onPreviewChange]
-  ), W = e.useCallback(
+    [i, a.onPreviewChange]
+  ), A = e.useCallback(
     (t) => {
-      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,
+      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
         };
-        a.onChange.call(void 0, Y);
+        a.onChange.call(void 0, H);
       }
     },
-    [n, w, a.onChange]
-  ), F = e.useMemo(
-    () => new p({
-      root: y,
+    [l, k, a.onChange]
+  ), N = e.useMemo(
+    () => new j({
+      root: C,
       selectors: [".k-coloreditor"],
       tabIndex: 0,
       keyboardEvents: {
         keydown: {
-          Tab: (t, r, k) => {
-            S(document) === t ? K(t) : ee(k, t);
+          Tab: (t, n, d) => {
+            h(document) === t ? B(t) : J(d, t);
           },
-          Enter: (t, r, k) => {
-            S(document) === t && (ae(t), te(t));
+          Enter: (t, n, d) => {
+            h(document) === t && (O(t), Q(t));
           },
-          Escape: (t, r, k) => {
-            S(document) !== t && (t.focus(), K(t));
+          Escape: (t, n, d) => {
+            h(document) !== t && (t.focus(), B(t));
           }
         }
       }
     }),
     []
-  ), X = e.useCallback(F.triggerKeyboardEvent.bind(F), []);
+  ), D = e.useCallback(N.triggerKeyboardEvent.bind(N), []);
   return /* @__PURE__ */ e.createElement(
     "div",
     {
@@ -150,214 +135,144 @@ const A = e.forwardRef((a, D) => {
       "aria-labelledby": a.ariaLabelledBy,
       "aria-disabled": a.disabled ? "true" : void 0,
       style: a.style,
-      ref: y,
-      tabIndex: le(a.tabIndex, a.disabled),
-      className: L(
+      ref: C,
+      tabIndex: U(a.tabIndex, a.disabled),
+      className: E(
         "k-flatcolorpicker k-coloreditor",
         {
-          [`k-coloreditor-${oe.sizeMap[o] || o}`]: o,
           "k-disabled": a.disabled
         },
         a.className
       ),
-      onBlur: W,
-      onKeyDown: X
+      onBlur: A,
+      onKeyDown: D
     },
-    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": m.toLanguageString(
-          b,
-          d[b]
-        ),
-        togglable: !0,
-        fillMode: "flat",
-        size: o,
-        svgIcon: M,
-        selected: c,
-        onClick: () => I("gradient")
-      }
-    ), /* @__PURE__ */ e.createElement(
-      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": m.toLanguageString(
-          f,
-          d[f]
-        ),
-        togglable: !0,
-        fillMode: "flat",
-        size: o,
-        svgIcon: V,
-        selected: !c,
-        onClick: () => I("palette")
-      }
-    ), /* @__PURE__ */ e.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(
-          b,
-          d[b]
+        "aria-label": g.toLanguageString(
+          I,
+          m[I]
         ),
         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"),
+        onClick: () => w("ColorGradient"),
         icon: "droplet-slider",
-        svgIcon: M
+        svgIcon: X
       }
     ), /* @__PURE__ */ e.createElement(
-      s,
+      u,
       {
         type: "button",
-        "aria-label": m.toLanguageString(
-          f,
-          d[f]
+        "aria-label": g.toLanguageString(
+          G,
+          m[G]
         ),
         togglable: !0,
         fillMode: "flat",
-        size: o,
-        selected: !v,
-        onClick: () => R("ColorPalette"),
+        selected: !c,
+        onClick: () => w("ColorPalette"),
         icon: "palette",
-        svgIcon: V
+        svgIcon: Y
       }
-    ))), /* @__PURE__ */ e.createElement("div", { className: "k-spacer" }), /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-header-actions k-hstack" }, O && /* @__PURE__ */ e.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,
-          d[T]
+        onClick: _,
+        "aria-label": g.toLanguageString(
+          L,
+          m[L]
         ),
         icon: "droplet-slash",
-        svgIcon: ne
+        svgIcon: Z
       }
-    ), q && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement(
+    ), V && /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-preview k-vstack" }, /* @__PURE__ */ e.createElement(
       "span",
       {
-        className: L("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__ */ e.createElement(
         "span",
         {
           className: "k-color-preview-mask",
-          style: { background: n || void 0 }
+          style: { background: l || void 0 }
         }
       )
     ), /* @__PURE__ */ e.createElement(
       "span",
       {
-        className: L("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: U
+        onClick: z
       },
       /* @__PURE__ */ e.createElement(
         "span",
         {
           className: "k-color-preview-mask",
-          style: { background: g || void 0 }
+          style: { background: i || void 0 }
         }
       )
     )))),
-    /* @__PURE__ */ e.createElement("div", { className: "k-coloreditor-views k-vstack" }, (E && v || i && c) && /* @__PURE__ */ e.createElement(
-      re,
+    /* @__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: n,
-        onChange: z,
+        value: l,
+        onChange: P,
         opacity: a.opacity,
-        format: a.format,
-        size: o,
-        _adaptive: a._gradientSettings ? a._gradientSettings._adaptive : void 0
+        format: a.format
       }
-    ), (E && !v || i && !c) && /* @__PURE__ */ e.createElement(
-      ie,
+    ) : /* @__PURE__ */ e.createElement(
+      $,
       {
         ariaDisabled: !0,
         ariaLabelledBy: "required_label",
-        value: n,
-        onChange: z,
-        size: o
+        value: l,
+        onChange: P
       }
     )),
-    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,
+    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: J
+        onClick: M
       },
-      d[ue]
+      m[oe]
     ))
   );
-}), 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"])
+}), 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
 };
-A.displayName = "KendoFlatColorPicker";
-A.propTypes = ve;
+S.displayName = "KendoFlatColorPicker";
+S.propTypes = le;
 export {
-  A 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 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;
+"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
  *-------------------------------------------------------------------------------------------
  */
-import * as e from "react";
-import { Popup as l } from "@progress/kendo-react-popup";
+"use client";
+import * as o from "react";
+import { Popup as i } from "@progress/kendo-react-popup";
 import { classNames as a } from "@progress/kendo-react-common";
-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]
+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]
   );
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, o.input, o.button, !o._mobileMode && /* @__PURE__ */ e.createElement(
-    l,
+  return /* @__PURE__ */ o.createElement(o.Fragment, null, t.input, t.button, /* @__PURE__ */ o.createElement(
+    i,
     {
       style: {
         ...(n || {}).style,
-        direction: o.dir
+        direction: t.dir
       },
       ...n,
-      anchor: o.popupAnchor,
+      anchor: t.popupAnchor,
       anchorAlign: c,
-      popupAlign: i,
-      show: o.open,
-      onOpen: o.onOpen,
-      onClose: o.onClose,
+      popupAlign: l,
+      show: t.open,
+      onOpen: t.onOpen,
+      onClose: t.onClose,
       className: a(n.className),
-      popupClass: "k-colorpicker-popup k-color-picker-popup"
+      popupClass: "k-color-picker-popup"
     },
-    o.content
-  ), o._mobileMode && o._actionSheet);
+    t.content
+  ));
 };
-s.displayName = "KendoPickerComponent";
+m.displayName = "KendoPickerComponent";
 export {
-  s as Picker
+  m as Picker
 };