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

package/dist/esm/filemanager/tests/filemanager-listview-preview.js

@@ -11029,109 +11029,14 @@ Captcha.defaultProps = defaultProps86;
 // src/captcha/templates/captcha-normal.tsx
 import { jsx as jsx256 } from "react/jsx-runtime";
 
-// src/dateinput/dateinput.spec.tsx
-import { jsx as jsx257, jsxs as jsxs99 } from "react/jsx-runtime";
-var DATEINPUT_CLASSNAME = `k-dateinput`;
-var states93 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options88 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps87 = {
-  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__ */ jsxs99(
-    Input,
-    {
-      ...other,
-      size,
-      rounded,
-      fillMode,
-      hover,
-      focus,
-      valid,
-      invalid,
-      required,
-      loading,
-      disabled,
-      readonly,
-      className: classNames(props.className, DATEINPUT_CLASSNAME),
-      children: [
-        /* @__PURE__ */ jsx257(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx257(
-          InputValidationIcon,
-          {
-            valid,
-            invalid,
-            loading,
-            disabled
-          }
-        ),
-        /* @__PURE__ */ jsx257(
-          InputLoadingIcon,
-          {
-            loading,
-            disabled
-          }
-        ),
-        showSpinButton && /* @__PURE__ */ jsx257(
-          SpinButton,
-          {
-            className: "k-input-spinner",
-            size,
-            fillMode
-          }
-        )
-      ]
-    }
-  );
-};
-DateInput.states = states93;
-DateInput.options = options88;
-DateInput.className = DATEINPUT_CLASSNAME;
-DateInput.defaultProps = defaultProps87;
-
-// src/dateinput/templates/dateinput-normal.tsx
-import { jsx as jsx258 } from "react/jsx-runtime";
-
 // src/calendar/calendar.spec.tsx
-import { jsx as jsx259, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx257, jsxs as jsxs99 } from "react/jsx-runtime";
 var CALENDAR_CLASSNAME = `k-calendar`;
-var states94 = [];
-var options89 = {
+var states93 = [];
+var options88 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps88 = {
+var defaultProps87 = {
   size: Size.medium,
   viewsCount: 1,
   orientation: "horizontal",
@@ -11140,11 +11045,11 @@ var defaultProps88 = {
 };
 var Calendar = (props) => {
   const {
-    size = defaultProps88.size,
-    orientation = defaultProps88.orientation,
-    calendarView = defaultProps88.calendarView,
-    calendarHeaderText = defaultProps88.calendarHeaderText,
-    viewsCount = defaultProps88.viewsCount,
+    size = defaultProps87.size,
+    orientation = defaultProps87.orientation,
+    calendarView = defaultProps87.calendarView,
+    calendarHeaderText = defaultProps87.calendarHeaderText,
+    viewsCount = defaultProps87.viewsCount,
     showWeek,
     showOtherMonth,
     showCalendarCaption,
@@ -11153,7 +11058,7 @@ var Calendar = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs100(
+  return /* @__PURE__ */ jsxs99(
     "div",
     {
       ...other,
@@ -11169,7 +11074,7 @@ var Calendar = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx259(
+        /* @__PURE__ */ jsx257(
           CalendarHeader,
           {
             showToday: showCalendarFooter ? false : true,
@@ -11179,7 +11084,7 @@ var Calendar = (props) => {
             dir
           }
         ),
-        /* @__PURE__ */ jsx259(
+        /* @__PURE__ */ jsx257(
           CalendarView,
           {
             calendarView,
@@ -11191,19 +11096,19 @@ var Calendar = (props) => {
             selectedRange
           }
         ),
-        showCalendarFooter && /* @__PURE__ */ jsx259(CalendarFooter, {})
+        showCalendarFooter && /* @__PURE__ */ jsx257(CalendarFooter, {})
       ]
     }
   );
 };
-Calendar.states = states94;
-Calendar.options = options89;
+Calendar.states = states93;
+Calendar.options = options88;
 Calendar.className = CALENDAR_CLASSNAME;
-Calendar.defaultProps = defaultProps88;
+Calendar.defaultProps = defaultProps87;
 
 // src/calendar/calendar-cell.tsx
-import { jsx as jsx260 } from "react/jsx-runtime";
-var states95 = [
+import { jsx as jsx258 } from "react/jsx-runtime";
+var states94 = [
   States.hover,
   States.focus,
   States.active,
@@ -11252,21 +11157,21 @@ var CalendarCell = (props) => {
     }
   ];
   if (headerCell) {
-    return /* @__PURE__ */ jsx260("th", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ jsx258("th", { ...other, className: classNames(calendarCellClasses), children: text });
   }
   if (weekCell) {
-    return /* @__PURE__ */ jsx260("td", { ...other, className: classNames(calendarCellClasses), children: text });
+    return /* @__PURE__ */ jsx258("td", { ...other, className: classNames(calendarCellClasses), children: text });
   }
-  return /* @__PURE__ */ jsx260("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ jsx260("span", { className: "k-link", children: text }) });
+  return /* @__PURE__ */ jsx258("td", { ...other, className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ jsx258("span", { className: "k-link", children: text }) });
 };
 
 // src/calendar/calendar-header.tsx
-import { jsx as jsx261, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx259, jsxs as jsxs100 } from "react/jsx-runtime";
 var className24 = `k-calendar-header`;
-var options90 = {
+var options89 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps89 = {
+var defaultProps88 = {
   calendarHeaderText: "October 2021",
   showToday: true,
   orientation: "horizontal",
@@ -11274,16 +11179,16 @@ var defaultProps89 = {
 };
 var CalendarHeader = (props) => {
   const {
-    calendarHeaderText = defaultProps89.calendarHeaderText,
-    showToday = defaultProps89.showToday,
-    orientation = defaultProps89.orientation,
-    size = defaultProps89.size,
+    calendarHeaderText = defaultProps88.calendarHeaderText,
+    showToday = defaultProps88.showToday,
+    orientation = defaultProps88.orientation,
+    size = defaultProps88.size,
     dir,
     ...other
   } = props;
   const iconPrev = dir === "rtl" ? "chevron-right" : "chevron-left";
   const iconNext = dir === "rtl" ? "chevron-left" : "chevron-right";
-  return /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsxs100(
     "div",
     {
       ...other,
@@ -11295,12 +11200,12 @@ var CalendarHeader = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx261(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
-        /* @__PURE__ */ jsx261("span", { className: "k-spacer" }),
-        /* @__PURE__ */ jsxs101("span", { className: "k-calendar-nav", children: [
-          /* @__PURE__ */ jsx261(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
-          showToday && /* @__PURE__ */ jsx261(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
-          /* @__PURE__ */ jsx261(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
+        /* @__PURE__ */ jsx259(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
+        /* @__PURE__ */ jsx259("span", { className: "k-spacer" }),
+        /* @__PURE__ */ jsxs100("span", { className: "k-calendar-nav", children: [
+          /* @__PURE__ */ jsx259(Button, { className: "k-calendar-nav-prev", icon: iconPrev, size, fillMode: "flat" }),
+          showToday && /* @__PURE__ */ jsx259(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
+          /* @__PURE__ */ jsx259(Button, { className: "k-calendar-nav-next", icon: iconNext, size, fillMode: "flat" })
         ] })
       ]
     }
@@ -11308,12 +11213,12 @@ var CalendarHeader = (props) => {
 };
 
 // src/calendar/calendar-footer.tsx
-import { jsx as jsx262 } from "react/jsx-runtime";
+import { jsx as jsx260 } from "react/jsx-runtime";
 var className25 = `k-calendar-footer`;
-var CalendarFooter = (props) => /* @__PURE__ */ jsx262("div", { ...props, className: classNames(props.className, className25), children: /* @__PURE__ */ jsx262(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
+var CalendarFooter = (props) => /* @__PURE__ */ jsx260("div", { ...props, className: classNames(props.className, className25), children: /* @__PURE__ */ jsx260(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) });
 
 // src/calendar/calendar-table.tsx
-import { jsx as jsx263, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx261, jsxs as jsxs101 } from "react/jsx-runtime";
 var CALENDARTABLE_CLASSNAME = `k-calendar-table`;
 var CalendarTable = (props) => {
   const {
@@ -11325,7 +11230,7 @@ var CalendarTable = (props) => {
     ...other
   } = props;
   if (calendarView === "year") {
-    return /* @__PURE__ */ jsxs102(
+    return /* @__PURE__ */ jsxs101(
       "table",
       {
         ...other,
@@ -11334,25 +11239,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx263("caption", { className: "k-calendar-caption", children: "2022" }),
-          /* @__PURE__ */ jsxs102("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Jan" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Feb" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Mar" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Apr" })
+          showCalendarCaption && /* @__PURE__ */ jsx261("caption", { className: "k-calendar-caption", children: "2022" }),
+          /* @__PURE__ */ jsxs101("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Jan" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Feb" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Mar" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Apr" })
             ] }),
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "May" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Jun", hover: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Jul", focus: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Au", selected: true })
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "May" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Jun", hover: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Jul", focus: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Au", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Sep" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Oct", today: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Nov" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "Dec" })
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Sep" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Oct", today: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Nov" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "Dec" })
             ] })
           ] })
         ]
@@ -11360,7 +11265,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "decade") {
-    return /* @__PURE__ */ jsxs102(
+    return /* @__PURE__ */ jsxs101(
       "table",
       {
         ...other,
@@ -11369,25 +11274,25 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx263("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
-          /* @__PURE__ */ jsxs102("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { className: "k-out-of-range" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2020" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2021", today: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2022" })
+          showCalendarCaption && /* @__PURE__ */ jsx261("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
+          /* @__PURE__ */ jsxs101("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { className: "k-out-of-range" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2020" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2021", today: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2022" })
             ] }),
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2023" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2024", hover: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2025", focus: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2026", selected: true })
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2023" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2024", hover: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2025", focus: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2026", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2027" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2028" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2029" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2027" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2028" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2029" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
@@ -11395,7 +11300,7 @@ var CalendarTable = (props) => {
     );
   }
   if (calendarView === "century") {
-    return /* @__PURE__ */ jsxs102(
+    return /* @__PURE__ */ jsxs101(
       "table",
       {
         ...other,
@@ -11404,32 +11309,32 @@ var CalendarTable = (props) => {
           CALENDARTABLE_CLASSNAME
         ),
         children: [
-          showCalendarCaption && /* @__PURE__ */ jsx263("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
-          /* @__PURE__ */ jsxs102("tbody", { className: "k-calendar-tbody", children: [
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "1990 - 1999" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2000 - 2009" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2010 - 2019", today: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2020 - 2029" })
+          showCalendarCaption && /* @__PURE__ */ jsx261("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
+          /* @__PURE__ */ jsxs101("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "1990 - 1999" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2000 - 2009" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2010 - 2019", today: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2020 - 2029" })
             ] }),
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2030 - 2039" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2040 - 2049", hover: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2050 - 2059", focus: true }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2060 - 2069", selected: true })
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2030 - 2039" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2040 - 2049", hover: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2050 - 2059", focus: true }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2060 - 2069", selected: true })
             ] }),
-            /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2070 - 2079" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2080 - 2089" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { text: "2090 - 2099" }),
-              /* @__PURE__ */ jsx263(CalendarCell, { className: "k-out-of-range" })
+            /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2070 - 2079" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2080 - 2089" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { text: "2090 - 2099" }),
+              /* @__PURE__ */ jsx261(CalendarCell, { className: "k-out-of-range" })
             ] })
           ] })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsxs101(
     "table",
     {
       ...other,
@@ -11438,68 +11343,68 @@ var CalendarTable = (props) => {
         CALENDARTABLE_CLASSNAME
       ),
       children: [
-        showCalendarCaption && /* @__PURE__ */ jsx263("caption", { className: "k-calendar-caption", children: "October 2021" }),
-        /* @__PURE__ */ jsx263(CalendarTableHead, { showWeek }),
-        /* @__PURE__ */ jsxs102("tbody", { className: "k-calendar-tbody", children: [
-          /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx263(CalendarCell, { text: "39", weekCell: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "1" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "2" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "3" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "4" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "5" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "6", weekend: true })
+        showCalendarCaption && /* @__PURE__ */ jsx261("caption", { className: "k-calendar-caption", children: "October 2021" }),
+        /* @__PURE__ */ jsx261(CalendarTableHead, { showWeek }),
+        /* @__PURE__ */ jsxs101("tbody", { className: "k-calendar-tbody", children: [
+          /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx261(CalendarCell, { text: "39", weekCell: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "1" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "2" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "3" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "4" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "5" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "6", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx263(CalendarCell, { text: "40", weekCell: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "7", weekend: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "8", hover: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "9", focus: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "10", selected: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "11", hover: true, focus: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "12", hover: true, selected: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "13", weekend: true })
+          /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx261(CalendarCell, { text: "40", weekCell: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "7", weekend: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "8", hover: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "9", focus: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "10", selected: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "11", hover: true, focus: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "12", hover: true, selected: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "13", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx263(CalendarCell, { text: "41", weekCell: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "14", weekend: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "15" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "16", today: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "17" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "18" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "19" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "20", weekend: true })
+          /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx261(CalendarCell, { text: "41", weekCell: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "14", weekend: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "15" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "16", today: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "17" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "18" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "19" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "20", weekend: true })
           ] }),
-          /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx263(CalendarCell, { text: "42", weekCell: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "21", weekend: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "22" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "23" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "24" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "26", rangeMid: selectedRange }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
+          /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx261(CalendarCell, { text: "42", weekCell: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "21", weekend: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "22" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "23" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "24" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "26", rangeMid: selectedRange }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
           ] }),
-          /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx263(CalendarCell, { text: "43", weekCell: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "30" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "31" }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx261(CalendarCell, { text: "43", weekCell: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "30" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "31" }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
           ] }),
-          /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
-            showWeek && /* @__PURE__ */ jsx263(CalendarCell, { text: "44", weekCell: true }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
-            /* @__PURE__ */ jsx263(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
+          /* @__PURE__ */ jsxs101("tr", { className: "k-calendar-tr", children: [
+            showWeek && /* @__PURE__ */ jsx261(CalendarCell, { text: "44", weekCell: true }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
+            /* @__PURE__ */ jsx261(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
           ] })
         ] })
       ]
@@ -11508,52 +11413,52 @@ var CalendarTable = (props) => {
 };
 
 // src/calendar/calendar-table-head.tsx
-import { jsx as jsx264, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx262, jsxs as jsxs102 } from "react/jsx-runtime";
 var className26 = `k-calendar-thead`;
 var CalendarTableHead = (props) => {
   const {
     showWeek,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx264(
+  return /* @__PURE__ */ jsx262(
     "thead",
     {
       ...other,
       className: classNames(props.className, className26),
-      children: /* @__PURE__ */ jsxs103("tr", { className: "k-calendar-tr", children: [
-        showWeek && /* @__PURE__ */ jsx264(CalendarCell, { weekCell: true, headerCell: true }),
-        /* @__PURE__ */ jsx264(CalendarCell, { text: "Su", headerCell: true }),
-        /* @__PURE__ */ jsx264(CalendarCell, { text: "Mo", headerCell: true }),
-        /* @__PURE__ */ jsx264(CalendarCell, { text: "Tu", headerCell: true }),
-        /* @__PURE__ */ jsx264(CalendarCell, { text: "We", headerCell: true }),
-        /* @__PURE__ */ jsx264(CalendarCell, { text: "Th", headerCell: true }),
-        /* @__PURE__ */ jsx264(CalendarCell, { text: "Fr", headerCell: true }),
-        /* @__PURE__ */ jsx264(CalendarCell, { text: "Sa", headerCell: true })
+      children: /* @__PURE__ */ jsxs102("tr", { className: "k-calendar-tr", children: [
+        showWeek && /* @__PURE__ */ jsx262(CalendarCell, { weekCell: true, headerCell: true }),
+        /* @__PURE__ */ jsx262(CalendarCell, { text: "Su", headerCell: true }),
+        /* @__PURE__ */ jsx262(CalendarCell, { text: "Mo", headerCell: true }),
+        /* @__PURE__ */ jsx262(CalendarCell, { text: "Tu", headerCell: true }),
+        /* @__PURE__ */ jsx262(CalendarCell, { text: "We", headerCell: true }),
+        /* @__PURE__ */ jsx262(CalendarCell, { text: "Th", headerCell: true }),
+        /* @__PURE__ */ jsx262(CalendarCell, { text: "Fr", headerCell: true }),
+        /* @__PURE__ */ jsx262(CalendarCell, { text: "Sa", headerCell: true })
       ] })
     }
   );
 };
 
 // src/calendar/calendar-view.tsx
-import { jsx as jsx265 } from "react/jsx-runtime";
+import { jsx as jsx263 } from "react/jsx-runtime";
 var className27 = `k-calendar-view`;
-var defaultProps90 = {
+var defaultProps89 = {
   viewsCount: 1,
   orientation: "horizontal",
   calendarView: "month"
 };
 var CalendarView = (props) => {
   const {
-    orientation = defaultProps90.orientation,
-    calendarView = defaultProps90.calendarView,
-    viewsCount = defaultProps90.viewsCount,
+    orientation = defaultProps89.orientation,
+    calendarView = defaultProps89.calendarView,
+    viewsCount = defaultProps89.viewsCount,
     showWeek,
     showOtherMonth,
     showCalendarCaption,
     selectedRange,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx265(
+  return /* @__PURE__ */ jsx263(
     "div",
     {
       ...other,
@@ -11569,7 +11474,7 @@ var CalendarView = (props) => {
         }
       ),
       children: [...Array(viewsCount)].map(
-        (_e, i) => /* @__PURE__ */ jsx265(
+        (_e, i) => /* @__PURE__ */ jsx263(
           CalendarTable,
           {
             calendarView,
@@ -11585,6 +11490,101 @@ var CalendarView = (props) => {
   );
 };
 
+// src/dateinput/dateinput.spec.tsx
+import { jsx as jsx264, jsxs as jsxs103 } from "react/jsx-runtime";
+var DATEINPUT_CLASSNAME = `k-dateinput`;
+var states95 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+var options90 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultProps90 = {
+  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__ */ jsxs103(
+    Input,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, DATEINPUT_CLASSNAME),
+      children: [
+        /* @__PURE__ */ jsx264(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx264(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ jsx264(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showSpinButton && /* @__PURE__ */ jsx264(
+          SpinButton,
+          {
+            className: "k-input-spinner",
+            size,
+            fillMode
+          }
+        )
+      ]
+    }
+  );
+};
+DateInput.states = states95;
+DateInput.options = options90;
+DateInput.className = DATEINPUT_CLASSNAME;
+DateInput.defaultProps = defaultProps90;
+
+// src/dateinput/templates/dateinput-normal.tsx
+import { jsx as jsx265 } from "react/jsx-runtime";
+
 // src/datepicker/datepicker.spec.tsx
 import { Fragment as Fragment70, jsx as jsx266, jsxs as jsxs104 } from "react/jsx-runtime";
 var DATEPICKER_CLASSNAME = `k-datepicker`;