@progress/kendo-themes-html 7.3.0-dev.1 → 8.0.0-dev.0

package/dist/cjs/spreadsheet/tests/spreadsheet-sheets-bar.js

@@ -10171,10 +10171,139 @@ var import_jsx_runtime219 = require("react/jsx-runtime");
 // src/calendar/templates/calendar-infinite-week-number.tsx
 var import_jsx_runtime220 = require("react/jsx-runtime");
 
-// src/dateinput/dateinput.spec.tsx
+// src/multiviewcalendar/multiviewcalendar.spec.tsx
 var import_jsx_runtime221 = require("react/jsx-runtime");
+var MULTIVIEWCALENDAR_CLASSNAME = `k-calendar-range`;
+var states76 = [];
+var options74 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps75 = {
+  size: Size.medium,
+  calendarHeaderText: "October 2021 - November 2021",
+  viewsCount: 2,
+  orientation: "horizontal",
+  calendarView: "month"
+};
+var MultiViewCalendar = (props) => {
+  const {
+    size = defaultProps75.size,
+    orientation = defaultProps75.orientation,
+    calendarView = defaultProps75.calendarView,
+    calendarHeaderText = defaultProps75.calendarHeaderText,
+    viewsCount = defaultProps75.viewsCount,
+    showCalendarFooter,
+    showWeek,
+    dir,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+    Calendar,
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        MULTIVIEWCALENDAR_CLASSNAME
+      ),
+      size,
+      calendarHeaderText,
+      calendarView,
+      viewsCount,
+      orientation,
+      showCalendarFooter,
+      showWeek,
+      dir
+    }
+  );
+};
+MultiViewCalendar.states = states76;
+MultiViewCalendar.options = options74;
+MultiViewCalendar.className = MULTIVIEWCALENDAR_CLASSNAME;
+MultiViewCalendar.defaultProps = defaultProps75;
+
+// src/multiviewcalendar/templates/multiviewcalendar-century.tsx
+var import_jsx_runtime222 = require("react/jsx-runtime");
+
+// src/multiviewcalendar/templates/multiviewcalendar-decade.tsx
+var import_jsx_runtime223 = require("react/jsx-runtime");
+
+// src/multiviewcalendar/templates/multiviewcalendar-normal.tsx
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var MultiViewCalendarNormal = ({ showOtherMonth, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  MultiViewCalendar,
+  {
+    calendarView: "month",
+    showTableHead: true,
+    children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(import_jsx_runtime224.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(CalendarTableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "30", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "6", weekend: true })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(CalendarTableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "7", weekend: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "11" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "13", weekend: true })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(CalendarTableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "14", weekend: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "15" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "16", today: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "17" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "19" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "20", weekend: true })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(CalendarTableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "21", weekend: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "22" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "23" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "24" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "26" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "27", weekend: true })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(CalendarTableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "28", weekend: true }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "29" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "30" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "31" }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "1", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "2", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "3", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(CalendarTableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "4", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "5", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "6", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "7", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "8", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "9", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(CalendarCell, { text: "10", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
+      ] })
+    ] }),
+    ...props
+  }
+);
+
+// src/multiviewcalendar/templates/multiviewcalendar-with-weeks.tsx
+var import_jsx_runtime225 = require("react/jsx-runtime");
+
+// src/multiviewcalendar/templates/multiviewcalendar-year.tsx
+var import_jsx_runtime226 = require("react/jsx-runtime");
+
+// src/dateinput/dateinput.spec.tsx
+var import_jsx_runtime227 = require("react/jsx-runtime");
 var DATEINPUT_CLASSNAME = `k-dateinput`;
-var states76 = [
+var states77 = [
   States.hover,
   States.focus,
   States.valid,
@@ -10184,12 +10313,12 @@ var states76 = [
   States.loading,
   States.readonly
 ];
-var options74 = {
+var options75 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps75 = {
+var defaultProps76 = {
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
@@ -10212,7 +10341,7 @@ var DateInput = (props) => {
     showSpinButton,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
     Input,
     {
       ...other,
@@ -10229,8 +10358,8 @@ var DateInput = (props) => {
       readonly,
       className: classNames(props.className, DATEINPUT_CLASSNAME),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
           InputValidationIcon,
           {
             valid,
@@ -10239,14 +10368,14 @@ var DateInput = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
           InputLoadingIcon,
           {
             loading,
             disabled
           }
         ),
-        showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+        showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
           SpinButton,
           {
             className: "k-input-spinner",
@@ -10258,18 +10387,18 @@ var DateInput = (props) => {
     }
   );
 };
-DateInput.states = states76;
-DateInput.options = options74;
+DateInput.states = states77;
+DateInput.options = options75;
 DateInput.className = DATEINPUT_CLASSNAME;
-DateInput.defaultProps = defaultProps75;
+DateInput.defaultProps = defaultProps76;
 
 // src/dateinput/templates/dateinput-normal.tsx
-var import_jsx_runtime222 = require("react/jsx-runtime");
+var import_jsx_runtime228 = require("react/jsx-runtime");
 
 // src/datepicker/datepicker.spec.tsx
-var import_jsx_runtime223 = require("react/jsx-runtime");
+var import_jsx_runtime229 = require("react/jsx-runtime");
 var DATEPICKER_CLASSNAME = `k-datepicker`;
-var states77 = [
+var states78 = [
   States.hover,
   States.focus,
   States.valid,
@@ -10279,12 +10408,12 @@ var states77 = [
   States.loading,
   States.readonly
 ];
-var options75 = {
+var options76 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps76 = {
+var defaultProps77 = {
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
@@ -10312,8 +10441,8 @@ var DatePicker = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(import_jsx_runtime223.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(import_jsx_runtime229.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
       Input,
       {
         ...other,
@@ -10331,9 +10460,9 @@ var DatePicker = (props) => {
         readonly,
         className: classNames(props.className, DATEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -10342,14 +10471,14 @@ var DatePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
             InputClearValue,
             {
               loading,
@@ -10358,8 +10487,8 @@ var DatePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -10372,9 +10501,9 @@ var DatePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Popup, { className: "k-calendar-container k-datepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(CalendarNormal, { dir }) }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+    opened && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Popup, { className: "k-calendar-container k-datepicker-popup", children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(CalendarNormal, { dir }) }),
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -10382,37 +10511,37 @@ var DatePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(CalendarNormal, { size: "large" })
+      /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(CalendarNormal, { size: "large" })
     ] })
   ] });
 };
-DatePicker.states = states77;
-DatePicker.options = options75;
+DatePicker.states = states78;
+DatePicker.options = options76;
 DatePicker.className = DATEPICKER_CLASSNAME;
-DatePicker.defaultProps = defaultProps76;
+DatePicker.defaultProps = defaultProps77;
 
 // src/datepicker/templates/datepicker-normal.tsx
-var import_jsx_runtime224 = require("react/jsx-runtime");
+var import_jsx_runtime230 = require("react/jsx-runtime");
 
 // src/datepicker/templates/datepicker-popup.tsx
-var import_jsx_runtime225 = require("react/jsx-runtime");
+var import_jsx_runtime231 = require("react/jsx-runtime");
 
 // src/datepicker/templates/datepicker-adaptive.tsx
-var import_jsx_runtime226 = require("react/jsx-runtime");
+var import_jsx_runtime232 = require("react/jsx-runtime");
 
 // src/time-selector/time-selector.spec.tsx
-var import_jsx_runtime227 = require("react/jsx-runtime");
+var import_jsx_runtime233 = require("react/jsx-runtime");
 var TIMESELECTOR_CLASSNAME = `k-timeselector`;
-var states78 = [];
-var options76 = {
+var states79 = [];
+var options77 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps77 = {
+var defaultProps78 = {
   size: Size.medium
 };
 var TimeSelector = (props) => {
   const {
-    size = defaultProps77.size,
+    size = defaultProps78.size,
     header,
     fastSelection,
     columns,
@@ -10428,9 +10557,9 @@ var TimeSelector = (props) => {
     if (index === 0 || columnType === "tt") {
       separator = false;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(import_jsx_runtime227.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(TimeSelectorColumn, { type: columnType, focus, separator }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(import_jsx_runtime233.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(TimeSelectorColumn, { type: columnType, focus, separator }) });
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
     "div",
     {
       ...other,
@@ -10442,24 +10571,24 @@ var TimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(import_jsx_runtime227.Fragment, { children: header }),
-        /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(import_jsx_runtime227.Fragment, { children: fastSelection }),
-        /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { className: "k-time-list-container", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("span", { className: "k-time-highlight" }),
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(import_jsx_runtime233.Fragment, { children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(import_jsx_runtime233.Fragment, { children: fastSelection }),
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)("div", { className: "k-time-list-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime233.jsx)("span", { className: "k-time-highlight" }),
           columnsDom
         ] })
       ]
     }
   );
 };
-TimeSelector.states = states78;
-TimeSelector.options = options76;
+TimeSelector.states = states79;
+TimeSelector.options = options77;
 TimeSelector.className = TIMESELECTOR_CLASSNAME;
-TimeSelector.defaultProps = defaultProps77;
+TimeSelector.defaultProps = defaultProps78;
 
 // src/time-selector/time-selector-column.tsx
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var states79 = [
+var import_jsx_runtime234 = require("react/jsx-runtime");
+var states80 = [
   States.focus
 ];
 var TimeSelectorColumn = (props) => {
@@ -10497,11 +10626,11 @@ var TimeSelectorColumn = (props) => {
       break;
   }
   const items = columnData.map(
-    (data2) => /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_jsx_runtime228.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("span", { children: data2 }) }) })
+    (data2) => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_jsx_runtime234.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("li", { className: "k-item", children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("span", { children: data2 }) }) })
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(import_jsx_runtime228.Fragment, { children: [
-    separator && /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { className: "k-time-separator", children: ":" }),
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
+    separator && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { className: "k-time-separator", children: ":" }),
+    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
       "div",
       {
         ...other,
@@ -10513,10 +10642,10 @@ var TimeSelectorColumn = (props) => {
           })
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("span", { className: "k-title", children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { className: "k-time-list", children: /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)("div", { className: "k-content k-scrollable k-time-container", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
-            /* @__PURE__ */ (0, import_jsx_runtime228.jsx)("div", { className: "k-scrollable-placeholder" })
+          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("span", { className: "k-title", children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { className: "k-time-list", children: /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)("div", { className: "k-content k-scrollable k-time-container", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
+            /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", { className: "k-scrollable-placeholder" })
           ] }) })
         ]
       }
@@ -10525,14 +10654,14 @@ var TimeSelectorColumn = (props) => {
 };
 
 // src/time-selector/time-selector-header.tsx
-var import_jsx_runtime229 = require("react/jsx-runtime");
+var import_jsx_runtime235 = require("react/jsx-runtime");
 var className20 = `k-time-header`;
 var TimeSelectorHeader = (props) => {
   const {
     title,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
     "div",
     {
       ...other,
@@ -10541,7 +10670,7 @@ var TimeSelectorHeader = (props) => {
         className20
       ),
       children: [
-        title != null && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("span", { className: "k-title", children: title }),
+        title != null && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)("span", { className: "k-title", children: title }),
         props.children
       ]
     }
@@ -10549,13 +10678,13 @@ var TimeSelectorHeader = (props) => {
 };
 
 // src/time-selector/time-selector-fast-selection.tsx
-var import_jsx_runtime230 = require("react/jsx-runtime");
+var import_jsx_runtime236 = require("react/jsx-runtime");
 var className21 = `k-time-fast-selection`;
 var TimeSelectorFastSelection = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
     ActionButtons,
     {
       ...other,
@@ -10565,27 +10694,27 @@ var TimeSelectorFastSelection = (props) => {
         className21
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Button, { children: "1 d" }),
-        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Button, { children: "1 h" }),
-        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Button, { children: "15 m" })
+        /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Button, { children: "1 d" }),
+        /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Button, { children: "1 h" }),
+        /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Button, { children: "15 m" })
       ]
     }
   );
 };
 
 // src/time-selector/templates/time-selector-all.tsx
-var import_jsx_runtime231 = require("react/jsx-runtime");
+var import_jsx_runtime237 = require("react/jsx-runtime");
 
 // src/time-selector/templates/time-selector-hour.tsx
-var import_jsx_runtime232 = require("react/jsx-runtime");
+var import_jsx_runtime238 = require("react/jsx-runtime");
 
 // src/time-selector/templates/time-selector-minute.tsx
-var import_jsx_runtime233 = require("react/jsx-runtime");
+var import_jsx_runtime239 = require("react/jsx-runtime");
 
 // src/timepicker/timepicker.spec.tsx
-var import_jsx_runtime234 = require("react/jsx-runtime");
+var import_jsx_runtime240 = require("react/jsx-runtime");
 var TIMEPICKER_CLASSNAME = `k-timepicker`;
-var states80 = [
+var states81 = [
   States.hover,
   States.focus,
   States.valid,
@@ -10595,12 +10724,12 @@ var states80 = [
   States.loading,
   States.readonly
 ];
-var options77 = {
+var options78 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps78 = {
+var defaultProps79 = {
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
@@ -10627,8 +10756,8 @@ var TimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(import_jsx_runtime240.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(
       Input,
       {
         ...other,
@@ -10645,9 +10774,9 @@ var TimePicker = (props) => {
         readonly,
         className: classNames(props.className, TIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -10656,14 +10785,14 @@ var TimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
             InputClearValue,
             {
               loading,
@@ -10672,8 +10801,8 @@ var TimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -10686,15 +10815,15 @@ var TimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(Popup, { className: "k-list-container k-timepicker-popup", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
-        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { className: "k-time-cancel", children: "Cancel" })
+    opened && /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(Popup, { className: "k-list-container k-timepicker-popup", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
+        /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Button, { className: "k-time-cancel", children: "Cancel" })
       ] })
     ] }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -10702,46 +10831,46 @@ var TimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
+      /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
     ] })
   ] });
 };
-TimePicker.states = states80;
-TimePicker.options = options77;
+TimePicker.states = states81;
+TimePicker.options = options78;
 TimePicker.className = TIMEPICKER_CLASSNAME;
-TimePicker.defaultProps = defaultProps78;
+TimePicker.defaultProps = defaultProps79;
 
 // src/timepicker/templates/timepicker-normal.tsx
-var import_jsx_runtime235 = require("react/jsx-runtime");
+var import_jsx_runtime241 = require("react/jsx-runtime");
 
 // src/timepicker/templates/timepicker-popup.tsx
-var import_jsx_runtime236 = require("react/jsx-runtime");
+var import_jsx_runtime242 = require("react/jsx-runtime");
 
 // src/timepicker/templates/timepicker-adaptive.tsx
-var import_jsx_runtime237 = require("react/jsx-runtime");
+var import_jsx_runtime243 = require("react/jsx-runtime");
 
 // src/datetime-selector/datetime-selector.spec.tsx
-var import_jsx_runtime238 = require("react/jsx-runtime");
+var import_jsx_runtime244 = require("react/jsx-runtime");
 var DATETIMESELECTOR_CLASSNAME = `k-datetime-wrap`;
-var states81 = [];
-var options78 = {
+var states82 = [];
+var options79 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps79 = {
+var defaultProps80 = {
   tab: "date",
   size: Size.medium,
   actionButtons: true
 };
 var DateTimeSelector = (props) => {
   const {
-    size = defaultProps79.size,
-    tab = defaultProps79.tab,
-    actionButtons = defaultProps79.actionButtons,
+    size = defaultProps80.size,
+    tab = defaultProps80.tab,
+    actionButtons = defaultProps80.actionButtons,
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
     "div",
     {
       ...other,
@@ -10757,34 +10886,34 @@ var DateTimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(ButtonGroup, { stretched: true, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
+        /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(ButtonGroup, { stretched: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_jsx_runtime238.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "k-datetime-calendar-wrap" }),
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_jsx_runtime238.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(CalendarNormal, { size, showOtherMonth: true, dir }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { className: "k-datetime-time-wrap" })
+        /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_jsx_runtime244.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("div", { className: "k-datetime-calendar-wrap" }),
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_jsx_runtime244.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(CalendarNormal, { size, showOtherMonth: true, dir }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)("div", { className: "k-datetime-time-wrap" })
         ] }) }),
-        actionButtons && /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Button, { size, className: "k-time-cancel", children: "Cancel" })
+        actionButtons && /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(Button, { size, className: "k-time-cancel", children: "Cancel" })
         ] })
       ]
     }
   );
 };
-DateTimeSelector.states = states81;
-DateTimeSelector.options = options78;
+DateTimeSelector.states = states82;
+DateTimeSelector.options = options79;
 DateTimeSelector.className = DATETIMESELECTOR_CLASSNAME;
-DateTimeSelector.defaultProps = defaultProps79;
+DateTimeSelector.defaultProps = defaultProps80;
 
 // src/datetimepicker/datetimepicker.spec.tsx
-var import_jsx_runtime239 = require("react/jsx-runtime");
+var import_jsx_runtime245 = require("react/jsx-runtime");
 var DATETIMEPICKER_CLASSNAME = `k-datetimepicker`;
-var states82 = [
+var states83 = [
   States.hover,
   States.focus,
   States.valid,
@@ -10794,12 +10923,12 @@ var states82 = [
   States.loading,
   States.readonly
 ];
-var options79 = {
+var options80 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps80 = {
+var defaultProps81 = {
   tab: "date",
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
@@ -10823,14 +10952,14 @@ var DateTimePicker = (props) => {
     disabled,
     readonly,
     opened,
-    tab = defaultProps80.tab,
+    tab = defaultProps81.tab,
     dir,
     adaptive,
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(import_jsx_runtime239.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(import_jsx_runtime245.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
       Input,
       {
         ...other,
@@ -10848,9 +10977,9 @@ var DateTimePicker = (props) => {
         readonly,
         className: classNames(props.className, DATETIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -10859,14 +10988,14 @@ var DateTimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
             InputClearValue,
             {
               loading,
@@ -10875,8 +11004,8 @@ var DateTimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
             Button,
             {
               className: "k-input-button",
@@ -10889,9 +11018,9 @@ var DateTimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(DateTimeSelector, { tab, dir }) }),
-    adaptive && /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+    opened && /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(DateTimeSelector, { tab, dir }) }),
+    adaptive && /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -10899,152 +11028,23 @@ var DateTimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(DateTimeSelector, { size: "large", tab, actionButtons: false }),
-      /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
+      /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(DateTimeSelector, { size: "large", tab, actionButtons: false }),
+      /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
     ] })
   ] });
 };
-DateTimePicker.states = states82;
-DateTimePicker.options = options79;
+DateTimePicker.states = states83;
+DateTimePicker.options = options80;
 DateTimePicker.className = DATETIMEPICKER_CLASSNAME;
-DateTimePicker.defaultProps = defaultProps80;
+DateTimePicker.defaultProps = defaultProps81;
 
 // src/datetimepicker/templates/datetimepicker-normal.tsx
-var import_jsx_runtime240 = require("react/jsx-runtime");
-
-// src/datetimepicker/templates/datetimepicker-popup.tsx
-var import_jsx_runtime241 = require("react/jsx-runtime");
-
-// src/datetimepicker/templates/datetimepicker-adaptive.tsx
-var import_jsx_runtime242 = require("react/jsx-runtime");
-
-// src/multiviewcalendar/multiviewcalendar.spec.tsx
-var import_jsx_runtime243 = require("react/jsx-runtime");
-var MULTIVIEWCALENDAR_CLASSNAME = `k-calendar-range`;
-var states83 = [];
-var options80 = {
-  size: [Size.small, Size.medium, Size.large]
-};
-var defaultProps81 = {
-  size: Size.medium,
-  calendarHeaderText: "October 2021 - November 2021",
-  viewsCount: 2,
-  orientation: "horizontal",
-  calendarView: "month"
-};
-var MultiViewCalendar = (props) => {
-  const {
-    size = defaultProps81.size,
-    orientation = defaultProps81.orientation,
-    calendarView = defaultProps81.calendarView,
-    calendarHeaderText = defaultProps81.calendarHeaderText,
-    viewsCount = defaultProps81.viewsCount,
-    showCalendarFooter,
-    showWeek,
-    dir,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
-    Calendar,
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        MULTIVIEWCALENDAR_CLASSNAME
-      ),
-      size,
-      calendarHeaderText,
-      calendarView,
-      viewsCount,
-      orientation,
-      showCalendarFooter,
-      showWeek,
-      dir
-    }
-  );
-};
-MultiViewCalendar.states = states83;
-MultiViewCalendar.options = options80;
-MultiViewCalendar.className = MULTIVIEWCALENDAR_CLASSNAME;
-MultiViewCalendar.defaultProps = defaultProps81;
-
-// src/multiviewcalendar/templates/multiviewcalendar-century.tsx
-var import_jsx_runtime244 = require("react/jsx-runtime");
-
-// src/multiviewcalendar/templates/multiviewcalendar-decade.tsx
-var import_jsx_runtime245 = require("react/jsx-runtime");
-
-// src/multiviewcalendar/templates/multiviewcalendar-normal.tsx
 var import_jsx_runtime246 = require("react/jsx-runtime");
-var MultiViewCalendarNormal = ({ showOtherMonth, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
-  MultiViewCalendar,
-  {
-    calendarView: "month",
-    showTableHead: true,
-    children: /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(import_jsx_runtime246.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(CalendarTableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "30", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "1" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "6", weekend: true })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(CalendarTableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "7", weekend: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "9" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "11" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "12" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "13", weekend: true })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(CalendarTableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "14", weekend: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "15" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "16", today: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "17" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "19" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "20", weekend: true })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(CalendarTableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "21", weekend: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "22" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "23" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "24" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "26" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "27", weekend: true })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(CalendarTableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "28", weekend: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "29" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "30" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "31" }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "1", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "2", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "3", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(CalendarTableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "4", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "5", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "6", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "7", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "8", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "9", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(CalendarCell, { text: "10", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
-      ] })
-    ] }),
-    ...props
-  }
-);
 
-// src/multiviewcalendar/templates/multiviewcalendar-with-weeks.tsx
+// src/datetimepicker/templates/datetimepicker-popup.tsx
 var import_jsx_runtime247 = require("react/jsx-runtime");
 
-// src/multiviewcalendar/templates/multiviewcalendar-year.tsx
+// src/datetimepicker/templates/datetimepicker-adaptive.tsx
 var import_jsx_runtime248 = require("react/jsx-runtime");
 
 // src/daterangepicker/daterangepicker.spec.tsx
@@ -17710,724 +17710,944 @@ var import_jsx_runtime552 = require("react/jsx-runtime");
 // src/editor/templates/editor-responsive-toolbar.tsx
 var import_jsx_runtime553 = require("react/jsx-runtime");
 
-// src/utils/templates/background/background-clip/border-clip.tsx
+// src/gantt/gantt.spec.tsx
 var import_jsx_runtime554 = require("react/jsx-runtime");
+var GANTT_CLASSNAME = "k-gantt";
+var states193 = [];
+var options178 = {};
+var defaultProps182 = {};
+var Gantt = (props) => {
+  const {
+    headerToolbar,
+    footerToolbar,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime554.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTT_CLASSNAME
+      ),
+      children: [
+        headerToolbar,
+        props.children,
+        footerToolbar
+      ]
+    }
+  );
+};
+Gantt.states = states193;
+Gantt.options = options178;
+Gantt.className = GANTT_CLASSNAME;
+Gantt.defaultProps = defaultProps182;
 
-// src/utils/templates/background/background-clip/content-clip.tsx
+// src/gantt/gantt-header-toolbar.spec.tsx
 var import_jsx_runtime555 = require("react/jsx-runtime");
 
-// src/utils/templates/background/background-clip/padding-clip.tsx
+// src/gantt/gantt-footer-toolbar.spec.tsx
 var import_jsx_runtime556 = require("react/jsx-runtime");
 
-// src/utils/templates/background/background-clip/text-clip.tsx
+// src/gantt/gantt-content.spec.tsx
 var import_jsx_runtime557 = require("react/jsx-runtime");
 
-// src/utils/templates/background/background-color/color.tsx
+// src/gantt/gantt-tables-wrapper.spec.tsx
 var import_jsx_runtime558 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-color/all-sides.tsx
+// src/gantt/gantt-columns-table.spec.tsx
 var import_jsx_runtime559 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-color/individual.tsx
+// src/gantt/gantt-rows-table.spec.tsx
 var import_jsx_runtime560 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-color/left-right.tsx
+// src/gantt/gantt-tasks-table.spec.tsx
 var import_jsx_runtime561 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-color/top-bottom.tsx
+// src/gantt/gantt-task.spec.tsx
 var import_jsx_runtime562 = require("react/jsx-runtime");
-
-// src/utils/templates/borders/border-radius/corners.tsx
-var import_jsx_runtime563 = require("react/jsx-runtime");
-
-// src/utils/templates/borders/border-radius/no-rounding.tsx
-var import_jsx_runtime564 = require("react/jsx-runtime");
-
-// src/utils/templates/borders/border-radius/rounding.tsx
-var import_jsx_runtime565 = require("react/jsx-runtime");
-
-// src/utils/templates/borders/border-radius/sides.tsx
-var import_jsx_runtime566 = require("react/jsx-runtime");
-
-// src/utils/templates/borders/border-style/all-sides.tsx
+var GANTTTASK_CLASSNAME = "k-task";
+var states194 = [];
+var options179 = {};
+var defaultProps183 = {
+  type: "single"
+};
+var GanttTask = (props) => {
+  const {
+    type = defaultProps183.type,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime562.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTTASK_CLASSNAME,
+        {
+          [`k-task-single`]: type === "single",
+          [`k-task-milestone`]: type === "milestone",
+          [`k-task-summary`]: type === "summary"
+        }
+      )
+    }
+  );
+};
+GanttTask.states = states194;
+GanttTask.options = options179;
+GanttTask.className = GANTTTASK_CLASSNAME;
+GanttTask.defaultProps = defaultProps183;
+
+// src/gantt/gantt-task-wrap.spec.tsx
+var import_jsx_runtime563 = require("react/jsx-runtime");
+var GANTTTASKWRAP_CLASSNAME = "k-task-wrap";
+var states195 = [];
+var options180 = {};
+var defaultProps184 = {
+  type: "single"
+};
+var GanttTaskWrap = (props) => {
+  const {
+    type = defaultProps184.type,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime563.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTTASKWRAP_CLASSNAME,
+        {
+          [`k-milestone-wrap`]: type === "milestone",
+          [`k-summary-wrap`]: type === "summary"
+        }
+      )
+    }
+  );
+};
+GanttTaskWrap.states = states195;
+GanttTaskWrap.options = options180;
+GanttTaskWrap.className = GANTTTASKWRAP_CLASSNAME;
+GanttTaskWrap.defaultProps = defaultProps184;
+
+// src/gantt/gantt-task-dot.spec.tsx
+var import_jsx_runtime564 = require("react/jsx-runtime");
+var GANTTTASKWDOT_CLASSNAME = "k-task-dot";
+var states196 = [];
+var options181 = {};
+var defaultProps185 = {
+  position: "start"
+};
+var GanttTaskDot = (props) => {
+  const {
+    position = defaultProps185.position,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime564.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTTASKWDOT_CLASSNAME,
+        {
+          [`k-task-start`]: position === "start",
+          [`k-task-end`]: position === "end"
+        }
+      )
+    }
+  );
+};
+GanttTaskDot.states = states196;
+GanttTaskDot.options = options181;
+GanttTaskDot.className = GANTTTASKWDOT_CLASSNAME;
+GanttTaskDot.defaultProps = defaultProps185;
+
+// src/gantt/gantt-task-content.spec.tsx
+var import_jsx_runtime565 = require("react/jsx-runtime");
+var GANTTTASKCONTENT_CLASSNAME = "k-task-content";
+var states197 = [];
+var options182 = {};
+var defaultProps186 = {};
+var GanttTaskContent = (props) => {
+  const {
+    content,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime565.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTTASKCONTENT_CLASSNAME
+      ),
+      children: [
+        content && /* @__PURE__ */ (0, import_jsx_runtime565.jsx)("div", { className: "k-task-template", children: content }),
+        /* @__PURE__ */ (0, import_jsx_runtime565.jsx)("span", { className: "k-task-actions", children: /* @__PURE__ */ (0, import_jsx_runtime565.jsx)("a", { className: "k-link k-task-delete", children: /* @__PURE__ */ (0, import_jsx_runtime565.jsx)(Icon, { icon: "x" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime565.jsx)("span", { className: "k-resize-handle k-resize-w" }),
+        /* @__PURE__ */ (0, import_jsx_runtime565.jsx)("span", { className: "k-resize-handle k-resize-e" })
+      ]
+    }
+  );
+};
+GanttTaskContent.states = states197;
+GanttTaskContent.options = options182;
+GanttTaskContent.className = GANTTTASKCONTENT_CLASSNAME;
+GanttTaskContent.defaultProps = defaultProps186;
+
+// src/gantt/gantt-line.spec.tsx
+var import_jsx_runtime566 = require("react/jsx-runtime");
+var GANTTLINE_CLASSNAME = "k-gantt-line";
+var states198 = [];
+var options183 = {};
+var defaultProps187 = {
+  orientation: "horizontal"
+};
+var GanttLine = (props) => {
+  const {
+    orientation = defaultProps187.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime566.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTLINE_CLASSNAME,
+        {
+          [`k-gantt-line-h`]: orientation === "horizontal",
+          [`k-gantt-line-v`]: orientation === "vertical"
+        }
+      )
+    }
+  );
+};
+GanttLine.states = states198;
+GanttLine.options = options183;
+GanttLine.className = GANTTLINE_CLASSNAME;
+GanttLine.defaultProps = defaultProps187;
+
+// src/utils/templates/background/background-clip/border-clip.tsx
 var import_jsx_runtime567 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-style/individual.tsx
+// src/utils/templates/background/background-clip/content-clip.tsx
 var import_jsx_runtime568 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-style/left-right.tsx
+// src/utils/templates/background/background-clip/padding-clip.tsx
 var import_jsx_runtime569 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-style/no-style.tsx
+// src/utils/templates/background/background-clip/text-clip.tsx
 var import_jsx_runtime570 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-style/top-bottom.tsx
+// src/utils/templates/background/background-color/color.tsx
 var import_jsx_runtime571 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-width/all-sides.tsx
+// src/utils/templates/borders/border-color/all-sides.tsx
 var import_jsx_runtime572 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-width/individual.tsx
+// src/utils/templates/borders/border-color/individual.tsx
 var import_jsx_runtime573 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-width/left-right.tsx
+// src/utils/templates/borders/border-color/left-right.tsx
 var import_jsx_runtime574 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/border-width/top-bottom.tsx
+// src/utils/templates/borders/border-color/top-bottom.tsx
 var import_jsx_runtime575 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/outline-color/all-sides.tsx
+// src/utils/templates/borders/border-radius/corners.tsx
 var import_jsx_runtime576 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/outline-offset/all-sides.tsx
+// src/utils/templates/borders/border-radius/no-rounding.tsx
 var import_jsx_runtime577 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/outline-offset/no-offset.tsx
+// src/utils/templates/borders/border-radius/rounding.tsx
 var import_jsx_runtime578 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/outline-style/all-sides.tsx
+// src/utils/templates/borders/border-radius/sides.tsx
 var import_jsx_runtime579 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/outline-style/no-style.tsx
+// src/utils/templates/borders/border-style/all-sides.tsx
 var import_jsx_runtime580 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/outline-width/all-sides.tsx
+// src/utils/templates/borders/border-style/individual.tsx
 var import_jsx_runtime581 = require("react/jsx-runtime");
 
-// src/utils/templates/borders/outline-width/no-width.tsx
+// src/utils/templates/borders/border-style/left-right.tsx
 var import_jsx_runtime582 = require("react/jsx-runtime");
 
-// src/utils/templates/effects/opacity/applying.tsx
+// src/utils/templates/borders/border-style/no-style.tsx
 var import_jsx_runtime583 = require("react/jsx-runtime");
 
-// src/utils/templates/filters/backdrop-blur/applying.tsx
+// src/utils/templates/borders/border-style/top-bottom.tsx
 var import_jsx_runtime584 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/around.tsx
+// src/utils/templates/borders/border-width/all-sides.tsx
 var import_jsx_runtime585 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/between.tsx
+// src/utils/templates/borders/border-width/individual.tsx
 var import_jsx_runtime586 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/center.tsx
+// src/utils/templates/borders/border-width/left-right.tsx
 var import_jsx_runtime587 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/end.tsx
+// src/utils/templates/borders/border-width/top-bottom.tsx
 var import_jsx_runtime588 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/evenly.tsx
+// src/utils/templates/borders/outline-color/all-sides.tsx
 var import_jsx_runtime589 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/normal.tsx
+// src/utils/templates/borders/outline-offset/all-sides.tsx
 var import_jsx_runtime590 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/start.tsx
+// src/utils/templates/borders/outline-offset/no-offset.tsx
 var import_jsx_runtime591 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-content/stretch.tsx
+// src/utils/templates/borders/outline-style/all-sides.tsx
 var import_jsx_runtime592 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-items/baseline.tsx
+// src/utils/templates/borders/outline-style/no-style.tsx
 var import_jsx_runtime593 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-items/center.tsx
+// src/utils/templates/borders/outline-width/all-sides.tsx
 var import_jsx_runtime594 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-items/end.tsx
+// src/utils/templates/borders/outline-width/no-width.tsx
 var import_jsx_runtime595 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-items/start.tsx
+// src/utils/templates/effects/opacity/applying.tsx
 var import_jsx_runtime596 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-items/stretch.tsx
+// src/utils/templates/filters/backdrop-blur/applying.tsx
 var import_jsx_runtime597 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-self/baseline.tsx
+// src/utils/templates/flex-grid/align-content/around.tsx
 var import_jsx_runtime598 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-self/center.tsx
+// src/utils/templates/flex-grid/align-content/between.tsx
 var import_jsx_runtime599 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-self/end.tsx
+// src/utils/templates/flex-grid/align-content/center.tsx
 var import_jsx_runtime600 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-self/start.tsx
+// src/utils/templates/flex-grid/align-content/end.tsx
 var import_jsx_runtime601 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/align-self/stretch.tsx
+// src/utils/templates/flex-grid/align-content/evenly.tsx
 var import_jsx_runtime602 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex/auto.tsx
+// src/utils/templates/flex-grid/align-content/normal.tsx
 var import_jsx_runtime603 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex/flex-1.tsx
+// src/utils/templates/flex-grid/align-content/start.tsx
 var import_jsx_runtime604 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex/initial.tsx
+// src/utils/templates/flex-grid/align-content/stretch.tsx
 var import_jsx_runtime605 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex/none.tsx
+// src/utils/templates/flex-grid/align-items/baseline.tsx
 var import_jsx_runtime606 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-basis/auto.tsx
+// src/utils/templates/flex-grid/align-items/center.tsx
 var import_jsx_runtime607 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-basis/size.tsx
+// src/utils/templates/flex-grid/align-items/end.tsx
 var import_jsx_runtime608 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-direction/column-reverse.tsx
+// src/utils/templates/flex-grid/align-items/start.tsx
 var import_jsx_runtime609 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-direction/column.tsx
+// src/utils/templates/flex-grid/align-items/stretch.tsx
 var import_jsx_runtime610 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-direction/row-reverse.tsx
+// src/utils/templates/flex-grid/align-self/baseline.tsx
 var import_jsx_runtime611 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-direction/row.tsx
+// src/utils/templates/flex-grid/align-self/center.tsx
 var import_jsx_runtime612 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-grow/grow-0.tsx
+// src/utils/templates/flex-grid/align-self/end.tsx
 var import_jsx_runtime613 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-grow/grow-1.tsx
+// src/utils/templates/flex-grid/align-self/start.tsx
 var import_jsx_runtime614 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-srink/shrink-0.tsx
+// src/utils/templates/flex-grid/align-self/stretch.tsx
 var import_jsx_runtime615 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-srink/shrink-1.tsx
+// src/utils/templates/flex-grid/flex/auto.tsx
 var import_jsx_runtime616 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-wrap/nowrap.tsx
+// src/utils/templates/flex-grid/flex/flex-1.tsx
 var import_jsx_runtime617 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-wrap/wrap-reverse.tsx
+// src/utils/templates/flex-grid/flex/initial.tsx
 var import_jsx_runtime618 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/flex-wrap/wrap.tsx
+// src/utils/templates/flex-grid/flex/none.tsx
 var import_jsx_runtime619 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/gap/size-x-y.tsx
+// src/utils/templates/flex-grid/flex-basis/auto.tsx
 var import_jsx_runtime620 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/gap/size.tsx
+// src/utils/templates/flex-grid/flex-basis/size.tsx
 var import_jsx_runtime621 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-cols/auto.tsx
+// src/utils/templates/flex-grid/flex-direction/column-reverse.tsx
 var import_jsx_runtime622 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-cols/fr.tsx
+// src/utils/templates/flex-grid/flex-direction/column.tsx
 var import_jsx_runtime623 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-cols/max.tsx
+// src/utils/templates/flex-grid/flex-direction/row-reverse.tsx
 var import_jsx_runtime624 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-cols/min.tsx
+// src/utils/templates/flex-grid/flex-direction/row.tsx
 var import_jsx_runtime625 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-flow/column.tsx
+// src/utils/templates/flex-grid/flex-grow/grow-0.tsx
 var import_jsx_runtime626 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-flow/dense.tsx
+// src/utils/templates/flex-grid/flex-grow/grow-1.tsx
 var import_jsx_runtime627 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-flow/row.tsx
+// src/utils/templates/flex-grid/flex-srink/shrink-0.tsx
 var import_jsx_runtime628 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-rows/auto.tsx
+// src/utils/templates/flex-grid/flex-srink/shrink-1.tsx
 var import_jsx_runtime629 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-rows/fr.tsx
+// src/utils/templates/flex-grid/flex-wrap/nowrap.tsx
 var import_jsx_runtime630 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-auto-rows/min.tsx
+// src/utils/templates/flex-grid/flex-wrap/wrap-reverse.tsx
 var import_jsx_runtime631 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-col-start-end/start-end-n.tsx
+// src/utils/templates/flex-grid/flex-wrap/wrap.tsx
 var import_jsx_runtime632 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-row-start-end/start-end-n.tsx
+// src/utils/templates/flex-grid/gap/size-x-y.tsx
 var import_jsx_runtime633 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-template-cols/integer.tsx
+// src/utils/templates/flex-grid/gap/size.tsx
 var import_jsx_runtime634 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/grid-template-rows/integer.tsx
+// src/utils/templates/flex-grid/grid-auto-cols/auto.tsx
 var import_jsx_runtime635 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/around.tsx
+// src/utils/templates/flex-grid/grid-auto-cols/fr.tsx
 var import_jsx_runtime636 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/between.tsx
+// src/utils/templates/flex-grid/grid-auto-cols/max.tsx
 var import_jsx_runtime637 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/center.tsx
+// src/utils/templates/flex-grid/grid-auto-cols/min.tsx
 var import_jsx_runtime638 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/end.tsx
+// src/utils/templates/flex-grid/grid-auto-flow/column.tsx
 var import_jsx_runtime639 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/evenly.tsx
+// src/utils/templates/flex-grid/grid-auto-flow/dense.tsx
 var import_jsx_runtime640 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/normal.tsx
+// src/utils/templates/flex-grid/grid-auto-flow/row.tsx
 var import_jsx_runtime641 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/start.tsx
+// src/utils/templates/flex-grid/grid-auto-rows/auto.tsx
 var import_jsx_runtime642 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-content/stretch.tsx
+// src/utils/templates/flex-grid/grid-auto-rows/fr.tsx
 var import_jsx_runtime643 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-items/center.tsx
+// src/utils/templates/flex-grid/grid-auto-rows/min.tsx
 var import_jsx_runtime644 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-items/end.tsx
+// src/utils/templates/flex-grid/grid-col-start-end/start-end-n.tsx
 var import_jsx_runtime645 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-items/start.tsx
+// src/utils/templates/flex-grid/grid-row-start-end/start-end-n.tsx
 var import_jsx_runtime646 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-items/stretch.tsx
+// src/utils/templates/flex-grid/grid-template-cols/integer.tsx
 var import_jsx_runtime647 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-self/center.tsx
+// src/utils/templates/flex-grid/grid-template-rows/integer.tsx
 var import_jsx_runtime648 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-self/end.tsx
+// src/utils/templates/flex-grid/justify-content/around.tsx
 var import_jsx_runtime649 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-self/start.tsx
+// src/utils/templates/flex-grid/justify-content/between.tsx
 var import_jsx_runtime650 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/justify-self/stretch.tsx
+// src/utils/templates/flex-grid/justify-content/center.tsx
 var import_jsx_runtime651 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/order/first.tsx
+// src/utils/templates/flex-grid/justify-content/end.tsx
 var import_jsx_runtime652 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/order/integer.tsx
+// src/utils/templates/flex-grid/justify-content/evenly.tsx
 var import_jsx_runtime653 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/order/last.tsx
+// src/utils/templates/flex-grid/justify-content/normal.tsx
 var import_jsx_runtime654 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/around.tsx
+// src/utils/templates/flex-grid/justify-content/start.tsx
 var import_jsx_runtime655 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/between.tsx
+// src/utils/templates/flex-grid/justify-content/stretch.tsx
 var import_jsx_runtime656 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/center.tsx
+// src/utils/templates/flex-grid/justify-items/center.tsx
 var import_jsx_runtime657 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/end.tsx
+// src/utils/templates/flex-grid/justify-items/end.tsx
 var import_jsx_runtime658 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/evenly.tsx
+// src/utils/templates/flex-grid/justify-items/start.tsx
 var import_jsx_runtime659 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/normal.tsx
+// src/utils/templates/flex-grid/justify-items/stretch.tsx
 var import_jsx_runtime660 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/start.tsx
+// src/utils/templates/flex-grid/justify-self/center.tsx
 var import_jsx_runtime661 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-content/stretch.tsx
+// src/utils/templates/flex-grid/justify-self/end.tsx
 var import_jsx_runtime662 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-items/center.tsx
+// src/utils/templates/flex-grid/justify-self/start.tsx
 var import_jsx_runtime663 = require("react/jsx-runtime");
 
-// src/utils/templates/flex-grid/place-items/end.tsx
+// src/utils/templates/flex-grid/justify-self/stretch.tsx
 var import_jsx_runtime664 = require("react/jsx-runtime");
 
+// src/utils/templates/flex-grid/order/first.tsx
+var import_jsx_runtime665 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/order/integer.tsx
+var import_jsx_runtime666 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/order/last.tsx
+var import_jsx_runtime667 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/around.tsx
+var import_jsx_runtime668 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/between.tsx
+var import_jsx_runtime669 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/center.tsx
+var import_jsx_runtime670 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/end.tsx
+var import_jsx_runtime671 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/evenly.tsx
+var import_jsx_runtime672 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/normal.tsx
+var import_jsx_runtime673 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/start.tsx
+var import_jsx_runtime674 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-content/stretch.tsx
+var import_jsx_runtime675 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-items/center.tsx
+var import_jsx_runtime676 = require("react/jsx-runtime");
+
+// src/utils/templates/flex-grid/place-items/end.tsx
+var import_jsx_runtime677 = require("react/jsx-runtime");
+
 // src/utils/templates/flex-grid/place-items/start.tsx
-var import_jsx_runtime665 = require("react/jsx-runtime");
+var import_jsx_runtime678 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-items/stretch.tsx
-var import_jsx_runtime666 = require("react/jsx-runtime");
+var import_jsx_runtime679 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/center.tsx
-var import_jsx_runtime667 = require("react/jsx-runtime");
+var import_jsx_runtime680 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/end.tsx
-var import_jsx_runtime668 = require("react/jsx-runtime");
+var import_jsx_runtime681 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/start.tsx
-var import_jsx_runtime669 = require("react/jsx-runtime");
+var import_jsx_runtime682 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/stretch.tsx
-var import_jsx_runtime670 = require("react/jsx-runtime");
+var import_jsx_runtime683 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/appearance/applying.tsx
-var import_jsx_runtime671 = require("react/jsx-runtime");
+var import_jsx_runtime684 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/appearance/none.tsx
-var import_jsx_runtime672 = require("react/jsx-runtime");
+var import_jsx_runtime685 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/cursor/applying.tsx
-var import_jsx_runtime673 = require("react/jsx-runtime");
+var import_jsx_runtime686 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/pointer-events/applying.tsx
-var import_jsx_runtime674 = require("react/jsx-runtime");
+var import_jsx_runtime687 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/all-directions.tsx
-var import_jsx_runtime675 = require("react/jsx-runtime");
+var import_jsx_runtime688 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/horizontal.tsx
-var import_jsx_runtime676 = require("react/jsx-runtime");
+var import_jsx_runtime689 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/no-resizing.tsx
-var import_jsx_runtime677 = require("react/jsx-runtime");
+var import_jsx_runtime690 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/vertical.tsx
-var import_jsx_runtime678 = require("react/jsx-runtime");
+var import_jsx_runtime691 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/auto.tsx
-var import_jsx_runtime679 = require("react/jsx-runtime");
+var import_jsx_runtime692 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/horizontal.tsx
-var import_jsx_runtime680 = require("react/jsx-runtime");
+var import_jsx_runtime693 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/none.tsx
-var import_jsx_runtime681 = require("react/jsx-runtime");
+var import_jsx_runtime694 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/vertical.tsx
-var import_jsx_runtime682 = require("react/jsx-runtime");
+var import_jsx_runtime695 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/user-select/all.tsx
-var import_jsx_runtime683 = require("react/jsx-runtime");
+var import_jsx_runtime696 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/user-select/none.tsx
-var import_jsx_runtime684 = require("react/jsx-runtime");
+var import_jsx_runtime697 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/user-select/text.tsx
-var import_jsx_runtime685 = require("react/jsx-runtime");
+var import_jsx_runtime698 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/auto.tsx
-var import_jsx_runtime686 = require("react/jsx-runtime");
+var import_jsx_runtime699 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/one.tsx
-var import_jsx_runtime687 = require("react/jsx-runtime");
+var import_jsx_runtime700 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/sqaure.tsx
-var import_jsx_runtime688 = require("react/jsx-runtime");
+var import_jsx_runtime701 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/video.tsx
-var import_jsx_runtime689 = require("react/jsx-runtime");
+var import_jsx_runtime702 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/box-sizing/border.tsx
-var import_jsx_runtime690 = require("react/jsx-runtime");
+var import_jsx_runtime703 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/box-sizing/content.tsx
-var import_jsx_runtime691 = require("react/jsx-runtime");
+var import_jsx_runtime704 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/both.tsx
-var import_jsx_runtime692 = require("react/jsx-runtime");
+var import_jsx_runtime705 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/left.tsx
-var import_jsx_runtime693 = require("react/jsx-runtime");
+var import_jsx_runtime706 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/no-clear.tsx
-var import_jsx_runtime694 = require("react/jsx-runtime");
+var import_jsx_runtime707 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/right.tsx
-var import_jsx_runtime695 = require("react/jsx-runtime");
+var import_jsx_runtime708 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/columns/automatic.tsx
-var import_jsx_runtime696 = require("react/jsx-runtime");
+var import_jsx_runtime709 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/columns/count.tsx
-var import_jsx_runtime697 = require("react/jsx-runtime");
+var import_jsx_runtime710 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/block.tsx
-var import_jsx_runtime698 = require("react/jsx-runtime");
+var import_jsx_runtime711 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/flex.tsx
-var import_jsx_runtime699 = require("react/jsx-runtime");
+var import_jsx_runtime712 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/inline.tsx
-var import_jsx_runtime700 = require("react/jsx-runtime");
+var import_jsx_runtime713 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/none.tsx
-var import_jsx_runtime701 = require("react/jsx-runtime");
+var import_jsx_runtime714 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/float/left.tsx
-var import_jsx_runtime702 = require("react/jsx-runtime");
+var import_jsx_runtime715 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/float/no-float.tsx
-var import_jsx_runtime703 = require("react/jsx-runtime");
+var import_jsx_runtime716 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/float/right.tsx
-var import_jsx_runtime704 = require("react/jsx-runtime");
+var import_jsx_runtime717 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/contain.tsx
-var import_jsx_runtime705 = require("react/jsx-runtime");
+var import_jsx_runtime718 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/cover.tsx
-var import_jsx_runtime706 = require("react/jsx-runtime");
+var import_jsx_runtime719 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/fill.tsx
-var import_jsx_runtime707 = require("react/jsx-runtime");
+var import_jsx_runtime720 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/scale-down.tsx
-var import_jsx_runtime708 = require("react/jsx-runtime");
+var import_jsx_runtime721 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-position/position.tsx
-var import_jsx_runtime709 = require("react/jsx-runtime");
+var import_jsx_runtime722 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/hidden.tsx
-var import_jsx_runtime710 = require("react/jsx-runtime");
+var import_jsx_runtime723 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/horizontal.tsx
-var import_jsx_runtime711 = require("react/jsx-runtime");
+var import_jsx_runtime724 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/vertical.tsx
-var import_jsx_runtime712 = require("react/jsx-runtime");
+var import_jsx_runtime725 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/visible.tsx
-var import_jsx_runtime713 = require("react/jsx-runtime");
+var import_jsx_runtime726 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/placement/multiple.tsx
-var import_jsx_runtime714 = require("react/jsx-runtime");
+var import_jsx_runtime727 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/placement/single.tsx
-var import_jsx_runtime715 = require("react/jsx-runtime");
+var import_jsx_runtime728 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/position/applying.tsx
-var import_jsx_runtime716 = require("react/jsx-runtime");
+var import_jsx_runtime729 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/visibility/invisible.tsx
-var import_jsx_runtime717 = require("react/jsx-runtime");
+var import_jsx_runtime730 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/z-index/applying.tsx
-var import_jsx_runtime718 = require("react/jsx-runtime");
+var import_jsx_runtime731 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/fixed.tsx
-var import_jsx_runtime719 = require("react/jsx-runtime");
+var import_jsx_runtime732 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/full.tsx
-var import_jsx_runtime720 = require("react/jsx-runtime");
+var import_jsx_runtime733 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/maximum.tsx
-var import_jsx_runtime721 = require("react/jsx-runtime");
+var import_jsx_runtime734 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/minimum.tsx
-var import_jsx_runtime722 = require("react/jsx-runtime");
+var import_jsx_runtime735 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/screen.tsx
-var import_jsx_runtime723 = require("react/jsx-runtime");
+var import_jsx_runtime736 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/fixed.tsx
-var import_jsx_runtime724 = require("react/jsx-runtime");
+var import_jsx_runtime737 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/full.tsx
-var import_jsx_runtime725 = require("react/jsx-runtime");
+var import_jsx_runtime738 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/maximum.tsx
-var import_jsx_runtime726 = require("react/jsx-runtime");
+var import_jsx_runtime739 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/minimum.tsx
-var import_jsx_runtime727 = require("react/jsx-runtime");
+var import_jsx_runtime740 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/screen.tsx
-var import_jsx_runtime728 = require("react/jsx-runtime");
+var import_jsx_runtime741 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/all.tsx
-var import_jsx_runtime729 = require("react/jsx-runtime");
+var import_jsx_runtime742 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/single.tsx
-var import_jsx_runtime730 = require("react/jsx-runtime");
+var import_jsx_runtime743 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/x.tsx
-var import_jsx_runtime731 = require("react/jsx-runtime");
+var import_jsx_runtime744 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/y.tsx
-var import_jsx_runtime732 = require("react/jsx-runtime");
+var import_jsx_runtime745 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/all.tsx
-var import_jsx_runtime733 = require("react/jsx-runtime");
+var import_jsx_runtime746 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/single.tsx
-var import_jsx_runtime734 = require("react/jsx-runtime");
+var import_jsx_runtime747 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/x.tsx
-var import_jsx_runtime735 = require("react/jsx-runtime");
+var import_jsx_runtime748 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/y.tsx
-var import_jsx_runtime736 = require("react/jsx-runtime");
+var import_jsx_runtime749 = require("react/jsx-runtime");
 
 // src/utils/templates/svg/fill/color.tsx
-var import_jsx_runtime737 = require("react/jsx-runtime");
+var import_jsx_runtime750 = require("react/jsx-runtime");
 
 // src/utils/templates/svg/stroke/color.tsx
-var import_jsx_runtime738 = require("react/jsx-runtime");
+var import_jsx_runtime751 = require("react/jsx-runtime");
 
 // src/utils/templates/table/border-collapse/collapse.tsx
-var import_jsx_runtime739 = require("react/jsx-runtime");
+var import_jsx_runtime752 = require("react/jsx-runtime");
 
 // src/utils/templates/table/border-collapse/separate.tsx
-var import_jsx_runtime740 = require("react/jsx-runtime");
+var import_jsx_runtime753 = require("react/jsx-runtime");
 
 // src/utils/templates/table/table-layout/auto.tsx
-var import_jsx_runtime741 = require("react/jsx-runtime");
+var import_jsx_runtime754 = require("react/jsx-runtime");
 
 // src/utils/templates/table/table-layout/fixed.tsx
-var import_jsx_runtime742 = require("react/jsx-runtime");
+var import_jsx_runtime755 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/flip/horizontal.tsx
-var import_jsx_runtime743 = require("react/jsx-runtime");
+var import_jsx_runtime756 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/flip/vertical.tsx
-var import_jsx_runtime744 = require("react/jsx-runtime");
+var import_jsx_runtime757 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/origin/applying.tsx
-var import_jsx_runtime745 = require("react/jsx-runtime");
+var import_jsx_runtime758 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/rotate/applying.tsx
-var import_jsx_runtime746 = require("react/jsx-runtime");
+var import_jsx_runtime759 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/scale/applying.tsx
-var import_jsx_runtime747 = require("react/jsx-runtime");
+var import_jsx_runtime760 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/skew/applying.tsx
-var import_jsx_runtime748 = require("react/jsx-runtime");
+var import_jsx_runtime761 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/translate/applying.tsx
-var import_jsx_runtime749 = require("react/jsx-runtime");
+var import_jsx_runtime762 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/font-style/italic.tsx
-var import_jsx_runtime750 = require("react/jsx-runtime");
+var import_jsx_runtime763 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/font-weight/size.tsx
-var import_jsx_runtime751 = require("react/jsx-runtime");
+var import_jsx_runtime764 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/list-style-type/decimal.tsx
-var import_jsx_runtime752 = require("react/jsx-runtime");
+var import_jsx_runtime765 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/list-style-type/disc.tsx
-var import_jsx_runtime753 = require("react/jsx-runtime");
+var import_jsx_runtime766 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/list-style-type/none.tsx
-var import_jsx_runtime754 = require("react/jsx-runtime");
+var import_jsx_runtime767 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/center.tsx
-var import_jsx_runtime755 = require("react/jsx-runtime");
+var import_jsx_runtime768 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/justify.tsx
-var import_jsx_runtime756 = require("react/jsx-runtime");
+var import_jsx_runtime769 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/left.tsx
-var import_jsx_runtime757 = require("react/jsx-runtime");
+var import_jsx_runtime770 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/right.tsx
-var import_jsx_runtime758 = require("react/jsx-runtime");
+var import_jsx_runtime771 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-color/inherit.tsx
-var import_jsx_runtime759 = require("react/jsx-runtime");
+var import_jsx_runtime772 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-color/white.tsx
-var import_jsx_runtime760 = require("react/jsx-runtime");
+var import_jsx_runtime773 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-decoration/all.tsx
-var import_jsx_runtime761 = require("react/jsx-runtime");
+var import_jsx_runtime774 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-overflow/clip.tsx
-var import_jsx_runtime762 = require("react/jsx-runtime");
+var import_jsx_runtime775 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-overflow/ellipsis.tsx
-var import_jsx_runtime763 = require("react/jsx-runtime");
+var import_jsx_runtime776 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-transform/all.tsx
-var import_jsx_runtime764 = require("react/jsx-runtime");
+var import_jsx_runtime777 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/baseline.tsx
-var import_jsx_runtime765 = require("react/jsx-runtime");
+var import_jsx_runtime778 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/bottom.tsx
-var import_jsx_runtime766 = require("react/jsx-runtime");
+var import_jsx_runtime779 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/center.tsx
-var import_jsx_runtime767 = require("react/jsx-runtime");
+var import_jsx_runtime780 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/top.tsx
-var import_jsx_runtime768 = require("react/jsx-runtime");
+var import_jsx_runtime781 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/normal.tsx
-var import_jsx_runtime769 = require("react/jsx-runtime");
+var import_jsx_runtime782 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/nowrap.tsx
-var import_jsx_runtime770 = require("react/jsx-runtime");
+var import_jsx_runtime783 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/pre-line.tsx
-var import_jsx_runtime771 = require("react/jsx-runtime");
+var import_jsx_runtime784 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/pre-wrap.tsx
-var import_jsx_runtime772 = require("react/jsx-runtime");
+var import_jsx_runtime785 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/pre.tsx
-var import_jsx_runtime773 = require("react/jsx-runtime");
+var import_jsx_runtime786 = require("react/jsx-runtime");
 
 // src/spreadsheet/spreadsheet-header.tsx
-var import_jsx_runtime774 = require("react/jsx-runtime");
+var import_jsx_runtime787 = require("react/jsx-runtime");
 var SPREADSHEETHEADER_CLASSNAME = `k-spreadsheet-header`;
-var states193 = [];
-var options178 = {};
+var states199 = [];
+var options184 = {};
 var defaultToolbarItems = [
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { icon: "arrow-rotate-ccw", fillMode: "flat" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { icon: "arrow-rotate-cw", fillMode: "flat" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { icon: "cut", fillMode: "flat" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { icon: "copy", fillMode: "flat" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { icon: "clipboard", fillMode: "flat" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(DropdownList, { value: "Font Name", fillMode: "flat" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(DropdownList, { value: "Font Size", fillMode: "flat" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsxs)(ButtonGroup, { fillMode: "flat", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { className: "k-group-start", icon: "font-grow", fillMode: "flat" }),
-    /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { className: "k-group-end", icon: "font-shrink", fillMode: "flat" })
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { icon: "arrow-rotate-ccw", fillMode: "flat" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { icon: "arrow-rotate-cw", fillMode: "flat" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { icon: "cut", fillMode: "flat" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { icon: "copy", fillMode: "flat" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { icon: "clipboard", fillMode: "flat" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(DropdownList, { value: "Font Name", fillMode: "flat" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(DropdownList, { value: "Font Size", fillMode: "flat" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsxs)(ButtonGroup, { fillMode: "flat", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { className: "k-group-start", icon: "font-grow", fillMode: "flat" }),
+    /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { className: "k-group-end", icon: "font-shrink", fillMode: "flat" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsxs)(ButtonGroup, { fillMode: "flat", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { className: "k-group-start", icon: "bold", fillMode: "flat" }),
-    /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { icon: "italic", fillMode: "flat" }),
-    /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { icon: "underline", fillMode: "flat" }),
-    /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { className: "k-group-end", icon: "strikethrough", fillMode: "flat" })
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsxs)(ButtonGroup, { fillMode: "flat", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { className: "k-group-start", icon: "bold", fillMode: "flat" }),
+    /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { icon: "italic", fillMode: "flat" }),
+    /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { icon: "underline", fillMode: "flat" }),
+    /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { className: "k-group-end", icon: "strikethrough", fillMode: "flat" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarItem, { children: /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ColorPicker, { value: "red", valueIconName: "foreground-color", fillMode: "flat" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarItem, { children: /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ColorPicker, { value: "fuchsia", valueIconName: "droplet", fillMode: "flat" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuButton, { fillMode: "flat", icon: "borders-all", showArrow: true }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuButton, { fillMode: "flat", icon: "align-left", showArrow: true }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuButton, { fillMode: "flat", icon: "align-middle", showArrow: true }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(Button, { fillMode: "flat", icon: "text-wrap" })
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarItem, { children: /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ColorPicker, { value: "red", valueIconName: "foreground-color", fillMode: "flat" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarItem, { children: /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ColorPicker, { value: "fuchsia", valueIconName: "droplet", fillMode: "flat" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuButton, { fillMode: "flat", icon: "borders-all", showArrow: true }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuButton, { fillMode: "flat", icon: "align-left", showArrow: true }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuButton, { fillMode: "flat", icon: "align-middle", showArrow: true }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(Button, { fillMode: "flat", icon: "text-wrap" })
 ];
 var defaultMenuItems = [
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuItem, { first: true, text: "File" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuItem, { text: "Home", active: true }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuItem, { text: "Insert" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuItem, { text: "Format" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuItem, { text: "Formulas" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuItem, { text: "Data" }),
-  /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(MenuItem, { last: true, text: "View" })
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuItem, { first: true, text: "File" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuItem, { text: "Home", active: true }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuItem, { text: "Insert" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuItem, { text: "Format" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuItem, { text: "Formulas" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuItem, { text: "Data" }),
+  /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(MenuItem, { last: true, text: "View" })
 ];
-var defaultProps182 = {
+var defaultProps188 = {
   toolbarItems: defaultToolbarItems,
   menuItems: defaultMenuItems
 };
 var SpreadsheetHeader = (props) => {
   const {
-    toolbarItems = defaultProps182.toolbarItems,
-    menuItems = defaultProps182.menuItems,
+    toolbarItems = defaultProps188.toolbarItems,
+    menuItems = defaultProps188.menuItems,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime774.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime787.jsxs)(
     "div",
     {
       ...other,
@@ -18436,41 +18656,41 @@ var SpreadsheetHeader = (props) => {
         props.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(SpreadsheetMenu, { children: menuItems }),
-        /* @__PURE__ */ (0, import_jsx_runtime774.jsx)(SpreadsheetToolbar, { children: toolbarItems })
+        /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(SpreadsheetMenu, { children: menuItems }),
+        /* @__PURE__ */ (0, import_jsx_runtime787.jsx)(SpreadsheetToolbar, { children: toolbarItems })
       ]
     }
   );
 };
-SpreadsheetHeader.states = states193;
-SpreadsheetHeader.options = options178;
+SpreadsheetHeader.states = states199;
+SpreadsheetHeader.options = options184;
 SpreadsheetHeader.className = SPREADSHEETHEADER_CLASSNAME;
-SpreadsheetHeader.defaultProps = defaultProps182;
+SpreadsheetHeader.defaultProps = defaultProps188;
 
 // src/spreadsheet/spreadsheet-action-bar.tsx
-var import_jsx_runtime775 = require("react/jsx-runtime");
+var import_jsx_runtime788 = require("react/jsx-runtime");
 var SPREADSHEETACTIONBAR_CLASSNAME = `k-spreadsheet-action-bar`;
-var states194 = [];
-var options179 = {};
-var defaultFormula = /* @__PURE__ */ (0, import_jsx_runtime775.jsxs)(import_jsx_runtime775.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-syntax-startexp", children: "=" }),
-  /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-syntax-ref k-series-a", children: "B6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-syntax-op", children: "+" }),
-  /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-syntax-ref k-series-b", children: "C6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-syntax-op", children: "+" }),
-  /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-syntax-ref k-series-c", children: "C3" })
+var states200 = [];
+var options185 = {};
+var defaultFormula = /* @__PURE__ */ (0, import_jsx_runtime788.jsxs)(import_jsx_runtime788.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-syntax-startexp", children: "=" }),
+  /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-syntax-ref k-series-a", children: "B6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-syntax-op", children: "+" }),
+  /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-syntax-ref k-series-b", children: "C6" }),
+  /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-syntax-op", children: "+" }),
+  /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-syntax-ref k-series-c", children: "C3" })
 ] });
-var defaultProps183 = {
+var defaultProps189 = {
   formula: defaultFormula,
   cellName: "B6"
 };
 var SpreadsheetActionBar = (props) => {
   const {
-    formula = defaultProps183.formula,
-    cellName = defaultProps183.cellName,
+    formula = defaultProps189.formula,
+    cellName = defaultProps189.cellName,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime775.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime788.jsxs)(
     "div",
     {
       ...other,
@@ -18479,34 +18699,34 @@ var SpreadsheetActionBar = (props) => {
         props.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("div", { className: "k-spreadsheet-name-editor", children: /* @__PURE__ */ (0, import_jsx_runtime775.jsx)(Combobox, { placeholder: cellName, fillMode: "flat" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime775.jsxs)("div", { className: "k-spreadsheet-formula-bar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-separator k-separator-vertical" }),
-          /* @__PURE__ */ (0, import_jsx_runtime775.jsx)(Button, { icon: "formula-fx", fillMode: "flat" }),
-          /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("span", { className: "k-separator k-separator-vertical" }),
-          /* @__PURE__ */ (0, import_jsx_runtime775.jsx)("div", { className: "k-spreadsheet-formula-input k-textbox k-input k-input-md k-input-flat k-rounded-md", children: formula })
+        /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("div", { className: "k-spreadsheet-name-editor", children: /* @__PURE__ */ (0, import_jsx_runtime788.jsx)(Combobox, { placeholder: cellName, fillMode: "flat" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime788.jsxs)("div", { className: "k-spreadsheet-formula-bar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-separator k-separator-vertical" }),
+          /* @__PURE__ */ (0, import_jsx_runtime788.jsx)(Button, { icon: "formula-fx", fillMode: "flat" }),
+          /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("span", { className: "k-separator k-separator-vertical" }),
+          /* @__PURE__ */ (0, import_jsx_runtime788.jsx)("div", { className: "k-spreadsheet-formula-input k-textbox k-input k-input-md k-input-flat k-rounded-md", children: formula })
         ] })
       ]
     }
   );
 };
-SpreadsheetActionBar.states = states194;
-SpreadsheetActionBar.options = options179;
+SpreadsheetActionBar.states = states200;
+SpreadsheetActionBar.options = options185;
 SpreadsheetActionBar.className = SPREADSHEETACTIONBAR_CLASSNAME;
-SpreadsheetActionBar.defaultProps = defaultProps183;
+SpreadsheetActionBar.defaultProps = defaultProps189;
 
 // src/spreadsheet/spreadsheet-tabstrip.tsx
-var import_jsx_runtime776 = require("react/jsx-runtime");
+var import_jsx_runtime789 = require("react/jsx-runtime");
 var SPREADSHEETTABSTRIP_CLASSNAME = `k-spreadsheet-sheets`;
-var states195 = [];
-var options180 = {};
-var defaultProps184 = {};
+var states201 = [];
+var options186 = {};
+var defaultProps190 = {};
 var SpreadsheetTabStrip = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime776.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime789.jsx)(
     TabStrip,
     {
       ...other,
@@ -18521,25 +18741,25 @@ var SpreadsheetTabStrip = (props) => {
     }
   );
 };
-SpreadsheetTabStrip.states = states195;
-SpreadsheetTabStrip.options = options180;
+SpreadsheetTabStrip.states = states201;
+SpreadsheetTabStrip.options = options186;
 SpreadsheetTabStrip.className = SPREADSHEETTABSTRIP_CLASSNAME;
-SpreadsheetTabStrip.defaultProps = defaultProps184;
+SpreadsheetTabStrip.defaultProps = defaultProps190;
 
 // src/spreadsheet/spreadsheet-sheets-bar.tsx
-var import_jsx_runtime777 = require("react/jsx-runtime");
+var import_jsx_runtime790 = require("react/jsx-runtime");
 var SPREADSHEETSHEETSBAR_CLASSNAME = `k-spreadsheet-sheets-bar`;
-var states196 = [];
-var options181 = {};
-var defaultTabStripItems = /* @__PURE__ */ (0, import_jsx_runtime777.jsxs)(import_jsx_runtime777.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(TabStripItem, { first: true, value: "Sheet 1", children: /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(TabStripItem, { value: "Sheet 2", children: /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(TabStripItem, { value: "Sheet 3", children: /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(TabStripItem, { value: "Sheet 4", children: /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(TabStripItem, { value: "Sheet 5", children: /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(TabStripItem, { last: true, value: "Sheet 6", children: /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) })
+var states202 = [];
+var options187 = {};
+var defaultTabStripItems = /* @__PURE__ */ (0, import_jsx_runtime790.jsxs)(import_jsx_runtime790.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(TabStripItem, { first: true, value: "Sheet 1", children: /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(TabStripItem, { value: "Sheet 2", children: /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(TabStripItem, { value: "Sheet 3", children: /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(TabStripItem, { value: "Sheet 4", children: /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(TabStripItem, { value: "Sheet 5", children: /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(TabStripItem, { last: true, value: "Sheet 6", children: /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) })
 ] });
-var defaultProps185 = {
+var defaultProps191 = {
   tabStripItems: defaultTabStripItems
 };
 var SpreadsheetSheetsBar = (props) => {
@@ -18547,7 +18767,7 @@ var SpreadsheetSheetsBar = (props) => {
     tabStripItems,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime777.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime790.jsxs)(
     "div",
     {
       ...other,
@@ -18556,52 +18776,52 @@ var SpreadsheetSheetsBar = (props) => {
         props.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(Button, { className: "k-spreadsheet-sheet-add", fillMode: "flat", icon: "plus" }),
-        /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(Button, { className: "k-spreadsheet-sheets-menu", fillMode: "flat", icon: "menu" }),
-        /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(SpreadsheetTabStrip, { children: /* @__PURE__ */ (0, import_jsx_runtime777.jsxs)(TabStripItemsWrapper, { orientation: "vertical", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(TabStripItems, { children: tabStripItems }),
-          /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(Button, { className: "k-tabstrip-prev", fillMode: "flat", icon: "caret-alt-left", rounded: null, size: null }),
-          /* @__PURE__ */ (0, import_jsx_runtime777.jsx)(Button, { className: "k-tabstrip-next", fillMode: "flat", icon: "caret-alt-right", rounded: null, size: null })
+        /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(Button, { className: "k-spreadsheet-sheet-add", fillMode: "flat", icon: "plus" }),
+        /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(Button, { className: "k-spreadsheet-sheets-menu", fillMode: "flat", icon: "menu" }),
+        /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(SpreadsheetTabStrip, { children: /* @__PURE__ */ (0, import_jsx_runtime790.jsxs)(TabStripItemsWrapper, { orientation: "vertical", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(TabStripItems, { children: tabStripItems }),
+          /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(Button, { className: "k-tabstrip-prev", fillMode: "flat", icon: "caret-alt-left", rounded: null, size: null }),
+          /* @__PURE__ */ (0, import_jsx_runtime790.jsx)(Button, { className: "k-tabstrip-next", fillMode: "flat", icon: "caret-alt-right", rounded: null, size: null })
         ] }) })
       ]
     }
   );
 };
-SpreadsheetSheetsBar.states = states196;
-SpreadsheetSheetsBar.options = options181;
+SpreadsheetSheetsBar.states = states202;
+SpreadsheetSheetsBar.options = options187;
 SpreadsheetSheetsBar.className = SPREADSHEETSHEETSBAR_CLASSNAME;
-SpreadsheetSheetsBar.defaultProps = defaultProps185;
+SpreadsheetSheetsBar.defaultProps = defaultProps191;
 
 // src/spreadsheet/spreadsheet-column-header.tsx
-var import_jsx_runtime778 = require("react/jsx-runtime");
+var import_jsx_runtime791 = require("react/jsx-runtime");
 var SPREADSHEETCOLUMNHEADER_CLASSNAME = `k-spreadsheet-column-header`;
-var states197 = [];
-var options182 = {};
-var defaultProps186 = {
+var states203 = [];
+var options188 = {};
+var defaultProps192 = {
   configureSelection: { A: "partial" }
 };
 var SpreadsheetColumnHeader = (props) => {
   const {
-    configureSelection = defaultProps186.configureSelection,
+    configureSelection = defaultProps192.configureSelection,
     ...other
   } = props;
   const defaultColumnHeaderItems = [
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "0px", width: "100px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "A" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "100px", width: "215px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "B" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "315px", width: "115px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "C" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "430px", width: "115px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "D" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "545px", width: "115px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "E" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "660px", width: "155px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "F" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "815px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "G" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "879px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "H" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "943px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "I" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "1007px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "J" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "1071px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "K" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { style: { position: "absolute", left: "1135px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime778.jsx)("div", { className: "k-vertical-align-center", children: "L" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "0px", width: "100px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "A" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "100px", width: "215px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "B" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "315px", width: "115px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "C" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "430px", width: "115px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "D" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "545px", width: "115px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "E" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "660px", width: "155px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "F" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "815px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "G" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "879px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "H" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "943px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "I" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "1007px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "J" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "1071px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "K" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { style: { position: "absolute", left: "1135px", width: "64px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime791.jsx)("div", { className: "k-vertical-align-center", children: "L" }) })
   ];
   const addColumnSelection = (items, configuration) => items.map((element, index) => {
     const itemValue = element.props.children.props.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime778.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime791.jsx)(
       "div",
       {
         style: element.props.style,
@@ -18618,7 +18838,7 @@ var SpreadsheetColumnHeader = (props) => {
     );
   });
   const columnHeaderItems = configureSelection ? addColumnSelection(defaultColumnHeaderItems, configureSelection) : defaultColumnHeaderItems;
-  return /* @__PURE__ */ (0, import_jsx_runtime778.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime791.jsx)(
     "div",
     {
       ...other,
@@ -18630,42 +18850,42 @@ var SpreadsheetColumnHeader = (props) => {
     }
   );
 };
-SpreadsheetColumnHeader.states = states197;
-SpreadsheetColumnHeader.options = options182;
+SpreadsheetColumnHeader.states = states203;
+SpreadsheetColumnHeader.options = options188;
 SpreadsheetColumnHeader.className = SPREADSHEETCOLUMNHEADER_CLASSNAME;
-SpreadsheetColumnHeader.defaultProps = defaultProps186;
+SpreadsheetColumnHeader.defaultProps = defaultProps192;
 
 // src/spreadsheet/spreadsheet-row-header.tsx
-var import_jsx_runtime779 = require("react/jsx-runtime");
+var import_jsx_runtime792 = require("react/jsx-runtime");
 var SPREADSHEETROWHEADER_CLASSNAME = `k-spreadsheet-row-header`;
-var states198 = [];
-var options183 = {};
-var defaultProps187 = {
+var states204 = [];
+var options189 = {};
+var defaultProps193 = {
   configureSelection: { 1: "partial" }
 };
 var SpreadsheetRowHeader = (props) => {
   const {
-    configureSelection = defaultProps187.configureSelection,
+    configureSelection = defaultProps193.configureSelection,
     ...other
   } = props;
   const defaultRowHeaderItems = [
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "70px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "1" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "25px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "2" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "3" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "5" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "6" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "7" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "8" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "9" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "10" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "11" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "12" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime779.jsx)("div", { className: "k-vertical-align-center", children: "13" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "70px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "1" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "25px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "2" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "3" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "5" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "6" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "7" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "8" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "9" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "10" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "11" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "12" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { style: { width: "30px", height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime792.jsx)("div", { className: "k-vertical-align-center", children: "13" }) })
   ];
   const addRowSelection = (items, configuration) => items.map((element, index) => {
     const itemValue = element.props.children.props.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime779.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime792.jsx)(
       "div",
       {
         style: element.props.style,
@@ -18682,7 +18902,7 @@ var SpreadsheetRowHeader = (props) => {
     );
   });
   const rowHeaderItems = configureSelection ? addRowSelection(defaultRowHeaderItems, configureSelection) : defaultRowHeaderItems;
-  return /* @__PURE__ */ (0, import_jsx_runtime779.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime792.jsx)(
     "div",
     {
       ...other,
@@ -18694,17 +18914,17 @@ var SpreadsheetRowHeader = (props) => {
     }
   );
 };
-SpreadsheetRowHeader.states = states198;
-SpreadsheetRowHeader.options = options183;
+SpreadsheetRowHeader.states = states204;
+SpreadsheetRowHeader.options = options189;
 SpreadsheetRowHeader.className = SPREADSHEETROWHEADER_CLASSNAME;
-SpreadsheetRowHeader.defaultProps = defaultProps187;
+SpreadsheetRowHeader.defaultProps = defaultProps193;
 
 // src/spreadsheet/spreadsheet-data.tsx
-var import_jsx_runtime780 = require("react/jsx-runtime");
+var import_jsx_runtime793 = require("react/jsx-runtime");
 var SPREADSHEETDATA_CLASSNAME = `k-spreadsheet-data`;
-var states199 = [];
-var options184 = {};
-var defaultProps188 = {};
+var states205 = [];
+var options190 = {};
+var defaultProps194 = {};
 var SpreadsheetData = (props) => {
   const {
     activeCellIndex,
@@ -18712,7 +18932,7 @@ var SpreadsheetData = (props) => {
   } = props;
   const addActiveCell = (data2, activeCellIndex2) => data2.map((element, index) => {
     if (index === activeCellIndex2) {
-      return /* @__PURE__ */ (0, import_jsx_runtime780.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime793.jsx)(
         "div",
         {
           style: element.props.style,
@@ -18728,7 +18948,7 @@ var SpreadsheetData = (props) => {
     return element;
   });
   const spreadsheetData = activeCellIndex ? addActiveCell(data, activeCellIndex) : data;
-  return /* @__PURE__ */ (0, import_jsx_runtime780.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime793.jsx)(
     "div",
     {
       ...other,
@@ -18740,17 +18960,17 @@ var SpreadsheetData = (props) => {
     }
   );
 };
-SpreadsheetData.states = states199;
-SpreadsheetData.options = options184;
+SpreadsheetData.states = states205;
+SpreadsheetData.options = options190;
 SpreadsheetData.className = SPREADSHEETDATA_CLASSNAME;
-SpreadsheetData.defaultProps = defaultProps188;
+SpreadsheetData.defaultProps = defaultProps194;
 
 // src/spreadsheet/spreadsheet-view.tsx
-var import_jsx_runtime781 = require("react/jsx-runtime");
+var import_jsx_runtime794 = require("react/jsx-runtime");
 var SPREADSHEETVIEW_CLASSNAME = `k-spreadsheet-view`;
-var states200 = [];
-var options185 = {};
-var defaultProps189 = {};
+var states206 = [];
+var options191 = {};
+var defaultProps195 = {};
 var SpreadsheetView = (props) => {
   const {
     selectionHighlight,
@@ -18762,7 +18982,7 @@ var SpreadsheetView = (props) => {
     filter,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime781.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime794.jsxs)(
     "div",
     {
       ...other,
@@ -18771,49 +18991,49 @@ var SpreadsheetView = (props) => {
         props.className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime781.jsxs)("div", { className: "k-spreadsheet-fixed-container", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime781.jsxs)("div", { style: { top: 0, left: 0, height: "100%", width: "100%" }, className: "k-spreadsheet-pane k-top k-left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime781.jsx)(SpreadsheetData, { activeCellIndex, style: { position: "relative", left: "30px", top: "30px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-selection-wrapper", children: selection }),
-            /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-auto-fill-wrapper" }),
-            /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-selection-wrapper", children: selectionHighlight }),
-            /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-filter-wrapper", children: filter }),
-            /* @__PURE__ */ (0, import_jsx_runtime781.jsx)(SpreadsheetRowHeader, { configureSelection: rowHeaderSelection, style: { width: "30px", top: "30px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime781.jsx)(SpreadsheetColumnHeader, { configureSelection: columnHeaderSelection, style: { top: "0px", left: "30px", width: "1199px", height: "30px" } })
+        /* @__PURE__ */ (0, import_jsx_runtime794.jsxs)("div", { className: "k-spreadsheet-fixed-container", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime794.jsxs)("div", { style: { top: 0, left: 0, height: "100%", width: "100%" }, className: "k-spreadsheet-pane k-top k-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime794.jsx)(SpreadsheetData, { activeCellIndex, style: { position: "relative", left: "30px", top: "30px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-selection-wrapper", children: selection }),
+            /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-auto-fill-wrapper" }),
+            /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-selection-wrapper", children: selectionHighlight }),
+            /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-filter-wrapper", children: filter }),
+            /* @__PURE__ */ (0, import_jsx_runtime794.jsx)(SpreadsheetRowHeader, { configureSelection: rowHeaderSelection, style: { width: "30px", top: "30px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime794.jsx)(SpreadsheetColumnHeader, { configureSelection: columnHeaderSelection, style: { top: "0px", left: "30px", width: "1199px", height: "30px" } })
           ] }),
           cellEditor,
-          /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { style: { width: "30px", height: "30px" }, className: "k-spreadsheet-top-corner" })
+          /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { style: { width: "30px", height: "30px" }, className: "k-spreadsheet-top-corner" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-spreadsheet-scroller", children: /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-spreadsheet-view-size", style: { height: "6080px", width: "3663px" } }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-spreadsheet-clipboard", children: /* @__PURE__ */ (0, import_jsx_runtime781.jsxs)("table", { style: { left: "0px", top: "0px", height: "30px", width: "100px" }, className: "kendo-clipboard-eb8ea401-ab97-4190-8fb2-b3b83b299a9f", role: "presentation", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("colgroup", { children: /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("col", { style: { width: "100px" } }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("tr", { style: { height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("td", { style: { backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", borderColor: "rgb(255, 255, 255)" }, children: "216321" }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-spreadsheet-scroller", children: /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-spreadsheet-view-size", style: { height: "6080px", width: "3663px" } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-spreadsheet-clipboard", children: /* @__PURE__ */ (0, import_jsx_runtime794.jsxs)("table", { style: { left: "0px", top: "0px", height: "30px", width: "100px" }, className: "kendo-clipboard-eb8ea401-ab97-4190-8fb2-b3b83b299a9f", role: "presentation", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("colgroup", { children: /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("col", { style: { width: "100px" } }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("tr", { style: { height: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("td", { style: { backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 62, 117)", fontFamily: "Arial", textAlign: "center", fontSize: "14px", borderColor: "rgb(255, 255, 255)" }, children: "216321" }) }) })
         ] }) }),
-        !cellEditor && /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-spreadsheet-cell-editor k-spreadsheet-formula-input", "data-role": "formulainput", style: { whiteSpace: "pre" }, children: "216321" }),
-        /* @__PURE__ */ (0, import_jsx_runtime781.jsx)(Tooltip, { content: "A1", style: { position: "absolute", display: "none" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-list-group-sticky-header", style: { display: "none" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime781.jsx)("div", { className: "k-list-content k-list-scroller", unselectable: "on" })
+        !cellEditor && /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-spreadsheet-cell-editor k-spreadsheet-formula-input", "data-role": "formulainput", style: { whiteSpace: "pre" }, children: "216321" }),
+        /* @__PURE__ */ (0, import_jsx_runtime794.jsx)(Tooltip, { content: "A1", style: { position: "absolute", display: "none" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-list-group-sticky-header", style: { display: "none" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime794.jsx)("div", { className: "k-list-content k-list-scroller", unselectable: "on" })
       ]
     }
   );
 };
-SpreadsheetView.states = states200;
-SpreadsheetView.options = options185;
+SpreadsheetView.states = states206;
+SpreadsheetView.options = options191;
 SpreadsheetView.className = SPREADSHEETVIEW_CLASSNAME;
-SpreadsheetView.defaultProps = defaultProps189;
+SpreadsheetView.defaultProps = defaultProps195;
 
 // src/spreadsheet/spreadsheet.spec.tsx
-var import_jsx_runtime782 = require("react/jsx-runtime");
+var import_jsx_runtime795 = require("react/jsx-runtime");
 var SPREADSHEET_CLASSNAME = `k-spreadsheet`;
-var states201 = [];
-var options186 = {};
-var defaultProps190 = {};
+var states207 = [];
+var options192 = {};
+var defaultProps196 = {};
 var Spreadsheet = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime782.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime795.jsx)(
     "div",
     {
       ...other,
@@ -18825,37 +19045,37 @@ var Spreadsheet = (props) => {
     }
   );
 };
-Spreadsheet.states = states201;
-Spreadsheet.options = options186;
+Spreadsheet.states = states207;
+Spreadsheet.options = options192;
 Spreadsheet.className = SPREADSHEET_CLASSNAME;
-Spreadsheet.defaultProps = defaultProps190;
+Spreadsheet.defaultProps = defaultProps196;
 
 // src/spreadsheet/templates/spreadsheet-normal.tsx
-var import_jsx_runtime783 = require("react/jsx-runtime");
-var SpreadsheetNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime783.jsx)(
+var import_jsx_runtime796 = require("react/jsx-runtime");
+var SpreadsheetNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime796.jsx)(
   Spreadsheet,
   {
     style: { width: "100%" },
-    children: /* @__PURE__ */ (0, import_jsx_runtime783.jsxs)(import_jsx_runtime783.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime783.jsx)(SpreadsheetHeader, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime783.jsx)(SpreadsheetActionBar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime783.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime796.jsxs)(import_jsx_runtime796.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime796.jsx)(SpreadsheetHeader, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime796.jsx)(SpreadsheetActionBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime796.jsx)(
         SpreadsheetView,
         {
-          selection: /* @__PURE__ */ (0, import_jsx_runtime783.jsx)("div", { className: "k-spreadsheet-selection k-single-selection", style: { width: "880px", height: "71px", top: "30px", left: "30px" } }),
+          selection: /* @__PURE__ */ (0, import_jsx_runtime796.jsx)("div", { className: "k-spreadsheet-selection k-single-selection", style: { width: "880px", height: "71px", top: "30px", left: "30px" } }),
           rowHeaderSelection: { 1: "partial" },
           columnHeaderSelection: { A: "partial", B: "partial", C: "partial", D: "partial", E: "partial", F: "partial", G: "partial" },
           activeCellIndex: 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime783.jsx)(SpreadsheetSheetsBar, {})
+      /* @__PURE__ */ (0, import_jsx_runtime796.jsx)(SpreadsheetSheetsBar, {})
     ] }),
     ...props
   }
 );
 
 // src/spreadsheet/tests/spreadsheet-sheets-bar.tsx
-var import_jsx_runtime784 = require("react/jsx-runtime");
+var import_jsx_runtime797 = require("react/jsx-runtime");
 var style = `
     #test-area {
         max-width: 1180px;
@@ -18878,40 +19098,40 @@ var style = `
         position: relative;
     }
 `;
-var spreadsheet_sheets_bar_default = () => /* @__PURE__ */ (0, import_jsx_runtime784.jsxs)(import_jsx_runtime784.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("style", { children: style }),
-  /* @__PURE__ */ (0, import_jsx_runtime784.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("span", { children: "Sheets Bar" }),
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(SpreadsheetNormal, { style: { width: "100%", height: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(SpreadsheetSheetsBar, { tabStripItems: /* @__PURE__ */ (0, import_jsx_runtime784.jsxs)(import_jsx_runtime784.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(TabStripItem, { first: true, value: "Sheet 1", children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(TabStripItem, { value: "Sheet 2", children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(TabStripItem, { active: true, value: "Sheet 3", children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(TabStripItem, { focus: true, value: "Sheet 4", children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(TabStripItem, { value: "Sheet 5", children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(TabStripItem, { last: true, disabled: true, value: "Sheet 6", children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) })
+var spreadsheet_sheets_bar_default = () => /* @__PURE__ */ (0, import_jsx_runtime797.jsxs)(import_jsx_runtime797.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("style", { children: style }),
+  /* @__PURE__ */ (0, import_jsx_runtime797.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("span", { children: "Sheets Bar" }),
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(SpreadsheetNormal, { style: { width: "100%", height: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(SpreadsheetSheetsBar, { tabStripItems: /* @__PURE__ */ (0, import_jsx_runtime797.jsxs)(import_jsx_runtime797.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(TabStripItem, { first: true, value: "Sheet 1", children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(TabStripItem, { value: "Sheet 2", children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(TabStripItem, { active: true, value: "Sheet 3", children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(TabStripItem, { focus: true, value: "Sheet 4", children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(TabStripItem, { value: "Sheet 5", children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(TabStripItem, { last: true, disabled: true, value: "Sheet 6", children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuButton, { size: "medium", showArrow: false, icon: "caret-alt-down", fillMode: "flat" }) })
     ] }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("span", { children: "Sheets Bar ContextMenu" }),
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(Popup, { id: "spreadsheet-context-menu-sheets", className: "k-menu-popup k-context-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime784.jsxs)(MenuList, { className: "k-context-menu", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuListItem, { text: "Delete", icon: "trash" }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuListItem, { text: "Duplicate", icon: "copy" }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuListItem, { text: "Rename", icon: "pencil" }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuListItem, { text: "Hide", icon: "eye-slash" }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuListItem, { text: "Move Right", icon: "arrow-right" }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(MenuListItem, { text: "Move Left", icon: "arrow-left" })
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("span", { children: "Sheets Bar ContextMenu" }),
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(Popup, { id: "spreadsheet-context-menu-sheets", className: "k-menu-popup k-context-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime797.jsxs)(MenuList, { className: "k-context-menu", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuListItem, { text: "Delete", icon: "trash" }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuListItem, { text: "Duplicate", icon: "copy" }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuListItem, { text: "Rename", icon: "pencil" }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuListItem, { text: "Hide", icon: "eye-slash" }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuListItem, { text: "Move Right", icon: "arrow-right" }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(MenuListItem, { text: "Move Left", icon: "arrow-left" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("span", { children: "Sheets Bar Rename" }),
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(WindowNormal, { title: "Rename Sheet", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "stretched", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime784.jsxs)(import_jsx_runtime784.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(Button, { themeColor: "primary", children: "Rename" }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(Button, { children: "Cancel" })
-    ] }), children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(FormNormal, { formButtons: null, children: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(FormField, { label: "Rename sheet", editor: /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(Textbox, { placeholder: "Sheet name" }) }) }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("span", { children: "Sheets Bar Delete" }),
-    /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime784.jsxs)(WindowNormal, { title: "Delete Sheet", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "stretched", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime784.jsxs)(import_jsx_runtime784.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(Button, { themeColor: "primary", children: "Delete" }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)(Button, { children: "Cancel" })
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("span", { children: "Sheets Bar Rename" }),
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(WindowNormal, { title: "Rename Sheet", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "stretched", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime797.jsxs)(import_jsx_runtime797.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(Button, { themeColor: "primary", children: "Rename" }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(Button, { children: "Cancel" })
+    ] }), children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(FormNormal, { formButtons: null, children: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(FormField, { label: "Rename sheet", editor: /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(Textbox, { placeholder: "Sheet name" }) }) }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("span", { children: "Sheets Bar Delete" }),
+    /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime797.jsxs)(WindowNormal, { title: "Delete Sheet", actions: ["x"], className: "k-spreadsheet-window", actionButtonsAlign: "stretched", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime797.jsxs)(import_jsx_runtime797.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(Button, { themeColor: "primary", children: "Delete" }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)(Button, { children: "Cancel" })
     ] }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("p", { children: "The deleted sheet data will be lost." }),
-      /* @__PURE__ */ (0, import_jsx_runtime784.jsx)("p", { children: "Are you sure you want to proceed?" })
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("p", { children: "The deleted sheet data will be lost." }),
+      /* @__PURE__ */ (0, import_jsx_runtime797.jsx)("p", { children: "Are you sure you want to proceed?" })
     ] }) })
   ] })
 ] });