@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170

package/dist/scheduler/tests/scheduler-edit-dialog.js

@@ -433,10 +433,7 @@
               "k-hidden": minimized
             }
           ), children: props.children }),
-          actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { themeColor: "primary", children: "Update" })
-          ] })
+          actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions", children: actionButtons })
         ]
       })
     );
@@ -841,29 +838,272 @@
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classNames(className8, props.className), children: props.children });
   };
 
-  // src/popup/popup.spec.tsx
+  // src/textarea/textarea.spec.tsx
   var import_jsx_runtime16 = __require("react/jsx-runtime");
+  var TEXTAREA_CLASSNAME = `k-textarea`;
+  var states13 = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading
+  ];
+  var options12 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  };
+  var defaultProps10 = {
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+  };
+  var Textarea = (props) => {
+    const _a = props, {
+      rows,
+      value,
+      placeholder,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled
+    } = _a, other = __objRest(_a, [
+      "rows",
+      "value",
+      "placeholder",
+      "size",
+      "rounded",
+      "fillMode",
+      "hover",
+      "focus",
+      "valid",
+      "invalid",
+      "required",
+      "loading",
+      "disabled"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Input,
+      __spreadProps(__spreadValues({}, other), {
+        size,
+        rounded,
+        fillMode,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        className: classNames(props.className, TEXTAREA_CLASSNAME),
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          InputInnerTextarea,
+          {
+            className: "!k-overflow-auto",
+            value,
+            placeholder,
+            rows
+          }
+        )
+      })
+    );
+  };
+  Textarea.states = states13;
+  Textarea.options = options12;
+  Textarea.className = TEXTAREA_CLASSNAME;
+  Textarea.defaultProps = defaultProps10;
+
+  // src/textbox/textbox.spec.tsx
+  var import_jsx_runtime17 = __require("react/jsx-runtime");
+  var TEXTBOX_CLASSNAME = `k-textbox`;
+  var states14 = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
+  ];
+  var options13 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  };
+  var defaultProps11 = {
+    showClearButton: true,
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+  };
+  var Textbox = (props) => {
+    const _a = props, {
+      prefix,
+      suffix,
+      value,
+      placeholder,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      showClearButton = defaultProps11.showClearButton
+    } = _a, other = __objRest(_a, [
+      "prefix",
+      "suffix",
+      "value",
+      "placeholder",
+      "size",
+      "rounded",
+      "fillMode",
+      "hover",
+      "focus",
+      "valid",
+      "invalid",
+      "required",
+      "loading",
+      "disabled",
+      "readonly",
+      "showClearButton"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      Input,
+      __spreadProps(__spreadValues({}, other), {
+        size,
+        rounded,
+        fillMode,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        className: classNames(props.className, TEXTBOX_CLASSNAME),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            InputValidationIcon,
+            {
+              valid,
+              invalid,
+              loading,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            InputLoadingIcon,
+            {
+              loading,
+              disabled
+            }
+          ),
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            InputClearValue,
+            {
+              loading,
+              disabled,
+              readonly,
+              value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(InputSuffix, { children: suffix })
+        ]
+      })
+    );
+  };
+  Textbox.states = states14;
+  Textbox.options = options13;
+  Textbox.className = TEXTBOX_CLASSNAME;
+  Textbox.defaultProps = defaultProps11;
+
+  // src/popup/popup.spec.tsx
+  var import_jsx_runtime18 = __require("react/jsx-runtime");
   var POPUP_CLASSNAME = `k-popup`;
-  var states13 = [];
-  var options12 = {};
-  var defaultProps10 = {};
+  var states15 = [];
+  var options14 = {};
+  var defaultProps12 = {};
   var Popup = (props) => {
     const other = __objRest(props, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", __spreadProps(__spreadValues({}, other), { className: classNames(props.className, POPUP_CLASSNAME), children: props.children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", __spreadProps(__spreadValues({}, other), { className: classNames(props.className, POPUP_CLASSNAME), children: props.children }));
   };
-  Popup.states = states13;
-  Popup.options = options12;
+  Popup.states = states15;
+  Popup.options = options14;
   Popup.className = POPUP_CLASSNAME;
-  Popup.defaultProps = defaultProps10;
+  Popup.defaultProps = defaultProps12;
+
+  // src/button-group/button-group.spec.tsx
+  var import_jsx_runtime19 = __require("react/jsx-runtime");
+  var BUTTONGROUP_CLASSNAME = `k-button-group`;
+  var states16 = [
+    States.disabled
+  ];
+  var options15 = {
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
+  };
+  var defaultProps13 = {
+    fillMode: FillMode.solid
+  };
+  var ButtonGroup = (props) => {
+    const _a = props, {
+      fillMode = defaultProps13.fillMode,
+      disabled,
+      stretched
+    } = _a, other = __objRest(_a, [
+      "fillMode",
+      "disabled",
+      "stretched"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          BUTTONGROUP_CLASSNAME,
+          optionClassNames(BUTTONGROUP_CLASSNAME, {
+            fillMode
+          }),
+          stateClassNames(BUTTONGROUP_CLASSNAME, {
+            disabled
+          }),
+          {
+            [`${BUTTONGROUP_CLASSNAME}-stretched`]: stretched
+          }
+        ),
+        children: props.children
+      })
+    );
+  };
+  ButtonGroup.states = states16;
+  ButtonGroup.options = options15;
+  ButtonGroup.className = BUTTONGROUP_CLASSNAME;
+  ButtonGroup.defaultProps = defaultProps13;
 
   // src/calendar/calendar.spec.tsx
-  var import_jsx_runtime17 = __require("react/jsx-runtime");
+  var import_jsx_runtime20 = __require("react/jsx-runtime");
   var CALENDAR_CLASSNAME = `k-calendar`;
-  var states14 = [];
-  var options13 = {
+  var states17 = [];
+  var options16 = {
     size: [Size.small, Size.medium, Size.large]
   };
-  var defaultProps11 = {
+  var defaultProps14 = {
     size: Size.medium,
     viewsCount: 1,
     orientation: "horizontal",
@@ -872,11 +1112,11 @@
   };
   var Calendar = (props) => {
     const _a = props, {
-      size = defaultProps11.size,
-      orientation = defaultProps11.orientation,
-      calendarView = defaultProps11.calendarView,
-      calendarHeaderText = defaultProps11.calendarHeaderText,
-      viewsCount = defaultProps11.viewsCount,
+      size = defaultProps14.size,
+      orientation = defaultProps14.orientation,
+      calendarView = defaultProps14.calendarView,
+      calendarHeaderText = defaultProps14.calendarHeaderText,
+      viewsCount = defaultProps14.viewsCount,
       showWeek,
       showOtherMonth,
       showCalendarCaption,
@@ -894,7 +1134,7 @@
       "showCalendarFooter",
       "selectedRange"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -908,7 +1148,7 @@
           }
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             CalendarHeader,
             {
               showToday: showCalendarFooter ? false : true,
@@ -917,7 +1157,7 @@
               size
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             CalendarView,
             {
               calendarView,
@@ -929,19 +1169,19 @@
               selectedRange
             }
           ),
-          showCalendarFooter && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CalendarFooter, {})
+          showCalendarFooter && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CalendarFooter, {})
         ]
       })
     );
   };
-  Calendar.states = states14;
-  Calendar.options = options13;
+  Calendar.states = states17;
+  Calendar.options = options16;
   Calendar.className = CALENDAR_CLASSNAME;
-  Calendar.defaultProps = defaultProps11;
+  Calendar.defaultProps = defaultProps14;
 
   // src/calendar/calendar-cell.tsx
-  var import_jsx_runtime18 = __require("react/jsx-runtime");
-  var states15 = [
+  var import_jsx_runtime21 = __require("react/jsx-runtime");
+  var states18 = [
     States.hover,
     States.focus,
     States.active,
@@ -1005,21 +1245,21 @@
       }
     ];
     if (headerCell) {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("th", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: text }));
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("th", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: text }));
     }
     if (weekCell) {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: text }));
+      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: text }));
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("td", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-link", children: text }) }));
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("td", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-link", children: text }) }));
   };
 
   // src/calendar/calendar-header.tsx
-  var import_jsx_runtime19 = __require("react/jsx-runtime");
+  var import_jsx_runtime22 = __require("react/jsx-runtime");
   var className9 = `k-calendar-header`;
-  var options14 = {
+  var options17 = {
     size: [Size.small, Size.medium, Size.large]
   };
-  var defaultProps12 = {
+  var defaultProps15 = {
     calendarHeaderText: "October 2021",
     showToday: true,
     orientation: "horizontal",
@@ -1027,17 +1267,17 @@
   };
   var CalendarHeader = (props) => {
     const _a = props, {
-      calendarHeaderText = defaultProps12.calendarHeaderText,
-      showToday = defaultProps12.showToday,
-      orientation = defaultProps12.orientation,
-      size = defaultProps12.size
+      calendarHeaderText = defaultProps15.calendarHeaderText,
+      showToday = defaultProps15.showToday,
+      orientation = defaultProps15.orientation,
+      size = defaultProps15.size
     } = _a, other = __objRest(_a, [
       "calendarHeaderText",
       "showToday",
       "orientation",
       "size"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -1048,12 +1288,12 @@
           }
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-spacer" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "k-calendar-nav", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "k-calendar-nav-prev", icon: "arrow-chevron-left", size, fillMode: "flat" }),
-            showToday && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "k-calendar-nav-next", icon: "arrow-chevron-right", size, fillMode: "flat" })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-spacer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "k-calendar-nav", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { className: "k-calendar-nav-prev", icon: "arrow-chevron-left", size, fillMode: "flat" }),
+            showToday && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { className: "k-calendar-nav-next", icon: "arrow-chevron-right", size, fillMode: "flat" })
           ] })
         ]
       })
@@ -1061,12 +1301,12 @@
   };
 
   // src/calendar/calendar-footer.tsx
-  var import_jsx_runtime20 = __require("react/jsx-runtime");
+  var import_jsx_runtime23 = __require("react/jsx-runtime");
   var className10 = `k-calendar-footer`;
-  var CalendarFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", __spreadProps(__spreadValues({}, props), { className: classNames(props.className, className10), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) }));
+  var CalendarFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", __spreadProps(__spreadValues({}, props), { className: classNames(props.className, className10), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) }));
 
   // src/calendar/calendar-table.tsx
-  var import_jsx_runtime21 = __require("react/jsx-runtime");
+  var import_jsx_runtime24 = __require("react/jsx-runtime");
   var CALENDARTABLE_CLASSNAME = `k-calendar-table`;
   var CalendarTable = (props) => {
     const _a = props, {
@@ -1083,7 +1323,7 @@
       "selectedRange"
     ]);
     if (calendarView === "year") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "table",
         __spreadProps(__spreadValues({}, other), {
           className: classNames(
@@ -1091,25 +1331,25 @@
             CALENDARTABLE_CLASSNAME
           ),
           children: [
-            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { className: "k-calendar-caption", children: "2022" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Jan" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Feb" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Mar" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Apr" })
+            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("caption", { className: "k-calendar-caption", children: "2022" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Jan" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Feb" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Mar" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Apr" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "May" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Jun", hover: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Jul", focus: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Au", selected: true })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "May" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Jun", hover: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Jul", focus: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Au", selected: true })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Sep" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Oct", today: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Nov" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "Dec" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Sep" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Oct", today: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Nov" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "Dec" })
               ] })
             ] })
           ]
@@ -1117,7 +1357,7 @@
       );
     }
     if (calendarView === "decade") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "table",
         __spreadProps(__spreadValues({}, other), {
           className: classNames(
@@ -1125,25 +1365,25 @@
             CALENDARTABLE_CLASSNAME
           ),
           children: [
-            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { className: "k-out-of-range" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2020" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2021", today: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2022" })
+            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { className: "k-out-of-range" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2020" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2021", today: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2022" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2023" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2024", hover: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2025", focus: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2026", selected: true })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2023" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2024", hover: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2025", focus: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2026", selected: true })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2027" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2028" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2029" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { className: "k-out-of-range" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2027" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2028" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2029" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { className: "k-out-of-range" })
               ] })
             ] })
           ]
@@ -1151,7 +1391,7 @@
       );
     }
     if (calendarView === "century") {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "table",
         __spreadProps(__spreadValues({}, other), {
           className: classNames(
@@ -1159,32 +1399,32 @@
             CALENDARTABLE_CLASSNAME
           ),
           children: [
-            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "1990 - 1999" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2000 - 2009" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2010 - 2019", today: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2020 - 2029" })
+            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "1990 - 1999" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2000 - 2009" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2010 - 2019", today: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2020 - 2029" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2030 - 2039" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2040 - 2049", hover: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2050 - 2059", focus: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2060 - 2069", selected: true })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2030 - 2039" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2040 - 2049", hover: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2050 - 2059", focus: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2060 - 2069", selected: true })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2070 - 2079" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2080 - 2089" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2090 - 2099" }),
-                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { className: "k-out-of-range" })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2070 - 2079" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2080 - 2089" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2090 - 2099" }),
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { className: "k-out-of-range" })
               ] })
             ] })
           ]
         })
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "table",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -1192,68 +1432,68 @@
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("caption", { className: "k-calendar-caption", children: "October 2021" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarTableHead, { showWeek }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-              showWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "39", weekCell: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "5" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "6", weekend: true })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("caption", { className: "k-calendar-caption", children: "October 2021" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarTableHead, { showWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "39", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "6", weekend: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-              showWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "40", weekCell: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "7", weekend: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "8", hover: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "9", focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "10", selected: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "11", hover: true, focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "12", hover: true, selected: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "13", weekend: true })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "40", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "7", weekend: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "8", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "9", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "10", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "11", hover: true, focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "12", hover: true, selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "13", weekend: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-              showWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "41", weekCell: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "14", weekend: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "15" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "16", today: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "17" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "18" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "19" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "20", weekend: true })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "41", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "14", weekend: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "15" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "16", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "17" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "19" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "20", weekend: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-              showWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "42", weekCell: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "21", weekend: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "22" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "23" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "24" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "26", rangeMid: selectedRange }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "42", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "21", weekend: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "22" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "23" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "24" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "26", rangeMid: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-              showWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "43", weekCell: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "30" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "31" }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "43", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "30" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "31" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("tr", { className: "k-calendar-tr", children: [
-              showWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "44", weekCell: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "44", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
             ] })
           ] })
         ]
@@ -1262,7 +1502,7 @@
   };
 
   // src/calendar/calendar-table-head.tsx
-  var import_jsx_runtime22 = __require("react/jsx-runtime");
+  var import_jsx_runtime25 = __require("react/jsx-runtime");
   var className11 = `k-calendar-thead`;
   var CalendarTableHead = (props) => {
     const _a = props, {
@@ -1270,37 +1510,37 @@
     } = _a, other = __objRest(_a, [
       "showWeek"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "thead",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className11),
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "k-calendar-tr", children: [
-          showWeek && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { weekCell: true, headerCell: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { text: "Su", headerCell: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { text: "Mo", headerCell: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { text: "Tu", headerCell: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { text: "We", headerCell: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { text: "Th", headerCell: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { text: "Fr", headerCell: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CalendarCell, { text: "Sa", headerCell: true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+          showWeek && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { weekCell: true, headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Su", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Mo", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Tu", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "We", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Th", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Fr", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Sa", headerCell: true })
         ] })
       })
     );
   };
 
   // src/calendar/calendar-view.tsx
-  var import_jsx_runtime23 = __require("react/jsx-runtime");
+  var import_jsx_runtime26 = __require("react/jsx-runtime");
   var className12 = `k-calendar-view`;
-  var defaultProps13 = {
+  var defaultProps16 = {
     viewsCount: 1,
     orientation: "horizontal",
     calendarView: "month"
   };
   var CalendarView = (props) => {
     const _a = props, {
-      orientation = defaultProps13.orientation,
-      calendarView = defaultProps13.calendarView,
-      viewsCount = defaultProps13.viewsCount,
+      orientation = defaultProps16.orientation,
+      calendarView = defaultProps16.calendarView,
+      viewsCount = defaultProps16.viewsCount,
       showWeek,
       showOtherMonth,
       showCalendarCaption,
@@ -1314,7 +1554,7 @@
       "showCalendarCaption",
       "selectedRange"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -1329,7 +1569,7 @@
           }
         ),
         children: [...Array(viewsCount)].map(
-          (_e, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          (_e, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             CalendarTable,
             {
               calendarView,
@@ -1345,11 +1585,218 @@
     );
   };
 
-  // src/datepicker/datepicker.spec.tsx
-  var import_jsx_runtime24 = __require("react/jsx-runtime");
-  var DATEPICKER_CLASSNAME = `k-datepicker`;
-  var states16 = [
-    States.hover,
+  // src/time-selector/time-selector.spec.tsx
+  var import_jsx_runtime27 = __require("react/jsx-runtime");
+  var TIMESELECTOR_CLASSNAME = `k-timeselector`;
+  var states19 = [];
+  var options18 = {
+    size: [Size.small, Size.medium, Size.large]
+  };
+  var defaultProps17 = {
+    size: Size.medium
+  };
+  var TimeSelector = (props) => {
+    const _a = props, {
+      size = defaultProps17.size,
+      header,
+      fastSelection,
+      columns,
+      focusedColumn
+    } = _a, other = __objRest(_a, [
+      "size",
+      "header",
+      "fastSelection",
+      "columns",
+      "focusedColumn"
+    ]);
+    const columnsDom = columns.map(function(columnType, index) {
+      let focus = false;
+      let separator = true;
+      if (columnType === focusedColumn) {
+        focus = true;
+      }
+      if (index === 0 || columnType === "tt") {
+        separator = false;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TimeSelectorColumn, { type: columnType, focus, separator }) });
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          TIMESELECTOR_CLASSNAME,
+          optionClassNames(TIMESELECTOR_CLASSNAME, {
+            size
+          })
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: fastSelection }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "k-time-list-container", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "k-time-highlight" }),
+            columnsDom
+          ] })
+        ]
+      })
+    );
+  };
+  TimeSelector.states = states19;
+  TimeSelector.options = options18;
+  TimeSelector.className = TIMESELECTOR_CLASSNAME;
+  TimeSelector.defaultProps = defaultProps17;
+
+  // src/time-selector/time-selector-column.tsx
+  var import_jsx_runtime28 = __require("react/jsx-runtime");
+  var states20 = [
+    States.focus
+  ];
+  var TimeSelectorColumn = (props) => {
+    const _a = props, {
+      type,
+      focus,
+      separator
+    } = _a, other = __objRest(_a, [
+      "type",
+      "focus",
+      "separator"
+    ]);
+    let text;
+    let columnData = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"];
+    switch (type) {
+      case "dd":
+        text = "Day";
+        break;
+      case "HH":
+        text = "Hour";
+        break;
+      case "mm":
+        text = "Minute";
+        break;
+      case "ss":
+        text = "Second";
+        break;
+      case "SSS":
+        text = "Millisecond";
+        columnData = ["000", "001", "002", "003", "004", "005", "006", "007", "008", "009"];
+        break;
+      case "tt":
+        text = "AM/PM";
+        columnData = ["AM", "PM"];
+        break;
+      default:
+        text = "Column Name";
+        break;
+    }
+    const items = columnData.map(
+      (data) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: data }) }) })
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      separator && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-time-separator", children: ":" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        "div",
+        __spreadProps(__spreadValues({}, other), {
+          className: classNames(
+            props.className,
+            "k-time-list-wrapper",
+            stateClassNames("k-time-list-wrapper", {
+              focus
+            })
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "k-title", children: text }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-time-list", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "k-content k-scrollable k-time-container", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-scrollable-placeholder" })
+            ] }) })
+          ]
+        })
+      )
+    ] });
+  };
+
+  // src/time-selector/time-selector-header.tsx
+  var import_jsx_runtime29 = __require("react/jsx-runtime");
+  var className13 = `k-time-header`;
+  var TimeSelectorHeader = (props) => {
+    const _a = props, {
+      title
+    } = _a, other = __objRest(_a, [
+      "title"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          className13
+        ),
+        children: [
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "k-title", children: title }),
+          props.children
+        ]
+      })
+    );
+  };
+
+  // src/time-selector/time-selector-fast-selection.tsx
+  var import_jsx_runtime30 = __require("react/jsx-runtime");
+
+  // src/datetime-selector/datetime-selector.spec.tsx
+  var import_jsx_runtime31 = __require("react/jsx-runtime");
+  var DATETIMESELECTOR_CLASSNAME = `k-datetime-wrap`;
+  var states21 = [];
+  var options19 = {};
+  var defaultProps18 = {
+    tab: "date"
+  };
+  var DateTimeSelector = (props) => {
+    const _a = props, {
+      tab = defaultProps18.tab
+    } = _a, other = __objRest(_a, [
+      "tab"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          DATETIMESELECTOR_CLASSNAME,
+          {
+            "k-date-tab": tab === "date",
+            "k-time-tab": tab === "time"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(ButtonGroup, { stretched: true, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { className: "k-group-start", selected: tab === "date", children: "Date" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { className: "k-group-end", selected: tab === "time", children: "Time" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-datetime-calendar-wrap" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Calendar, { showOtherMonth: true }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-datetime-time-wrap" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Button, { className: "k-time-cancel", children: "Cancel" })
+          ] })
+        ]
+      })
+    );
+  };
+  DateTimeSelector.states = states21;
+  DateTimeSelector.options = options19;
+  DateTimeSelector.className = DATETIMESELECTOR_CLASSNAME;
+  DateTimeSelector.defaultProps = defaultProps18;
+
+  // src/datetimepicker/datetimepicker.spec.tsx
+  var import_jsx_runtime32 = __require("react/jsx-runtime");
+  var DATETIMEPICKER_CLASSNAME = `k-datetimepicker`;
+  var states22 = [
+    States.hover,
     States.focus,
     States.valid,
     States.invalid,
@@ -1358,17 +1805,18 @@
     States.loading,
     States.readonly
   ];
-  var options15 = {
+  var options20 = {
     size: [Size.small, Size.medium, Size.large],
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps14 = {
+  var defaultProps19 = {
+    tab: "date",
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
     fillMode: Input.defaultProps.fillMode
   };
-  var DatePicker = (props) => {
+  var DateTimePicker = (props) => {
     const _a = props, {
       prefix,
       suffix,
@@ -1385,7 +1833,8 @@
       loading,
       disabled,
       readonly,
-      opened
+      opened,
+      tab = defaultProps19.tab
     } = _a, other = __objRest(_a, [
       "prefix",
       "suffix",
@@ -1402,10 +1851,11 @@
       "loading",
       "disabled",
       "readonly",
-      "opened"
+      "opened",
+      "tab"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         Input,
         __spreadProps(__spreadValues({}, other), {
           size,
@@ -1419,11 +1869,11 @@
           loading,
           disabled,
           readonly,
-          className: classNames(props.className, DATEPICKER_CLASSNAME),
+          className: classNames(props.className, DATETIMEPICKER_CLASSNAME),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputPrefix, { children: prefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputInnerInput, { placeholder, value }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InputPrefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InputInnerInput, { placeholder, value }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               InputValidationIcon,
               {
                 valid,
@@ -1432,14 +1882,14 @@
                 disabled
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               InputLoadingIcon,
               {
                 loading,
                 disabled
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               InputClearValue,
               {
                 loading,
@@ -1448,12 +1898,12 @@
                 value
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputSuffix, { children: suffix }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InputSuffix, { children: suffix }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               Button,
               {
                 className: "k-input-button",
-                icon: "calendar",
+                icon: tab === "time" ? "clock" : "calendar",
                 rounded: null,
                 size,
                 fillMode
@@ -1462,75 +1912,18 @@
           ]
         })
       ),
-      opened && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Popup, { className: "k-datepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Calendar, {}) })
+      opened && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popup, { className: "k-datetimepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DateTimeSelector, { tab }) })
     ] });
   };
-  DatePicker.states = states16;
-  DatePicker.options = options15;
-  DatePicker.className = DATEPICKER_CLASSNAME;
-  DatePicker.defaultProps = defaultProps14;
-
-  // src/spinbutton/spinbutton.spec.tsx
-  var import_jsx_runtime25 = __require("react/jsx-runtime");
-  var SPINBUTTON_CLASSNAME = `k-spin-button`;
-  var states17 = [];
-  var options16 = {
-    size: [Size.small, Size.medium, Size.large],
-    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
-  };
-  var defaultProps15 = {
-    size: Size.medium,
-    fillMode: FillMode.solid
-  };
-  var SpinButton = (props) => {
-    const _a = props, {
-      size = defaultProps15.size,
-      fillMode = defaultProps15.fillMode
-    } = _a, other = __objRest(_a, [
-      "size",
-      "fillMode"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-      "span",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          SPINBUTTON_CLASSNAME,
-          props.className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            Button,
-            {
-              className: "k-spinner-increase",
-              icon: "arrow-n",
-              rounded: null,
-              size,
-              fillMode
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-            Button,
-            {
-              className: "k-spinner-decrease",
-              icon: "arrow-s",
-              rounded: null,
-              size,
-              fillMode
-            }
-          )
-        ]
-      })
-    );
-  };
-  SpinButton.states = states17;
-  SpinButton.options = options16;
-  SpinButton.className = SPINBUTTON_CLASSNAME;
-  SpinButton.defaultProps = defaultProps15;
+  DateTimePicker.states = states22;
+  DateTimePicker.options = options20;
+  DateTimePicker.className = DATETIMEPICKER_CLASSNAME;
+  DateTimePicker.defaultProps = defaultProps19;
 
-  // src/numerictextbox/numerictextbox.spec.tsx
-  var import_jsx_runtime26 = __require("react/jsx-runtime");
-  var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
-  var states18 = [
+  // src/combobox/combobox.spec.tsx
+  var import_jsx_runtime33 = __require("react/jsx-runtime");
+  var COMBOBOX_CLASSNAME = `k-combobox`;
+  var states23 = [
     States.hover,
     States.focus,
     States.valid,
@@ -1540,20 +1933,20 @@
     States.disabled,
     States.readonly
   ];
-  var options17 = {
-    size: [Size.small, Size.medium, Size.large],
-    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-  };
-  var defaultProps16 = {
-    showSpinButton: true,
-    showClearButton: true,
+  var defaultProps20 = {
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
     fillMode: Input.defaultProps.fillMode
   };
-  var NumericTextbox = (props) => {
+  var options21 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  };
+  var Combobox = (props) => {
     const _a = props, {
+      prefix,
+      suffix,
       value,
       placeholder,
       size,
@@ -1566,10 +1959,12 @@
       required,
       loading,
       disabled,
-      readonly,
-      showClearButton = defaultProps16.showClearButton,
-      showSpinButton = defaultProps16.showSpinButton
+      popup,
+      opened,
+      readonly
     } = _a, other = __objRest(_a, [
+      "prefix",
+      "suffix",
       "value",
       "placeholder",
       "size",
@@ -1582,487 +1977,779 @@
       "required",
       "loading",
       "disabled",
-      "readonly",
-      "showClearButton",
-      "showSpinButton"
+      "popup",
+      "opened",
+      "readonly"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-      Input,
-      __spreadProps(__spreadValues({}, other), {
-        size,
-        rounded,
-        fillMode,
-        hover,
-        focus,
-        valid,
-        invalid,
-        required,
-        loading,
-        disabled,
-        readonly,
-        className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            InputValidationIcon,
-            {
-              valid,
-              invalid,
-              loading,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            InputLoadingIcon,
-            {
-              loading,
-              disabled
-            }
-          ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            InputClearValue,
-            {
-              loading,
-              disabled,
-              readonly,
-              value
-            }
-          ),
-          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-            SpinButton,
-            {
-              className: "k-input-spinner",
-              size,
-              fillMode
-            }
-          )
-        ]
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        Input,
+        __spreadProps(__spreadValues({}, other), {
+          size,
+          rounded,
+          fillMode,
+          hover,
+          focus,
+          valid,
+          invalid,
+          required,
+          loading,
+          disabled,
+          readonly,
+          className: classNames(props.className, COMBOBOX_CLASSNAME),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InputPrefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InputInnerInput, { placeholder, value }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              InputValidationIcon,
+              {
+                valid,
+                invalid,
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              InputLoadingIcon,
+              {
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              InputClearValue,
+              {
+                loading,
+                disabled,
+                readonly,
+                value
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InputSuffix, { children: suffix }),
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              Button,
+              {
+                className: "k-input-button",
+                icon: "caret-alt-down",
+                rounded: null,
+                size,
+                fillMode
+              }
+            )
+          ]
+        })
+      ),
+      opened && popup && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Popup, { className: "k-combobox-popup", children: popup })
+    ] });
+  };
+  Combobox.states = states23;
+  Combobox.options = options21;
+  Combobox.className = COMBOBOX_CLASSNAME;
+  Combobox.defaultProps = defaultProps20;
+
+  // src/chip/chip-action.tsx
+  var import_jsx_runtime34 = __require("react/jsx-runtime");
+
+  // src/avatar/avatar.spec.tsx
+  var import_jsx_runtime35 = __require("react/jsx-runtime");
+  var AVATAR_CLASSNAME = `k-avatar`;
+  var states24 = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.selected,
+    States.disabled
+  ];
+  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],
+    themeColor: [
+      ThemeColor.base,
+      ThemeColor.primary,
+      ThemeColor.secondary,
+      ThemeColor.tertiary,
+      ThemeColor.success,
+      ThemeColor.warning,
+      ThemeColor.error,
+      ThemeColor.info,
+      ThemeColor.light,
+      ThemeColor.dark
+    ]
+  };
+  var defaultProps21 = {
+    type: "text" /* TEXT */,
+    size: Size.medium,
+    rounded: Roundness.full,
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.primary,
+    border: false
+  };
+  var Avatar = (props) => {
+    const _a = props, {
+      size = defaultProps21.size,
+      rounded = defaultProps21.rounded,
+      fillMode = defaultProps21.fillMode,
+      themeColor = defaultProps21.themeColor,
+      type = defaultProps21.type,
+      border = defaultProps21.border
+    } = _a, other = __objRest(_a, [
+      "size",
+      "rounded",
+      "fillMode",
+      "themeColor",
+      "type",
+      "border"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          AVATAR_CLASSNAME,
+          optionClassNames(AVATAR_CLASSNAME, {
+            size,
+            rounded,
+            fillMode,
+            themeColor
+          }),
+          {
+            [`${AVATAR_CLASSNAME}-bordered`]: border
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
       })
     );
   };
-  NumericTextbox.states = states18;
-  NumericTextbox.options = options17;
-  NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
-  NumericTextbox.defaultProps = defaultProps16;
+  Avatar.states = states24;
+  Avatar.options = options22;
+  Avatar.className = AVATAR_CLASSNAME;
+  Avatar.defaultProps = defaultProps21;
 
-  // src/radio/radio.spec.tsx
-  var import_jsx_runtime27 = __require("react/jsx-runtime");
-  var RADIOBUTTON_CLASSNAME = `k-radio`;
-  var states19 = [
+  // src/chip/chip.spec.tsx
+  var import_jsx_runtime36 = __require("react/jsx-runtime");
+  var CHIP_CLASSNAME = `k-chip`;
+  var states25 = [
     States.hover,
     States.focus,
-    States.valid,
-    States.invalid,
-    States.required,
-    States.disabled,
-    States.checked
+    States.active,
+    States.selected,
+    States.disabled
   ];
-  var options18 = {
-    size: [Size.small, Size.medium, Size.large]
+  var options23 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.outline],
+    themeColor: [
+      ThemeColor.base,
+      ThemeColor.success,
+      ThemeColor.warning,
+      ThemeColor.error,
+      ThemeColor.info
+    ]
   };
-  var defaultProps17 = {
-    size: Size.medium
+  var defaultProps22 = {
+    size: Size.medium,
+    rounded: Roundness.medium,
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.base
   };
-  var RadioButton = (props) => {
+  var Chip = (props) => {
     const _a = props, {
-      id,
-      checked,
+      size = defaultProps22.size,
+      rounded = defaultProps22.rounded,
+      fillMode = defaultProps22.fillMode,
+      themeColor = defaultProps22.themeColor,
+      text,
+      icon,
+      actions,
+      showAvatar,
       hover,
       focus,
-      disabled,
-      invalid,
-      valid,
-      required,
-      size = defaultProps17.size
+      active,
+      selected,
+      disabled
     } = _a, other = __objRest(_a, [
-      "id",
-      "checked",
+      "size",
+      "rounded",
+      "fillMode",
+      "themeColor",
+      "text",
+      "icon",
+      "actions",
+      "showAvatar",
       "hover",
       "focus",
-      "disabled",
-      "invalid",
-      "valid",
-      "required",
+      "active",
+      "selected",
+      "disabled"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          CHIP_CLASSNAME,
+          optionClassNames(CHIP_CLASSNAME, {
+            size,
+            rounded,
+            fillMode,
+            themeColor
+          }),
+          stateClassNames(CHIP_CLASSNAME, {
+            hover,
+            focus,
+            active,
+            disabled,
+            selected
+          })
+        ),
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { className: "k-chip-icon", name: icon }),
+          showAvatar && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "k-chip-actions", children: actions })
+        ]
+      })
+    );
+  };
+  Chip.states = states25;
+  Chip.options = options23;
+  Chip.className = CHIP_CLASSNAME;
+  Chip.defaultProps = defaultProps22;
+
+  // src/chip/chip-list.spec.tsx
+  var import_jsx_runtime37 = __require("react/jsx-runtime");
+  var CHIPLIST_CLASSNAME = `k-chip-list`;
+  var states26 = [];
+  var options24 = {
+    size: [Size.small, Size.medium, Size.large]
+  };
+  var defaultProps23 = {
+    size: Size.medium
+  };
+  var ChipList = (props) => {
+    const _a = props, {
+      size = defaultProps23.size
+    } = _a, other = __objRest(_a, [
       "size"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "k-radio-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-      "input",
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
       __spreadProps(__spreadValues({}, other), {
-        id,
-        type: "radio",
-        checked,
-        required,
         className: classNames(
           props.className,
-          RADIOBUTTON_CLASSNAME,
-          optionClassNames(RADIOBUTTON_CLASSNAME, { size }),
-          stateClassNames(RADIOBUTTON_CLASSNAME, { hover, focus, disabled, invalid, valid, checked })
-        )
+          CHIPLIST_CLASSNAME,
+          optionClassNames(CHIPLIST_CLASSNAME, {
+            size
+          })
+        ),
+        children: props.children
       })
-    ) });
+    );
   };
-  RadioButton.states = states19;
-  RadioButton.options = options18;
-  RadioButton.className = RADIOBUTTON_CLASSNAME;
-  RadioButton.defaultProps = defaultProps17;
+  ChipList.states = states26;
+  ChipList.options = options24;
+  ChipList.className = CHIPLIST_CLASSNAME;
+  ChipList.defaultProps = defaultProps23;
 
-  // src/textarea/textarea.spec.tsx
-  var import_jsx_runtime28 = __require("react/jsx-runtime");
-  var TEXTAREA_CLASSNAME = `k-textarea`;
-  var states20 = [
+  // src/multiselect/multiselect.spec.tsx
+  var import_jsx_runtime38 = __require("react/jsx-runtime");
+  var MULTISELECT_CLASSNAME = `k-multiselect`;
+  var states27 = [
     States.hover,
     States.focus,
     States.valid,
     States.invalid,
     States.required,
     States.disabled,
-    States.loading
+    States.loading,
+    States.readonly
   ];
-  var options19 = {
+  var options25 = {
     size: [Size.small, Size.medium, Size.large],
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps18 = {
+  var defaultProps24 = {
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
     fillMode: Input.defaultProps.fillMode
   };
-  var Textarea = (props) => {
+  var MultiSelect = (props) => {
     const _a = props, {
-      rows,
+      prefix,
+      suffix,
       value,
       placeholder,
+      tags,
+      popup,
       size,
       rounded,
       fillMode,
+      showArrowButton,
       hover,
       focus,
       valid,
       invalid,
       required,
       loading,
-      disabled
+      disabled,
+      readonly,
+      opened
     } = _a, other = __objRest(_a, [
-      "rows",
+      "prefix",
+      "suffix",
       "value",
       "placeholder",
+      "tags",
+      "popup",
       "size",
       "rounded",
       "fillMode",
+      "showArrowButton",
       "hover",
       "focus",
       "valid",
       "invalid",
       "required",
       "loading",
-      "disabled"
+      "disabled",
+      "readonly",
+      "opened"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      Input,
-      __spreadProps(__spreadValues({}, other), {
-        size,
-        rounded,
-        fillMode,
-        hover,
-        focus,
-        valid,
-        invalid,
-        required,
-        loading,
-        disabled,
-        className: classNames(props.className, TEXTAREA_CLASSNAME),
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          InputInnerTextarea,
-          {
-            className: "!k-overflow-auto",
-            value,
-            placeholder,
-            rows
-          }
-        )
-      })
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+        Input,
+        __spreadProps(__spreadValues({}, other), {
+          size,
+          rounded,
+          fillMode,
+          hover,
+          focus,
+          valid,
+          invalid,
+          required,
+          loading,
+          disabled,
+          readonly,
+          className: classNames(props.className, MULTISELECT_CLASSNAME),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(InputPrefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "k-input-values", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChipList, { size, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: tags }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(InputInnerInput, { placeholder, value })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              InputValidationIcon,
+              {
+                valid,
+                invalid,
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              InputLoadingIcon,
+              {
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              InputClearValue,
+              {
+                loading,
+                disabled,
+                readonly,
+                value: tags ? "value" : ""
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(InputSuffix, { children: suffix }),
+            showArrowButton && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              Button,
+              {
+                className: "k-input-button",
+                icon: "arrow-s",
+                rounded: null,
+                size,
+                fillMode
+              }
+            )
+          ]
+        })
+      ),
+      opened && popup && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Popup, { className: "k-multiselect-popup", children: popup })
+    ] });
+  };
+  MultiSelect.states = states27;
+  MultiSelect.options = options25;
+  MultiSelect.className = MULTISELECT_CLASSNAME;
+  MultiSelect.defaultProps = defaultProps24;
+
+  // src/form/fieldset.tsx
+  var import_jsx_runtime39 = __require("react/jsx-runtime");
+  var FIELDSET_CLASSNAME = "k-form-fieldset";
+  var Fieldset = (props) => {
+    const {
+      legend
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
+      legend && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("legend", { className: "k-form-legend", children: legend }),
+      props.children
+    ] });
+  };
+  Fieldset.className = FIELDSET_CLASSNAME;
+
+  // src/form/form.spec.tsx
+  var import_jsx_runtime40 = __require("react/jsx-runtime");
+  var FORM_CLASSNAME = "k-form";
+  var states28 = [];
+  var options26 = {
+    size: [Size.small, Size.medium, Size.large]
+  };
+  var defaultProps25 = {
+    size: Size.medium,
+    layout: "basic",
+    tag: "form"
+  };
+  var Form = (props) => {
+    const {
+      size = defaultProps25.size,
+      orientation,
+      layout = defaultProps25.layout,
+      formButtons,
+      legend,
+      cols,
+      gapX,
+      gapY,
+      tag = defaultProps25.tag
+    } = props;
+    const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
+    const Parent = ({ tag: tag2, className: className14, children }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("form", { className: className14, children }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: className14, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Parent, { tag, className: classNames(
+      props.className,
+      FORM_CLASSNAME,
+      optionClassNames(FORM_CLASSNAME, {
+        size
+      }),
+      {
+        [`${FORM_CLASSNAME}-${orientation}`]: orientation
+      }
+    ), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        ConditionalWrapper,
+        {
+          condition: layout === "grid",
+          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Fieldset, { legend, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: classNames(
+            "k-form-layout",
+            "k-d-grid",
+            {
+              [`k-grid-cols-${cols}`]: cols,
+              [`k-gap-x-${gapX}`]: gapX,
+              [`k-gap-y-${gapY}`]: gapY
+            }
+          ), children }) }),
+          children: props.children
+        }
+      ),
+      formButtons && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "k-form-buttons", children: formButtons })
+    ] });
+  };
+  Form.states = states28;
+  Form.options = options26;
+  Form.className = FORM_CLASSNAME;
+  Form.defaultProps = defaultProps25;
+
+  // src/form/form-field.tsx
+  var import_jsx_runtime41 = __require("react/jsx-runtime");
+  var FORMFIELD_CLASSNAME = "k-form-field";
+  var states29 = [
+    States.disabled
+  ];
+  var FormField = (props) => {
+    const {
+      label,
+      optional,
+      editor,
+      hint,
+      error,
+      info,
+      disabled,
+      dir
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      "div",
+      {
+        className: classNames(
+          FORMFIELD_CLASSNAME,
+          props.className,
+          stateClassNames(FORMFIELD_CLASSNAME, { disabled })
+        ),
+        dir,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("label", { className: classNames(
+            "k-label",
+            "k-form-label",
+            {
+              "k-label-empty": label === " "
+            }
+          ), children: [
+            label,
+            optional && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
+            info && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "k-field-info", children: "(field info)" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "k-form-field-wrap", children: [
+            editor,
+            hint && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "k-form-hint", children: hint }),
+            error && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "k-form-error", children: error })
+          ] })
+        ]
+      }
     );
   };
-  Textarea.states = states20;
-  Textarea.options = options19;
-  Textarea.className = TEXTAREA_CLASSNAME;
-  Textarea.defaultProps = defaultProps18;
+  FormField.className = FORMFIELD_CLASSNAME;
 
-  // src/textbox/textbox.spec.tsx
-  var import_jsx_runtime29 = __require("react/jsx-runtime");
-  var TEXTBOX_CLASSNAME = `k-textbox`;
-  var states21 = [
+  // src/radio/radio.spec.tsx
+  var import_jsx_runtime42 = __require("react/jsx-runtime");
+  var RADIOBUTTON_CLASSNAME = `k-radio`;
+  var states30 = [
     States.hover,
     States.focus,
     States.valid,
     States.invalid,
     States.required,
     States.disabled,
-    States.loading,
-    States.readonly
+    States.checked
   ];
-  var options20 = {
-    size: [Size.small, Size.medium, Size.large],
-    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  var options27 = {
+    size: [Size.small, Size.medium, Size.large]
   };
-  var defaultProps19 = {
-    showClearButton: true,
-    size: Input.defaultProps.size,
-    rounded: Input.defaultProps.rounded,
-    fillMode: Input.defaultProps.fillMode
+  var defaultProps26 = {
+    size: Size.medium
   };
-  var Textbox = (props) => {
+  var RadioButton = (props) => {
     const _a = props, {
-      prefix,
-      suffix,
-      value,
-      placeholder,
-      size,
-      rounded,
-      fillMode,
+      id,
+      checked,
       hover,
       focus,
-      valid,
+      disabled,
       invalid,
+      valid,
       required,
-      loading,
-      disabled,
-      readonly,
-      showClearButton = defaultProps19.showClearButton
+      size = defaultProps26.size
     } = _a, other = __objRest(_a, [
-      "prefix",
-      "suffix",
-      "value",
-      "placeholder",
-      "size",
-      "rounded",
-      "fillMode",
+      "id",
+      "checked",
       "hover",
       "focus",
-      "valid",
+      "disabled",
       "invalid",
+      "valid",
       "required",
-      "loading",
-      "disabled",
-      "readonly",
-      "showClearButton"
+      "size"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-      Input,
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "k-radio-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "input",
       __spreadProps(__spreadValues({}, other), {
-        size,
-        rounded,
-        fillMode,
-        hover,
-        focus,
-        valid,
-        invalid,
+        id,
+        type: "radio",
+        checked,
         required,
-        loading,
-        disabled,
-        readonly,
-        className: classNames(props.className, TEXTBOX_CLASSNAME),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            InputValidationIcon,
-            {
-              valid,
-              invalid,
-              loading,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            InputLoadingIcon,
-            {
-              loading,
-              disabled
-            }
-          ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            InputClearValue,
-            {
-              loading,
-              disabled,
-              readonly,
-              value
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(InputSuffix, { children: suffix })
-        ]
+        className: classNames(
+          props.className,
+          RADIOBUTTON_CLASSNAME,
+          optionClassNames(RADIOBUTTON_CLASSNAME, { size }),
+          stateClassNames(RADIOBUTTON_CLASSNAME, { hover, focus, disabled, invalid, valid, checked })
+        )
       })
-    );
+    ) });
   };
-  Textbox.states = states21;
-  Textbox.options = options20;
-  Textbox.className = TEXTBOX_CLASSNAME;
-  Textbox.defaultProps = defaultProps19;
+  RadioButton.states = states30;
+  RadioButton.options = options27;
+  RadioButton.className = RADIOBUTTON_CLASSNAME;
+  RadioButton.defaultProps = defaultProps26;
 
-  // src/time-selector/time-selector.spec.tsx
-  var import_jsx_runtime30 = __require("react/jsx-runtime");
-  var TIMESELECTOR_CLASSNAME = `k-timeselector`;
-  var states22 = [];
-  var options21 = {
-    size: [Size.small, Size.medium, Size.large]
+  // src/spinbutton/spinbutton.spec.tsx
+  var import_jsx_runtime43 = __require("react/jsx-runtime");
+  var SPINBUTTON_CLASSNAME = `k-spin-button`;
+  var states31 = [];
+  var options28 = {
+    size: [Size.small, Size.medium, Size.large],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
   };
-  var defaultProps20 = {
-    size: Size.medium
+  var defaultProps27 = {
+    size: Size.medium,
+    fillMode: FillMode.solid
   };
-  var TimeSelector = (props) => {
+  var SpinButton = (props) => {
     const _a = props, {
-      size = defaultProps20.size,
-      header,
-      fastSelection,
-      columns,
-      focusedColumn
+      size = defaultProps27.size,
+      fillMode = defaultProps27.fillMode
     } = _a, other = __objRest(_a, [
       "size",
-      "header",
-      "fastSelection",
-      "columns",
-      "focusedColumn"
+      "fillMode"
     ]);
-    const columnsDom = columns.map(function(columnType, index) {
-      let focus = false;
-      let separator = true;
-      if (columnType === focusedColumn) {
-        focus = true;
-      }
-      if (index === 0 || columnType === "tt") {
-        separator = false;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TimeSelectorColumn, { type: columnType, focus, separator }) });
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-      "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
-          props.className,
-          TIMESELECTOR_CLASSNAME,
-          optionClassNames(TIMESELECTOR_CLASSNAME, {
-            size
-          })
+          SPINBUTTON_CLASSNAME,
+          props.className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: header }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: fastSelection }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "k-time-list-container", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "k-time-highlight" }),
-            columnsDom
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            Button,
+            {
+              className: "k-spinner-increase",
+              icon: "arrow-n",
+              rounded: null,
+              size,
+              fillMode
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            Button,
+            {
+              className: "k-spinner-decrease",
+              icon: "arrow-s",
+              rounded: null,
+              size,
+              fillMode
+            }
+          )
         ]
       })
     );
   };
-  TimeSelector.states = states22;
-  TimeSelector.options = options21;
-  TimeSelector.className = TIMESELECTOR_CLASSNAME;
-  TimeSelector.defaultProps = defaultProps20;
+  SpinButton.states = states31;
+  SpinButton.options = options28;
+  SpinButton.className = SPINBUTTON_CLASSNAME;
+  SpinButton.defaultProps = defaultProps27;
 
-  // src/time-selector/time-selector-column.tsx
-  var import_jsx_runtime31 = __require("react/jsx-runtime");
-  var states23 = [
-    States.focus
-  ];
-  var TimeSelectorColumn = (props) => {
-    const _a = props, {
-      type,
-      focus,
-      separator
-    } = _a, other = __objRest(_a, [
-      "type",
-      "focus",
-      "separator"
-    ]);
-    let text;
-    let columnData = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"];
-    switch (type) {
-      case "dd":
-        text = "Day";
-        break;
-      case "HH":
-        text = "Hour";
-        break;
-      case "mm":
-        text = "Minute";
-        break;
-      case "ss":
-        text = "Second";
-        break;
-      case "SSS":
-        text = "Millisecond";
-        columnData = ["000", "001", "002", "003", "004", "005", "006", "007", "008", "009"];
-        break;
-      case "tt":
-        text = "AM/PM";
-        columnData = ["AM", "PM"];
-        break;
-      default:
-        text = "Column Name";
-        break;
-    }
-    const items = columnData.map(
-      (data) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: data }) }) })
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-      separator && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-time-separator", children: ":" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-        "div",
-        __spreadProps(__spreadValues({}, other), {
-          className: classNames(
-            props.className,
-            "k-time-list-wrapper",
-            stateClassNames("k-time-list-wrapper", {
-              focus
-            })
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "k-title", children: text }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-time-list", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "k-content k-scrollable k-time-container", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-scrollable-placeholder" })
-            ] }) })
-          ]
-        })
-      )
-    ] });
+  // src/numerictextbox/numerictextbox.spec.tsx
+  var import_jsx_runtime44 = __require("react/jsx-runtime");
+  var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
+  var states32 = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.loading,
+    States.required,
+    States.disabled,
+    States.readonly
+  ];
+  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]
   };
-
-  // src/time-selector/time-selector-header.tsx
-  var import_jsx_runtime32 = __require("react/jsx-runtime");
-  var className13 = `k-time-header`;
-  var TimeSelectorHeader = (props) => {
+  var defaultProps28 = {
+    showSpinButton: true,
+    showClearButton: true,
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+  };
+  var NumericTextbox = (props) => {
     const _a = props, {
-      title
+      value,
+      placeholder,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      showClearButton = defaultProps28.showClearButton,
+      showSpinButton = defaultProps28.showSpinButton
     } = _a, other = __objRest(_a, [
-      "title"
+      "value",
+      "placeholder",
+      "size",
+      "rounded",
+      "fillMode",
+      "hover",
+      "focus",
+      "valid",
+      "invalid",
+      "required",
+      "loading",
+      "disabled",
+      "readonly",
+      "showClearButton",
+      "showSpinButton"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-      "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      Input,
       __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          props.className,
-          className13
-        ),
+        size,
+        rounded,
+        fillMode,
+        hover,
+        focus,
+        valid,
+        invalid,
+        required,
+        loading,
+        disabled,
+        readonly,
+        className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
         children: [
-          title != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "k-title", children: title }),
-          props.children
+          /* @__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
+            }
+          ),
+          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            SpinButton,
+            {
+              className: "k-input-spinner",
+              size,
+              fillMode
+            }
+          )
         ]
       })
     );
   };
+  NumericTextbox.states = states32;
+  NumericTextbox.options = options29;
+  NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
+  NumericTextbox.defaultProps = defaultProps28;
 
-  // src/time-selector/time-selector-fast-selection.tsx
-  var import_jsx_runtime33 = __require("react/jsx-runtime");
-
-  // src/timepicker/timepicker.spec.tsx
-  var import_jsx_runtime34 = __require("react/jsx-runtime");
-  var TIMEPICKER_CLASSNAME = `k-timepicker`;
-  var states24 = [
+  // src/datepicker/datepicker.spec.tsx
+  var import_jsx_runtime45 = __require("react/jsx-runtime");
+  var DATEPICKER_CLASSNAME = `k-datepicker`;
+  var states33 = [
     States.hover,
     States.focus,
     States.valid,
@@ -2072,17 +2759,17 @@
     States.loading,
     States.readonly
   ];
-  var options22 = {
+  var options30 = {
     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 = {
+  var defaultProps29 = {
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
     fillMode: Input.defaultProps.fillMode
   };
-  var TimePicker = (props) => {
+  var DatePicker = (props) => {
     const _a = props, {
       prefix,
       suffix,
@@ -2118,8 +2805,8 @@
       "readonly",
       "opened"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         Input,
         __spreadProps(__spreadValues({}, other), {
           size,
@@ -2133,11 +2820,11 @@
           loading,
           disabled,
           readonly,
-          className: classNames(props.className, TIMEPICKER_CLASSNAME),
+          className: classNames(props.className, DATEPICKER_CLASSNAME),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InputPrefix, { children: prefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InputInnerInput, { placeholder, value }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InputPrefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InputInnerInput, { placeholder, value }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               InputValidationIcon,
               {
                 valid,
@@ -2146,14 +2833,14 @@
                 disabled
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               InputLoadingIcon,
               {
                 loading,
                 disabled
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               InputClearValue,
               {
                 loading,
@@ -2162,12 +2849,12 @@
                 value
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(InputSuffix, { children: suffix }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(InputSuffix, { children: suffix }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               Button,
               {
                 className: "k-input-button",
-                icon: "clock",
+                icon: "calendar",
                 rounded: null,
                 size,
                 fillMode
@@ -2176,192 +2863,16 @@
           ]
         })
       ),
-      opened && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Popup, { className: "k-timepicker-popup", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { className: "k-time-cancel", children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" })
-        ] })
-      ] })
-    ] });
-  };
-  TimePicker.states = states24;
-  TimePicker.options = options22;
-  TimePicker.className = TIMEPICKER_CLASSNAME;
-  TimePicker.defaultProps = defaultProps21;
-
-  // src/form/fieldset.tsx
-  var import_jsx_runtime35 = __require("react/jsx-runtime");
-  var FIELDSET_CLASSNAME = "k-form-fieldset";
-  var Fieldset = (props) => {
-    const {
-      legend
-    } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-      legend && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("legend", { className: "k-form-legend", children: legend }),
-      props.children
-    ] });
-  };
-  Fieldset.className = FIELDSET_CLASSNAME;
-
-  // src/form/form.spec.tsx
-  var import_jsx_runtime36 = __require("react/jsx-runtime");
-  var FORM_CLASSNAME = "k-form";
-  var states25 = [];
-  var options23 = {
-    size: [Size.small, Size.medium, Size.large]
-  };
-  var defaultProps22 = {
-    size: Size.medium,
-    layout: "basic",
-    tag: "form"
-  };
-  var Form = (props) => {
-    const {
-      size = defaultProps22.size,
-      orientation,
-      layout = defaultProps22.layout,
-      formButtons,
-      legend,
-      cols,
-      gapX,
-      gapY,
-      tag = defaultProps22.tag
-    } = props;
-    const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
-    const Parent = ({ tag: tag2, className: className14, children }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("form", { className: className14, children }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: className14, children });
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Parent, { tag, className: classNames(
-      props.className,
-      FORM_CLASSNAME,
-      optionClassNames(FORM_CLASSNAME, {
-        size
-      }),
-      {
-        [`${FORM_CLASSNAME}-${orientation}`]: orientation
-      }
-    ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-        ConditionalWrapper,
-        {
-          condition: layout === "grid",
-          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Fieldset, { legend, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: classNames(
-            "k-form-layout",
-            "k-d-grid",
-            {
-              [`k-grid-cols-${cols}`]: cols,
-              [`k-gap-x-${gapX}`]: gapX,
-              [`k-gap-y-${gapY}`]: gapY
-            }
-          ), children }) }),
-          children: props.children
-        }
-      ),
-      formButtons && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "k-form-buttons", children: formButtons })
+      opened && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Popup, { className: "k-datepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Calendar, {}) })
     ] });
   };
-  Form.states = states25;
-  Form.options = options23;
-  Form.className = FORM_CLASSNAME;
-  Form.defaultProps = defaultProps22;
-
-  // src/form/form-field.tsx
-  var import_jsx_runtime37 = __require("react/jsx-runtime");
-  var FORMFIELD_CLASSNAME = "k-form-field";
-  var states26 = [
-    States.disabled
-  ];
-  var FormField = (props) => {
-    const {
-      label,
-      optional,
-      editor,
-      hint,
-      error,
-      info,
-      disabled,
-      dir
-    } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-      "div",
-      {
-        className: classNames(
-          FORMFIELD_CLASSNAME,
-          props.className,
-          stateClassNames(FORMFIELD_CLASSNAME, { disabled })
-        ),
-        dir,
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: classNames(
-            "k-label",
-            "k-form-label",
-            {
-              "k-label-empty": label === " "
-            }
-          ), children: [
-            label,
-            optional && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
-            info && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "k-field-info", children: "(field info)" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "k-form-field-wrap", children: [
-            editor,
-            hint && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "k-form-hint", children: hint }),
-            error && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "k-form-error", children: error })
-          ] })
-        ]
-      }
-    );
-  };
-  FormField.className = FORMFIELD_CLASSNAME;
-
-  // src/button-group/button-group.spec.tsx
-  var import_jsx_runtime38 = __require("react/jsx-runtime");
-  var BUTTONGROUP_CLASSNAME = `k-button-group`;
-  var states27 = [
-    States.disabled
-  ];
-  var options24 = {
-    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
-  };
-  var defaultProps23 = {
-    fillMode: FillMode.solid
-  };
-  var ButtonGroup = (props) => {
-    const _a = props, {
-      fillMode = defaultProps23.fillMode,
-      disabled,
-      stretched
-    } = _a, other = __objRest(_a, [
-      "fillMode",
-      "disabled",
-      "stretched"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      "div",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          props.className,
-          BUTTONGROUP_CLASSNAME,
-          optionClassNames(BUTTONGROUP_CLASSNAME, {
-            fillMode
-          }),
-          stateClassNames(BUTTONGROUP_CLASSNAME, {
-            disabled
-          }),
-          {
-            [`${BUTTONGROUP_CLASSNAME}-stretched`]: stretched
-          }
-        ),
-        children: props.children
-      })
-    );
-  };
-  ButtonGroup.states = states27;
-  ButtonGroup.options = options24;
-  ButtonGroup.className = BUTTONGROUP_CLASSNAME;
-  ButtonGroup.defaultProps = defaultProps23;
+  DatePicker.states = states33;
+  DatePicker.options = options30;
+  DatePicker.className = DATEPICKER_CLASSNAME;
+  DatePicker.defaultProps = defaultProps29;
 
   // src/scheduler/tests/scheduler-edit-dialog.tsx
-  var import_jsx_runtime39 = __require("react/jsx-runtime");
+  var import_jsx_runtime46 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -2370,64 +2881,65 @@
         width: 700px;
     }
     .k-window {
-        width: 100%;
+        min-width: 400px;
         position: relative;
     }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("style", { children: style }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Window, { title: "Event", actions: ["close"], actionButtons: true, actionButtonsAlign: "end", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Form, { tag: "div", orientation: "horizontal", className: "k-scheduler-edit-form", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: "Title", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Textbox, { placeholder: "Title..." }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: "Start", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "k-scheduler-datetime-picker", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePicker, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePicker, {})
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: "End", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "k-scheduler-datetime-picker", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePicker, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TimePicker, {})
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: " ", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Checkbox, { id: "k-is-allday-chkbox" }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { htmlFor: "k-is-allday-chkbox", className: "k-checkbox-label", children: "All Day Event" })
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("style", { children: style }),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Window, { title: "Edit event", actions: ["minimize", "maximize", "close"], actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { themeColor: "primary", icon: "save", children: "Save" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { icon: "cancel", children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "k-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { fillMode: "flat", themeColor: "primary", icon: "delete", children: "Delete" })
+      ] }), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Form, { tag: "div", className: "k-scheduler-edit-form", orientation: "vertical", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { className: "k-form-field-error", label: "Title", error: "Error", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Textbox, { invalid: true, value: "Invalid" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "Start", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DateTimePicker, { placeholder: "dd/MM/yyyy hh:mm AM" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "End", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DateTimePicker, { placeholder: "dd/MM/yyyy hh:mm AM" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: " ", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Checkbox, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "k-checkbox-label", children: "All Day Event" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: " ", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Checkbox, { id: "k-set-timezone" }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { htmlFor: "k-set-timezone", className: "k-checkbox-label", children: "Specify Time Zone" })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: " ", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Checkbox, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "k-checkbox-label", children: "Specify Time Zone" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "k-recurrence-editor", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: "Repeat", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ButtonGroup, { className: "k-scheduler-recurrence-repeat k-button-group-stretched", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { children: "Never" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { selected: true, children: "Daily" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { children: "Weekly" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { children: "Monthly" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { children: "Yearly" })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "k-recurrence-editor", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "Repeat", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ButtonGroup, { stretched: true, className: "k-scheduler-recurrence-repeat", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { children: "Never" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { selected: true, children: "Daily" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { children: "Weekly" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { children: "Monthly" }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Button, { children: "Yearly" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "k-recur-view", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "k-scheduler-recurrence-interval-editor", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: "Repeat every", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NumericTextbox, { className: "k-recur-interval" }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "day(s)" })
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "k-recur-view", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "k-scheduler-recurrence-interval-editor", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "Repeat every", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(NumericTextbox, { className: "k-recur-interval" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: " day(s)" })
             ] }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "k-scheduler-recurrence-end-rule-editor", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: "End", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("ul", { className: "k-radio-list", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { className: "k-radio-list-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RadioButton, { id: "k-endrule-never" }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: "k-radio-label", htmlFor: "k-endrule-never", children: "Never" })
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "k-scheduler-recurrence-end-rule-editor", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "End", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("ul", { className: "k-radio-list", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { className: "k-radio-list-item", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RadioButton, { id: "k-endrule-never" }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "k-radio-label", htmlFor: "k-endrule-never", children: "Never" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { className: "k-radio-list-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RadioButton, { id: "k-endrule-count" }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: "k-radio-label", htmlFor: "k-endrule-count", children: "After" }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NumericTextbox, { className: "k-recur-count" }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "occurrence(s)" })
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { className: "k-radio-list-item", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RadioButton, { id: "k-endrule-count" }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "k-radio-label", htmlFor: "k-endrule-count", children: "After" }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(NumericTextbox, { className: "k-recur-count" }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: "occurrence(s)" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { className: "k-radio-list-item", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RadioButton, { id: "k-endrule-until" }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: "k-radio-label", htmlFor: "k-endrule-until", children: "On" }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DatePicker, { className: "k-recur-until", disabled: true })
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("li", { className: "k-radio-list-item", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RadioButton, { id: "k-endrule-until" }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("label", { className: "k-radio-label", htmlFor: "k-endrule-until", children: "On" }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DatePicker, { className: "k-recur-until", disabled: true })
               ] })
             ] }) }) })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(FormField, { label: "Description", editor: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Textarea, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "Description", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Textarea, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "Owner", editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Combobox, { placeholder: "Select owner" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FormField, { label: "Atendee", optional: true, editor: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(MultiSelect, { placeholder: "Invite people" }) })
       ] }) }) }) })
     ] })
   );