@progress/kendo-themes-html 7.0.1-dev.1 → 7.0.2-dev.0

package/dist/cjs/form/tests/form-field-dateinputs.js

@@ -5885,17 +5885,124 @@ FloatingLabel.options = options21;
 FloatingLabel.className = FLOATINGLABEL_CLASSNAME;
 FloatingLabel.defaultProps = defaultProps20;
 
-// src/floating-label/templates/floating-label-normal.tsx
+// src/textbox/textbox.spec.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
+var TEXTBOX_CLASSNAME = `k-textbox`;
+var states24 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+var options22 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultProps21 = {
+  showClearButton: true,
+  size: Input.defaultProps.size,
+  rounded: Input.defaultProps.rounded,
+  fillMode: Input.defaultProps.fillMode
+};
+var Textbox = (props) => {
+  const {
+    prefix,
+    suffix,
+    value,
+    placeholder,
+    size,
+    rounded,
+    fillMode,
+    hover,
+    focus,
+    valid,
+    invalid,
+    required,
+    loading,
+    disabled,
+    readonly,
+    showClearButton = defaultProps21.showClearButton,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    Input,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, TEXTBOX_CLASSNAME),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InputPrefix, { children: prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          InputClearValue,
+          {
+            loading,
+            disabled,
+            readonly,
+            value
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InputSuffix, { children: suffix })
+      ]
+    }
+  );
+};
+Textbox.states = states24;
+Textbox.options = options22;
+Textbox.className = TEXTBOX_CLASSNAME;
+Textbox.defaultProps = defaultProps21;
 
-// src/multiviewcalendar/multiviewcalendar.spec.tsx
+// src/textbox/templates/textbox-normal.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
+
+// src/textbox/templates/textbox-prefix.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+
+// src/textbox/templates/textbox-suffix.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+
+// src/floating-label/templates/floating-label-normal.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+
+// src/multiviewcalendar/multiviewcalendar.spec.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var MULTIVIEWCALENDAR_CLASSNAME = `k-calendar-range`;
-var states24 = [];
-var options22 = {
+var states25 = [];
+var options23 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps21 = {
+var defaultProps22 = {
   size: Size.medium,
   calendarHeaderText: "October 2021 - November 2021",
   viewsCount: 2,
@@ -5904,11 +6011,11 @@ var defaultProps21 = {
 };
 var MultiViewCalendar = (props) => {
   const {
-    size = defaultProps21.size,
-    orientation = defaultProps21.orientation,
-    calendarView = defaultProps21.calendarView,
-    calendarHeaderText = defaultProps21.calendarHeaderText,
-    viewsCount = defaultProps21.viewsCount,
+    size = defaultProps22.size,
+    orientation = defaultProps22.orientation,
+    calendarView = defaultProps22.calendarView,
+    calendarHeaderText = defaultProps22.calendarHeaderText,
+    viewsCount = defaultProps22.viewsCount,
     showCalendarFooter,
     showWeek,
     showOtherMonth,
@@ -5916,7 +6023,7 @@ var MultiViewCalendar = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     Calendar,
     {
       ...other,
@@ -5938,23 +6045,23 @@ var MultiViewCalendar = (props) => {
     }
   );
 };
-MultiViewCalendar.states = states24;
-MultiViewCalendar.options = options22;
+MultiViewCalendar.states = states25;
+MultiViewCalendar.options = options23;
 MultiViewCalendar.className = MULTIVIEWCALENDAR_CLASSNAME;
-MultiViewCalendar.defaultProps = defaultProps21;
+MultiViewCalendar.defaultProps = defaultProps22;
 
 // src/daterangepicker/daterangepicker.spec.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var DATERANGEPICKER_CLASSNAME = `k-daterangepicker`;
-var states25 = [
+var states26 = [
   States.disabled
 ];
-var options23 = {
+var options24 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps22 = {};
+var defaultProps23 = {};
 var DateRangePicker = (props) => {
   const {
     size,
@@ -5968,8 +6075,8 @@ var DateRangePicker = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
       "span",
       {
         ...other,
@@ -5980,7 +6087,7 @@ var DateRangePicker = (props) => {
           stateClassNames(DATERANGEPICKER_CLASSNAME, { disabled })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FloatingLabel, { label: "Start", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FloatingLabel, { label: "Start", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             DateInput,
             {
               showSpinButton: false,
@@ -5989,7 +6096,7 @@ var DateRangePicker = (props) => {
               fillMode
             }
           ) }),
-          swapButton && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          swapButton && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             Button,
             {
               rounded,
@@ -5999,7 +6106,7 @@ var DateRangePicker = (props) => {
               iconClassName: "k-rotate-90"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FloatingLabel, { label: "End", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(FloatingLabel, { label: "End", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             DateInput,
             {
               showSpinButton: false,
@@ -6011,9 +6118,9 @@ var DateRangePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Popup, { className: "k-calendar-container k-daterangepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MultiViewCalendar, { dir }) }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    opened && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popup, { className: "k-calendar-container k-daterangepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MultiViewCalendar, { dir }) }),
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6021,44 +6128,44 @@ var DateRangePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "k-scrollable-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MultiViewCalendar, { size: "large", calendarView: "month", orientation: "vertical", showCalendarCaption: true }) })
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "k-scrollable-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MultiViewCalendar, { size: "large", calendarView: "month", orientation: "vertical", showCalendarCaption: true }) })
     ] })
   ] });
 };
-DateRangePicker.states = states25;
-DateRangePicker.options = options23;
+DateRangePicker.states = states26;
+DateRangePicker.options = options24;
 DateRangePicker.className = DATERANGEPICKER_CLASSNAME;
-DateRangePicker.defaultProps = defaultProps22;
+DateRangePicker.defaultProps = defaultProps23;
 
 // src/daterangepicker/templates/daterangepicker-normal.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 
 // src/daterangepicker/templates/daterangepicker-popup.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 
 // src/daterangepicker/templates/daterangepicker-adaptive.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 
 // src/button-group/button-group.spec.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var BUTTONGROUP_CLASSNAME = `k-button-group`;
-var states26 = [
+var states27 = [
   States.disabled
 ];
-var options24 = {
+var options25 = {
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
 };
-var defaultProps23 = {
+var defaultProps24 = {
   fillMode: FillMode.solid
 };
 var ButtonGroup = (props) => {
   const {
-    fillMode = defaultProps23.fillMode,
+    fillMode = defaultProps24.fillMode,
     disabled,
     stretched,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       ...other,
@@ -6079,36 +6186,36 @@ var ButtonGroup = (props) => {
     }
   );
 };
-ButtonGroup.states = states26;
-ButtonGroup.options = options24;
+ButtonGroup.states = states27;
+ButtonGroup.options = options25;
 ButtonGroup.className = BUTTONGROUP_CLASSNAME;
-ButtonGroup.defaultProps = defaultProps23;
+ButtonGroup.defaultProps = defaultProps24;
 
 // src/button-group/templates/icon-button-group.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 
 // src/button-group/templates/icon-text-button-group.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/button-group/templates/text-button-group.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 
 // src/button-group/templates/mixed-button-group.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 
 // src/time-selector/time-selector.spec.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TIMESELECTOR_CLASSNAME = `k-timeselector`;
-var states27 = [];
-var options25 = {
+var states28 = [];
+var options26 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps24 = {
+var defaultProps25 = {
   size: Size.medium
 };
 var TimeSelector = (props) => {
   const {
-    size = defaultProps24.size,
+    size = defaultProps25.size,
     header,
     fastSelection,
     columns,
@@ -6124,9 +6231,9 @@ var TimeSelector = (props) => {
     if (index === 0 || columnType === "tt") {
       separator = false;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(TimeSelectorColumn, { type: columnType, focus, separator }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TimeSelectorColumn, { type: columnType, focus, separator }) });
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
       ...other,
@@ -6138,24 +6245,24 @@ var TimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: header }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: fastSelection }),
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "k-time-list-container", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "k-time-highlight" }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: fastSelection }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "k-time-list-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "k-time-highlight" }),
           columnsDom
         ] })
       ]
     }
   );
 };
-TimeSelector.states = states27;
-TimeSelector.options = options25;
+TimeSelector.states = states28;
+TimeSelector.options = options26;
 TimeSelector.className = TIMESELECTOR_CLASSNAME;
-TimeSelector.defaultProps = defaultProps24;
+TimeSelector.defaultProps = defaultProps25;
 
 // src/time-selector/time-selector-column.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var states28 = [
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var states29 = [
   States.focus
 ];
 var TimeSelectorColumn = (props) => {
@@ -6193,11 +6300,11 @@ var TimeSelectorColumn = (props) => {
       break;
   }
   const items = columnData.map(
-    (data) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_jsx_runtime56.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: data }) }) })
+    (data) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_jsx_runtime60.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: data }) }) })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    separator && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "k-time-separator", children: ":" }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+    separator && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "k-time-separator", children: ":" }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
       "div",
       {
         ...other,
@@ -6209,10 +6316,10 @@ var TimeSelectorColumn = (props) => {
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "k-title", children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "k-time-list", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "k-content k-scrollable k-time-container", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
-            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "k-scrollable-placeholder" })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "k-title", children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "k-time-list", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "k-content k-scrollable k-time-container", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "k-scrollable-placeholder" })
           ] }) })
         ]
       }
@@ -6221,14 +6328,14 @@ var TimeSelectorColumn = (props) => {
 };
 
 // src/time-selector/time-selector-header.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var className13 = `k-time-header`;
 var TimeSelectorHeader = (props) => {
   const {
     title,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       ...other,
@@ -6237,7 +6344,7 @@ var TimeSelectorHeader = (props) => {
         className13
       ),
       children: [
-        title != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "k-title", children: title }),
+        title != null && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "k-title", children: title }),
         props.children
       ]
     }
@@ -6245,38 +6352,38 @@ var TimeSelectorHeader = (props) => {
 };
 
 // src/time-selector/time-selector-fast-selection.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 
 // src/time-selector/templates/time-selector-all.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 
 // src/time-selector/templates/time-selector-hour.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 
 // src/time-selector/templates/time-selector-minute.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 
 // src/datetime-selector/datetime-selector.spec.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var DATETIMESELECTOR_CLASSNAME = `k-datetime-wrap`;
-var states29 = [];
-var options26 = {
+var states30 = [];
+var options27 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps25 = {
+var defaultProps26 = {
   tab: "date",
   size: Size.medium,
   actionButtons: true
 };
 var DateTimeSelector = (props) => {
   const {
-    size = defaultProps25.size,
-    tab = defaultProps25.tab,
-    actionButtons = defaultProps25.actionButtons,
+    size = defaultProps26.size,
+    tab = defaultProps26.tab,
+    actionButtons = defaultProps26.actionButtons,
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
     "div",
     {
       ...other,
@@ -6292,34 +6399,34 @@ var DateTimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(ButtonGroup, { stretched: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(ButtonGroup, { stretched: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "k-datetime-calendar-wrap" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Calendar, { size, showOtherMonth: true, dir }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "k-datetime-time-wrap" })
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "k-datetime-calendar-wrap" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Calendar, { size, showOtherMonth: true, dir }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "k-datetime-time-wrap" })
         ] }) }),
-        actionButtons && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { size, className: "k-time-cancel", children: "Cancel" })
+        actionButtons && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Button, { size, className: "k-time-cancel", children: "Cancel" })
         ] })
       ]
     }
   );
 };
-DateTimeSelector.states = states29;
-DateTimeSelector.options = options26;
+DateTimeSelector.states = states30;
+DateTimeSelector.options = options27;
 DateTimeSelector.className = DATETIMESELECTOR_CLASSNAME;
-DateTimeSelector.defaultProps = defaultProps25;
+DateTimeSelector.defaultProps = defaultProps26;
 
 // src/datetimepicker/datetimepicker.spec.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var DATETIMEPICKER_CLASSNAME = `k-datetimepicker`;
-var states30 = [
+var states31 = [
   States.hover,
   States.focus,
   States.valid,
@@ -6329,12 +6436,12 @@ var states30 = [
   States.loading,
   States.readonly
 ];
-var options27 = {
+var options28 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps26 = {
+var defaultProps27 = {
   tab: "date",
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
@@ -6358,14 +6465,14 @@ var DateTimePicker = (props) => {
     disabled,
     readonly,
     opened,
-    tab = defaultProps26.tab,
+    tab = defaultProps27.tab,
     dir,
     adaptive,
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
       Input,
       {
         ...other,
@@ -6383,9 +6490,9 @@ var DateTimePicker = (props) => {
         readonly,
         className: classNames(props.className, DATETIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -6394,14 +6501,14 @@ var DateTimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             InputClearValue,
             {
               loading,
@@ -6410,8 +6517,8 @@ var DateTimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -6424,9 +6531,9 @@ var DateTimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DateTimeSelector, { tab, dir }) }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    opened && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DateTimeSelector, { tab, dir }) }),
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6434,29 +6541,29 @@ var DateTimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DateTimeSelector, { size: "large", tab, actionButtons: false }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(DateTimeSelector, { size: "large", tab, actionButtons: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
     ] })
   ] });
 };
-DateTimePicker.states = states30;
-DateTimePicker.options = options27;
+DateTimePicker.states = states31;
+DateTimePicker.options = options28;
 DateTimePicker.className = DATETIMEPICKER_CLASSNAME;
-DateTimePicker.defaultProps = defaultProps26;
+DateTimePicker.defaultProps = defaultProps27;
 
 // src/datetimepicker/templates/datetimepicker-normal.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 
 // src/datetimepicker/templates/datetimepicker-popup.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 
 // src/datetimepicker/templates/datetimepicker-adaptive.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 
 // src/timepicker/timepicker.spec.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var TIMEPICKER_CLASSNAME = `k-timepicker`;
-var states31 = [
+var states32 = [
   States.hover,
   States.focus,
   States.valid,
@@ -6466,12 +6573,12 @@ var states31 = [
   States.loading,
   States.readonly
 ];
-var options28 = {
+var options29 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps27 = {
+var defaultProps28 = {
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
@@ -6498,8 +6605,8 @@ var TimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
       Input,
       {
         ...other,
@@ -6516,9 +6623,9 @@ var TimePicker = (props) => {
         readonly,
         className: classNames(props.className, TIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -6527,14 +6634,14 @@ var TimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             InputClearValue,
             {
               loading,
@@ -6543,8 +6650,8 @@ var TimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -6557,15 +6664,15 @@ var TimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Popup, { className: "k-list-container k-timepicker-popup", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { className: "k-time-cancel", children: "Cancel" })
+    opened && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Popup, { className: "k-list-container k-timepicker-popup", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Button, { className: "k-time-cancel", children: "Cancel" })
       ] })
     ] }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6573,29 +6680,29 @@ var TimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
     ] })
   ] });
 };
-TimePicker.states = states31;
-TimePicker.options = options28;
+TimePicker.states = states32;
+TimePicker.options = options29;
 TimePicker.className = TIMEPICKER_CLASSNAME;
-TimePicker.defaultProps = defaultProps27;
+TimePicker.defaultProps = defaultProps28;
 
 // src/timepicker/templates/timepicker-normal.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 
 // src/timepicker/templates/timepicker-popup.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 
 // src/timepicker/templates/timepicker-adaptive.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 
 // src/form/form-field.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var FORMFIELD_CLASSNAME = "k-form-field";
-var states32 = [
+var states33 = [
   States.disabled
 ];
 var FormField = (props) => {
@@ -6611,7 +6718,7 @@ var FormField = (props) => {
     dir,
     colSpan
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "div",
     {
       className: classNames(
@@ -6624,19 +6731,19 @@ var FormField = (props) => {
       ),
       dir,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("label", { className: classNames(
+        label && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("label", { className: classNames(
           "k-label",
           "k-form-label"
         ), children: [
           label,
-          optional && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
-          info && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "k-field-info", children: "(field info)" })
+          optional && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
+          info && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "k-field-info", children: "(field info)" })
         ] }),
-        orientation === "horizontal" && !label && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "k-label k-form-label k-label-empty" }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "k-form-field-wrap", children: [
+        orientation === "horizontal" && !label && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "k-label k-form-label k-label-empty" }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "k-form-field-wrap", children: [
           editor,
-          hint && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "k-form-hint", children: hint }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "k-form-error", children: error })
+          hint && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "k-form-hint", children: hint }),
+          error && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "k-form-error", children: error })
         ] })
       ]
     }
@@ -6645,7 +6752,7 @@ var FormField = (props) => {
 FormField.className = FORMFIELD_CLASSNAME;
 
 // src/form/fieldset.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var FIELDSET_CLASSNAME = "k-form-fieldset";
 var Fieldset = (props) => {
   const {
@@ -6655,9 +6762,9 @@ var Fieldset = (props) => {
     gapX,
     gapY
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-    legend && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("legend", { className: "k-form-legend", children: legend }),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
+    legend && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("legend", { className: "k-form-legend", children: legend }),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6665,37 +6772,37 @@ var Fieldset = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_jsx_runtime72.Fragment, { children: props.children })
+    ), children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: props.children })
   ] });
 };
 Fieldset.className = FIELDSET_CLASSNAME;
 
 // src/form/form.spec.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var import_react = require("react");
 var FORM_CLASSNAME = "k-form";
-var states33 = [];
-var options29 = {
+var states34 = [];
+var options30 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps28 = {
+var defaultProps29 = {
   size: Size.medium,
   layout: "basic",
   tag: "form"
 };
 var Form = (props) => {
   const {
-    size = defaultProps28.size,
+    size = defaultProps29.size,
     orientation,
-    layout = defaultProps28.layout,
+    layout = defaultProps29.layout,
     formButtons,
     cols,
     gapX,
     gapY,
-    tag = defaultProps28.tag,
+    tag = defaultProps29.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className14, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("form", { className: className14, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: className14, children: children2 });
+  const Parent = ({ tag: tag2, className: className14, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("form", { className: className14, children: children2 }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: className14, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -6714,7 +6821,7 @@ var Form = (props) => {
       children.type === Fieldset && formChildren.push(/* @__PURE__ */ (0, import_react.createElement)(Fieldset, { ...children.props, key: `${(/* @__PURE__ */ new Date()).getTime()}` }));
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Parent, { tag, className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(Parent, { tag, className: classNames(
     props.className,
     FORM_CLASSNAME,
     optionClassNames(FORM_CLASSNAME, {
@@ -6724,7 +6831,7 @@ var Form = (props) => {
       [`${FORM_CLASSNAME}-${orientation}`]: orientation
     }
   ), children: [
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: classNames(
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6732,99 +6839,99 @@ var Form = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: formChildren }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: formChildren }),
-    formButtons && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "k-form-buttons", children: formButtons })
+    ), children: formChildren }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_jsx_runtime77.Fragment, { children: formChildren }),
+    formButtons && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "k-form-buttons", children: formButtons })
   ] });
 };
-Form.states = states33;
-Form.options = options29;
+Form.states = states34;
+Form.options = options30;
 Form.className = FORM_CLASSNAME;
-Form.defaultProps = defaultProps28;
+Form.defaultProps = defaultProps29;
 
 // src/form/tests/form-field-dateinputs.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var styles = `
     section {
         padding: 20px;
         border: 1px dashed gray;
     }
 `;
-var form_field_dateinputs_default = () => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Vertical Form" }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { children: "Horizontal Form" }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Form, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+var form_field_dateinputs_default = () => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: "Vertical Form" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: "Horizontal Form" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(Form, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DateInput:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DateInput, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DateInput, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DatePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DatePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DatePicker, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DateTimePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DateTimePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DateTimePicker, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DateRangePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DateRangePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DateRangePicker, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "TimePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TimePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TimePicker, {})
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(Form, { orientation: "horizontal", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(Form, { orientation: "horizontal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DateInput:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DateInput, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DateInput, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DatePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DatePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DatePicker, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DateTimePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DateTimePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DateTimePicker, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "DateRangePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DateRangePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DateRangePicker, {})
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         FormField,
         {
           label: "TimePicker:",
-          editor: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TimePicker, {})
+          editor: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TimePicker, {})
         }
       )
     ] }) })