@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.2

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

@@ -5176,7 +5176,8 @@ var Slider = (props) => {
     focus,
     active,
     trackStyle,
-    dir
+    dir,
+    ...other
   } = props;
   let iconIncrease;
   let iconDecrease;
@@ -5187,46 +5188,54 @@ var Slider = (props) => {
     iconIncrease = "caret-alt-up";
     iconDecrease = "caret-alt-down";
   }
-  return /* @__PURE__ */ jsxs9("div", { className: classNames(
-    SLIDER_CLASSNAME,
-    props.className,
-    stateClassNames(SLIDER_CLASSNAME, {
-      readonly,
-      disabled
-    }),
+  return /* @__PURE__ */ jsxs9(
+    "div",
     {
-      [`k-slider-${orientation}`]: orientation,
-      "k-colorgradient-slider": type === "gradient",
-      "k-range-slider": type === "range"
+      ...other,
+      className: classNames(
+        SLIDER_CLASSNAME,
+        props.className,
+        stateClassNames(SLIDER_CLASSNAME, {
+          readonly,
+          disabled
+        }),
+        {
+          [`k-slider-${orientation}`]: orientation,
+          "k-colorgradient-slider": type === "gradient",
+          "k-range-slider": type === "range"
+        }
+      ),
+      dir,
+      children: [
+        showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+        /* @__PURE__ */ jsxs9("div", { className: "k-slider-track-wrap", children: [
+          showTicks && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
+          /* @__PURE__ */ jsxs9("div", { className: "k-slider-track", style: trackStyle, children: [
+            /* @__PURE__ */ jsx32("div", { className: "k-slider-selection" }),
+            type === "range" && /* @__PURE__ */ jsx32("span", { className: classNames(
+              "k-draghandle",
+              "k-draghandle-start",
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) }),
+            /* @__PURE__ */ jsx32("span", { className: classNames(
+              "k-draghandle",
+              `k-draghandle-${handlePosition}`,
+              stateClassNames(SLIDER_CLASSNAME, {
+                hover,
+                focus,
+                active
+              })
+            ) })
+          ] })
+        ] }),
+        showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+      ]
     }
-  ), dir, children: [
-    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
-    /* @__PURE__ */ jsxs9("div", { className: "k-slider-track-wrap", children: [
-      showTicks && /* @__PURE__ */ jsx32("ul", { className: "k-reset k-slider-items", children: props.children }),
-      /* @__PURE__ */ jsxs9("div", { className: "k-slider-track", style: trackStyle, children: [
-        /* @__PURE__ */ jsx32("div", { className: "k-slider-selection" }),
-        type === "range" && /* @__PURE__ */ jsx32("span", { className: classNames(
-          "k-draghandle",
-          "k-draghandle-start",
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) }),
-        /* @__PURE__ */ jsx32("span", { className: classNames(
-          "k-draghandle",
-          `k-draghandle-${handlePosition}`,
-          stateClassNames(SLIDER_CLASSNAME, {
-            hover,
-            focus,
-            active
-          })
-        ) })
-      ] })
-    ] }),
-    showButtons && /* @__PURE__ */ jsx32(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
-  ] });
+  );
 };
 Slider.states = states18;
 Slider.options = options17;
@@ -5247,16 +5256,25 @@ var SliderTick = (props) => {
     label = defaultProps18.label,
     orientation,
     large,
-    text
+    text,
+    ...other
   } = props;
-  return /* @__PURE__ */ jsx33("li", { className: classNames(
-    props.className,
-    SLIDER_TICK_CLASSNAME,
+  return /* @__PURE__ */ jsx33(
+    "li",
     {
-      [`k-tick-${orientation}`]: orientation,
-      "k-tick-large": large
+      ...other,
+      className: classNames(
+        props.className,
+        SLIDER_TICK_CLASSNAME,
+        {
+          [`k-tick-${orientation}`]: orientation,
+          "k-tick-large": large
+        }
+      ),
+      style,
+      children: label && /* @__PURE__ */ jsx33("span", { className: "k-label", children: text })
     }
-  ), style, children: label && /* @__PURE__ */ jsx33("span", { className: "k-label", children: text }) });
+  );
 };
 SliderTick.states = states19;
 SliderTick.options = options18;
@@ -10313,7 +10331,7 @@ var Form = (props) => {
     tag = defaultProps76.tag,
     children
   } = props;
-  const Parent = ({ tag: tag2, className: className33, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx227("form", { className: className33, children: children2 }) : /* @__PURE__ */ jsx227("div", { className: className33, children: children2 });
+  const Parent = ({ tag: tag2, className: className34, children: children2 }) => tag2 === "form" ? /* @__PURE__ */ jsx227("form", { className: className34, children: children2 }) : /* @__PURE__ */ jsx227("div", { className: className34, children: children2 });
   const formChildren = [];
   if (children) {
     if (Array.isArray(children)) {
@@ -15063,121 +15081,143 @@ import { jsx as jsx405 } from "react/jsx-runtime";
 // src/grid/grid-toolbar.spec.tsx
 import { jsx as jsx406 } from "react/jsx-runtime";
 
-// src/filter/filter-preview.tsx
+// src/treelist/treelist.spec.tsx
 import { jsx as jsx407 } from "react/jsx-runtime";
-var FILTER_PREVIEW_CLASSNAME = "k-filter-preview";
+var TREELIST_CLASSNAME = "k-treelist";
 var states139 = [];
 var options129 = {};
 var defaultProps129 = {};
+var TreeList = (props) => /* @__PURE__ */ jsx407(
+  Grid,
+  {
+    ...props,
+    className: classNames(
+      TREELIST_CLASSNAME,
+      props.className
+    ),
+    children: props.children
+  }
+);
+TreeList.states = states139;
+TreeList.options = options129;
+TreeList.className = TREELIST_CLASSNAME;
+TreeList.defaultProps = defaultProps129;
+
+// src/filter/filter-preview.tsx
+import { jsx as jsx408 } from "react/jsx-runtime";
+var FILTER_PREVIEW_CLASSNAME = "k-filter-preview";
+var states140 = [];
+var options130 = {};
+var defaultProps130 = {};
 var FilterPreview = (props) => {
   const { fields } = props;
   const expressionPreview = [];
   if (fields) {
     fields.map(({ name, value }) => {
       expressionPreview.push(
-        /* @__PURE__ */ jsx407("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
+        /* @__PURE__ */ jsx408("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
       );
     });
   }
-  return /* @__PURE__ */ jsx407("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
+  return /* @__PURE__ */ jsx408("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
 };
-FilterPreview.states = states139;
-FilterPreview.options = options129;
-FilterPreview.defaultProps = defaultProps129;
+FilterPreview.states = states140;
+FilterPreview.options = options130;
+FilterPreview.defaultProps = defaultProps130;
 FilterPreview.className = FILTER_PREVIEW_CLASSNAME;
 
 // src/filter/filter.spec.tsx
-import { Fragment as Fragment119, jsx as jsx408, jsxs as jsxs164 } from "react/jsx-runtime";
+import { Fragment as Fragment119, jsx as jsx409, jsxs as jsxs164 } from "react/jsx-runtime";
 var FILTER_CLASSNAME = "k-filter";
-var states140 = [];
-var options130 = {};
-var defaultProps130 = {};
+var states141 = [];
+var options131 = {};
+var defaultProps131 = {};
 var Filter = (props) => {
   const {
     children,
     showApplyButton
   } = props;
   const filterChildren = [];
-  let expressionPreview = /* @__PURE__ */ jsx408(Fragment119, {});
+  let expressionPreview = /* @__PURE__ */ jsx409(Fragment119, {});
   if (children) {
     if (Array.isArray(children)) {
       children.map((child) => {
         if (child.type !== FilterPreview) {
           filterChildren.push(child);
         } else {
-          expressionPreview = /* @__PURE__ */ jsx408(FilterPreview, { ...child.props });
+          expressionPreview = /* @__PURE__ */ jsx409(FilterPreview, { ...child.props });
         }
       });
     }
   }
   return /* @__PURE__ */ jsxs164("div", { className: classNames(props.className, FILTER_CLASSNAME), children: [
-    /* @__PURE__ */ jsx408("ul", { className: "k-filter-container", children: /* @__PURE__ */ jsx408("li", { className: "k-filter-group-main", children: filterChildren }) }),
+    /* @__PURE__ */ jsx409("ul", { className: "k-filter-container", children: /* @__PURE__ */ jsx409("li", { className: "k-filter-group-main", children: filterChildren }) }),
     expressionPreview,
-    showApplyButton && /* @__PURE__ */ jsx408(Button, { className: "k-filter-apply", children: "Apply" })
+    showApplyButton && /* @__PURE__ */ jsx409(Button, { className: "k-filter-apply", children: "Apply" })
   ] });
 };
-Filter.states = states140;
-Filter.options = options130;
-Filter.defaultProps = defaultProps130;
+Filter.states = states141;
+Filter.options = options131;
+Filter.defaultProps = defaultProps131;
 Filter.className = FILTER_CLASSNAME;
 
 // src/filter/filter-toolbar.tsx
-import { jsx as jsx409 } from "react/jsx-runtime";
+import { jsx as jsx410 } from "react/jsx-runtime";
 var FILTER_TOOLBAR_CLASSNAME = "k-filter-toolbar";
-var states141 = [];
-var options131 = {};
-var defaultProps131 = {};
+var states142 = [];
+var options132 = {};
+var defaultProps132 = {};
 var FilterToolbar = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx409("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
+  return /* @__PURE__ */ jsx410("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
 };
-FilterToolbar.states = states141;
-FilterToolbar.options = options131;
-FilterToolbar.defaultProps = defaultProps131;
+FilterToolbar.states = states142;
+FilterToolbar.options = options132;
+FilterToolbar.defaultProps = defaultProps132;
 
 // src/filter/filter-lines.tsx
-import { jsx as jsx410 } from "react/jsx-runtime";
+import { jsx as jsx411 } from "react/jsx-runtime";
 var FILTER_LINES_CLASSNAME = "k-filter-lines";
-var states142 = [];
-var options132 = {};
-var defaultProps132 = {};
+var states143 = [];
+var options133 = {};
+var defaultProps133 = {};
 var FilterLines = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx410("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
+  return /* @__PURE__ */ jsx411("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
 };
-FilterLines.states = states142;
-FilterLines.options = options132;
-FilterLines.defaultProps = defaultProps132;
+FilterLines.states = states143;
+FilterLines.options = options133;
+FilterLines.defaultProps = defaultProps133;
 
 // src/filter/filter-item.tsx
-import { jsx as jsx411 } from "react/jsx-runtime";
+import { jsx as jsx412 } from "react/jsx-runtime";
 var FILTER_ITEM_CLASSNAME = "k-filter-item";
-var states143 = [];
-var options133 = {};
-var defaultProps133 = {};
+var states144 = [];
+var options134 = {};
+var defaultProps134 = {};
 var FilterItem = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx411("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
+  return /* @__PURE__ */ jsx412("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
 };
-FilterItem.states = states143;
-FilterItem.options = options133;
-FilterItem.defaultProps = defaultProps133;
+FilterItem.states = states144;
+FilterItem.options = options134;
+FilterItem.defaultProps = defaultProps134;
 
 // src/filter/templates/filter-normal.tsx
-import { jsx as jsx412, jsxs as jsxs165 } from "react/jsx-runtime";
+import { jsx as jsx413, jsxs as jsxs165 } from "react/jsx-runtime";
 
 // src/taskboard/taskboard-toolbar.tsx
-import { jsx as jsx413 } from "react/jsx-runtime";
+import { jsx as jsx414 } from "react/jsx-runtime";
 var TASKBOARDTOOLBAR_CLASSNAME = `k-taskboard-toolbar`;
-var states144 = [];
-var options134 = {};
-var defaultProps134 = {};
+var states145 = [];
+var options135 = {};
+var defaultProps135 = {};
 var TaskBoardToolbar = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx413(
+  return /* @__PURE__ */ jsx414(
     Toolbar,
     {
       ...other,
@@ -15189,27 +15229,27 @@ var TaskBoardToolbar = (props) => {
     }
   );
 };
-TaskBoardToolbar.states = states144;
-TaskBoardToolbar.options = options134;
+TaskBoardToolbar.states = states145;
+TaskBoardToolbar.options = options135;
 TaskBoardToolbar.className = TASKBOARDTOOLBAR_CLASSNAME;
-TaskBoardToolbar.defaultProps = defaultProps134;
+TaskBoardToolbar.defaultProps = defaultProps135;
 
 // src/taskboard/taskboard-pane.tsx
-import { Fragment as Fragment120, jsx as jsx414, jsxs as jsxs166 } from "react/jsx-runtime";
+import { Fragment as Fragment120, jsx as jsx415, jsxs as jsxs166 } from "react/jsx-runtime";
 var TASKBOARDPANE_CLASSNAME = `k-taskboard-pane`;
-var states145 = [];
-var options135 = {};
+var states146 = [];
+var options136 = {};
 var defaultHeader = /* @__PURE__ */ jsxs166(Fragment120, { children: [
-  /* @__PURE__ */ jsx414("div", { className: "k-taskboard-pane-header-text", children: "Card X" }),
-  /* @__PURE__ */ jsx414("span", { className: "k-spacer" }),
-  /* @__PURE__ */ jsx414("div", { className: "k-taskboard-pane-header-actions", children: /* @__PURE__ */ jsx414(Button, { fillMode: "flat", icon: "x" }) })
+  /* @__PURE__ */ jsx415("div", { className: "k-taskboard-pane-header-text", children: "Card X" }),
+  /* @__PURE__ */ jsx415("span", { className: "k-spacer" }),
+  /* @__PURE__ */ jsx415("div", { className: "k-taskboard-pane-header-actions", children: /* @__PURE__ */ jsx415(Button, { fillMode: "flat", icon: "x" }) })
 ] });
-var defaultProps135 = {
+var defaultProps136 = {
   header: defaultHeader
 };
 var TaskBoardPane = (props) => {
   const {
-    header = defaultProps135.header,
+    header = defaultProps136.header,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs166(
@@ -15222,34 +15262,34 @@ var TaskBoardPane = (props) => {
         "k-taskboard-edit-pane"
       ),
       children: [
-        /* @__PURE__ */ jsx414("div", { className: "k-taskboard-pane-header", children: header }),
-        /* @__PURE__ */ jsx414("div", { className: "k-taskboard-pane-content", children: props.children }),
+        /* @__PURE__ */ jsx415("div", { className: "k-taskboard-pane-header", children: header }),
+        /* @__PURE__ */ jsx415("div", { className: "k-taskboard-pane-content", children: props.children }),
         /* @__PURE__ */ jsxs166(ActionButtons, { alignment: "end", className: "k-taskboard-pane-actions", children: [
-          /* @__PURE__ */ jsx414(Button, { icon: "trash", children: "Delete" }),
-          /* @__PURE__ */ jsx414(Button, { themeColor: "primary", icon: "pencil", children: "Edit" })
+          /* @__PURE__ */ jsx415(Button, { icon: "trash", children: "Delete" }),
+          /* @__PURE__ */ jsx415(Button, { themeColor: "primary", icon: "pencil", children: "Edit" })
         ] })
       ]
     }
   );
 };
-TaskBoardPane.states = states145;
-TaskBoardPane.options = options135;
+TaskBoardPane.states = states146;
+TaskBoardPane.options = options136;
 TaskBoardPane.className = TASKBOARDPANE_CLASSNAME;
-TaskBoardPane.defaultProps = defaultProps135;
+TaskBoardPane.defaultProps = defaultProps136;
 
 // src/taskboard/taskboard.spec.tsx
-import { Fragment as Fragment121, jsx as jsx415, jsxs as jsxs167 } from "react/jsx-runtime";
+import { Fragment as Fragment121, jsx as jsx416, jsxs as jsxs167 } from "react/jsx-runtime";
 var TASKBOARD_CLASSNAME = `k-taskboard`;
-var states146 = [
+var states147 = [
   States.disabled
 ];
-var options136 = {};
-var defaultToolbar2 = /* @__PURE__ */ jsx415(Fragment121, { children: /* @__PURE__ */ jsxs167(TaskBoardToolbar, { children: [
-  /* @__PURE__ */ jsx415(Button, { icon: "plus", children: "Add Column" }),
-  /* @__PURE__ */ jsx415("span", { className: "k-spacer" }),
-  /* @__PURE__ */ jsx415(Searchbox, { placeholder: "Search..." })
+var options137 = {};
+var defaultToolbar2 = /* @__PURE__ */ jsx416(Fragment121, { children: /* @__PURE__ */ jsxs167(TaskBoardToolbar, { children: [
+  /* @__PURE__ */ jsx416(Button, { icon: "plus", children: "Add Column" }),
+  /* @__PURE__ */ jsx416("span", { className: "k-spacer" }),
+  /* @__PURE__ */ jsx416(Searchbox, { placeholder: "Search..." })
 ] }) });
-var defaultProps136 = {
+var defaultProps137 = {
   toolbar: defaultToolbar2,
   pane: false,
   panePosition: "end"
@@ -15257,8 +15297,8 @@ var defaultProps136 = {
 var TaskBoard = (props) => {
   const {
     disabled,
-    toolbar = defaultProps136.toolbar,
-    panePosition = defaultProps136.panePosition,
+    toolbar = defaultProps137.toolbar,
+    panePosition = defaultProps137.panePosition,
     pane,
     ...other
   } = props;
@@ -15274,45 +15314,45 @@ var TaskBoard = (props) => {
         })
       ),
       children: [
-        /* @__PURE__ */ jsx415("div", { className: "k-taskboard-header", children: toolbar }),
-        /* @__PURE__ */ jsx415("div", { className: "k-taskboard-content", style: {
+        /* @__PURE__ */ jsx416("div", { className: "k-taskboard-header", children: toolbar }),
+        /* @__PURE__ */ jsx416("div", { className: "k-taskboard-content", style: {
           marginRight: pane && panePosition === "end" ? "304px" : void 0,
           marginLeft: pane && panePosition === "start" ? "304px" : void 0
-        }, children: /* @__PURE__ */ jsx415("div", { className: "k-taskboard-columns-container", children: props.children }) }),
-        pane && /* @__PURE__ */ jsx415(Fragment121, { children: /* @__PURE__ */ jsx415(TaskBoardPane, { className: classNames(
+        }, children: /* @__PURE__ */ jsx416("div", { className: "k-taskboard-columns-container", children: props.children }) }),
+        pane && /* @__PURE__ */ jsx416(Fragment121, { children: /* @__PURE__ */ jsx416(TaskBoardPane, { className: classNames(
           {
             ["k-taskboard-pane-start"]: panePosition === "start"
           }
-        ), children: /* @__PURE__ */ jsx415(FormNormal, { formButtons: null, children: /* @__PURE__ */ jsx415(FormField, { label: "Textbox:", editor: /* @__PURE__ */ jsx415(Textbox, {}) }) }) }) })
+        ), children: /* @__PURE__ */ jsx416(FormNormal, { formButtons: null, children: /* @__PURE__ */ jsx416(FormField, { label: "Textbox:", editor: /* @__PURE__ */ jsx416(Textbox, {}) }) }) }) })
       ]
     }
   );
 };
-TaskBoard.states = states146;
-TaskBoard.options = options136;
+TaskBoard.states = states147;
+TaskBoard.options = options137;
 TaskBoard.className = TASKBOARD_CLASSNAME;
-TaskBoard.defaultProps = defaultProps136;
+TaskBoard.defaultProps = defaultProps137;
 
 // src/taskboard/taskboard-column.tsx
-import { Fragment as Fragment122, jsx as jsx416, jsxs as jsxs168 } from "react/jsx-runtime";
+import { Fragment as Fragment122, jsx as jsx417, jsxs as jsxs168 } from "react/jsx-runtime";
 var TASKBOARDCOLUMN_CLASSNAME = `k-taskboard-column`;
-var states147 = [];
-var options137 = {};
+var states148 = [];
+var options138 = {};
 var defaultHeader2 = /* @__PURE__ */ jsxs168(Fragment122, { children: [
-  /* @__PURE__ */ jsx416("div", { className: "k-taskboard-column-header-text k-text-ellipsis", children: "Column Header" }),
-  /* @__PURE__ */ jsx416("span", { className: "k-spacer" }),
+  /* @__PURE__ */ jsx417("div", { className: "k-taskboard-column-header-text k-text-ellipsis", children: "Column Header" }),
+  /* @__PURE__ */ jsx417("span", { className: "k-spacer" }),
   /* @__PURE__ */ jsxs168("div", { className: "k-taskboard-column-header-actions", children: [
-    /* @__PURE__ */ jsx416(Button, { fillMode: "flat", icon: "pencil" }),
-    /* @__PURE__ */ jsx416(Button, { fillMode: "flat", icon: "plus" }),
-    /* @__PURE__ */ jsx416(Button, { fillMode: "flat", icon: "x" })
+    /* @__PURE__ */ jsx417(Button, { fillMode: "flat", icon: "pencil" }),
+    /* @__PURE__ */ jsx417(Button, { fillMode: "flat", icon: "plus" }),
+    /* @__PURE__ */ jsx417(Button, { fillMode: "flat", icon: "x" })
   ] })
 ] });
-var defaultProps137 = {
+var defaultProps138 = {
   header: defaultHeader2
 };
 var TaskBoardColumn = (props) => {
   const {
-    header = defaultProps137.header,
+    header = defaultProps138.header,
     edit,
     ...other
   } = props;
@@ -15328,30 +15368,30 @@ var TaskBoardColumn = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx416("div", { className: "k-taskboard-column-header", children: header }),
-        /* @__PURE__ */ jsx416("div", { className: "k-taskboard-column-cards-container", children: /* @__PURE__ */ jsx416("div", { className: "k-taskboard-column-cards", children: props.children }) })
+        /* @__PURE__ */ jsx417("div", { className: "k-taskboard-column-header", children: header }),
+        /* @__PURE__ */ jsx417("div", { className: "k-taskboard-column-cards-container", children: /* @__PURE__ */ jsx417("div", { className: "k-taskboard-column-cards", children: props.children }) })
       ]
     }
   );
 };
-TaskBoardColumn.states = states147;
-TaskBoardColumn.options = options137;
+TaskBoardColumn.states = states148;
+TaskBoardColumn.options = options138;
 TaskBoardColumn.className = TASKBOARDCOLUMN_CLASSNAME;
-TaskBoardColumn.defaultProps = defaultProps137;
+TaskBoardColumn.defaultProps = defaultProps138;
 
 // src/taskboard/taskboard-card.tsx
-import { jsx as jsx417 } from "react/jsx-runtime";
+import { jsx as jsx418 } from "react/jsx-runtime";
 var TASKBOARDCARD_CLASSNAME = `k-taskboard-card`;
-var states148 = [];
-var options138 = {};
-var defaultProps138 = {};
+var states149 = [];
+var options139 = {};
+var defaultProps139 = {};
 var TaskBoardCard = (props) => {
   const {
     children,
     category,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx417(
+  return /* @__PURE__ */ jsx418(
     Card,
     {
       ...other,
@@ -15366,19 +15406,205 @@ var TaskBoardCard = (props) => {
     }
   );
 };
-TaskBoardCard.states = states148;
-TaskBoardCard.options = options138;
+TaskBoardCard.states = states149;
+TaskBoardCard.options = options139;
 TaskBoardCard.className = TASKBOARDCARD_CLASSNAME;
-TaskBoardCard.defaultProps = defaultProps138;
+TaskBoardCard.defaultProps = defaultProps139;
 
 // src/taskboard/templates/taskboard-normal.tsx
-import { Fragment as Fragment123, jsx as jsx418, jsxs as jsxs169 } from "react/jsx-runtime";
+import { Fragment as Fragment123, jsx as jsx419, jsxs as jsxs169 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu.spec.tsx
+import { jsx as jsx420 } from "react/jsx-runtime";
+var COLUMNMENU_CLASSNAME = `k-column-menu`;
+var states150 = [];
+var options140 = {};
+var defaultProps140 = {
+  view: "list"
+};
+var ColumnMenu = (props) => {
+  const {
+    view = defaultProps140.view,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx420(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENU_CLASSNAME,
+        {
+          "k-column-menu-tabbed": view === "tabbed"
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+ColumnMenu.states = states150;
+ColumnMenu.options = options140;
+ColumnMenu.className = COLUMNMENU_CLASSNAME;
+ColumnMenu.defaultProps = defaultProps140;
+
+// src/column-menu/column-menu-item.spec.tsx
+import { jsx as jsx421, jsxs as jsxs170 } from "react/jsx-runtime";
+var COLUMNMENUITEM_CLASSNAME = `k-columnmenu-item`;
+var states151 = [
+  States.focus,
+  States.selected
+];
+var options141 = {};
+var defaultProps141 = {};
+var ColumnMenuItem = (props) => {
+  const {
+    focus,
+    selected,
+    text,
+    icon,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs170(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUITEM_CLASSNAME,
+        stateClassNames(COLUMNMENUITEM_CLASSNAME, {
+          focus,
+          selected
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx421(Icon, { icon }),
+        text,
+        props.children
+      ]
+    }
+  );
+};
+ColumnMenuItem.states = states151;
+ColumnMenuItem.options = options141;
+ColumnMenuItem.className = COLUMNMENUITEM_CLASSNAME;
+ColumnMenuItem.defaultProps = defaultProps141;
+
+// src/column-menu/column-menu-item-wrapper.tsx
+import { jsx as jsx422 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu-item-content.tsx
+import { jsx as jsx423 } from "react/jsx-runtime";
+var className33 = `k-columnmenu-item-content`;
+var ColumnMenuItemContent = (props) => /* @__PURE__ */ jsx423(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      className33,
+      "k-columns-item"
+    ),
+    children: props.children
+  }
+);
+
+// src/column-menu/filter-menu.spec.tsx
+import { jsx as jsx424 } from "react/jsx-runtime";
+var FILTERMENU_CLASSNAME = `k-filter-menu`;
+var states152 = [];
+var options142 = {};
+var defaultProps142 = {};
+var FilterMenu = (props) => {
+  const {
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx424(
+    "form",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        FILTERMENU_CLASSNAME
+      ),
+      children: /* @__PURE__ */ jsx424("div", { className: "k-filter-menu-container", children: props.children })
+    }
+  );
+};
+FilterMenu.states = states152;
+FilterMenu.options = options142;
+FilterMenu.className = FILTERMENU_CLASSNAME;
+FilterMenu.defaultProps = defaultProps142;
+
+// src/column-menu/column-menu-multicheck-wrap.tsx
+import { jsx as jsx425 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu-multicheck-item.tsx
+import { jsx as jsx426, jsxs as jsxs171 } from "react/jsx-runtime";
+
+// src/column-menu/column-menu-expander.spec.tsx
+import { Fragment as Fragment124, jsx as jsx427, jsxs as jsxs172 } from "react/jsx-runtime";
+var COLUMNMENUEXPANDER_CLASSNAME = `k-expander`;
+var states153 = [];
+var options143 = {};
+var defaultProps143 = {};
+var ColumnMenuExpander = (props) => {
+  const {
+    itemText,
+    itemIcon,
+    expanded,
+    itemContent,
+    expanderIcon,
+    ...other
+  } = props;
+  let icon = /* @__PURE__ */ jsx427(Fragment124, {});
+  if (!expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ jsx427(Icon, { icon: "chevron-down" });
+  } else if (expanded && !expanderIcon) {
+    icon = /* @__PURE__ */ jsx427(Icon, { icon: "chevron-up" });
+  } else {
+    icon = /* @__PURE__ */ jsx427(Icon, { icon: expanderIcon });
+  }
+  return /* @__PURE__ */ jsxs172(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        COLUMNMENUEXPANDER_CLASSNAME
+      ),
+      children: [
+        /* @__PURE__ */ jsxs172(ColumnMenuItem, { text: itemText, icon: itemIcon, children: [
+          /* @__PURE__ */ jsx427("span", { className: "k-spacer" }),
+          /* @__PURE__ */ jsx427("span", { className: "k-expander-indicator", children: icon })
+        ] }),
+        expanded && /* @__PURE__ */ jsx427(ColumnMenuItemContent, { children: itemContent }),
+        props.children
+      ]
+    }
+  );
+};
+ColumnMenuExpander.states = states153;
+ColumnMenuExpander.options = options143;
+ColumnMenuExpander.className = COLUMNMENUEXPANDER_CLASSNAME;
+ColumnMenuExpander.defaultProps = defaultProps143;
+
+// src/column-menu/templates/column-menu-normal.tsx
+import { jsx as jsx428, jsxs as jsxs173 } from "react/jsx-runtime";
+
+// src/column-menu/templates/column-menu-tabbed.tsx
+import { jsx as jsx429, jsxs as jsxs174 } from "react/jsx-runtime";
+
+// src/column-menu/templates/filter-menu-normal.tsx
+import { jsx as jsx430, jsxs as jsxs175 } from "react/jsx-runtime";
+
+// src/column-menu/templates/filter-menu-multi-check.tsx
+import { jsx as jsx431, jsxs as jsxs176 } from "react/jsx-runtime";
 
 // src/chat/chat.spec.tsx
-import { Fragment as Fragment124, jsx as jsx419, jsxs as jsxs170 } from "react/jsx-runtime";
+import { Fragment as Fragment125, jsx as jsx432, jsxs as jsxs177 } from "react/jsx-runtime";
 var CHAT_CLASSNAME = "k-chat";
-var states149 = [];
-var options139 = {};
+var states154 = [];
+var options144 = {};
 var defaultOptions = {
   showToolbar: true,
   showMessageBox: true,
@@ -15392,7 +15618,7 @@ var Chat = (props) => {
     showMoreButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs170(
+  return /* @__PURE__ */ jsxs177(
     "div",
     {
       ...other,
@@ -15402,63 +15628,63 @@ var Chat = (props) => {
       ),
       dir,
       children: [
-        /* @__PURE__ */ jsx419("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ jsx419("div", { className: "k-message-list-content", children: props.children }) }),
-        showMessageBox && /* @__PURE__ */ jsx419(
+        /* @__PURE__ */ jsx432("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ jsx432("div", { className: "k-message-list-content", children: props.children }) }),
+        showMessageBox && /* @__PURE__ */ jsx432(
           Textbox,
           {
             className: "k-message-box",
             placeholder: "Type a message...",
-            suffix: /* @__PURE__ */ jsxs170(Fragment124, { children: [
-              showMoreButton && /* @__PURE__ */ jsx419(Button, { fillMode: "flat", icon: "more-horizontal" }),
-              /* @__PURE__ */ jsx419(Button, { fillMode: "flat", icon: "paper-plane", className: "k-chat-send" })
+            suffix: /* @__PURE__ */ jsxs177(Fragment125, { children: [
+              showMoreButton && /* @__PURE__ */ jsx432(Button, { fillMode: "flat", icon: "more-horizontal" }),
+              /* @__PURE__ */ jsx432(Button, { fillMode: "flat", icon: "paper-plane", className: "k-chat-send" })
             ] })
           }
         ),
-        showToolbar && /* @__PURE__ */ jsxs170("div", { className: "k-chat-toolbar k-toolbar", children: [
-          /* @__PURE__ */ jsx419(Button, { className: classNames("k-scroll-button", "k-scroll-button-left", dir === "rtl" ? "" : "k-hidden"), icon: "chevron-left" }),
-          /* @__PURE__ */ jsxs170("div", { className: "k-toolbar-group k-button-list", children: [
-            /* @__PURE__ */ jsx419(Button, { icon: "arrow-rotate-cw" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "gear" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "wrench" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "plus" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "search" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "star" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "bell" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "question-circle" }),
-            /* @__PURE__ */ jsx419(Button, { icon: "trash" })
+        showToolbar && /* @__PURE__ */ jsxs177("div", { className: "k-chat-toolbar k-toolbar", children: [
+          /* @__PURE__ */ jsx432(Button, { className: classNames("k-scroll-button", "k-scroll-button-left", dir === "rtl" ? "" : "k-hidden"), icon: "chevron-left" }),
+          /* @__PURE__ */ jsxs177("div", { className: "k-toolbar-group k-button-list", children: [
+            /* @__PURE__ */ jsx432(Button, { icon: "arrow-rotate-cw" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "gear" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "wrench" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "plus" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "search" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "star" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "bell" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "question-circle" }),
+            /* @__PURE__ */ jsx432(Button, { icon: "trash" })
           ] }),
-          /* @__PURE__ */ jsx419(Button, { className: classNames("k-scroll-button", "k-scroll-button-right", dir === "rtl" && "k-hidden"), icon: "chevron-right" })
+          /* @__PURE__ */ jsx432(Button, { className: classNames("k-scroll-button", "k-scroll-button-right", dir === "rtl" && "k-hidden"), icon: "chevron-right" })
         ] })
       ]
     }
   );
 };
-Chat.states = states149;
-Chat.options = options139;
+Chat.states = states154;
+Chat.options = options144;
 Chat.className = CHAT_CLASSNAME;
 Chat.defaultOptions = defaultOptions;
 
 // src/chat/chat-message.tsx
-import { jsx as jsx420, jsxs as jsxs171 } from "react/jsx-runtime";
+import { jsx as jsx433, jsxs as jsxs178 } from "react/jsx-runtime";
 var CHATMESSAGE_CLASSNAME = "k-message";
-var states150 = [
+var states155 = [
   States.selected
 ];
-var options140 = {};
-var defaultProps139 = {
+var options145 = {};
+var defaultProps144 = {
   time: "Thu Feb 08 2018",
   text: "How can I help you?",
   status: "Seen"
 };
 var ChatMessage = (props) => {
   const {
-    time = defaultProps139.time,
-    text = defaultProps139.text,
-    status = defaultProps139.status,
+    time = defaultProps144.time,
+    text = defaultProps144.text,
+    status = defaultProps144.status,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs171(
+  return /* @__PURE__ */ jsxs178(
     "div",
     {
       ...other,
@@ -15468,39 +15694,39 @@ var ChatMessage = (props) => {
         stateClassNames(CHATMESSAGE_CLASSNAME, { selected })
       ),
       children: [
-        /* @__PURE__ */ jsx420("time", { className: "k-message-time", children: time }),
-        /* @__PURE__ */ jsx420("div", { className: "k-chat-bubble", children: text }),
-        /* @__PURE__ */ jsx420("span", { className: "k-message-status", children: status })
+        /* @__PURE__ */ jsx433("time", { className: "k-message-time", children: time }),
+        /* @__PURE__ */ jsx433("div", { className: "k-chat-bubble", children: text }),
+        /* @__PURE__ */ jsx433("span", { className: "k-message-status", children: status })
       ]
     }
   );
 };
-ChatMessage.states = states150;
-ChatMessage.options = options140;
+ChatMessage.states = states155;
+ChatMessage.options = options145;
 ChatMessage.className = CHATMESSAGE_CLASSNAME;
-ChatMessage.defaultProps = defaultProps139;
+ChatMessage.defaultProps = defaultProps144;
 
 // src/chat/chat-message-group.tsx
-import { jsx as jsx421, jsxs as jsxs172 } from "react/jsx-runtime";
+import { jsx as jsx434, jsxs as jsxs179 } from "react/jsx-runtime";
 var CHATMESSAGEGROUP_CLASSNAME = "k-message-group";
-var states151 = [
+var states156 = [
   States.selected
 ];
-var options141 = {};
-var defaultProps140 = {
+var options146 = {};
+var defaultProps145 = {
   author: "Bruv",
   avatar: "/packages/html/assets/avatar.jpg",
   alt: false
 };
 var ChatMessageGroup = (props) => {
   const {
-    alt = defaultProps140.alt,
-    author = defaultProps140.author,
-    avatar = defaultProps140.avatar,
+    alt = defaultProps145.alt,
+    author = defaultProps145.author,
+    avatar = defaultProps145.avatar,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs172(
+  return /* @__PURE__ */ jsxs179(
     "div",
     {
       ...other,
@@ -15514,23 +15740,23 @@ var ChatMessageGroup = (props) => {
         }
       ),
       children: [
-        author && /* @__PURE__ */ jsx421("p", { className: "k-author", children: author }),
-        avatar && /* @__PURE__ */ jsx421(Avatar, { type: "image", children: /* @__PURE__ */ jsx421("img", { src: avatar }) }),
+        author && /* @__PURE__ */ jsx434("p", { className: "k-author", children: author }),
+        avatar && /* @__PURE__ */ jsx434(Avatar, { type: "image", children: /* @__PURE__ */ jsx434("img", { src: avatar }) }),
         props.children
       ]
     }
   );
 };
-ChatMessageGroup.states = states151;
-ChatMessageGroup.options = options141;
+ChatMessageGroup.states = states156;
+ChatMessageGroup.options = options146;
 ChatMessageGroup.className = CHATMESSAGEGROUP_CLASSNAME;
-ChatMessageGroup.defaultProps = defaultProps140;
+ChatMessageGroup.defaultProps = defaultProps145;
 
 // src/chat/chat-quick-replies.tsx
-import { jsx as jsx422 } from "react/jsx-runtime";
+import { jsx as jsx435 } from "react/jsx-runtime";
 var CHATQUICKREPLY_CLASSNAME = "k-quick-replies";
-var states152 = [];
-var options142 = {};
+var states157 = [];
+var options147 = {};
 var defaultOptions2 = {
   actions: ["Quick", "Reply", "Another quick", "Reply with different length"]
 };
@@ -15543,11 +15769,11 @@ var ChatQuickReply = (props) => {
   if (actions) {
     actions.map((action, index) => {
       children.push(
-        /* @__PURE__ */ jsx422("span", { className: "k-quick-reply", children: action }, index)
+        /* @__PURE__ */ jsx435("span", { className: "k-quick-reply", children: action }, index)
       );
     });
   }
-  return /* @__PURE__ */ jsx422(
+  return /* @__PURE__ */ jsx435(
     "div",
     {
       ...other,
@@ -15559,26 +15785,26 @@ var ChatQuickReply = (props) => {
     }
   );
 };
-ChatQuickReply.states = states152;
-ChatQuickReply.options = options142;
+ChatQuickReply.states = states157;
+ChatQuickReply.options = options147;
 ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME;
 ChatQuickReply.defaultOptions = defaultOptions2;
 
 // src/chat/templates/chat-normal.tsx
-import { Fragment as Fragment125, jsx as jsx423, jsxs as jsxs173 } from "react/jsx-runtime";
+import { Fragment as Fragment126, jsx as jsx436, jsxs as jsxs180 } from "react/jsx-runtime";
 
 // src/chat/templates/chat-with-toolbar.tsx
-import { Fragment as Fragment126, jsx as jsx424, jsxs as jsxs174 } from "react/jsx-runtime";
+import { Fragment as Fragment127, jsx as jsx437, jsxs as jsxs181 } from "react/jsx-runtime";
 
 // src/chat/templates/chat-with-options.tsx
-import { Fragment as Fragment127, jsx as jsx425, jsxs as jsxs175 } from "react/jsx-runtime";
+import { Fragment as Fragment128, jsx as jsx438, jsxs as jsxs182 } from "react/jsx-runtime";
 
 // src/timeline/timeline.spec.tsx
-import { Fragment as Fragment128, jsx as jsx426 } from "react/jsx-runtime";
+import { Fragment as Fragment129, jsx as jsx439 } from "react/jsx-runtime";
 var TIMELINE_CLASSNAME = `k-timeline`;
-var states153 = [];
-var options143 = {};
-var defaultProps141 = {
+var states158 = [];
+var options148 = {};
+var defaultProps146 = {
   orientation: "vertical"
 };
 var Timeline = (props) => {
@@ -15588,7 +15814,7 @@ var Timeline = (props) => {
     alternatingMode,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx426(
+  return /* @__PURE__ */ jsx439(
     "div",
     {
       ...other,
@@ -15601,21 +15827,21 @@ var Timeline = (props) => {
           [`${TIMELINE_CLASSNAME}-collapsible`]: collapsibleEvents
         }
       ),
-      children: /* @__PURE__ */ jsx426(Fragment128, { children: props.children })
+      children: /* @__PURE__ */ jsx439(Fragment129, { children: props.children })
     }
   );
 };
-Timeline.states = states153;
-Timeline.options = options143;
+Timeline.states = states158;
+Timeline.options = options148;
 Timeline.className = TIMELINE_CLASSNAME;
-Timeline.defaultProps = defaultProps141;
+Timeline.defaultProps = defaultProps146;
 
 // src/timeline/vertical-timeline-event.spec.tsx
-import { jsx as jsx427, jsxs as jsxs176 } from "react/jsx-runtime";
+import { jsx as jsx440, jsxs as jsxs183 } from "react/jsx-runtime";
 var TIMELINEVERTICALEVENT_CLASSNAME = `k-timeline-event`;
-var states154 = [];
-var options144 = {};
-var defaultProps142 = {
+var states159 = [];
+var options149 = {};
+var defaultProps147 = {
   collapsed: false,
   reverse: false,
   title: "Event title",
@@ -15625,15 +15851,15 @@ var defaultProps142 = {
 var VerticalTimelineEvent = (props) => {
   const {
     date,
-    content = defaultProps142.content,
-    collapsed = defaultProps142.collapsed,
-    reverse = defaultProps142.reverse,
-    title = defaultProps142.title,
-    subtitle = defaultProps142.subtitle,
+    content = defaultProps147.content,
+    collapsed = defaultProps147.collapsed,
+    reverse = defaultProps147.reverse,
+    title = defaultProps147.title,
+    subtitle = defaultProps147.subtitle,
     showCollapseButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs176(
+  return /* @__PURE__ */ jsxs183(
     "li",
     {
       ...other,
@@ -15643,43 +15869,43 @@ var VerticalTimelineEvent = (props) => {
         { "k-reverse": reverse }
       ),
       children: [
-        date && /* @__PURE__ */ jsx427("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx427("span", { className: "k-timeline-date", children: date }) }),
-        /* @__PURE__ */ jsx427(TimelineCircle, {}),
-        content && /* @__PURE__ */ jsx427("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ jsx427(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ jsxs176("div", { className: "k-card-inner", children: [
-          /* @__PURE__ */ jsxs176(CardHeader, { children: [
-            /* @__PURE__ */ jsx427(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
-            /* @__PURE__ */ jsx427(CardSubtitle, { children: subtitle })
+        date && /* @__PURE__ */ jsx440("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx440("span", { className: "k-timeline-date", children: date }) }),
+        /* @__PURE__ */ jsx440(TimelineCircle, {}),
+        content && /* @__PURE__ */ jsx440("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ jsx440(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ jsxs183("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ jsxs183(CardHeader, { children: [
+            /* @__PURE__ */ jsx440(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
+            /* @__PURE__ */ jsx440(CardSubtitle, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx427(CardBody, { children: /* @__PURE__ */ jsx427("div", { className: "k-card-description", children: content }) })
+          /* @__PURE__ */ jsx440(CardBody, { children: /* @__PURE__ */ jsx440("div", { className: "k-card-description", children: content }) })
         ] }) }) }),
         props.children
       ]
     }
   );
 };
-VerticalTimelineEvent.states = states154;
-VerticalTimelineEvent.options = options144;
+VerticalTimelineEvent.states = states159;
+VerticalTimelineEvent.options = options149;
 VerticalTimelineEvent.className = TIMELINEVERTICALEVENT_CLASSNAME;
-VerticalTimelineEvent.defaultProps = defaultProps142;
+VerticalTimelineEvent.defaultProps = defaultProps147;
 
 // src/timeline/horizontal-timeline-event.spec.tsx
-import { jsx as jsx428, jsxs as jsxs177 } from "react/jsx-runtime";
+import { jsx as jsx441, jsxs as jsxs184 } from "react/jsx-runtime";
 var TIMELINEHORIZONTALEVENT_CLASSNAME = `k-timeline-event`;
-var states155 = [];
-var options145 = {};
-var defaultProps143 = {
+var states160 = [];
+var options150 = {};
+var defaultProps148 = {
   title: "Event title",
   subtitle: "Event subtitle",
   content: "Event content"
 };
 var HorizontalTimelineEvent = (props) => {
   const {
-    content = defaultProps143.content,
-    title = defaultProps143.title,
-    subtitle = defaultProps143.subtitle,
+    content = defaultProps148.content,
+    title = defaultProps148.title,
+    subtitle = defaultProps148.subtitle,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs177(
+  return /* @__PURE__ */ jsxs184(
     "li",
     {
       ...other,
@@ -15688,35 +15914,35 @@ var HorizontalTimelineEvent = (props) => {
         TIMELINEHORIZONTALEVENT_CLASSNAME
       ),
       children: [
-        content && /* @__PURE__ */ jsx428("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ jsx428(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ jsxs177("div", { className: "k-card-inner", children: [
-          /* @__PURE__ */ jsxs177(CardHeader, { children: [
-            /* @__PURE__ */ jsx428(TimelineCardTitle, { children: title }),
-            /* @__PURE__ */ jsx428(CardSubtitle, { children: subtitle })
+        content && /* @__PURE__ */ jsx441("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ jsx441(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ jsxs184("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ jsxs184(CardHeader, { children: [
+            /* @__PURE__ */ jsx441(TimelineCardTitle, { children: title }),
+            /* @__PURE__ */ jsx441(CardSubtitle, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx428(CardBody, { children: /* @__PURE__ */ jsx428("div", { className: "k-card-description", children: content }) })
+          /* @__PURE__ */ jsx441(CardBody, { children: /* @__PURE__ */ jsx441("div", { className: "k-card-description", children: content }) })
         ] }) }) }),
         props.children
       ]
     }
   );
 };
-HorizontalTimelineEvent.states = states155;
-HorizontalTimelineEvent.options = options145;
+HorizontalTimelineEvent.states = states160;
+HorizontalTimelineEvent.options = options150;
 HorizontalTimelineEvent.className = TIMELINEHORIZONTALEVENT_CLASSNAME;
-HorizontalTimelineEvent.defaultProps = defaultProps143;
+HorizontalTimelineEvent.defaultProps = defaultProps148;
 
 // src/timeline/timeline-event-list.spec.tsx
-import { jsx as jsx429 } from "react/jsx-runtime";
+import { jsx as jsx442 } from "react/jsx-runtime";
 
 // src/timeline/timeline-flag-wrap.spec.tsx
-import { jsx as jsx430, jsxs as jsxs178 } from "react/jsx-runtime";
+import { jsx as jsx443, jsxs as jsxs185 } from "react/jsx-runtime";
 var TIMELINEFLAGWRAP_CLASSNAME = `k-timeline-flag-wrap`;
-var states156 = [
+var states161 = [
   States.focus,
   States.selected
 ];
-var options146 = {};
-var defaultProps144 = {
+var options151 = {};
+var defaultProps149 = {
   year: "2020"
 };
 var TimelineFlagWrap = (props) => {
@@ -15724,7 +15950,7 @@ var TimelineFlagWrap = (props) => {
     year,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs178(
+  return /* @__PURE__ */ jsxs185(
     "li",
     {
       ...other,
@@ -15733,25 +15959,25 @@ var TimelineFlagWrap = (props) => {
         TIMELINEFLAGWRAP_CLASSNAME
       ),
       children: [
-        /* @__PURE__ */ jsx430("span", { className: "k-timeline-flag", children: year }),
+        /* @__PURE__ */ jsx443("span", { className: "k-timeline-flag", children: year }),
         props.children
       ]
     }
   );
 };
-TimelineFlagWrap.states = states156;
-TimelineFlagWrap.options = options146;
+TimelineFlagWrap.states = states161;
+TimelineFlagWrap.options = options151;
 TimelineFlagWrap.className = TIMELINEFLAGWRAP_CLASSNAME;
-TimelineFlagWrap.defaultProps = defaultProps144;
+TimelineFlagWrap.defaultProps = defaultProps149;
 
 // src/timeline/timeline-circle.spec.tsx
-import { jsx as jsx431 } from "react/jsx-runtime";
+import { jsx as jsx444 } from "react/jsx-runtime";
 var TIMELINECIRCLE_CLASSNAME = `k-timeline-circle`;
 var TimelineCircle = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsx431(
+  return /* @__PURE__ */ jsx444(
     "span",
     {
       ...other,
@@ -15764,19 +15990,19 @@ var TimelineCircle = (props) => {
 };
 
 // src/timeline/timeline-flag.spec.tsx
-import { jsx as jsx432 } from "react/jsx-runtime";
+import { jsx as jsx445 } from "react/jsx-runtime";
 
 // src/timeline/timeline-card.spec.tsx
-import { jsx as jsx433, jsxs as jsxs179 } from "react/jsx-runtime";
-var states157 = [];
-var defaultProps145 = {};
+import { jsx as jsx446, jsxs as jsxs186 } from "react/jsx-runtime";
+var states162 = [];
+var defaultProps150 = {};
 var TimelineCard = (props) => {
   const {
     callout,
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs179(
+  return /* @__PURE__ */ jsxs186(
     Card,
     {
       className: classNames(
@@ -15786,27 +16012,27 @@ var TimelineCard = (props) => {
       callout: "true",
       ...other,
       children: [
-        callout && /* @__PURE__ */ jsx433(TimelineCardCallout, { callout }),
+        callout && /* @__PURE__ */ jsx446(TimelineCardCallout, { callout }),
         children
       ]
     }
   );
 };
-TimelineCard.states = states157;
-TimelineCard.defaultProps = defaultProps145;
+TimelineCard.states = states162;
+TimelineCard.defaultProps = defaultProps150;
 
 // src/timeline/timeline-card-title.tsx
-import { jsx as jsx434, jsxs as jsxs180 } from "react/jsx-runtime";
+import { jsx as jsx447, jsxs as jsxs187 } from "react/jsx-runtime";
 var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
-var states158 = [];
-var defaultProps146 = {};
+var states163 = [];
+var defaultProps151 = {};
 var TimelineCardTitle = (props) => {
   const {
     collapsible,
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs180(
+  return /* @__PURE__ */ jsxs187(
     "div",
     {
       className: classNames(
@@ -15815,26 +16041,26 @@ var TimelineCardTitle = (props) => {
       ),
       ...other,
       children: [
-        /* @__PURE__ */ jsx434("span", { className: "k-event-title", children }),
-        collapsible && /* @__PURE__ */ jsx434("span", { className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button", children: /* @__PURE__ */ jsx434(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
+        /* @__PURE__ */ jsx447("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ jsx447("span", { className: "k-event-collapse k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button", children: /* @__PURE__ */ jsx447(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
       ]
     }
   );
 };
-TimelineCardTitle.states = states158;
+TimelineCardTitle.states = states163;
 TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
-TimelineCardTitle.defaultProps = defaultProps146;
+TimelineCardTitle.defaultProps = defaultProps151;
 
 // src/timeline/timeline-card-callout.tsx
-import { jsx as jsx435 } from "react/jsx-runtime";
+import { jsx as jsx448 } from "react/jsx-runtime";
 var TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
-var states159 = [];
-var defaultProps147 = {};
+var states164 = [];
+var defaultProps152 = {};
 var TimelineCardCallout = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsx435(
+  return /* @__PURE__ */ jsx448(
     CardCallout,
     {
       className: classNames(
@@ -15845,24 +16071,24 @@ var TimelineCardCallout = (props) => {
     }
   );
 };
-TimelineCardCallout.states = states159;
+TimelineCardCallout.states = states164;
 TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
-TimelineCardCallout.defaultProps = defaultProps147;
+TimelineCardCallout.defaultProps = defaultProps152;
 
 // src/timeline/timeline-date-wrap.spec.tsx
-import { jsx as jsx436 } from "react/jsx-runtime";
+import { jsx as jsx449 } from "react/jsx-runtime";
 var TIMELINEDATEWRAP_CLASSNAME = `k-timeline-date-wrap`;
-var states160 = [];
-var options147 = {};
-var defaultProps148 = {
+var states165 = [];
+var options152 = {};
+var defaultProps153 = {
   date: "May 25, 2008"
 };
 var TimelineDateWrap = (props) => {
   const {
-    date = defaultProps148.date,
+    date = defaultProps153.date,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx436(
+  return /* @__PURE__ */ jsx449(
     "div",
     {
       ...other,
@@ -15870,52 +16096,52 @@ var TimelineDateWrap = (props) => {
         props.className,
         TIMELINEDATEWRAP_CLASSNAME
       ),
-      children: /* @__PURE__ */ jsx436("span", { className: "k-timeline-date", children: date })
+      children: /* @__PURE__ */ jsx449("span", { className: "k-timeline-date", children: date })
     }
   );
 };
-TimelineDateWrap.states = states160;
-TimelineDateWrap.options = options147;
+TimelineDateWrap.states = states165;
+TimelineDateWrap.options = options152;
 TimelineDateWrap.className = TIMELINEDATEWRAP_CLASSNAME;
-TimelineDateWrap.defaultProps = defaultProps148;
+TimelineDateWrap.defaultProps = defaultProps153;
 
 // src/timeline/timeline-track-wrap.spec.tsx
-import { jsx as jsx437, jsxs as jsxs181 } from "react/jsx-runtime";
+import { jsx as jsx450, jsxs as jsxs188 } from "react/jsx-runtime";
 
 // src/timeline/timeline-track.spec.tsx
-import { jsx as jsx438 } from "react/jsx-runtime";
+import { jsx as jsx451 } from "react/jsx-runtime";
 
 // src/timeline/timeline-track-item.spec.tsx
-import { jsxs as jsxs182 } from "react/jsx-runtime";
+import { jsxs as jsxs189 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-normal.tsx
-import { jsx as jsx439, jsxs as jsxs183 } from "react/jsx-runtime";
+import { jsx as jsx452, jsxs as jsxs190 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-normal-collapsible.tsx
-import { jsx as jsx440, jsxs as jsxs184 } from "react/jsx-runtime";
+import { jsx as jsx453, jsxs as jsxs191 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-normal-alternating.tsx
-import { jsx as jsx441, jsxs as jsxs185 } from "react/jsx-runtime";
+import { jsx as jsx454, jsxs as jsxs192 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-horizontal.tsx
-import { Fragment as Fragment129, jsx as jsx442, jsxs as jsxs186 } from "react/jsx-runtime";
+import { Fragment as Fragment130, jsx as jsx455, jsxs as jsxs193 } from "react/jsx-runtime";
 
 // src/pdf-viewer/pdf-viewer.spec.tsx
-import { Fragment as Fragment130, jsx as jsx443, jsxs as jsxs187 } from "react/jsx-runtime";
+import { Fragment as Fragment131, jsx as jsx456, jsxs as jsxs194 } from "react/jsx-runtime";
 var PDFVIEWER_CLASSNAME = `k-pdf-viewer`;
-var states161 = [
+var states166 = [
   States.disabled
 ];
-var options148 = {};
-var defaultToolbar3 = /* @__PURE__ */ jsx443(Fragment130, { children: /* @__PURE__ */ jsxs187(Toolbar, { resizable: true, children: [
-  /* @__PURE__ */ jsx443(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
-  /* @__PURE__ */ jsx443("span", { className: "k-spacer" }),
-  /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "search" }),
-  /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "file-pdf" }),
-  /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "print" }),
-  /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "fullscreen" })
+var options153 = {};
+var defaultToolbar3 = /* @__PURE__ */ jsx456(Fragment131, { children: /* @__PURE__ */ jsxs194(Toolbar, { resizable: true, children: [
+  /* @__PURE__ */ jsx456(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
+  /* @__PURE__ */ jsx456("span", { className: "k-spacer" }),
+  /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "search" }),
+  /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "file-pdf" }),
+  /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "print" }),
+  /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "fullscreen" })
 ] }) });
-var defaultProps149 = {
+var defaultProps154 = {
   toolbar: defaultToolbar3,
   showSearchPanel: false,
   blank: false
@@ -15928,7 +16154,7 @@ var PDFViewer = (props) => {
     blank,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs187(
+  return /* @__PURE__ */ jsxs194(
     "div",
     {
       ...other,
@@ -15939,42 +16165,42 @@ var PDFViewer = (props) => {
       ),
       children: [
         toolbar,
-        /* @__PURE__ */ jsxs187("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: [
-          showSearchPanel && /* @__PURE__ */ jsxs187("div", { className: "k-search-panel k-pos-sticky k-top-center", children: [
-            /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "handle-drag", className: "k-search-dialog-draghandle" }),
-            /* @__PURE__ */ jsx443(
+        /* @__PURE__ */ jsxs194("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: [
+          showSearchPanel && /* @__PURE__ */ jsxs194("div", { className: "k-search-panel k-pos-sticky k-top-center", children: [
+            /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "handle-drag", className: "k-search-dialog-draghandle" }),
+            /* @__PURE__ */ jsx456(
               Textbox,
               {
-                suffix: /* @__PURE__ */ jsx443(Button, { fillMode: "flat", className: "k-match-case-button", icon: "convert-lowercase" })
+                suffix: /* @__PURE__ */ jsx456(Button, { fillMode: "flat", className: "k-match-case-button", icon: "convert-lowercase" })
               }
             ),
-            /* @__PURE__ */ jsxs187("span", { className: "k-search-matches", children: [
-              /* @__PURE__ */ jsx443("span", { children: "0" }),
+            /* @__PURE__ */ jsxs194("span", { className: "k-search-matches", children: [
+              /* @__PURE__ */ jsx456("span", { children: "0" }),
               " of ",
-              /* @__PURE__ */ jsx443("span", { children: "1" })
+              /* @__PURE__ */ jsx456("span", { children: "1" })
             ] }),
-            /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "arrow-up" }),
-            /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "arrow-down" }),
-            /* @__PURE__ */ jsx443(Button, { fillMode: "flat", icon: "x" })
+            /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "arrow-up" }),
+            /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "arrow-down" }),
+            /* @__PURE__ */ jsx456(Button, { fillMode: "flat", icon: "x" })
           ] }),
-          /* @__PURE__ */ jsx443("div", { className: "k-pdf-viewer-pages", children: blank ? /* @__PURE__ */ jsxs187("div", { className: "k-page k-blank-page", children: [
-            /* @__PURE__ */ jsx443(DropzoneNormal, {}),
-            /* @__PURE__ */ jsx443(UploadNormal, { empty: true, status: "upload" })
+          /* @__PURE__ */ jsx456("div", { className: "k-pdf-viewer-pages", children: blank ? /* @__PURE__ */ jsxs194("div", { className: "k-page k-blank-page", children: [
+            /* @__PURE__ */ jsx456(DropzoneNormal, {}),
+            /* @__PURE__ */ jsx456(UploadNormal, { empty: true, status: "upload" })
           ] }) : props.children })
         ] })
       ]
     }
   );
 };
-PDFViewer.states = states161;
-PDFViewer.options = options148;
+PDFViewer.states = states166;
+PDFViewer.options = options153;
 PDFViewer.className = PDFVIEWER_CLASSNAME;
-PDFViewer.defaultProps = defaultProps149;
+PDFViewer.defaultProps = defaultProps154;
 
 // src/pdf-viewer/pdf-viewer-page.tsx
-import { jsx as jsx444 } from "react/jsx-runtime";
+import { jsx as jsx457 } from "react/jsx-runtime";
 var PDFVIEWERPAGE_CLASSNAME = `k-page`;
-var defaultProps150 = {
+var defaultProps155 = {
   width: "720px",
   height: "360px"
 };
@@ -15984,7 +16210,7 @@ var PDFViewerPage = (props) => {
     height,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx444(
+  return /* @__PURE__ */ jsx457(
     "div",
     {
       ...other,
@@ -15997,23 +16223,23 @@ var PDFViewerPage = (props) => {
   );
 };
 PDFViewerPage.className = PDFVIEWERPAGE_CLASSNAME;
-PDFViewerPage.defaultProps = defaultProps150;
+PDFViewerPage.defaultProps = defaultProps155;
 
 // src/pdf-viewer/templates/pdf-viewer-normal.tsx
-import { Fragment as Fragment131, jsx as jsx445, jsxs as jsxs188 } from "react/jsx-runtime";
+import { Fragment as Fragment132, jsx as jsx458, jsxs as jsxs195 } from "react/jsx-runtime";
 
 // src/pdf-viewer/templates/pdf-viewer-blank.tsx
-import { jsx as jsx446 } from "react/jsx-runtime";
+import { jsx as jsx459 } from "react/jsx-runtime";
 
 // src/pdf-viewer/templates/pdf-viewer-with-search-panel.tsx
-import { Fragment as Fragment132, jsx as jsx447, jsxs as jsxs189 } from "react/jsx-runtime";
+import { Fragment as Fragment133, jsx as jsx460, jsxs as jsxs196 } from "react/jsx-runtime";
 
 // src/scrollview/scrollview-spec.tsx
-import { Fragment as Fragment133, jsx as jsx448, jsxs as jsxs190 } from "react/jsx-runtime";
+import { Fragment as Fragment134, jsx as jsx461, jsxs as jsxs197 } from "react/jsx-runtime";
 var SCROLLVIEW_CLASSNAME = "k-scrollview";
-var states162 = [];
-var options149 = {};
-var defaultProps151 = {
+var states167 = [];
+var options154 = {};
+var defaultProps156 = {
   mode: "normal",
   views: 9,
   animate: true,
@@ -16023,12 +16249,12 @@ var defaultProps151 = {
 };
 var ScrollView = (props) => {
   const {
-    mode = defaultProps151.mode,
-    views = defaultProps151.views,
-    animate = defaultProps151.animate,
-    arrows = defaultProps151.arrows,
-    pager = defaultProps151.pager,
-    rtl = defaultProps151.rtl,
+    mode = defaultProps156.mode,
+    views = defaultProps156.views,
+    animate = defaultProps156.animate,
+    arrows = defaultProps156.arrows,
+    pager = defaultProps156.pager,
+    rtl = defaultProps156.rtl,
     ...other
   } = props;
   const scrollviewViews = [];
@@ -16036,10 +16262,10 @@ var ScrollView = (props) => {
   const iconNext = rtl ? "chevron-left" : "chevron-right";
   for (let i = 0; i < views; i++) {
     scrollviewViews.push(
-      /* @__PURE__ */ jsx448("div", { className: "k-scrollview-view" }, i)
+      /* @__PURE__ */ jsx461("div", { className: "k-scrollview-view" }, i)
     );
   }
-  return /* @__PURE__ */ jsxs190(
+  return /* @__PURE__ */ jsxs197(
     "div",
     {
       ...other,
@@ -16052,44 +16278,44 @@ var ScrollView = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx448("div", { className: classNames(
+        /* @__PURE__ */ jsx461("div", { className: classNames(
           "k-scrollview-wrap",
           {
             ["k-scrollview-animate"]: animate
           }
         ), style: { "--kendo-scrollview-views": views, "--kendo-scrollview-current": 5 }, children: scrollviewViews }),
-        /* @__PURE__ */ jsxs190("div", { className: "k-scrollview-elements", children: [
-          arrows && /* @__PURE__ */ jsxs190(Fragment133, { children: [
-            /* @__PURE__ */ jsx448("span", { className: "k-scrollview-prev", children: /* @__PURE__ */ jsx448(Icon, { icon: iconPrev, size: "xxxlarge" }) }),
-            /* @__PURE__ */ jsx448("span", { className: "k-scrollview-next", children: /* @__PURE__ */ jsx448(Icon, { icon: iconNext, size: "xxxlarge" }) })
+        /* @__PURE__ */ jsxs197("div", { className: "k-scrollview-elements", children: [
+          arrows && /* @__PURE__ */ jsxs197(Fragment134, { children: [
+            /* @__PURE__ */ jsx461("span", { className: "k-scrollview-prev", children: /* @__PURE__ */ jsx461(Icon, { icon: iconPrev, size: "xxxlarge" }) }),
+            /* @__PURE__ */ jsx461("span", { className: "k-scrollview-next", children: /* @__PURE__ */ jsx461(Icon, { icon: iconNext, size: "xxxlarge" }) })
           ] }),
-          pager && /* @__PURE__ */ jsx448("div", { className: "k-scrollview-nav-wrap", children: /* @__PURE__ */ jsxs190("div", { className: "k-scrollview-nav", children: [
-            mode === "light" && /* @__PURE__ */ jsxs190(Fragment133, { children: [
-              /* @__PURE__ */ jsx448("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link k-primary k-focus" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link k-focus" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link" })
+          pager && /* @__PURE__ */ jsx461("div", { className: "k-scrollview-nav-wrap", children: /* @__PURE__ */ jsxs197("div", { className: "k-scrollview-nav", children: [
+            mode === "light" && /* @__PURE__ */ jsxs197(Fragment134, { children: [
+              /* @__PURE__ */ jsx461("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link k-primary k-focus" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link k-focus" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link" })
             ] }),
-            mode === "normal" && /* @__PURE__ */ jsxs190(Fragment133, { children: [
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.5)" } })
+            mode === "normal" && /* @__PURE__ */ jsxs197(Fragment134, { children: [
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.5)" } })
             ] }),
-            mode === "dark" && /* @__PURE__ */ jsxs190(Fragment133, { children: [
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx448("span", { className: "k-link", style: { transform: "scale(0.5)" } })
+            mode === "dark" && /* @__PURE__ */ jsxs197(Fragment134, { children: [
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx461("span", { className: "k-link", style: { transform: "scale(0.5)" } })
             ] })
           ] }) })
         ] })
@@ -16097,83 +16323,83 @@ var ScrollView = (props) => {
     }
   );
 };
-ScrollView.states = states162;
-ScrollView.options = options149;
+ScrollView.states = states167;
+ScrollView.options = options154;
 ScrollView.className = SCROLLVIEW_CLASSNAME;
-ScrollView.defaultProps = defaultProps151;
+ScrollView.defaultProps = defaultProps156;
 
 // src/scrollview/templates/scrollview-normal.tsx
-import { jsx as jsx449 } from "react/jsx-runtime";
+import { jsx as jsx462 } from "react/jsx-runtime";
 
 // src/prompt/prompt.spec.tsx
-import { Fragment as Fragment134, jsx as jsx450 } from "react/jsx-runtime";
+import { Fragment as Fragment135, jsx as jsx463 } from "react/jsx-runtime";
 var PROMPT_CLASSNAME = `k-prompt`;
-var states163 = [];
-var options150 = {};
-var defaultProps152 = {};
+var states168 = [];
+var options155 = {};
+var defaultProps157 = {};
 var Prompt = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsx450("div", { ...other, className: classNames(props.className, PROMPT_CLASSNAME), children: /* @__PURE__ */ jsx450(Fragment134, { children: props.children }) });
+  return /* @__PURE__ */ jsx463("div", { ...other, className: classNames(props.className, PROMPT_CLASSNAME), children: /* @__PURE__ */ jsx463(Fragment135, { children: props.children }) });
 };
-Prompt.states = states163;
-Prompt.options = options150;
+Prompt.states = states168;
+Prompt.options = options155;
 Prompt.className = PROMPT_CLASSNAME;
-Prompt.defaultProps = defaultProps152;
+Prompt.defaultProps = defaultProps157;
 
 // src/prompt/prompt-header.tsx
-import { jsx as jsx451 } from "react/jsx-runtime";
+import { jsx as jsx464 } from "react/jsx-runtime";
 
 // src/prompt/prompt-content.tsx
-import { Fragment as Fragment135, jsx as jsx452 } from "react/jsx-runtime";
+import { Fragment as Fragment136, jsx as jsx465 } from "react/jsx-runtime";
 
 // src/prompt/prompt-view.tsx
-import { Fragment as Fragment136, jsx as jsx453, jsxs as jsxs191 } from "react/jsx-runtime";
+import { Fragment as Fragment137, jsx as jsx466, jsxs as jsxs198 } from "react/jsx-runtime";
 
 // src/prompt/prompt-footer.tsx
-import { jsx as jsx454 } from "react/jsx-runtime";
+import { jsx as jsx467 } from "react/jsx-runtime";
 
 // src/prompt/prompt-suggestion.tsx
-import { jsx as jsx455 } from "react/jsx-runtime";
+import { jsx as jsx468 } from "react/jsx-runtime";
 
 // src/prompt/prompt-setting.tsx
-import { jsx as jsx456 } from "react/jsx-runtime";
+import { jsx as jsx469 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-normal.tsx
-import { jsx as jsx457, jsxs as jsxs192 } from "react/jsx-runtime";
+import { jsx as jsx470, jsxs as jsxs199 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-suggestions.tsx
-import { Fragment as Fragment137, jsx as jsx458, jsxs as jsxs193 } from "react/jsx-runtime";
+import { Fragment as Fragment138, jsx as jsx471, jsxs as jsxs200 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-settings.tsx
-import { Fragment as Fragment138, jsx as jsx459, jsxs as jsxs194 } from "react/jsx-runtime";
+import { Fragment as Fragment139, jsx as jsx472, jsxs as jsxs201 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-output.tsx
-import { jsx as jsx460, jsxs as jsxs195 } from "react/jsx-runtime";
+import { jsx as jsx473, jsxs as jsxs202 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-more-actions.tsx
-import { jsx as jsx461, jsxs as jsxs196 } from "react/jsx-runtime";
+import { jsx as jsx474, jsxs as jsxs203 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-popup.tsx
-import { jsx as jsx462, jsxs as jsxs197 } from "react/jsx-runtime";
+import { jsx as jsx475, jsxs as jsxs204 } from "react/jsx-runtime";
 
 // src/orgchart/orgchart.spec.tsx
-import { jsx as jsx463 } from "react/jsx-runtime";
+import { jsx as jsx476 } from "react/jsx-runtime";
 var ORGCHART_CLASSNAME = `k-orgchart`;
-var states164 = [];
-var options151 = {};
-var defaultProps153 = {
+var states169 = [];
+var options156 = {};
+var defaultProps158 = {
   width: "100%",
   height: "300px"
 };
 var Orgchart = (props) => {
   const {
-    width = defaultProps153.width,
-    height = defaultProps153.height,
+    width = defaultProps158.width,
+    height = defaultProps158.height,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx463(
+  return /* @__PURE__ */ jsx476(
     "div",
     {
       ...other,
@@ -16181,19 +16407,19 @@ var Orgchart = (props) => {
         props.className,
         ORGCHART_CLASSNAME
       ),
-      children: /* @__PURE__ */ jsx463("div", { className: "k-orgchart-container", style: { width, height }, children: props.children })
+      children: /* @__PURE__ */ jsx476("div", { className: "k-orgchart-container", style: { width, height }, children: props.children })
     }
   );
 };
-Orgchart.states = states164;
-Orgchart.options = options151;
+Orgchart.states = states169;
+Orgchart.options = options156;
 Orgchart.className = ORGCHART_CLASSNAME;
-Orgchart.defaultProps = defaultProps153;
+Orgchart.defaultProps = defaultProps158;
 
 // src/orgchart/orgchart-node.tsx
-import { jsx as jsx464, jsxs as jsxs198 } from "react/jsx-runtime";
+import { jsx as jsx477, jsxs as jsxs205 } from "react/jsx-runtime";
 var ORGCHARTNODE_CLASSNAME = `k-orgchart-node`;
-var defaultProps154 = {
+var defaultProps159 = {
   buttonIcon: "plus"
 };
 var OrgchartNode = (props) => {
@@ -16205,12 +16431,12 @@ var OrgchartNode = (props) => {
     lineBottom,
     lineTop,
     button,
-    buttonIcon: buttonIcon2 = defaultProps154.buttonIcon,
+    buttonIcon: buttonIcon2 = defaultProps159.buttonIcon,
     avatar,
     avatarType,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs198(
+  return /* @__PURE__ */ jsxs205(
     "div",
     {
       ...other,
@@ -16221,35 +16447,35 @@ var OrgchartNode = (props) => {
         "k-align-items-center"
       ),
       children: [
-        lineTop && /* @__PURE__ */ jsx464("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        /* @__PURE__ */ jsx464(Card, { className: "k-orgchart-card", children: /* @__PURE__ */ jsxs198(CardBody, { className: "k-hstack", details, style: { borderTopColor: color }, children: [
-          /* @__PURE__ */ jsx464(Avatar, { type: avatarType, themeColor: "secondary", children: avatarType === "image" ? /* @__PURE__ */ jsx464("img", { src: avatar }) : avatar }),
-          /* @__PURE__ */ jsxs198("div", { className: "k-card-title-wrap k-vstack", children: [
-            /* @__PURE__ */ jsx464(CardTitle, { className: "k-text-ellipsis", children: title }),
-            /* @__PURE__ */ jsx464("span", { className: "k-spacer" }),
-            /* @__PURE__ */ jsx464(CardSubtitle, { className: "k-text-ellipsis", children: subtitle })
+        lineTop && /* @__PURE__ */ jsx477("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        /* @__PURE__ */ jsx477(Card, { className: "k-orgchart-card", children: /* @__PURE__ */ jsxs205(CardBody, { className: "k-hstack", details, style: { borderTopColor: color }, children: [
+          /* @__PURE__ */ jsx477(Avatar, { type: avatarType, themeColor: "secondary", children: avatarType === "image" ? /* @__PURE__ */ jsx477("img", { src: avatar }) : avatar }),
+          /* @__PURE__ */ jsxs205("div", { className: "k-card-title-wrap k-vstack", children: [
+            /* @__PURE__ */ jsx477(CardTitle, { className: "k-text-ellipsis", children: title }),
+            /* @__PURE__ */ jsx477("span", { className: "k-spacer" }),
+            /* @__PURE__ */ jsx477(CardSubtitle, { className: "k-text-ellipsis", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx464("span", { className: "k-spacer" })
+          /* @__PURE__ */ jsx477("span", { className: "k-spacer" })
         ] }) }),
-        lineBottom && /* @__PURE__ */ jsx464("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        button && /* @__PURE__ */ jsx464(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
+        lineBottom && /* @__PURE__ */ jsx477("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        button && /* @__PURE__ */ jsx477(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
       ]
     }
   );
 };
 
 // src/orgchart/orgchart-group.tsx
-import { Fragment as Fragment139, jsx as jsx465, jsxs as jsxs199 } from "react/jsx-runtime";
+import { Fragment as Fragment140, jsx as jsx478, jsxs as jsxs206 } from "react/jsx-runtime";
 var ORGCHARTGROUP_CLASSNAME = `k-orgchart-group`;
-var states165 = [];
-var options152 = {};
-var defaultProps155 = {
+var states170 = [];
+var options157 = {};
+var defaultProps160 = {
   orientation: "horizontal"
 };
 var OrgchartGroup = (props) => {
   const {
     children,
-    orientation = defaultProps155.orientation,
+    orientation = defaultProps160.orientation,
     justifyContent,
     ...other
   } = props;
@@ -16272,7 +16498,7 @@ var OrgchartGroup = (props) => {
       }
     }
   }
-  return /* @__PURE__ */ jsxs199(
+  return /* @__PURE__ */ jsxs206(
     "div",
     {
       ...other,
@@ -16286,7 +16512,7 @@ var OrgchartGroup = (props) => {
       ),
       style: { width: "100%" },
       children: [
-        chartNodes.length > 0 && /* @__PURE__ */ jsx465(
+        chartNodes.length > 0 && /* @__PURE__ */ jsx478(
           "div",
           {
             className: classNames(
@@ -16296,26 +16522,26 @@ var OrgchartGroup = (props) => {
                 [`k-${kendoThemeMaps.orientationMap[orientation] || orientation}`]: orientation
               }
             ),
-            children: /* @__PURE__ */ jsx465(Fragment139, { children: chartNodes })
+            children: /* @__PURE__ */ jsx478(Fragment140, { children: chartNodes })
           }
         ),
-        /* @__PURE__ */ jsx465(Fragment139, { children: chartGroups })
+        /* @__PURE__ */ jsx478(Fragment140, { children: chartGroups })
       ]
     }
   );
 };
-OrgchartGroup.states = states165;
-OrgchartGroup.options = options152;
+OrgchartGroup.states = states170;
+OrgchartGroup.options = options157;
 OrgchartGroup.className = ORGCHARTGROUP_CLASSNAME;
-OrgchartGroup.defaultProps = defaultProps155;
+OrgchartGroup.defaultProps = defaultProps160;
 
 // src/orgchart/orgchart-node-group.tsx
-import { jsx as jsx466, jsxs as jsxs200 } from "react/jsx-runtime";
+import { jsx as jsx479, jsxs as jsxs207 } from "react/jsx-runtime";
 var ORGCHARTNODEGROUP_CLASSNAME = `k-orgchart-node-group`;
-var states166 = [
+var states171 = [
   States.focus
 ];
-var defaultProps156 = {
+var defaultProps161 = {
   orientation: "horizontal",
   buttonIcon: "plus"
 };
@@ -16326,12 +16552,12 @@ var OrgchartNodeGroup = (props) => {
     lineBottom,
     lineTop,
     button,
-    buttonIcon: buttonIcon2 = defaultProps156.buttonIcon,
+    buttonIcon: buttonIcon2 = defaultProps161.buttonIcon,
     focus,
-    orientation = defaultProps156.orientation,
+    orientation = defaultProps161.orientation,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs200(
+  return /* @__PURE__ */ jsxs207(
     "div",
     {
       ...other,
@@ -16342,8 +16568,8 @@ var OrgchartNodeGroup = (props) => {
         "k-align-items-center"
       ),
       children: [
-        lineTop && /* @__PURE__ */ jsx466("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        /* @__PURE__ */ jsxs200(
+        lineTop && /* @__PURE__ */ jsx479("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        /* @__PURE__ */ jsxs207(
           "div",
           {
             className: classNames(
@@ -16354,9 +16580,9 @@ var OrgchartNodeGroup = (props) => {
               })
             ),
             children: [
-              title && /* @__PURE__ */ jsx466("div", { className: "k-orgchart-node-group-title", children: title }),
-              subtitle && /* @__PURE__ */ jsx466("div", { className: "k-orgchart-node-group-subtitle", children: subtitle }),
-              /* @__PURE__ */ jsx466(
+              title && /* @__PURE__ */ jsx479("div", { className: "k-orgchart-node-group-title", children: title }),
+              subtitle && /* @__PURE__ */ jsx479("div", { className: "k-orgchart-node-group-subtitle", children: subtitle }),
+              /* @__PURE__ */ jsx479(
                 "div",
                 {
                   className: classNames(
@@ -16371,51 +16597,51 @@ var OrgchartNodeGroup = (props) => {
             ]
           }
         ),
-        lineBottom && /* @__PURE__ */ jsx466("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        button && /* @__PURE__ */ jsx466(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
+        lineBottom && /* @__PURE__ */ jsx479("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        button && /* @__PURE__ */ jsx479(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
       ]
     }
   );
 };
-OrgchartNodeGroup.states = states166;
+OrgchartNodeGroup.states = states171;
 
 // src/orgchart/templates/orgchart-normal.tsx
-import { jsx as jsx467, jsxs as jsxs201 } from "react/jsx-runtime";
+import { jsx as jsx480, jsxs as jsxs208 } from "react/jsx-runtime";
 
 // src/orgchart/templates/orgchart-vertical.tsx
-import { jsx as jsx468, jsxs as jsxs202 } from "react/jsx-runtime";
+import { jsx as jsx481, jsxs as jsxs209 } from "react/jsx-runtime";
 
 // src/orgchart/templates/orgchart-group-normal.tsx
-import { jsx as jsx469, jsxs as jsxs203 } from "react/jsx-runtime";
+import { jsx as jsx482, jsxs as jsxs210 } from "react/jsx-runtime";
 
 // src/orgchart/templates/orgchart-group-vertical.tsx
-import { jsx as jsx470, jsxs as jsxs204 } from "react/jsx-runtime";
+import { jsx as jsx483, jsxs as jsxs211 } from "react/jsx-runtime";
 
 // src/signature/signature.spec.tsx
-import { jsx as jsx471, jsxs as jsxs205 } from "react/jsx-runtime";
+import { jsx as jsx484, jsxs as jsxs212 } from "react/jsx-runtime";
 var SIGNATURE_CLASSNAME = `k-signature`;
-var states167 = [
+var states172 = [
   States.hover,
   States.focus,
   States.valid,
   States.invalid,
   States.disabled
 ];
-var options153 = {
+var options158 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps157 = {
+var defaultProps162 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid
 };
 var Signature = (props) => {
   const {
-    size = defaultProps157.size,
-    rounded = defaultProps157.rounded,
-    fillMode = defaultProps157.fillMode,
+    size = defaultProps162.size,
+    rounded = defaultProps162.rounded,
+    fillMode = defaultProps162.fillMode,
     hover,
     focus,
     valid,
@@ -16424,7 +16650,7 @@ var Signature = (props) => {
     maximized,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs205(
+  return /* @__PURE__ */ jsxs212(
     "div",
     {
       ...other,
@@ -16452,8 +16678,8 @@ var Signature = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx471("canvas", { className: "k-signature-canvas" }),
-        /* @__PURE__ */ jsxs205(
+        /* @__PURE__ */ jsx484("canvas", { className: "k-signature-canvas" }),
+        /* @__PURE__ */ jsxs212(
           "div",
           {
             className: classNames(
@@ -16461,7 +16687,7 @@ var Signature = (props) => {
               "k-signature-actions-top"
             ),
             children: [
-              /* @__PURE__ */ jsx471(
+              /* @__PURE__ */ jsx484(
                 Button,
                 {
                   className: classNames(
@@ -16475,7 +16701,7 @@ var Signature = (props) => {
                   fillMode: "flat"
                 }
               ),
-              /* @__PURE__ */ jsx471(
+              /* @__PURE__ */ jsx484(
                 Button,
                 {
                   className: classNames(
@@ -16492,15 +16718,15 @@ var Signature = (props) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx471("div", { className: "k-signature-line" }),
-        /* @__PURE__ */ jsx471(
+        /* @__PURE__ */ jsx484("div", { className: "k-signature-line" }),
+        /* @__PURE__ */ jsx484(
           "div",
           {
             className: classNames(
               "k-signature-actions",
               "k-signature-actions-bottom"
             ),
-            children: /* @__PURE__ */ jsx471(
+            children: /* @__PURE__ */ jsx484(
               Button,
               {
                 className: classNames(
@@ -16519,27 +16745,27 @@ var Signature = (props) => {
     }
   );
 };
-Signature.states = states167;
-Signature.options = options153;
+Signature.states = states172;
+Signature.options = options158;
 Signature.className = SIGNATURE_CLASSNAME;
-Signature.defaultProps = defaultProps157;
+Signature.defaultProps = defaultProps162;
 
 // src/editor/editor.spec.tsx
-import { jsx as jsx472 } from "react/jsx-runtime";
+import { jsx as jsx485 } from "react/jsx-runtime";
 var EDITOR_CLASSNAME = `k-editor`;
-var states168 = [
+var states173 = [
   States.readonly,
   States.disabled
 ];
-var options154 = {};
-var defaultProps158 = {};
+var options159 = {};
+var defaultProps163 = {};
 var Editor = (props) => {
   const {
     readonly,
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx472(
+  return /* @__PURE__ */ jsx485(
     "div",
     {
       ...other,
@@ -16555,775 +16781,775 @@ var Editor = (props) => {
     }
   );
 };
-Editor.states = states168;
-Editor.options = options154;
+Editor.states = states173;
+Editor.options = options159;
 Editor.className = EDITOR_CLASSNAME;
-Editor.defaultProps = defaultProps158;
+Editor.defaultProps = defaultProps163;
 
 // src/editor/editor-toolbar.tsx
-import { jsx as jsx473 } from "react/jsx-runtime";
+import { jsx as jsx486 } from "react/jsx-runtime";
 
 // src/editor/editor-content.tsx
-import { jsx as jsx474 } from "react/jsx-runtime";
-var states169 = [
+import { jsx as jsx487 } from "react/jsx-runtime";
+var states174 = [
   States.focus
 ];
 
 // src/editor/templates/editor-normal.tsx
-import { Fragment as Fragment140, jsx as jsx475, jsxs as jsxs206 } from "react/jsx-runtime";
+import { Fragment as Fragment141, jsx as jsx488, jsxs as jsxs213 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/border-clip.tsx
-import { jsx as jsx476 } from "react/jsx-runtime";
+import { jsx as jsx489 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/content-clip.tsx
-import { jsx as jsx477 } from "react/jsx-runtime";
+import { jsx as jsx490 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/padding-clip.tsx
-import { jsx as jsx478 } from "react/jsx-runtime";
+import { jsx as jsx491 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/text-clip.tsx
-import { jsx as jsx479 } from "react/jsx-runtime";
+import { jsx as jsx492 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-color/color.tsx
-import { jsx as jsx480, jsxs as jsxs207 } from "react/jsx-runtime";
+import { jsx as jsx493, jsxs as jsxs214 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/all-sides.tsx
-import { jsx as jsx481, jsxs as jsxs208 } from "react/jsx-runtime";
+import { jsx as jsx494, jsxs as jsxs215 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/individual.tsx
-import { jsx as jsx482, jsxs as jsxs209 } from "react/jsx-runtime";
+import { jsx as jsx495, jsxs as jsxs216 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/left-right.tsx
-import { jsx as jsx483, jsxs as jsxs210 } from "react/jsx-runtime";
+import { jsx as jsx496, jsxs as jsxs217 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/top-bottom.tsx
-import { jsx as jsx484, jsxs as jsxs211 } from "react/jsx-runtime";
+import { jsx as jsx497, jsxs as jsxs218 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/corners.tsx
-import { jsx as jsx485, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx498, jsxs as jsxs219 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/no-rounding.tsx
-import { jsx as jsx486, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx499, jsxs as jsxs220 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/rounding.tsx
-import { jsx as jsx487, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx500, jsxs as jsxs221 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/sides.tsx
-import { jsx as jsx488, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx501, jsxs as jsxs222 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/all-sides.tsx
-import { jsx as jsx489, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx502, jsxs as jsxs223 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/individual.tsx
-import { jsx as jsx490, jsxs as jsxs217 } from "react/jsx-runtime";
+import { jsx as jsx503, jsxs as jsxs224 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/left-right.tsx
-import { jsx as jsx491, jsxs as jsxs218 } from "react/jsx-runtime";
+import { jsx as jsx504, jsxs as jsxs225 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/no-style.tsx
-import { jsx as jsx492 } from "react/jsx-runtime";
+import { jsx as jsx505 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/top-bottom.tsx
-import { jsx as jsx493, jsxs as jsxs219 } from "react/jsx-runtime";
+import { jsx as jsx506, jsxs as jsxs226 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/all-sides.tsx
-import { jsx as jsx494, jsxs as jsxs220 } from "react/jsx-runtime";
+import { jsx as jsx507, jsxs as jsxs227 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/individual.tsx
-import { jsx as jsx495, jsxs as jsxs221 } from "react/jsx-runtime";
+import { jsx as jsx508, jsxs as jsxs228 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/left-right.tsx
-import { jsx as jsx496, jsxs as jsxs222 } from "react/jsx-runtime";
+import { jsx as jsx509, jsxs as jsxs229 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/top-bottom.tsx
-import { jsx as jsx497, jsxs as jsxs223 } from "react/jsx-runtime";
+import { jsx as jsx510, jsxs as jsxs230 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-color/all-sides.tsx
-import { jsx as jsx498 } from "react/jsx-runtime";
+import { jsx as jsx511 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-offset/all-sides.tsx
-import { jsx as jsx499, jsxs as jsxs224 } from "react/jsx-runtime";
+import { jsx as jsx512, jsxs as jsxs231 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-offset/no-offset.tsx
-import { jsx as jsx500 } from "react/jsx-runtime";
+import { jsx as jsx513 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-style/all-sides.tsx
-import { jsx as jsx501, jsxs as jsxs225 } from "react/jsx-runtime";
+import { jsx as jsx514, jsxs as jsxs232 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-style/no-style.tsx
-import { jsx as jsx502 } from "react/jsx-runtime";
+import { jsx as jsx515 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-width/all-sides.tsx
-import { jsx as jsx503, jsxs as jsxs226 } from "react/jsx-runtime";
+import { jsx as jsx516, jsxs as jsxs233 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-width/no-width.tsx
-import { jsx as jsx504 } from "react/jsx-runtime";
+import { jsx as jsx517 } from "react/jsx-runtime";
 
 // src/utils/templates/effects/opacity/applying.tsx
-import { jsx as jsx505, jsxs as jsxs227 } from "react/jsx-runtime";
+import { jsx as jsx518, jsxs as jsxs234 } from "react/jsx-runtime";
 
 // src/utils/templates/filters/backdrop-blur/applying.tsx
-import { Fragment as Fragment141, jsx as jsx506, jsxs as jsxs228 } from "react/jsx-runtime";
+import { Fragment as Fragment142, jsx as jsx519, jsxs as jsxs235 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/around.tsx
-import { jsx as jsx507, jsxs as jsxs229 } from "react/jsx-runtime";
+import { jsx as jsx520, jsxs as jsxs236 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/between.tsx
-import { jsx as jsx508, jsxs as jsxs230 } from "react/jsx-runtime";
+import { jsx as jsx521, jsxs as jsxs237 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/center.tsx
-import { jsx as jsx509, jsxs as jsxs231 } from "react/jsx-runtime";
+import { jsx as jsx522, jsxs as jsxs238 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/end.tsx
-import { jsx as jsx510, jsxs as jsxs232 } from "react/jsx-runtime";
+import { jsx as jsx523, jsxs as jsxs239 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/evenly.tsx
-import { jsx as jsx511, jsxs as jsxs233 } from "react/jsx-runtime";
+import { jsx as jsx524, jsxs as jsxs240 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/normal.tsx
-import { jsx as jsx512, jsxs as jsxs234 } from "react/jsx-runtime";
+import { jsx as jsx525, jsxs as jsxs241 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/start.tsx
-import { jsx as jsx513, jsxs as jsxs235 } from "react/jsx-runtime";
+import { jsx as jsx526, jsxs as jsxs242 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/stretch.tsx
-import { jsx as jsx514, jsxs as jsxs236 } from "react/jsx-runtime";
+import { jsx as jsx527, jsxs as jsxs243 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/baseline.tsx
-import { jsx as jsx515, jsxs as jsxs237 } from "react/jsx-runtime";
+import { jsx as jsx528, jsxs as jsxs244 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/center.tsx
-import { jsx as jsx516, jsxs as jsxs238 } from "react/jsx-runtime";
+import { jsx as jsx529, jsxs as jsxs245 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/end.tsx
-import { jsx as jsx517, jsxs as jsxs239 } from "react/jsx-runtime";
+import { jsx as jsx530, jsxs as jsxs246 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/start.tsx
-import { jsx as jsx518, jsxs as jsxs240 } from "react/jsx-runtime";
+import { jsx as jsx531, jsxs as jsxs247 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/stretch.tsx
-import { jsx as jsx519, jsxs as jsxs241 } from "react/jsx-runtime";
+import { jsx as jsx532, jsxs as jsxs248 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/baseline.tsx
-import { jsx as jsx520, jsxs as jsxs242 } from "react/jsx-runtime";
+import { jsx as jsx533, jsxs as jsxs249 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/center.tsx
-import { jsx as jsx521, jsxs as jsxs243 } from "react/jsx-runtime";
+import { jsx as jsx534, jsxs as jsxs250 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/end.tsx
-import { jsx as jsx522, jsxs as jsxs244 } from "react/jsx-runtime";
+import { jsx as jsx535, jsxs as jsxs251 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/start.tsx
-import { jsx as jsx523, jsxs as jsxs245 } from "react/jsx-runtime";
+import { jsx as jsx536, jsxs as jsxs252 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/stretch.tsx
-import { jsx as jsx524, jsxs as jsxs246 } from "react/jsx-runtime";
+import { jsx as jsx537, jsxs as jsxs253 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/auto.tsx
-import { jsx as jsx525, jsxs as jsxs247 } from "react/jsx-runtime";
+import { jsx as jsx538, jsxs as jsxs254 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/flex-1.tsx
-import { jsx as jsx526, jsxs as jsxs248 } from "react/jsx-runtime";
+import { jsx as jsx539, jsxs as jsxs255 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/initial.tsx
-import { jsx as jsx527, jsxs as jsxs249 } from "react/jsx-runtime";
+import { jsx as jsx540, jsxs as jsxs256 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/none.tsx
-import { jsx as jsx528, jsxs as jsxs250 } from "react/jsx-runtime";
+import { jsx as jsx541, jsxs as jsxs257 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-basis/auto.tsx
-import { jsx as jsx529, jsxs as jsxs251 } from "react/jsx-runtime";
+import { jsx as jsx542, jsxs as jsxs258 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-basis/size.tsx
-import { jsx as jsx530, jsxs as jsxs252 } from "react/jsx-runtime";
+import { jsx as jsx543, jsxs as jsxs259 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/column-reverse.tsx
-import { jsx as jsx531, jsxs as jsxs253 } from "react/jsx-runtime";
+import { jsx as jsx544, jsxs as jsxs260 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/column.tsx
-import { jsx as jsx532, jsxs as jsxs254 } from "react/jsx-runtime";
+import { jsx as jsx545, jsxs as jsxs261 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/row-reverse.tsx
-import { jsx as jsx533, jsxs as jsxs255 } from "react/jsx-runtime";
+import { jsx as jsx546, jsxs as jsxs262 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/row.tsx
-import { jsx as jsx534, jsxs as jsxs256 } from "react/jsx-runtime";
+import { jsx as jsx547, jsxs as jsxs263 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-grow/grow-0.tsx
-import { jsx as jsx535, jsxs as jsxs257 } from "react/jsx-runtime";
+import { jsx as jsx548, jsxs as jsxs264 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-grow/grow-1.tsx
-import { jsx as jsx536, jsxs as jsxs258 } from "react/jsx-runtime";
+import { jsx as jsx549, jsxs as jsxs265 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-srink/shrink-0.tsx
-import { jsx as jsx537, jsxs as jsxs259 } from "react/jsx-runtime";
+import { jsx as jsx550, jsxs as jsxs266 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-srink/shrink-1.tsx
-import { jsx as jsx538, jsxs as jsxs260 } from "react/jsx-runtime";
+import { jsx as jsx551, jsxs as jsxs267 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/nowrap.tsx
-import { jsx as jsx539, jsxs as jsxs261 } from "react/jsx-runtime";
+import { jsx as jsx552, jsxs as jsxs268 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/wrap-reverse.tsx
-import { jsx as jsx540, jsxs as jsxs262 } from "react/jsx-runtime";
+import { jsx as jsx553, jsxs as jsxs269 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/wrap.tsx
-import { jsx as jsx541, jsxs as jsxs263 } from "react/jsx-runtime";
+import { jsx as jsx554, jsxs as jsxs270 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/gap/size-x-y.tsx
-import { jsx as jsx542, jsxs as jsxs264 } from "react/jsx-runtime";
+import { jsx as jsx555, jsxs as jsxs271 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/gap/size.tsx
-import { jsx as jsx543, jsxs as jsxs265 } from "react/jsx-runtime";
+import { jsx as jsx556, jsxs as jsxs272 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/auto.tsx
-import { jsx as jsx544, jsxs as jsxs266 } from "react/jsx-runtime";
+import { jsx as jsx557, jsxs as jsxs273 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/fr.tsx
-import { jsx as jsx545, jsxs as jsxs267 } from "react/jsx-runtime";
+import { jsx as jsx558, jsxs as jsxs274 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/max.tsx
-import { jsx as jsx546, jsxs as jsxs268 } from "react/jsx-runtime";
+import { jsx as jsx559, jsxs as jsxs275 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/min.tsx
-import { jsx as jsx547, jsxs as jsxs269 } from "react/jsx-runtime";
+import { jsx as jsx560, jsxs as jsxs276 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/column.tsx
-import { jsx as jsx548, jsxs as jsxs270 } from "react/jsx-runtime";
+import { jsx as jsx561, jsxs as jsxs277 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/dense.tsx
-import { jsx as jsx549, jsxs as jsxs271 } from "react/jsx-runtime";
+import { jsx as jsx562, jsxs as jsxs278 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/row.tsx
-import { jsx as jsx550, jsxs as jsxs272 } from "react/jsx-runtime";
+import { jsx as jsx563, jsxs as jsxs279 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/auto.tsx
-import { jsx as jsx551, jsxs as jsxs273 } from "react/jsx-runtime";
+import { jsx as jsx564, jsxs as jsxs280 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/fr.tsx
-import { jsx as jsx552, jsxs as jsxs274 } from "react/jsx-runtime";
+import { jsx as jsx565, jsxs as jsxs281 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/min.tsx
-import { jsx as jsx553, jsxs as jsxs275 } from "react/jsx-runtime";
+import { jsx as jsx566, jsxs as jsxs282 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-col-start-end/start-end-n.tsx
-import { jsx as jsx554, jsxs as jsxs276 } from "react/jsx-runtime";
+import { jsx as jsx567, jsxs as jsxs283 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-row-start-end/start-end-n.tsx
-import { jsx as jsx555, jsxs as jsxs277 } from "react/jsx-runtime";
+import { jsx as jsx568, jsxs as jsxs284 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-template-cols/integer.tsx
-import { jsx as jsx556, jsxs as jsxs278 } from "react/jsx-runtime";
+import { jsx as jsx569, jsxs as jsxs285 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-template-rows/integer.tsx
-import { jsx as jsx557, jsxs as jsxs279 } from "react/jsx-runtime";
+import { jsx as jsx570, jsxs as jsxs286 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/around.tsx
-import { jsx as jsx558, jsxs as jsxs280 } from "react/jsx-runtime";
+import { jsx as jsx571, jsxs as jsxs287 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/between.tsx
-import { jsx as jsx559, jsxs as jsxs281 } from "react/jsx-runtime";
+import { jsx as jsx572, jsxs as jsxs288 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/center.tsx
-import { jsx as jsx560, jsxs as jsxs282 } from "react/jsx-runtime";
+import { jsx as jsx573, jsxs as jsxs289 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/end.tsx
-import { jsx as jsx561, jsxs as jsxs283 } from "react/jsx-runtime";
+import { jsx as jsx574, jsxs as jsxs290 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/evenly.tsx
-import { jsx as jsx562, jsxs as jsxs284 } from "react/jsx-runtime";
+import { jsx as jsx575, jsxs as jsxs291 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/normal.tsx
-import { jsx as jsx563, jsxs as jsxs285 } from "react/jsx-runtime";
+import { jsx as jsx576, jsxs as jsxs292 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/start.tsx
-import { jsx as jsx564, jsxs as jsxs286 } from "react/jsx-runtime";
+import { jsx as jsx577, jsxs as jsxs293 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/stretch.tsx
-import { jsx as jsx565, jsxs as jsxs287 } from "react/jsx-runtime";
+import { jsx as jsx578, jsxs as jsxs294 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/center.tsx
-import { jsx as jsx566, jsxs as jsxs288 } from "react/jsx-runtime";
+import { jsx as jsx579, jsxs as jsxs295 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/end.tsx
-import { jsx as jsx567, jsxs as jsxs289 } from "react/jsx-runtime";
+import { jsx as jsx580, jsxs as jsxs296 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/start.tsx
-import { jsx as jsx568, jsxs as jsxs290 } from "react/jsx-runtime";
+import { jsx as jsx581, jsxs as jsxs297 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/stretch.tsx
-import { jsx as jsx569, jsxs as jsxs291 } from "react/jsx-runtime";
+import { jsx as jsx582, jsxs as jsxs298 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/center.tsx
-import { jsx as jsx570, jsxs as jsxs292 } from "react/jsx-runtime";
+import { jsx as jsx583, jsxs as jsxs299 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/end.tsx
-import { jsx as jsx571, jsxs as jsxs293 } from "react/jsx-runtime";
+import { jsx as jsx584, jsxs as jsxs300 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/start.tsx
-import { jsx as jsx572, jsxs as jsxs294 } from "react/jsx-runtime";
+import { jsx as jsx585, jsxs as jsxs301 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/stretch.tsx
-import { jsx as jsx573, jsxs as jsxs295 } from "react/jsx-runtime";
+import { jsx as jsx586, jsxs as jsxs302 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/first.tsx
-import { jsx as jsx574, jsxs as jsxs296 } from "react/jsx-runtime";
+import { jsx as jsx587, jsxs as jsxs303 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/integer.tsx
-import { jsx as jsx575, jsxs as jsxs297 } from "react/jsx-runtime";
+import { jsx as jsx588, jsxs as jsxs304 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/last.tsx
-import { jsx as jsx576, jsxs as jsxs298 } from "react/jsx-runtime";
+import { jsx as jsx589, jsxs as jsxs305 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/around.tsx
-import { jsx as jsx577, jsxs as jsxs299 } from "react/jsx-runtime";
+import { jsx as jsx590, jsxs as jsxs306 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/between.tsx
-import { jsx as jsx578, jsxs as jsxs300 } from "react/jsx-runtime";
+import { jsx as jsx591, jsxs as jsxs307 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/center.tsx
-import { jsx as jsx579, jsxs as jsxs301 } from "react/jsx-runtime";
+import { jsx as jsx592, jsxs as jsxs308 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/end.tsx
-import { jsx as jsx580, jsxs as jsxs302 } from "react/jsx-runtime";
+import { jsx as jsx593, jsxs as jsxs309 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/evenly.tsx
-import { jsx as jsx581, jsxs as jsxs303 } from "react/jsx-runtime";
+import { jsx as jsx594, jsxs as jsxs310 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/normal.tsx
-import { jsx as jsx582, jsxs as jsxs304 } from "react/jsx-runtime";
+import { jsx as jsx595, jsxs as jsxs311 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/start.tsx
-import { jsx as jsx583, jsxs as jsxs305 } from "react/jsx-runtime";
+import { jsx as jsx596, jsxs as jsxs312 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/stretch.tsx
-import { jsx as jsx584, jsxs as jsxs306 } from "react/jsx-runtime";
+import { jsx as jsx597, jsxs as jsxs313 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/center.tsx
-import { jsx as jsx585, jsxs as jsxs307 } from "react/jsx-runtime";
+import { jsx as jsx598, jsxs as jsxs314 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/end.tsx
-import { jsx as jsx586, jsxs as jsxs308 } from "react/jsx-runtime";
+import { jsx as jsx599, jsxs as jsxs315 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/start.tsx
-import { jsx as jsx587, jsxs as jsxs309 } from "react/jsx-runtime";
+import { jsx as jsx600, jsxs as jsxs316 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/stretch.tsx
-import { jsx as jsx588, jsxs as jsxs310 } from "react/jsx-runtime";
+import { jsx as jsx601, jsxs as jsxs317 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/center.tsx
-import { jsx as jsx589, jsxs as jsxs311 } from "react/jsx-runtime";
+import { jsx as jsx602, jsxs as jsxs318 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/end.tsx
-import { jsx as jsx590, jsxs as jsxs312 } from "react/jsx-runtime";
+import { jsx as jsx603, jsxs as jsxs319 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/start.tsx
-import { jsx as jsx591, jsxs as jsxs313 } from "react/jsx-runtime";
+import { jsx as jsx604, jsxs as jsxs320 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/stretch.tsx
-import { jsx as jsx592, jsxs as jsxs314 } from "react/jsx-runtime";
+import { jsx as jsx605, jsxs as jsxs321 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/appearance/applying.tsx
-import { jsx as jsx593, jsxs as jsxs315 } from "react/jsx-runtime";
+import { jsx as jsx606, jsxs as jsxs322 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/appearance/none.tsx
-import { jsx as jsx594, jsxs as jsxs316 } from "react/jsx-runtime";
+import { jsx as jsx607, jsxs as jsxs323 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/cursor/applying.tsx
-import { jsx as jsx595, jsxs as jsxs317 } from "react/jsx-runtime";
+import { jsx as jsx608, jsxs as jsxs324 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/pointer-events/applying.tsx
-import { jsx as jsx596, jsxs as jsxs318 } from "react/jsx-runtime";
+import { jsx as jsx609, jsxs as jsxs325 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/all-directions.tsx
-import { jsx as jsx597 } from "react/jsx-runtime";
+import { jsx as jsx610 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/horizontal.tsx
-import { jsx as jsx598 } from "react/jsx-runtime";
+import { jsx as jsx611 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/no-resizing.tsx
-import { jsx as jsx599 } from "react/jsx-runtime";
+import { jsx as jsx612 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/vertical.tsx
-import { jsx as jsx600 } from "react/jsx-runtime";
+import { jsx as jsx613 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/auto.tsx
-import { jsx as jsx601 } from "react/jsx-runtime";
+import { jsx as jsx614 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/horizontal.tsx
-import { jsx as jsx602 } from "react/jsx-runtime";
+import { jsx as jsx615 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/none.tsx
-import { jsx as jsx603 } from "react/jsx-runtime";
+import { jsx as jsx616 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/vertical.tsx
-import { jsx as jsx604 } from "react/jsx-runtime";
+import { jsx as jsx617 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/all.tsx
-import { jsx as jsx605 } from "react/jsx-runtime";
+import { jsx as jsx618 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/none.tsx
-import { jsx as jsx606 } from "react/jsx-runtime";
+import { jsx as jsx619 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/text.tsx
-import { jsx as jsx607 } from "react/jsx-runtime";
+import { jsx as jsx620 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/auto.tsx
-import { jsx as jsx608 } from "react/jsx-runtime";
+import { jsx as jsx621 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/one.tsx
-import { jsx as jsx609 } from "react/jsx-runtime";
+import { jsx as jsx622 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/sqaure.tsx
-import { jsx as jsx610 } from "react/jsx-runtime";
+import { jsx as jsx623 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/video.tsx
-import { jsx as jsx611 } from "react/jsx-runtime";
+import { jsx as jsx624 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/box-sizing/border.tsx
-import { jsx as jsx612 } from "react/jsx-runtime";
+import { jsx as jsx625 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/box-sizing/content.tsx
-import { jsx as jsx613 } from "react/jsx-runtime";
+import { jsx as jsx626 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/both.tsx
-import { jsx as jsx614, jsxs as jsxs319 } from "react/jsx-runtime";
+import { jsx as jsx627, jsxs as jsxs326 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/left.tsx
-import { jsx as jsx615, jsxs as jsxs320 } from "react/jsx-runtime";
+import { jsx as jsx628, jsxs as jsxs327 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/no-clear.tsx
-import { jsx as jsx616, jsxs as jsxs321 } from "react/jsx-runtime";
+import { jsx as jsx629, jsxs as jsxs328 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/right.tsx
-import { jsx as jsx617, jsxs as jsxs322 } from "react/jsx-runtime";
+import { jsx as jsx630, jsxs as jsxs329 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/columns/automatic.tsx
-import { jsx as jsx618, jsxs as jsxs323 } from "react/jsx-runtime";
+import { jsx as jsx631, jsxs as jsxs330 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/columns/count.tsx
-import { jsx as jsx619, jsxs as jsxs324 } from "react/jsx-runtime";
+import { jsx as jsx632, jsxs as jsxs331 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/block.tsx
-import { jsx as jsx620, jsxs as jsxs325 } from "react/jsx-runtime";
+import { jsx as jsx633, jsxs as jsxs332 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/flex.tsx
-import { jsx as jsx621, jsxs as jsxs326 } from "react/jsx-runtime";
+import { jsx as jsx634, jsxs as jsxs333 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/inline.tsx
-import { jsx as jsx622, jsxs as jsxs327 } from "react/jsx-runtime";
+import { jsx as jsx635, jsxs as jsxs334 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/none.tsx
-import { Fragment as Fragment142, jsx as jsx623, jsxs as jsxs328 } from "react/jsx-runtime";
+import { Fragment as Fragment143, jsx as jsx636, jsxs as jsxs335 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/left.tsx
-import { jsx as jsx624, jsxs as jsxs329 } from "react/jsx-runtime";
+import { jsx as jsx637, jsxs as jsxs336 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/no-float.tsx
-import { jsx as jsx625, jsxs as jsxs330 } from "react/jsx-runtime";
+import { jsx as jsx638, jsxs as jsxs337 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/right.tsx
-import { jsx as jsx626, jsxs as jsxs331 } from "react/jsx-runtime";
+import { jsx as jsx639, jsxs as jsxs338 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/contain.tsx
-import { jsx as jsx627 } from "react/jsx-runtime";
+import { jsx as jsx640 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/cover.tsx
-import { jsx as jsx628 } from "react/jsx-runtime";
+import { jsx as jsx641 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/fill.tsx
-import { jsx as jsx629 } from "react/jsx-runtime";
+import { jsx as jsx642 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/scale-down.tsx
-import { jsx as jsx630 } from "react/jsx-runtime";
+import { jsx as jsx643 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-position/position.tsx
-import { jsx as jsx631, jsxs as jsxs332 } from "react/jsx-runtime";
+import { jsx as jsx644, jsxs as jsxs339 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/hidden.tsx
-import { jsx as jsx632 } from "react/jsx-runtime";
+import { jsx as jsx645 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/horizontal.tsx
-import { jsx as jsx633 } from "react/jsx-runtime";
+import { jsx as jsx646 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/vertical.tsx
-import { jsx as jsx634 } from "react/jsx-runtime";
+import { jsx as jsx647 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/visible.tsx
-import { jsx as jsx635 } from "react/jsx-runtime";
+import { jsx as jsx648 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/placement/multiple.tsx
-import { jsx as jsx636, jsxs as jsxs333 } from "react/jsx-runtime";
+import { jsx as jsx649, jsxs as jsxs340 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/placement/single.tsx
-import { jsx as jsx637, jsxs as jsxs334 } from "react/jsx-runtime";
+import { jsx as jsx650, jsxs as jsxs341 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/position/applying.tsx
-import { jsx as jsx638, jsxs as jsxs335 } from "react/jsx-runtime";
+import { jsx as jsx651, jsxs as jsxs342 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/visibility/invisible.tsx
-import { jsx as jsx639, jsxs as jsxs336 } from "react/jsx-runtime";
+import { jsx as jsx652, jsxs as jsxs343 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/z-index/applying.tsx
-import { Fragment as Fragment143, jsx as jsx640, jsxs as jsxs337 } from "react/jsx-runtime";
+import { Fragment as Fragment144, jsx as jsx653, jsxs as jsxs344 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/fixed.tsx
-import { jsx as jsx641, jsxs as jsxs338 } from "react/jsx-runtime";
+import { jsx as jsx654, jsxs as jsxs345 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/full.tsx
-import { jsx as jsx642 } from "react/jsx-runtime";
+import { jsx as jsx655 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/maximum.tsx
-import { jsx as jsx643 } from "react/jsx-runtime";
+import { jsx as jsx656 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/minimum.tsx
-import { jsx as jsx644 } from "react/jsx-runtime";
+import { jsx as jsx657 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/screen.tsx
-import { jsx as jsx645 } from "react/jsx-runtime";
+import { jsx as jsx658 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/fixed.tsx
-import { jsx as jsx646, jsxs as jsxs339 } from "react/jsx-runtime";
+import { jsx as jsx659, jsxs as jsxs346 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/full.tsx
-import { jsx as jsx647 } from "react/jsx-runtime";
+import { jsx as jsx660 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/maximum.tsx
-import { jsx as jsx648 } from "react/jsx-runtime";
+import { jsx as jsx661 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/minimum.tsx
-import { jsx as jsx649 } from "react/jsx-runtime";
+import { jsx as jsx662 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/screen.tsx
-import { jsx as jsx650 } from "react/jsx-runtime";
+import { jsx as jsx663 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/all.tsx
-import { jsx as jsx651 } from "react/jsx-runtime";
+import { jsx as jsx664 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/single.tsx
-import { Fragment as Fragment144, jsx as jsx652, jsxs as jsxs340 } from "react/jsx-runtime";
+import { Fragment as Fragment145, jsx as jsx665, jsxs as jsxs347 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/x.tsx
-import { jsx as jsx653 } from "react/jsx-runtime";
+import { jsx as jsx666 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/y.tsx
-import { jsx as jsx654 } from "react/jsx-runtime";
+import { jsx as jsx667 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/all.tsx
-import { jsx as jsx655 } from "react/jsx-runtime";
+import { jsx as jsx668 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/single.tsx
-import { Fragment as Fragment145, jsx as jsx656, jsxs as jsxs341 } from "react/jsx-runtime";
+import { Fragment as Fragment146, jsx as jsx669, jsxs as jsxs348 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/x.tsx
-import { jsx as jsx657 } from "react/jsx-runtime";
+import { jsx as jsx670 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/y.tsx
-import { jsx as jsx658 } from "react/jsx-runtime";
+import { jsx as jsx671 } from "react/jsx-runtime";
 
 // src/utils/templates/svg/fill/color.tsx
-import { Fragment as Fragment146, jsx as jsx659, jsxs as jsxs342 } from "react/jsx-runtime";
+import { Fragment as Fragment147, jsx as jsx672, jsxs as jsxs349 } from "react/jsx-runtime";
 
 // src/utils/templates/svg/stroke/color.tsx
-import { Fragment as Fragment147, jsx as jsx660, jsxs as jsxs343 } from "react/jsx-runtime";
+import { Fragment as Fragment148, jsx as jsx673, jsxs as jsxs350 } from "react/jsx-runtime";
 
 // src/utils/templates/table/border-collapse/collapse.tsx
-import { jsx as jsx661, jsxs as jsxs344 } from "react/jsx-runtime";
+import { jsx as jsx674, jsxs as jsxs351 } from "react/jsx-runtime";
 
 // src/utils/templates/table/border-collapse/separate.tsx
-import { jsx as jsx662, jsxs as jsxs345 } from "react/jsx-runtime";
+import { jsx as jsx675, jsxs as jsxs352 } from "react/jsx-runtime";
 
 // src/utils/templates/table/table-layout/auto.tsx
-import { jsx as jsx663, jsxs as jsxs346 } from "react/jsx-runtime";
+import { jsx as jsx676, jsxs as jsxs353 } from "react/jsx-runtime";
 
 // src/utils/templates/table/table-layout/fixed.tsx
-import { jsx as jsx664, jsxs as jsxs347 } from "react/jsx-runtime";
+import { jsx as jsx677, jsxs as jsxs354 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/flip/horizontal.tsx
-import { jsx as jsx665, jsxs as jsxs348 } from "react/jsx-runtime";
+import { jsx as jsx678, jsxs as jsxs355 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/flip/vertical.tsx
-import { jsx as jsx666, jsxs as jsxs349 } from "react/jsx-runtime";
+import { jsx as jsx679, jsxs as jsxs356 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/origin/applying.tsx
-import { jsx as jsx667, jsxs as jsxs350 } from "react/jsx-runtime";
+import { jsx as jsx680, jsxs as jsxs357 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/rotate/applying.tsx
-import { jsx as jsx668, jsxs as jsxs351 } from "react/jsx-runtime";
+import { jsx as jsx681, jsxs as jsxs358 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/scale/applying.tsx
-import { jsx as jsx669, jsxs as jsxs352 } from "react/jsx-runtime";
+import { jsx as jsx682, jsxs as jsxs359 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/skew/applying.tsx
-import { jsx as jsx670, jsxs as jsxs353 } from "react/jsx-runtime";
+import { jsx as jsx683, jsxs as jsxs360 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/translate/applying.tsx
-import { jsx as jsx671, jsxs as jsxs354 } from "react/jsx-runtime";
+import { jsx as jsx684, jsxs as jsxs361 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/font-style/italic.tsx
-import { jsx as jsx672 } from "react/jsx-runtime";
+import { jsx as jsx685 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/font-weight/size.tsx
-import { Fragment as Fragment148, jsx as jsx673, jsxs as jsxs355 } from "react/jsx-runtime";
+import { Fragment as Fragment149, jsx as jsx686, jsxs as jsxs362 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/decimal.tsx
-import { jsx as jsx674, jsxs as jsxs356 } from "react/jsx-runtime";
+import { jsx as jsx687, jsxs as jsxs363 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/disc.tsx
-import { jsx as jsx675, jsxs as jsxs357 } from "react/jsx-runtime";
+import { jsx as jsx688, jsxs as jsxs364 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/none.tsx
-import { jsx as jsx676, jsxs as jsxs358 } from "react/jsx-runtime";
+import { jsx as jsx689, jsxs as jsxs365 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/center.tsx
-import { jsx as jsx677 } from "react/jsx-runtime";
+import { jsx as jsx690 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/justify.tsx
-import { jsx as jsx678 } from "react/jsx-runtime";
+import { jsx as jsx691 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/left.tsx
-import { jsx as jsx679 } from "react/jsx-runtime";
+import { jsx as jsx692 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/right.tsx
-import { jsx as jsx680 } from "react/jsx-runtime";
+import { jsx as jsx693 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-color/inherit.tsx
-import { jsx as jsx681 } from "react/jsx-runtime";
+import { jsx as jsx694 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-color/white.tsx
-import { jsx as jsx682 } from "react/jsx-runtime";
+import { jsx as jsx695 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-decoration/all.tsx
-import { Fragment as Fragment149, jsx as jsx683, jsxs as jsxs359 } from "react/jsx-runtime";
+import { Fragment as Fragment150, jsx as jsx696, jsxs as jsxs366 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-overflow/clip.tsx
-import { jsx as jsx684 } from "react/jsx-runtime";
+import { jsx as jsx697 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-overflow/ellipsis.tsx
-import { jsx as jsx685 } from "react/jsx-runtime";
+import { jsx as jsx698 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-transform/all.tsx
-import { Fragment as Fragment150, jsx as jsx686, jsxs as jsxs360 } from "react/jsx-runtime";
+import { Fragment as Fragment151, jsx as jsx699, jsxs as jsxs367 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/baseline.tsx
-import { jsx as jsx687, jsxs as jsxs361 } from "react/jsx-runtime";
+import { jsx as jsx700, jsxs as jsxs368 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/bottom.tsx
-import { jsx as jsx688, jsxs as jsxs362 } from "react/jsx-runtime";
+import { jsx as jsx701, jsxs as jsxs369 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/center.tsx
-import { jsx as jsx689, jsxs as jsxs363 } from "react/jsx-runtime";
+import { jsx as jsx702, jsxs as jsxs370 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/top.tsx
-import { jsx as jsx690, jsxs as jsxs364 } from "react/jsx-runtime";
+import { jsx as jsx703, jsxs as jsxs371 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/normal.tsx
-import { jsx as jsx691 } from "react/jsx-runtime";
+import { jsx as jsx704 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/nowrap.tsx
-import { jsx as jsx692 } from "react/jsx-runtime";
+import { jsx as jsx705 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre-line.tsx
-import { jsx as jsx693 } from "react/jsx-runtime";
+import { jsx as jsx706 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre-wrap.tsx
-import { jsx as jsx694 } from "react/jsx-runtime";
+import { jsx as jsx707 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre.tsx
-import { jsx as jsx695 } from "react/jsx-runtime";
+import { jsx as jsx708 } from "react/jsx-runtime";
 
 // src/filemanager/tests/filemanager-gridview-preview.tsx
-import { Fragment as Fragment151, jsx as jsx696, jsxs as jsxs365 } from "react/jsx-runtime";
-var filemanager_gridview_preview_default = () => /* @__PURE__ */ jsx696(Fragment151, { children: /* @__PURE__ */ jsxs365("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
-  /* @__PURE__ */ jsx696("span", { children: "Preview - File info" }),
-  /* @__PURE__ */ jsx696(FileManagerGridPreview, { children: /* @__PURE__ */ jsxs365(Splitter, { className: "k-filemanager-splitter", children: [
-    /* @__PURE__ */ jsx696(SplitterPane, { className: "k-filemanager-navigation", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx696(FileManagerTreeview, { children: /* @__PURE__ */ jsx696(TreeviewItem, { text: "Folder" }) }) }),
-    /* @__PURE__ */ jsxs365(SplitterPane, { className: "k-filemanager-content", scrollable: true, children: [
-      /* @__PURE__ */ jsx696(FileManagerBreadcrumb, { children: /* @__PURE__ */ jsx696(BreadcrumbContainer, { children: /* @__PURE__ */ jsx696(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsx696(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx696(Icon, { icon: "home" }) }) }) }) }),
-      /* @__PURE__ */ jsxs365("div", { className: "k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable", children: [
-        /* @__PURE__ */ jsx696("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx696("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs365(Table, { className: "k-table-md k-grid-header-table", children: [
-          /* @__PURE__ */ jsxs365("colgroup", { children: [
-            /* @__PURE__ */ jsx696("col", {}),
-            /* @__PURE__ */ jsx696("col", {}),
-            /* @__PURE__ */ jsx696("col", {})
+import { Fragment as Fragment152, jsx as jsx709, jsxs as jsxs372 } from "react/jsx-runtime";
+var filemanager_gridview_preview_default = () => /* @__PURE__ */ jsx709(Fragment152, { children: /* @__PURE__ */ jsxs372("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
+  /* @__PURE__ */ jsx709("span", { children: "Preview - File info" }),
+  /* @__PURE__ */ jsx709(FileManagerGridPreview, { children: /* @__PURE__ */ jsxs372(Splitter, { className: "k-filemanager-splitter", children: [
+    /* @__PURE__ */ jsx709(SplitterPane, { className: "k-filemanager-navigation", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx709(FileManagerTreeview, { children: /* @__PURE__ */ jsx709(TreeviewItem, { text: "Folder" }) }) }),
+    /* @__PURE__ */ jsxs372(SplitterPane, { className: "k-filemanager-content", scrollable: true, children: [
+      /* @__PURE__ */ jsx709(FileManagerBreadcrumb, { children: /* @__PURE__ */ jsx709(BreadcrumbContainer, { children: /* @__PURE__ */ jsx709(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsx709(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx709(Icon, { icon: "home" }) }) }) }) }),
+      /* @__PURE__ */ jsxs372("div", { className: "k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable", children: [
+        /* @__PURE__ */ jsx709("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx709("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs372(Table, { className: "k-table-md k-grid-header-table", children: [
+          /* @__PURE__ */ jsxs372("colgroup", { children: [
+            /* @__PURE__ */ jsx709("col", {}),
+            /* @__PURE__ */ jsx709("col", {}),
+            /* @__PURE__ */ jsx709("col", {})
           ] }),
-          /* @__PURE__ */ jsx696(TableThead, { children: /* @__PURE__ */ jsxs365(TableRow, { children: [
-            /* @__PURE__ */ jsx696(TableTh, { className: "k-header k-sorted", children: /* @__PURE__ */ jsx696("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsxs365("span", { className: "k-link", children: [
-              /* @__PURE__ */ jsx696("span", { className: "k-column-title", children: "Name" }),
-              /* @__PURE__ */ jsx696("span", { className: "k-sort-icon", children: /* @__PURE__ */ jsx696(Icon, { icon: "sort-asc-small" }) })
+          /* @__PURE__ */ jsx709(TableThead, { children: /* @__PURE__ */ jsxs372(TableRow, { children: [
+            /* @__PURE__ */ jsx709(TableTh, { className: "k-header k-sorted", children: /* @__PURE__ */ jsx709("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsxs372("span", { className: "k-link", children: [
+              /* @__PURE__ */ jsx709("span", { className: "k-column-title", children: "Name" }),
+              /* @__PURE__ */ jsx709("span", { className: "k-sort-icon", children: /* @__PURE__ */ jsx709(Icon, { icon: "sort-asc-small" }) })
             ] }) }) }),
-            /* @__PURE__ */ jsx696(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx696("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx696("span", { className: "k-link", children: /* @__PURE__ */ jsx696("span", { className: "k-column-title", children: "Date Created" }) }) }) }),
-            /* @__PURE__ */ jsx696(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx696("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx696("span", { className: "k-link", children: /* @__PURE__ */ jsx696("span", { className: "k-column-title", children: "File Size" }) }) }) })
+            /* @__PURE__ */ jsx709(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx709("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx709("span", { className: "k-link", children: /* @__PURE__ */ jsx709("span", { className: "k-column-title", children: "Date Created" }) }) }) }),
+            /* @__PURE__ */ jsx709(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx709("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx709("span", { className: "k-link", children: /* @__PURE__ */ jsx709("span", { className: "k-column-title", children: "File Size" }) }) }) })
           ] }) })
         ] }) }) }),
-        /* @__PURE__ */ jsx696("div", { className: "k-grid-content k-auto-scrollable", children: /* @__PURE__ */ jsxs365(Table, { className: "k-table-md k-grid-table k-selectable", children: [
-          /* @__PURE__ */ jsxs365("colgroup", { children: [
-            /* @__PURE__ */ jsx696("col", { className: "k-sorted" }),
-            /* @__PURE__ */ jsx696("col", {}),
-            /* @__PURE__ */ jsx696("col", {})
+        /* @__PURE__ */ jsx709("div", { className: "k-grid-content k-auto-scrollable", children: /* @__PURE__ */ jsxs372(Table, { className: "k-table-md k-grid-table k-selectable", children: [
+          /* @__PURE__ */ jsxs372("colgroup", { children: [
+            /* @__PURE__ */ jsx709("col", { className: "k-sorted" }),
+            /* @__PURE__ */ jsx709("col", {}),
+            /* @__PURE__ */ jsx709("col", {})
           ] }),
-          /* @__PURE__ */ jsxs365(TableTbody, { children: [
-            /* @__PURE__ */ jsxs365(TableRow, { children: [
-              /* @__PURE__ */ jsx696(TableTd, { children: /* @__PURE__ */ jsx696(FilePreview, { name: "Folder", icon: "folder" }) }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "0" })
+          /* @__PURE__ */ jsxs372(TableTbody, { children: [
+            /* @__PURE__ */ jsxs372(TableRow, { children: [
+              /* @__PURE__ */ jsx709(TableTd, { children: /* @__PURE__ */ jsx709(FilePreview, { name: "Folder", icon: "folder" }) }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "0" })
             ] }),
-            /* @__PURE__ */ jsxs365(TableRow, { alt: true, selected: true, children: [
-              /* @__PURE__ */ jsx696(TableTd, { children: /* @__PURE__ */ jsx696(FilePreview, { name: "file.png", icon: "file" }) }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "73289" })
+            /* @__PURE__ */ jsxs372(TableRow, { alt: true, selected: true, children: [
+              /* @__PURE__ */ jsx709(TableTd, { children: /* @__PURE__ */ jsx709(FilePreview, { name: "file.png", icon: "file" }) }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "73289" })
             ] })
           ] })
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx696(SplitterPane, { className: "k-filemanager-preview", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx696(FileInfo, { selection: "single", icon: "file-image", name: "file.png", fileType: "Image", fileSize: "72 KB", fileDateCreated: "13/12/2019 12:22:04 PM", fileDateModified: "13/12/2019 12:36:04 PM" }) })
+    /* @__PURE__ */ jsx709(SplitterPane, { className: "k-filemanager-preview", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx709(FileInfo, { selection: "single", icon: "file-image", name: "file.png", fileType: "Image", fileSize: "72 KB", fileDateCreated: "13/12/2019 12:22:04 PM", fileDateModified: "13/12/2019 12:36:04 PM" }) })
   ] }) }),
-  /* @__PURE__ */ jsx696("span", { children: "Preview - No file selected" }),
-  /* @__PURE__ */ jsx696(FileManagerGridPreview, {}),
-  /* @__PURE__ */ jsx696("span", { children: "Preview - Multiple files selected" }),
-  /* @__PURE__ */ jsx696(FileManagerGridPreview, { children: /* @__PURE__ */ jsxs365(Splitter, { className: "k-filemanager-splitter", children: [
-    /* @__PURE__ */ jsx696(SplitterPane, { className: "k-filemanager-navigation", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx696(FileManagerTreeview, { children: /* @__PURE__ */ jsx696(TreeviewItem, { text: "Folder" }) }) }),
-    /* @__PURE__ */ jsxs365(SplitterPane, { className: "k-filemanager-content", scrollable: true, children: [
-      /* @__PURE__ */ jsx696(FileManagerBreadcrumb, { children: /* @__PURE__ */ jsx696(BreadcrumbContainer, { children: /* @__PURE__ */ jsx696(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsx696(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx696(Icon, { icon: "home" }) }) }) }) }),
-      /* @__PURE__ */ jsxs365("div", { className: "k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable", children: [
-        /* @__PURE__ */ jsx696("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx696("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs365(Table, { className: "k-table-md k-grid-header-table", children: [
-          /* @__PURE__ */ jsxs365("colgroup", { children: [
-            /* @__PURE__ */ jsx696("col", {}),
-            /* @__PURE__ */ jsx696("col", {}),
-            /* @__PURE__ */ jsx696("col", {})
+  /* @__PURE__ */ jsx709("span", { children: "Preview - No file selected" }),
+  /* @__PURE__ */ jsx709(FileManagerGridPreview, {}),
+  /* @__PURE__ */ jsx709("span", { children: "Preview - Multiple files selected" }),
+  /* @__PURE__ */ jsx709(FileManagerGridPreview, { children: /* @__PURE__ */ jsxs372(Splitter, { className: "k-filemanager-splitter", children: [
+    /* @__PURE__ */ jsx709(SplitterPane, { className: "k-filemanager-navigation", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx709(FileManagerTreeview, { children: /* @__PURE__ */ jsx709(TreeviewItem, { text: "Folder" }) }) }),
+    /* @__PURE__ */ jsxs372(SplitterPane, { className: "k-filemanager-content", scrollable: true, children: [
+      /* @__PURE__ */ jsx709(FileManagerBreadcrumb, { children: /* @__PURE__ */ jsx709(BreadcrumbContainer, { children: /* @__PURE__ */ jsx709(BreadcrumbItem, { root: true, children: /* @__PURE__ */ jsx709(BreadcrumbLink, { root: true, icon: true, children: /* @__PURE__ */ jsx709(Icon, { icon: "home" }) }) }) }) }),
+      /* @__PURE__ */ jsxs372("div", { className: "k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable", children: [
+        /* @__PURE__ */ jsx709("div", { className: "k-grid-header", children: /* @__PURE__ */ jsx709("div", { className: "k-grid-header-wrap k-auto-scrollable", children: /* @__PURE__ */ jsxs372(Table, { className: "k-table-md k-grid-header-table", children: [
+          /* @__PURE__ */ jsxs372("colgroup", { children: [
+            /* @__PURE__ */ jsx709("col", {}),
+            /* @__PURE__ */ jsx709("col", {}),
+            /* @__PURE__ */ jsx709("col", {})
           ] }),
-          /* @__PURE__ */ jsx696(TableThead, { children: /* @__PURE__ */ jsxs365(TableRow, { children: [
-            /* @__PURE__ */ jsx696(TableTh, { className: "k-header k-sorted", children: /* @__PURE__ */ jsx696("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsxs365("span", { className: "k-link", children: [
-              /* @__PURE__ */ jsx696("span", { className: "k-column-title", children: "Name" }),
-              /* @__PURE__ */ jsx696("span", { className: "k-sort-icon", children: /* @__PURE__ */ jsx696(Icon, { icon: "sort-asc-small" }) })
+          /* @__PURE__ */ jsx709(TableThead, { children: /* @__PURE__ */ jsxs372(TableRow, { children: [
+            /* @__PURE__ */ jsx709(TableTh, { className: "k-header k-sorted", children: /* @__PURE__ */ jsx709("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsxs372("span", { className: "k-link", children: [
+              /* @__PURE__ */ jsx709("span", { className: "k-column-title", children: "Name" }),
+              /* @__PURE__ */ jsx709("span", { className: "k-sort-icon", children: /* @__PURE__ */ jsx709(Icon, { icon: "sort-asc-small" }) })
             ] }) }) }),
-            /* @__PURE__ */ jsx696(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx696("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx696("span", { className: "k-link", children: /* @__PURE__ */ jsx696("span", { className: "k-column-title", children: "Date Created" }) }) }) }),
-            /* @__PURE__ */ jsx696(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx696("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx696("span", { className: "k-link", children: /* @__PURE__ */ jsx696("span", { className: "k-column-title", children: "File Size" }) }) }) })
+            /* @__PURE__ */ jsx709(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx709("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx709("span", { className: "k-link", children: /* @__PURE__ */ jsx709("span", { className: "k-column-title", children: "Date Created" }) }) }) }),
+            /* @__PURE__ */ jsx709(TableTh, { className: "k-header", children: /* @__PURE__ */ jsx709("span", { className: "k-cell-inner", children: /* @__PURE__ */ jsx709("span", { className: "k-link", children: /* @__PURE__ */ jsx709("span", { className: "k-column-title", children: "File Size" }) }) }) })
           ] }) })
         ] }) }) }),
-        /* @__PURE__ */ jsx696("div", { className: "k-grid-content k-auto-scrollable", children: /* @__PURE__ */ jsxs365(Table, { className: "k-table-md k-grid-table k-selectable", children: [
-          /* @__PURE__ */ jsxs365("colgroup", { children: [
-            /* @__PURE__ */ jsx696("col", { className: "k-sorted" }),
-            /* @__PURE__ */ jsx696("col", {}),
-            /* @__PURE__ */ jsx696("col", {})
+        /* @__PURE__ */ jsx709("div", { className: "k-grid-content k-auto-scrollable", children: /* @__PURE__ */ jsxs372(Table, { className: "k-table-md k-grid-table k-selectable", children: [
+          /* @__PURE__ */ jsxs372("colgroup", { children: [
+            /* @__PURE__ */ jsx709("col", { className: "k-sorted" }),
+            /* @__PURE__ */ jsx709("col", {}),
+            /* @__PURE__ */ jsx709("col", {})
           ] }),
-          /* @__PURE__ */ jsxs365(TableTbody, { children: [
-            /* @__PURE__ */ jsxs365(TableRow, { selected: true, children: [
-              /* @__PURE__ */ jsx696(TableTd, { children: /* @__PURE__ */ jsx696(FilePreview, { name: "Folder", icon: "folder" }) }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "0" })
+          /* @__PURE__ */ jsxs372(TableTbody, { children: [
+            /* @__PURE__ */ jsxs372(TableRow, { selected: true, children: [
+              /* @__PURE__ */ jsx709(TableTd, { children: /* @__PURE__ */ jsx709(FilePreview, { name: "Folder", icon: "folder" }) }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "0" })
             ] }),
-            /* @__PURE__ */ jsxs365(TableRow, { alt: true, selected: true, children: [
-              /* @__PURE__ */ jsx696(TableTd, { children: /* @__PURE__ */ jsx696(FilePreview, { name: "file.png", icon: "file" }) }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
-              /* @__PURE__ */ jsx696(TableTd, { children: "73289" })
+            /* @__PURE__ */ jsxs372(TableRow, { alt: true, selected: true, children: [
+              /* @__PURE__ */ jsx709(TableTd, { children: /* @__PURE__ */ jsx709(FilePreview, { name: "file.png", icon: "file" }) }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "13/12/2019 at 12:22:04 PM" }),
+              /* @__PURE__ */ jsx709(TableTd, { children: "73289" })
             ] })
           ] })
         ] }) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx696(SplitterPane, { className: "k-filemanager-preview", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx696(FileInfo, { selection: "multiple", name: "2 items" }) })
+    /* @__PURE__ */ jsx709(SplitterPane, { className: "k-filemanager-preview", collapsible: true, scrollable: true, flexBasis: "25%", children: /* @__PURE__ */ jsx709(FileInfo, { selection: "multiple", name: "2 items" }) })
   ] }) })
 ] }) });
 export {