@progress/kendo-themes-html 7.2.0-dev.0 → 7.2.0

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

@@ -9141,109 +9141,14 @@ var import_jsx_runtime183 = require("react/jsx-runtime");
 // src/colorpicker/templates/colorpicker-popup-palette.tsx
 var import_jsx_runtime184 = require("react/jsx-runtime");
 
-// src/dateinput/dateinput.spec.tsx
-var import_jsx_runtime185 = require("react/jsx-runtime");
-var DATEINPUT_CLASSNAME = `k-dateinput`;
-var states66 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options63 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps62 = {
-  size: Input.defaultProps.size,
-  rounded: Input.defaultProps.rounded,
-  fillMode: Input.defaultProps.fillMode
-};
-var DateInput = (props) => {
-  const {
-    value,
-    placeholder,
-    size,
-    rounded,
-    fillMode,
-    hover,
-    focus,
-    valid,
-    invalid,
-    required,
-    loading,
-    disabled,
-    readonly,
-    showSpinButton,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
-    Input,
-    {
-      ...other,
-      size,
-      rounded,
-      fillMode,
-      hover,
-      focus,
-      valid,
-      invalid,
-      required,
-      loading,
-      disabled,
-      readonly,
-      className: classNames(props.className, DATEINPUT_CLASSNAME),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-          InputValidationIcon,
-          {
-            valid,
-            invalid,
-            loading,
-            disabled
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-          InputLoadingIcon,
-          {
-            loading,
-            disabled
-          }
-        ),
-        showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-          SpinButton,
-          {
-            className: "k-input-spinner",
-            size,
-            fillMode
-          }
-        )
-      ]
-    }
-  );
-};
-DateInput.states = states66;
-DateInput.options = options63;
-DateInput.className = DATEINPUT_CLASSNAME;
-DateInput.defaultProps = defaultProps62;
-
-// src/dateinput/templates/dateinput-normal.tsx
-var import_jsx_runtime186 = require("react/jsx-runtime");
-
 // src/calendar/calendar.spec.tsx
-var import_jsx_runtime187 = require("react/jsx-runtime");
+var import_jsx_runtime185 = require("react/jsx-runtime");
 var CALENDAR_CLASSNAME = `k-calendar`;
-var states67 = [];
-var options64 = {
+var states66 = [];
+var options63 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps63 = {
+var defaultProps62 = {
   size: Size.medium,
   viewsCount: 1,
   orientation: "horizontal",
@@ -9252,11 +9157,11 @@ var defaultProps63 = {
 };
 var Calendar = (props) => {
   const {
-    size = defaultProps63.size,
-    orientation = defaultProps63.orientation,
-    calendarView = defaultProps63.calendarView,
-    calendarHeaderText = defaultProps63.calendarHeaderText,
-    viewsCount = defaultProps63.viewsCount,
+    size = defaultProps62.size,
+    orientation = defaultProps62.orientation,
+    calendarView = defaultProps62.calendarView,
+    calendarHeaderText = defaultProps62.calendarHeaderText,
+    viewsCount = defaultProps62.viewsCount,
     showWeek,
     showOtherMonth,
     showCalendarCaption,
@@ -9265,7 +9170,7 @@ var Calendar = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
     "div",
     {
       ...other,
@@ -9281,7 +9186,7 @@ var Calendar = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
           CalendarHeader,
           {
             showToday: showCalendarFooter ? false : true,
@@ -9291,7 +9196,7 @@ var Calendar = (props) => {
             dir
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
           CalendarView,
           {
             calendarView,
@@ -9303,19 +9208,19 @@ var Calendar = (props) => {
             selectedRange
           }
         ),
-        showCalendarFooter && /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(CalendarFooter, {})
+        showCalendarFooter && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarFooter, {})
       ]
     }
   );
 };
-Calendar.states = states67;
-Calendar.options = options64;
+Calendar.states = states66;
+Calendar.options = options63;
 Calendar.className = CALENDAR_CLASSNAME;
-Calendar.defaultProps = defaultProps63;
+Calendar.defaultProps = defaultProps62;
 
 // src/calendar/calendar-cell.tsx
-var import_jsx_runtime188 = require("react/jsx-runtime");
-var states68 = [
+var import_jsx_runtime186 = require("react/jsx-runtime");
+var states67 = [
   States.hover,
   States.focus,
   States.active,
@@ -9364,21 +9269,21 @@ var CalendarCell = (props) => {
     }
   ];
   if (headerCell) {
-    return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("th", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("th", { ...other, className: classNames(calendarCellClasses), children: text });
   }
   if (weekCell) {
-    return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: text });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("span", { className: "k-link", children: text }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("span", { className: "k-link", children: text }) });
 };
 
 // src/calendar/calendar-header.tsx
-var import_jsx_runtime189 = require("react/jsx-runtime");
+var import_jsx_runtime187 = require("react/jsx-runtime");
 var className14 = `k-calendar-header`;
-var options65 = {
+var options64 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps64 = {
+var defaultProps63 = {
   calendarHeaderText: "October 2021",
   showToday: true,
   orientation: "horizontal",
@@ -9386,16 +9291,16 @@ var defaultProps64 = {
 };
 var CalendarHeader = (props) => {
   const {
-    calendarHeaderText = defaultProps64.calendarHeaderText,
-    showToday = defaultProps64.showToday,
-    orientation = defaultProps64.orientation,
-    size = defaultProps64.size,
+    calendarHeaderText = defaultProps63.calendarHeaderText,
+    showToday = defaultProps63.showToday,
+    orientation = defaultProps63.orientation,
+    size = defaultProps63.size,
     dir,
     ...other
   } = props;
   const iconPrev = dir === "rtl" ? "chevron-right" : "chevron-left";
   const iconNext = dir === "rtl" ? "chevron-left" : "chevron-right";
-  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
     "div",
     {
       ...other,
@@ -9407,12 +9312,12 @@ var CalendarHeader = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
-        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("span", { className: "k-calendar-nav", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
-          showToday && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
-          /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("span", { className: "k-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("span", { className: "k-calendar-nav", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
+          showToday && /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
+          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
         ] })
       ]
     }
@@ -9420,12 +9325,12 @@ var CalendarHeader = (props) => {
 };
 
 // src/calendar/calendar-footer.tsx
-var import_jsx_runtime190 = require("react/jsx-runtime");
+var import_jsx_runtime188 = require("react/jsx-runtime");
 var className15 = `k-calendar-footer`;
-var CalendarFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { ...props, className: classNames(props.className, className15), children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
+var CalendarFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { ...props, className: classNames(props.className, className15), children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
 
 // src/calendar/calendar-table.tsx
-var import_jsx_runtime191 = require("react/jsx-runtime");
+var import_jsx_runtime189 = require("react/jsx-runtime");
 var CALENDARTABLE_CLASSNAME = `k-calendar-table`;
 var CalendarTable = (props) => {
   const {
@@ -9437,7 +9342,7 @@ var CalendarTable = (props) => {
     ...other
   } = props;
   if (calendarView === "year") {
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
       "table",
       {
         ...other,
@@ -9446,25 +9351,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("caption", { className: "k-calendar-caption", children: "2022" }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Jan" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Feb" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Mar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Apr" })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("caption", { className: "k-calendar-caption", children: "2022" }),
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Jan" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Feb" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Mar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Apr" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "May" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Jun", hover: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Jul", focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Au", selected: true })
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "May" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Jun", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Jul", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Au", selected: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Sep" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Oct", today: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Nov" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "Dec" })
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Sep" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Oct", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Nov" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "Dec" })
             ] })
           ] })
         ]
@@ -9472,7 +9377,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "decade") {
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
       "table",
       {
         ...other,
@@ -9481,25 +9386,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { className: "k-out-of-range" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2020" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2021", today: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2022" })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { className: "k-out-of-range" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2020" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2021", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2022" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2023" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2024", hover: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2025", focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2026", selected: true })
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2023" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2024", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2025", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2026", selected: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2027" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2028" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2029" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2027" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2028" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2029" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
@@ -9507,7 +9412,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "century") {
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
       "table",
       {
         ...other,
@@ -9516,32 +9421,32 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "1990 - 1999" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2000 - 2009" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2010 - 2019", today: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2020 - 2029" })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "1990 - 1999" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2000 - 2009" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2010 - 2019", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2020 - 2029" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2030 - 2039" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2040 - 2049", hover: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2050 - 2059", focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2060 - 2069", selected: true })
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2030 - 2039" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2040 - 2049", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2050 - 2059", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2060 - 2069", selected: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2070 - 2079" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2080 - 2089" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2090 - 2099" }),
-              /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2070 - 2079" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2080 - 2089" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2090 - 2099" }),
+              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
     "table",
     {
       ...other,
@@ -9550,68 +9455,68 @@ var CalendarTable = (props) => {
         CALENDARTABLE_CLASSNAME
       ),
       children: [
-        showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("caption", { className: "k-calendar-caption", children: "October 2021" }),
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarTableHead, { showWeek }),
-        /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "39", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "6", weekend: true })
+        showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("caption", { className: "k-calendar-caption", children: "October 2021" }),
+        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarTableHead, { showWeek }),
+        /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "39", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "6", weekend: true })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "40", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "7", weekend: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "8", hover: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "9", focus: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "10", selected: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "11", hover: true, focus: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "12", hover: true, selected: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "13", weekend: true })
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "40", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "7", weekend: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "8", hover: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "9", focus: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "10", selected: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "11", hover: true, focus: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "12", hover: true, selected: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "13", weekend: true })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "41", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "14", weekend: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "15" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "16", today: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "17" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "18" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "19" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "20", weekend: true })
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "41", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "14", weekend: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "15" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "16", today: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "17" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "19" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "20", weekend: true })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "42", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "21", weekend: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "22" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "23" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "24" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "26", rangeMid: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "42", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "21", weekend: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "22" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "23" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "24" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "26", rangeMid: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "43", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "30" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "31" }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "43", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "30" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "31" }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "44", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "44", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
           ] })
         ] })
       ]
@@ -9620,52 +9525,52 @@ var CalendarTable = (props) => {
 };
 
 // src/calendar/calendar-table-head.tsx
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime190 = require("react/jsx-runtime");
 var className16 = `k-calendar-thead`;
 var CalendarTableHead = (props) => {
   const {
     showWeek,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
     "thead",
     {
       ...other,
       className: classNames(props.className, className16),
-      children: /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)("tr", { className: "k-calendar-tr", children: [
-        showWeek && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { weekCell: true, headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { text: "Su", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { text: "Mo", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { text: "Tu", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { text: "We", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { text: "Th", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { text: "Fr", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(CalendarCell, { text: "Sa", headerCell: true })
+      children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("tr", { className: "k-calendar-tr", children: [
+        showWeek && /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { weekCell: true, headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { text: "Su", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { text: "Mo", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { text: "Tu", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { text: "We", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { text: "Th", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { text: "Fr", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(CalendarCell, { text: "Sa", headerCell: true })
       ] })
     }
   );
 };
 
 // src/calendar/calendar-view.tsx
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_jsx_runtime191 = require("react/jsx-runtime");
 var className17 = `k-calendar-view`;
-var defaultProps65 = {
+var defaultProps64 = {
   viewsCount: 1,
   orientation: "horizontal",
   calendarView: "month"
 };
 var CalendarView = (props) => {
   const {
-    orientation = defaultProps65.orientation,
-    calendarView = defaultProps65.calendarView,
-    viewsCount = defaultProps65.viewsCount,
+    orientation = defaultProps64.orientation,
+    calendarView = defaultProps64.calendarView,
+    viewsCount = defaultProps64.viewsCount,
     showWeek,
     showOtherMonth,
     showCalendarCaption,
     selectedRange,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     "div",
     {
       ...other,
@@ -9681,7 +9586,7 @@ var CalendarView = (props) => {
         }
       ),
       children: [...Array(viewsCount)].map(
-        (_e, i) => /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+        (_e, i) => /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
           CalendarTable,
           {
             calendarView,
@@ -9697,6 +9602,101 @@ var CalendarView = (props) => {
   );
 };
 
+// src/dateinput/dateinput.spec.tsx
+var import_jsx_runtime192 = require("react/jsx-runtime");
+var DATEINPUT_CLASSNAME = `k-dateinput`;
+var states68 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+var options65 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultProps65 = {
+  size: Input.defaultProps.size,
+  rounded: Input.defaultProps.rounded,
+  fillMode: Input.defaultProps.fillMode
+};
+var DateInput = (props) => {
+  const {
+    value,
+    placeholder,
+    size,
+    rounded,
+    fillMode,
+    hover,
+    focus,
+    valid,
+    invalid,
+    required,
+    loading,
+    disabled,
+    readonly,
+    showSpinButton,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
+    Input,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, DATEINPUT_CLASSNAME),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+          SpinButton,
+          {
+            className: "k-input-spinner",
+            size,
+            fillMode
+          }
+        )
+      ]
+    }
+  );
+};
+DateInput.states = states68;
+DateInput.options = options65;
+DateInput.className = DATEINPUT_CLASSNAME;
+DateInput.defaultProps = defaultProps65;
+
+// src/dateinput/templates/dateinput-normal.tsx
+var import_jsx_runtime193 = require("react/jsx-runtime");
+
 // src/datepicker/datepicker.spec.tsx
 var import_jsx_runtime194 = require("react/jsx-runtime");
 var DATEPICKER_CLASSNAME = `k-datepicker`;