@progress/kendo-react-form 11.4.0-develop.3 → 11.4.0-develop.4

package/FieldWrapper.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 o=require("react"),a=require("@progress/kendo-react-common");function i(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(l,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return l.default=e,Object.freeze(l)}const c=i(o),s=e=>{const l=a.useUnstyled(),t=e.unstyled||l,n=t&&t.uForm,r=c.useMemo(()=>a.classNames(a.uForm.field({c:n,isRtl:e.dir==="rtl"}),e.className),[n,e.className,e.dir]);return c.createElement("div",{className:r,style:e.style},e.children)};s.displayName="KendoReactFieldWrapper";exports.FieldWrapper=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),d=require("@progress/kendo-react-common"),f=require("./utils.js");function F(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,o.get?o:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const t=F(R),S=e=>{const{className:n,style:s,dir:o,colSpan:i,children:w}=e,a=t.useRef(null),C=d.useUnstyled(),p=e.unstyled||C,m=p&&p.uForm,[b,y]=t.useState(void 0),l=t.useRef(null);t.useEffect(()=>{a.current&&(l.current=a.current.closest("form"))},[]),t.useEffect(()=>{let c;const r=l==null?void 0:l.current,v=()=>{let u=0;if(r?u=f.innerWidth(r):typeof window!="undefined"&&(u=window.innerWidth),i!==void 0){const O=f.calculateColSpan(i,u);y(f.generateColSpanClass(O))}else y(void 0)};return v(),r&&typeof window!="undefined"&&"ResizeObserver"in window&&(c=new ResizeObserver(v),c.observe(r)),()=>{c&&r&&c.unobserve(r)}},[i]);const g=t.useMemo(()=>d.classNames(d.uForm.field({c:m,isRtl:o==="rtl"}),b,n),[m,n,o,b]);return t.createElement("div",{ref:a,className:g,style:s},w)};S.displayName="KendoReactFieldWrapper";exports.FieldWrapper=S;

package/FieldWrapper.mjs

@@ -5,22 +5,41 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
-import { useUnstyled as d, classNames as m, uForm as i } from "@progress/kendo-react-common";
-const n = (e) => {
-  const a = d(), s = e.unstyled || a, l = s && s.uForm, c = t.useMemo(
-    () => m(
-      i.field({
-        c: l,
-        isRtl: e.dir === "rtl"
+import * as e from "react";
+import { useUnstyled as R, classNames as b, uForm as F } from "@progress/kendo-react-common";
+import { innerWidth as N, calculateColSpan as W, generateColSpanClass as h } from "./utils.mjs";
+const E = (i) => {
+  const { className: a, style: v, dir: c, colSpan: l, children: w } = i, o = e.useRef(null), C = R(), d = i.unstyled || C, u = d && d.uForm, [f, m] = e.useState(void 0), n = e.useRef(null);
+  e.useEffect(() => {
+    o.current && (n.current = o.current.closest("form"));
+  }, []), e.useEffect(() => {
+    let t;
+    const s = n == null ? void 0 : n.current, p = () => {
+      let r = 0;
+      if (s ? r = N(s) : typeof window != "undefined" && (r = window.innerWidth), l !== void 0) {
+        const S = W(l, r);
+        m(h(S));
+      } else
+        m(void 0);
+    };
+    return p(), s && typeof window != "undefined" && "ResizeObserver" in window && (t = new ResizeObserver(p), t.observe(s)), () => {
+      t && s && t.unobserve(s);
+    };
+  }, [l]);
+  const y = e.useMemo(
+    () => b(
+      F.field({
+        c: u,
+        isRtl: c === "rtl"
       }),
-      e.className
+      f,
+      a
     ),
-    [l, e.className, e.dir]
+    [u, a, c, f]
   );
-  return /* @__PURE__ */ t.createElement("div", { className: c, style: e.style }, e.children);
+  return /* @__PURE__ */ e.createElement("div", { ref: o, className: y, style: v }, w);
 };
-n.displayName = "KendoReactFieldWrapper";
+E.displayName = "KendoReactFieldWrapper";
 export {
-  n as FieldWrapper
+  E as FieldWrapper
 };

package/FormElement.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 p=require("react"),l=require("@progress/kendo-react-common"),v=require("./FormContext.js");function F(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const t=F(p),b=t.forwardRef((e,o)=>{const n={size:"medium",...e},r=t.useRef(null),a=t.useRef(null);t.useImperativeHandle(a,()=>({element:r.current,props:n})),t.useImperativeHandle(o,()=>a.current);const s=t.useContext(v.FormContext),{className:m,style:R,horizontal:c,size:u,...y}=n,i=l.useUnstyled(),d=i&&i.uForm,f=t.useMemo(()=>{if(c)return"horizontal";if(c===!1)return"vertical"},[c]),g=t.useMemo(()=>l.classNames(l.uForm.form({c:d,size:u,orientation:f}),m),[m,d,f,u]);return t.createElement("form",{ref:r,...y,id:e.id||(s?s.id:void 0),style:e.style,className:g,onSubmit:s?s.onSubmit:void 0},e.children)});b.displayName="KendoReactFormElement";exports.FormElement=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),u=require("@progress/kendo-react-common"),_=require("./FormContext.js"),s=require("./utils.js");function M(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(o,r,n.get?n:{enumerable:!0,get:()=>t[r]})}}return o.default=t,Object.freeze(o)}const e=M(G),a={rows:"0px",cols:"32px"},N=e.forwardRef((t,o)=>{const r={size:"medium",...t},n=e.useRef(null),S=e.useRef(null);e.useImperativeHandle(S,()=>({element:n.current,props:r})),e.useImperativeHandle(o,()=>S.current);const c=e.useContext(_.FormContext),{className:F,style:j,horizontal:g,size:R,cols:l,gutters:i=a,...O}=r,p=u.useUnstyled(),v=p&&p.uForm,[h,w]=e.useState(void 0),[T,b]=e.useState(void 0),C=e.useMemo(()=>{if(g)return"horizontal";if(g===!1)return"vertical"},[g]),z=e.useMemo(()=>u.classNames(u.uForm.form({c:v,size:R,orientation:C}),F),[F,v,C,R]);return e.useEffect(()=>{if(!l&&!i){w(void 0);return}if(!i){b(void 0);return}const E=()=>{let f=0;if(n.current?f=s.innerWidth(n.current):typeof window!="undefined"&&(f=window.innerWidth),l){const y=s.calculateColumns(l,f);w(s.generateColumnClass(y))}if(i){const y=s.calculateGutters(i,f);b(y?{gap:s.generateGuttersStyling(y,a)}:{gap:s.generateGuttersStyling(a,a)})}};E();let m;const d=n.current;return d&&typeof window!="undefined"&&"ResizeObserver"in window&&(m=new ResizeObserver(E),m.observe(d)),()=>{m&&d&&m.unobserve(d)}},[l,i]),e.createElement("form",{ref:n,...O,id:t.id||(c?c.id:void 0),style:t.style,className:z,onSubmit:c?c.onSubmit:void 0},l?e.createElement("div",{className:u.classNames(u.uForm.formLayout({c:v}),h),style:T},t.children):t.children)});N.displayName="KendoReactFormElement";exports.DEFAULT_FORM_GUTTERS=a;exports.FormElement=N;

package/FormElement.mjs

@@ -6,44 +6,87 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as e from "react";
-import { useUnstyled as v, classNames as F, uForm as N } from "@progress/kendo-react-common";
-import { FormContext as R } from "./FormContext.mjs";
-const h = e.forwardRef((t, f) => {
-  const s = {
+import { useUnstyled as L, classNames as g, uForm as h } from "@progress/kendo-react-common";
+import { FormContext as M } from "./FormContext.mjs";
+import { innerWidth as O, calculateColumns as T, generateColumnClass as U, calculateGutters as W, generateGuttersStyling as E } from "./utils.mjs";
+const m = {
+  rows: "0px",
+  cols: "32px"
+}, A = e.forwardRef((t, F) => {
+  const y = {
     size: "medium",
     ...t
-  }, n = e.useRef(null), m = e.useRef(null);
-  e.useImperativeHandle(m, () => ({ element: n.current, props: s })), e.useImperativeHandle(f, () => m.current);
-  const o = e.useContext(R), { className: l, style: p, horizontal: r, size: a, ...d } = s, i = v(), c = i && i.uForm, u = e.useMemo(() => {
-    if (r)
+  }, s = e.useRef(null), v = e.useRef(null);
+  e.useImperativeHandle(v, () => ({ element: s.current, props: y })), e.useImperativeHandle(F, () => v.current);
+  const n = e.useContext(M), { className: w, style: H, horizontal: c, size: p, cols: r, gutters: o = m, ...N } = y, C = L(), d = C && C.uForm, [z, R] = e.useState(void 0), [x, f] = e.useState(void 0), S = e.useMemo(() => {
+    if (c)
       return "horizontal";
-    if (r === !1)
+    if (c === !1)
       return "vertical";
-  }, [r]), y = e.useMemo(
-    () => F(
-      N.form({
-        c,
-        size: a,
-        orientation: u
+  }, [c]), G = e.useMemo(
+    () => g(
+      h.form({
+        c: d,
+        size: p,
+        orientation: S
       }),
-      l
+      w
     ),
-    [l, c, u, a]
+    [w, d, S, p]
   );
-  return /* @__PURE__ */ e.createElement(
+  return e.useEffect(() => {
+    if (!r && !o) {
+      R(void 0);
+      return;
+    }
+    if (!o) {
+      f(void 0);
+      return;
+    }
+    const b = () => {
+      let a = 0;
+      if (s.current ? a = O(s.current) : typeof window != "undefined" && (a = window.innerWidth), r) {
+        const u = T(r, a);
+        R(U(u));
+      }
+      if (o) {
+        const u = W(o, a);
+        f(u ? { gap: E(u, m) } : { gap: E(m, m) });
+      }
+    };
+    b();
+    let i;
+    const l = s.current;
+    return l && typeof window != "undefined" && "ResizeObserver" in window && (i = new ResizeObserver(b), i.observe(l)), () => {
+      i && l && i.unobserve(l);
+    };
+  }, [r, o]), /* @__PURE__ */ e.createElement(
     "form",
     {
-      ref: n,
-      ...d,
-      id: t.id || (o ? o.id : void 0),
+      ref: s,
+      ...N,
+      id: t.id || (n ? n.id : void 0),
       style: t.style,
-      className: y,
-      onSubmit: o ? o.onSubmit : void 0
+      className: G,
+      onSubmit: n ? n.onSubmit : void 0
     },
-    t.children
+    r ? /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        className: g(
+          h.formLayout({
+            c: d
+          }),
+          z
+        ),
+        style: x
+      },
+      t.children
+    ) : t.children
   );
 });
-h.displayName = "KendoReactFormElement";
+A.displayName = "KendoReactFormElement";
 export {
-  h as FormElement
+  m as DEFAULT_FORM_GUTTERS,
+  A as FormElement
 };

package/FormFieldSet.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),l=require("@progress/kendo-react-common"),n=require("./utils.js");function M(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const c=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,c.get?c:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const e=M(j),i={rows:"0px",cols:"16px"},T=e.forwardRef((t,a)=>{const s=e.useRef(null),c=e.useRef(null);e.useImperativeHandle(c,()=>({element:s.current,props:t})),e.useImperativeHandle(a,()=>c.current);const{className:C,style:U,cols:d,colSpan:y,gutters:m=i,legend:F,...O}=t,p=l.useUnstyled(),o=p&&p.uForm,[E,b]=e.useState(void 0),[w,N]=e.useState(void 0),[G,v]=e.useState(void 0),L=e.useMemo(()=>l.classNames(l.uForm.fieldset({c:o}),w,C),[C,o,w]),_=e.useMemo(()=>l.classNames(l.uForm.formLayout({c:o}),E),[o,E]),h=e.useMemo(()=>l.classNames(l.uForm.legend({c:o})),[o]),f=e.useRef(null);return e.useEffect(()=>{s.current&&(f.current=s.current.closest("form"))},[]),e.useEffect(()=>{if(!d){b(void 0);return}if(!m){v(void 0);return}const r=f==null?void 0:f.current,R=()=>{let u=0;r?u=n.innerWidth(r):typeof window!="undefined"&&(u=window.innerWidth);const D=n.calculateColumns(d,u);if(b(n.generateColumnClass(D)),y!==void 0){const g=n.calculateColSpan(y,u);N(n.generateColSpanClass(g))}else N(void 0);if(m){const g=n.calculateGutters(m,u);v(g?{gap:n.generateGuttersStyling(g,i)}:{gap:n.generateGuttersStyling(i,i)})}};R();let S;return r&&typeof window!="undefined"&&"ResizeObserver"in window&&(S=new ResizeObserver(R),S.observe(r)),()=>{S&&r&&S.unobserve(r)}},[d,y,m]),e.createElement("fieldset",{ref:s,...O,style:t.style,className:L},F&&e.createElement("legend",{className:h},F),d?e.createElement("div",{className:_,style:G},t.children):t.children)});T.displayName="KendoReactFormFieldSet";exports.DEFAULT_FIELDSET_GUTTERS=i;exports.FormFieldSet=T;

package/FormFieldSet.mjs

@@ -0,0 +1,78 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as e from "react";
+import { useUnstyled as U, classNames as S, uForm as C } from "@progress/kendo-react-common";
+import { innerWidth as W, calculateColumns as z, generateColumnClass as A, calculateColSpan as D, generateColSpanClass as H, calculateGutters as O, generateGuttersStyling as h } from "./utils.mjs";
+const d = {
+  rows: "0px",
+  cols: "16px"
+}, _ = e.forwardRef((l, b) => {
+  const o = e.useRef(null), v = e.useRef(null);
+  e.useImperativeHandle(v, () => ({ element: o.current, props: l })), e.useImperativeHandle(b, () => v.current);
+  const { className: y, style: K, cols: a, colSpan: m, gutters: r = d, legend: g, ...G } = l, p = U(), t = p && p.uForm, [w, E] = e.useState(void 0), [F, N] = e.useState(void 0), [L, f] = e.useState(void 0), T = e.useMemo(
+    () => S(
+      C.fieldset({
+        c: t
+      }),
+      F,
+      y
+    ),
+    [y, t, F]
+  ), x = e.useMemo(
+    () => S(
+      C.formLayout({
+        c: t
+      }),
+      w
+    ),
+    [t, w]
+  ), I = e.useMemo(
+    () => S(
+      C.legend({
+        c: t
+      })
+    ),
+    [t]
+  ), c = e.useRef(null);
+  return e.useEffect(() => {
+    o.current && (c.current = o.current.closest("form"));
+  }, []), e.useEffect(() => {
+    if (!a) {
+      E(void 0);
+      return;
+    }
+    if (!r) {
+      f(void 0);
+      return;
+    }
+    const s = c == null ? void 0 : c.current, R = () => {
+      let n = 0;
+      s ? n = W(s) : typeof window != "undefined" && (n = window.innerWidth);
+      const M = z(a, n);
+      if (E(A(M)), m !== void 0) {
+        const u = D(m, n);
+        N(H(u));
+      } else
+        N(void 0);
+      if (r) {
+        const u = O(r, n);
+        f(u ? { gap: h(u, d) } : { gap: h(d, d) });
+      }
+    };
+    R();
+    let i;
+    return s && typeof window != "undefined" && "ResizeObserver" in window && (i = new ResizeObserver(R), i.observe(s)), () => {
+      i && s && i.unobserve(s);
+    };
+  }, [a, m, r]), /* @__PURE__ */ e.createElement("fieldset", { ref: o, ...G, style: l.style, className: T }, g && /* @__PURE__ */ e.createElement("legend", { className: I }, g), a ? /* @__PURE__ */ e.createElement("div", { className: x, style: L }, l.children) : l.children);
+});
+_.displayName = "KendoReactFormFieldSet";
+export {
+  d as DEFAULT_FIELDSET_GUTTERS,
+  _ as FormFieldSet
+};

package/FormSeparator.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),u=require("@progress/kendo-react-common"),i=require("./utils.js");function O(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(s,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return s.default=t,Object.freeze(s)}const e=O(g),v=e.forwardRef((t,s)=>{const r=e.useRef(null),o=e.useRef(null);e.useImperativeHandle(o,()=>({element:r.current,props:t})),e.useImperativeHandle(s,()=>o.current);const{className:f,style:N,colSpan:c,...w}=t,d=u.useUnstyled(),m=d&&d.uForm,[p,S]=e.useState(void 0),b=e.useRef(null);e.useEffect(()=>{r.current&&(b.current=r.current.closest("form"))},[]),e.useEffect(()=>{let a;const n=b.current,y=()=>{let l=0;if(n?l=i.innerWidth(n):typeof window!="undefined"&&(l=window.innerWidth),c!==void 0){const C=i.calculateColSpan(c,l);S(i.generateColSpanClass(C))}else S(void 0)};return y(),n&&typeof window!="undefined"&&"ResizeObserver"in window&&(a=new ResizeObserver(y),a.observe(n)),()=>{a&&n&&a.unobserve(n)}},[c]);const R=e.useMemo(()=>u.classNames(u.uForm.separator({c:m}),p,f),[f,m,p]);return e.createElement("span",{ref:r,...w,style:t.style,className:R})});v.displayName="KendoReactFormSeparator";exports.FormSeparator=v;

package/FormSeparator.mjs

@@ -0,0 +1,46 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as e from "react";
+import { useUnstyled as R, classNames as y, uForm as b } from "@progress/kendo-react-common";
+import { innerWidth as N, calculateColSpan as h, generateColSpanClass as E } from "./utils.mjs";
+const F = e.forwardRef((n, S) => {
+  const t = e.useRef(null), l = e.useRef(null);
+  e.useImperativeHandle(l, () => ({ element: t.current, props: n })), e.useImperativeHandle(S, () => l.current);
+  const { className: c, style: W, colSpan: o, ...v } = n, i = R(), u = i && i.uForm, [f, m] = e.useState(void 0), d = e.useRef(null);
+  e.useEffect(() => {
+    t.current && (d.current = t.current.closest("form"));
+  }, []), e.useEffect(() => {
+    let r;
+    const s = d.current, p = () => {
+      let a = 0;
+      if (s ? a = N(s) : typeof window != "undefined" && (a = window.innerWidth), o !== void 0) {
+        const C = h(o, a);
+        m(E(C));
+      } else
+        m(void 0);
+    };
+    return p(), s && typeof window != "undefined" && "ResizeObserver" in window && (r = new ResizeObserver(p), r.observe(s)), () => {
+      r && s && r.unobserve(s);
+    };
+  }, [o]);
+  const w = e.useMemo(
+    () => y(
+      b.separator({
+        c: u
+      }),
+      f,
+      c
+    ),
+    [c, u, f]
+  );
+  return /* @__PURE__ */ e.createElement("span", { ref: t, ...v, style: n.style, className: w });
+});
+F.displayName = "KendoReactFormSeparator";
+export {
+  F as FormSeparator
+};

package/dist/cdn/js/kendo-react-form.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactForm={},e.React,e.PropTypes,e.KendoReactCommon)}(this,(function(e,t,i,s){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:function(){return e[i]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),a=e=>{const{name:t,component:i,validator:s,children:o,onChange:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>{const i=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);l.onChange(t,{value:i}),a&&a.call(void 0,e)}),[t,h,a]),c=r.useCallback((e=>l.onChange(t,{value:e.target.value})),[t,h]),m=r.useCallback((()=>l.onBlur(t)),[t,h]),v=r.useCallback((()=>l.onFocus(t)),[t,h]);if(!l)return null;const p=l.valueGetter(t);return"string"==typeof i?r.createElement(i,{onChange:c,onBlur:m,onFocus:v,value:p,children:o,...d}):r.createElement(i,{children:o,...d,onChange:u,onBlur:m,onFocus:v,value:p,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),name:t})};a.displayName="KendoReactField";const d={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"11.4.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},l=class extends r.Component{constructor(e){super(e),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._values={},this._fields={},this._unmounted=!1,this._submitted=!1,this.showLicenseWatermark=!1,this.isValid=()=>this.isFormValid(this.errors),this.accumulatedForceUpdate=()=>{this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),this._accumulatorTimeout=window.setTimeout((()=>{this._accumulatorTimeout=void 0,this.forceUpdate()}),0)},this.resetForm=()=>{this.values=s.clone(this.props.initialValues),this._key=s.guid(),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._fields={},this._submitted=!1,this.forceUpdate()},this.onReset=()=>this.resetForm(),this.addField=e=>{this._fields[e]=!0},this.onSubmit=e=>{const t={},i=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),i.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const s=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,i);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:s,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,s,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:i}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,i),this.forceUpdate()},this.onFocus=(e,t)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},t||this.forceUpdate())},this.onBlur=(e,t)=>{this.touched[e]||(this.onFocus(e,t),this.touched={...this.touched,[e]:!0},t||this.forceUpdate())},this.onFieldRegister=(e,t)=>{this.addField(e);const i=this.validatorsByField[e]||[],s=i.length;return this.validatorsByField={...this.validatorsByField,[e]:[...i,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],i=!!t[s];t[s]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},i&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some((t=>!!e[t])),this.isFormModified=(e,t)=>t.some((t=>e[t])),this.isFormHasNotTouched=(e,t)=>t.some((t=>!e[t])),this.isFormTouched=(e,t)=>t.some((t=>e[t])),this.isFormVisited=(e,t)=>t.some((t=>e[t])),this.valueGetter=e=>s.getter(e)(this.values),this.valueSetter=(e,t)=>s.setter(e)(this.values,t),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,0,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,i),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],i=t.pop();return this.valueSetter(e,t),this.forceUpdate(),i},this.onRemove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i.splice(t.index,1);return this.valueSetter(e,i),this.forceUpdate(),s},this.onReplace=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]];i.splice(t.index,1,t.value),this.valueSetter(e,i),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const i=[...this.valueGetter(e)||[]],s=i[t.prevIndex];i.splice(t.prevIndex,1),i.splice(t.nextIndex,0,s),this.valueSetter(e,i),this.forceUpdate()},this.showLicenseWatermark=!s.validatePackage(d,{component:"Form"}),this.values=s.clone(e.initialValues)}get touched(){return this._touched}set touched(e){this._touched=e}get visited(){return this._visited}set visited(e){this._visited=e}get modified(){return this._modified}set modified(e){this._modified=e}get validatorsByField(){return this._validatorsByField}set validatorsByField(e){this._validatorsByField=e}get values(){return this._values}set values(e){this._values=e}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const e={},t=this.fields,i=this.validatorsByField;return t.forEach((t=>{if(e[t]="",i[t]){const s=[];i[t].forEach((e=>{Array.isArray(e)?s.push(...e):s.push(e)})),s.find((i=>{if(i){const s=i(this.valueGetter(t),this.valueGetter,{name:t});if(s)return e[t]=s,!0}return!1}))}})),this.formErrors&&s.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,i=this.visited,o=this.modified,a=this.fields,d=this.errors,l=this.isFormValid(d),h=this.isFormModified(o,a),u=this.isFormTouched(t,a),c=this.isFormVisited(i,a),m=this.isFormHasNotTouched(t,a)&&!l||l&&(this.props.ignoreModified||h);return r.createElement(r.Fragment,null,r.createElement(n.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:d,modified:o,touched:t,visited:i,registerField:this.onFieldRegister,onSubmit:this.onSubmit,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onUnshift:this.onUnshift,onPush:this.onPush,onInsert:this.onInsert,onPop:this.onPop,onRemove:this.onRemove,onReplace:this.onReplace,onMove:this.onMove}},e({valid:l,modified:h,touched:u,visited:c,submitted:this._submitted,valueGetter:this.valueGetter,errors:d,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(s.WatermarkOverlay,null))}};l.displayName="KendoReactForm",l.propTypes={initialValues:i.any,onSubmit:i.func,onSubmitClick:i.func,render:i.func.isRequired,id:i.string};let h=l;const u=e=>{const{name:t,component:i,validator:s,type:o,children:a,...d}=e,l=r.useContext(n),h=l?l.id:"";r.useEffect((()=>l?l.registerField(t,s):void 0),[t,h,s]);const u=r.useCallback((e=>l.onUnshift(t,e)),[t,h]),c=r.useCallback((e=>l.onPush(t,e)),[t,h]),m=r.useCallback((e=>l.onInsert(t,e)),[t,h]),v=r.useCallback((()=>l.onPop(t)),[t,h]),p=r.useCallback((e=>l.onRemove(t,e)),[t,h]),f=r.useCallback((e=>l.onReplace(t,e)),[t,h]),F=r.useCallback((e=>l.onMove(t,e)),[t,h]);if(!l)return null;const y=l.valueGetter(t);return r.createElement(i,{value:y,validationMessage:l.errors[t],touched:l.touched[t],modified:l.modified[t],visited:l.visited[t],valid:!(l.errors[t]&&l.touched[t]),onUnshift:u,onPush:c,onInsert:m,onPop:v,onRemove:p,onReplace:f,onMove:F,children:a,name:t,...d})};u.displayName="KendoReactFieldArray";const c=e=>{const t=s.useUnstyled(),i=e.unstyled||t,o=i&&i.uForm,n=r.useMemo((()=>s.classNames(s.uForm.field({c:o,isRtl:"rtl"===e.dir}),e.className)),[o,e.className,e.dir]);return r.createElement("div",{className:n,style:e.style},e.children)};c.displayName="KendoReactFieldWrapper";const m=r.forwardRef(((e,t)=>{const i={size:"medium",...e},o=r.useRef(null),a=r.useRef(null);r.useImperativeHandle(a,(()=>({element:o.current,props:i}))),r.useImperativeHandle(t,(()=>a.current));const d=r.useContext(n),{className:l,style:h,horizontal:u,size:c,...m}=i,v=s.useUnstyled(),p=v&&v.uForm,f=r.useMemo((()=>u?"horizontal":!1===u?"vertical":void 0),[u]),F=r.useMemo((()=>s.classNames(s.uForm.form({c:p,size:c,orientation:f}),l)),[l,p,f,c]);return r.createElement("form",{ref:o,...m,id:e.id||(d?d.id:void 0),style:e.style,className:F,onSubmit:d?d.onSubmit:void 0},e.children)}));m.displayName="KendoReactFormElement";const v=s.withIdHOC(h);v.displayName="KendoReactForm",e.Field=a,e.FieldArray=u,e.FieldWrapper=c,e.Form=v,e.FormClassComponent=h,e.FormElement=m}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactForm={},e.React,e.PropTypes,e.KendoReactCommon)}(this,(function(e,t,s,i){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(s){if("default"!==s){var i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,i.get?i:{enumerable:!0,get:function(){return e[s]}})}})),t.default=e,Object.freeze(t)}var r=o(t);const n=r.createContext(null),l=e=>{const{name:t,component:s,validator:i,children:o,onChange:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>{const s=e&&(void 0!==e.value?e.value:e.target?e.target.value:e.target);u.onChange(t,{value:s}),l&&l.call(void 0,e)}),[t,d,l]),h=r.useCallback((e=>u.onChange(t,{value:e.target.value})),[t,d]),m=r.useCallback((()=>u.onBlur(t)),[t,d]),f=r.useCallback((()=>u.onFocus(t)),[t,d]);if(!u)return null;const v=u.valueGetter(t);return"string"==typeof s?r.createElement(s,{onChange:h,onBlur:m,onFocus:f,value:v,children:o,...a}):r.createElement(s,{children:o,...a,onChange:c,onBlur:m,onFocus:f,value:v,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),name:t})};l.displayName="KendoReactField";const a={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"11.4.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},u=class extends r.Component{constructor(e){super(e),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._values={},this._fields={},this._unmounted=!1,this._submitted=!1,this.showLicenseWatermark=!1,this.isValid=()=>this.isFormValid(this.errors),this.accumulatedForceUpdate=()=>{this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout),this._accumulatorTimeout=window.setTimeout((()=>{this._accumulatorTimeout=void 0,this.forceUpdate()}),0)},this.resetForm=()=>{this.values=i.clone(this.props.initialValues),this._key=i.guid(),this._touched={},this._visited={},this._modified={},this._validatorsByField={},this._fields={},this._submitted=!1,this.forceUpdate()},this.onReset=()=>this.resetForm(),this.addField=e=>{this._fields[e]=!0},this.onSubmit=e=>{const t={},s=this.fields;e&&("function"==typeof e.preventDefault&&e.preventDefault(),"function"==typeof e.stopPropagation&&e.stopPropagation()),s.forEach((e=>{t[e]=!0})),this.visited={...t},this.touched={...t};const i=this.values,o=this.isFormValid(this.errors),r=this.isFormModified(this.modified,s);this.props.onSubmitClick&&this.props.onSubmitClick.call(void 0,{values:i,isValid:o,isModified:r,event:e}),o&&(this.props.ignoreModified||r)&&this.props.onSubmit&&(this._submitted=!0,this.props.onSubmit.call(void 0,i,e)),this.forceUpdate()},this.onChange=(e,t)=>{const{value:s}=t;this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.valueSetter(e,s),this.forceUpdate()},this.onFocus=(e,t)=>{this.visited[e]||(this.visited={...this.visited,[e]:!0},t||this.forceUpdate())},this.onBlur=(e,t)=>{this.touched[e]||(this.onFocus(e,t),this.touched={...this.touched,[e]:!0},t||this.forceUpdate())},this.onFieldRegister=(e,t)=>{this.addField(e);const s=this.validatorsByField[e]||[],i=s.length;return this.validatorsByField={...this.validatorsByField,[e]:[...s,t]},this.accumulatedForceUpdate(),()=>{if(this._unmounted)return;const t=[...this.validatorsByField[e]||[]],s=!!t[i];t[i]=void 0,this.validatorsByField={...this.validatorsByField,[e]:t},s&&this.accumulatedForceUpdate()}},this.isFormValid=e=>!Object.keys(e).some((t=>!!e[t])),this.isFormModified=(e,t)=>t.some((t=>e[t])),this.isFormHasNotTouched=(e,t)=>t.some((t=>!e[t])),this.isFormTouched=(e,t)=>t.some((t=>e[t])),this.isFormVisited=(e,t)=>t.some((t=>e[t])),this.valueGetter=e=>i.getter(e)(this.values),this.valueSetter=(e,t)=>i.setter(e)(this.values,t),this.onArrayAction=e=>{this.addField(e),this.modified[e]||(this.modified={...this.modified,[e]:!0}),this.onBlur(e,!0)},this.onInsert=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,0,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onUnshift=(e,t)=>{this.onInsert(e,{value:t.value,index:0})},this.onPush=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[],t.value];this.valueSetter(e,s),this.forceUpdate()},this.onPop=e=>{this.onArrayAction(e);const t=[...this.valueGetter(e)||[]],s=t.pop();return this.valueSetter(e,t),this.forceUpdate(),s},this.onRemove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s.splice(t.index,1);return this.valueSetter(e,s),this.forceUpdate(),i},this.onReplace=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]];s.splice(t.index,1,t.value),this.valueSetter(e,s),this.forceUpdate()},this.onMove=(e,t)=>{this.onArrayAction(e);const s=[...this.valueGetter(e)||[]],i=s[t.prevIndex];s.splice(t.prevIndex,1),s.splice(t.nextIndex,0,i),this.valueSetter(e,s),this.forceUpdate()},this.showLicenseWatermark=!i.validatePackage(a,{component:"Form"}),this.values=i.clone(e.initialValues)}get touched(){return this._touched}set touched(e){this._touched=e}get visited(){return this._visited}set visited(e){this._visited=e}get modified(){return this._modified}set modified(e){this._modified=e}get validatorsByField(){return this._validatorsByField}set validatorsByField(e){this._validatorsByField=e}get values(){return this._values}set values(e){this._values=e}get fields(){return Object.keys(this._fields)}get formErrors(){if(this.props.validator)return this.props.validator(this.values,this.valueGetter)}get errors(){const e={},t=this.fields,s=this.validatorsByField;return t.forEach((t=>{if(e[t]="",s[t]){const i=[];s[t].forEach((e=>{Array.isArray(e)?i.push(...e):i.push(e)})),i.find((s=>{if(s){const i=s(this.valueGetter(t),this.valueGetter,{name:t});if(i)return e[t]=i,!0}return!1}))}})),this.formErrors&&i.cloneObject(this.formErrors,e),e}componentWillUnmount(){this._unmounted=!0,this._accumulatorTimeout&&clearTimeout(this._accumulatorTimeout)}render(){const{render:e}=this.props,t=this.touched,s=this.visited,o=this.modified,l=this.fields,a=this.errors,u=this.isFormValid(a),d=this.isFormModified(o,l),c=this.isFormTouched(t,l),h=this.isFormVisited(s,l),m=this.isFormHasNotTouched(t,l)&&!u||u&&(this.props.ignoreModified||d);return r.createElement(r.Fragment,null,r.createElement(n.Provider,{key:this._key||this.props.id,value:{id:this.props.id,valueGetter:this.valueGetter,errors:a,modified:o,touched:t,visited:s,registerField:this.onFieldRegister,onSubmit:this.onSubmit,onChange:this.onChange,onFocus:this.onFocus,onBlur:this.onBlur,onUnshift:this.onUnshift,onPush:this.onPush,onInsert:this.onInsert,onPop:this.onPop,onRemove:this.onRemove,onReplace:this.onReplace,onMove:this.onMove}},e({valid:u,modified:d,touched:c,visited:h,submitted:this._submitted,valueGetter:this.valueGetter,errors:a,allowSubmit:m,onChange:this.onChange,onSubmit:this.onSubmit,onFormReset:this.resetForm})),this.showLicenseWatermark&&r.createElement(i.WatermarkOverlay,null))}};u.displayName="KendoReactForm",u.propTypes={initialValues:s.any,onSubmit:s.func,onSubmitClick:s.func,render:s.func.isRequired,id:s.string};let d=u;const c=e=>{const{name:t,component:s,validator:i,type:o,children:l,...a}=e,u=r.useContext(n),d=u?u.id:"";r.useEffect((()=>u?u.registerField(t,i):void 0),[t,d,i]);const c=r.useCallback((e=>u.onUnshift(t,e)),[t,d]),h=r.useCallback((e=>u.onPush(t,e)),[t,d]),m=r.useCallback((e=>u.onInsert(t,e)),[t,d]),f=r.useCallback((()=>u.onPop(t)),[t,d]),v=r.useCallback((e=>u.onRemove(t,e)),[t,d]),p=r.useCallback((e=>u.onReplace(t,e)),[t,d]),y=r.useCallback((e=>u.onMove(t,e)),[t,d]);if(!u)return null;const F=u.valueGetter(t);return r.createElement(s,{value:F,validationMessage:u.errors[t],touched:u.touched[t],modified:u.modified[t],visited:u.visited[t],valid:!(u.errors[t]&&u.touched[t]),onUnshift:c,onPush:h,onInsert:m,onPop:f,onRemove:v,onReplace:p,onMove:y,children:l,name:t,...a})};c.displayName="KendoReactFieldArray";function h(e){let t=e.clientWidth;const s=getComputedStyle(e);return t-=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.borderLeftWidth)||0),t-=(parseFloat(s.paddingRight)||0)+(parseFloat(s.borderRightWidth)||0),t}function m(e,t){var s,i;if(null==e||!e.length||null==t)return"";for(const[o,r]of e.entries()){const n=o>0&&void 0!==e[o-1].maxWidth?e[o-1].maxWidth:void 0,l=o<e.length-1&&void 0!==e[o+1].minWidth?e[o+1].minWidth:void 0,a=null!=(s=r.minWidth)?s:void 0!==n?n+1:0,u=null!=(i=r.maxWidth)?i:void 0!==l?l-1:1/0;if(t>=a&&t<=u)return r.value}return""}const f=e=>{if("number"==typeof e)return`${e}px`;if("string"==typeof e){const t=e.trim(),s=parseInt(t,10);return!isNaN(s)&&Number.isFinite(s)?s.toString()===t?`${s}px`:e:null}return null},v=(e,t)=>{if(!e)return null;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return"number"==typeof e?e:null},p=e=>e&&e>0?`k-grid-cols-${e}`:"",y=(e,t)=>{if(!e)return null;if("number"==typeof e)return e;if(Array.isArray(e)&&e.length>0){const s=m(e,t)||null;return"string"==typeof s?parseInt(s,10):s}return null},F=e=>e?`k-col-span-${e}`:"",g=(e,t)=>{if(!e)return null;if("number"==typeof e)return{cols:e,rows:e};if("string"==typeof e){if(!e.includes(" "))return{cols:e,rows:e};const t=e.split(" ");return{cols:t[1],rows:t[0]}}if(Array.isArray(e)){const s=m(e,t)||null;return null!==s?{cols:s,rows:s}:null}if("object"==typeof e){const s=e,i={rows:null,cols:null};return void 0!==s.cols&&null!==s.cols?"number"==typeof s.cols||"string"==typeof s.cols?i.cols=s.cols:Array.isArray(s.cols)&&(i.cols=m(s.cols,t)||null):i.cols=null,void 0!==s.rows?"number"==typeof s.rows||"string"==typeof s.rows?i.rows=s.rows:Array.isArray(s.rows)&&(i.rows=m(s.rows,t)||null):i.rows=null,i}return null},b=(e,t)=>{var s,i,o,r;return`${f(null!=(i=null!=(s=null==e?void 0:e.rows)?s:t.rows)?i:"0px")} ${f(null!=(r=null!=(o=null==e?void 0:e.cols)?o:t.cols)?r:"32px")}`},w=e=>{const{className:t,style:s,dir:o,colSpan:n,children:l}=e,a=r.useRef(null),u=i.useUnstyled(),d=e.unstyled||u,c=d&&d.uForm,[m,f]=r.useState(void 0),v=r.useRef(null);r.useEffect((()=>{a.current&&(v.current=a.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=null==v?void 0:v.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==n){const t=y(n,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[n]);const p=r.useMemo((()=>i.classNames(i.uForm.field({c:c,isRtl:"rtl"===o}),m,t)),[c,t,o,m]);return r.createElement("div",{ref:a,className:p,style:s},l)};w.displayName="KendoReactFieldWrapper";const R={rows:"0px",cols:"32px"},S=r.forwardRef(((e,t)=>{const s={size:"medium",...e},o=r.useRef(null),l=r.useRef(null);r.useImperativeHandle(l,(()=>({element:o.current,props:s}))),r.useImperativeHandle(t,(()=>l.current));const a=r.useContext(n),{className:u,style:d,horizontal:c,size:m,cols:f,gutters:y=R,...F}=s,w=i.useUnstyled(),S=w&&w.uForm,[C,_]=r.useState(void 0),[E,N]=r.useState(void 0),k=r.useMemo((()=>c?"horizontal":!1===c?"vertical":void 0),[c]),A=r.useMemo((()=>i.classNames(i.uForm.form({c:S,size:m,orientation:k}),u)),[u,S,k,m]);return r.useEffect((()=>{if(!f&&!y)return void _(void 0);if(!y)return void N(void 0);const e=()=>{let e=0;if(o.current?e=h(o.current):"undefined"!=typeof window&&(e=window.innerWidth),f){const t=v(f,e);_(p(t))}if(y){const t=g(y,e);N(t?{gap:b(t,R)}:{gap:b(R,R)})}};let t;e();const s=o.current;return s&&"undefined"!=typeof window&&"ResizeObserver"in window&&(t=new ResizeObserver(e),t.observe(s)),()=>{t&&s&&t.unobserve(s)}}),[f,y]),r.createElement("form",{ref:o,...F,id:e.id||(a?a.id:void 0),style:e.style,className:A,onSubmit:a?a.onSubmit:void 0},f?r.createElement("div",{className:i.classNames(i.uForm.formLayout({c:S}),C),style:E},e.children):e.children)}));S.displayName="KendoReactFormElement";const C=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,colSpan:a,...u}=e,d=i.useUnstyled(),c=d&&d.uForm,[m,f]=r.useState(void 0),v=r.useRef(null);r.useEffect((()=>{s.current&&(v.current=s.current.closest("form"))}),[]),r.useEffect((()=>{let e;const t=v.current,s=()=>{let e=0;if(t?e=h(t):"undefined"!=typeof window&&(e=window.innerWidth),void 0!==a){const t=y(a,e);f(F(t))}else f(void 0)};return s(),t&&"undefined"!=typeof window&&"ResizeObserver"in window&&(e=new ResizeObserver(s),e.observe(t)),()=>{e&&t&&e.unobserve(t)}}),[a]);const p=r.useMemo((()=>i.classNames(i.uForm.separator({c:c}),m,n)),[n,c,m]);return r.createElement("span",{ref:s,...u,style:e.style,className:p})}));C.displayName="KendoReactFormSeparator";const _={rows:"0px",cols:"16px"},E=r.forwardRef(((e,t)=>{const s=r.useRef(null),o=r.useRef(null);r.useImperativeHandle(o,(()=>({element:s.current,props:e}))),r.useImperativeHandle(t,(()=>o.current));const{className:n,style:l,cols:a,colSpan:u,gutters:d=_,legend:c,...m}=e,f=i.useUnstyled(),w=f&&f.uForm,[R,S]=r.useState(void 0),[C,E]=r.useState(void 0),[N,k]=r.useState(void 0),A=r.useMemo((()=>i.classNames(i.uForm.fieldset({c:w}),C,n)),[n,w,C]),U=r.useMemo((()=>i.classNames(i.uForm.formLayout({c:w}),R)),[w,R]),x=r.useMemo((()=>i.classNames(i.uForm.legend({c:w}))),[w]),I=r.useRef(null);return r.useEffect((()=>{s.current&&(I.current=s.current.closest("form"))}),[]),r.useEffect((()=>{if(!a)return void S(void 0);if(!d)return void k(void 0);const e=null==I?void 0:I.current,t=()=>{let t=0;e?t=h(e):"undefined"!=typeof window&&(t=window.innerWidth);const s=v(a,t);if(S(p(s)),void 0!==u){const e=y(u,t);E(F(e))}else E(void 0);if(d){const e=g(d,t);k(e?{gap:b(e,_)}:{gap:b(_,_)})}};let s;return t(),e&&"undefined"!=typeof window&&"ResizeObserver"in window&&(s=new ResizeObserver(t),s.observe(e)),()=>{s&&e&&s.unobserve(e)}}),[a,u,d]),r.createElement("fieldset",{ref:s,...m,style:e.style,className:A},c&&r.createElement("legend",{className:x},c),a?r.createElement("div",{className:U,style:N},e.children):e.children)}));E.displayName="KendoReactFormFieldSet";const N=i.withIdHOC(d);N.displayName="KendoReactForm",e.Field=l,e.FieldArray=c,e.FieldWrapper=w,e.Form=N,e.FormClassComponent=d,e.FormElement=S,e.FormFieldSet=E,e.FormSeparator=C}));

package/index.d.mts

@@ -197,6 +197,10 @@ export declare interface FieldProps {
      * ```
      */
     children?: any;
+    /**
+     * Defines the colspan for the Form field. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
     /**
      * Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
      * Useful for updating related fields.
@@ -253,13 +257,17 @@ export declare interface FieldWrapperProps {
      */
     style?: React_2.CSSProperties;
     /**
-     * Sets a class of the FieldWrapper DOM element.
+     * Sets a class for the FieldWrapper DOM element.
      */
     className?: string;
     /**
      * Specifies the direction of the content.
      */
     dir?: string;
+    /**
+     * Defines the colspan for the form field element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
     /**
      * @hidden
      */
@@ -541,7 +549,13 @@ export declare const FormElement: React_2.FunctionComponent<FormElementProps>;
  * Represent the `ref` of the FormElement component.
  */
 export declare interface FormElementHandle {
+    /**
+     * Represents the props of the FormElement component.
+     */
     props: FormElementProps;
+    /**
+     * Represents the element of the FormElement component.
+     */
     element: HTMLFormElement | null;
 }
 
@@ -558,7 +572,7 @@ export declare interface FormElementProps {
      */
     style?: React_2.CSSProperties;
     /**
-     * Sets a class of the form DOM element.
+     * Sets a class for the form DOM element.
      */
     className?: string;
     /**
@@ -569,6 +583,14 @@ export declare interface FormElementProps {
      * Sets the id of the form DOM element. Takes priority over the Form's id.
      */
     id?: string;
+    /**
+     * Defines the number of columns in the form. Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the form. You can specify gutters for rows and columns. Number is equivalent to px.
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
     /**
      * @hidden
      */
@@ -591,6 +613,59 @@ export declare interface FormElementProps {
     unstyled?: FormClassStructure;
 }
 
+/**
+ * Represents the KendoReact FormFieldSet component.
+ */
+export declare const FormFieldSet: React_2.FunctionComponent<FormFieldSetProps>;
+
+/**
+ * Represent the `ref` of the FormFieldSet component.
+ */
+export declare interface FormFieldSetHandle {
+    /**
+     * Represents the props of the  FormFieldSet component.
+     */
+    props: FormFieldSetProps;
+    /**
+     * Represents the element of the FormFieldSet component.
+     */
+    element: HTMLFieldSetElement | null;
+}
+
+/**
+ * Represents the props of the KendoReact FormFieldSet component.
+ */
+export declare interface FormFieldSetProps {
+    /**
+     * Defines the number of columns of the fieldset. Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the colspan for the fieldset related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the fieldset. You can specify gutters for rows and columns. Number is equivalent to px.
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the legend for the fieldset.
+     */
+    legend?: string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * The styles that are applied to the form DOM element.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets a class for the form DOM element.
+     */
+    className?: string;
+}
+
 /**
  * Represent the `ref` of the Form component.
  */
@@ -812,6 +887,47 @@ export declare interface FormRenderProps {
     valueGetter: (name: string) => any;
 }
 
+/**
+ * Represents the KendoReact FormSeparator component.
+ */
+export declare const FormSeparator: React_2.FunctionComponent<FormSeparatorProps>;
+
+/**
+ * Represent the `ref` of the FormSeparator component.
+ */
+export declare interface FormSeparatorHandle {
+    /**
+     * Represents the props of the FormSeparator component.
+     */
+    props: FormSeparatorProps;
+    /**
+     * Represents the element of the FormSeparator component.
+     */
+    element: HTMLSpanElement | null;
+}
+
+/**
+ * Represents the props of the KendoReact FormSeparator component.
+ */
+export declare interface FormSeparatorProps {
+    /**
+     * Defines the colspan for the separator element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * The styles that are applied to the form DOM element.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets a class for the form DOM element.
+     */
+    className?: string;
+}
+
 /**
  * The FormSubmitClick event.
  */
@@ -846,6 +962,24 @@ export declare interface FormSubmitClickEvent {
  */
 export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;
 
+/**
+ * Represents the [gutters](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) configuration for a form layout.
+ * It allows defining the spacing between the columns and rows of the form.
+ * Each property can be a number or an array of responsive breakpoints.
+ */
+export declare interface Gutters {
+    /**
+     * Defines the gutters for the columns in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols?: string | number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the rows in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    rows?: string | number | ResponsiveFormBreakPoint[];
+}
+
 /**
  *
  */
@@ -853,4 +987,25 @@ export declare interface KeyValue<ValueType> {
     [name: string]: ValueType;
 }
 
+/**
+ * Allows to define responsive breakpoints for the Form component.
+ * Each breakpoint can specify a minimum and/or maximum width, and a value that represents either the number of columns
+ * or the colspan/gutters for that breakpoint.
+ */
+export declare interface ResponsiveFormBreakPoint {
+    /**
+     * The minimum width for this breakpoint in pixels.
+     */
+    minWidth?: number;
+    /**
+     * The maximum width for this breakpoint in pixels.
+     */
+    maxWidth?: number;
+    /**
+     * The value associated with this breakpoint.
+     * It can represent the number of columns or the colspan/gutters for the form control.
+     */
+    value: number | string;
+}
+
 export { }

package/index.d.ts

@@ -197,6 +197,10 @@ export declare interface FieldProps {
      * ```
      */
     children?: any;
+    /**
+     * Defines the colspan for the Form field. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
     /**
      * Called when the underlying editor triggers its `onChange` event and the Form updates its internal state.
      * Useful for updating related fields.
@@ -253,13 +257,17 @@ export declare interface FieldWrapperProps {
      */
     style?: React_2.CSSProperties;
     /**
-     * Sets a class of the FieldWrapper DOM element.
+     * Sets a class for the FieldWrapper DOM element.
      */
     className?: string;
     /**
      * Specifies the direction of the content.
      */
     dir?: string;
+    /**
+     * Defines the colspan for the form field element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
     /**
      * @hidden
      */
@@ -541,7 +549,13 @@ export declare const FormElement: React_2.FunctionComponent<FormElementProps>;
  * Represent the `ref` of the FormElement component.
  */
 export declare interface FormElementHandle {
+    /**
+     * Represents the props of the FormElement component.
+     */
     props: FormElementProps;
+    /**
+     * Represents the element of the FormElement component.
+     */
     element: HTMLFormElement | null;
 }
 
@@ -558,7 +572,7 @@ export declare interface FormElementProps {
      */
     style?: React_2.CSSProperties;
     /**
-     * Sets a class of the form DOM element.
+     * Sets a class for the form DOM element.
      */
     className?: string;
     /**
@@ -569,6 +583,14 @@ export declare interface FormElementProps {
      * Sets the id of the form DOM element. Takes priority over the Form's id.
      */
     id?: string;
+    /**
+     * Defines the number of columns in the form. Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the form. You can specify gutters for rows and columns. Number is equivalent to px.
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
     /**
      * @hidden
      */
@@ -591,6 +613,59 @@ export declare interface FormElementProps {
     unstyled?: FormClassStructure;
 }
 
+/**
+ * Represents the KendoReact FormFieldSet component.
+ */
+export declare const FormFieldSet: React_2.FunctionComponent<FormFieldSetProps>;
+
+/**
+ * Represent the `ref` of the FormFieldSet component.
+ */
+export declare interface FormFieldSetHandle {
+    /**
+     * Represents the props of the  FormFieldSet component.
+     */
+    props: FormFieldSetProps;
+    /**
+     * Represents the element of the FormFieldSet component.
+     */
+    element: HTMLFieldSetElement | null;
+}
+
+/**
+ * Represents the props of the KendoReact FormFieldSet component.
+ */
+export declare interface FormFieldSetProps {
+    /**
+     * Defines the number of columns of the fieldset. Can be a number or an array of responsive breakpoints.
+     */
+    cols?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the colspan for the fieldset related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the fieldset. You can specify gutters for rows and columns. Number is equivalent to px.
+     */
+    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the legend for the fieldset.
+     */
+    legend?: string;
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * The styles that are applied to the form DOM element.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets a class for the form DOM element.
+     */
+    className?: string;
+}
+
 /**
  * Represent the `ref` of the Form component.
  */
@@ -812,6 +887,47 @@ export declare interface FormRenderProps {
     valueGetter: (name: string) => any;
 }
 
+/**
+ * Represents the KendoReact FormSeparator component.
+ */
+export declare const FormSeparator: React_2.FunctionComponent<FormSeparatorProps>;
+
+/**
+ * Represent the `ref` of the FormSeparator component.
+ */
+export declare interface FormSeparatorHandle {
+    /**
+     * Represents the props of the FormSeparator component.
+     */
+    props: FormSeparatorProps;
+    /**
+     * Represents the element of the FormSeparator component.
+     */
+    element: HTMLSpanElement | null;
+}
+
+/**
+ * Represents the props of the KendoReact FormSeparator component.
+ */
+export declare interface FormSeparatorProps {
+    /**
+     * Defines the colspan for the separator element related to the parent Form component columns. Can be a number or an array of responsive breakpoints.
+     */
+    colSpan?: number | ResponsiveFormBreakPoint[];
+    /**
+     * @hidden
+     */
+    children?: any;
+    /**
+     * The styles that are applied to the form DOM element.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets a class for the form DOM element.
+     */
+    className?: string;
+}
+
 /**
  * The FormSubmitClick event.
  */
@@ -846,6 +962,24 @@ export declare interface FormSubmitClickEvent {
  */
 export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;
 
+/**
+ * Represents the [gutters](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) configuration for a form layout.
+ * It allows defining the spacing between the columns and rows of the form.
+ * Each property can be a number or an array of responsive breakpoints.
+ */
+export declare interface Gutters {
+    /**
+     * Defines the gutters for the columns in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    cols?: string | number | ResponsiveFormBreakPoint[];
+    /**
+     * Defines the gutters for the rows in the form.
+     * Can be a number or an array of responsive breakpoints.
+     */
+    rows?: string | number | ResponsiveFormBreakPoint[];
+}
+
 /**
  *
  */
@@ -853,4 +987,25 @@ export declare interface KeyValue<ValueType> {
     [name: string]: ValueType;
 }
 
+/**
+ * Allows to define responsive breakpoints for the Form component.
+ * Each breakpoint can specify a minimum and/or maximum width, and a value that represents either the number of columns
+ * or the colspan/gutters for that breakpoint.
+ */
+export declare interface ResponsiveFormBreakPoint {
+    /**
+     * The minimum width for this breakpoint in pixels.
+     */
+    minWidth?: number;
+    /**
+     * The maximum width for this breakpoint in pixels.
+     */
+    maxWidth?: number;
+    /**
+     * The value associated with this breakpoint.
+     * It can represent the number of columns or the colspan/gutters for the form control.
+     */
+    value: number | string;
+}
+
 export { }

package/index.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Field.js"),e=require("./Form.js"),i=require("./FieldArray.js"),t=require("./FieldWrapper.js"),F=require("./FormElement.js"),m=require("@progress/kendo-react-common"),r=m.withIdHOC(e.Form);r.displayName="KendoReactForm";exports.Field=o.Field;exports.FormClassComponent=e.Form;exports.FieldArray=i.FieldArray;exports.FieldWrapper=t.FieldWrapper;exports.FormElement=F.FormElement;exports.Form=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Field.js"),e=require("./Form.js"),t=require("./FieldArray.js"),F=require("./FieldWrapper.js"),i=require("./FormElement.js"),m=require("@progress/kendo-react-common"),l=require("./FormSeparator.js"),a=require("./FormFieldSet.js"),r=m.withIdHOC(e.Form);r.displayName="KendoReactForm";exports.Field=o.Field;exports.FormClassComponent=e.Form;exports.FieldArray=t.FieldArray;exports.FieldWrapper=F.FieldWrapper;exports.FormElement=i.FormElement;exports.FormSeparator=l.FormSeparator;exports.FormFieldSet=a.FormFieldSet;exports.Form=r;

package/index.mjs

@@ -7,18 +7,22 @@
  */
 "use client";
 import { Field as a } from "./Field.mjs";
-import { Form as o } from "./Form.mjs";
-import { FieldArray as d } from "./FieldArray.mjs";
+import { Form as r } from "./Form.mjs";
+import { FieldArray as i } from "./FieldArray.mjs";
 import { FieldWrapper as l } from "./FieldWrapper.mjs";
-import { FormElement as n } from "./FormElement.mjs";
-import { withIdHOC as r } from "@progress/kendo-react-common";
-const m = r(o);
+import { FormElement as s } from "./FormElement.mjs";
+import { withIdHOC as o } from "@progress/kendo-react-common";
+import { FormSeparator as C } from "./FormSeparator.mjs";
+import { FormFieldSet as y } from "./FormFieldSet.mjs";
+const m = o(r);
 m.displayName = "KendoReactForm";
 export {
   a as Field,
-  d as FieldArray,
+  i as FieldArray,
   l as FieldWrapper,
   m as Form,
-  o as FormClassComponent,
-  n as FormElement
+  r as FormClassComponent,
+  s as FormElement,
+  y as FormFieldSet,
+  C as FormSeparator
 };

package/package-metadata.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={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1753861947,version:"11.4.0-develop.3",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-form",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1754046257,version:"11.4.0-develop.4",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1753861947,
-  version: "11.4.0-develop.3",
+  publishDate: 1754046257,
+  version: "11.4.0-develop.4",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-form",
-  "version": "11.4.0-develop.3",
+  "version": "11.4.0-develop.4",
   "description": "React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.6.0",
-    "@progress/kendo-react-common": "11.4.0-develop.3",
+    "@progress/kendo-react-common": "11.4.0-develop.4",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
@@ -51,7 +51,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1753861947,
+      "publishDate": 1754046257,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/utils.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * 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=" ";function p(r){let e=r.clientWidth;const n=getComputedStyle(r);return e-=(parseFloat(n.paddingLeft)||0)+(parseFloat(n.borderLeftWidth)||0),e-=(parseFloat(n.paddingRight)||0)+(parseFloat(n.borderRightWidth)||0),e}function o(r,e){var n,l;if(!(r!=null&&r.length)||e==null)return"";for(const[s,t]of r.entries()){const i=s>0&&r[s-1].maxWidth!==void 0?r[s-1].maxWidth:void 0,c=s<r.length-1&&r[s+1].minWidth!==void 0?r[s+1].minWidth:void 0,f=(n=t.minWidth)!=null?n:i!==void 0?i+1:0,d=(l=t.maxWidth)!=null?l:c!==void 0?c-1:1/0;if(e>=f&&e<=d)return t.value}return""}const u=r=>{if(typeof r=="number")return`${r}px`;if(typeof r=="string"){const e=r.trim(),n=parseInt(e,10);return!isNaN(n)&&Number.isFinite(n)?n.toString()===e?`${n}px`:r:null}return null},y=(r,e)=>{if(!r)return null;if(Array.isArray(r)&&r.length>0){const n=o(r,e)||null;return typeof n=="string"?parseInt(n,10):n}else if(typeof r=="number")return r;return null},m=r=>r&&r>0?`k-grid-cols-${r}`:"",C=(r,e)=>{if(!r)return null;if(typeof r=="number")return r;if(Array.isArray(r)&&r.length>0){const n=o(r,e)||null;return typeof n=="string"?parseInt(n,10):n}return null},h=r=>r?`k-col-span-${r}`:"",w=(r,e)=>{if(!r)return null;if(typeof r=="number")return{cols:r,rows:r};if(typeof r=="string"){if(!r.includes(a))return{cols:r,rows:r};const n=r.split(a);return{cols:n[1],rows:n[0]}}else if(Array.isArray(r)){const n=o(r,e)||null;return n!==null?{cols:n,rows:n}:null}else if(typeof r=="object"){const n=r,l={rows:null,cols:null};return n.cols!==void 0&&n.cols!==null?typeof n.cols=="number"||typeof n.cols=="string"?l.cols=n.cols:Array.isArray(n.cols)&&(l.cols=o(n.cols,e)||null):l.cols=null,n.rows!==void 0?typeof n.rows=="number"||typeof n.rows=="string"?l.rows=n.rows:Array.isArray(n.rows)&&(l.rows=o(n.rows,e)||null):l.rows=null,l}return null},A=(r,e)=>{var s,t,i,c;const n=u((t=(s=r==null?void 0:r.rows)!=null?s:e.rows)!=null?t:"0px"),l=u((c=(i=r==null?void 0:r.cols)!=null?i:e.cols)!=null?c:"32px");return`${n} ${l}`};exports.calculateColSpan=C;exports.calculateColumns=y;exports.calculateGutters=w;exports.generateColSpanClass=h;exports.generateColumnClass=m;exports.generateGuttersStyling=A;exports.innerWidth=p;exports.processBreakpoints=o;exports.processCssValue=u;

package/utils.mjs

@@ -0,0 +1,85 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2025 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+const f = " ";
+function p(r) {
+  let e = r.clientWidth;
+  const n = getComputedStyle(r);
+  return e -= (parseFloat(n.paddingLeft) || 0) + (parseFloat(n.borderLeftWidth) || 0), e -= (parseFloat(n.paddingRight) || 0) + (parseFloat(n.borderRightWidth) || 0), e;
+}
+function c(r, e) {
+  var n, l;
+  if (!(r != null && r.length) || e == null)
+    return "";
+  for (const [o, s] of r.entries()) {
+    const t = o > 0 && r[o - 1].maxWidth !== void 0 ? r[o - 1].maxWidth : void 0, i = o < r.length - 1 && r[o + 1].minWidth !== void 0 ? r[o + 1].minWidth : void 0, d = (n = s.minWidth) != null ? n : t !== void 0 ? t + 1 : 0, a = (l = s.maxWidth) != null ? l : i !== void 0 ? i - 1 : 1 / 0;
+    if (e >= d && e <= a)
+      return s.value;
+  }
+  return "";
+}
+const u = (r) => {
+  if (typeof r == "number")
+    return `${r}px`;
+  if (typeof r == "string") {
+    const e = r.trim(), n = parseInt(e, 10);
+    return !isNaN(n) && Number.isFinite(n) ? n.toString() === e ? `${n}px` : r : null;
+  }
+  return null;
+}, y = (r, e) => {
+  if (!r)
+    return null;
+  if (Array.isArray(r) && r.length > 0) {
+    const n = c(r, e) || null;
+    return typeof n == "string" ? parseInt(n, 10) : n;
+  } else if (typeof r == "number")
+    return r;
+  return null;
+}, w = (r) => r && r > 0 ? `k-grid-cols-${r}` : "", h = (r, e) => {
+  if (!r)
+    return null;
+  if (typeof r == "number")
+    return r;
+  if (Array.isArray(r) && r.length > 0) {
+    const n = c(r, e) || null;
+    return typeof n == "string" ? parseInt(n, 10) : n;
+  }
+  return null;
+}, m = (r) => r ? `k-col-span-${r}` : "", A = (r, e) => {
+  if (!r)
+    return null;
+  if (typeof r == "number")
+    return { cols: r, rows: r };
+  if (typeof r == "string") {
+    if (!r.includes(f))
+      return { cols: r, rows: r };
+    const n = r.split(f);
+    return { cols: n[1], rows: n[0] };
+  } else if (Array.isArray(r)) {
+    const n = c(r, e) || null;
+    return n !== null ? { cols: n, rows: n } : null;
+  } else if (typeof r == "object") {
+    const n = r, l = { rows: null, cols: null };
+    return n.cols !== void 0 && n.cols !== null ? typeof n.cols == "number" || typeof n.cols == "string" ? l.cols = n.cols : Array.isArray(n.cols) && (l.cols = c(n.cols, e) || null) : l.cols = null, n.rows !== void 0 ? typeof n.rows == "number" || typeof n.rows == "string" ? l.rows = n.rows : Array.isArray(n.rows) && (l.rows = c(n.rows, e) || null) : l.rows = null, l;
+  }
+  return null;
+}, C = (r, e) => {
+  var o, s, t, i;
+  const n = u((s = (o = r == null ? void 0 : r.rows) != null ? o : e.rows) != null ? s : "0px"), l = u((i = (t = r == null ? void 0 : r.cols) != null ? t : e.cols) != null ? i : "32px");
+  return `${n} ${l}`;
+};
+export {
+  h as calculateColSpan,
+  y as calculateColumns,
+  A as calculateGutters,
+  m as generateColSpanClass,
+  w as generateColumnClass,
+  C as generateGuttersStyling,
+  p as innerWidth,
+  c as processBreakpoints,
+  u as processCssValue
+};