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

package/dist/esm/combobox/tests/combobox-prefix-suffix.js

@@ -8857,109 +8857,14 @@ import { jsx as jsx176 } from "react/jsx-runtime";
 // src/colorpicker/templates/colorpicker-popup-palette.tsx
 import { jsx as jsx177 } from "react/jsx-runtime";
 
-// src/dateinput/dateinput.spec.tsx
-import { jsx as jsx178, jsxs as jsxs70 } from "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__ */ jsxs70(
-    Input,
-    {
-      ...other,
-      size,
-      rounded,
-      fillMode,
-      hover,
-      focus,
-      valid,
-      invalid,
-      required,
-      loading,
-      disabled,
-      readonly,
-      className: classNames(props.className, DATEINPUT_CLASSNAME),
-      children: [
-        /* @__PURE__ */ jsx178(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx178(
-          InputValidationIcon,
-          {
-            valid,
-            invalid,
-            loading,
-            disabled
-          }
-        ),
-        /* @__PURE__ */ jsx178(
-          InputLoadingIcon,
-          {
-            loading,
-            disabled
-          }
-        ),
-        showSpinButton && /* @__PURE__ */ jsx178(
-          SpinButton,
-          {
-            className: "k-input-spinner",
-            size,
-            fillMode
-          }
-        )
-      ]
-    }
-  );
-};
-DateInput.states = states65;
-DateInput.options = options62;
-DateInput.className = DATEINPUT_CLASSNAME;
-DateInput.defaultProps = defaultProps61;
-
-// src/dateinput/templates/dateinput-normal.tsx
-import { jsx as jsx179 } from "react/jsx-runtime";
-
 // src/calendar/calendar.spec.tsx
-import { jsx as jsx180, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs70 } from "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",
@@ -8968,11 +8873,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,
@@ -8981,7 +8886,7 @@ var Calendar = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs71(
+  return /* @__PURE__ */ jsxs70(
     "div",
     {
       ...other,
@@ -8997,7 +8902,7 @@ var Calendar = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx180(
+        /* @__PURE__ */ jsx178(
           CalendarHeader,
           {
             showToday: showCalendarFooter ? false : true,
@@ -9007,7 +8912,7 @@ var Calendar = (props) => {
             dir
           }
         ),
-        /* @__PURE__ */ jsx180(
+        /* @__PURE__ */ jsx178(
           CalendarView,
           {
             calendarView,
@@ -9019,19 +8924,19 @@ var Calendar = (props) => {
             selectedRange
           }
         ),
-        showCalendarFooter && /* @__PURE__ */ jsx180(CalendarFooter, {})
+        showCalendarFooter && /* @__PURE__ */ jsx178(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
-import { jsx as jsx181 } from "react/jsx-runtime";
-var states67 = [
+import { jsx as jsx179 } from "react/jsx-runtime";
+var states66 = [
   States.hover,
   States.focus,
   States.active,
@@ -9080,21 +8985,21 @@ var CalendarCell = (props) => {
     }
   ];
   if (headerCell) {
-    return /* @__PURE__ */ jsx181("th", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ jsx179("th", { ...other, className: classNames(calendarCellClasses), children: text });
   }
   if (weekCell) {
-    return /* @__PURE__ */ jsx181("td", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ jsx179("td", { ...other, className: classNames(calendarCellClasses), children: text });
   }
-  return /* @__PURE__ */ jsx181("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ jsx181("span", { className: "k-link", children: text }) });
+  return /* @__PURE__ */ jsx179("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ jsx179("span", { className: "k-link", children: text }) });
 };
 
 // src/calendar/calendar-header.tsx
-import { jsx as jsx182, jsxs as jsxs72 } from "react/jsx-runtime";
+import { jsx as jsx180, jsxs as jsxs71 } from "react/jsx-runtime";
 var className14 = `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",
@@ -9102,16 +9007,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__ */ jsxs72(
+  return /* @__PURE__ */ jsxs71(
     "div",
     {
       ...other,
@@ -9123,12 +9028,12 @@ var CalendarHeader = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx182(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
-        /* @__PURE__ */ jsx182("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsxs72("span", { className: "k-calendar-nav", children: [
-          /* @__PURE__ */ jsx182(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
-          showToday && /* @__PURE__ */ jsx182(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
-          /* @__PURE__ */ jsx182(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
+        /* @__PURE__ */ jsx180(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
+        /* @__PURE__ */ jsx180("span", { className: "k-spacer" }),
+        /* @__PURE__ */ jsxs71("span", { className: "k-calendar-nav", children: [
+          /* @__PURE__ */ jsx180(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
+          showToday && /* @__PURE__ */ jsx180(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
+          /* @__PURE__ */ jsx180(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
         ] })
       ]
     }
@@ -9136,12 +9041,12 @@ var CalendarHeader = (props) => {
 };
 
 // src/calendar/calendar-footer.tsx
-import { jsx as jsx183 } from "react/jsx-runtime";
+import { jsx as jsx181 } from "react/jsx-runtime";
 var className15 = `k-calendar-footer`;
-var CalendarFooter = (props) => /* @__PURE__ */ jsx183("div", { ...props, className: classNames(props.className, className15), children: /* @__PURE__ */ jsx183(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
+var CalendarFooter = (props) => /* @__PURE__ */ jsx181("div", { ...props, className: classNames(props.className, className15), children: /* @__PURE__ */ jsx181(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
 
 // src/calendar/calendar-table.tsx
-import { jsx as jsx184, jsxs as jsxs73 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs72 } from "react/jsx-runtime";
 var CALENDARTABLE_CLASSNAME = `k-calendar-table`;
 var CalendarTable = (props) => {
   const {
@@ -9153,7 +9058,7 @@ var CalendarTable = (props) => {
     ...other
   } = props;
   if (calendarView === "year") {
-    return /* @__PURE__ */ jsxs73(
+    return /* @__PURE__ */ jsxs72(
       "table",
       {
         ...other,
@@ -9162,25 +9067,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx184("caption", { className: "k-calendar-caption", children: "2022" }),
-          /* @__PURE__ */ jsxs73("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Jan" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Feb" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Mar" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Apr" })
+          showCalendarCaption && /* @__PURE__ */ jsx182("caption", { className: "k-calendar-caption", children: "2022" }),
+          /* @__PURE__ */ jsxs72("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Jan" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Feb" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Mar" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Apr" })
             ] }),
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "May" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Jun", hover: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Jul", focus: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Au", selected: true })
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "May" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Jun", hover: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Jul", focus: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Au", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Sep" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Oct", today: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Nov" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "Dec" })
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Sep" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Oct", today: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Nov" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "Dec" })
             ] })
           ] })
         ]
@@ -9188,7 +9093,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "decade") {
-    return /* @__PURE__ */ jsxs73(
+    return /* @__PURE__ */ jsxs72(
       "table",
       {
         ...other,
@@ -9197,25 +9102,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx184("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
-          /* @__PURE__ */ jsxs73("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { className: "k-out-of-range" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2020" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2021", today: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2022" })
+          showCalendarCaption && /* @__PURE__ */ jsx182("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
+          /* @__PURE__ */ jsxs72("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { className: "k-out-of-range" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2020" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2021", today: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2022" })
             ] }),
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2023" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2024", hover: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2025", focus: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2026", selected: true })
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2023" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2024", hover: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2025", focus: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2026", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2027" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2028" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2029" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2027" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2028" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2029" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
@@ -9223,7 +9128,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "century") {
-    return /* @__PURE__ */ jsxs73(
+    return /* @__PURE__ */ jsxs72(
       "table",
       {
         ...other,
@@ -9232,32 +9137,32 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx184("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
-          /* @__PURE__ */ jsxs73("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "1990 - 1999" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2000 - 2009" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2010 - 2019", today: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2020 - 2029" })
+          showCalendarCaption && /* @__PURE__ */ jsx182("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
+          /* @__PURE__ */ jsxs72("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "1990 - 1999" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2000 - 2009" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2010 - 2019", today: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2020 - 2029" })
             ] }),
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2030 - 2039" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2040 - 2049", hover: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2050 - 2059", focus: true }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2060 - 2069", selected: true })
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2030 - 2039" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2040 - 2049", hover: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2050 - 2059", focus: true }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2060 - 2069", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2070 - 2079" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2080 - 2089" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { text: "2090 - 2099" }),
-              /* @__PURE__ */ jsx184(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2070 - 2079" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2080 - 2089" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { text: "2090 - 2099" }),
+              /* @__PURE__ */ jsx182(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs73(
+  return /* @__PURE__ */ jsxs72(
     "table",
     {
       ...other,
@@ -9266,68 +9171,68 @@ var CalendarTable = (props) => {
         CALENDARTABLE_CLASSNAME
       ),
       children: [
-        showCalendarCaption && /* @__PURE__ */ jsx184("caption", { className: "k-calendar-caption", children: "October 2021" }),
-        /* @__PURE__ */ jsx184(CalendarTableHead, { showWeek }),
-        /* @__PURE__ */ jsxs73("tbody", { className: "k-calendar-tbody", children: [
-          /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx184(CalendarCell, { text: "39", weekCell: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "1" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "2" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "3" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "4" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "5" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "6", weekend: true })
+        showCalendarCaption && /* @__PURE__ */ jsx182("caption", { className: "k-calendar-caption", children: "October 2021" }),
+        /* @__PURE__ */ jsx182(CalendarTableHead, { showWeek }),
+        /* @__PURE__ */ jsxs72("tbody", { className: "k-calendar-tbody", children: [
+          /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx182(CalendarCell, { text: "39", weekCell: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "1" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "2" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "3" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "4" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "5" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "6", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx184(CalendarCell, { text: "40", weekCell: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "7", weekend: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "8", hover: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "9", focus: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "10", selected: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "11", hover: true, focus: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "12", hover: true, selected: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "13", weekend: true })
+          /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx182(CalendarCell, { text: "40", weekCell: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "7", weekend: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "8", hover: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "9", focus: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "10", selected: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "11", hover: true, focus: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "12", hover: true, selected: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "13", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx184(CalendarCell, { text: "41", weekCell: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "14", weekend: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "15" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "16", today: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "17" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "18" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "19" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "20", weekend: true })
+          /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx182(CalendarCell, { text: "41", weekCell: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "14", weekend: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "15" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "16", today: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "17" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "18" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "19" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "20", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx184(CalendarCell, { text: "42", weekCell: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "21", weekend: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "22" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "23" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "24" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "26", rangeMid: selectedRange }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
+          /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx182(CalendarCell, { text: "42", weekCell: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "21", weekend: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "22" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "23" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "24" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "26", rangeMid: selectedRange }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
           ] }),
-          /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx184(CalendarCell, { text: "43", weekCell: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "30" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "31" }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx182(CalendarCell, { text: "43", weekCell: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "30" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "31" }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
           ] }),
-          /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx184(CalendarCell, { text: "44", weekCell: true }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx184(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ jsxs72("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx182(CalendarCell, { text: "44", weekCell: true }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx182(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
           ] })
         ] })
       ]
@@ -9336,52 +9241,52 @@ var CalendarTable = (props) => {
 };
 
 // src/calendar/calendar-table-head.tsx
-import { jsx as jsx185, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs73 } from "react/jsx-runtime";
 var className16 = `k-calendar-thead`;
 var CalendarTableHead = (props) => {
   const {
     showWeek,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx185(
+  return /* @__PURE__ */ jsx183(
     "thead",
     {
       ...other,
       className: classNames(props.className, className16),
-      children: /* @__PURE__ */ jsxs74("tr", { className: "k-calendar-tr", children: [
-        showWeek && /* @__PURE__ */ jsx185(CalendarCell, { weekCell: true, headerCell: true }),
-        /* @__PURE__ */ jsx185(CalendarCell, { text: "Su", headerCell: true }),
-        /* @__PURE__ */ jsx185(CalendarCell, { text: "Mo", headerCell: true }),
-        /* @__PURE__ */ jsx185(CalendarCell, { text: "Tu", headerCell: true }),
-        /* @__PURE__ */ jsx185(CalendarCell, { text: "We", headerCell: true }),
-        /* @__PURE__ */ jsx185(CalendarCell, { text: "Th", headerCell: true }),
-        /* @__PURE__ */ jsx185(CalendarCell, { text: "Fr", headerCell: true }),
-        /* @__PURE__ */ jsx185(CalendarCell, { text: "Sa", headerCell: true })
+      children: /* @__PURE__ */ jsxs73("tr", { className: "k-calendar-tr", children: [
+        showWeek && /* @__PURE__ */ jsx183(CalendarCell, { weekCell: true, headerCell: true }),
+        /* @__PURE__ */ jsx183(CalendarCell, { text: "Su", headerCell: true }),
+        /* @__PURE__ */ jsx183(CalendarCell, { text: "Mo", headerCell: true }),
+        /* @__PURE__ */ jsx183(CalendarCell, { text: "Tu", headerCell: true }),
+        /* @__PURE__ */ jsx183(CalendarCell, { text: "We", headerCell: true }),
+        /* @__PURE__ */ jsx183(CalendarCell, { text: "Th", headerCell: true }),
+        /* @__PURE__ */ jsx183(CalendarCell, { text: "Fr", headerCell: true }),
+        /* @__PURE__ */ jsx183(CalendarCell, { text: "Sa", headerCell: true })
       ] })
     }
   );
 };
 
 // src/calendar/calendar-view.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx184 } from "react/jsx-runtime";
 var className17 = `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__ */ jsx186(
+  return /* @__PURE__ */ jsx184(
     "div",
     {
       ...other,
@@ -9397,7 +9302,7 @@ var CalendarView = (props) => {
         }
       ),
       children: [...Array(viewsCount)].map(
-        (_e, i) => /* @__PURE__ */ jsx186(
+        (_e, i) => /* @__PURE__ */ jsx184(
           CalendarTable,
           {
             calendarView,
@@ -9413,6 +9318,101 @@ var CalendarView = (props) => {
   );
 };
 
+// src/dateinput/dateinput.spec.tsx
+import { jsx as jsx185, jsxs as jsxs74 } from "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__ */ jsxs74(
+    Input,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, DATEINPUT_CLASSNAME),
+      children: [
+        /* @__PURE__ */ jsx185(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx185(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx185(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showSpinButton && /* @__PURE__ */ jsx185(
+          SpinButton,
+          {
+            className: "k-input-spinner",
+            size,
+            fillMode
+          }
+        )
+      ]
+    }
+  );
+};
+DateInput.states = states67;
+DateInput.options = options64;
+DateInput.className = DATEINPUT_CLASSNAME;
+DateInput.defaultProps = defaultProps64;
+
+// src/dateinput/templates/dateinput-normal.tsx
+import { jsx as jsx186 } from "react/jsx-runtime";
+
 // src/datepicker/datepicker.spec.tsx
 import { Fragment as Fragment55, jsx as jsx187, jsxs as jsxs75 } from "react/jsx-runtime";
 var DATEPICKER_CLASSNAME = `k-datepicker`;