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

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

@@ -9112,109 +9112,14 @@ import { jsx as jsx183 } from "react/jsx-runtime";
 // src/colorpicker/templates/colorpicker-popup-palette.tsx
 import { jsx as jsx184 } from "react/jsx-runtime";
 
-// src/dateinput/dateinput.spec.tsx
-import { jsx as jsx185, jsxs as jsxs73 } from "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__ */ jsxs73(
-    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 = states66;
-DateInput.options = options63;
-DateInput.className = DATEINPUT_CLASSNAME;
-DateInput.defaultProps = defaultProps62;
-
-// src/dateinput/templates/dateinput-normal.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
-
 // src/calendar/calendar.spec.tsx
-import { jsx as jsx187, jsxs as jsxs74 } from "react/jsx-runtime";
+import { jsx as jsx185, jsxs as jsxs73 } from "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",
@@ -9223,11 +9128,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,
@@ -9236,7 +9141,7 @@ var Calendar = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs74(
+  return /* @__PURE__ */ jsxs73(
     "div",
     {
       ...other,
@@ -9252,7 +9157,7 @@ var Calendar = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx187(
+        /* @__PURE__ */ jsx185(
           CalendarHeader,
           {
             showToday: showCalendarFooter ? false : true,
@@ -9262,7 +9167,7 @@ var Calendar = (props) => {
             dir
           }
         ),
-        /* @__PURE__ */ jsx187(
+        /* @__PURE__ */ jsx185(
           CalendarView,
           {
             calendarView,
@@ -9274,19 +9179,19 @@ var Calendar = (props) => {
             selectedRange
           }
         ),
-        showCalendarFooter && /* @__PURE__ */ jsx187(CalendarFooter, {})
+        showCalendarFooter && /* @__PURE__ */ jsx185(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
-import { jsx as jsx188 } from "react/jsx-runtime";
-var states68 = [
+import { jsx as jsx186 } from "react/jsx-runtime";
+var states67 = [
   States.hover,
   States.focus,
   States.active,
@@ -9335,21 +9240,21 @@ var CalendarCell = (props) => {
     }
   ];
   if (headerCell) {
-    return /* @__PURE__ */ jsx188("th", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ jsx186("th", { ...other, className: classNames(calendarCellClasses), children: text });
   }
   if (weekCell) {
-    return /* @__PURE__ */ jsx188("td", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ jsx186("td", { ...other, className: classNames(calendarCellClasses), children: text });
   }
-  return /* @__PURE__ */ jsx188("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ jsx188("span", { className: "k-link", children: text }) });
+  return /* @__PURE__ */ jsx186("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ jsx186("span", { className: "k-link", children: text }) });
 };
 
 // src/calendar/calendar-header.tsx
-import { jsx as jsx189, jsxs as jsxs75 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs74 } from "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",
@@ -9357,16 +9262,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__ */ jsxs75(
+  return /* @__PURE__ */ jsxs74(
     "div",
     {
       ...other,
@@ -9378,12 +9283,12 @@ var CalendarHeader = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx189(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
-        /* @__PURE__ */ jsx189("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsxs75("span", { className: "k-calendar-nav", children: [
-          /* @__PURE__ */ jsx189(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
-          showToday && /* @__PURE__ */ jsx189(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
-          /* @__PURE__ */ jsx189(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
+        /* @__PURE__ */ jsx187(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
+        /* @__PURE__ */ jsx187("span", { className: "k-spacer" }),
+        /* @__PURE__ */ jsxs74("span", { className: "k-calendar-nav", children: [
+          /* @__PURE__ */ jsx187(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
+          showToday && /* @__PURE__ */ jsx187(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
+          /* @__PURE__ */ jsx187(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
         ] })
       ]
     }
@@ -9391,12 +9296,12 @@ var CalendarHeader = (props) => {
 };
 
 // src/calendar/calendar-footer.tsx
-import { jsx as jsx190 } from "react/jsx-runtime";
+import { jsx as jsx188 } from "react/jsx-runtime";
 var className15 = `k-calendar-footer`;
-var CalendarFooter = (props) => /* @__PURE__ */ jsx190("div", { ...props, className: classNames(props.className, className15), children: /* @__PURE__ */ jsx190(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
+var CalendarFooter = (props) => /* @__PURE__ */ jsx188("div", { ...props, className: classNames(props.className, className15), children: /* @__PURE__ */ jsx188(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
 
 // src/calendar/calendar-table.tsx
-import { jsx as jsx191, jsxs as jsxs76 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs75 } from "react/jsx-runtime";
 var CALENDARTABLE_CLASSNAME = `k-calendar-table`;
 var CalendarTable = (props) => {
   const {
@@ -9408,7 +9313,7 @@ var CalendarTable = (props) => {
     ...other
   } = props;
   if (calendarView === "year") {
-    return /* @__PURE__ */ jsxs76(
+    return /* @__PURE__ */ jsxs75(
       "table",
       {
         ...other,
@@ -9417,25 +9322,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx191("caption", { className: "k-calendar-caption", children: "2022" }),
-          /* @__PURE__ */ jsxs76("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Jan" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Feb" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Mar" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Apr" })
+          showCalendarCaption && /* @__PURE__ */ jsx189("caption", { className: "k-calendar-caption", children: "2022" }),
+          /* @__PURE__ */ jsxs75("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Jan" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Feb" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Mar" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Apr" })
             ] }),
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "May" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Jun", hover: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Jul", focus: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Au", selected: true })
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "May" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Jun", hover: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Jul", focus: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Au", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Sep" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Oct", today: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Nov" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "Dec" })
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Sep" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Oct", today: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Nov" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "Dec" })
             ] })
           ] })
         ]
@@ -9443,7 +9348,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "decade") {
-    return /* @__PURE__ */ jsxs76(
+    return /* @__PURE__ */ jsxs75(
       "table",
       {
         ...other,
@@ -9452,25 +9357,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx191("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
-          /* @__PURE__ */ jsxs76("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { className: "k-out-of-range" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2020" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2021", today: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2022" })
+          showCalendarCaption && /* @__PURE__ */ jsx189("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
+          /* @__PURE__ */ jsxs75("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { className: "k-out-of-range" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2020" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2021", today: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2022" })
             ] }),
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2023" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2024", hover: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2025", focus: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2026", selected: true })
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2023" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2024", hover: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2025", focus: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2026", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2027" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2028" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2029" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2027" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2028" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2029" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
@@ -9478,7 +9383,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "century") {
-    return /* @__PURE__ */ jsxs76(
+    return /* @__PURE__ */ jsxs75(
       "table",
       {
         ...other,
@@ -9487,32 +9392,32 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx191("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
-          /* @__PURE__ */ jsxs76("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "1990 - 1999" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2000 - 2009" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2010 - 2019", today: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2020 - 2029" })
+          showCalendarCaption && /* @__PURE__ */ jsx189("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
+          /* @__PURE__ */ jsxs75("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "1990 - 1999" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2000 - 2009" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2010 - 2019", today: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2020 - 2029" })
             ] }),
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2030 - 2039" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2040 - 2049", hover: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2050 - 2059", focus: true }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2060 - 2069", selected: true })
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2030 - 2039" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2040 - 2049", hover: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2050 - 2059", focus: true }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2060 - 2069", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2070 - 2079" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2080 - 2089" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { text: "2090 - 2099" }),
-              /* @__PURE__ */ jsx191(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2070 - 2079" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2080 - 2089" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { text: "2090 - 2099" }),
+              /* @__PURE__ */ jsx189(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs76(
+  return /* @__PURE__ */ jsxs75(
     "table",
     {
       ...other,
@@ -9521,68 +9426,68 @@ var CalendarTable = (props) => {
         CALENDARTABLE_CLASSNAME
       ),
       children: [
-        showCalendarCaption && /* @__PURE__ */ jsx191("caption", { className: "k-calendar-caption", children: "October 2021" }),
-        /* @__PURE__ */ jsx191(CalendarTableHead, { showWeek }),
-        /* @__PURE__ */ jsxs76("tbody", { className: "k-calendar-tbody", children: [
-          /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx191(CalendarCell, { text: "39", weekCell: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "1" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "2" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "3" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "4" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "5" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "6", weekend: true })
+        showCalendarCaption && /* @__PURE__ */ jsx189("caption", { className: "k-calendar-caption", children: "October 2021" }),
+        /* @__PURE__ */ jsx189(CalendarTableHead, { showWeek }),
+        /* @__PURE__ */ jsxs75("tbody", { className: "k-calendar-tbody", children: [
+          /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx189(CalendarCell, { text: "39", weekCell: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "1" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "2" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "3" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "4" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "5" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "6", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx191(CalendarCell, { text: "40", weekCell: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "7", weekend: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "8", hover: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "9", focus: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "10", selected: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "11", hover: true, focus: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "12", hover: true, selected: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "13", weekend: true })
+          /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx189(CalendarCell, { text: "40", weekCell: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "7", weekend: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "8", hover: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "9", focus: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "10", selected: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "11", hover: true, focus: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "12", hover: true, selected: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "13", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx191(CalendarCell, { text: "41", weekCell: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "14", weekend: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "15" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "16", today: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "17" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "18" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "19" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "20", weekend: true })
+          /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx189(CalendarCell, { text: "41", weekCell: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "14", weekend: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "15" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "16", today: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "17" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "18" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "19" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "20", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx191(CalendarCell, { text: "42", weekCell: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "21", weekend: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "22" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "23" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "24" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "26", rangeMid: selectedRange }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
+          /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx189(CalendarCell, { text: "42", weekCell: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "21", weekend: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "22" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "23" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "24" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "26", rangeMid: selectedRange }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
           ] }),
-          /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx191(CalendarCell, { text: "43", weekCell: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "30" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "31" }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx189(CalendarCell, { text: "43", weekCell: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "30" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "31" }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
           ] }),
-          /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx191(CalendarCell, { text: "44", weekCell: true }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx191(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ jsxs75("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx189(CalendarCell, { text: "44", weekCell: true }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx189(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
           ] })
         ] })
       ]
@@ -9591,52 +9496,52 @@ var CalendarTable = (props) => {
 };
 
 // src/calendar/calendar-table-head.tsx
-import { jsx as jsx192, jsxs as jsxs77 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs76 } from "react/jsx-runtime";
 var className16 = `k-calendar-thead`;
 var CalendarTableHead = (props) => {
   const {
     showWeek,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx192(
+  return /* @__PURE__ */ jsx190(
     "thead",
     {
       ...other,
       className: classNames(props.className, className16),
-      children: /* @__PURE__ */ jsxs77("tr", { className: "k-calendar-tr", children: [
-        showWeek && /* @__PURE__ */ jsx192(CalendarCell, { weekCell: true, headerCell: true }),
-        /* @__PURE__ */ jsx192(CalendarCell, { text: "Su", headerCell: true }),
-        /* @__PURE__ */ jsx192(CalendarCell, { text: "Mo", headerCell: true }),
-        /* @__PURE__ */ jsx192(CalendarCell, { text: "Tu", headerCell: true }),
-        /* @__PURE__ */ jsx192(CalendarCell, { text: "We", headerCell: true }),
-        /* @__PURE__ */ jsx192(CalendarCell, { text: "Th", headerCell: true }),
-        /* @__PURE__ */ jsx192(CalendarCell, { text: "Fr", headerCell: true }),
-        /* @__PURE__ */ jsx192(CalendarCell, { text: "Sa", headerCell: true })
+      children: /* @__PURE__ */ jsxs76("tr", { className: "k-calendar-tr", children: [
+        showWeek && /* @__PURE__ */ jsx190(CalendarCell, { weekCell: true, headerCell: true }),
+        /* @__PURE__ */ jsx190(CalendarCell, { text: "Su", headerCell: true }),
+        /* @__PURE__ */ jsx190(CalendarCell, { text: "Mo", headerCell: true }),
+        /* @__PURE__ */ jsx190(CalendarCell, { text: "Tu", headerCell: true }),
+        /* @__PURE__ */ jsx190(CalendarCell, { text: "We", headerCell: true }),
+        /* @__PURE__ */ jsx190(CalendarCell, { text: "Th", headerCell: true }),
+        /* @__PURE__ */ jsx190(CalendarCell, { text: "Fr", headerCell: true }),
+        /* @__PURE__ */ jsx190(CalendarCell, { text: "Sa", headerCell: true })
       ] })
     }
   );
 };
 
 // src/calendar/calendar-view.tsx
-import { jsx as jsx193 } from "react/jsx-runtime";
+import { jsx as jsx191 } from "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__ */ jsx193(
+  return /* @__PURE__ */ jsx191(
     "div",
     {
       ...other,
@@ -9652,7 +9557,7 @@ var CalendarView = (props) => {
         }
       ),
       children: [...Array(viewsCount)].map(
-        (_e, i) => /* @__PURE__ */ jsx193(
+        (_e, i) => /* @__PURE__ */ jsx191(
           CalendarTable,
           {
             calendarView,
@@ -9668,6 +9573,101 @@ var CalendarView = (props) => {
   );
 };
 
+// src/dateinput/dateinput.spec.tsx
+import { jsx as jsx192, jsxs as jsxs77 } from "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__ */ jsxs77(
+    Input,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, DATEINPUT_CLASSNAME),
+      children: [
+        /* @__PURE__ */ jsx192(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx192(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx192(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showSpinButton && /* @__PURE__ */ jsx192(
+          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
+import { jsx as jsx193 } from "react/jsx-runtime";
+
 // src/datepicker/datepicker.spec.tsx
 import { Fragment as Fragment57, jsx as jsx194, jsxs as jsxs78 } from "react/jsx-runtime";
 var DATEPICKER_CLASSNAME = `k-datepicker`;