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

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

@@ -5866,17 +5866,124 @@ FloatingLabel.options = options21;
 FloatingLabel.className = FLOATINGLABEL_CLASSNAME;
 FloatingLabel.defaultProps = defaultProps20;
 
+// src/textbox/textbox.spec.tsx
+import { jsx as jsx44, jsxs as jsxs16 } from "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__ */ jsxs16(
+    Input,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, TEXTBOX_CLASSNAME),
+      children: [
+        /* @__PURE__ */ jsx44(InputPrefix, { children: prefix }),
+        /* @__PURE__ */ jsx44(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx44(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx44(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showClearButton && /* @__PURE__ */ jsx44(
+          InputClearValue,
+          {
+            loading,
+            disabled,
+            readonly,
+            value
+          }
+        ),
+        /* @__PURE__ */ jsx44(InputSuffix, { children: suffix })
+      ]
+    }
+  );
+};
+Textbox.states = states24;
+Textbox.options = options22;
+Textbox.className = TEXTBOX_CLASSNAME;
+Textbox.defaultProps = defaultProps21;
+
+// src/textbox/templates/textbox-normal.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+
+// src/textbox/templates/textbox-prefix.tsx
+import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// src/textbox/templates/textbox-suffix.tsx
+import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
+
 // src/floating-label/templates/floating-label-normal.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 
 // src/multiviewcalendar/multiviewcalendar.spec.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "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,
@@ -5885,11 +5992,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,
@@ -5897,7 +6004,7 @@ var MultiViewCalendar = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     Calendar,
     {
       ...other,
@@ -5919,23 +6026,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
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx50, jsxs as jsxs19 } from "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,
@@ -5949,8 +6056,8 @@ var DateRangePicker = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs16(Fragment15, { children: [
-    /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs19(Fragment17, { children: [
+    /* @__PURE__ */ jsxs19(
       "span",
       {
         ...other,
@@ -5961,7 +6068,7 @@ var DateRangePicker = (props) => {
           stateClassNames(DATERANGEPICKER_CLASSNAME, { disabled })
         ),
         children: [
-          /* @__PURE__ */ jsx46(FloatingLabel, { label: "Start", children: /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx50(FloatingLabel, { label: "Start", children: /* @__PURE__ */ jsx50(
             DateInput,
             {
               showSpinButton: false,
@@ -5970,7 +6077,7 @@ var DateRangePicker = (props) => {
               fillMode
             }
           ) }),
-          swapButton && /* @__PURE__ */ jsx46(
+          swapButton && /* @__PURE__ */ jsx50(
             Button,
             {
               rounded,
@@ -5980,7 +6087,7 @@ var DateRangePicker = (props) => {
               iconClassName: "k-rotate-90"
             }
           ),
-          /* @__PURE__ */ jsx46(FloatingLabel, { label: "End", children: /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx50(FloatingLabel, { label: "End", children: /* @__PURE__ */ jsx50(
             DateInput,
             {
               showSpinButton: false,
@@ -5992,9 +6099,9 @@ var DateRangePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsx46(Popup, { className: "k-calendar-container k-daterangepicker-popup", children: /* @__PURE__ */ jsx46(MultiViewCalendar, { dir }) }),
-    adaptive && /* @__PURE__ */ jsxs16(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx46(
+    opened && /* @__PURE__ */ jsx50(Popup, { className: "k-calendar-container k-daterangepicker-popup", children: /* @__PURE__ */ jsx50(MultiViewCalendar, { dir }) }),
+    adaptive && /* @__PURE__ */ jsxs19(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx50(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6002,44 +6109,44 @@ var DateRangePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx46("div", { className: "k-scrollable-wrap", children: /* @__PURE__ */ jsx46(MultiViewCalendar, { size: "large", calendarView: "month", orientation: "vertical", showCalendarCaption: true }) })
+      /* @__PURE__ */ jsx50("div", { className: "k-scrollable-wrap", children: /* @__PURE__ */ jsx50(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
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 
 // src/daterangepicker/templates/daterangepicker-popup.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 
 // src/daterangepicker/templates/daterangepicker-adaptive.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 
 // src/button-group/button-group.spec.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "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__ */ jsx50(
+  return /* @__PURE__ */ jsx54(
     "div",
     {
       ...other,
@@ -6060,36 +6167,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
-import { jsx as jsx51, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs20 } from "react/jsx-runtime";
 
 // src/button-group/templates/icon-text-button-group.tsx
-import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs21 } from "react/jsx-runtime";
 
 // src/button-group/templates/text-button-group.tsx
-import { jsx as jsx53, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
 
 // src/button-group/templates/mixed-button-group.tsx
-import { jsx as jsx54, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 
 // src/time-selector/time-selector.spec.tsx
-import { Fragment as Fragment16, jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx59, jsxs as jsxs24 } from "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,
@@ -6105,9 +6212,9 @@ var TimeSelector = (props) => {
     if (index === 0 || columnType === "tt") {
       separator = false;
     }
-    return /* @__PURE__ */ jsx55(Fragment16, { children: /* @__PURE__ */ jsx55(TimeSelectorColumn, { type: columnType, focus, separator }) });
+    return /* @__PURE__ */ jsx59(Fragment18, { children: /* @__PURE__ */ jsx59(TimeSelectorColumn, { type: columnType, focus, separator }) });
   });
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ...other,
@@ -6119,24 +6226,24 @@ var TimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ jsx55(Fragment16, { children: header }),
-        /* @__PURE__ */ jsx55(Fragment16, { children: fastSelection }),
-        /* @__PURE__ */ jsxs21("div", { className: "k-time-list-container", children: [
-          /* @__PURE__ */ jsx55("span", { className: "k-time-highlight" }),
+        /* @__PURE__ */ jsx59(Fragment18, { children: header }),
+        /* @__PURE__ */ jsx59(Fragment18, { children: fastSelection }),
+        /* @__PURE__ */ jsxs24("div", { className: "k-time-list-container", children: [
+          /* @__PURE__ */ jsx59("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
-import { Fragment as Fragment17, jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
-var states28 = [
+import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+var states29 = [
   States.focus
 ];
 var TimeSelectorColumn = (props) => {
@@ -6174,11 +6281,11 @@ var TimeSelectorColumn = (props) => {
       break;
   }
   const items = columnData.map(
-    (data) => /* @__PURE__ */ jsx56(Fragment17, { children: /* @__PURE__ */ jsx56("li", { className: "k-item", children: /* @__PURE__ */ jsx56("span", { children: data }) }) })
+    (data) => /* @__PURE__ */ jsx60(Fragment19, { children: /* @__PURE__ */ jsx60("li", { className: "k-item", children: /* @__PURE__ */ jsx60("span", { children: data }) }) })
   );
-  return /* @__PURE__ */ jsxs22(Fragment17, { children: [
-    separator && /* @__PURE__ */ jsx56("div", { className: "k-time-separator", children: ":" }),
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs25(Fragment19, { children: [
+    separator && /* @__PURE__ */ jsx60("div", { className: "k-time-separator", children: ":" }),
+    /* @__PURE__ */ jsxs25(
       "div",
       {
         ...other,
@@ -6190,10 +6297,10 @@ var TimeSelectorColumn = (props) => {
           })
         ),
         children: [
-          /* @__PURE__ */ jsx56("span", { className: "k-title", children: text }),
-          /* @__PURE__ */ jsx56("div", { className: "k-time-list", children: /* @__PURE__ */ jsxs22("div", { className: "k-content k-scrollable k-time-container", children: [
-            /* @__PURE__ */ jsx56("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
-            /* @__PURE__ */ jsx56("div", { className: "k-scrollable-placeholder" })
+          /* @__PURE__ */ jsx60("span", { className: "k-title", children: text }),
+          /* @__PURE__ */ jsx60("div", { className: "k-time-list", children: /* @__PURE__ */ jsxs25("div", { className: "k-content k-scrollable k-time-container", children: [
+            /* @__PURE__ */ jsx60("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
+            /* @__PURE__ */ jsx60("div", { className: "k-scrollable-placeholder" })
           ] }) })
         ]
       }
@@ -6202,14 +6309,14 @@ var TimeSelectorColumn = (props) => {
 };
 
 // src/time-selector/time-selector-header.tsx
-import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
 var className13 = `k-time-header`;
 var TimeSelectorHeader = (props) => {
   const {
     title,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       ...other,
@@ -6218,7 +6325,7 @@ var TimeSelectorHeader = (props) => {
         className13
       ),
       children: [
-        title != null && /* @__PURE__ */ jsx57("span", { className: "k-title", children: title }),
+        title != null && /* @__PURE__ */ jsx61("span", { className: "k-title", children: title }),
         props.children
       ]
     }
@@ -6226,38 +6333,38 @@ var TimeSelectorHeader = (props) => {
 };
 
 // src/time-selector/time-selector-fast-selection.tsx
-import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
 
 // src/time-selector/templates/time-selector-all.tsx
-import { jsx as jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
 
 // src/time-selector/templates/time-selector-hour.tsx
-import { jsx as jsx60, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
 
 // src/time-selector/templates/time-selector-minute.tsx
-import { jsx as jsx61, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
 
 // src/datetime-selector/datetime-selector.spec.tsx
-import { Fragment as Fragment18, jsx as jsx62, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx66, jsxs as jsxs31 } from "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__ */ jsxs28(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ...other,
@@ -6273,34 +6380,34 @@ var DateTimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ jsx62("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ jsxs28(ButtonGroup, { stretched: true, children: [
-          /* @__PURE__ */ jsx62(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
-          /* @__PURE__ */ jsx62(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
+        /* @__PURE__ */ jsx66("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ jsxs31(ButtonGroup, { stretched: true, children: [
+          /* @__PURE__ */ jsx66(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
+          /* @__PURE__ */ jsx66(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
         ] }) }),
-        /* @__PURE__ */ jsx62("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ jsxs28(Fragment18, { children: [
-          /* @__PURE__ */ jsx62("div", { className: "k-datetime-calendar-wrap" }),
-          /* @__PURE__ */ jsx62("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ jsx62(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx62(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx62(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
-        ] }) : /* @__PURE__ */ jsxs28(Fragment18, { children: [
-          /* @__PURE__ */ jsx62("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ jsx62(Calendar, { size, showOtherMonth: true, dir }) }),
-          /* @__PURE__ */ jsx62("div", { className: "k-datetime-time-wrap" })
+        /* @__PURE__ */ jsx66("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ jsxs31(Fragment20, { children: [
+          /* @__PURE__ */ jsx66("div", { className: "k-datetime-calendar-wrap" }),
+          /* @__PURE__ */ jsx66("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ jsx66(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx66(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx66(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
+        ] }) : /* @__PURE__ */ jsxs31(Fragment20, { children: [
+          /* @__PURE__ */ jsx66("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ jsx66(Calendar, { size, showOtherMonth: true, dir }) }),
+          /* @__PURE__ */ jsx66("div", { className: "k-datetime-time-wrap" })
         ] }) }),
-        actionButtons && /* @__PURE__ */ jsxs28(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
-          /* @__PURE__ */ jsx62(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
-          /* @__PURE__ */ jsx62(Button, { size, className: "k-time-cancel", children: "Cancel" })
+        actionButtons && /* @__PURE__ */ jsxs31(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
+          /* @__PURE__ */ jsx66(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
+          /* @__PURE__ */ jsx66(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
-import { Fragment as Fragment19, jsx as jsx63, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
 var DATETIMEPICKER_CLASSNAME = `k-datetimepicker`;
-var states30 = [
+var states31 = [
   States.hover,
   States.focus,
   States.valid,
@@ -6310,12 +6417,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,
@@ -6339,14 +6446,14 @@ var DateTimePicker = (props) => {
     disabled,
     readonly,
     opened,
-    tab = defaultProps26.tab,
+    tab = defaultProps27.tab,
     dir,
     adaptive,
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs29(Fragment19, { children: [
-    /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs32(Fragment21, { children: [
+    /* @__PURE__ */ jsxs32(
       Input,
       {
         ...other,
@@ -6364,9 +6471,9 @@ var DateTimePicker = (props) => {
         readonly,
         className: classNames(props.className, DATETIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx63(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx63(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx67(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx67(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ jsx67(
             InputValidationIcon,
             {
               valid,
@@ -6375,14 +6482,14 @@ var DateTimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx67(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx67(
             InputClearValue,
             {
               loading,
@@ -6391,8 +6498,8 @@ var DateTimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ jsx63(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx67(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx67(
             Button,
             {
               className: "k-input-button",
@@ -6405,9 +6512,9 @@ var DateTimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsx63(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ jsx63(DateTimeSelector, { tab, dir }) }),
-    adaptive && /* @__PURE__ */ jsxs29(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx63(
+    opened && /* @__PURE__ */ jsx67(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ jsx67(DateTimeSelector, { tab, dir }) }),
+    adaptive && /* @__PURE__ */ jsxs32(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx67(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6415,29 +6522,29 @@ var DateTimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx63(DateTimeSelector, { size: "large", tab, actionButtons: false }),
-      /* @__PURE__ */ jsx63(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
+      /* @__PURE__ */ jsx67(DateTimeSelector, { size: "large", tab, actionButtons: false }),
+      /* @__PURE__ */ jsx67(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
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 
 // src/datetimepicker/templates/datetimepicker-popup.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 
 // src/datetimepicker/templates/datetimepicker-adaptive.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 
 // src/timepicker/timepicker.spec.tsx
-import { Fragment as Fragment20, jsx as jsx67, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx71, jsxs as jsxs33 } from "react/jsx-runtime";
 var TIMEPICKER_CLASSNAME = `k-timepicker`;
-var states31 = [
+var states32 = [
   States.hover,
   States.focus,
   States.valid,
@@ -6447,12 +6554,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
@@ -6479,8 +6586,8 @@ var TimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs30(Fragment20, { children: [
-    /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs33(Fragment22, { children: [
+    /* @__PURE__ */ jsxs33(
       Input,
       {
         ...other,
@@ -6497,9 +6604,9 @@ var TimePicker = (props) => {
         readonly,
         className: classNames(props.className, TIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx67(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx67(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx71(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx71(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ jsx71(
             InputValidationIcon,
             {
               valid,
@@ -6508,14 +6615,14 @@ var TimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx71(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx71(
             InputClearValue,
             {
               loading,
@@ -6524,8 +6631,8 @@ var TimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ jsx67(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx71(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx71(
             Button,
             {
               className: "k-input-button",
@@ -6538,15 +6645,15 @@ var TimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsxs30(Popup, { className: "k-list-container k-timepicker-popup", children: [
-      /* @__PURE__ */ jsx67(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx67(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx67(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ jsxs30(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
-        /* @__PURE__ */ jsx67(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
-        /* @__PURE__ */ jsx67(Button, { className: "k-time-cancel", children: "Cancel" })
+    opened && /* @__PURE__ */ jsxs33(Popup, { className: "k-list-container k-timepicker-popup", children: [
+      /* @__PURE__ */ jsx71(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx71(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx71(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ jsxs33(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
+        /* @__PURE__ */ jsx71(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
+        /* @__PURE__ */ jsx71(Button, { className: "k-time-cancel", children: "Cancel" })
       ] })
     ] }),
-    adaptive && /* @__PURE__ */ jsxs30(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx67(
+    adaptive && /* @__PURE__ */ jsxs33(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx71(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -6554,29 +6661,29 @@ var TimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx67(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ jsx67(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ jsx67(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ jsx67(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
+      /* @__PURE__ */ jsx71(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ jsx71(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ jsx71(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ jsx71(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
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 
 // src/timepicker/templates/timepicker-popup.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 
 // src/timepicker/templates/timepicker-adaptive.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 
 // src/form/form-field.tsx
-import { jsx as jsx71, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs34 } from "react/jsx-runtime";
 var FORMFIELD_CLASSNAME = "k-form-field";
-var states32 = [
+var states33 = [
   States.disabled
 ];
 var FormField = (props) => {
@@ -6592,7 +6699,7 @@ var FormField = (props) => {
     dir,
     colSpan
   } = props;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       className: classNames(
@@ -6605,19 +6712,19 @@ var FormField = (props) => {
       ),
       dir,
       children: [
-        label && /* @__PURE__ */ jsxs31("label", { className: classNames(
+        label && /* @__PURE__ */ jsxs34("label", { className: classNames(
           "k-label",
           "k-form-label"
         ), children: [
           label,
-          optional && /* @__PURE__ */ jsx71("span", { className: "k-label-optional", children: "(Optional)" }),
-          info && /* @__PURE__ */ jsx71("span", { className: "k-field-info", children: "(field info)" })
+          optional && /* @__PURE__ */ jsx75("span", { className: "k-label-optional", children: "(Optional)" }),
+          info && /* @__PURE__ */ jsx75("span", { className: "k-field-info", children: "(field info)" })
         ] }),
-        orientation === "horizontal" && !label && /* @__PURE__ */ jsx71("span", { className: "k-label k-form-label k-label-empty" }),
-        /* @__PURE__ */ jsxs31("div", { className: "k-form-field-wrap", children: [
+        orientation === "horizontal" && !label && /* @__PURE__ */ jsx75("span", { className: "k-label k-form-label k-label-empty" }),
+        /* @__PURE__ */ jsxs34("div", { className: "k-form-field-wrap", children: [
           editor,
-          hint && /* @__PURE__ */ jsx71("div", { className: "k-form-hint", children: hint }),
-          error && /* @__PURE__ */ jsx71("div", { className: "k-form-error", children: error })
+          hint && /* @__PURE__ */ jsx75("div", { className: "k-form-hint", children: hint }),
+          error && /* @__PURE__ */ jsx75("div", { className: "k-form-error", children: error })
         ] })
       ]
     }
@@ -6626,7 +6733,7 @@ var FormField = (props) => {
 FormField.className = FORMFIELD_CLASSNAME;
 
 // src/form/fieldset.tsx
-import { Fragment as Fragment21, jsx as jsx72, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment23, jsx as jsx76, jsxs as jsxs35 } from "react/jsx-runtime";
 var FIELDSET_CLASSNAME = "k-form-fieldset";
 var Fieldset = (props) => {
   const {
@@ -6636,9 +6743,9 @@ var Fieldset = (props) => {
     gapX,
     gapY
   } = props;
-  return /* @__PURE__ */ jsxs32("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-    legend && /* @__PURE__ */ jsx72("legend", { className: "k-form-legend", children: legend }),
-    layout === "grid" ? /* @__PURE__ */ jsx72("div", { className: classNames(
+  return /* @__PURE__ */ jsxs35("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
+    legend && /* @__PURE__ */ jsx76("legend", { className: "k-form-legend", children: legend }),
+    layout === "grid" ? /* @__PURE__ */ jsx76("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6646,37 +6753,37 @@ var Fieldset = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: props.children }) : /* @__PURE__ */ jsx72(Fragment21, { children: props.children })
+    ), children: props.children }) : /* @__PURE__ */ jsx76(Fragment23, { children: props.children })
   ] });
 };
 Fieldset.className = FIELDSET_CLASSNAME;
 
 // src/form/form.spec.tsx
-import { Fragment as Fragment22, jsx as jsx73, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx77, jsxs as jsxs36 } from "react/jsx-runtime";
 import { createElement } from "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__ */ jsx73("form", { className: className14, children: children2 }) : /* @__PURE__ */ jsx73("div", { className: className14, children: children2 });
+  const Parent = ({ tag: tag2, className: className14, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx77("form", { className: className14, children: children2 }) : /* @__PURE__ */ jsx77("div", { className: className14, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -6695,7 +6802,7 @@ var Form = (props) => {
       children.type === Fieldset && formChildren.push(/* @__PURE__ */ createElement(Fieldset, { ...children.props, key: `${(/* @__PURE__ */ new Date()).getTime()}` }));
     }
   }
-  return /* @__PURE__ */ jsxs33(Parent, { tag, className: classNames(
+  return /* @__PURE__ */ jsxs36(Parent, { tag, className: classNames(
     props.className,
     FORM_CLASSNAME,
     optionClassNames(FORM_CLASSNAME, {
@@ -6705,7 +6812,7 @@ var Form = (props) => {
       [`${FORM_CLASSNAME}-${orientation}`]: orientation
     }
   ), children: [
-    layout === "grid" ? /* @__PURE__ */ jsx73("div", { className: classNames(
+    layout === "grid" ? /* @__PURE__ */ jsx77("div", { className: classNames(
       "k-form-layout",
       "k-d-grid",
       {
@@ -6713,99 +6820,99 @@ var Form = (props) => {
         [`k-gap-x-${gapX}`]: gapX,
         [`k-gap-y-${gapY}`]: gapY
       }
-    ), children: formChildren }) : /* @__PURE__ */ jsx73(Fragment22, { children: formChildren }),
-    formButtons && /* @__PURE__ */ jsx73("div", { className: "k-form-buttons", children: formButtons })
+    ), children: formChildren }) : /* @__PURE__ */ jsx77(Fragment24, { children: formChildren }),
+    formButtons && /* @__PURE__ */ jsx77("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
-import { Fragment as Fragment23, jsx as jsx74, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx78, jsxs as jsxs37 } from "react/jsx-runtime";
 var styles = `
     section {
         padding: 20px;
         border: 1px dashed gray;
     }
 `;
-var form_field_dateinputs_default = () => /* @__PURE__ */ jsxs34(Fragment23, { children: [
-  /* @__PURE__ */ jsx74("style", { children: styles }),
-  /* @__PURE__ */ jsxs34("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx74("span", { children: "Vertical Form" }),
-    /* @__PURE__ */ jsx74("span", { children: "Horizontal Form" }),
-    /* @__PURE__ */ jsx74("section", { children: /* @__PURE__ */ jsxs34(Form, { children: [
-      /* @__PURE__ */ jsx74(
+var form_field_dateinputs_default = () => /* @__PURE__ */ jsxs37(Fragment25, { children: [
+  /* @__PURE__ */ jsx78("style", { children: styles }),
+  /* @__PURE__ */ jsxs37("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ jsx78("span", { children: "Vertical Form" }),
+    /* @__PURE__ */ jsx78("span", { children: "Horizontal Form" }),
+    /* @__PURE__ */ jsx78("section", { children: /* @__PURE__ */ jsxs37(Form, { children: [
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DateInput:",
-          editor: /* @__PURE__ */ jsx74(DateInput, {})
+          editor: /* @__PURE__ */ jsx78(DateInput, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DatePicker:",
-          editor: /* @__PURE__ */ jsx74(DatePicker, {})
+          editor: /* @__PURE__ */ jsx78(DatePicker, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DateTimePicker:",
-          editor: /* @__PURE__ */ jsx74(DateTimePicker, {})
+          editor: /* @__PURE__ */ jsx78(DateTimePicker, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DateRangePicker:",
-          editor: /* @__PURE__ */ jsx74(DateRangePicker, {})
+          editor: /* @__PURE__ */ jsx78(DateRangePicker, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "TimePicker:",
-          editor: /* @__PURE__ */ jsx74(TimePicker, {})
+          editor: /* @__PURE__ */ jsx78(TimePicker, {})
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx74("section", { children: /* @__PURE__ */ jsxs34(Form, { orientation: "horizontal", children: [
-      /* @__PURE__ */ jsx74(
+    /* @__PURE__ */ jsx78("section", { children: /* @__PURE__ */ jsxs37(Form, { orientation: "horizontal", children: [
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DateInput:",
-          editor: /* @__PURE__ */ jsx74(DateInput, {})
+          editor: /* @__PURE__ */ jsx78(DateInput, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DatePicker:",
-          editor: /* @__PURE__ */ jsx74(DatePicker, {})
+          editor: /* @__PURE__ */ jsx78(DatePicker, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DateTimePicker:",
-          editor: /* @__PURE__ */ jsx74(DateTimePicker, {})
+          editor: /* @__PURE__ */ jsx78(DateTimePicker, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "DateRangePicker:",
-          editor: /* @__PURE__ */ jsx74(DateRangePicker, {})
+          editor: /* @__PURE__ */ jsx78(DateRangePicker, {})
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx78(
         FormField,
         {
           label: "TimePicker:",
-          editor: /* @__PURE__ */ jsx74(TimePicker, {})
+          editor: /* @__PURE__ */ jsx78(TimePicker, {})
         }
       )
     ] }) })