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

package/dist/esm/editor/tests/editor-find-replace.mjs

@@ -9484,10 +9484,139 @@ import { Fragment as Fragment71, jsx as jsx205, jsxs as jsxs87 } from "react/jsx
 // src/calendar/templates/calendar-infinite-week-number.tsx
 import { Fragment as Fragment72, jsx as jsx206, jsxs as jsxs88 } from "react/jsx-runtime";
 
+// src/multiviewcalendar/multiviewcalendar.spec.tsx
+import { jsx as jsx207 } from "react/jsx-runtime";
+var MULTIVIEWCALENDAR_CLASSNAME = `k-calendar-range`;
+var states69 = [];
+var options67 = {
+  size: [Size.small, Size.medium, Size.large]
+};
+var defaultProps68 = {
+  size: Size.medium,
+  calendarHeaderText: "October 2021 - November 2021",
+  viewsCount: 2,
+  orientation: "horizontal",
+  calendarView: "month"
+};
+var MultiViewCalendar = (props) => {
+  const {
+    size = defaultProps68.size,
+    orientation = defaultProps68.orientation,
+    calendarView = defaultProps68.calendarView,
+    calendarHeaderText = defaultProps68.calendarHeaderText,
+    viewsCount = defaultProps68.viewsCount,
+    showCalendarFooter,
+    showWeek,
+    dir,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx207(
+    Calendar,
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        MULTIVIEWCALENDAR_CLASSNAME
+      ),
+      size,
+      calendarHeaderText,
+      calendarView,
+      viewsCount,
+      orientation,
+      showCalendarFooter,
+      showWeek,
+      dir
+    }
+  );
+};
+MultiViewCalendar.states = states69;
+MultiViewCalendar.options = options67;
+MultiViewCalendar.className = MULTIVIEWCALENDAR_CLASSNAME;
+MultiViewCalendar.defaultProps = defaultProps68;
+
+// src/multiviewcalendar/templates/multiviewcalendar-century.tsx
+import { Fragment as Fragment73, jsx as jsx208, jsxs as jsxs89 } from "react/jsx-runtime";
+
+// src/multiviewcalendar/templates/multiviewcalendar-decade.tsx
+import { Fragment as Fragment74, jsx as jsx209, jsxs as jsxs90 } from "react/jsx-runtime";
+
+// src/multiviewcalendar/templates/multiviewcalendar-normal.tsx
+import { Fragment as Fragment75, jsx as jsx210, jsxs as jsxs91 } from "react/jsx-runtime";
+var MultiViewCalendarNormal = ({ showOtherMonth, ...props }) => /* @__PURE__ */ jsx210(
+  MultiViewCalendar,
+  {
+    calendarView: "month",
+    showTableHead: true,
+    children: /* @__PURE__ */ jsxs91(Fragment75, { children: [
+      /* @__PURE__ */ jsxs91(CalendarTableRow, { children: [
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "30", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "1" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "2" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "3" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "4" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "5" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "6", weekend: true })
+      ] }),
+      /* @__PURE__ */ jsxs91(CalendarTableRow, { children: [
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "7", weekend: true }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "8" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "9" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "10" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "11" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "12" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "13", weekend: true })
+      ] }),
+      /* @__PURE__ */ jsxs91(CalendarTableRow, { children: [
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "14", weekend: true }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "15" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "16", today: true }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "17" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "18" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "19" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "20", weekend: true })
+      ] }),
+      /* @__PURE__ */ jsxs91(CalendarTableRow, { children: [
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "21", weekend: true }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "22" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "23" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "24" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "25" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "26" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "27", weekend: true })
+      ] }),
+      /* @__PURE__ */ jsxs91(CalendarTableRow, { children: [
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "28", weekend: true }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "29" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "30" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "31" }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "1", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "2", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "3", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
+      ] }),
+      /* @__PURE__ */ jsxs91(CalendarTableRow, { children: [
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "4", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "5", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "6", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "7", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "8", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "9", showOtherMonth, empty: !showOtherMonth }),
+        /* @__PURE__ */ jsx210(CalendarCell, { text: "10", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
+      ] })
+    ] }),
+    ...props
+  }
+);
+
+// src/multiviewcalendar/templates/multiviewcalendar-with-weeks.tsx
+import { Fragment as Fragment76, jsx as jsx211, jsxs as jsxs92 } from "react/jsx-runtime";
+
+// src/multiviewcalendar/templates/multiviewcalendar-year.tsx
+import { Fragment as Fragment77, jsx as jsx212, jsxs as jsxs93 } from "react/jsx-runtime";
+
 // src/dateinput/dateinput.spec.tsx
-import { jsx as jsx207, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx213, jsxs as jsxs94 } from "react/jsx-runtime";
 var DATEINPUT_CLASSNAME = `k-dateinput`;
-var states69 = [
+var states70 = [
   States.hover,
   States.focus,
   States.valid,
@@ -9497,12 +9626,12 @@ var states69 = [
   States.loading,
   States.readonly
 ];
-var options67 = {
+var options68 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps68 = {
+var defaultProps69 = {
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
@@ -9525,7 +9654,7 @@ var DateInput = (props) => {
     showSpinButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs89(
+  return /* @__PURE__ */ jsxs94(
     Input,
     {
       ...other,
@@ -9542,8 +9671,8 @@ var DateInput = (props) => {
       readonly,
       className: classNames(props.className, DATEINPUT_CLASSNAME),
       children: [
-        /* @__PURE__ */ jsx207(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx207(
+        /* @__PURE__ */ jsx213(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx213(
           InputValidationIcon,
           {
             valid,
@@ -9552,14 +9681,14 @@ var DateInput = (props) => {
             disabled
           }
         ),
-        /* @__PURE__ */ jsx207(
+        /* @__PURE__ */ jsx213(
           InputLoadingIcon,
           {
             loading,
             disabled
           }
         ),
-        showSpinButton && /* @__PURE__ */ jsx207(
+        showSpinButton && /* @__PURE__ */ jsx213(
           SpinButton,
           {
             className: "k-input-spinner",
@@ -9571,18 +9700,18 @@ var DateInput = (props) => {
     }
   );
 };
-DateInput.states = states69;
-DateInput.options = options67;
+DateInput.states = states70;
+DateInput.options = options68;
 DateInput.className = DATEINPUT_CLASSNAME;
-DateInput.defaultProps = defaultProps68;
+DateInput.defaultProps = defaultProps69;
 
 // src/dateinput/templates/dateinput-normal.tsx
-import { jsx as jsx208 } from "react/jsx-runtime";
+import { jsx as jsx214 } from "react/jsx-runtime";
 
 // src/datepicker/datepicker.spec.tsx
-import { Fragment as Fragment73, jsx as jsx209, jsxs as jsxs90 } from "react/jsx-runtime";
+import { Fragment as Fragment78, jsx as jsx215, jsxs as jsxs95 } from "react/jsx-runtime";
 var DATEPICKER_CLASSNAME = `k-datepicker`;
-var states70 = [
+var states71 = [
   States.hover,
   States.focus,
   States.valid,
@@ -9592,12 +9721,12 @@ var states70 = [
   States.loading,
   States.readonly
 ];
-var options68 = {
+var options69 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps69 = {
+var defaultProps70 = {
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
@@ -9625,8 +9754,8 @@ var DatePicker = (props) => {
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs90(Fragment73, { children: [
-    /* @__PURE__ */ jsxs90(
+  return /* @__PURE__ */ jsxs95(Fragment78, { children: [
+    /* @__PURE__ */ jsxs95(
       Input,
       {
         ...other,
@@ -9644,9 +9773,9 @@ var DatePicker = (props) => {
         readonly,
         className: classNames(props.className, DATEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx209(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx209(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ jsx209(
+          /* @__PURE__ */ jsx215(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx215(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ jsx215(
             InputValidationIcon,
             {
               valid,
@@ -9655,14 +9784,14 @@ var DatePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx209(
+          /* @__PURE__ */ jsx215(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx209(
+          /* @__PURE__ */ jsx215(
             InputClearValue,
             {
               loading,
@@ -9671,8 +9800,8 @@ var DatePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ jsx209(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx209(
+          /* @__PURE__ */ jsx215(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx215(
             Button,
             {
               className: "k-input-button",
@@ -9685,9 +9814,9 @@ var DatePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsx209(Popup, { className: "k-calendar-container k-datepicker-popup", children: /* @__PURE__ */ jsx209(CalendarNormal, { dir }) }),
-    adaptive && /* @__PURE__ */ jsxs90(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx209(
+    opened && /* @__PURE__ */ jsx215(Popup, { className: "k-calendar-container k-datepicker-popup", children: /* @__PURE__ */ jsx215(CalendarNormal, { dir }) }),
+    adaptive && /* @__PURE__ */ jsxs95(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx215(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -9695,37 +9824,37 @@ var DatePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx209(CalendarNormal, { size: "large" })
+      /* @__PURE__ */ jsx215(CalendarNormal, { size: "large" })
     ] })
   ] });
 };
-DatePicker.states = states70;
-DatePicker.options = options68;
+DatePicker.states = states71;
+DatePicker.options = options69;
 DatePicker.className = DATEPICKER_CLASSNAME;
-DatePicker.defaultProps = defaultProps69;
+DatePicker.defaultProps = defaultProps70;
 
 // src/datepicker/templates/datepicker-normal.tsx
-import { jsx as jsx210 } from "react/jsx-runtime";
+import { jsx as jsx216 } from "react/jsx-runtime";
 
 // src/datepicker/templates/datepicker-popup.tsx
-import { jsx as jsx211 } from "react/jsx-runtime";
+import { jsx as jsx217 } from "react/jsx-runtime";
 
 // src/datepicker/templates/datepicker-adaptive.tsx
-import { jsx as jsx212 } from "react/jsx-runtime";
+import { jsx as jsx218 } from "react/jsx-runtime";
 
 // src/time-selector/time-selector.spec.tsx
-import { Fragment as Fragment74, jsx as jsx213, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment79, jsx as jsx219, jsxs as jsxs96 } from "react/jsx-runtime";
 var TIMESELECTOR_CLASSNAME = `k-timeselector`;
-var states71 = [];
-var options69 = {
+var states72 = [];
+var options70 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps70 = {
+var defaultProps71 = {
   size: Size.medium
 };
 var TimeSelector = (props) => {
   const {
-    size = defaultProps70.size,
+    size = defaultProps71.size,
     header,
     fastSelection,
     columns,
@@ -9741,9 +9870,9 @@ var TimeSelector = (props) => {
     if (index === 0 || columnType === "tt") {
       separator = false;
     }
-    return /* @__PURE__ */ jsx213(Fragment74, { children: /* @__PURE__ */ jsx213(TimeSelectorColumn, { type: columnType, focus, separator }) });
+    return /* @__PURE__ */ jsx219(Fragment79, { children: /* @__PURE__ */ jsx219(TimeSelectorColumn, { type: columnType, focus, separator }) });
   });
-  return /* @__PURE__ */ jsxs91(
+  return /* @__PURE__ */ jsxs96(
     "div",
     {
       ...other,
@@ -9755,24 +9884,24 @@ var TimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ jsx213(Fragment74, { children: header }),
-        /* @__PURE__ */ jsx213(Fragment74, { children: fastSelection }),
-        /* @__PURE__ */ jsxs91("div", { className: "k-time-list-container", children: [
-          /* @__PURE__ */ jsx213("span", { className: "k-time-highlight" }),
+        /* @__PURE__ */ jsx219(Fragment79, { children: header }),
+        /* @__PURE__ */ jsx219(Fragment79, { children: fastSelection }),
+        /* @__PURE__ */ jsxs96("div", { className: "k-time-list-container", children: [
+          /* @__PURE__ */ jsx219("span", { className: "k-time-highlight" }),
           columnsDom
         ] })
       ]
     }
   );
 };
-TimeSelector.states = states71;
-TimeSelector.options = options69;
+TimeSelector.states = states72;
+TimeSelector.options = options70;
 TimeSelector.className = TIMESELECTOR_CLASSNAME;
-TimeSelector.defaultProps = defaultProps70;
+TimeSelector.defaultProps = defaultProps71;
 
 // src/time-selector/time-selector-column.tsx
-import { Fragment as Fragment75, jsx as jsx214, jsxs as jsxs92 } from "react/jsx-runtime";
-var states72 = [
+import { Fragment as Fragment80, jsx as jsx220, jsxs as jsxs97 } from "react/jsx-runtime";
+var states73 = [
   States.focus
 ];
 var TimeSelectorColumn = (props) => {
@@ -9810,11 +9939,11 @@ var TimeSelectorColumn = (props) => {
       break;
   }
   const items = columnData.map(
-    (data2) => /* @__PURE__ */ jsx214(Fragment75, { children: /* @__PURE__ */ jsx214("li", { className: "k-item", children: /* @__PURE__ */ jsx214("span", { children: data2 }) }) })
+    (data2) => /* @__PURE__ */ jsx220(Fragment80, { children: /* @__PURE__ */ jsx220("li", { className: "k-item", children: /* @__PURE__ */ jsx220("span", { children: data2 }) }) })
   );
-  return /* @__PURE__ */ jsxs92(Fragment75, { children: [
-    separator && /* @__PURE__ */ jsx214("div", { className: "k-time-separator", children: ":" }),
-    /* @__PURE__ */ jsxs92(
+  return /* @__PURE__ */ jsxs97(Fragment80, { children: [
+    separator && /* @__PURE__ */ jsx220("div", { className: "k-time-separator", children: ":" }),
+    /* @__PURE__ */ jsxs97(
       "div",
       {
         ...other,
@@ -9826,10 +9955,10 @@ var TimeSelectorColumn = (props) => {
           })
         ),
         children: [
-          /* @__PURE__ */ jsx214("span", { className: "k-title", children: text }),
-          /* @__PURE__ */ jsx214("div", { className: "k-time-list", children: /* @__PURE__ */ jsxs92("div", { className: "k-content k-scrollable k-time-container", children: [
-            /* @__PURE__ */ jsx214("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
-            /* @__PURE__ */ jsx214("div", { className: "k-scrollable-placeholder" })
+          /* @__PURE__ */ jsx220("span", { className: "k-title", children: text }),
+          /* @__PURE__ */ jsx220("div", { className: "k-time-list", children: /* @__PURE__ */ jsxs97("div", { className: "k-content k-scrollable k-time-container", children: [
+            /* @__PURE__ */ jsx220("ul", { className: "k-reset", style: { transform: "translateY(97px)" }, children: items }),
+            /* @__PURE__ */ jsx220("div", { className: "k-scrollable-placeholder" })
           ] }) })
         ]
       }
@@ -9838,14 +9967,14 @@ var TimeSelectorColumn = (props) => {
 };
 
 // src/time-selector/time-selector-header.tsx
-import { jsx as jsx215, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx221, jsxs as jsxs98 } from "react/jsx-runtime";
 var className19 = `k-time-header`;
 var TimeSelectorHeader = (props) => {
   const {
     title,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs93(
+  return /* @__PURE__ */ jsxs98(
     "div",
     {
       ...other,
@@ -9854,7 +9983,7 @@ var TimeSelectorHeader = (props) => {
         className19
       ),
       children: [
-        title != null && /* @__PURE__ */ jsx215("span", { className: "k-title", children: title }),
+        title != null && /* @__PURE__ */ jsx221("span", { className: "k-title", children: title }),
         props.children
       ]
     }
@@ -9862,13 +9991,13 @@ var TimeSelectorHeader = (props) => {
 };
 
 // src/time-selector/time-selector-fast-selection.tsx
-import { jsx as jsx216, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs99 } from "react/jsx-runtime";
 var className20 = `k-time-fast-selection`;
 var TimeSelectorFastSelection = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs94(
+  return /* @__PURE__ */ jsxs99(
     ActionButtons,
     {
       ...other,
@@ -9878,27 +10007,27 @@ var TimeSelectorFastSelection = (props) => {
         className20
       ),
       children: [
-        /* @__PURE__ */ jsx216(Button, { children: "1 d" }),
-        /* @__PURE__ */ jsx216(Button, { children: "1 h" }),
-        /* @__PURE__ */ jsx216(Button, { children: "15 m" })
+        /* @__PURE__ */ jsx222(Button, { children: "1 d" }),
+        /* @__PURE__ */ jsx222(Button, { children: "1 h" }),
+        /* @__PURE__ */ jsx222(Button, { children: "15 m" })
       ]
     }
   );
 };
 
 // src/time-selector/templates/time-selector-all.tsx
-import { jsx as jsx217, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx223, jsxs as jsxs100 } from "react/jsx-runtime";
 
 // src/time-selector/templates/time-selector-hour.tsx
-import { jsx as jsx218, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx224, jsxs as jsxs101 } from "react/jsx-runtime";
 
 // src/time-selector/templates/time-selector-minute.tsx
-import { jsx as jsx219, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx225, jsxs as jsxs102 } from "react/jsx-runtime";
 
 // src/timepicker/timepicker.spec.tsx
-import { Fragment as Fragment76, jsx as jsx220, jsxs as jsxs98 } from "react/jsx-runtime";
+import { Fragment as Fragment81, jsx as jsx226, jsxs as jsxs103 } from "react/jsx-runtime";
 var TIMEPICKER_CLASSNAME = `k-timepicker`;
-var states73 = [
+var states74 = [
   States.hover,
   States.focus,
   States.valid,
@@ -9908,12 +10037,12 @@ var states73 = [
   States.loading,
   States.readonly
 ];
-var options70 = {
+var options71 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps71 = {
+var defaultProps72 = {
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode
@@ -9940,8 +10069,8 @@ var TimePicker = (props) => {
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs98(Fragment76, { children: [
-    /* @__PURE__ */ jsxs98(
+  return /* @__PURE__ */ jsxs103(Fragment81, { children: [
+    /* @__PURE__ */ jsxs103(
       Input,
       {
         ...other,
@@ -9958,9 +10087,9 @@ var TimePicker = (props) => {
         readonly,
         className: classNames(props.className, TIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx220(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx220(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx226(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx226(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ jsx226(
             InputValidationIcon,
             {
               valid,
@@ -9969,14 +10098,14 @@ var TimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx226(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx226(
             InputClearValue,
             {
               loading,
@@ -9985,8 +10114,8 @@ var TimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ jsx220(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx220(
+          /* @__PURE__ */ jsx226(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx226(
             Button,
             {
               className: "k-input-button",
@@ -9999,15 +10128,15 @@ var TimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsxs98(Popup, { className: "k-list-container k-timepicker-popup", children: [
-      /* @__PURE__ */ jsx220(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx220(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx220(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ jsxs98(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
-        /* @__PURE__ */ jsx220(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
-        /* @__PURE__ */ jsx220(Button, { className: "k-time-cancel", children: "Cancel" })
+    opened && /* @__PURE__ */ jsxs103(Popup, { className: "k-list-container k-timepicker-popup", children: [
+      /* @__PURE__ */ jsx226(TimeSelector, { columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx226(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx226(Button, { fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ jsxs103(ActionButtons, { alignment: "stretched", className: "k-time-footer", children: [
+        /* @__PURE__ */ jsx226(Button, { themeColor: "primary", className: "k-time-accept", children: "Set" }),
+        /* @__PURE__ */ jsx226(Button, { className: "k-time-cancel", children: "Cancel" })
       ] })
     ] }),
-    adaptive && /* @__PURE__ */ jsxs98(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx220(
+    adaptive && /* @__PURE__ */ jsxs103(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx226(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -10015,46 +10144,46 @@ var TimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx220(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ jsx220(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ jsx220(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
-      /* @__PURE__ */ jsx220(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
+      /* @__PURE__ */ jsx226(TimeSelector, { size: "large", columns: ["HH", "mm", "ss", "tt"], focusedColumn: "HH", header: /* @__PURE__ */ jsx226(TimeSelectorHeader, { title: "10:00:00 \u0410\u041C", children: /* @__PURE__ */ jsx226(Button, { size: "large", fillMode: "flat", className: "k-time-now", children: "Now" }) }) }),
+      /* @__PURE__ */ jsx226(ActionSheetFooter, { actions: ["Cancel", "!Set time"] })
     ] })
   ] });
 };
-TimePicker.states = states73;
-TimePicker.options = options70;
+TimePicker.states = states74;
+TimePicker.options = options71;
 TimePicker.className = TIMEPICKER_CLASSNAME;
-TimePicker.defaultProps = defaultProps71;
+TimePicker.defaultProps = defaultProps72;
 
 // src/timepicker/templates/timepicker-normal.tsx
-import { jsx as jsx221 } from "react/jsx-runtime";
+import { jsx as jsx227 } from "react/jsx-runtime";
 
 // src/timepicker/templates/timepicker-popup.tsx
-import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx228 } from "react/jsx-runtime";
 
 // src/timepicker/templates/timepicker-adaptive.tsx
-import { jsx as jsx223 } from "react/jsx-runtime";
+import { jsx as jsx229 } from "react/jsx-runtime";
 
 // src/datetime-selector/datetime-selector.spec.tsx
-import { Fragment as Fragment77, jsx as jsx224, jsxs as jsxs99 } from "react/jsx-runtime";
+import { Fragment as Fragment82, jsx as jsx230, jsxs as jsxs104 } from "react/jsx-runtime";
 var DATETIMESELECTOR_CLASSNAME = `k-datetime-wrap`;
-var states74 = [];
-var options71 = {
+var states75 = [];
+var options72 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps72 = {
+var defaultProps73 = {
   tab: "date",
   size: Size.medium,
   actionButtons: true
 };
 var DateTimeSelector = (props) => {
   const {
-    size = defaultProps72.size,
-    tab = defaultProps72.tab,
-    actionButtons = defaultProps72.actionButtons,
+    size = defaultProps73.size,
+    tab = defaultProps73.tab,
+    actionButtons = defaultProps73.actionButtons,
     dir,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsxs104(
     "div",
     {
       ...other,
@@ -10070,34 +10199,34 @@ var DateTimeSelector = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ jsx224("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ jsxs99(ButtonGroup, { stretched: true, children: [
-          /* @__PURE__ */ jsx224(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
-          /* @__PURE__ */ jsx224(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
+        /* @__PURE__ */ jsx230("div", { className: "k-datetime-buttongroup", children: /* @__PURE__ */ jsxs104(ButtonGroup, { stretched: true, children: [
+          /* @__PURE__ */ jsx230(Button, { className: "k-group-start", size, selected: tab === "date", children: "Date" }),
+          /* @__PURE__ */ jsx230(Button, { className: "k-group-end", size, selected: tab === "time", children: "Time" })
         ] }) }),
-        /* @__PURE__ */ jsx224("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ jsxs99(Fragment77, { children: [
-          /* @__PURE__ */ jsx224("div", { className: "k-datetime-calendar-wrap" }),
-          /* @__PURE__ */ jsx224("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ jsx224(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx224(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx224(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
-        ] }) : /* @__PURE__ */ jsxs99(Fragment77, { children: [
-          /* @__PURE__ */ jsx224("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ jsx224(CalendarNormal, { size, showOtherMonth: true, dir }) }),
-          /* @__PURE__ */ jsx224("div", { className: "k-datetime-time-wrap" })
+        /* @__PURE__ */ jsx230("div", { className: "k-datetime-selector", children: tab === "time" ? /* @__PURE__ */ jsxs104(Fragment82, { children: [
+          /* @__PURE__ */ jsx230("div", { className: "k-datetime-calendar-wrap" }),
+          /* @__PURE__ */ jsx230("div", { className: "k-datetime-time-wrap", children: /* @__PURE__ */ jsx230(TimeSelector, { size, columns: ["HH", "mm", "ss", "tt"], focusedColumn: "mm", header: /* @__PURE__ */ jsx230(TimeSelectorHeader, { title: "10:00:00 AM", children: /* @__PURE__ */ jsx230(Button, { size, fillMode: "flat", className: "k-time-now", children: "Now" }) }) }) })
+        ] }) : /* @__PURE__ */ jsxs104(Fragment82, { children: [
+          /* @__PURE__ */ jsx230("div", { className: "k-datetime-calendar-wrap", children: /* @__PURE__ */ jsx230(CalendarNormal, { size, showOtherMonth: true, dir }) }),
+          /* @__PURE__ */ jsx230("div", { className: "k-datetime-time-wrap" })
         ] }) }),
-        actionButtons && /* @__PURE__ */ jsxs99(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
-          /* @__PURE__ */ jsx224(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
-          /* @__PURE__ */ jsx224(Button, { size, className: "k-time-cancel", children: "Cancel" })
+        actionButtons && /* @__PURE__ */ jsxs104(ActionButtons, { className: "k-datetime-footer", alignment: "stretched", children: [
+          /* @__PURE__ */ jsx230(Button, { size, themeColor: "primary", className: "k-time-accept", children: "Set" }),
+          /* @__PURE__ */ jsx230(Button, { size, className: "k-time-cancel", children: "Cancel" })
         ] })
       ]
     }
   );
 };
-DateTimeSelector.states = states74;
-DateTimeSelector.options = options71;
+DateTimeSelector.states = states75;
+DateTimeSelector.options = options72;
 DateTimeSelector.className = DATETIMESELECTOR_CLASSNAME;
-DateTimeSelector.defaultProps = defaultProps72;
+DateTimeSelector.defaultProps = defaultProps73;
 
 // src/datetimepicker/datetimepicker.spec.tsx
-import { Fragment as Fragment78, jsx as jsx225, jsxs as jsxs100 } from "react/jsx-runtime";
+import { Fragment as Fragment83, jsx as jsx231, jsxs as jsxs105 } from "react/jsx-runtime";
 var DATETIMEPICKER_CLASSNAME = `k-datetimepicker`;
-var states75 = [
+var states76 = [
   States.hover,
   States.focus,
   States.valid,
@@ -10107,12 +10236,12 @@ var states75 = [
   States.loading,
   States.readonly
 ];
-var options72 = {
+var options73 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps73 = {
+var defaultProps74 = {
   tab: "date",
   size: Input.defaultProps.size,
   rounded: Input.defaultProps.rounded,
@@ -10136,14 +10265,14 @@ var DateTimePicker = (props) => {
     disabled,
     readonly,
     opened,
-    tab = defaultProps73.tab,
+    tab = defaultProps74.tab,
     dir,
     adaptive,
     adaptiveSettings,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs100(Fragment78, { children: [
-    /* @__PURE__ */ jsxs100(
+  return /* @__PURE__ */ jsxs105(Fragment83, { children: [
+    /* @__PURE__ */ jsxs105(
       Input,
       {
         ...other,
@@ -10161,9 +10290,9 @@ var DateTimePicker = (props) => {
         readonly,
         className: classNames(props.className, DATETIMEPICKER_CLASSNAME),
         children: [
-          /* @__PURE__ */ jsx225(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ jsx225(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ jsx225(
+          /* @__PURE__ */ jsx231(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ jsx231(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ jsx231(
             InputValidationIcon,
             {
               valid,
@@ -10172,14 +10301,14 @@ var DateTimePicker = (props) => {
               disabled
             }
           ),
-          /* @__PURE__ */ jsx225(
+          /* @__PURE__ */ jsx231(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          /* @__PURE__ */ jsx225(
+          /* @__PURE__ */ jsx231(
             InputClearValue,
             {
               loading,
@@ -10188,8 +10317,8 @@ var DateTimePicker = (props) => {
               value
             }
           ),
-          /* @__PURE__ */ jsx225(InputSuffix, { children: suffix }),
-          /* @__PURE__ */ jsx225(
+          /* @__PURE__ */ jsx231(InputSuffix, { children: suffix }),
+          /* @__PURE__ */ jsx231(
             Button,
             {
               className: "k-input-button",
@@ -10202,9 +10331,9 @@ var DateTimePicker = (props) => {
         ]
       }
     ),
-    opened && /* @__PURE__ */ jsx225(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ jsx225(DateTimeSelector, { tab, dir }) }),
-    adaptive && /* @__PURE__ */ jsxs100(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
-      /* @__PURE__ */ jsx225(
+    opened && /* @__PURE__ */ jsx231(Popup, { className: `k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`, dir, children: /* @__PURE__ */ jsx231(DateTimeSelector, { tab, dir }) }),
+    adaptive && /* @__PURE__ */ jsxs105(ActionSheet, { adaptive: true, ...adaptiveSettings, children: [
+      /* @__PURE__ */ jsx231(
         ActionSheetHeader,
         {
           actions: ["x"],
@@ -10212,153 +10341,24 @@ var DateTimePicker = (props) => {
           subTitle: "DD / MM / YY"
         }
       ),
-      /* @__PURE__ */ jsx225(DateTimeSelector, { size: "large", tab, actionButtons: false }),
-      /* @__PURE__ */ jsx225(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
+      /* @__PURE__ */ jsx231(DateTimeSelector, { size: "large", tab, actionButtons: false }),
+      /* @__PURE__ */ jsx231(ActionSheetFooter, { actions: ["Cancel", "!Set"] })
     ] })
   ] });
 };
-DateTimePicker.states = states75;
-DateTimePicker.options = options72;
+DateTimePicker.states = states76;
+DateTimePicker.options = options73;
 DateTimePicker.className = DATETIMEPICKER_CLASSNAME;
-DateTimePicker.defaultProps = defaultProps73;
+DateTimePicker.defaultProps = defaultProps74;
 
 // src/datetimepicker/templates/datetimepicker-normal.tsx
-import { jsx as jsx226 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
 
 // src/datetimepicker/templates/datetimepicker-popup.tsx
-import { jsx as jsx227 } from "react/jsx-runtime";
+import { jsx as jsx233 } from "react/jsx-runtime";
 
 // src/datetimepicker/templates/datetimepicker-adaptive.tsx
-import { jsx as jsx228 } from "react/jsx-runtime";
-
-// src/multiviewcalendar/multiviewcalendar.spec.tsx
-import { jsx as jsx229 } from "react/jsx-runtime";
-var MULTIVIEWCALENDAR_CLASSNAME = `k-calendar-range`;
-var states76 = [];
-var options73 = {
-  size: [Size.small, Size.medium, Size.large]
-};
-var defaultProps74 = {
-  size: Size.medium,
-  calendarHeaderText: "October 2021 - November 2021",
-  viewsCount: 2,
-  orientation: "horizontal",
-  calendarView: "month"
-};
-var MultiViewCalendar = (props) => {
-  const {
-    size = defaultProps74.size,
-    orientation = defaultProps74.orientation,
-    calendarView = defaultProps74.calendarView,
-    calendarHeaderText = defaultProps74.calendarHeaderText,
-    viewsCount = defaultProps74.viewsCount,
-    showCalendarFooter,
-    showWeek,
-    dir,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx229(
-    Calendar,
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        MULTIVIEWCALENDAR_CLASSNAME
-      ),
-      size,
-      calendarHeaderText,
-      calendarView,
-      viewsCount,
-      orientation,
-      showCalendarFooter,
-      showWeek,
-      dir
-    }
-  );
-};
-MultiViewCalendar.states = states76;
-MultiViewCalendar.options = options73;
-MultiViewCalendar.className = MULTIVIEWCALENDAR_CLASSNAME;
-MultiViewCalendar.defaultProps = defaultProps74;
-
-// src/multiviewcalendar/templates/multiviewcalendar-century.tsx
-import { Fragment as Fragment79, jsx as jsx230, jsxs as jsxs101 } from "react/jsx-runtime";
-
-// src/multiviewcalendar/templates/multiviewcalendar-decade.tsx
-import { Fragment as Fragment80, jsx as jsx231, jsxs as jsxs102 } from "react/jsx-runtime";
-
-// src/multiviewcalendar/templates/multiviewcalendar-normal.tsx
-import { Fragment as Fragment81, jsx as jsx232, jsxs as jsxs103 } from "react/jsx-runtime";
-var MultiViewCalendarNormal = ({ showOtherMonth, ...props }) => /* @__PURE__ */ jsx232(
-  MultiViewCalendar,
-  {
-    calendarView: "month",
-    showTableHead: true,
-    children: /* @__PURE__ */ jsxs103(Fragment81, { children: [
-      /* @__PURE__ */ jsxs103(CalendarTableRow, { children: [
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "30", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "1" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "2" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "3" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "4" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "5" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "6", weekend: true })
-      ] }),
-      /* @__PURE__ */ jsxs103(CalendarTableRow, { children: [
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "7", weekend: true }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "8" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "9" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "10" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "11" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "12" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "13", weekend: true })
-      ] }),
-      /* @__PURE__ */ jsxs103(CalendarTableRow, { children: [
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "14", weekend: true }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "15" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "16", today: true }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "17" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "18" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "19" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "20", weekend: true })
-      ] }),
-      /* @__PURE__ */ jsxs103(CalendarTableRow, { children: [
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "21", weekend: true }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "22" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "23" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "24" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "25" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "26" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "27", weekend: true })
-      ] }),
-      /* @__PURE__ */ jsxs103(CalendarTableRow, { children: [
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "28", weekend: true }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "29" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "30" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "31" }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "1", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "2", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "3", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
-      ] }),
-      /* @__PURE__ */ jsxs103(CalendarTableRow, { children: [
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "4", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "5", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "6", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "7", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "8", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "9", showOtherMonth, empty: !showOtherMonth }),
-        /* @__PURE__ */ jsx232(CalendarCell, { text: "10", showOtherMonth, empty: !showOtherMonth, weekend: showOtherMonth })
-      ] })
-    ] }),
-    ...props
-  }
-);
-
-// src/multiviewcalendar/templates/multiviewcalendar-with-weeks.tsx
-import { Fragment as Fragment82, jsx as jsx233, jsxs as jsxs104 } from "react/jsx-runtime";
-
-// src/multiviewcalendar/templates/multiviewcalendar-year.tsx
-import { Fragment as Fragment83, jsx as jsx234, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx234 } from "react/jsx-runtime";
 
 // src/daterangepicker/daterangepicker.spec.tsx
 import { Fragment as Fragment84, jsx as jsx235, jsxs as jsxs106 } from "react/jsx-runtime";
@@ -18043,676 +18043,896 @@ Signature.options = options185;
 Signature.className = SIGNATURE_CLASSNAME;
 Signature.defaultProps = defaultProps189;
 
-// src/utils/templates/background/background-clip/border-clip.tsx
+// src/gantt/gantt.spec.tsx
+import { jsxs as jsxs262 } from "react/jsx-runtime";
+var GANTT_CLASSNAME = "k-gantt";
+var states200 = [];
+var options186 = {};
+var defaultProps190 = {};
+var Gantt = (props) => {
+  const {
+    headerToolbar,
+    footerToolbar,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs262(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTT_CLASSNAME
+      ),
+      children: [
+        headerToolbar,
+        props.children,
+        footerToolbar
+      ]
+    }
+  );
+};
+Gantt.states = states200;
+Gantt.options = options186;
+Gantt.className = GANTT_CLASSNAME;
+Gantt.defaultProps = defaultProps190;
+
+// src/gantt/gantt-header-toolbar.spec.tsx
 import { jsx as jsx557 } from "react/jsx-runtime";
 
-// src/utils/templates/background/background-clip/content-clip.tsx
+// src/gantt/gantt-footer-toolbar.spec.tsx
 import { jsx as jsx558 } from "react/jsx-runtime";
 
-// src/utils/templates/background/background-clip/padding-clip.tsx
+// src/gantt/gantt-content.spec.tsx
 import { jsx as jsx559 } from "react/jsx-runtime";
 
-// src/utils/templates/background/background-clip/text-clip.tsx
+// src/gantt/gantt-tables-wrapper.spec.tsx
 import { jsx as jsx560 } from "react/jsx-runtime";
 
+// src/gantt/gantt-columns-table.spec.tsx
+import { jsx as jsx561 } from "react/jsx-runtime";
+
+// src/gantt/gantt-rows-table.spec.tsx
+import { jsx as jsx562 } from "react/jsx-runtime";
+
+// src/gantt/gantt-tasks-table.spec.tsx
+import { jsx as jsx563 } from "react/jsx-runtime";
+
+// src/gantt/gantt-task.spec.tsx
+import { jsx as jsx564 } from "react/jsx-runtime";
+var GANTTTASK_CLASSNAME = "k-task";
+var states201 = [];
+var options187 = {};
+var defaultProps191 = {
+  type: "single"
+};
+var GanttTask = (props) => {
+  const {
+    type = defaultProps191.type,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx564(
+    "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 = states201;
+GanttTask.options = options187;
+GanttTask.className = GANTTTASK_CLASSNAME;
+GanttTask.defaultProps = defaultProps191;
+
+// src/gantt/gantt-task-wrap.spec.tsx
+import { jsx as jsx565 } from "react/jsx-runtime";
+var GANTTTASKWRAP_CLASSNAME = "k-task-wrap";
+var states202 = [];
+var options188 = {};
+var defaultProps192 = {
+  type: "single"
+};
+var GanttTaskWrap = (props) => {
+  const {
+    type = defaultProps192.type,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx565(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTTASKWRAP_CLASSNAME,
+        {
+          [`k-milestone-wrap`]: type === "milestone",
+          [`k-summary-wrap`]: type === "summary"
+        }
+      )
+    }
+  );
+};
+GanttTaskWrap.states = states202;
+GanttTaskWrap.options = options188;
+GanttTaskWrap.className = GANTTTASKWRAP_CLASSNAME;
+GanttTaskWrap.defaultProps = defaultProps192;
+
+// src/gantt/gantt-task-dot.spec.tsx
+import { jsx as jsx566 } from "react/jsx-runtime";
+var GANTTTASKWDOT_CLASSNAME = "k-task-dot";
+var states203 = [];
+var options189 = {};
+var defaultProps193 = {
+  position: "start"
+};
+var GanttTaskDot = (props) => {
+  const {
+    position = defaultProps193.position,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx566(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTTASKWDOT_CLASSNAME,
+        {
+          [`k-task-start`]: position === "start",
+          [`k-task-end`]: position === "end"
+        }
+      )
+    }
+  );
+};
+GanttTaskDot.states = states203;
+GanttTaskDot.options = options189;
+GanttTaskDot.className = GANTTTASKWDOT_CLASSNAME;
+GanttTaskDot.defaultProps = defaultProps193;
+
+// src/gantt/gantt-task-content.spec.tsx
+import { jsx as jsx567, jsxs as jsxs263 } from "react/jsx-runtime";
+var GANTTTASKCONTENT_CLASSNAME = "k-task-content";
+var states204 = [];
+var options190 = {};
+var defaultProps194 = {};
+var GanttTaskContent = (props) => {
+  const {
+    content,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs263(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTTASKCONTENT_CLASSNAME
+      ),
+      children: [
+        content && /* @__PURE__ */ jsx567("div", { className: "k-task-template", children: content }),
+        /* @__PURE__ */ jsx567("span", { className: "k-task-actions", children: /* @__PURE__ */ jsx567("a", { className: "k-link k-task-delete", children: /* @__PURE__ */ jsx567(Icon, { icon: "x" }) }) }),
+        /* @__PURE__ */ jsx567("span", { className: "k-resize-handle k-resize-w" }),
+        /* @__PURE__ */ jsx567("span", { className: "k-resize-handle k-resize-e" })
+      ]
+    }
+  );
+};
+GanttTaskContent.states = states204;
+GanttTaskContent.options = options190;
+GanttTaskContent.className = GANTTTASKCONTENT_CLASSNAME;
+GanttTaskContent.defaultProps = defaultProps194;
+
+// src/gantt/gantt-line.spec.tsx
+import { jsx as jsx568 } from "react/jsx-runtime";
+var GANTTLINE_CLASSNAME = "k-gantt-line";
+var states205 = [];
+var options191 = {};
+var defaultProps195 = {
+  orientation: "horizontal"
+};
+var GanttLine = (props) => {
+  const {
+    orientation = defaultProps195.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx568(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        GANTTLINE_CLASSNAME,
+        {
+          [`k-gantt-line-h`]: orientation === "horizontal",
+          [`k-gantt-line-v`]: orientation === "vertical"
+        }
+      )
+    }
+  );
+};
+GanttLine.states = states205;
+GanttLine.options = options191;
+GanttLine.className = GANTTLINE_CLASSNAME;
+GanttLine.defaultProps = defaultProps195;
+
+// src/utils/templates/background/background-clip/border-clip.tsx
+import { jsx as jsx569 } from "react/jsx-runtime";
+
+// src/utils/templates/background/background-clip/content-clip.tsx
+import { jsx as jsx570 } from "react/jsx-runtime";
+
+// src/utils/templates/background/background-clip/padding-clip.tsx
+import { jsx as jsx571 } from "react/jsx-runtime";
+
+// src/utils/templates/background/background-clip/text-clip.tsx
+import { jsx as jsx572 } from "react/jsx-runtime";
+
 // src/utils/templates/background/background-color/color.tsx
-import { jsx as jsx561, jsxs as jsxs262 } from "react/jsx-runtime";
+import { jsx as jsx573, jsxs as jsxs264 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/all-sides.tsx
-import { jsx as jsx562, jsxs as jsxs263 } from "react/jsx-runtime";
+import { jsx as jsx574, jsxs as jsxs265 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/individual.tsx
-import { jsx as jsx563, jsxs as jsxs264 } from "react/jsx-runtime";
+import { jsx as jsx575, jsxs as jsxs266 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/left-right.tsx
-import { jsx as jsx564, jsxs as jsxs265 } from "react/jsx-runtime";
+import { jsx as jsx576, jsxs as jsxs267 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/top-bottom.tsx
-import { jsx as jsx565, jsxs as jsxs266 } from "react/jsx-runtime";
+import { jsx as jsx577, jsxs as jsxs268 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/corners.tsx
-import { jsx as jsx566, jsxs as jsxs267 } from "react/jsx-runtime";
+import { jsx as jsx578, jsxs as jsxs269 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/no-rounding.tsx
-import { jsx as jsx567, jsxs as jsxs268 } from "react/jsx-runtime";
+import { jsx as jsx579, jsxs as jsxs270 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/rounding.tsx
-import { jsx as jsx568, jsxs as jsxs269 } from "react/jsx-runtime";
+import { jsx as jsx580, jsxs as jsxs271 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/sides.tsx
-import { jsx as jsx569, jsxs as jsxs270 } from "react/jsx-runtime";
+import { jsx as jsx581, jsxs as jsxs272 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/all-sides.tsx
-import { jsx as jsx570, jsxs as jsxs271 } from "react/jsx-runtime";
+import { jsx as jsx582, jsxs as jsxs273 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/individual.tsx
-import { jsx as jsx571, jsxs as jsxs272 } from "react/jsx-runtime";
+import { jsx as jsx583, jsxs as jsxs274 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/left-right.tsx
-import { jsx as jsx572, jsxs as jsxs273 } from "react/jsx-runtime";
+import { jsx as jsx584, jsxs as jsxs275 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/no-style.tsx
-import { jsx as jsx573 } from "react/jsx-runtime";
+import { jsx as jsx585 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/top-bottom.tsx
-import { jsx as jsx574, jsxs as jsxs274 } from "react/jsx-runtime";
+import { jsx as jsx586, jsxs as jsxs276 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/all-sides.tsx
-import { jsx as jsx575, jsxs as jsxs275 } from "react/jsx-runtime";
+import { jsx as jsx587, jsxs as jsxs277 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/individual.tsx
-import { jsx as jsx576, jsxs as jsxs276 } from "react/jsx-runtime";
+import { jsx as jsx588, jsxs as jsxs278 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/left-right.tsx
-import { jsx as jsx577, jsxs as jsxs277 } from "react/jsx-runtime";
+import { jsx as jsx589, jsxs as jsxs279 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/top-bottom.tsx
-import { jsx as jsx578, jsxs as jsxs278 } from "react/jsx-runtime";
+import { jsx as jsx590, jsxs as jsxs280 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-color/all-sides.tsx
-import { jsx as jsx579 } from "react/jsx-runtime";
+import { jsx as jsx591 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-offset/all-sides.tsx
-import { jsx as jsx580, jsxs as jsxs279 } from "react/jsx-runtime";
+import { jsx as jsx592, jsxs as jsxs281 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-offset/no-offset.tsx
-import { jsx as jsx581 } from "react/jsx-runtime";
+import { jsx as jsx593 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-style/all-sides.tsx
-import { jsx as jsx582, jsxs as jsxs280 } from "react/jsx-runtime";
+import { jsx as jsx594, jsxs as jsxs282 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-style/no-style.tsx
-import { jsx as jsx583 } from "react/jsx-runtime";
+import { jsx as jsx595 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-width/all-sides.tsx
-import { jsx as jsx584, jsxs as jsxs281 } from "react/jsx-runtime";
+import { jsx as jsx596, jsxs as jsxs283 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-width/no-width.tsx
-import { jsx as jsx585 } from "react/jsx-runtime";
+import { jsx as jsx597 } from "react/jsx-runtime";
 
 // src/utils/templates/effects/opacity/applying.tsx
-import { jsx as jsx586, jsxs as jsxs282 } from "react/jsx-runtime";
+import { jsx as jsx598, jsxs as jsxs284 } from "react/jsx-runtime";
 
 // src/utils/templates/filters/backdrop-blur/applying.tsx
-import { Fragment as Fragment189, jsx as jsx587, jsxs as jsxs283 } from "react/jsx-runtime";
+import { Fragment as Fragment189, jsx as jsx599, jsxs as jsxs285 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/around.tsx
-import { jsx as jsx588, jsxs as jsxs284 } from "react/jsx-runtime";
+import { jsx as jsx600, jsxs as jsxs286 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/between.tsx
-import { jsx as jsx589, jsxs as jsxs285 } from "react/jsx-runtime";
+import { jsx as jsx601, jsxs as jsxs287 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/center.tsx
-import { jsx as jsx590, jsxs as jsxs286 } from "react/jsx-runtime";
+import { jsx as jsx602, jsxs as jsxs288 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/end.tsx
-import { jsx as jsx591, jsxs as jsxs287 } from "react/jsx-runtime";
+import { jsx as jsx603, jsxs as jsxs289 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/evenly.tsx
-import { jsx as jsx592, jsxs as jsxs288 } from "react/jsx-runtime";
+import { jsx as jsx604, jsxs as jsxs290 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/normal.tsx
-import { jsx as jsx593, jsxs as jsxs289 } from "react/jsx-runtime";
+import { jsx as jsx605, jsxs as jsxs291 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/start.tsx
-import { jsx as jsx594, jsxs as jsxs290 } from "react/jsx-runtime";
+import { jsx as jsx606, jsxs as jsxs292 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/stretch.tsx
-import { jsx as jsx595, jsxs as jsxs291 } from "react/jsx-runtime";
+import { jsx as jsx607, jsxs as jsxs293 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/baseline.tsx
-import { jsx as jsx596, jsxs as jsxs292 } from "react/jsx-runtime";
+import { jsx as jsx608, jsxs as jsxs294 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/center.tsx
-import { jsx as jsx597, jsxs as jsxs293 } from "react/jsx-runtime";
+import { jsx as jsx609, jsxs as jsxs295 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/end.tsx
-import { jsx as jsx598, jsxs as jsxs294 } from "react/jsx-runtime";
+import { jsx as jsx610, jsxs as jsxs296 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/start.tsx
-import { jsx as jsx599, jsxs as jsxs295 } from "react/jsx-runtime";
+import { jsx as jsx611, jsxs as jsxs297 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/stretch.tsx
-import { jsx as jsx600, jsxs as jsxs296 } from "react/jsx-runtime";
+import { jsx as jsx612, jsxs as jsxs298 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/baseline.tsx
-import { jsx as jsx601, jsxs as jsxs297 } from "react/jsx-runtime";
+import { jsx as jsx613, jsxs as jsxs299 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/center.tsx
-import { jsx as jsx602, jsxs as jsxs298 } from "react/jsx-runtime";
+import { jsx as jsx614, jsxs as jsxs300 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/end.tsx
-import { jsx as jsx603, jsxs as jsxs299 } from "react/jsx-runtime";
+import { jsx as jsx615, jsxs as jsxs301 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/start.tsx
-import { jsx as jsx604, jsxs as jsxs300 } from "react/jsx-runtime";
+import { jsx as jsx616, jsxs as jsxs302 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/stretch.tsx
-import { jsx as jsx605, jsxs as jsxs301 } from "react/jsx-runtime";
+import { jsx as jsx617, jsxs as jsxs303 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/auto.tsx
-import { jsx as jsx606, jsxs as jsxs302 } from "react/jsx-runtime";
+import { jsx as jsx618, jsxs as jsxs304 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/flex-1.tsx
-import { jsx as jsx607, jsxs as jsxs303 } from "react/jsx-runtime";
+import { jsx as jsx619, jsxs as jsxs305 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/initial.tsx
-import { jsx as jsx608, jsxs as jsxs304 } from "react/jsx-runtime";
+import { jsx as jsx620, jsxs as jsxs306 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/none.tsx
-import { jsx as jsx609, jsxs as jsxs305 } from "react/jsx-runtime";
+import { jsx as jsx621, jsxs as jsxs307 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-basis/auto.tsx
-import { jsx as jsx610, jsxs as jsxs306 } from "react/jsx-runtime";
+import { jsx as jsx622, jsxs as jsxs308 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-basis/size.tsx
-import { jsx as jsx611, jsxs as jsxs307 } from "react/jsx-runtime";
+import { jsx as jsx623, jsxs as jsxs309 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/column-reverse.tsx
-import { jsx as jsx612, jsxs as jsxs308 } from "react/jsx-runtime";
+import { jsx as jsx624, jsxs as jsxs310 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/column.tsx
-import { jsx as jsx613, jsxs as jsxs309 } from "react/jsx-runtime";
+import { jsx as jsx625, jsxs as jsxs311 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/row-reverse.tsx
-import { jsx as jsx614, jsxs as jsxs310 } from "react/jsx-runtime";
+import { jsx as jsx626, jsxs as jsxs312 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/row.tsx
-import { jsx as jsx615, jsxs as jsxs311 } from "react/jsx-runtime";
+import { jsx as jsx627, jsxs as jsxs313 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-grow/grow-0.tsx
-import { jsx as jsx616, jsxs as jsxs312 } from "react/jsx-runtime";
+import { jsx as jsx628, jsxs as jsxs314 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-grow/grow-1.tsx
-import { jsx as jsx617, jsxs as jsxs313 } from "react/jsx-runtime";
+import { jsx as jsx629, jsxs as jsxs315 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-srink/shrink-0.tsx
-import { jsx as jsx618, jsxs as jsxs314 } from "react/jsx-runtime";
+import { jsx as jsx630, jsxs as jsxs316 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-srink/shrink-1.tsx
-import { jsx as jsx619, jsxs as jsxs315 } from "react/jsx-runtime";
+import { jsx as jsx631, jsxs as jsxs317 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/nowrap.tsx
-import { jsx as jsx620, jsxs as jsxs316 } from "react/jsx-runtime";
+import { jsx as jsx632, jsxs as jsxs318 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/wrap-reverse.tsx
-import { jsx as jsx621, jsxs as jsxs317 } from "react/jsx-runtime";
+import { jsx as jsx633, jsxs as jsxs319 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/wrap.tsx
-import { jsx as jsx622, jsxs as jsxs318 } from "react/jsx-runtime";
+import { jsx as jsx634, jsxs as jsxs320 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/gap/size-x-y.tsx
-import { jsx as jsx623, jsxs as jsxs319 } from "react/jsx-runtime";
+import { jsx as jsx635, jsxs as jsxs321 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/gap/size.tsx
-import { jsx as jsx624, jsxs as jsxs320 } from "react/jsx-runtime";
+import { jsx as jsx636, jsxs as jsxs322 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/auto.tsx
-import { jsx as jsx625, jsxs as jsxs321 } from "react/jsx-runtime";
+import { jsx as jsx637, jsxs as jsxs323 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/fr.tsx
-import { jsx as jsx626, jsxs as jsxs322 } from "react/jsx-runtime";
+import { jsx as jsx638, jsxs as jsxs324 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/max.tsx
-import { jsx as jsx627, jsxs as jsxs323 } from "react/jsx-runtime";
+import { jsx as jsx639, jsxs as jsxs325 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/min.tsx
-import { jsx as jsx628, jsxs as jsxs324 } from "react/jsx-runtime";
+import { jsx as jsx640, jsxs as jsxs326 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/column.tsx
-import { jsx as jsx629, jsxs as jsxs325 } from "react/jsx-runtime";
+import { jsx as jsx641, jsxs as jsxs327 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/dense.tsx
-import { jsx as jsx630, jsxs as jsxs326 } from "react/jsx-runtime";
+import { jsx as jsx642, jsxs as jsxs328 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/row.tsx
-import { jsx as jsx631, jsxs as jsxs327 } from "react/jsx-runtime";
+import { jsx as jsx643, jsxs as jsxs329 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/auto.tsx
-import { jsx as jsx632, jsxs as jsxs328 } from "react/jsx-runtime";
+import { jsx as jsx644, jsxs as jsxs330 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/fr.tsx
-import { jsx as jsx633, jsxs as jsxs329 } from "react/jsx-runtime";
+import { jsx as jsx645, jsxs as jsxs331 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/min.tsx
-import { jsx as jsx634, jsxs as jsxs330 } from "react/jsx-runtime";
+import { jsx as jsx646, jsxs as jsxs332 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-col-start-end/start-end-n.tsx
-import { jsx as jsx635, jsxs as jsxs331 } from "react/jsx-runtime";
+import { jsx as jsx647, jsxs as jsxs333 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-row-start-end/start-end-n.tsx
-import { jsx as jsx636, jsxs as jsxs332 } from "react/jsx-runtime";
+import { jsx as jsx648, jsxs as jsxs334 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-template-cols/integer.tsx
-import { jsx as jsx637, jsxs as jsxs333 } from "react/jsx-runtime";
+import { jsx as jsx649, jsxs as jsxs335 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-template-rows/integer.tsx
-import { jsx as jsx638, jsxs as jsxs334 } from "react/jsx-runtime";
+import { jsx as jsx650, jsxs as jsxs336 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/around.tsx
-import { jsx as jsx639, jsxs as jsxs335 } from "react/jsx-runtime";
+import { jsx as jsx651, jsxs as jsxs337 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/between.tsx
-import { jsx as jsx640, jsxs as jsxs336 } from "react/jsx-runtime";
+import { jsx as jsx652, jsxs as jsxs338 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/center.tsx
-import { jsx as jsx641, jsxs as jsxs337 } from "react/jsx-runtime";
+import { jsx as jsx653, jsxs as jsxs339 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/end.tsx
-import { jsx as jsx642, jsxs as jsxs338 } from "react/jsx-runtime";
+import { jsx as jsx654, jsxs as jsxs340 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/evenly.tsx
-import { jsx as jsx643, jsxs as jsxs339 } from "react/jsx-runtime";
+import { jsx as jsx655, jsxs as jsxs341 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/normal.tsx
-import { jsx as jsx644, jsxs as jsxs340 } from "react/jsx-runtime";
+import { jsx as jsx656, jsxs as jsxs342 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/start.tsx
-import { jsx as jsx645, jsxs as jsxs341 } from "react/jsx-runtime";
+import { jsx as jsx657, jsxs as jsxs343 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/stretch.tsx
-import { jsx as jsx646, jsxs as jsxs342 } from "react/jsx-runtime";
+import { jsx as jsx658, jsxs as jsxs344 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/center.tsx
-import { jsx as jsx647, jsxs as jsxs343 } from "react/jsx-runtime";
+import { jsx as jsx659, jsxs as jsxs345 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/end.tsx
-import { jsx as jsx648, jsxs as jsxs344 } from "react/jsx-runtime";
+import { jsx as jsx660, jsxs as jsxs346 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/start.tsx
-import { jsx as jsx649, jsxs as jsxs345 } from "react/jsx-runtime";
+import { jsx as jsx661, jsxs as jsxs347 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/stretch.tsx
-import { jsx as jsx650, jsxs as jsxs346 } from "react/jsx-runtime";
+import { jsx as jsx662, jsxs as jsxs348 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/center.tsx
-import { jsx as jsx651, jsxs as jsxs347 } from "react/jsx-runtime";
+import { jsx as jsx663, jsxs as jsxs349 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/end.tsx
-import { jsx as jsx652, jsxs as jsxs348 } from "react/jsx-runtime";
+import { jsx as jsx664, jsxs as jsxs350 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/start.tsx
-import { jsx as jsx653, jsxs as jsxs349 } from "react/jsx-runtime";
+import { jsx as jsx665, jsxs as jsxs351 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/stretch.tsx
-import { jsx as jsx654, jsxs as jsxs350 } from "react/jsx-runtime";
+import { jsx as jsx666, jsxs as jsxs352 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/first.tsx
-import { jsx as jsx655, jsxs as jsxs351 } from "react/jsx-runtime";
+import { jsx as jsx667, jsxs as jsxs353 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/integer.tsx
-import { jsx as jsx656, jsxs as jsxs352 } from "react/jsx-runtime";
+import { jsx as jsx668, jsxs as jsxs354 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/last.tsx
-import { jsx as jsx657, jsxs as jsxs353 } from "react/jsx-runtime";
+import { jsx as jsx669, jsxs as jsxs355 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/around.tsx
-import { jsx as jsx658, jsxs as jsxs354 } from "react/jsx-runtime";
+import { jsx as jsx670, jsxs as jsxs356 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/between.tsx
-import { jsx as jsx659, jsxs as jsxs355 } from "react/jsx-runtime";
+import { jsx as jsx671, jsxs as jsxs357 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/center.tsx
-import { jsx as jsx660, jsxs as jsxs356 } from "react/jsx-runtime";
+import { jsx as jsx672, jsxs as jsxs358 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/end.tsx
-import { jsx as jsx661, jsxs as jsxs357 } from "react/jsx-runtime";
+import { jsx as jsx673, jsxs as jsxs359 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/evenly.tsx
-import { jsx as jsx662, jsxs as jsxs358 } from "react/jsx-runtime";
+import { jsx as jsx674, jsxs as jsxs360 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/normal.tsx
-import { jsx as jsx663, jsxs as jsxs359 } from "react/jsx-runtime";
+import { jsx as jsx675, jsxs as jsxs361 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/start.tsx
-import { jsx as jsx664, jsxs as jsxs360 } from "react/jsx-runtime";
+import { jsx as jsx676, jsxs as jsxs362 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/stretch.tsx
-import { jsx as jsx665, jsxs as jsxs361 } from "react/jsx-runtime";
+import { jsx as jsx677, jsxs as jsxs363 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/center.tsx
-import { jsx as jsx666, jsxs as jsxs362 } from "react/jsx-runtime";
+import { jsx as jsx678, jsxs as jsxs364 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/end.tsx
-import { jsx as jsx667, jsxs as jsxs363 } from "react/jsx-runtime";
+import { jsx as jsx679, jsxs as jsxs365 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/start.tsx
-import { jsx as jsx668, jsxs as jsxs364 } from "react/jsx-runtime";
+import { jsx as jsx680, jsxs as jsxs366 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/stretch.tsx
-import { jsx as jsx669, jsxs as jsxs365 } from "react/jsx-runtime";
+import { jsx as jsx681, jsxs as jsxs367 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/center.tsx
-import { jsx as jsx670, jsxs as jsxs366 } from "react/jsx-runtime";
+import { jsx as jsx682, jsxs as jsxs368 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/end.tsx
-import { jsx as jsx671, jsxs as jsxs367 } from "react/jsx-runtime";
+import { jsx as jsx683, jsxs as jsxs369 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/start.tsx
-import { jsx as jsx672, jsxs as jsxs368 } from "react/jsx-runtime";
+import { jsx as jsx684, jsxs as jsxs370 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/stretch.tsx
-import { jsx as jsx673, jsxs as jsxs369 } from "react/jsx-runtime";
+import { jsx as jsx685, jsxs as jsxs371 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/appearance/applying.tsx
-import { jsx as jsx674, jsxs as jsxs370 } from "react/jsx-runtime";
+import { jsx as jsx686, jsxs as jsxs372 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/appearance/none.tsx
-import { jsx as jsx675, jsxs as jsxs371 } from "react/jsx-runtime";
+import { jsx as jsx687, jsxs as jsxs373 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/cursor/applying.tsx
-import { jsx as jsx676, jsxs as jsxs372 } from "react/jsx-runtime";
+import { jsx as jsx688, jsxs as jsxs374 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/pointer-events/applying.tsx
-import { jsx as jsx677, jsxs as jsxs373 } from "react/jsx-runtime";
+import { jsx as jsx689, jsxs as jsxs375 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/all-directions.tsx
-import { jsx as jsx678 } from "react/jsx-runtime";
+import { jsx as jsx690 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/horizontal.tsx
-import { jsx as jsx679 } from "react/jsx-runtime";
+import { jsx as jsx691 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/no-resizing.tsx
-import { jsx as jsx680 } from "react/jsx-runtime";
+import { jsx as jsx692 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/vertical.tsx
-import { jsx as jsx681 } from "react/jsx-runtime";
+import { jsx as jsx693 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/auto.tsx
-import { jsx as jsx682 } from "react/jsx-runtime";
+import { jsx as jsx694 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/horizontal.tsx
-import { jsx as jsx683 } from "react/jsx-runtime";
+import { jsx as jsx695 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/none.tsx
-import { jsx as jsx684 } from "react/jsx-runtime";
+import { jsx as jsx696 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/vertical.tsx
-import { jsx as jsx685 } from "react/jsx-runtime";
+import { jsx as jsx697 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/all.tsx
-import { jsx as jsx686 } from "react/jsx-runtime";
+import { jsx as jsx698 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/none.tsx
-import { jsx as jsx687 } from "react/jsx-runtime";
+import { jsx as jsx699 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/text.tsx
-import { jsx as jsx688 } from "react/jsx-runtime";
+import { jsx as jsx700 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/auto.tsx
-import { jsx as jsx689 } from "react/jsx-runtime";
+import { jsx as jsx701 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/one.tsx
-import { jsx as jsx690 } from "react/jsx-runtime";
+import { jsx as jsx702 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/sqaure.tsx
-import { jsx as jsx691 } from "react/jsx-runtime";
+import { jsx as jsx703 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/video.tsx
-import { jsx as jsx692 } from "react/jsx-runtime";
+import { jsx as jsx704 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/box-sizing/border.tsx
-import { jsx as jsx693 } from "react/jsx-runtime";
+import { jsx as jsx705 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/box-sizing/content.tsx
-import { jsx as jsx694 } from "react/jsx-runtime";
+import { jsx as jsx706 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/both.tsx
-import { jsx as jsx695, jsxs as jsxs374 } from "react/jsx-runtime";
+import { jsx as jsx707, jsxs as jsxs376 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/left.tsx
-import { jsx as jsx696, jsxs as jsxs375 } from "react/jsx-runtime";
+import { jsx as jsx708, jsxs as jsxs377 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/no-clear.tsx
-import { jsx as jsx697, jsxs as jsxs376 } from "react/jsx-runtime";
+import { jsx as jsx709, jsxs as jsxs378 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/right.tsx
-import { jsx as jsx698, jsxs as jsxs377 } from "react/jsx-runtime";
+import { jsx as jsx710, jsxs as jsxs379 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/columns/automatic.tsx
-import { jsx as jsx699, jsxs as jsxs378 } from "react/jsx-runtime";
+import { jsx as jsx711, jsxs as jsxs380 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/columns/count.tsx
-import { jsx as jsx700, jsxs as jsxs379 } from "react/jsx-runtime";
+import { jsx as jsx712, jsxs as jsxs381 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/block.tsx
-import { jsx as jsx701, jsxs as jsxs380 } from "react/jsx-runtime";
+import { jsx as jsx713, jsxs as jsxs382 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/flex.tsx
-import { jsx as jsx702, jsxs as jsxs381 } from "react/jsx-runtime";
+import { jsx as jsx714, jsxs as jsxs383 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/inline.tsx
-import { jsx as jsx703, jsxs as jsxs382 } from "react/jsx-runtime";
+import { jsx as jsx715, jsxs as jsxs384 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/none.tsx
-import { Fragment as Fragment190, jsx as jsx704, jsxs as jsxs383 } from "react/jsx-runtime";
+import { Fragment as Fragment190, jsx as jsx716, jsxs as jsxs385 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/left.tsx
-import { jsx as jsx705, jsxs as jsxs384 } from "react/jsx-runtime";
+import { jsx as jsx717, jsxs as jsxs386 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/no-float.tsx
-import { jsx as jsx706, jsxs as jsxs385 } from "react/jsx-runtime";
+import { jsx as jsx718, jsxs as jsxs387 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/right.tsx
-import { jsx as jsx707, jsxs as jsxs386 } from "react/jsx-runtime";
+import { jsx as jsx719, jsxs as jsxs388 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/contain.tsx
-import { jsx as jsx708 } from "react/jsx-runtime";
+import { jsx as jsx720 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/cover.tsx
-import { jsx as jsx709 } from "react/jsx-runtime";
+import { jsx as jsx721 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/fill.tsx
-import { jsx as jsx710 } from "react/jsx-runtime";
+import { jsx as jsx722 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/scale-down.tsx
-import { jsx as jsx711 } from "react/jsx-runtime";
+import { jsx as jsx723 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-position/position.tsx
-import { jsx as jsx712, jsxs as jsxs387 } from "react/jsx-runtime";
+import { jsx as jsx724, jsxs as jsxs389 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/hidden.tsx
-import { jsx as jsx713 } from "react/jsx-runtime";
+import { jsx as jsx725 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/horizontal.tsx
-import { jsx as jsx714 } from "react/jsx-runtime";
+import { jsx as jsx726 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/vertical.tsx
-import { jsx as jsx715 } from "react/jsx-runtime";
+import { jsx as jsx727 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/visible.tsx
-import { jsx as jsx716 } from "react/jsx-runtime";
+import { jsx as jsx728 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/placement/multiple.tsx
-import { jsx as jsx717, jsxs as jsxs388 } from "react/jsx-runtime";
+import { jsx as jsx729, jsxs as jsxs390 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/placement/single.tsx
-import { jsx as jsx718, jsxs as jsxs389 } from "react/jsx-runtime";
+import { jsx as jsx730, jsxs as jsxs391 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/position/applying.tsx
-import { jsx as jsx719, jsxs as jsxs390 } from "react/jsx-runtime";
+import { jsx as jsx731, jsxs as jsxs392 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/visibility/invisible.tsx
-import { jsx as jsx720, jsxs as jsxs391 } from "react/jsx-runtime";
+import { jsx as jsx732, jsxs as jsxs393 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/z-index/applying.tsx
-import { Fragment as Fragment191, jsx as jsx721, jsxs as jsxs392 } from "react/jsx-runtime";
+import { Fragment as Fragment191, jsx as jsx733, jsxs as jsxs394 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/fixed.tsx
-import { jsx as jsx722, jsxs as jsxs393 } from "react/jsx-runtime";
+import { jsx as jsx734, jsxs as jsxs395 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/full.tsx
-import { jsx as jsx723 } from "react/jsx-runtime";
+import { jsx as jsx735 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/maximum.tsx
-import { jsx as jsx724 } from "react/jsx-runtime";
+import { jsx as jsx736 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/minimum.tsx
-import { jsx as jsx725 } from "react/jsx-runtime";
+import { jsx as jsx737 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/screen.tsx
-import { jsx as jsx726 } from "react/jsx-runtime";
+import { jsx as jsx738 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/fixed.tsx
-import { jsx as jsx727, jsxs as jsxs394 } from "react/jsx-runtime";
+import { jsx as jsx739, jsxs as jsxs396 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/full.tsx
-import { jsx as jsx728 } from "react/jsx-runtime";
+import { jsx as jsx740 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/maximum.tsx
-import { jsx as jsx729 } from "react/jsx-runtime";
+import { jsx as jsx741 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/minimum.tsx
-import { jsx as jsx730 } from "react/jsx-runtime";
+import { jsx as jsx742 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/screen.tsx
-import { jsx as jsx731 } from "react/jsx-runtime";
+import { jsx as jsx743 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/all.tsx
-import { jsx as jsx732 } from "react/jsx-runtime";
+import { jsx as jsx744 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/single.tsx
-import { Fragment as Fragment192, jsx as jsx733, jsxs as jsxs395 } from "react/jsx-runtime";
+import { Fragment as Fragment192, jsx as jsx745, jsxs as jsxs397 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/x.tsx
-import { jsx as jsx734 } from "react/jsx-runtime";
+import { jsx as jsx746 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/y.tsx
-import { jsx as jsx735 } from "react/jsx-runtime";
+import { jsx as jsx747 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/all.tsx
-import { jsx as jsx736 } from "react/jsx-runtime";
+import { jsx as jsx748 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/single.tsx
-import { Fragment as Fragment193, jsx as jsx737, jsxs as jsxs396 } from "react/jsx-runtime";
+import { Fragment as Fragment193, jsx as jsx749, jsxs as jsxs398 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/x.tsx
-import { jsx as jsx738 } from "react/jsx-runtime";
+import { jsx as jsx750 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/y.tsx
-import { jsx as jsx739 } from "react/jsx-runtime";
+import { jsx as jsx751 } from "react/jsx-runtime";
 
 // src/utils/templates/svg/fill/color.tsx
-import { Fragment as Fragment194, jsx as jsx740, jsxs as jsxs397 } from "react/jsx-runtime";
+import { Fragment as Fragment194, jsx as jsx752, jsxs as jsxs399 } from "react/jsx-runtime";
 
 // src/utils/templates/svg/stroke/color.tsx
-import { Fragment as Fragment195, jsx as jsx741, jsxs as jsxs398 } from "react/jsx-runtime";
+import { Fragment as Fragment195, jsx as jsx753, jsxs as jsxs400 } from "react/jsx-runtime";
 
 // src/utils/templates/table/border-collapse/collapse.tsx
-import { jsx as jsx742, jsxs as jsxs399 } from "react/jsx-runtime";
+import { jsx as jsx754, jsxs as jsxs401 } from "react/jsx-runtime";
 
 // src/utils/templates/table/border-collapse/separate.tsx
-import { jsx as jsx743, jsxs as jsxs400 } from "react/jsx-runtime";
+import { jsx as jsx755, jsxs as jsxs402 } from "react/jsx-runtime";
 
 // src/utils/templates/table/table-layout/auto.tsx
-import { jsx as jsx744, jsxs as jsxs401 } from "react/jsx-runtime";
+import { jsx as jsx756, jsxs as jsxs403 } from "react/jsx-runtime";
 
 // src/utils/templates/table/table-layout/fixed.tsx
-import { jsx as jsx745, jsxs as jsxs402 } from "react/jsx-runtime";
+import { jsx as jsx757, jsxs as jsxs404 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/flip/horizontal.tsx
-import { jsx as jsx746, jsxs as jsxs403 } from "react/jsx-runtime";
+import { jsx as jsx758, jsxs as jsxs405 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/flip/vertical.tsx
-import { jsx as jsx747, jsxs as jsxs404 } from "react/jsx-runtime";
+import { jsx as jsx759, jsxs as jsxs406 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/origin/applying.tsx
-import { jsx as jsx748, jsxs as jsxs405 } from "react/jsx-runtime";
+import { jsx as jsx760, jsxs as jsxs407 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/rotate/applying.tsx
-import { jsx as jsx749, jsxs as jsxs406 } from "react/jsx-runtime";
+import { jsx as jsx761, jsxs as jsxs408 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/scale/applying.tsx
-import { jsx as jsx750, jsxs as jsxs407 } from "react/jsx-runtime";
+import { jsx as jsx762, jsxs as jsxs409 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/skew/applying.tsx
-import { jsx as jsx751, jsxs as jsxs408 } from "react/jsx-runtime";
+import { jsx as jsx763, jsxs as jsxs410 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/translate/applying.tsx
-import { jsx as jsx752, jsxs as jsxs409 } from "react/jsx-runtime";
+import { jsx as jsx764, jsxs as jsxs411 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/font-style/italic.tsx
-import { jsx as jsx753 } from "react/jsx-runtime";
+import { jsx as jsx765 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/font-weight/size.tsx
-import { Fragment as Fragment196, jsx as jsx754, jsxs as jsxs410 } from "react/jsx-runtime";
+import { Fragment as Fragment196, jsx as jsx766, jsxs as jsxs412 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/decimal.tsx
-import { jsx as jsx755, jsxs as jsxs411 } from "react/jsx-runtime";
+import { jsx as jsx767, jsxs as jsxs413 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/disc.tsx
-import { jsx as jsx756, jsxs as jsxs412 } from "react/jsx-runtime";
+import { jsx as jsx768, jsxs as jsxs414 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/none.tsx
-import { jsx as jsx757, jsxs as jsxs413 } from "react/jsx-runtime";
+import { jsx as jsx769, jsxs as jsxs415 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/center.tsx
-import { jsx as jsx758 } from "react/jsx-runtime";
+import { jsx as jsx770 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/justify.tsx
-import { jsx as jsx759 } from "react/jsx-runtime";
+import { jsx as jsx771 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/left.tsx
-import { jsx as jsx760 } from "react/jsx-runtime";
+import { jsx as jsx772 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/right.tsx
-import { jsx as jsx761 } from "react/jsx-runtime";
+import { jsx as jsx773 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-color/inherit.tsx
-import { jsx as jsx762 } from "react/jsx-runtime";
+import { jsx as jsx774 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-color/white.tsx
-import { jsx as jsx763 } from "react/jsx-runtime";
+import { jsx as jsx775 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-decoration/all.tsx
-import { Fragment as Fragment197, jsx as jsx764, jsxs as jsxs414 } from "react/jsx-runtime";
+import { Fragment as Fragment197, jsx as jsx776, jsxs as jsxs416 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-overflow/clip.tsx
-import { jsx as jsx765 } from "react/jsx-runtime";
+import { jsx as jsx777 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-overflow/ellipsis.tsx
-import { jsx as jsx766 } from "react/jsx-runtime";
+import { jsx as jsx778 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-transform/all.tsx
-import { Fragment as Fragment198, jsx as jsx767, jsxs as jsxs415 } from "react/jsx-runtime";
+import { Fragment as Fragment198, jsx as jsx779, jsxs as jsxs417 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/baseline.tsx
-import { jsx as jsx768, jsxs as jsxs416 } from "react/jsx-runtime";
+import { jsx as jsx780, jsxs as jsxs418 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/bottom.tsx
-import { jsx as jsx769, jsxs as jsxs417 } from "react/jsx-runtime";
+import { jsx as jsx781, jsxs as jsxs419 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/center.tsx
-import { jsx as jsx770, jsxs as jsxs418 } from "react/jsx-runtime";
+import { jsx as jsx782, jsxs as jsxs420 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/top.tsx
-import { jsx as jsx771, jsxs as jsxs419 } from "react/jsx-runtime";
+import { jsx as jsx783, jsxs as jsxs421 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/normal.tsx
-import { jsx as jsx772 } from "react/jsx-runtime";
+import { jsx as jsx784 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/nowrap.tsx
-import { jsx as jsx773 } from "react/jsx-runtime";
+import { jsx as jsx785 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre-line.tsx
-import { jsx as jsx774 } from "react/jsx-runtime";
+import { jsx as jsx786 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre-wrap.tsx
-import { jsx as jsx775 } from "react/jsx-runtime";
+import { jsx as jsx787 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre.tsx
-import { jsx as jsx776 } from "react/jsx-runtime";
+import { jsx as jsx788 } from "react/jsx-runtime";
 
 // src/editor/editor.spec.tsx
-import { jsx as jsx777, jsxs as jsxs420 } from "react/jsx-runtime";
+import { jsx as jsx789, jsxs as jsxs422 } from "react/jsx-runtime";
 var EDITOR_CLASSNAME = `k-editor`;
-var states200 = [
+var states206 = [
   States.readonly,
   States.disabled,
   States.focus
 ];
-var options186 = {};
-var defaultProps190 = {
+var options192 = {};
+var defaultProps196 = {
   toolbarResizable: false
 };
 var Editor = (props) => {
@@ -18721,11 +18941,11 @@ var Editor = (props) => {
     disabled,
     focus,
     toolbarItems,
-    toolbarResizable = defaultProps190.toolbarResizable,
+    toolbarResizable = defaultProps196.toolbarResizable,
     resizable,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs420(
+  return /* @__PURE__ */ jsxs422(
     "div",
     {
       ...other,
@@ -18741,8 +18961,8 @@ var Editor = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx777(EditorToolbar, { resizable: toolbarResizable, children: toolbarItems }),
-        /* @__PURE__ */ jsx777(
+        /* @__PURE__ */ jsx789(EditorToolbar, { resizable: toolbarResizable, children: toolbarItems }),
+        /* @__PURE__ */ jsx789(
           EditorContent,
           {
             className: classNames(
@@ -18757,20 +18977,20 @@ var Editor = (props) => {
     }
   );
 };
-Editor.states = states200;
-Editor.options = options186;
+Editor.states = states206;
+Editor.options = options192;
 Editor.className = EDITOR_CLASSNAME;
-Editor.defaultProps = defaultProps190;
+Editor.defaultProps = defaultProps196;
 
 // src/editor/editor-toolbar.tsx
-import { jsx as jsx778 } from "react/jsx-runtime";
+import { jsx as jsx790 } from "react/jsx-runtime";
 var EDITORTOOLBAR_CLASSNAME = `k-editor-toolbar`;
 var EditorToolbar = (props) => {
   const {
     resizable,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx778(
+  return /* @__PURE__ */ jsx790(
     Toolbar,
     {
       ...other,
@@ -18785,9 +19005,9 @@ var EditorToolbar = (props) => {
 };
 
 // src/editor/editor-content.tsx
-import { jsx as jsx779 } from "react/jsx-runtime";
+import { jsx as jsx791 } from "react/jsx-runtime";
 var EDITORCONTENT_CLASSNAME = `k-editor-content`;
-var states201 = [
+var states207 = [
   States.focus
 ];
 var EditorContent = (props) => {
@@ -18795,7 +19015,7 @@ var EditorContent = (props) => {
     focus,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx779(
+  return /* @__PURE__ */ jsx791(
     "div",
     {
       ...other,
@@ -18812,49 +19032,49 @@ var EditorContent = (props) => {
 };
 
 // src/editor/templates/editor-normal.tsx
-import { Fragment as Fragment199, jsx as jsx780, jsxs as jsxs421 } from "react/jsx-runtime";
-var EditorNormal = (props) => /* @__PURE__ */ jsx780(
+import { Fragment as Fragment199, jsx as jsx792, jsxs as jsxs423 } from "react/jsx-runtime";
+var EditorNormal = (props) => /* @__PURE__ */ jsx792(
   Editor,
   {
     toolbarItems: [
-      /* @__PURE__ */ jsxs421(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-start", disabled: true, icon: "undo" }),
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-end", disabled: true, icon: "redo" })
+      /* @__PURE__ */ jsxs423(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-start", disabled: true, icon: "undo" }),
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-end", disabled: true, icon: "redo" })
       ] }),
-      /* @__PURE__ */ jsxs421(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-start", icon: "bold" }),
-        /* @__PURE__ */ jsx780(Button, { icon: "italic" }),
-        /* @__PURE__ */ jsx780(Button, { icon: "underline" }),
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-end", icon: "strikethrough" })
+      /* @__PURE__ */ jsxs423(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-start", icon: "bold" }),
+        /* @__PURE__ */ jsx792(Button, { icon: "italic" }),
+        /* @__PURE__ */ jsx792(Button, { icon: "underline" }),
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-end", icon: "strikethrough" })
       ] }),
-      /* @__PURE__ */ jsxs421(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-start", icon: "subscript" }),
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-end", icon: "supscript" })
+      /* @__PURE__ */ jsxs423(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-start", icon: "subscript" }),
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-end", icon: "supscript" })
       ] }),
-      /* @__PURE__ */ jsxs421(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-start", icon: "indent" }),
-        /* @__PURE__ */ jsx780(Button, { disabled: true, className: "k-group-end", icon: "outdent" })
+      /* @__PURE__ */ jsxs423(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-start", icon: "indent" }),
+        /* @__PURE__ */ jsx792(Button, { disabled: true, className: "k-group-end", icon: "outdent" })
       ] }),
-      /* @__PURE__ */ jsxs421(ButtonGroup, { children: [
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-start", icon: "align-left" }),
-        /* @__PURE__ */ jsx780(Button, { icon: "align-center" }),
-        /* @__PURE__ */ jsx780(Button, { icon: "align-right" }),
-        /* @__PURE__ */ jsx780(Button, { className: "k-group-end", icon: "align-justify" })
+      /* @__PURE__ */ jsxs423(ButtonGroup, { children: [
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-start", icon: "align-left" }),
+        /* @__PURE__ */ jsx792(Button, { icon: "align-center" }),
+        /* @__PURE__ */ jsx792(Button, { icon: "align-right" }),
+        /* @__PURE__ */ jsx792(Button, { className: "k-group-end", icon: "align-justify" })
       ] })
     ],
-    children: /* @__PURE__ */ jsx780(Fragment199, { children: "Editor Content" }),
+    children: /* @__PURE__ */ jsx792(Fragment199, { children: "Editor Content" }),
     ...props
   }
 );
 
 // src/editor/templates/editor-resizable.tsx
-import { Fragment as Fragment200, jsx as jsx781, jsxs as jsxs422 } from "react/jsx-runtime";
+import { Fragment as Fragment200, jsx as jsx793, jsxs as jsxs424 } from "react/jsx-runtime";
 
 // src/editor/templates/editor-responsive-toolbar.tsx
-import { Fragment as Fragment201, jsx as jsx782, jsxs as jsxs423 } from "react/jsx-runtime";
+import { Fragment as Fragment201, jsx as jsx794, jsxs as jsxs425 } from "react/jsx-runtime";
 
 // src/editor/tests/editor-find-replace.tsx
-import { Fragment as Fragment202, jsx as jsx783, jsxs as jsxs424 } from "react/jsx-runtime";
+import { Fragment as Fragment202, jsx as jsx795, jsxs as jsxs426 } from "react/jsx-runtime";
 var styles = `
     .k-window {
         width: 100%;
@@ -18871,76 +19091,76 @@ var styles = `
         max-width: initial;
     }
 `;
-var editor_find_replace_default = () => /* @__PURE__ */ jsxs424(Fragment202, { children: [
-  /* @__PURE__ */ jsx783("style", { children: styles }),
-  /* @__PURE__ */ jsxs424("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
-    /* @__PURE__ */ jsx783("span", { children: "Find Window" }),
-    /* @__PURE__ */ jsx783("span", { children: "Replace Window" }),
-    /* @__PURE__ */ jsx783("section", { children: /* @__PURE__ */ jsx783(WindowNormal, { title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs424("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
-      /* @__PURE__ */ jsx783("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs424("ul", { className: "k-tabstrip-items k-reset", children: [
-        /* @__PURE__ */ jsx783("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx783("span", { className: "k-link", children: "Find" }) }),
-        /* @__PURE__ */ jsx783("li", { className: "k-item", children: /* @__PURE__ */ jsx783("span", { className: "k-link", children: "Replace" }) })
+var editor_find_replace_default = () => /* @__PURE__ */ jsxs426(Fragment202, { children: [
+  /* @__PURE__ */ jsx795("style", { children: styles }),
+  /* @__PURE__ */ jsxs426("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
+    /* @__PURE__ */ jsx795("span", { children: "Find Window" }),
+    /* @__PURE__ */ jsx795("span", { children: "Replace Window" }),
+    /* @__PURE__ */ jsx795("section", { children: /* @__PURE__ */ jsx795(WindowNormal, { title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs426("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
+      /* @__PURE__ */ jsx795("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs426("ul", { className: "k-tabstrip-items k-reset", children: [
+        /* @__PURE__ */ jsx795("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx795("span", { className: "k-link", children: "Find" }) }),
+        /* @__PURE__ */ jsx795("li", { className: "k-item", children: /* @__PURE__ */ jsx795("span", { className: "k-link", children: "Replace" }) })
       ] }) }),
-      /* @__PURE__ */ jsx783("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs424(FormNormal, { formButtons: null, tag: "div", children: [
-        /* @__PURE__ */ jsx783(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx783(Textbox, { showClearButton: false, value: "editor" }) }),
-        /* @__PURE__ */ jsx783(FormField, { editor: /* @__PURE__ */ jsxs424(CheckboxGroupNormal, { className: "k-search-options", children: [
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Match case" }) }),
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
+      /* @__PURE__ */ jsx795("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs426(FormNormal, { formButtons: null, tag: "div", children: [
+        /* @__PURE__ */ jsx795(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx795(Textbox, { showClearButton: false, value: "editor" }) }),
+        /* @__PURE__ */ jsx795(FormField, { editor: /* @__PURE__ */ jsxs426(CheckboxGroupNormal, { className: "k-search-options", children: [
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Match case" }) }),
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
         ] }) }),
-        /* @__PURE__ */ jsxs424("div", { className: "k-matches-container", children: [
-          /* @__PURE__ */ jsx783(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
-          /* @__PURE__ */ jsx783("span", { children: "1 of 3 matches" }),
-          /* @__PURE__ */ jsx783(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
+        /* @__PURE__ */ jsxs426("div", { className: "k-matches-container", children: [
+          /* @__PURE__ */ jsx795(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
+          /* @__PURE__ */ jsx795("span", { children: "1 of 3 matches" }),
+          /* @__PURE__ */ jsx795(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx783("section", { children: /* @__PURE__ */ jsx783(WindowNormal, { className: "k-editor-window", title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs424("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
-      /* @__PURE__ */ jsx783("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs424("ul", { className: "k-tabstrip-items k-reset", children: [
-        /* @__PURE__ */ jsx783("li", { className: "k-item", children: /* @__PURE__ */ jsx783("span", { className: "k-link", children: "Find" }) }),
-        /* @__PURE__ */ jsx783("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx783("span", { className: "k-link", children: "Replace" }) })
+    /* @__PURE__ */ jsx795("section", { children: /* @__PURE__ */ jsx795(WindowNormal, { className: "k-editor-window", title: "Find and Replace", actions: ["x"], children: /* @__PURE__ */ jsxs426("div", { className: "k-tabstrip k-tabstrip-top k-editor-find-replace", children: [
+      /* @__PURE__ */ jsx795("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ jsxs426("ul", { className: "k-tabstrip-items k-reset", children: [
+        /* @__PURE__ */ jsx795("li", { className: "k-item", children: /* @__PURE__ */ jsx795("span", { className: "k-link", children: "Find" }) }),
+        /* @__PURE__ */ jsx795("li", { className: "k-item k-active k-tab-on-top", children: /* @__PURE__ */ jsx795("span", { className: "k-link", children: "Replace" }) })
       ] }) }),
-      /* @__PURE__ */ jsx783("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs424(FormNormal, { formButtons: null, tag: "div", children: [
-        /* @__PURE__ */ jsx783(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx783(Textbox, { showClearButton: false, value: "editor" }) }),
-        /* @__PURE__ */ jsx783(FormField, { label: "Replace With:", editor: /* @__PURE__ */ jsx783(Textbox, { showClearButton: false, value: "grid" }) }),
-        /* @__PURE__ */ jsx783(FormField, { editor: /* @__PURE__ */ jsxs424(ActionButtons, { alignment: "end", children: [
-          /* @__PURE__ */ jsx783(Button, { children: "Replace" }),
-          /* @__PURE__ */ jsx783(Button, { children: "Replace All" })
+      /* @__PURE__ */ jsx795("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ jsxs426(FormNormal, { formButtons: null, tag: "div", children: [
+        /* @__PURE__ */ jsx795(FormField, { label: "Find What:", editor: /* @__PURE__ */ jsx795(Textbox, { showClearButton: false, value: "editor" }) }),
+        /* @__PURE__ */ jsx795(FormField, { label: "Replace With:", editor: /* @__PURE__ */ jsx795(Textbox, { showClearButton: false, value: "grid" }) }),
+        /* @__PURE__ */ jsx795(FormField, { editor: /* @__PURE__ */ jsxs426(ActionButtons, { alignment: "end", children: [
+          /* @__PURE__ */ jsx795(Button, { children: "Replace" }),
+          /* @__PURE__ */ jsx795(Button, { children: "Replace All" })
         ] }) }),
-        /* @__PURE__ */ jsx783(FormField, { editor: /* @__PURE__ */ jsxs424(CheckboxGroupNormal, { className: "k-search-options", children: [
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Match case" }) }),
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
-          /* @__PURE__ */ jsx783(CheckboxItem, { children: /* @__PURE__ */ jsx783(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
+        /* @__PURE__ */ jsx795(FormField, { editor: /* @__PURE__ */ jsxs426(CheckboxGroupNormal, { className: "k-search-options", children: [
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Match case" }) }),
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Match whole word only" }) }),
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Match cyclic (Wrap around)" }) }),
+          /* @__PURE__ */ jsx795(CheckboxItem, { children: /* @__PURE__ */ jsx795(CheckboxWithLabelAfter, { children: "Regular Expression" }) })
         ] }) }),
-        /* @__PURE__ */ jsxs424("div", { className: "k-matches-container", children: [
-          /* @__PURE__ */ jsx783(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
-          /* @__PURE__ */ jsx783("span", { children: "1 of 3 matches" }),
-          /* @__PURE__ */ jsx783(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
+        /* @__PURE__ */ jsxs426("div", { className: "k-matches-container", children: [
+          /* @__PURE__ */ jsx795(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-left", children: "Prev" }),
+          /* @__PURE__ */ jsx795("span", { children: "1 of 3 matches" }),
+          /* @__PURE__ */ jsx795(Button, { themeColor: "primary", fillMode: "flat", icon: "chevron-right", children: "Next" })
         ] })
       ] }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx783("span", { children: "Text Highlight" }),
-    /* @__PURE__ */ jsx783("span", {}),
-    /* @__PURE__ */ jsx783("section", { children: /* @__PURE__ */ jsx783(
+    /* @__PURE__ */ jsx795("span", { children: "Text Highlight" }),
+    /* @__PURE__ */ jsx795("span", {}),
+    /* @__PURE__ */ jsx795("section", { children: /* @__PURE__ */ jsx795(
       EditorNormal,
       {
         style: { height: "150px" },
         toolbarItems: [
-          /* @__PURE__ */ jsxs424(ButtonGroup, { children: [
-            /* @__PURE__ */ jsx783(Button, { className: "k-group-start", icon: "bold" }),
-            /* @__PURE__ */ jsx783(Button, { icon: "italic" }),
-            /* @__PURE__ */ jsx783(Button, { icon: "underline" }),
-            /* @__PURE__ */ jsx783(Button, { className: "k-group-end", icon: "binoculars", selected: true })
+          /* @__PURE__ */ jsxs426(ButtonGroup, { children: [
+            /* @__PURE__ */ jsx795(Button, { className: "k-group-start", icon: "bold" }),
+            /* @__PURE__ */ jsx795(Button, { icon: "italic" }),
+            /* @__PURE__ */ jsx795(Button, { icon: "underline" }),
+            /* @__PURE__ */ jsx795(Button, { className: "k-group-end", icon: "binoculars", selected: true })
           ] })
         ],
-        children: /* @__PURE__ */ jsxs424("div", { className: "ProseMirror", children: [
-          /* @__PURE__ */ jsx783("span", { className: "k-text-selected", children: "Word" }),
+        children: /* @__PURE__ */ jsxs426("div", { className: "ProseMirror", children: [
+          /* @__PURE__ */ jsx795("span", { className: "k-text-selected", children: "Word" }),
           " and few more ",
-          /* @__PURE__ */ jsx783("span", { className: "k-text-highlighted", children: "word" }),
+          /* @__PURE__ */ jsx795("span", { className: "k-text-highlighted", children: "word" }),
           "s. And yet again. ",
-          /* @__PURE__ */ jsx783("span", { className: "k-text-highlighted", children: "Word" }),
+          /* @__PURE__ */ jsx795("span", { className: "k-text-highlighted", children: "Word" }),
           "."
         ] })
       }