@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170

package/dist/grid/tests/grid-editing-popup.js

@@ -204,7 +204,6 @@
   ActionButtons.options = options;
   ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
   ActionButtons.defaultProps = defaultProps;
-  var action_buttons_spec_default = ActionButtons;
 
   // src/icon/icon.spec.tsx
   var import_jsx_runtime2 = __require("react/jsx-runtime");
@@ -434,10 +433,7 @@
               "k-hidden": minimized
             }
           ), children: props.children }),
-          actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { themeColor: "primary", children: "Update" })
-          ] })
+          actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions", children: actionButtons })
         ]
       })
     );
@@ -1130,401 +1126,816 @@
   Textbox.className = TEXTBOX_CLASSNAME;
   Textbox.defaultProps = defaultProps12;
 
-  // src/upload/upload-dropzone.tsx
+  // src/popup/popup.spec.tsx
   var import_jsx_runtime19 = __require("react/jsx-runtime");
-  var UPLOADDROPZONE_CLASSNAME = `k-upload-dropzone`;
-  var states16 = [
-    States.hover
-  ];
-  var UploadDropzone = (props) => {
-    const _a = props, {
-      hover,
-      status
-    } = _a, other = __objRest(_a, [
-      "hover",
-      "status"
-    ]);
-    let statusMsg = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
-    switch (status) {
-      case "uploading":
-        statusMsg = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "upload" }),
-          "Uploading..."
-        ] });
-        break;
-      case "done":
-        statusMsg = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "check" }),
-          "Done"
-        ] });
-        break;
-      case "failed":
-        statusMsg = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "warning" }),
-          "Done"
-        ] });
-        break;
-      default:
-        statusMsg = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
-        break;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          props.className,
-          UPLOADDROPZONE_CLASSNAME,
-          "k-dropzone",
-          stateClassNames(UPLOADDROPZONE_CLASSNAME, {
-            hover
-          })
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "k-upload-button-wrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { className: "k-upload-button", children: "Select files..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { id: "upload-input", className: "k-hidden" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-            "span",
-            {
-              className: classNames(
-                "k-dropzone-hint",
-                {
-                  "k-hidden": status !== "upload"
-                }
-              ),
-              children: "Drop files here to upload"
-            }
-          ),
-          status !== "upload" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-upload-status", children: statusMsg })
-        ]
-      })
-    );
+  var POPUP_CLASSNAME = `k-popup`;
+  var states16 = [];
+  var options15 = {};
+  var defaultProps13 = {};
+  var Popup = (props) => {
+    const other = __objRest(props, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", __spreadProps(__spreadValues({}, other), { className: classNames(props.className, POPUP_CLASSNAME), children: props.children }));
   };
+  Popup.states = states16;
+  Popup.options = options15;
+  Popup.className = POPUP_CLASSNAME;
+  Popup.defaultProps = defaultProps13;
 
-  // src/upload/upload.spec.tsx
+  // src/dropdownlist/dropdownlist.spec.tsx
   var import_jsx_runtime20 = __require("react/jsx-runtime");
-  var UPLOAD_CLASSNAME = `k-upload`;
+  var DROPDOWNLIST_CLASSNAME = `k-dropdownlist`;
   var states17 = [
     States.hover,
-    States.disabled
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
   ];
-  var options15 = {};
-  var defaultProps13 = {};
-  var Upload = (props) => {
+  var options16 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  };
+  var defaultProps14 = {
+    showValue: true,
+    arrowIconName: "arrow-s",
+    size: Size.medium,
+    rounded: Roundness.medium,
+    fillMode: FillMode.solid
+  };
+  var DropdownList = (props) => {
     const _a = props, {
-      async,
-      empty,
-      actions,
+      valueIconName,
+      arrowIconName = defaultProps14.arrowIconName,
+      prefix,
+      suffix,
+      value,
+      placeholder,
+      size,
+      rounded,
+      fillMode,
       hover,
-      status,
-      disabled
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      showValue = defaultProps14.showValue,
+      popup,
+      opened
     } = _a, other = __objRest(_a, [
-      "async",
-      "empty",
-      "actions",
+      "valueIconName",
+      "arrowIconName",
+      "prefix",
+      "suffix",
+      "value",
+      "placeholder",
+      "size",
+      "rounded",
+      "fillMode",
       "hover",
-      "status",
-      "disabled"
+      "focus",
+      "valid",
+      "invalid",
+      "required",
+      "loading",
+      "disabled",
+      "readonly",
+      "showValue",
+      "popup",
+      "opened"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-      "div",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          props.className,
-          UPLOAD_CLASSNAME,
-          stateClassNames(UPLOAD_CLASSNAME, {
-            disabled
-          }),
-          {
-            "k-upload-async": async,
-            "k-upload-empty": empty
-          }
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UploadDropzone, { status, hover }),
-          props.children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ul", { className: "k-upload-files", children: props.children }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(action_buttons_spec_default, { alignment: "end", orientation: "horizontal", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { className: "k-clear-selected", children: "Clear" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { themeColor: "primary", className: "k-upload-selected", children: "Update" })
-          ] })
-        ]
-      })
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+        Picker,
+        __spreadProps(__spreadValues({}, other), {
+          size,
+          rounded,
+          fillMode,
+          hover,
+          focus,
+          valid,
+          invalid,
+          required,
+          loading,
+          disabled,
+          readonly,
+          className: classNames(
+            props.className,
+            DROPDOWNLIST_CLASSNAME,
+            {
+              "k-icon-picker": !showValue && valueIconName
+            }
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputPrefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              InputInnerSpan,
+              {
+                placeholder,
+                value,
+                showValue,
+                valueIconName
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              InputValidationIcon,
+              {
+                valid,
+                invalid,
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              InputLoadingIcon,
+              {
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(InputSuffix, { children: suffix }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              Button,
+              {
+                className: "k-input-button",
+                icon: arrowIconName,
+                rounded: null,
+                size: props.size,
+                fillMode: props.fillMode
+              }
+            )
+          ]
+        })
+      ),
+      opened && popup && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Popup, { className: "k-dropdownlist-popup", children: popup })
+    ] });
   };
-  Upload.states = states17;
-  Upload.options = options15;
-  Upload.className = UPLOAD_CLASSNAME;
-  Upload.defaultProps = defaultProps13;
+  DropdownList.states = states17;
+  DropdownList.options = options16;
+  DropdownList.className = DROPDOWNLIST_CLASSNAME;
+  DropdownList.defaultProps = defaultProps14;
 
-  // src/progressbar/progressbar.spec.tsx
+  // src/calendar/calendar.spec.tsx
   var import_jsx_runtime21 = __require("react/jsx-runtime");
-  var PROGRESSBAR_CLASSNAME = `k-progressbar`;
-  var states18 = [
-    States.disabled,
-    States.indeterminate
-  ];
-  var options16 = {};
-  var defaultProps14 = {
-    indeterminate: false,
-    label: true,
-    labelPosition: "start",
+  var CALENDAR_CLASSNAME = `k-calendar`;
+  var states18 = [];
+  var options17 = {
+    size: [Size.small, Size.medium, Size.large]
+  };
+  var defaultProps15 = {
+    size: Size.medium,
+    viewsCount: 1,
     orientation: "horizontal",
-    reverse: false,
-    value: "0"
+    calendarView: "month",
+    calendarHeaderText: "October 2021"
   };
-  var ProgressBar = (props) => {
+  var Calendar = (props) => {
     const _a = props, {
-      disabled,
-      height,
-      indeterminate = defaultProps14.indeterminate,
-      label = defaultProps14.label,
-      labelPosition = defaultProps14.labelPosition,
-      orientation = defaultProps14.orientation,
-      reverse = defaultProps14.reverse,
-      value = defaultProps14.value,
-      width
+      size = defaultProps15.size,
+      orientation = defaultProps15.orientation,
+      calendarView = defaultProps15.calendarView,
+      calendarHeaderText = defaultProps15.calendarHeaderText,
+      viewsCount = defaultProps15.viewsCount,
+      showWeek,
+      showOtherMonth,
+      showCalendarCaption,
+      showCalendarFooter,
+      selectedRange
     } = _a, other = __objRest(_a, [
-      "disabled",
-      "height",
-      "indeterminate",
-      "label",
-      "labelPosition",
+      "size",
       "orientation",
-      "reverse",
-      "value",
-      "width"
+      "calendarView",
+      "calendarHeaderText",
+      "viewsCount",
+      "showWeek",
+      "showOtherMonth",
+      "showCalendarCaption",
+      "showCalendarFooter",
+      "selectedRange"
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
           props.className,
-          PROGRESSBAR_CLASSNAME,
-          stateClassNames(PROGRESSBAR_CLASSNAME, {
-            disabled
+          CALENDAR_CLASSNAME,
+          optionClassNames(CALENDAR_CLASSNAME, {
+            size
           }),
           {
-            [`${PROGRESSBAR_CLASSNAME}-${orientation}`]: orientation,
-            [`${PROGRESSBAR_CLASSNAME}-indeterminate`]: indeterminate,
-            [`${PROGRESSBAR_CLASSNAME}-reverse`]: reverse
+            "k-week-number": showWeek
           }
         ),
-        style: orientation === "horizontal" ? { "--kendo-progressbar-value": value, height } : { "--kendo-progressbar-value": value, width },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: classNames(
-            "k-progress-status-wrap",
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            CalendarHeader,
             {
-              [`k-progress-${labelPosition}`]: labelPosition && !indeterminate
+              showToday: showCalendarFooter ? false : true,
+              calendarHeaderText,
+              orientation,
+              size
             }
-          ), children: label && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "k-progress-status", children: [
-            value,
-            "%"
-          ] }) }),
-          !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: classNames(
-            "k-progress-status-wrap",
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            CalendarView,
             {
-              [`k-progress-${labelPosition}`]: labelPosition
+              calendarView,
+              viewsCount,
+              orientation,
+              showWeek,
+              showOtherMonth,
+              showCalendarCaption,
+              selectedRange
             }
-          ), children: label && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "k-progress-status", children: [
-            props.value,
-            "%"
-          ] }) }) })
+          ),
+          showCalendarFooter && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CalendarFooter, {})
         ]
       })
     );
   };
-  ProgressBar.states = states18;
-  ProgressBar.options = options16;
-  ProgressBar.className = PROGRESSBAR_CLASSNAME;
-  ProgressBar.defaultProps = defaultProps14;
+  Calendar.states = states18;
+  Calendar.options = options17;
+  Calendar.className = CALENDAR_CLASSNAME;
+  Calendar.defaultProps = defaultProps15;
 
-  // src/progressbar/chunk-progressbar.spec.tsx
+  // src/calendar/calendar-cell.tsx
   var import_jsx_runtime22 = __require("react/jsx-runtime");
-  var CHUNKPROGRESSBAR_CLASSNAME = `k-chunk-progressbar`;
-  var isSelected = (progress, index) => index <= progress - 1 ? true : false;
   var states19 = [
-    States.indeterminate
+    States.hover,
+    States.focus,
+    States.active,
+    States.selected,
+    States.disabled
   ];
-  var options17 = {};
-  var defaultProps15 = {
-    chunkCount: 5,
+  var CalendarCell = (props) => {
+    const _a = props, {
+      text,
+      headerCell,
+      today,
+      weekend,
+      otherMonth,
+      showOtherMonth,
+      weekCell,
+      rangeStart,
+      rangeMid,
+      rangeEnd,
+      hover,
+      focus,
+      active,
+      selected,
+      disabled
+    } = _a, other = __objRest(_a, [
+      "text",
+      "headerCell",
+      "today",
+      "weekend",
+      "otherMonth",
+      "showOtherMonth",
+      "weekCell",
+      "rangeStart",
+      "rangeMid",
+      "rangeEnd",
+      "hover",
+      "focus",
+      "active",
+      "selected",
+      "disabled"
+    ]);
+    const cellType = headerCell ? "th" : "td";
+    const CALENDARCELL_CLASSNAME = `k-calendar-${cellType}`;
+    const calendarCellClasses = [
+      props.className,
+      CALENDARCELL_CLASSNAME,
+      stateClassNames(CALENDARCELL_CLASSNAME, {
+        hover,
+        focus,
+        active,
+        selected,
+        disabled
+      }),
+      {
+        "k-today": today,
+        "k-weekend": weekend,
+        "k-other-month": otherMonth,
+        "k-alt": weekCell,
+        "k-range-start": rangeStart,
+        "k-range-mid": rangeMid,
+        "k-range-end": rangeEnd
+      }
+    ];
+    if (headerCell) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: text }));
+    }
+    if (weekCell) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: text }));
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", __spreadProps(__spreadValues({}, other), { className: classNames(calendarCellClasses), children: otherMonth && !showOtherMonth ? "" : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-link", children: text }) }));
+  };
+
+  // src/calendar/calendar-header.tsx
+  var import_jsx_runtime23 = __require("react/jsx-runtime");
+  var className9 = `k-calendar-header`;
+  var options18 = {
+    size: [Size.small, Size.medium, Size.large]
+  };
+  var defaultProps16 = {
+    calendarHeaderText: "October 2021",
+    showToday: true,
     orientation: "horizontal",
-    progress: 0
+    size: Size.medium
   };
-  var ChunkProgressBar = (props) => {
+  var CalendarHeader = (props) => {
     const _a = props, {
-      chunkCount = defaultProps15.chunkCount,
-      indeterminate,
-      orientation = defaultProps15.orientation,
-      progress = defaultProps15.progress,
-      reverse
+      calendarHeaderText = defaultProps16.calendarHeaderText,
+      showToday = defaultProps16.showToday,
+      orientation = defaultProps16.orientation,
+      size = defaultProps16.size
     } = _a, other = __objRest(_a, [
-      "chunkCount",
-      "indeterminate",
+      "calendarHeaderText",
+      "showToday",
       "orientation",
-      "progress",
-      "reverse"
+      "size"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
           props.className,
-          PROGRESSBAR_CLASSNAME,
-          CHUNKPROGRESSBAR_CLASSNAME,
+          className9,
           {
-            [`${PROGRESSBAR_CLASSNAME}-${orientation}`]: orientation,
-            [`${PROGRESSBAR_CLASSNAME}-indeterminate`]: indeterminate,
-            [`${PROGRESSBAR_CLASSNAME}-reverse`]: reverse
+            "k-vstack": orientation === "vertical"
           }
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
-          (_el, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { className: classNames(
-            "k-progressbar-chunk",
-            {
-              "k-first": i === 0,
-              "k-last": i === [...Array(chunkCount)].length - 1,
-              "k-selected": isSelected(progress, i)
-            }
-          ) }, i)
-        ) })
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { className: "k-calendar-title", text: calendarHeaderText, size, fillMode: "flat" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "k-spacer" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "k-calendar-nav", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { className: "k-calendar-nav-prev", icon: "arrow-chevron-left", size, fillMode: "flat" }),
+            showToday && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { size, fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Today" }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { className: "k-calendar-nav-next", icon: "arrow-chevron-right", size, fillMode: "flat" })
+          ] })
+        ]
       })
     );
   };
-  ChunkProgressBar.states = states19;
-  ChunkProgressBar.options = options17;
-  ChunkProgressBar.className = CHUNKPROGRESSBAR_CLASSNAME;
-  ChunkProgressBar.defaultProps = defaultProps15;
 
-  // src/upload/upload-file-info.tsx
-  var import_jsx_runtime23 = __require("react/jsx-runtime");
-  var UPLOADFILEINFO_CLASSNAME = `k-file-info`;
-  var UploadFileInfo = (props) => {
+  // src/calendar/calendar-footer.tsx
+  var import_jsx_runtime24 = __require("react/jsx-runtime");
+  var className10 = `k-calendar-footer`;
+  var CalendarFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", __spreadProps(__spreadValues({}, props), { className: classNames(props.className, className10), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { fillMode: "flat", themeColor: "primary", className: "k-calendar-nav-today", children: "Monday, October 29, 2021" }) }));
+
+  // src/calendar/calendar-table.tsx
+  var import_jsx_runtime25 = __require("react/jsx-runtime");
+  var CALENDARTABLE_CLASSNAME = `k-calendar-table`;
+  var CalendarTable = (props) => {
     const _a = props, {
-      name,
-      size,
-      validationMsg
+      calendarView,
+      showOtherMonth,
+      showWeek,
+      showCalendarCaption,
+      selectedRange
     } = _a, other = __objRest(_a, [
-      "name",
-      "size",
-      "validationMsg"
+      "calendarView",
+      "showOtherMonth",
+      "showWeek",
+      "showCalendarCaption",
+      "selectedRange"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      "div",
+    if (calendarView === "year") {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "table",
+        __spreadProps(__spreadValues({}, other), {
+          className: classNames(
+            props.className,
+            CALENDARTABLE_CLASSNAME
+          ),
+          children: [
+            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("caption", { className: "k-calendar-caption", children: "2022" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Jan" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Feb" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Mar" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Apr" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "May" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Jun", hover: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Jul", focus: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Au", selected: true })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Sep" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Oct", today: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Nov" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "Dec" })
+              ] })
+            ] })
+          ]
+        })
+      );
+    }
+    if (calendarView === "decade") {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "table",
+        __spreadProps(__spreadValues({}, other), {
+          className: classNames(
+            props.className,
+            CALENDARTABLE_CLASSNAME
+          ),
+          children: [
+            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("caption", { className: "k-calendar-caption", children: "2020 - 2029" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { className: "k-out-of-range" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2020" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2021", today: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2022" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2023" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2024", hover: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2025", focus: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2026", selected: true })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2027" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2028" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2029" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { className: "k-out-of-range" })
+              ] })
+            ] })
+          ]
+        })
+      );
+    }
+    if (calendarView === "century") {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "table",
+        __spreadProps(__spreadValues({}, other), {
+          className: classNames(
+            props.className,
+            CALENDARTABLE_CLASSNAME
+          ),
+          children: [
+            showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("caption", { className: "k-calendar-caption", children: "2000 - 2099" }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "1990 - 1999" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2000 - 2009" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2010 - 2019", today: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2020 - 2029" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2030 - 2039" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2040 - 2049", hover: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2050 - 2059", focus: true }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2060 - 2069", selected: true })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2070 - 2079" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2080 - 2089" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2090 - 2099" }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { className: "k-out-of-range" })
+              ] })
+            ] })
+          ]
+        })
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "table",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
           props.className,
-          UPLOADFILEINFO_CLASSNAME
+          CALENDARTABLE_CLASSNAME
         ),
         children: [
-          name && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "k-file-name", children: name }),
-          size && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "k-file-size", children: size }),
-          validationMsg && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "k-file-validation-message", children: validationMsg })
+          showCalendarCaption && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("caption", { className: "k-calendar-caption", children: "October 2021" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarTableHead, { showWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tbody", { className: "k-calendar-tbody", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "39", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "30", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "5" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "6", weekend: true })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "40", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "7", weekend: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "8", hover: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "9", focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "10", selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "11", hover: true, focus: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "12", hover: true, selected: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "13", weekend: true })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "41", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "14", weekend: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "15" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "16", today: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "17" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "18" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "19" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "20", weekend: true })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "42", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "21", weekend: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "22" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "23" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "24" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "25", rangeStart: selectedRange, selected: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "26", rangeMid: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "27", weekend: true, rangeMid: selectedRange })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "43", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "28", weekend: true, rangeMid: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "29", rangeEnd: selectedRange, focus: selectedRange, selected: selectedRange }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "30" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "31" }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "1", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "2", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "3", otherMonth: true, weekend: true, showOtherMonth })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("tr", { className: "k-calendar-tr", children: [
+              showWeek && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "44", weekCell: true }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "4", otherMonth: true, weekend: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "5", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "6", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "7", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "8", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "9", otherMonth: true, showOtherMonth }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CalendarCell, { text: "10", otherMonth: true, weekend: true, showOtherMonth })
+            ] })
+          ] })
         ]
       })
     );
   };
 
-  // src/upload/upload-file.tsx
-  var import_jsx_runtime24 = __require("react/jsx-runtime");
-  var UPLOADFILE_CLASSNAME = `k-file`;
-  var UploadFile = (props) => {
+  // src/calendar/calendar-table-head.tsx
+  var import_jsx_runtime26 = __require("react/jsx-runtime");
+  var className11 = `k-calendar-thead`;
+  var CalendarTableHead = (props) => {
     const _a = props, {
-      status,
-      progress,
-      name,
-      icon,
-      size,
-      state,
-      validationMsg
+      showWeek
     } = _a, other = __objRest(_a, [
-      "status",
-      "progress",
-      "name",
-      "icon",
-      "size",
-      "state",
-      "validationMsg"
+      "showWeek"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-      "li",
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "thead",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(props.className, className11),
+        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("tr", { className: "k-calendar-tr", children: [
+          showWeek && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { weekCell: true, headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { text: "Su", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { text: "Mo", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { text: "Tu", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { text: "We", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { text: "Th", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { text: "Fr", headerCell: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CalendarCell, { text: "Sa", headerCell: true })
+        ] })
+      })
+    );
+  };
+
+  // src/calendar/calendar-view.tsx
+  var import_jsx_runtime27 = __require("react/jsx-runtime");
+  var className12 = `k-calendar-view`;
+  var defaultProps17 = {
+    viewsCount: 1,
+    orientation: "horizontal",
+    calendarView: "month"
+  };
+  var CalendarView = (props) => {
+    const _a = props, {
+      orientation = defaultProps17.orientation,
+      calendarView = defaultProps17.calendarView,
+      viewsCount = defaultProps17.viewsCount,
+      showWeek,
+      showOtherMonth,
+      showCalendarCaption,
+      selectedRange
+    } = _a, other = __objRest(_a, [
+      "orientation",
+      "calendarView",
+      "viewsCount",
+      "showWeek",
+      "showOtherMonth",
+      "showCalendarCaption",
+      "selectedRange"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
           props.className,
-          UPLOADFILE_CLASSNAME,
+          className12,
+          `k-calendar-${calendarView}view`,
+          "k-align-items-start",
+          "k-justify-content-center",
           {
-            [`k-file-${status}`]: status
+            "k-hstack": orientation === "horizontal",
+            "k-vstack": orientation === "vertical"
           }
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-file-single", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProgressBar, { className: classNames(
+        children: [...Array(viewsCount)].map(
+          (_e, i) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            CalendarTable,
             {
-              "k-hidden": status !== "progress"
-            }
-          ), value: progress, label: false }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "k-file-icon-wrapper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: "k-file-icon", name: icon }),
-            state && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-file-state", children: state })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(UploadFileInfo, { name, size, validationMsg }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-upload-actions", children: status === "progress" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "k-upload-pct", children: [
-              progress,
-              "%"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "pause-sm", fillMode: "flat", className: "k-upload-action" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "cancel", fillMode: "flat", className: "k-upload-action" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { icon: "close", fillMode: "flat", className: "k-upload-action" }) })
-        ] })
+              calendarView,
+              showWeek,
+              showOtherMonth,
+              showCalendarCaption,
+              selectedRange
+            },
+            i
+          )
+        )
       })
     );
   };
 
-  // src/upload/upload-file-multiple.tsx
-  var import_jsx_runtime25 = __require("react/jsx-runtime");
+  // src/datepicker/datepicker.spec.tsx
+  var import_jsx_runtime28 = __require("react/jsx-runtime");
+  var DATEPICKER_CLASSNAME = `k-datepicker`;
+  var states20 = [
+    States.hover,
+    States.focus,
+    States.valid,
+    States.invalid,
+    States.required,
+    States.disabled,
+    States.loading,
+    States.readonly
+  ];
+  var options19 = {
+    size: [Size.small, Size.medium, Size.large],
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+  };
+  var defaultProps18 = {
+    size: Input.defaultProps.size,
+    rounded: Input.defaultProps.rounded,
+    fillMode: Input.defaultProps.fillMode
+  };
+  var DatePicker = (props) => {
+    const _a = props, {
+      prefix,
+      suffix,
+      value,
+      placeholder,
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      readonly,
+      opened
+    } = _a, other = __objRest(_a, [
+      "prefix",
+      "suffix",
+      "value",
+      "placeholder",
+      "size",
+      "rounded",
+      "fillMode",
+      "hover",
+      "focus",
+      "valid",
+      "invalid",
+      "required",
+      "loading",
+      "disabled",
+      "readonly",
+      "opened"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+        Input,
+        __spreadProps(__spreadValues({}, other), {
+          size,
+          rounded,
+          fillMode,
+          hover,
+          focus,
+          valid,
+          invalid,
+          required,
+          loading,
+          disabled,
+          readonly,
+          className: classNames(props.className, DATEPICKER_CLASSNAME),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InputPrefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InputInnerInput, { placeholder, value }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              InputValidationIcon,
+              {
+                valid,
+                invalid,
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              InputLoadingIcon,
+              {
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              InputClearValue,
+              {
+                loading,
+                disabled,
+                readonly,
+                value
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InputSuffix, { children: suffix }),
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+              Button,
+              {
+                className: "k-input-button",
+                icon: "calendar",
+                rounded: null,
+                size,
+                fillMode
+              }
+            )
+          ]
+        })
+      ),
+      opened && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Popup, { className: "k-datepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Calendar, {}) })
+    ] });
+  };
+  DatePicker.states = states20;
+  DatePicker.options = options19;
+  DatePicker.className = DATEPICKER_CLASSNAME;
+  DatePicker.defaultProps = defaultProps18;
 
   // src/form/fieldset.tsx
-  var import_jsx_runtime26 = __require("react/jsx-runtime");
+  var import_jsx_runtime29 = __require("react/jsx-runtime");
   var FIELDSET_CLASSNAME = "k-form-fieldset";
   var Fieldset = (props) => {
     const {
       legend
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-      legend && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("legend", { className: "k-form-legend", children: legend }),
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
+      legend && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("legend", { className: "k-form-legend", children: legend }),
       props.children
     ] });
   };
   Fieldset.className = FIELDSET_CLASSNAME;
 
   // src/form/form.spec.tsx
-  var import_jsx_runtime27 = __require("react/jsx-runtime");
+  var import_jsx_runtime30 = __require("react/jsx-runtime");
   var FORM_CLASSNAME = "k-form";
-  var states20 = [];
-  var options18 = {
+  var states21 = [];
+  var options20 = {
     size: [Size.small, Size.medium, Size.large]
   };
-  var defaultProps16 = {
+  var defaultProps19 = {
     size: Size.medium,
     layout: "basic",
     tag: "form"
   };
   var Form = (props) => {
     const {
-      size = defaultProps16.size,
+      size = defaultProps19.size,
       orientation,
-      layout = defaultProps16.layout,
+      layout = defaultProps19.layout,
       formButtons,
       legend,
       cols,
       gapX,
       gapY,
-      tag = defaultProps16.tag
+      tag = defaultProps19.tag
     } = props;
     const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
-    const Parent = ({ tag: tag2, className: className9, children }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("form", { className: className9, children }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: className9, children });
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Parent, { tag, className: classNames(
+    const Parent = ({ tag: tag2, className: className13, children }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("form", { className: className13, children }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: className13, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Parent, { tag, className: classNames(
       props.className,
       FORM_CLASSNAME,
       optionClassNames(FORM_CLASSNAME, {
@@ -1534,11 +1945,11 @@
         [`${FORM_CLASSNAME}-${orientation}`]: orientation
       }
     ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         ConditionalWrapper,
         {
           condition: layout === "grid",
-          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Fieldset, { legend, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: classNames(
+          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Fieldset, { legend, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: classNames(
             "k-form-layout",
             "k-d-grid",
             {
@@ -1550,18 +1961,18 @@
           children: props.children
         }
       ),
-      formButtons && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "k-form-buttons", children: formButtons })
+      formButtons && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "k-form-buttons", children: formButtons })
     ] });
   };
-  Form.states = states20;
-  Form.options = options18;
+  Form.states = states21;
+  Form.options = options20;
   Form.className = FORM_CLASSNAME;
-  Form.defaultProps = defaultProps16;
+  Form.defaultProps = defaultProps19;
 
   // src/form/form-field.tsx
-  var import_jsx_runtime28 = __require("react/jsx-runtime");
+  var import_jsx_runtime31 = __require("react/jsx-runtime");
   var FORMFIELD_CLASSNAME = "k-form-field";
-  var states21 = [
+  var states22 = [
     States.disabled
   ];
   var FormField = (props) => {
@@ -1575,7 +1986,7 @@
       disabled,
       dir
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "div",
       {
         className: classNames(
@@ -1585,7 +1996,7 @@
         ),
         dir,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: classNames(
+          label && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { className: classNames(
             "k-label",
             "k-form-label",
             {
@@ -1593,13 +2004,13 @@
             }
           ), children: [
             label,
-            optional && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
-            info && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "k-field-info", children: "(field info)" })
+            optional && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
+            info && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "k-field-info", children: "(field info)" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "k-form-field-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "k-form-field-wrap", children: [
             editor,
-            hint && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-form-hint", children: hint }),
-            error && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "k-form-error", children: error })
+            hint && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-form-hint", children: hint }),
+            error && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "k-form-error", children: error })
           ] })
         ]
       }
@@ -1608,7 +2019,7 @@
   FormField.className = FORMFIELD_CLASSNAME;
 
   // src/grid/tests/grid-editing-popup.tsx
-  var import_jsx_runtime29 = __require("react/jsx-runtime");
+  var import_jsx_runtime32 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
@@ -1617,50 +2028,25 @@
         width: 500px;
     }
     .k-window {
-        width: 100%;
+        min-width: 400px;
         position: relative;
     }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("style", { children: styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Window, { title: "Edit", actions: ["close"], actionButtons: true, actionButtonsAlign: "end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Form, { tag: "div", orientation: "horizontal", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FormField, { label: "Product Name", editor: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Textbox, { value: "Chai" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          FormField,
-          {
-            label: "Unit Price",
-            editor: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(NumericTextbox, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { className: "k-tooltip-icon", name: "warning" }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "k-tooltip-content", children: "Unit Price is required" }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "k-callout k-callout-n" })
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FormField, { label: "Units In Stock", editor: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(NumericTextbox, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FormField, { label: "Discontinued", editor: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Checkbox, { id: "Discontinued" }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("label", { className: "k-checkbox-label", children: "\u200B" })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("style", { children: styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Window, { title: "Edit task", actions: ["minimize", "maximize", "close"], actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { themeColor: "primary", icon: "save", children: "Save" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { icon: "cancel", children: "Cancel" })
+      ] }), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Form, { tag: "div", orientation: "vertical", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FormField, { className: "k-form-field-error", label: "Text data field label", error: "Error", editor: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Textbox, { value: "Invalid", invalid: true, showClearButton: true }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FormField, { label: "Date data field label", editor: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DatePicker, { placeholder: "dd/MM/yyyy" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FormField, { label: "Numeric data field label", editor: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NumericTextbox, { placeholder: "##,###" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FormField, { label: " ", editor: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Checkbox, { checked: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { className: "k-checkbox-label", children: "Boolean data field label" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-          FormField,
-          {
-            label: "Files",
-            editor: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Upload, { async: true, status: "done", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              UploadFile,
-              {
-                progress: "100",
-                status: "success",
-                name: "67409197_2322469807839836_4126207508270284800_n.png",
-                icon: "file-image",
-                size: "24.34 KB"
-              }
-            ) })
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FormField, { label: "Boolean data field label", editor: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DropdownList, { value: "True" }) })
       ] }) }) }) })
     ] })
   );