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

package/dist/cjs/index.js

@@ -143,6 +143,7 @@ __export(src_exports, {
   BreadcrumbRootItemContainer: () => BreadcrumbRootItemContainer,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
+  CALENDARTABLE_CLASSNAME: () => CALENDARTABLE_CLASSNAME,
   CAPTCHA_CLASSNAME: () => CAPTCHA_CLASSNAME,
   CARDBODY_CLASSNAME: () => CARDBODY_CLASSNAME,
   CARDCALLOUT_CLASSNAME: () => CARDCALLOUT_CLASSNAME,
@@ -167,6 +168,13 @@ __export(src_exports, {
   COLORPICKER_CLASSNAME: () => COLORPICKER_CLASSNAME,
   COLORPREVIEW_CLASSNAME: () => COLORPREVIEW_CLASSNAME,
   COMBOBOX_CLASSNAME: () => COMBOBOX_CLASSNAME,
+  Calendar: () => Calendar,
+  CalendarCell: () => CalendarCell,
+  CalendarFooter: () => CalendarFooter,
+  CalendarHeader: () => CalendarHeader,
+  CalendarTable: () => CalendarTable,
+  CalendarTableHead: () => CalendarTableHead,
+  CalendarView: () => CalendarView,
   Captcha: () => Captcha,
   CaptchaNormal: () => CaptchaNormal,
   Card: () => Card,
@@ -10485,111 +10493,14 @@ var ComboboxSuffix = (props) => /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
   }
 );
 
-// src/dateinput/dateinput.spec.tsx
-var import_jsx_runtime178 = require("react/jsx-runtime");
-var DATEINPUT_CLASSNAME = `k-dateinput`;
-var states65 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options62 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps61 = {
-  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_runtime178.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_runtime178.jsx)(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
-          InputValidationIcon,
-          {
-            valid,
-            invalid,
-            loading,
-            disabled
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
-          InputLoadingIcon,
-          {
-            loading,
-            disabled
-          }
-        ),
-        showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
-          SpinButton,
-          {
-            className: "k-input-spinner",
-            size,
-            fillMode
-          }
-        )
-      ]
-    }
-  );
-};
-DateInput.states = states65;
-DateInput.options = options62;
-DateInput.className = DATEINPUT_CLASSNAME;
-DateInput.defaultProps = defaultProps61;
-var dateinput_spec_default = DateInput;
-
-// src/dateinput/templates/dateinput-normal.tsx
-var import_jsx_runtime179 = require("react/jsx-runtime");
-var DateInputNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(dateinput_spec_default, { ...props });
-
 // src/calendar/calendar.spec.tsx
-var import_jsx_runtime180 = require("react/jsx-runtime");
+var import_jsx_runtime178 = require("react/jsx-runtime");
 var CALENDAR_CLASSNAME = `k-calendar`;
-var states66 = [];
-var options63 = {
+var states65 = [];
+var options62 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps62 = {
+var defaultProps61 = {
   size: Size.medium,
   viewsCount: 1,
   orientation: "horizontal",
@@ -10598,11 +10509,11 @@ var defaultProps62 = {
 };
 var Calendar = (props) => {
   const {
-    size = defaultProps62.size,
-    orientation = defaultProps62.orientation,
-    calendarView = defaultProps62.calendarView,
-    calendarHeaderText = defaultProps62.calendarHeaderText,
-    viewsCount = defaultProps62.viewsCount,
+    size = defaultProps61.size,
+    orientation = defaultProps61.orientation,
+    calendarView = defaultProps61.calendarView,
+    calendarHeaderText = defaultProps61.calendarHeaderText,
+    viewsCount = defaultProps61.viewsCount,
     showWeek,
     showOtherMonth,
     showCalendarCaption,
@@ -10611,7 +10522,7 @@ var Calendar = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(
     "div",
     {
       ...other,
@@ -10627,7 +10538,7 @@ var Calendar = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
           CalendarHeader,
           {
             showToday: showCalendarFooter ? false : true,
@@ -10637,7 +10548,7 @@ var Calendar = (props) => {
             dir
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
           CalendarView,
           {
             calendarView,
@@ -10649,19 +10560,19 @@ var Calendar = (props) => {
             selectedRange
           }
         ),
-        showCalendarFooter && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(CalendarFooter, {})
+        showCalendarFooter && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(CalendarFooter, {})
       ]
     }
   );
 };
-Calendar.states = states66;
-Calendar.options = options63;
+Calendar.states = states65;
+Calendar.options = options62;
 Calendar.className = CALENDAR_CLASSNAME;
-Calendar.defaultProps = defaultProps62;
+Calendar.defaultProps = defaultProps61;
 
 // src/calendar/calendar-cell.tsx
-var import_jsx_runtime181 = require("react/jsx-runtime");
-var states67 = [
+var import_jsx_runtime179 = require("react/jsx-runtime");
+var states66 = [
   States.hover,
   States.focus,
   States.active,
@@ -10710,21 +10621,21 @@ var CalendarCell = (props) => {
     }
   ];
   if (headerCell) {
-    return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("th", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("th", { ...other, className: classNames(calendarCellClasses), children: text });
   }
   if (weekCell) {
-    return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: text });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "k-link", children: text }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "k-link", children: text }) });
 };
 
 // src/calendar/calendar-header.tsx
-var import_jsx_runtime182 = require("react/jsx-runtime");
+var import_jsx_runtime180 = require("react/jsx-runtime");
 var className17 = `k-calendar-header`;
-var options64 = {
+var options63 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps63 = {
+var defaultProps62 = {
   calendarHeaderText: "October 2021",
   showToday: true,
   orientation: "horizontal",
@@ -10732,16 +10643,16 @@ var defaultProps63 = {
 };
 var CalendarHeader = (props) => {
   const {
-    calendarHeaderText = defaultProps63.calendarHeaderText,
-    showToday = defaultProps63.showToday,
-    orientation = defaultProps63.orientation,
-    size = defaultProps63.size,
+    calendarHeaderText = defaultProps62.calendarHeaderText,
+    showToday = defaultProps62.showToday,
+    orientation = defaultProps62.orientation,
+    size = defaultProps62.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_runtime182.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
     "div",
     {
       ...other,
@@ -10753,12 +10664,12 @@ var CalendarHeader = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
-        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("span", { className: "k-spacer" }),
-        /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("span", { className: "k-calendar-nav", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
-          showToday && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
-          /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
+        /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
+        /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "k-spacer" }),
+        /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("span", { className: "k-calendar-nav", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
+          showToday && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
+          /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
         ] })
       ]
     }
@@ -10766,12 +10677,12 @@ var CalendarHeader = (props) => {
 };
 
 // src/calendar/calendar-footer.tsx
-var import_jsx_runtime183 = require("react/jsx-runtime");
+var import_jsx_runtime181 = require("react/jsx-runtime");
 var className18 = `k-calendar-footer`;
-var CalendarFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)("div", { ...props, className: classNames(props.className, className18), children: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
+var CalendarFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { ...props, className: classNames(props.className, className18), children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
 
 // src/calendar/calendar-table.tsx
-var import_jsx_runtime184 = require("react/jsx-runtime");
+var import_jsx_runtime182 = require("react/jsx-runtime");
 var CALENDARTABLE_CLASSNAME = `k-calendar-table`;
 var CalendarTable = (props) => {
   const {
@@ -10783,7 +10694,7 @@ var CalendarTable = (props) => {
     ...other
   } = props;
   if (calendarView === "year") {
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
       "table",
       {
         ...other,
@@ -10792,25 +10703,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("caption", { className: "k-calendar-caption", children: "2022" }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Jan" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Feb" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Mar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Apr" })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("caption", { className: "k-calendar-caption", children: "2022" }),
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Jan" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Feb" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Mar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Apr" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "May" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Jun", hover: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Jul", focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Au", selected: true })
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "May" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Jun", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Jul", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Au", selected: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Sep" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Oct", today: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Nov" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "Dec" })
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Sep" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Oct", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Nov" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "Dec" })
             ] })
           ] })
         ]
@@ -10818,7 +10729,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "decade") {
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
       "table",
       {
         ...other,
@@ -10827,25 +10738,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { className: "k-out-of-range" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2020" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2021", today: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2022" })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { className: "k-out-of-range" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2020" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2021", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2022" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2023" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2024", hover: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2025", focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2026", selected: true })
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2023" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2024", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2025", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2026", selected: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2027" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2028" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2029" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2027" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2028" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2029" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
@@ -10853,7 +10764,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "century") {
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
       "table",
       {
         ...other,
@@ -10862,32 +10773,32 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "1990 - 1999" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2000 - 2009" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2010 - 2019", today: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2020 - 2029" })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "1990 - 1999" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2000 - 2009" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2010 - 2019", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2020 - 2029" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2030 - 2039" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2040 - 2049", hover: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2050 - 2059", focus: true }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2060 - 2069", selected: true })
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2030 - 2039" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2040 - 2049", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2050 - 2059", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2060 - 2069", selected: true })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2070 - 2079" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2080 - 2089" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2090 - 2099" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2070 - 2079" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2080 - 2089" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2090 - 2099" }),
+              /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
     "table",
     {
       ...other,
@@ -10896,68 +10807,68 @@ var CalendarTable = (props) => {
         CALENDARTABLE_CLASSNAME
       ),
       children: [
-        showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("caption", { className: "k-calendar-caption", children: "October 2021" }),
-        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarTableHead, { showWeek }),
-        /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tbody", { className: "k-calendar-tbody", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "39", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "1" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "6", weekend: true })
+        showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)("caption", { className: "k-calendar-caption", children: "October 2021" }),
+        /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarTableHead, { showWeek }),
+        /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "39", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "1" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "4" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "6", weekend: true })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "40", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "7", weekend: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "8", hover: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "9", focus: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "10", selected: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "11", hover: true, focus: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "12", hover: true, selected: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "13", weekend: true })
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "40", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "7", weekend: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "8", hover: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "9", focus: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "10", selected: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "11", hover: true, focus: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "12", hover: true, selected: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "13", weekend: true })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "41", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "14", weekend: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "15" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "16", today: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "17" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "18" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "19" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "20", weekend: true })
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "41", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "14", weekend: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "15" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "16", today: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "17" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "19" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "20", weekend: true })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "42", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "21", weekend: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "22" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "23" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "24" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "26", rangeMid: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "42", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "21", weekend: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "22" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "23" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "24" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "26", rangeMid: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "43", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "30" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "31" }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "43", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "30" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "31" }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "44", weekCell: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "44", weekCell: true }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
           ] })
         ] })
       ]
@@ -10966,52 +10877,52 @@ var CalendarTable = (props) => {
 };
 
 // src/calendar/calendar-table-head.tsx
-var import_jsx_runtime185 = require("react/jsx-runtime");
+var import_jsx_runtime183 = require("react/jsx-runtime");
 var className19 = `k-calendar-thead`;
 var CalendarTableHead = (props) => {
   const {
     showWeek,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "thead",
     {
       ...other,
       className: classNames(props.className, className19),
-      children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("tr", { className: "k-calendar-tr", children: [
-        showWeek && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { weekCell: true, headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { text: "Su", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { text: "Mo", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { text: "Tu", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { text: "We", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { text: "Th", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { text: "Fr", headerCell: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CalendarCell, { text: "Sa", headerCell: true })
+      children: /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("tr", { className: "k-calendar-tr", children: [
+        showWeek && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { weekCell: true, headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { text: "Su", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { text: "Mo", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { text: "Tu", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { text: "We", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { text: "Th", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { text: "Fr", headerCell: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(CalendarCell, { text: "Sa", headerCell: true })
       ] })
     }
   );
 };
 
 // src/calendar/calendar-view.tsx
-var import_jsx_runtime186 = require("react/jsx-runtime");
+var import_jsx_runtime184 = require("react/jsx-runtime");
 var className20 = `k-calendar-view`;
-var defaultProps64 = {
+var defaultProps63 = {
   viewsCount: 1,
   orientation: "horizontal",
   calendarView: "month"
 };
 var CalendarView = (props) => {
   const {
-    orientation = defaultProps64.orientation,
-    calendarView = defaultProps64.calendarView,
-    viewsCount = defaultProps64.viewsCount,
+    orientation = defaultProps63.orientation,
+    calendarView = defaultProps63.calendarView,
+    viewsCount = defaultProps63.viewsCount,
     showWeek,
     showOtherMonth,
     showCalendarCaption,
     selectedRange,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
     "div",
     {
       ...other,
@@ -11027,7 +10938,7 @@ var CalendarView = (props) => {
         }
       ),
       children: [...Array(viewsCount)].map(
-        (_e, i) => /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+        (_e, i) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
           CalendarTable,
           {
             calendarView,
@@ -11043,6 +10954,103 @@ var CalendarView = (props) => {
   );
 };
 
+// src/dateinput/dateinput.spec.tsx
+var import_jsx_runtime185 = require("react/jsx-runtime");
+var DATEINPUT_CLASSNAME = `k-dateinput`;
+var states67 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+var options64 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultProps64 = {
+  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 = states67;
+DateInput.options = options64;
+DateInput.className = DATEINPUT_CLASSNAME;
+DateInput.defaultProps = defaultProps64;
+var dateinput_spec_default = DateInput;
+
+// src/dateinput/templates/dateinput-normal.tsx
+var import_jsx_runtime186 = require("react/jsx-runtime");
+var DateInputNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(dateinput_spec_default, { ...props });
+
 // src/datepicker/datepicker.spec.tsx
 var import_jsx_runtime187 = require("react/jsx-runtime");
 var DATEPICKER_CLASSNAME = `k-datepicker`;