@progress/kendo-themes-html 7.1.0-dev.8 → 7.1.0

package/dist/esm/multiselect/tests/multiselect-outline.js

@@ -7435,7 +7435,8 @@ var defaultProps44 = {
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode,
   flow: "vertical",
-  affixesOrientation: "horizontal"
+  affixesOrientation: "horizontal",
+  resize: "both"
 };
 var Textarea = (props) => {
   const {
@@ -7455,6 +7456,7 @@ var Textarea = (props) => {
     disabled,
     flow = defaultProps44.flow,
     affixesOrientation,
+    resize = defaultProps44.resize,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs49(
@@ -7496,7 +7498,14 @@ var Textarea = (props) => {
           InputInnerTextarea,
           {
             className: classNames(
-              "!k-overflow-auto"
+              "!k-overflow-auto",
+              {
+                ["!k-flex-none"]: flow === "vertical",
+                ["k-resize-x"]: resize === "x",
+                ["k-resize-y"]: resize === "y",
+                ["k-resize"]: resize === "both",
+                ["k-resize-none"]: resize === "none"
+              }
             ),
             value,
             placeholder,
@@ -7759,7 +7768,9 @@ var defaultProps48 = {
   orientation: "horizontal",
   readonly: false,
   disabled: false,
-  handlePosition: "end"
+  handlePosition: "end",
+  showButtons: true,
+  showTicks: true
 };
 var Slider = (props) => {
   const {
@@ -7768,6 +7779,8 @@ var Slider = (props) => {
     readonly = defaultProps48.readonly,
     disabled = defaultProps48.disabled,
     handlePosition = defaultProps48.handlePosition,
+    showButtons = defaultProps48.showButtons,
+    showTicks = defaultProps48.showTicks,
     hover,
     focus,
     active,
@@ -7796,9 +7809,9 @@ var Slider = (props) => {
       "k-range-slider": type === "range"
     }
   ), dir, children: [
-    type !== "gradient" && /* @__PURE__ */ jsx137(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+    showButtons && /* @__PURE__ */ jsx137(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
     /* @__PURE__ */ jsxs52("div", { className: "k-slider-track-wrap", children: [
-      type !== "gradient" && /* @__PURE__ */ jsx137("ul", { className: "k-reset k-slider-items", children: props.children }),
+      showTicks && /* @__PURE__ */ jsx137("ul", { className: "k-reset k-slider-items", children: props.children }),
       /* @__PURE__ */ jsxs52("div", { className: "k-slider-track", style: trackStyle, children: [
         /* @__PURE__ */ jsx137("div", { className: "k-slider-selection" }),
         type === "range" && /* @__PURE__ */ jsx137("span", { className: classNames(
@@ -7821,7 +7834,7 @@ var Slider = (props) => {
         ) })
       ] })
     ] }),
-    type !== "gradient" && /* @__PURE__ */ jsx137(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    showButtons && /* @__PURE__ */ jsx137(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
   ] });
 };
 Slider.states = states51;
@@ -7881,6 +7894,8 @@ var SliderGradientVertical = (props) => /* @__PURE__ */ jsx144(
   {
     type: "gradient",
     orientation: "vertical",
+    showButtons: false,
+    showTicks: false,
     children: /* @__PURE__ */ jsxs58(Fragment45, { children: [
       /* @__PURE__ */ jsx144(SliderTick, { label: true, large: true, text: "0" }),
       /* @__PURE__ */ jsx144(SliderTick, {}),
@@ -8691,7 +8706,9 @@ var states63 = [
   States.disabled
 ];
 var options60 = {};
-var defaultProps59 = {};
+var defaultProps59 = {
+  imgPath: "/packages/html/assets/captcha.jpg"
+};
 var Captcha = (props) => {
   const {
     value,
@@ -8699,6 +8716,7 @@ var Captcha = (props) => {
     invalid,
     loading,
     disabled,
+    imgPath = defaultProps59.imgPath,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs68(
@@ -8722,7 +8740,7 @@ var Captcha = (props) => {
               "img",
               {
                 className: classNames({ "k-hidden": loading }),
-                src: "/packages/html/assets/captcha.jpg"
+                src: imgPath
               }
             ),
             loading && /* @__PURE__ */ jsx172(SkeletonRectangle, { style: { width: "100%", height: "100%" } })
@@ -12098,8 +12116,10 @@ var UploadNormal = (props) => /* @__PURE__ */ jsx286(
 import { jsx as jsx287, jsxs as jsxs118 } from "react/jsx-runtime";
 var DROPZONE_CLASSNAME = `k-external-dropzone`;
 var states95 = [
+  States.disabled,
   States.hover
 ];
+var options88 = {};
 var defaultProps87 = {
   icon: "upload",
   hint: "Drag and drop files here to upload"
@@ -12107,6 +12127,7 @@ var defaultProps87 = {
 var Dropzone = (props) => {
   const {
     hover,
+    disabled,
     icon = defaultProps87.icon,
     hint = defaultProps87.hint,
     note,
@@ -12119,7 +12140,9 @@ var Dropzone = (props) => {
       className: classNames(
         props.className,
         DROPZONE_CLASSNAME,
-        stateClassNames(DROPZONE_CLASSNAME, {}),
+        stateClassNames(DROPZONE_CLASSNAME, {
+          disabled
+        }),
         {
           "k-external-dropzone-hover": hover
         }
@@ -12133,6 +12156,7 @@ var Dropzone = (props) => {
   );
 };
 Dropzone.states = states95;
+Dropzone.options = options88;
 Dropzone.className = DROPZONE_CLASSNAME;
 Dropzone.defaultProps = defaultProps87;
 
@@ -12153,7 +12177,7 @@ var states96 = [
   States.selected,
   States.disabled
 ];
-var options88 = {
+var options89 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
@@ -12227,7 +12251,7 @@ var FloatingActionButton = (props) => {
   );
 };
 FloatingActionButton.states = states96;
-FloatingActionButton.options = options88;
+FloatingActionButton.options = options89;
 FloatingActionButton.className = FLOATINGACTIONBUTTON_CLASSNAME;
 FloatingActionButton.defaultProps = defaultProps88;
 
@@ -12295,7 +12319,7 @@ var TOOLBAR_CLASSNAME = `k-toolbar`;
 var states98 = [
   States.focus
 ];
-var options89 = {
+var options90 = {
   size: [Size.small, Size.medium, Size.large]
 };
 var defaultProps89 = {
@@ -12460,7 +12484,7 @@ var Toolbar = (props) => {
   );
 };
 Toolbar.states = states98;
-Toolbar.options = options89;
+Toolbar.options = options90;
 Toolbar.className = TOOLBAR_CLASSNAME;
 Toolbar.defaultProps = defaultProps89;
 
@@ -12470,7 +12494,7 @@ var TOOLBARANGULAR_CLASSNAME = `k-toolbar`;
 var states99 = [
   States.focus
 ];
-var options90 = {
+var options91 = {
   size: [Size.small, Size.medium, Size.large]
 };
 var defaultProps90 = {
@@ -12635,7 +12659,7 @@ var ToolbarAngular = (props) => {
   );
 };
 ToolbarAngular.states = states99;
-ToolbarAngular.options = options90;
+ToolbarAngular.options = options91;
 ToolbarAngular.className = TOOLBARANGULAR_CLASSNAME;
 ToolbarAngular.defaultProps = defaultProps90;
 
@@ -12648,7 +12672,7 @@ var TOOLBARITEM_CLASSNAME = `k-toolbar-item`;
 var states100 = [
   States.focus
 ];
-var options91 = {};
+var options92 = {};
 var defaultProps91 = {};
 var ToolbarItem = (props) => {
   const {
@@ -12671,7 +12695,7 @@ var ToolbarItem = (props) => {
   );
 };
 ToolbarItem.states = states100;
-ToolbarItem.options = options91;
+ToolbarItem.options = options92;
 ToolbarItem.className = TOOLBARITEM_CLASSNAME;
 ToolbarItem.defaultProps = defaultProps91;
 
@@ -12679,7 +12703,7 @@ ToolbarItem.defaultProps = defaultProps91;
 import { jsx as jsx300 } from "react/jsx-runtime";
 var TOOLBARPOPUP_CLASSNAME = `k-toolbar-popup`;
 var states101 = [];
-var options92 = {};
+var options93 = {};
 var defaultProps92 = {};
 var ToolbarPopup = (props) => {
   const { ...other } = props;
@@ -12696,7 +12720,7 @@ var ToolbarPopup = (props) => {
   );
 };
 ToolbarPopup.states = states101;
-ToolbarPopup.options = options92;
+ToolbarPopup.options = options93;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps92;
 
@@ -12716,7 +12740,7 @@ import { jsx as jsx304 } from "react/jsx-runtime";
 import { Fragment as Fragment85, jsx as jsx305, jsxs as jsxs122 } from "react/jsx-runtime";
 var DIALOG_CLASSNAME = `k-dialog`;
 var states102 = [];
-var options93 = {
+var options94 = {
   themeColor: [
     ThemeColor.primary,
     ThemeColor.light,
@@ -12757,7 +12781,7 @@ var Dialog = (props) => {
   );
 };
 Dialog.states = states102;
-Dialog.options = options93;
+Dialog.options = options94;
 Dialog.className = DIALOG_CLASSNAME;
 Dialog.defaultProps = defaultProps93;
 
@@ -12771,7 +12795,7 @@ import { Fragment as Fragment87, jsx as jsx307, jsxs as jsxs123 } from "react/js
 import { Fragment as Fragment88, jsx as jsx308, jsxs as jsxs124 } from "react/jsx-runtime";
 var NOTIFICATION_CLASSNAME = `k-notification`;
 var states103 = [];
-var options94 = {
+var options95 = {
   themeColor: [
     ThemeColor.base,
     ThemeColor.primary,
@@ -12825,7 +12849,7 @@ var Notification = (props) => {
   );
 };
 Notification.states = states103;
-Notification.options = options94;
+Notification.options = options95;
 Notification.className = NOTIFICATION_CLASSNAME;
 Notification.defaultProps = defaultProps94;
 
@@ -12848,7 +12872,7 @@ import { jsx as jsx313 } from "react/jsx-runtime";
 import { Fragment as Fragment89, jsx as jsx314, jsxs as jsxs125 } from "react/jsx-runtime";
 var POPOVER_CLASSNAME = `k-popover`;
 var states104 = [];
-var options95 = {};
+var options96 = {};
 var defaultProps95 = {};
 var Popover = (props) => {
   const {
@@ -12882,7 +12906,7 @@ var Popover = (props) => {
   );
 };
 Popover.states = states104;
-Popover.options = options95;
+Popover.options = options96;
 Popover.className = POPOVER_CLASSNAME;
 Popover.defaultProps = defaultProps95;
 
@@ -12893,7 +12917,7 @@ import { jsx as jsx315 } from "react/jsx-runtime";
 import { jsx as jsx316, jsxs as jsxs126 } from "react/jsx-runtime";
 var TOOLTIP_CLASSNAME = `k-tooltip`;
 var states105 = [];
-var options96 = {
+var options97 = {
   themeColor: [
     ThemeColor.primary,
     ThemeColor.secondary,
@@ -12952,7 +12976,7 @@ var Tooltip = (props) => {
   );
 };
 Tooltip.states = states105;
-Tooltip.options = options96;
+Tooltip.options = options97;
 Tooltip.className = TOOLTIP_CLASSNAME;
 Tooltip.defaultProps = defaultProps96;
 
@@ -12966,7 +12990,7 @@ import { jsx as jsx318 } from "react/jsx-runtime";
 import { Fragment as Fragment90, jsx as jsx319, jsxs as jsxs127 } from "react/jsx-runtime";
 var WINDOW_CLASSNAME = `k-window`;
 var states106 = [];
-var options97 = {
+var options98 = {
   themeColor: [
     ThemeColor.primary,
     ThemeColor.light,
@@ -13015,7 +13039,7 @@ var Window = (props) => {
   );
 };
 Window.states = states106;
-Window.options = options97;
+Window.options = options98;
 Window.className = WINDOW_CLASSNAME;
 Window.defaultProps = defaultProps97;
 
@@ -13026,7 +13050,7 @@ import { Fragment as Fragment91, jsx as jsx320 } from "react/jsx-runtime";
 import { jsx as jsx321 } from "react/jsx-runtime";
 var APPBAR_CLASSNAME = `k-appbar`;
 var states107 = [];
-var options98 = {
+var options99 = {
   themeColor: [
     ThemeColor.inherit,
     ThemeColor.base,
@@ -13070,7 +13094,7 @@ var Appbar = (props) => {
   );
 };
 Appbar.states = states107;
-Appbar.options = options98;
+Appbar.options = options99;
 Appbar.className = APPBAR_CLASSNAME;
 Appbar.defaultProps = defaultProps98;
 
@@ -13086,7 +13110,7 @@ var BOTTOM_NAV_CLASSNAME = "k-bottom-nav";
 var states108 = [
   States.disabled
 ];
-var options99 = {
+var options100 = {
   fillMode: [FillMode.solid, FillMode.flat],
   themeColor: [
     ThemeColor.primary,
@@ -13133,7 +13157,7 @@ var BottomNav = (props) => {
   ), dir, children: props.children });
 };
 BottomNav.states = states108;
-BottomNav.options = options99;
+BottomNav.options = options100;
 BottomNav.className = BOTTOM_NAV_CLASSNAME;
 BottomNav.defaultProps = defaultProps99;
 
@@ -13145,7 +13169,7 @@ var states109 = [
   States.selected,
   States.disabled
 ];
-var options100 = {};
+var options101 = {};
 var defaultProps100 = {};
 var BottomNavItem = (props) => {
   const {
@@ -13170,7 +13194,7 @@ var BottomNavItem = (props) => {
   ] });
 };
 BottomNavItem.states = states109;
-BottomNavItem.options = options100;
+BottomNavItem.options = options101;
 BottomNavItem.className = BOTTOM_NAV_ITEM_CLASSNAME;
 BottomNavItem.defaultProps = defaultProps100;
 
@@ -13189,7 +13213,7 @@ var BREADCRUMB_CLASSNAME = `k-breadcrumb`;
 var states110 = [
   States.focus
 ];
-var options101 = {
+var options102 = {
   size: [Size.small, Size.medium, Size.large]
 };
 var defaultProps101 = {
@@ -13225,7 +13249,7 @@ var Breadcrumb = (props) => {
   );
 };
 Breadcrumb.states = states110;
-Breadcrumb.options = options101;
+Breadcrumb.options = options102;
 Breadcrumb.className = BREADCRUMB_CLASSNAME;
 Breadcrumb.defaultProps = defaultProps101;
 
@@ -13306,7 +13330,7 @@ var states112 = [
   States.focus,
   States.disabled
 ];
-var options102 = {
+var options103 = {
   size: [Size.small, Size.medium, Size.large]
 };
 var defaultProps102 = {
@@ -13552,7 +13576,7 @@ var Pager = (props) => {
   );
 };
 Pager.states = states112;
-Pager.options = options102;
+Pager.options = options103;
 Pager.className = PAGER_CLASSNAME;
 Pager.defaultProps = defaultProps102;
 
@@ -13600,7 +13624,7 @@ var states113 = [
   States.selected,
   States.disabled
 ];
-var options103 = {
+var options104 = {
   themeColor: [
     ThemeColor.primary,
     ThemeColor.success,
@@ -13650,7 +13674,7 @@ var Card = (props) => {
   );
 };
 Card.states = states113;
-Card.options = options103;
+Card.options = options104;
 Card.className = CARD_CLASSNAME;
 Card.defaultProps = defaultProps103;
 
@@ -13803,7 +13827,7 @@ var states115 = [
   States.focus,
   States.disabled
 ];
-var options104 = {};
+var options105 = {};
 var defaultProps104 = {};
 var ExpansionPanel = (props) => {
   const {
@@ -13848,7 +13872,7 @@ var ExpansionPanel = (props) => {
   ] });
 };
 ExpansionPanel.states = states115;
-ExpansionPanel.options = options104;
+ExpansionPanel.options = options105;
 ExpansionPanel.className = EXPANSION_PANEL_CLASSNAME;
 ExpansionPanel.defaultProps = defaultProps104;
 
@@ -13858,12 +13882,168 @@ import { jsx as jsx357 } from "react/jsx-runtime";
 // src/expansion-panel/templates/expansion-panel-expanded.tsx
 import { jsx as jsx358 } from "react/jsx-runtime";
 
-// src/tilelayout/tilelayout.spec.tsx
+// src/splitter/splitter-pane.tsx
 import { jsx as jsx359 } from "react/jsx-runtime";
-var TILELAYOUT_CLASSNAME = `k-tilelayout`;
+var SPLITTERPANE_CLASSNAME = "k-pane";
 var states116 = [];
-var options105 = {};
-var defaultProps105 = {};
+var options106 = {};
+var defaultProps105 = {
+  resizable: true,
+  flex: false
+};
+var SplitterPane = (props) => {
+  const {
+    scrollable,
+    flexBasis,
+    flex,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx359(
+    "div",
+    {
+      ...other,
+      style: { flexBasis, ...props.style },
+      className: classNames(
+        props.className,
+        SPLITTERPANE_CLASSNAME,
+        {
+          [`${SPLITTERPANE_CLASSNAME}-static`]: flexBasis,
+          [`${SPLITTERPANE_CLASSNAME}-flex`]: flex,
+          [`k-scrollable`]: scrollable
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+SplitterPane.states = states116;
+SplitterPane.options = options106;
+SplitterPane.className = SPLITTERPANE_CLASSNAME;
+SplitterPane.defaultProps = defaultProps105;
+var splitter_pane_default = SplitterPane;
+
+// src/splitter/splitter-splitbar.tsx
+import { Fragment as Fragment101, jsx as jsx360, jsxs as jsxs141 } from "react/jsx-runtime";
+var SPLITTERSPLITBAR_CLASSNAME = "k-splitbar";
+var states117 = [
+  States.hover,
+  States.focus
+];
+var options107 = {};
+var defaultProps106 = {
+  orientation: "horizontal",
+  draggable: true
+};
+var SplitterSplitbar = (props) => {
+  const {
+    hover,
+    focus,
+    orientation,
+    draggable,
+    collapsePrev,
+    collapseNext,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs141(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SPLITTERSPLITBAR_CLASSNAME,
+        stateClassNames(SPLITTERSPLITBAR_CLASSNAME, {
+          hover,
+          focus
+        }),
+        {
+          [`${SPLITTERSPLITBAR_CLASSNAME}-${orientation}`]: orientation,
+          [`${SPLITTERSPLITBAR_CLASSNAME}-draggable-${orientation}`]: draggable,
+          [`${SPLITTERSPLITBAR_CLASSNAME}-static-${orientation}`]: !draggable && !collapsePrev && !collapseNext
+        }
+      ),
+      children: [
+        collapsePrev && /* @__PURE__ */ jsx360(Fragment101, { children: /* @__PURE__ */ jsx360("div", { className: "k-collapse-prev", children: /* @__PURE__ */ jsx360(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "left" : "up"}`, size: "xsmall" }) }) }),
+        /* @__PURE__ */ jsx360("div", { className: "k-resize-handle" }),
+        collapseNext && /* @__PURE__ */ jsx360(Fragment101, { children: /* @__PURE__ */ jsx360("div", { className: "k-collapse-next", children: /* @__PURE__ */ jsx360(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "right" : "down"}`, size: "xsmall" }) }) })
+      ]
+    }
+  );
+};
+SplitterSplitbar.states = states117;
+SplitterSplitbar.options = options107;
+SplitterSplitbar.className = SPLITTERSPLITBAR_CLASSNAME;
+SplitterSplitbar.defaultProps = defaultProps106;
+var splitter_splitbar_default = SplitterSplitbar;
+
+// src/splitter/splitter.spec.tsx
+import { Fragment as Fragment102, jsx as jsx361 } from "react/jsx-runtime";
+import { createElement as createElement6 } from "react";
+var SPLITTER_CLASSNAME = "k-splitter";
+var options108 = {};
+var defaultProps107 = {
+  orientation: "horizontal"
+};
+var Splitter = (props) => {
+  const {
+    orientation,
+    children,
+    ...other
+  } = props;
+  const listChildren = [];
+  if (children) {
+    if (Array.isArray(children)) {
+      children.map((child, index) => {
+        if (child.type === splitter_pane_default) {
+          listChildren.push(
+            /* @__PURE__ */ createElement6(splitter_pane_default, { ...child.props, key: index }),
+            children[index + 1] && /* @__PURE__ */ jsx361(Fragment102, { children: /* @__PURE__ */ jsx361(
+              splitter_splitbar_default,
+              {
+                draggable: child.props.resizable !== false && children[index + 1].props.resizable !== false,
+                collapsePrev: child.props.collapsible,
+                collapseNext: children[index + 1].props.collapsible,
+                orientation
+              }
+            ) })
+          );
+        } else {
+          listChildren.push(child);
+        }
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx361(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        SPLITTER_CLASSNAME,
+        {
+          [`${SPLITTER_CLASSNAME}-${orientation}`]: orientation
+        },
+        "k-splitter-flex"
+      ),
+      children: listChildren
+    }
+  );
+};
+Splitter.options = options108;
+Splitter.className = SPLITTER_CLASSNAME;
+Splitter.defaultProps = defaultProps107;
+
+// src/splitter/templates/splitter-normal.tsx
+import { jsx as jsx362, jsxs as jsxs142 } from "react/jsx-runtime";
+
+// src/splitter/templates/splitter-vertical.tsx
+import { jsx as jsx363, jsxs as jsxs143 } from "react/jsx-runtime";
+
+// src/tilelayout/tilelayout.spec.tsx
+import { jsx as jsx364 } from "react/jsx-runtime";
+var TILELAYOUT_CLASSNAME = `k-tilelayout`;
+var states118 = [];
+var options109 = {};
+var defaultProps108 = {};
 var TileLayout = (props) => {
   const {
     gap,
@@ -13879,7 +14059,7 @@ var TileLayout = (props) => {
     gap,
     ...style
   };
-  return /* @__PURE__ */ jsx359(
+  return /* @__PURE__ */ jsx364(
     "div",
     {
       className: classNames(
@@ -13891,20 +14071,20 @@ var TileLayout = (props) => {
     }
   );
 };
-TileLayout.states = states116;
-TileLayout.options = options105;
+TileLayout.states = states118;
+TileLayout.options = options109;
 TileLayout.className = TILELAYOUT_CLASSNAME;
-TileLayout.defaultProps = defaultProps105;
+TileLayout.defaultProps = defaultProps108;
 
 // src/tilelayout/tilelayout-item.spec.tsx
 import React from "react";
-import { jsx as jsx360, jsxs as jsxs141 } from "react/jsx-runtime";
+import { jsx as jsx365, jsxs as jsxs144 } from "react/jsx-runtime";
 var TILELAYOUTITEM_CLASSNAME = `k-tilelayout-item`;
-var states117 = [
+var states119 = [
   States.focus
 ];
-var options106 = {};
-var defaultProps106 = {};
+var options110 = {};
+var defaultProps109 = {};
 var TileLayoutItem = (props) => {
   const {
     header,
@@ -13913,7 +14093,7 @@ var TileLayoutItem = (props) => {
     resize,
     style
   } = props;
-  return /* @__PURE__ */ jsxs141(
+  return /* @__PURE__ */ jsxs144(
     Card,
     {
       className: classNames(
@@ -13930,44 +14110,44 @@ var TileLayoutItem = (props) => {
       ),
       style,
       children: [
-        header && React.isValidElement(header) ? /* @__PURE__ */ jsx360(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", children: header }) : /* @__PURE__ */ jsx360(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", title: header }),
-        body && /* @__PURE__ */ jsx360(CardBody, { className: "k-tilelayout-item-body", children: body })
+        header && React.isValidElement(header) ? /* @__PURE__ */ jsx365(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", children: header }) : /* @__PURE__ */ jsx365(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", title: header }),
+        body && /* @__PURE__ */ jsx365(CardBody, { className: "k-tilelayout-item-body", children: body })
       ]
     }
   );
 };
-TileLayoutItem.states = states117;
-TileLayoutItem.options = options106;
+TileLayoutItem.states = states119;
+TileLayoutItem.options = options110;
 TileLayoutItem.className = TILELAYOUTITEM_CLASSNAME;
-TileLayoutItem.defaultProps = defaultProps106;
+TileLayoutItem.defaultProps = defaultProps109;
 
 // src/tilelayout/tilelayout-item-hint.spec.tsx
-import { jsx as jsx361 } from "react/jsx-runtime";
+import { jsx as jsx366 } from "react/jsx-runtime";
 var TILELAYOUTITEMHINT_CLASSNAME = `k-layout-item-hint`;
-var states118 = [];
-var options107 = {};
-var defaultProps107 = {};
+var states120 = [];
+var options111 = {};
+var defaultProps110 = {};
 var TileLayoutItemHint = (props) => {
   const { style } = props;
-  return /* @__PURE__ */ jsx361("div", { className: TILELAYOUTITEMHINT_CLASSNAME, style });
+  return /* @__PURE__ */ jsx366("div", { className: TILELAYOUTITEMHINT_CLASSNAME, style });
 };
-TileLayoutItemHint.states = states118;
-TileLayoutItemHint.options = options107;
+TileLayoutItemHint.states = states120;
+TileLayoutItemHint.options = options111;
 TileLayoutItemHint.className = TILELAYOUTITEMHINT_CLASSNAME;
-TileLayoutItemHint.defaultProps = defaultProps107;
+TileLayoutItemHint.defaultProps = defaultProps110;
 
 // src/tilelayout/templates/tilelayout-normal.tsx
-import { jsx as jsx362 } from "react/jsx-runtime";
+import { jsx as jsx367 } from "react/jsx-runtime";
 
 // src/listview/listview.spec.tsx
-import { Fragment as Fragment101, jsx as jsx363, jsxs as jsxs142 } from "react/jsx-runtime";
+import { Fragment as Fragment103, jsx as jsx368, jsxs as jsxs145 } from "react/jsx-runtime";
 var LISTVIEW_CLASSNAME = `k-listview`;
-var states119 = [
+var states121 = [
   States.loading,
   States.disabled
 ];
-var options108 = {};
-var defaultProps108 = {
+var options112 = {};
+var defaultProps111 = {
   pagerPosition: "bottom",
   layout: "flex",
   flexDirection: "row"
@@ -13977,23 +14157,23 @@ var ListView = (props) => {
     header,
     footer,
     pageable,
-    pagerPosition = defaultProps108.pagerPosition,
+    pagerPosition = defaultProps111.pagerPosition,
     bordered,
-    layout = defaultProps108.layout,
-    flexDirection = defaultProps108.flexDirection,
+    layout = defaultProps111.layout,
+    flexDirection = defaultProps111.flexDirection,
     flexWrap,
     gridColumns,
     loading,
     disabled,
     ...other
   } = props;
-  const pager = /* @__PURE__ */ jsx363(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ jsx363(Fragment101, { children: /* @__PURE__ */ jsxs142("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
-    /* @__PURE__ */ jsx363("span", { className: "k-loading-text", children: "Loading..." }),
-    /* @__PURE__ */ jsx363("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ jsx363("div", { className: "k-loading-color" })
+  const pager = /* @__PURE__ */ jsx368(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
+  const loader = /* @__PURE__ */ jsx368(Fragment103, { children: /* @__PURE__ */ jsxs145("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+    /* @__PURE__ */ jsx368("span", { className: "k-loading-text", children: "Loading..." }),
+    /* @__PURE__ */ jsx368("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ jsx368("div", { className: "k-loading-color" })
   ] }) });
-  return /* @__PURE__ */ jsxs142(
+  return /* @__PURE__ */ jsxs145(
     "div",
     {
       ...other,
@@ -14010,8 +14190,8 @@ var ListView = (props) => {
       ),
       children: [
         pageable && pagerPosition === "top" && pager,
-        header && /* @__PURE__ */ jsx363("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ jsxs142("div", { className: classNames(
+        header && /* @__PURE__ */ jsx368("div", { className: "k-listview-header", children: "Header" }),
+        /* @__PURE__ */ jsxs145("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -14023,33 +14203,33 @@ var ListView = (props) => {
           loading && loader,
           props.children
         ] }),
-        footer && /* @__PURE__ */ jsx363("div", { className: "k-listview-footer", children: "Footer" }),
+        footer && /* @__PURE__ */ jsx368("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]
     }
   );
 };
-ListView.states = states119;
-ListView.options = options108;
+ListView.states = states121;
+ListView.options = options112;
 ListView.className = LISTVIEW_CLASSNAME;
-ListView.defaultProps = defaultProps108;
+ListView.defaultProps = defaultProps111;
 
 // src/listview/listview-item.spec.tsx
-import { jsx as jsx364 } from "react/jsx-runtime";
+import { jsx as jsx369 } from "react/jsx-runtime";
 var LISTVIEWITEM_CLASSNAME = `k-listview-item`;
-var states120 = [
+var states122 = [
   States.focus,
   States.selected
 ];
-var options109 = {};
-var defaultProps109 = {};
+var options113 = {};
+var defaultProps112 = {};
 var ListViewItem = (props) => {
   const {
     focus,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx364(
+  return /* @__PURE__ */ jsx369(
     "div",
     {
       ...other,
@@ -14065,122 +14245,437 @@ var ListViewItem = (props) => {
     }
   );
 };
-ListViewItem.states = states120;
-ListViewItem.options = options109;
+ListViewItem.states = states122;
+ListViewItem.options = options113;
 ListViewItem.className = LISTVIEWITEM_CLASSNAME;
-ListViewItem.defaultProps = defaultProps109;
+ListViewItem.defaultProps = defaultProps112;
 
 // src/listview/templates/listview-normal.tsx
-import { Fragment as Fragment102, jsx as jsx365, jsxs as jsxs143 } from "react/jsx-runtime";
+import { Fragment as Fragment104, jsx as jsx370, jsxs as jsxs146 } from "react/jsx-runtime";
 
 // src/filter/filter-preview.tsx
-import { jsx as jsx366 } from "react/jsx-runtime";
+import { jsx as jsx371 } from "react/jsx-runtime";
 var FILTER_PREVIEW_CLASSNAME = "k-filter-preview";
-var states121 = [];
-var options110 = {};
-var defaultProps110 = {};
+var states123 = [];
+var options114 = {};
+var defaultProps113 = {};
 var FilterPreview = (props) => {
   const { fields } = props;
   const expressionPreview = [];
   if (fields) {
     fields.map(({ name, value }) => {
       expressionPreview.push(
-        /* @__PURE__ */ jsx366("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
+        /* @__PURE__ */ jsx371("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
       );
     });
   }
-  return /* @__PURE__ */ jsx366("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
+  return /* @__PURE__ */ jsx371("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
 };
-FilterPreview.states = states121;
-FilterPreview.options = options110;
-FilterPreview.defaultProps = defaultProps110;
+FilterPreview.states = states123;
+FilterPreview.options = options114;
+FilterPreview.defaultProps = defaultProps113;
 FilterPreview.className = FILTER_PREVIEW_CLASSNAME;
 
 // src/filter/filter.spec.tsx
-import { Fragment as Fragment103, jsx as jsx367, jsxs as jsxs144 } from "react/jsx-runtime";
+import { Fragment as Fragment105, jsx as jsx372, jsxs as jsxs147 } from "react/jsx-runtime";
 var FILTER_CLASSNAME = "k-filter";
-var states122 = [];
-var options111 = {};
-var defaultProps111 = {};
+var states124 = [];
+var options115 = {};
+var defaultProps114 = {};
 var Filter = (props) => {
   const {
     children,
     showApplyButton
   } = props;
   const filterChildren = [];
-  let expressionPreview = /* @__PURE__ */ jsx367(Fragment103, {});
+  let expressionPreview = /* @__PURE__ */ jsx372(Fragment105, {});
   if (children) {
     if (Array.isArray(children)) {
       children.map((child) => {
         if (child.type !== FilterPreview) {
           filterChildren.push(child);
         } else {
-          expressionPreview = /* @__PURE__ */ jsx367(FilterPreview, { ...child.props });
+          expressionPreview = /* @__PURE__ */ jsx372(FilterPreview, { ...child.props });
         }
       });
     }
   }
-  return /* @__PURE__ */ jsxs144("div", { className: classNames(props.className, FILTER_CLASSNAME), children: [
-    /* @__PURE__ */ jsx367("ul", { className: "k-filter-container", children: /* @__PURE__ */ jsx367("li", { className: "k-filter-group-main", children: filterChildren }) }),
+  return /* @__PURE__ */ jsxs147("div", { className: classNames(props.className, FILTER_CLASSNAME), children: [
+    /* @__PURE__ */ jsx372("ul", { className: "k-filter-container", children: /* @__PURE__ */ jsx372("li", { className: "k-filter-group-main", children: filterChildren }) }),
     expressionPreview,
-    showApplyButton && /* @__PURE__ */ jsx367(Button, { className: "k-filter-apply", children: "Apply" })
+    showApplyButton && /* @__PURE__ */ jsx372(Button, { className: "k-filter-apply", children: "Apply" })
   ] });
 };
-Filter.states = states122;
-Filter.options = options111;
-Filter.defaultProps = defaultProps111;
+Filter.states = states124;
+Filter.options = options115;
+Filter.defaultProps = defaultProps114;
 Filter.className = FILTER_CLASSNAME;
 
 // src/filter/filter-toolbar.tsx
-import { jsx as jsx368 } from "react/jsx-runtime";
+import { jsx as jsx373 } from "react/jsx-runtime";
 var FILTER_TOOLBAR_CLASSNAME = "k-filter-toolbar";
-var states123 = [];
-var options112 = {};
-var defaultProps112 = {};
+var states125 = [];
+var options116 = {};
+var defaultProps115 = {};
 var FilterToolbar = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx368("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
+  return /* @__PURE__ */ jsx373("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
 };
-FilterToolbar.states = states123;
-FilterToolbar.options = options112;
-FilterToolbar.defaultProps = defaultProps112;
+FilterToolbar.states = states125;
+FilterToolbar.options = options116;
+FilterToolbar.defaultProps = defaultProps115;
 
 // src/filter/filter-lines.tsx
-import { jsx as jsx369 } from "react/jsx-runtime";
+import { jsx as jsx374 } from "react/jsx-runtime";
 var FILTER_LINES_CLASSNAME = "k-filter-lines";
-var states124 = [];
-var options113 = {};
-var defaultProps113 = {};
+var states126 = [];
+var options117 = {};
+var defaultProps116 = {};
 var FilterLines = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx369("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
+  return /* @__PURE__ */ jsx374("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
 };
-FilterLines.states = states124;
-FilterLines.options = options113;
-FilterLines.defaultProps = defaultProps113;
+FilterLines.states = states126;
+FilterLines.options = options117;
+FilterLines.defaultProps = defaultProps116;
 
 // src/filter/filter-item.tsx
-import { jsx as jsx370 } from "react/jsx-runtime";
+import { jsx as jsx375 } from "react/jsx-runtime";
 var FILTER_ITEM_CLASSNAME = "k-filter-item";
-var states125 = [];
-var options114 = {};
-var defaultProps114 = {};
+var states127 = [];
+var options118 = {};
+var defaultProps117 = {};
 var FilterItem = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ jsx370("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
+  return /* @__PURE__ */ jsx375("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
 };
-FilterItem.states = states125;
-FilterItem.options = options114;
-FilterItem.defaultProps = defaultProps114;
+FilterItem.states = states127;
+FilterItem.options = options118;
+FilterItem.defaultProps = defaultProps117;
 
 // src/filter/templates/filter-normal.tsx
-import { jsx as jsx371, jsxs as jsxs145 } from "react/jsx-runtime";
+import { jsx as jsx376, jsxs as jsxs148 } from "react/jsx-runtime";
+
+// src/filemanager/filemanager-toolbar.spec.tsx
+import { jsx as jsx377 } from "react/jsx-runtime";
+var FILEMANAGERTOOLBAR_CLASSNAME = `k-filemanager-toolbar`;
+var states128 = [];
+var options119 = {};
+var defaultProps118 = {};
+var FileManagerToolbar = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx377(
+    Toolbar,
+    {
+      className: classNames(
+        props.className,
+        FILEMANAGERTOOLBAR_CLASSNAME
+      ),
+      ...other,
+      children
+    }
+  );
+};
+FileManagerToolbar.states = states128;
+FileManagerToolbar.options = options119;
+FileManagerToolbar.className = FILEMANAGERTOOLBAR_CLASSNAME;
+FileManagerToolbar.defaultProps = defaultProps118;
+var filemanager_toolbar_spec_default = FileManagerToolbar;
+
+// src/filemanager/filemanager.spec.tsx
+import { Fragment as Fragment106, jsx as jsx378, jsxs as jsxs149 } from "react/jsx-runtime";
+var FILEMANAGER_CLASSNAME = "k-filemanager";
+var states129 = [
+  States.disabled
+];
+var options120 = {};
+var defaultToolbar = /* @__PURE__ */ jsx378(Fragment106, { children: /* @__PURE__ */ jsxs149(filemanager_toolbar_spec_default, { children: [
+  /* @__PURE__ */ jsx378(Button, { children: "New Folder" }),
+  /* @__PURE__ */ jsx378(Button, { children: "Upload" }),
+  /* @__PURE__ */ jsxs149(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx378(Button, { icon: "sort-asc-small" }),
+    /* @__PURE__ */ jsx378(Button, { icon: "sort-desc-small" })
+  ] }),
+  /* @__PURE__ */ jsx378(SplitButton, { text: "Sort By" }),
+  /* @__PURE__ */ jsxs149(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx378(Button, { icon: "grid-layout" }),
+    /* @__PURE__ */ jsx378(Button, { icon: "grid" })
+  ] }),
+  /* @__PURE__ */ jsx378("div", { className: "k-spacer" }),
+  /* @__PURE__ */ jsxs149("div", { className: "k-filemanager-details-toggle", children: [
+    /* @__PURE__ */ jsx378("label", { children: "View Details" }),
+    /* @__PURE__ */ jsx378(Switch, {})
+  ] }),
+  /* @__PURE__ */ jsx378(Searchbox, { className: "k-filemanager-search-tool", placeholder: "Search..." })
+] }) });
+var defaultProps119 = {
+  toolbar: defaultToolbar
+};
+var FileManager = (props) => {
+  const {
+    disabled,
+    toolbar
+  } = props;
+  return /* @__PURE__ */ jsxs149("div", { className: classNames(
+    props.className,
+    FILEMANAGER_CLASSNAME,
+    stateClassNames(FILEMANAGER_CLASSNAME, {
+      disabled
+    })
+  ), children: [
+    /* @__PURE__ */ jsx378("div", { className: "k-filemanager-header", children: toolbar }),
+    /* @__PURE__ */ jsx378("div", { className: "k-filemanager-content-container", children: props.children })
+  ] });
+};
+FileManager.states = states129;
+FileManager.options = options120;
+FileManager.className = FILEMANAGER_CLASSNAME;
+FileManager.defaultProps = defaultProps119;
+
+// src/filemanager/filemanager-breadcrumb.spec.tsx
+import { jsx as jsx379 } from "react/jsx-runtime";
+var FILEMANAGERBREADCRUMB_CLASSNAME = `k-filemanager-breadcrumb`;
+var states130 = [];
+var options121 = {};
+var defaultProps120 = {};
+var FileManagerBreadcrumb = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx379(
+    Breadcrumb,
+    {
+      className: classNames(
+        props.className,
+        FILEMANAGERBREADCRUMB_CLASSNAME
+      ),
+      ...other,
+      children
+    }
+  );
+};
+FileManagerBreadcrumb.states = states130;
+FileManagerBreadcrumb.options = options121;
+FileManagerBreadcrumb.className = FILEMANAGERBREADCRUMB_CLASSNAME;
+FileManagerBreadcrumb.defaultProps = defaultProps120;
+
+// src/filemanager/filemanager-listview.spec.tsx
+import { jsx as jsx380 } from "react/jsx-runtime";
+var FILEMANAGERLISTVIEW_CLASSNAME = `k-filemanager-listview`;
+var states131 = [];
+var options122 = {};
+var defaultProps121 = {};
+var FileManagerListView = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx380(
+    ListView,
+    {
+      className: classNames(
+        props.className,
+        FILEMANAGERLISTVIEW_CLASSNAME,
+        "k-selectable"
+      ),
+      flexWrap: "wrap",
+      ...other,
+      children
+    }
+  );
+};
+FileManagerListView.states = states131;
+FileManagerListView.options = options122;
+FileManagerListView.className = FILEMANAGERLISTVIEW_CLASSNAME;
+FileManagerListView.defaultProps = defaultProps121;
+
+// src/filemanager/filemanager-treeview.spec.tsx
+import { jsx as jsx381 } from "react/jsx-runtime";
+var FILEMANAGERTREEVIEW_CLASSNAME = `k-filemanager-treeview`;
+var states132 = [];
+var options123 = {};
+var defaultProps122 = {};
+var FileManagerTreeview = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx381(
+    Treeview,
+    {
+      className: classNames(
+        props.className,
+        FILEMANAGERTREEVIEW_CLASSNAME
+      ),
+      ...other,
+      children
+    }
+  );
+};
+FileManagerTreeview.states = states132;
+FileManagerTreeview.options = options123;
+FileManagerTreeview.className = FILEMANAGERTREEVIEW_CLASSNAME;
+FileManagerTreeview.defaultProps = defaultProps122;
+
+// src/filemanager/filemanager-drag-hint.tsx
+import { jsx as jsx382, jsxs as jsxs150 } from "react/jsx-runtime";
+var FILEMANAGERDRAGHINT_CLASSNAME = "k-filemanager-drag-hint";
+var states133 = [];
+var options124 = {};
+var defaultProps123 = {
+  icon: "file"
+};
+var FileManagerDragHint = (props) => {
+  const {
+    hint,
+    icon = defaultProps123.icon,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs150(
+    "div",
+    {
+      className: classNames(
+        props.className,
+        FILEMANAGERDRAGHINT_CLASSNAME,
+        "k-drag-clue"
+      ),
+      ...other,
+      children: [
+        /* @__PURE__ */ jsx382(Icon, { icon }),
+        /* @__PURE__ */ jsx382("span", { children: hint })
+      ]
+    }
+  );
+};
+FileManagerDragHint.states = states133;
+FileManagerDragHint.options = options124;
+FileManagerDragHint.className = FILEMANAGERDRAGHINT_CLASSNAME;
+FileManagerDragHint.defaultProps = defaultProps123;
+
+// src/filemanager/file-info.tsx
+import { Fragment as Fragment107, jsx as jsx383, jsxs as jsxs151 } from "react/jsx-runtime";
+var FILEINFO_CLASSNAME = "k-file-info";
+var states134 = [];
+var options125 = {};
+var defaultProps124 = {
+  name: "No File Selected",
+  icon: "file"
+};
+var FileInfo = (props) => {
+  const {
+    selection,
+    name = defaultProps124.name,
+    icon = defaultProps124.icon,
+    fileType,
+    fileSize,
+    fileDateCreated,
+    fileDateModified
+  } = props;
+  return /* @__PURE__ */ jsxs151("div", { className: classNames(
+    props.className,
+    FILEINFO_CLASSNAME
+  ), children: [
+    /* @__PURE__ */ jsx383(
+      FilePreview,
+      {
+        className: classNames(
+          {
+            ["k-single-file-selected"]: selection === "single",
+            ["k-multiple-files-selected"]: selection === "multiple",
+            ["k-no-file-selected"]: selection === "none"
+          }
+        ),
+        icon: selection === "none" ? "none" : icon,
+        name,
+        size: "xxxlarge"
+      }
+    ),
+    selection === "single" && /* @__PURE__ */ jsx383(Fragment107, { children: /* @__PURE__ */ jsxs151("dl", { className: "k-file-meta", children: [
+      fileType && /* @__PURE__ */ jsxs151(Fragment107, { children: [
+        /* @__PURE__ */ jsx383("dt", { className: "k-file-meta-label", children: "Type: " }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-file-meta-value k-file-type", children: fileType }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-line-break" })
+      ] }),
+      fileSize && /* @__PURE__ */ jsxs151(Fragment107, { children: [
+        /* @__PURE__ */ jsx383("dt", { className: "k-file-meta-label", children: "Size: " }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-file-meta-value k-file-size", children: fileSize }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-line-break" })
+      ] }),
+      fileDateCreated && /* @__PURE__ */ jsxs151(Fragment107, { children: [
+        /* @__PURE__ */ jsx383("dt", { className: "k-file-meta-label", children: "Date Created: " }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-file-meta-value k-file-created", children: fileDateCreated }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-line-break" })
+      ] }),
+      fileDateModified && /* @__PURE__ */ jsxs151(Fragment107, { children: [
+        /* @__PURE__ */ jsx383("dt", { className: "k-file-meta-label", children: "Date Modified: " }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-file-meta-value k-file-modified", children: fileDateModified }),
+        /* @__PURE__ */ jsx383("dd", { className: "k-line-break" })
+      ] })
+    ] }) })
+  ] });
+};
+FileInfo.states = states134;
+FileInfo.options = options125;
+FileInfo.className = FILEINFO_CLASSNAME;
+FileInfo.defaultProps = defaultProps124;
+
+// src/filemanager/file-preview.tsx
+import { Fragment as Fragment108, jsx as jsx384, jsxs as jsxs152 } from "react/jsx-runtime";
+var FILEPREVIEW_CLASSNAME = "k-file-preview";
+var states135 = [];
+var options126 = {
+  size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge]
+};
+var defaultProps125 = {};
+var FilePreview = (props) => {
+  const {
+    size,
+    icon,
+    name
+  } = props;
+  return /* @__PURE__ */ jsxs152(Fragment108, { children: [
+    /* @__PURE__ */ jsx384("span", { className: classNames(
+      FILEPREVIEW_CLASSNAME
+    ), children: /* @__PURE__ */ jsx384(
+      Icon,
+      {
+        className: "k-file-icon",
+        icon,
+        size
+      }
+    ) }),
+    /* @__PURE__ */ jsx384("span", { className: classNames(
+      props.className,
+      "k-file-name"
+    ), children: name })
+  ] });
+};
+FilePreview.states = states135;
+FilePreview.options = options126;
+FilePreview.className = FILEPREVIEW_CLASSNAME;
+FilePreview.defaultProps = defaultProps125;
+
+// src/filemanager/templates/filemanager-normal.tsx
+import { Fragment as Fragment109, jsx as jsx385, jsxs as jsxs153 } from "react/jsx-runtime";
+
+// src/filemanager/templates/filemanager-preview.tsx
+import { Fragment as Fragment110, jsx as jsx386, jsxs as jsxs154 } from "react/jsx-runtime";
+
+// src/filemanager/templates/filemanager-grid.tsx
+import { Fragment as Fragment111, jsx as jsx387, jsxs as jsxs155 } from "react/jsx-runtime";
+
+// src/filemanager/templates/filemanager-grid-preview.tsx
+import { Fragment as Fragment112, jsx as jsx388, jsxs as jsxs156 } from "react/jsx-runtime";
 
 // src/chat/chat.spec.tsx
-import { Fragment as Fragment104, jsx as jsx372, jsxs as jsxs146 } from "react/jsx-runtime";
+import { Fragment as Fragment113, jsx as jsx389, jsxs as jsxs157 } from "react/jsx-runtime";
 var CHAT_CLASSNAME = "k-chat";
-var states126 = [];
-var options115 = {};
+var states136 = [];
+var options127 = {};
 var defaultOptions = {
   showToolbar: true,
   showMessageBox: true,
@@ -14194,7 +14689,7 @@ var Chat = (props) => {
     showMoreButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs146(
+  return /* @__PURE__ */ jsxs157(
     "div",
     {
       ...other,
@@ -14204,63 +14699,63 @@ var Chat = (props) => {
       ),
       dir,
       children: [
-        /* @__PURE__ */ jsx372("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ jsx372("div", { className: "k-message-list-content", children: props.children }) }),
-        showMessageBox && /* @__PURE__ */ jsx372(
+        /* @__PURE__ */ jsx389("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ jsx389("div", { className: "k-message-list-content", children: props.children }) }),
+        showMessageBox && /* @__PURE__ */ jsx389(
           Textbox,
           {
             className: "k-message-box",
             placeholder: "Type a message...",
-            suffix: /* @__PURE__ */ jsxs146(Fragment104, { children: [
-              showMoreButton && /* @__PURE__ */ jsx372(Button, { fillMode: "flat", icon: "more-horizontal" }),
-              /* @__PURE__ */ jsx372(Button, { fillMode: "flat", icon: "paper-plane", className: "k-chat-send" })
+            suffix: /* @__PURE__ */ jsxs157(Fragment113, { children: [
+              showMoreButton && /* @__PURE__ */ jsx389(Button, { fillMode: "flat", icon: "more-horizontal" }),
+              /* @__PURE__ */ jsx389(Button, { fillMode: "flat", icon: "paper-plane", className: "k-chat-send" })
             ] })
           }
         ),
-        showToolbar && /* @__PURE__ */ jsxs146("div", { className: "k-chat-toolbar k-toolbar", children: [
-          /* @__PURE__ */ jsx372(Button, { className: classNames("k-scroll-button", "k-scroll-button-left", dir === "rtl" ? "" : "k-hidden"), icon: "chevron-left" }),
-          /* @__PURE__ */ jsxs146("div", { className: "k-toolbar-group k-button-list", children: [
-            /* @__PURE__ */ jsx372(Button, { icon: "arrow-rotate-cw" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "gear" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "wrench" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "plus" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "search" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "star" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "bell" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "question-circle" }),
-            /* @__PURE__ */ jsx372(Button, { icon: "trash" })
+        showToolbar && /* @__PURE__ */ jsxs157("div", { className: "k-chat-toolbar k-toolbar", children: [
+          /* @__PURE__ */ jsx389(Button, { className: classNames("k-scroll-button", "k-scroll-button-left", dir === "rtl" ? "" : "k-hidden"), icon: "chevron-left" }),
+          /* @__PURE__ */ jsxs157("div", { className: "k-toolbar-group k-button-list", children: [
+            /* @__PURE__ */ jsx389(Button, { icon: "arrow-rotate-cw" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "gear" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "wrench" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "plus" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "search" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "star" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "bell" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "question-circle" }),
+            /* @__PURE__ */ jsx389(Button, { icon: "trash" })
           ] }),
-          /* @__PURE__ */ jsx372(Button, { className: classNames("k-scroll-button", "k-scroll-button-right", dir === "rtl" && "k-hidden"), icon: "chevron-right" })
+          /* @__PURE__ */ jsx389(Button, { className: classNames("k-scroll-button", "k-scroll-button-right", dir === "rtl" && "k-hidden"), icon: "chevron-right" })
         ] })
       ]
     }
   );
 };
-Chat.states = states126;
-Chat.options = options115;
+Chat.states = states136;
+Chat.options = options127;
 Chat.className = CHAT_CLASSNAME;
 Chat.defaultOptions = defaultOptions;
 
 // src/chat/chat-message.tsx
-import { jsx as jsx373, jsxs as jsxs147 } from "react/jsx-runtime";
+import { jsx as jsx390, jsxs as jsxs158 } from "react/jsx-runtime";
 var CHATMESSAGE_CLASSNAME = "k-message";
-var states127 = [
+var states137 = [
   States.selected
 ];
-var options116 = {};
-var defaultProps115 = {
+var options128 = {};
+var defaultProps126 = {
   time: "Thu Feb 08 2018",
   text: "How can I help you?",
   status: "Seen"
 };
 var ChatMessage = (props) => {
   const {
-    time = defaultProps115.time,
-    text = defaultProps115.text,
-    status = defaultProps115.status,
+    time = defaultProps126.time,
+    text = defaultProps126.text,
+    status = defaultProps126.status,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs147(
+  return /* @__PURE__ */ jsxs158(
     "div",
     {
       ...other,
@@ -14270,39 +14765,39 @@ var ChatMessage = (props) => {
         stateClassNames(CHATMESSAGE_CLASSNAME, { selected })
       ),
       children: [
-        /* @__PURE__ */ jsx373("time", { className: "k-message-time", children: time }),
-        /* @__PURE__ */ jsx373("div", { className: "k-chat-bubble", children: text }),
-        /* @__PURE__ */ jsx373("span", { className: "k-message-status", children: status })
+        /* @__PURE__ */ jsx390("time", { className: "k-message-time", children: time }),
+        /* @__PURE__ */ jsx390("div", { className: "k-chat-bubble", children: text }),
+        /* @__PURE__ */ jsx390("span", { className: "k-message-status", children: status })
       ]
     }
   );
 };
-ChatMessage.states = states127;
-ChatMessage.options = options116;
+ChatMessage.states = states137;
+ChatMessage.options = options128;
 ChatMessage.className = CHATMESSAGE_CLASSNAME;
-ChatMessage.defaultProps = defaultProps115;
+ChatMessage.defaultProps = defaultProps126;
 
 // src/chat/chat-message-group.tsx
-import { jsx as jsx374, jsxs as jsxs148 } from "react/jsx-runtime";
+import { jsx as jsx391, jsxs as jsxs159 } from "react/jsx-runtime";
 var CHATMESSAGEGROUP_CLASSNAME = "k-message-group";
-var states128 = [
+var states138 = [
   States.selected
 ];
-var options117 = {};
-var defaultProps116 = {
+var options129 = {};
+var defaultProps127 = {
   author: "Bruv",
   avatar: "/packages/html/assets/avatar.jpg",
   alt: false
 };
 var ChatMessageGroup = (props) => {
   const {
-    alt = defaultProps116.alt,
-    author = defaultProps116.author,
-    avatar = defaultProps116.avatar,
+    alt = defaultProps127.alt,
+    author = defaultProps127.author,
+    avatar = defaultProps127.avatar,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs148(
+  return /* @__PURE__ */ jsxs159(
     "div",
     {
       ...other,
@@ -14316,23 +14811,23 @@ var ChatMessageGroup = (props) => {
         }
       ),
       children: [
-        author && /* @__PURE__ */ jsx374("p", { className: "k-author", children: author }),
-        avatar && /* @__PURE__ */ jsx374(Avatar, { type: "image", children: /* @__PURE__ */ jsx374("img", { src: avatar }) }),
+        author && /* @__PURE__ */ jsx391("p", { className: "k-author", children: author }),
+        avatar && /* @__PURE__ */ jsx391(Avatar, { type: "image", children: /* @__PURE__ */ jsx391("img", { src: avatar }) }),
         props.children
       ]
     }
   );
 };
-ChatMessageGroup.states = states128;
-ChatMessageGroup.options = options117;
+ChatMessageGroup.states = states138;
+ChatMessageGroup.options = options129;
 ChatMessageGroup.className = CHATMESSAGEGROUP_CLASSNAME;
-ChatMessageGroup.defaultProps = defaultProps116;
+ChatMessageGroup.defaultProps = defaultProps127;
 
 // src/chat/chat-quick-replies.tsx
-import { jsx as jsx375 } from "react/jsx-runtime";
+import { jsx as jsx392 } from "react/jsx-runtime";
 var CHATQUICKREPLY_CLASSNAME = "k-quick-replies";
-var states129 = [];
-var options118 = {};
+var states139 = [];
+var options130 = {};
 var defaultOptions2 = {
   actions: ["Quick", "Reply", "Another quick", "Reply with different length"]
 };
@@ -14345,11 +14840,11 @@ var ChatQuickReply = (props) => {
   if (actions) {
     actions.map((action, index) => {
       children.push(
-        /* @__PURE__ */ jsx375("span", { className: "k-quick-reply", children: action }, index)
+        /* @__PURE__ */ jsx392("span", { className: "k-quick-reply", children: action }, index)
       );
     });
   }
-  return /* @__PURE__ */ jsx375(
+  return /* @__PURE__ */ jsx392(
     "div",
     {
       ...other,
@@ -14361,26 +14856,26 @@ var ChatQuickReply = (props) => {
     }
   );
 };
-ChatQuickReply.states = states129;
-ChatQuickReply.options = options118;
+ChatQuickReply.states = states139;
+ChatQuickReply.options = options130;
 ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME;
 ChatQuickReply.defaultOptions = defaultOptions2;
 
 // src/chat/templates/chat-normal.tsx
-import { Fragment as Fragment105, jsx as jsx376, jsxs as jsxs149 } from "react/jsx-runtime";
+import { Fragment as Fragment114, jsx as jsx393, jsxs as jsxs160 } from "react/jsx-runtime";
 
 // src/chat/templates/chat-with-toolbar.tsx
-import { Fragment as Fragment106, jsx as jsx377, jsxs as jsxs150 } from "react/jsx-runtime";
+import { Fragment as Fragment115, jsx as jsx394, jsxs as jsxs161 } from "react/jsx-runtime";
 
 // src/chat/templates/chat-with-options.tsx
-import { Fragment as Fragment107, jsx as jsx378, jsxs as jsxs151 } from "react/jsx-runtime";
+import { Fragment as Fragment116, jsx as jsx395, jsxs as jsxs162 } from "react/jsx-runtime";
 
 // src/timeline/timeline.spec.tsx
-import { Fragment as Fragment108, jsx as jsx379 } from "react/jsx-runtime";
+import { Fragment as Fragment117, jsx as jsx396 } from "react/jsx-runtime";
 var TIMELINE_CLASSNAME = `k-timeline`;
-var states130 = [];
-var options119 = {};
-var defaultProps117 = {
+var states140 = [];
+var options131 = {};
+var defaultProps128 = {
   orientation: "vertical"
 };
 var Timeline = (props) => {
@@ -14390,7 +14885,7 @@ var Timeline = (props) => {
     alternatingMode,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx379(
+  return /* @__PURE__ */ jsx396(
     "div",
     {
       ...other,
@@ -14403,21 +14898,21 @@ var Timeline = (props) => {
           [`${TIMELINE_CLASSNAME}-collapsible`]: collapsibleEvents
         }
       ),
-      children: /* @__PURE__ */ jsx379(Fragment108, { children: props.children })
+      children: /* @__PURE__ */ jsx396(Fragment117, { children: props.children })
     }
   );
 };
-Timeline.states = states130;
-Timeline.options = options119;
+Timeline.states = states140;
+Timeline.options = options131;
 Timeline.className = TIMELINE_CLASSNAME;
-Timeline.defaultProps = defaultProps117;
+Timeline.defaultProps = defaultProps128;
 
 // src/timeline/vertical-timeline-event.spec.tsx
-import { jsx as jsx380, jsxs as jsxs152 } from "react/jsx-runtime";
+import { jsx as jsx397, jsxs as jsxs163 } from "react/jsx-runtime";
 var TIMELINEVERTICALEVENT_CLASSNAME = `k-timeline-event`;
-var states131 = [];
-var options120 = {};
-var defaultProps118 = {
+var states141 = [];
+var options132 = {};
+var defaultProps129 = {
   collapsed: false,
   reverse: false,
   title: "Event title",
@@ -14427,15 +14922,15 @@ var defaultProps118 = {
 var VerticalTimelineEvent = (props) => {
   const {
     date,
-    content = defaultProps118.content,
-    collapsed = defaultProps118.collapsed,
-    reverse = defaultProps118.reverse,
-    title = defaultProps118.title,
-    subtitle = defaultProps118.subtitle,
+    content = defaultProps129.content,
+    collapsed = defaultProps129.collapsed,
+    reverse = defaultProps129.reverse,
+    title = defaultProps129.title,
+    subtitle = defaultProps129.subtitle,
     showCollapseButton,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs152(
+  return /* @__PURE__ */ jsxs163(
     "li",
     {
       ...other,
@@ -14445,43 +14940,43 @@ var VerticalTimelineEvent = (props) => {
         { "k-reverse": reverse }
       ),
       children: [
-        date && /* @__PURE__ */ jsx380("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx380("span", { className: "k-timeline-date", children: date }) }),
-        /* @__PURE__ */ jsx380(TimelineCircle, {}),
-        content && /* @__PURE__ */ jsx380("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ jsx380(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ jsxs152("div", { className: "k-card-inner", children: [
-          /* @__PURE__ */ jsxs152(CardHeader, { children: [
-            /* @__PURE__ */ jsx380(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
-            /* @__PURE__ */ jsx380(CardSubtitle, { children: subtitle })
+        date && /* @__PURE__ */ jsx397("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ jsx397("span", { className: "k-timeline-date", children: date }) }),
+        /* @__PURE__ */ jsx397(TimelineCircle, {}),
+        content && /* @__PURE__ */ jsx397("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ jsx397(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ jsxs163("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ jsxs163(CardHeader, { children: [
+            /* @__PURE__ */ jsx397(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
+            /* @__PURE__ */ jsx397(CardSubtitle, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx380(CardBody, { children: /* @__PURE__ */ jsx380("div", { className: "k-card-description", children: content }) })
+          /* @__PURE__ */ jsx397(CardBody, { children: /* @__PURE__ */ jsx397("div", { className: "k-card-description", children: content }) })
         ] }) }) }),
         props.children
       ]
     }
   );
 };
-VerticalTimelineEvent.states = states131;
-VerticalTimelineEvent.options = options120;
+VerticalTimelineEvent.states = states141;
+VerticalTimelineEvent.options = options132;
 VerticalTimelineEvent.className = TIMELINEVERTICALEVENT_CLASSNAME;
-VerticalTimelineEvent.defaultProps = defaultProps118;
+VerticalTimelineEvent.defaultProps = defaultProps129;
 
 // src/timeline/horizontal-timeline-event.spec.tsx
-import { jsx as jsx381, jsxs as jsxs153 } from "react/jsx-runtime";
+import { jsx as jsx398, jsxs as jsxs164 } from "react/jsx-runtime";
 var TIMELINEHORIZONTALEVENT_CLASSNAME = `k-timeline-event`;
-var states132 = [];
-var options121 = {};
-var defaultProps119 = {
+var states142 = [];
+var options133 = {};
+var defaultProps130 = {
   title: "Event title",
   subtitle: "Event subtitle",
   content: "Event content"
 };
 var HorizontalTimelineEvent = (props) => {
   const {
-    content = defaultProps119.content,
-    title = defaultProps119.title,
-    subtitle = defaultProps119.subtitle,
+    content = defaultProps130.content,
+    title = defaultProps130.title,
+    subtitle = defaultProps130.subtitle,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs153(
+  return /* @__PURE__ */ jsxs164(
     "li",
     {
       ...other,
@@ -14490,35 +14985,35 @@ var HorizontalTimelineEvent = (props) => {
         TIMELINEHORIZONTALEVENT_CLASSNAME
       ),
       children: [
-        content && /* @__PURE__ */ jsx381("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ jsx381(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ jsxs153("div", { className: "k-card-inner", children: [
-          /* @__PURE__ */ jsxs153(CardHeader, { children: [
-            /* @__PURE__ */ jsx381(TimelineCardTitle, { children: title }),
-            /* @__PURE__ */ jsx381(CardSubtitle, { children: subtitle })
+        content && /* @__PURE__ */ jsx398("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ jsx398(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ jsxs164("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ jsxs164(CardHeader, { children: [
+            /* @__PURE__ */ jsx398(TimelineCardTitle, { children: title }),
+            /* @__PURE__ */ jsx398(CardSubtitle, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx381(CardBody, { children: /* @__PURE__ */ jsx381("div", { className: "k-card-description", children: content }) })
+          /* @__PURE__ */ jsx398(CardBody, { children: /* @__PURE__ */ jsx398("div", { className: "k-card-description", children: content }) })
         ] }) }) }),
         props.children
       ]
     }
   );
 };
-HorizontalTimelineEvent.states = states132;
-HorizontalTimelineEvent.options = options121;
+HorizontalTimelineEvent.states = states142;
+HorizontalTimelineEvent.options = options133;
 HorizontalTimelineEvent.className = TIMELINEHORIZONTALEVENT_CLASSNAME;
-HorizontalTimelineEvent.defaultProps = defaultProps119;
+HorizontalTimelineEvent.defaultProps = defaultProps130;
 
 // src/timeline/timeline-event-list.spec.tsx
-import { jsx as jsx382 } from "react/jsx-runtime";
+import { jsx as jsx399 } from "react/jsx-runtime";
 
 // src/timeline/timeline-flag-wrap.spec.tsx
-import { jsx as jsx383, jsxs as jsxs154 } from "react/jsx-runtime";
+import { jsx as jsx400, jsxs as jsxs165 } from "react/jsx-runtime";
 var TIMELINEFLAGWRAP_CLASSNAME = `k-timeline-flag-wrap`;
-var states133 = [
+var states143 = [
   States.focus,
   States.selected
 ];
-var options122 = {};
-var defaultProps120 = {
+var options134 = {};
+var defaultProps131 = {
   year: "2020"
 };
 var TimelineFlagWrap = (props) => {
@@ -14526,7 +15021,7 @@ var TimelineFlagWrap = (props) => {
     year,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs154(
+  return /* @__PURE__ */ jsxs165(
     "li",
     {
       ...other,
@@ -14535,25 +15030,25 @@ var TimelineFlagWrap = (props) => {
         TIMELINEFLAGWRAP_CLASSNAME
       ),
       children: [
-        /* @__PURE__ */ jsx383("span", { className: "k-timeline-flag", children: year }),
+        /* @__PURE__ */ jsx400("span", { className: "k-timeline-flag", children: year }),
         props.children
       ]
     }
   );
 };
-TimelineFlagWrap.states = states133;
-TimelineFlagWrap.options = options122;
+TimelineFlagWrap.states = states143;
+TimelineFlagWrap.options = options134;
 TimelineFlagWrap.className = TIMELINEFLAGWRAP_CLASSNAME;
-TimelineFlagWrap.defaultProps = defaultProps120;
+TimelineFlagWrap.defaultProps = defaultProps131;
 
 // src/timeline/timeline-circle.spec.tsx
-import { jsx as jsx384 } from "react/jsx-runtime";
+import { jsx as jsx401 } from "react/jsx-runtime";
 var TIMELINECIRCLE_CLASSNAME = `k-timeline-circle`;
 var TimelineCircle = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsx384(
+  return /* @__PURE__ */ jsx401(
     "span",
     {
       ...other,
@@ -14566,19 +15061,19 @@ var TimelineCircle = (props) => {
 };
 
 // src/timeline/timeline-flag.spec.tsx
-import { jsx as jsx385 } from "react/jsx-runtime";
+import { jsx as jsx402 } from "react/jsx-runtime";
 
 // src/timeline/timeline-card.spec.tsx
-import { jsx as jsx386, jsxs as jsxs155 } from "react/jsx-runtime";
-var states134 = [];
-var defaultProps121 = {};
+import { jsx as jsx403, jsxs as jsxs166 } from "react/jsx-runtime";
+var states144 = [];
+var defaultProps132 = {};
 var TimelineCard = (props) => {
   const {
     callout,
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs155(
+  return /* @__PURE__ */ jsxs166(
     Card,
     {
       className: classNames(
@@ -14588,27 +15083,27 @@ var TimelineCard = (props) => {
       callout: "true",
       ...other,
       children: [
-        callout && /* @__PURE__ */ jsx386(TimelineCardCallout, { callout }),
+        callout && /* @__PURE__ */ jsx403(TimelineCardCallout, { callout }),
         children
       ]
     }
   );
 };
-TimelineCard.states = states134;
-TimelineCard.defaultProps = defaultProps121;
+TimelineCard.states = states144;
+TimelineCard.defaultProps = defaultProps132;
 
 // src/timeline/timeline-card-title.tsx
-import { jsx as jsx387, jsxs as jsxs156 } from "react/jsx-runtime";
+import { jsx as jsx404, jsxs as jsxs167 } from "react/jsx-runtime";
 var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
-var states135 = [];
-var defaultProps122 = {};
+var states145 = [];
+var defaultProps133 = {};
 var TimelineCardTitle = (props) => {
   const {
     collapsible,
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs156(
+  return /* @__PURE__ */ jsxs167(
     "div",
     {
       className: classNames(
@@ -14617,26 +15112,26 @@ var TimelineCardTitle = (props) => {
       ),
       ...other,
       children: [
-        /* @__PURE__ */ jsx387("span", { className: "k-event-title", children }),
-        collapsible && /* @__PURE__ */ jsx387("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__ */ jsx387(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
+        /* @__PURE__ */ jsx404("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ jsx404("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__ */ jsx404(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
       ]
     }
   );
 };
-TimelineCardTitle.states = states135;
+TimelineCardTitle.states = states145;
 TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
-TimelineCardTitle.defaultProps = defaultProps122;
+TimelineCardTitle.defaultProps = defaultProps133;
 
 // src/timeline/timeline-card-callout.tsx
-import { jsx as jsx388 } from "react/jsx-runtime";
+import { jsx as jsx405 } from "react/jsx-runtime";
 var TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
-var states136 = [];
-var defaultProps123 = {};
+var states146 = [];
+var defaultProps134 = {};
 var TimelineCardCallout = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsx388(
+  return /* @__PURE__ */ jsx405(
     CardCallout,
     {
       className: classNames(
@@ -14647,24 +15142,24 @@ var TimelineCardCallout = (props) => {
     }
   );
 };
-TimelineCardCallout.states = states136;
+TimelineCardCallout.states = states146;
 TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
-TimelineCardCallout.defaultProps = defaultProps123;
+TimelineCardCallout.defaultProps = defaultProps134;
 
 // src/timeline/timeline-date-wrap.spec.tsx
-import { jsx as jsx389 } from "react/jsx-runtime";
+import { jsx as jsx406 } from "react/jsx-runtime";
 var TIMELINEDATEWRAP_CLASSNAME = `k-timeline-date-wrap`;
-var states137 = [];
-var options123 = {};
-var defaultProps124 = {
+var states147 = [];
+var options135 = {};
+var defaultProps135 = {
   date: "May 25, 2008"
 };
 var TimelineDateWrap = (props) => {
   const {
-    date = defaultProps124.date,
+    date = defaultProps135.date,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx389(
+  return /* @__PURE__ */ jsx406(
     "div",
     {
       ...other,
@@ -14672,53 +15167,53 @@ var TimelineDateWrap = (props) => {
         props.className,
         TIMELINEDATEWRAP_CLASSNAME
       ),
-      children: /* @__PURE__ */ jsx389("span", { className: "k-timeline-date", children: date })
+      children: /* @__PURE__ */ jsx406("span", { className: "k-timeline-date", children: date })
     }
   );
 };
-TimelineDateWrap.states = states137;
-TimelineDateWrap.options = options123;
+TimelineDateWrap.states = states147;
+TimelineDateWrap.options = options135;
 TimelineDateWrap.className = TIMELINEDATEWRAP_CLASSNAME;
-TimelineDateWrap.defaultProps = defaultProps124;
+TimelineDateWrap.defaultProps = defaultProps135;
 
 // src/timeline/timeline-track-wrap.spec.tsx
-import { jsx as jsx390, jsxs as jsxs157 } from "react/jsx-runtime";
+import { jsx as jsx407, jsxs as jsxs168 } from "react/jsx-runtime";
 
 // src/timeline/timeline-track.spec.tsx
-import { jsx as jsx391 } from "react/jsx-runtime";
+import { jsx as jsx408 } from "react/jsx-runtime";
 
 // src/timeline/timeline-track-item.spec.tsx
-import { jsxs as jsxs158 } from "react/jsx-runtime";
+import { jsxs as jsxs169 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-normal.tsx
-import { jsx as jsx392, jsxs as jsxs159 } from "react/jsx-runtime";
+import { jsx as jsx409, jsxs as jsxs170 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-normal-collapsible.tsx
-import { jsx as jsx393, jsxs as jsxs160 } from "react/jsx-runtime";
+import { jsx as jsx410, jsxs as jsxs171 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-normal-alternating.tsx
-import { jsx as jsx394, jsxs as jsxs161 } from "react/jsx-runtime";
+import { jsx as jsx411, jsxs as jsxs172 } from "react/jsx-runtime";
 
 // src/timeline/templates/timeline-horizontal.tsx
-import { Fragment as Fragment109, jsx as jsx395, jsxs as jsxs162 } from "react/jsx-runtime";
+import { Fragment as Fragment118, jsx as jsx412, jsxs as jsxs173 } from "react/jsx-runtime";
 
 // src/pdf-viewer/pdf-viewer.spec.tsx
-import { Fragment as Fragment110, jsx as jsx396, jsxs as jsxs163 } from "react/jsx-runtime";
+import { Fragment as Fragment119, jsx as jsx413, jsxs as jsxs174 } from "react/jsx-runtime";
 var PDFVIEWER_CLASSNAME = `k-pdf-viewer`;
-var states138 = [
+var states148 = [
   States.disabled
 ];
-var options124 = {};
-var defaultToolbar = /* @__PURE__ */ jsx396(Fragment110, { children: /* @__PURE__ */ jsxs163(Toolbar, { resizable: true, children: [
-  /* @__PURE__ */ jsx396(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
-  /* @__PURE__ */ jsx396("span", { className: "k-spacer" }),
-  /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "search" }),
-  /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "file-pdf" }),
-  /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "print" }),
-  /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "fullscreen" })
+var options136 = {};
+var defaultToolbar2 = /* @__PURE__ */ jsx413(Fragment119, { children: /* @__PURE__ */ jsxs174(Toolbar, { resizable: true, children: [
+  /* @__PURE__ */ jsx413(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
+  /* @__PURE__ */ jsx413("span", { className: "k-spacer" }),
+  /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "search" }),
+  /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "file-pdf" }),
+  /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "print" }),
+  /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "fullscreen" })
 ] }) });
-var defaultProps125 = {
-  toolbar: defaultToolbar,
+var defaultProps136 = {
+  toolbar: defaultToolbar2,
   showSearchPanel: false,
   blank: false
 };
@@ -14730,7 +15225,7 @@ var PDFViewer = (props) => {
     blank,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs163(
+  return /* @__PURE__ */ jsxs174(
     "div",
     {
       ...other,
@@ -14741,42 +15236,42 @@ var PDFViewer = (props) => {
       ),
       children: [
         toolbar,
-        /* @__PURE__ */ jsxs163("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: [
-          showSearchPanel && /* @__PURE__ */ jsxs163("div", { className: "k-search-panel k-pos-sticky k-top-center", children: [
-            /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "handle-drag", className: "k-search-dialog-draghandle" }),
-            /* @__PURE__ */ jsx396(
+        /* @__PURE__ */ jsxs174("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: [
+          showSearchPanel && /* @__PURE__ */ jsxs174("div", { className: "k-search-panel k-pos-sticky k-top-center", children: [
+            /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "handle-drag", className: "k-search-dialog-draghandle" }),
+            /* @__PURE__ */ jsx413(
               Textbox,
               {
-                suffix: /* @__PURE__ */ jsx396(Button, { fillMode: "flat", className: "k-match-case-button", icon: "convert-lowercase" })
+                suffix: /* @__PURE__ */ jsx413(Button, { fillMode: "flat", className: "k-match-case-button", icon: "convert-lowercase" })
               }
             ),
-            /* @__PURE__ */ jsxs163("span", { className: "k-search-matches", children: [
-              /* @__PURE__ */ jsx396("span", { children: "0" }),
+            /* @__PURE__ */ jsxs174("span", { className: "k-search-matches", children: [
+              /* @__PURE__ */ jsx413("span", { children: "0" }),
               " of ",
-              /* @__PURE__ */ jsx396("span", { children: "1" })
+              /* @__PURE__ */ jsx413("span", { children: "1" })
             ] }),
-            /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "arrow-up" }),
-            /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "arrow-down" }),
-            /* @__PURE__ */ jsx396(Button, { fillMode: "flat", icon: "x" })
+            /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "arrow-up" }),
+            /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "arrow-down" }),
+            /* @__PURE__ */ jsx413(Button, { fillMode: "flat", icon: "x" })
           ] }),
-          /* @__PURE__ */ jsx396("div", { className: "k-pdf-viewer-pages", children: blank ? /* @__PURE__ */ jsxs163("div", { className: "k-page k-blank-page", children: [
-            /* @__PURE__ */ jsx396(DropzoneNormal, {}),
-            /* @__PURE__ */ jsx396(UploadNormal, { empty: true, status: "upload" })
+          /* @__PURE__ */ jsx413("div", { className: "k-pdf-viewer-pages", children: blank ? /* @__PURE__ */ jsxs174("div", { className: "k-page k-blank-page", children: [
+            /* @__PURE__ */ jsx413(DropzoneNormal, {}),
+            /* @__PURE__ */ jsx413(UploadNormal, { empty: true, status: "upload" })
           ] }) : props.children })
         ] })
       ]
     }
   );
 };
-PDFViewer.states = states138;
-PDFViewer.options = options124;
+PDFViewer.states = states148;
+PDFViewer.options = options136;
 PDFViewer.className = PDFVIEWER_CLASSNAME;
-PDFViewer.defaultProps = defaultProps125;
+PDFViewer.defaultProps = defaultProps136;
 
 // src/pdf-viewer/pdf-viewer-page.tsx
-import { jsx as jsx397 } from "react/jsx-runtime";
+import { jsx as jsx414 } from "react/jsx-runtime";
 var PDFVIEWERPAGE_CLASSNAME = `k-page`;
-var defaultProps126 = {
+var defaultProps137 = {
   width: "720px",
   height: "360px"
 };
@@ -14786,7 +15281,7 @@ var PDFViewerPage = (props) => {
     height,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx397(
+  return /* @__PURE__ */ jsx414(
     "div",
     {
       ...other,
@@ -14799,23 +15294,23 @@ var PDFViewerPage = (props) => {
   );
 };
 PDFViewerPage.className = PDFVIEWERPAGE_CLASSNAME;
-PDFViewerPage.defaultProps = defaultProps126;
+PDFViewerPage.defaultProps = defaultProps137;
 
 // src/pdf-viewer/templates/pdf-viewer-normal.tsx
-import { Fragment as Fragment111, jsx as jsx398, jsxs as jsxs164 } from "react/jsx-runtime";
+import { Fragment as Fragment120, jsx as jsx415, jsxs as jsxs175 } from "react/jsx-runtime";
 
 // src/pdf-viewer/templates/pdf-viewer-blank.tsx
-import { jsx as jsx399 } from "react/jsx-runtime";
+import { jsx as jsx416 } from "react/jsx-runtime";
 
 // src/pdf-viewer/templates/pdf-viewer-with-search-panel.tsx
-import { Fragment as Fragment112, jsx as jsx400, jsxs as jsxs165 } from "react/jsx-runtime";
+import { Fragment as Fragment121, jsx as jsx417, jsxs as jsxs176 } from "react/jsx-runtime";
 
 // src/scrollview/scrollview-spec.tsx
-import { Fragment as Fragment113, jsx as jsx401, jsxs as jsxs166 } from "react/jsx-runtime";
+import { Fragment as Fragment122, jsx as jsx418, jsxs as jsxs177 } from "react/jsx-runtime";
 var SCROLLVIEW_CLASSNAME = "k-scrollview";
-var states139 = [];
-var options125 = {};
-var defaultProps127 = {
+var states149 = [];
+var options137 = {};
+var defaultProps138 = {
   mode: "normal",
   views: 9,
   animate: true,
@@ -14825,12 +15320,12 @@ var defaultProps127 = {
 };
 var ScrollView = (props) => {
   const {
-    mode = defaultProps127.mode,
-    views = defaultProps127.views,
-    animate = defaultProps127.animate,
-    arrows = defaultProps127.arrows,
-    pager = defaultProps127.pager,
-    rtl = defaultProps127.rtl,
+    mode = defaultProps138.mode,
+    views = defaultProps138.views,
+    animate = defaultProps138.animate,
+    arrows = defaultProps138.arrows,
+    pager = defaultProps138.pager,
+    rtl = defaultProps138.rtl,
     ...other
   } = props;
   const scrollviewViews = [];
@@ -14838,10 +15333,10 @@ var ScrollView = (props) => {
   const iconNext = rtl ? "chevron-left" : "chevron-right";
   for (let i = 0; i < views; i++) {
     scrollviewViews.push(
-      /* @__PURE__ */ jsx401("div", { className: "k-scrollview-view" }, i)
+      /* @__PURE__ */ jsx418("div", { className: "k-scrollview-view" }, i)
     );
   }
-  return /* @__PURE__ */ jsxs166(
+  return /* @__PURE__ */ jsxs177(
     "div",
     {
       ...other,
@@ -14854,44 +15349,44 @@ var ScrollView = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx401("div", { className: classNames(
+        /* @__PURE__ */ jsx418("div", { className: classNames(
           "k-scrollview-wrap",
           {
             ["k-scrollview-animate"]: animate
           }
         ), style: { "--kendo-scrollview-views": views, "--kendo-scrollview-current": 5 }, children: scrollviewViews }),
-        /* @__PURE__ */ jsxs166("div", { className: "k-scrollview-elements", children: [
-          arrows && /* @__PURE__ */ jsxs166(Fragment113, { children: [
-            /* @__PURE__ */ jsx401("span", { className: "k-scrollview-prev", children: /* @__PURE__ */ jsx401(Icon, { icon: iconPrev, size: "xxxlarge" }) }),
-            /* @__PURE__ */ jsx401("span", { className: "k-scrollview-next", children: /* @__PURE__ */ jsx401(Icon, { icon: iconNext, size: "xxxlarge" }) })
+        /* @__PURE__ */ jsxs177("div", { className: "k-scrollview-elements", children: [
+          arrows && /* @__PURE__ */ jsxs177(Fragment122, { children: [
+            /* @__PURE__ */ jsx418("span", { className: "k-scrollview-prev", children: /* @__PURE__ */ jsx418(Icon, { icon: iconPrev, size: "xxxlarge" }) }),
+            /* @__PURE__ */ jsx418("span", { className: "k-scrollview-next", children: /* @__PURE__ */ jsx418(Icon, { icon: iconNext, size: "xxxlarge" }) })
           ] }),
-          pager && /* @__PURE__ */ jsx401("div", { className: "k-scrollview-nav-wrap", children: /* @__PURE__ */ jsxs166("div", { className: "k-scrollview-nav", children: [
-            mode === "light" && /* @__PURE__ */ jsxs166(Fragment113, { children: [
-              /* @__PURE__ */ jsx401("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link k-primary k-focus" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link k-focus" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link" })
+          pager && /* @__PURE__ */ jsx418("div", { className: "k-scrollview-nav-wrap", children: /* @__PURE__ */ jsxs177("div", { className: "k-scrollview-nav", children: [
+            mode === "light" && /* @__PURE__ */ jsxs177(Fragment122, { children: [
+              /* @__PURE__ */ jsx418("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link k-primary k-focus" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link k-focus" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link" })
             ] }),
-            mode === "normal" && /* @__PURE__ */ jsxs166(Fragment113, { children: [
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.5)" } })
+            mode === "normal" && /* @__PURE__ */ jsxs177(Fragment122, { children: [
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.5)" } })
             ] }),
-            mode === "dark" && /* @__PURE__ */ jsxs166(Fragment113, { children: [
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link" }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ jsx401("span", { className: "k-link", style: { transform: "scale(0.5)" } })
+            mode === "dark" && /* @__PURE__ */ jsxs177(Fragment122, { children: [
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link" }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ jsx418("span", { className: "k-link", style: { transform: "scale(0.5)" } })
             ] })
           ] }) })
         ] })
@@ -14899,83 +15394,83 @@ var ScrollView = (props) => {
     }
   );
 };
-ScrollView.states = states139;
-ScrollView.options = options125;
+ScrollView.states = states149;
+ScrollView.options = options137;
 ScrollView.className = SCROLLVIEW_CLASSNAME;
-ScrollView.defaultProps = defaultProps127;
+ScrollView.defaultProps = defaultProps138;
 
 // src/scrollview/templates/scrollview-normal.tsx
-import { jsx as jsx402 } from "react/jsx-runtime";
+import { jsx as jsx419 } from "react/jsx-runtime";
 
 // src/prompt/prompt.spec.tsx
-import { Fragment as Fragment114, jsx as jsx403 } from "react/jsx-runtime";
+import { Fragment as Fragment123, jsx as jsx420 } from "react/jsx-runtime";
 var PROMPT_CLASSNAME = `k-prompt`;
-var states140 = [];
-var options126 = {};
-var defaultProps128 = {};
+var states150 = [];
+var options138 = {};
+var defaultProps139 = {};
 var Prompt = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ jsx403("div", { ...other, className: classNames(props.className, PROMPT_CLASSNAME), children: /* @__PURE__ */ jsx403(Fragment114, { children: props.children }) });
+  return /* @__PURE__ */ jsx420("div", { ...other, className: classNames(props.className, PROMPT_CLASSNAME), children: /* @__PURE__ */ jsx420(Fragment123, { children: props.children }) });
 };
-Prompt.states = states140;
-Prompt.options = options126;
+Prompt.states = states150;
+Prompt.options = options138;
 Prompt.className = PROMPT_CLASSNAME;
-Prompt.defaultProps = defaultProps128;
+Prompt.defaultProps = defaultProps139;
 
 // src/prompt/prompt-header.tsx
-import { jsx as jsx404 } from "react/jsx-runtime";
+import { jsx as jsx421 } from "react/jsx-runtime";
 
 // src/prompt/prompt-content.tsx
-import { Fragment as Fragment115, jsx as jsx405 } from "react/jsx-runtime";
+import { Fragment as Fragment124, jsx as jsx422 } from "react/jsx-runtime";
 
 // src/prompt/prompt-view.tsx
-import { Fragment as Fragment116, jsx as jsx406, jsxs as jsxs167 } from "react/jsx-runtime";
+import { Fragment as Fragment125, jsx as jsx423, jsxs as jsxs178 } from "react/jsx-runtime";
 
 // src/prompt/prompt-footer.tsx
-import { jsx as jsx407 } from "react/jsx-runtime";
+import { jsx as jsx424 } from "react/jsx-runtime";
 
 // src/prompt/prompt-suggestion.tsx
-import { jsx as jsx408 } from "react/jsx-runtime";
+import { jsx as jsx425 } from "react/jsx-runtime";
 
 // src/prompt/prompt-setting.tsx
-import { jsx as jsx409 } from "react/jsx-runtime";
+import { jsx as jsx426 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-normal.tsx
-import { jsx as jsx410, jsxs as jsxs168 } from "react/jsx-runtime";
+import { jsx as jsx427, jsxs as jsxs179 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-suggestions.tsx
-import { Fragment as Fragment117, jsx as jsx411, jsxs as jsxs169 } from "react/jsx-runtime";
+import { Fragment as Fragment126, jsx as jsx428, jsxs as jsxs180 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-settings.tsx
-import { Fragment as Fragment118, jsx as jsx412, jsxs as jsxs170 } from "react/jsx-runtime";
+import { Fragment as Fragment127, jsx as jsx429, jsxs as jsxs181 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-output.tsx
-import { jsx as jsx413, jsxs as jsxs171 } from "react/jsx-runtime";
+import { jsx as jsx430, jsxs as jsxs182 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-more-actions.tsx
-import { jsx as jsx414, jsxs as jsxs172 } from "react/jsx-runtime";
+import { jsx as jsx431, jsxs as jsxs183 } from "react/jsx-runtime";
 
 // src/prompt/templates/prompt-popup.tsx
-import { jsx as jsx415, jsxs as jsxs173 } from "react/jsx-runtime";
+import { jsx as jsx432, jsxs as jsxs184 } from "react/jsx-runtime";
 
 // src/orgchart/orgchart.spec.tsx
-import { jsx as jsx416 } from "react/jsx-runtime";
+import { jsx as jsx433 } from "react/jsx-runtime";
 var ORGCHART_CLASSNAME = `k-orgchart`;
-var states141 = [];
-var options127 = {};
-var defaultProps129 = {
+var states151 = [];
+var options139 = {};
+var defaultProps140 = {
   width: "100%",
   height: "300px"
 };
 var Orgchart = (props) => {
   const {
-    width = defaultProps129.width,
-    height = defaultProps129.height,
+    width = defaultProps140.width,
+    height = defaultProps140.height,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx416(
+  return /* @__PURE__ */ jsx433(
     "div",
     {
       ...other,
@@ -14983,19 +15478,19 @@ var Orgchart = (props) => {
         props.className,
         ORGCHART_CLASSNAME
       ),
-      children: /* @__PURE__ */ jsx416("div", { className: "k-orgchart-container", style: { width, height }, children: props.children })
+      children: /* @__PURE__ */ jsx433("div", { className: "k-orgchart-container", style: { width, height }, children: props.children })
     }
   );
 };
-Orgchart.states = states141;
-Orgchart.options = options127;
+Orgchart.states = states151;
+Orgchart.options = options139;
 Orgchart.className = ORGCHART_CLASSNAME;
-Orgchart.defaultProps = defaultProps129;
+Orgchart.defaultProps = defaultProps140;
 
 // src/orgchart/orgchart-node.tsx
-import { jsx as jsx417, jsxs as jsxs174 } from "react/jsx-runtime";
+import { jsx as jsx434, jsxs as jsxs185 } from "react/jsx-runtime";
 var ORGCHARTNODE_CLASSNAME = `k-orgchart-node`;
-var defaultProps130 = {
+var defaultProps141 = {
   buttonIcon: "plus"
 };
 var OrgchartNode = (props) => {
@@ -15007,12 +15502,12 @@ var OrgchartNode = (props) => {
     lineBottom,
     lineTop,
     button,
-    buttonIcon: buttonIcon2 = defaultProps130.buttonIcon,
+    buttonIcon: buttonIcon2 = defaultProps141.buttonIcon,
     avatar,
     avatarType,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs174(
+  return /* @__PURE__ */ jsxs185(
     "div",
     {
       ...other,
@@ -15023,35 +15518,35 @@ var OrgchartNode = (props) => {
         "k-align-items-center"
       ),
       children: [
-        lineTop && /* @__PURE__ */ jsx417("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        /* @__PURE__ */ jsx417(Card, { className: "k-orgchart-card", children: /* @__PURE__ */ jsxs174(CardBody, { className: "k-hstack", details, style: { borderTopColor: color }, children: [
-          /* @__PURE__ */ jsx417(Avatar, { type: avatarType, themeColor: "secondary", children: avatarType === "image" ? /* @__PURE__ */ jsx417("img", { src: avatar }) : avatar }),
-          /* @__PURE__ */ jsxs174("div", { className: "k-card-title-wrap k-vstack", children: [
-            /* @__PURE__ */ jsx417(CardTitle, { className: "k-text-ellipsis", children: title }),
-            /* @__PURE__ */ jsx417("span", { className: "k-spacer" }),
-            /* @__PURE__ */ jsx417(CardSubtitle, { className: "k-text-ellipsis", children: subtitle })
+        lineTop && /* @__PURE__ */ jsx434("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        /* @__PURE__ */ jsx434(Card, { className: "k-orgchart-card", children: /* @__PURE__ */ jsxs185(CardBody, { className: "k-hstack", details, style: { borderTopColor: color }, children: [
+          /* @__PURE__ */ jsx434(Avatar, { type: avatarType, themeColor: "secondary", children: avatarType === "image" ? /* @__PURE__ */ jsx434("img", { src: avatar }) : avatar }),
+          /* @__PURE__ */ jsxs185("div", { className: "k-card-title-wrap k-vstack", children: [
+            /* @__PURE__ */ jsx434(CardTitle, { className: "k-text-ellipsis", children: title }),
+            /* @__PURE__ */ jsx434("span", { className: "k-spacer" }),
+            /* @__PURE__ */ jsx434(CardSubtitle, { className: "k-text-ellipsis", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsx417("span", { className: "k-spacer" })
+          /* @__PURE__ */ jsx434("span", { className: "k-spacer" })
         ] }) }),
-        lineBottom && /* @__PURE__ */ jsx417("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        button && /* @__PURE__ */ jsx417(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
+        lineBottom && /* @__PURE__ */ jsx434("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        button && /* @__PURE__ */ jsx434(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
       ]
     }
   );
 };
 
 // src/orgchart/orgchart-group.tsx
-import { Fragment as Fragment119, jsx as jsx418, jsxs as jsxs175 } from "react/jsx-runtime";
+import { Fragment as Fragment128, jsx as jsx435, jsxs as jsxs186 } from "react/jsx-runtime";
 var ORGCHARTGROUP_CLASSNAME = `k-orgchart-group`;
-var states142 = [];
-var options128 = {};
-var defaultProps131 = {
+var states152 = [];
+var options140 = {};
+var defaultProps142 = {
   orientation: "horizontal"
 };
 var OrgchartGroup = (props) => {
   const {
     children,
-    orientation = defaultProps131.orientation,
+    orientation = defaultProps142.orientation,
     justifyContent,
     ...other
   } = props;
@@ -15074,7 +15569,7 @@ var OrgchartGroup = (props) => {
       }
     }
   }
-  return /* @__PURE__ */ jsxs175(
+  return /* @__PURE__ */ jsxs186(
     "div",
     {
       ...other,
@@ -15088,7 +15583,7 @@ var OrgchartGroup = (props) => {
       ),
       style: { width: "100%" },
       children: [
-        chartNodes.length > 0 && /* @__PURE__ */ jsx418(
+        chartNodes.length > 0 && /* @__PURE__ */ jsx435(
           "div",
           {
             className: classNames(
@@ -15098,26 +15593,26 @@ var OrgchartGroup = (props) => {
                 [`k-${kendoThemeMaps.orientationMap[orientation] || orientation}`]: orientation
               }
             ),
-            children: /* @__PURE__ */ jsx418(Fragment119, { children: chartNodes })
+            children: /* @__PURE__ */ jsx435(Fragment128, { children: chartNodes })
           }
         ),
-        /* @__PURE__ */ jsx418(Fragment119, { children: chartGroups })
+        /* @__PURE__ */ jsx435(Fragment128, { children: chartGroups })
       ]
     }
   );
 };
-OrgchartGroup.states = states142;
-OrgchartGroup.options = options128;
+OrgchartGroup.states = states152;
+OrgchartGroup.options = options140;
 OrgchartGroup.className = ORGCHARTGROUP_CLASSNAME;
-OrgchartGroup.defaultProps = defaultProps131;
+OrgchartGroup.defaultProps = defaultProps142;
 
 // src/orgchart/orgchart-node-group.tsx
-import { jsx as jsx419, jsxs as jsxs176 } from "react/jsx-runtime";
+import { jsx as jsx436, jsxs as jsxs187 } from "react/jsx-runtime";
 var ORGCHARTNODEGROUP_CLASSNAME = `k-orgchart-node-group`;
-var states143 = [
+var states153 = [
   States.focus
 ];
-var defaultProps132 = {
+var defaultProps143 = {
   orientation: "horizontal",
   buttonIcon: "plus"
 };
@@ -15128,12 +15623,12 @@ var OrgchartNodeGroup = (props) => {
     lineBottom,
     lineTop,
     button,
-    buttonIcon: buttonIcon2 = defaultProps132.buttonIcon,
+    buttonIcon: buttonIcon2 = defaultProps143.buttonIcon,
     focus,
-    orientation = defaultProps132.orientation,
+    orientation = defaultProps143.orientation,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs176(
+  return /* @__PURE__ */ jsxs187(
     "div",
     {
       ...other,
@@ -15144,8 +15639,8 @@ var OrgchartNodeGroup = (props) => {
         "k-align-items-center"
       ),
       children: [
-        lineTop && /* @__PURE__ */ jsx419("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        /* @__PURE__ */ jsxs176(
+        lineTop && /* @__PURE__ */ jsx436("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        /* @__PURE__ */ jsxs187(
           "div",
           {
             className: classNames(
@@ -15156,9 +15651,9 @@ var OrgchartNodeGroup = (props) => {
               })
             ),
             children: [
-              title && /* @__PURE__ */ jsx419("div", { className: "k-orgchart-node-group-title", children: title }),
-              subtitle && /* @__PURE__ */ jsx419("div", { className: "k-orgchart-node-group-subtitle", children: subtitle }),
-              /* @__PURE__ */ jsx419(
+              title && /* @__PURE__ */ jsx436("div", { className: "k-orgchart-node-group-title", children: title }),
+              subtitle && /* @__PURE__ */ jsx436("div", { className: "k-orgchart-node-group-subtitle", children: subtitle }),
+              /* @__PURE__ */ jsx436(
                 "div",
                 {
                   className: classNames(
@@ -15173,51 +15668,51 @@ var OrgchartNodeGroup = (props) => {
             ]
           }
         ),
-        lineBottom && /* @__PURE__ */ jsx419("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        button && /* @__PURE__ */ jsx419(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
+        lineBottom && /* @__PURE__ */ jsx436("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        button && /* @__PURE__ */ jsx436(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
       ]
     }
   );
 };
-OrgchartNodeGroup.states = states143;
+OrgchartNodeGroup.states = states153;
 
 // src/orgchart/templates/orgchart-normal.tsx
-import { jsx as jsx420, jsxs as jsxs177 } from "react/jsx-runtime";
+import { jsx as jsx437, jsxs as jsxs188 } from "react/jsx-runtime";
 
 // src/orgchart/templates/orgchart-vertical.tsx
-import { jsx as jsx421, jsxs as jsxs178 } from "react/jsx-runtime";
+import { jsx as jsx438, jsxs as jsxs189 } from "react/jsx-runtime";
 
 // src/orgchart/templates/orgchart-group-normal.tsx
-import { jsx as jsx422, jsxs as jsxs179 } from "react/jsx-runtime";
+import { jsx as jsx439, jsxs as jsxs190 } from "react/jsx-runtime";
 
 // src/orgchart/templates/orgchart-group-vertical.tsx
-import { jsx as jsx423, jsxs as jsxs180 } from "react/jsx-runtime";
+import { jsx as jsx440, jsxs as jsxs191 } from "react/jsx-runtime";
 
 // src/signature/signature.spec.tsx
-import { jsx as jsx424, jsxs as jsxs181 } from "react/jsx-runtime";
+import { jsx as jsx441, jsxs as jsxs192 } from "react/jsx-runtime";
 var SIGNATURE_CLASSNAME = `k-signature`;
-var states144 = [
+var states154 = [
   States.hover,
   States.focus,
   States.valid,
   States.invalid,
   States.disabled
 ];
-var options129 = {
+var options141 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps133 = {
+var defaultProps144 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid
 };
 var Signature = (props) => {
   const {
-    size = defaultProps133.size,
-    rounded = defaultProps133.rounded,
-    fillMode = defaultProps133.fillMode,
+    size = defaultProps144.size,
+    rounded = defaultProps144.rounded,
+    fillMode = defaultProps144.fillMode,
     hover,
     focus,
     valid,
@@ -15226,7 +15721,7 @@ var Signature = (props) => {
     maximized,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs181(
+  return /* @__PURE__ */ jsxs192(
     "div",
     {
       ...other,
@@ -15254,8 +15749,8 @@ var Signature = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ jsx424("canvas", { className: "k-signature-canvas" }),
-        /* @__PURE__ */ jsxs181(
+        /* @__PURE__ */ jsx441("canvas", { className: "k-signature-canvas" }),
+        /* @__PURE__ */ jsxs192(
           "div",
           {
             className: classNames(
@@ -15263,7 +15758,7 @@ var Signature = (props) => {
               "k-signature-actions-top"
             ),
             children: [
-              /* @__PURE__ */ jsx424(
+              /* @__PURE__ */ jsx441(
                 Button,
                 {
                   className: classNames(
@@ -15277,7 +15772,7 @@ var Signature = (props) => {
                   fillMode: "flat"
                 }
               ),
-              /* @__PURE__ */ jsx424(
+              /* @__PURE__ */ jsx441(
                 Button,
                 {
                   className: classNames(
@@ -15294,15 +15789,15 @@ var Signature = (props) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx424("div", { className: "k-signature-line" }),
-        /* @__PURE__ */ jsx424(
+        /* @__PURE__ */ jsx441("div", { className: "k-signature-line" }),
+        /* @__PURE__ */ jsx441(
           "div",
           {
             className: classNames(
               "k-signature-actions",
               "k-signature-actions-bottom"
             ),
-            children: /* @__PURE__ */ jsx424(
+            children: /* @__PURE__ */ jsx441(
               Button,
               {
                 className: classNames(
@@ -15321,27 +15816,27 @@ var Signature = (props) => {
     }
   );
 };
-Signature.states = states144;
-Signature.options = options129;
+Signature.states = states154;
+Signature.options = options141;
 Signature.className = SIGNATURE_CLASSNAME;
-Signature.defaultProps = defaultProps133;
+Signature.defaultProps = defaultProps144;
 
 // src/editor/editor.spec.tsx
-import { jsx as jsx425 } from "react/jsx-runtime";
+import { jsx as jsx442 } from "react/jsx-runtime";
 var EDITOR_CLASSNAME = `k-editor`;
-var states145 = [
+var states155 = [
   States.readonly,
   States.disabled
 ];
-var options130 = {};
-var defaultProps134 = {};
+var options142 = {};
+var defaultProps145 = {};
 var Editor = (props) => {
   const {
     readonly,
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx425(
+  return /* @__PURE__ */ jsx442(
     "div",
     {
       ...other,
@@ -15357,737 +15852,737 @@ var Editor = (props) => {
     }
   );
 };
-Editor.states = states145;
-Editor.options = options130;
+Editor.states = states155;
+Editor.options = options142;
 Editor.className = EDITOR_CLASSNAME;
-Editor.defaultProps = defaultProps134;
+Editor.defaultProps = defaultProps145;
 
 // src/editor/editor-toolbar.tsx
-import { jsx as jsx426 } from "react/jsx-runtime";
+import { jsx as jsx443 } from "react/jsx-runtime";
 
 // src/editor/editor-content.tsx
-import { jsx as jsx427 } from "react/jsx-runtime";
-var states146 = [
+import { jsx as jsx444 } from "react/jsx-runtime";
+var states156 = [
   States.focus
 ];
 
 // src/editor/templates/editor-normal.tsx
-import { Fragment as Fragment120, jsx as jsx428, jsxs as jsxs182 } from "react/jsx-runtime";
+import { Fragment as Fragment129, jsx as jsx445, jsxs as jsxs193 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/border-clip.tsx
-import { jsx as jsx429 } from "react/jsx-runtime";
+import { jsx as jsx446 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/content-clip.tsx
-import { jsx as jsx430 } from "react/jsx-runtime";
+import { jsx as jsx447 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/padding-clip.tsx
-import { jsx as jsx431 } from "react/jsx-runtime";
+import { jsx as jsx448 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-clip/text-clip.tsx
-import { jsx as jsx432 } from "react/jsx-runtime";
+import { jsx as jsx449 } from "react/jsx-runtime";
 
 // src/utils/templates/background/background-color/color.tsx
-import { jsx as jsx433, jsxs as jsxs183 } from "react/jsx-runtime";
+import { jsx as jsx450, jsxs as jsxs194 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/all-sides.tsx
-import { jsx as jsx434, jsxs as jsxs184 } from "react/jsx-runtime";
+import { jsx as jsx451, jsxs as jsxs195 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/individual.tsx
-import { jsx as jsx435, jsxs as jsxs185 } from "react/jsx-runtime";
+import { jsx as jsx452, jsxs as jsxs196 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/left-right.tsx
-import { jsx as jsx436, jsxs as jsxs186 } from "react/jsx-runtime";
+import { jsx as jsx453, jsxs as jsxs197 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-color/top-bottom.tsx
-import { jsx as jsx437, jsxs as jsxs187 } from "react/jsx-runtime";
+import { jsx as jsx454, jsxs as jsxs198 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/corners.tsx
-import { jsx as jsx438, jsxs as jsxs188 } from "react/jsx-runtime";
+import { jsx as jsx455, jsxs as jsxs199 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/no-rounding.tsx
-import { jsx as jsx439, jsxs as jsxs189 } from "react/jsx-runtime";
+import { jsx as jsx456, jsxs as jsxs200 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/rounding.tsx
-import { jsx as jsx440, jsxs as jsxs190 } from "react/jsx-runtime";
+import { jsx as jsx457, jsxs as jsxs201 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-radius/sides.tsx
-import { jsx as jsx441, jsxs as jsxs191 } from "react/jsx-runtime";
+import { jsx as jsx458, jsxs as jsxs202 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/all-sides.tsx
-import { jsx as jsx442, jsxs as jsxs192 } from "react/jsx-runtime";
+import { jsx as jsx459, jsxs as jsxs203 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/individual.tsx
-import { jsx as jsx443, jsxs as jsxs193 } from "react/jsx-runtime";
+import { jsx as jsx460, jsxs as jsxs204 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/left-right.tsx
-import { jsx as jsx444, jsxs as jsxs194 } from "react/jsx-runtime";
+import { jsx as jsx461, jsxs as jsxs205 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/no-style.tsx
-import { jsx as jsx445 } from "react/jsx-runtime";
+import { jsx as jsx462 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-style/top-bottom.tsx
-import { jsx as jsx446, jsxs as jsxs195 } from "react/jsx-runtime";
+import { jsx as jsx463, jsxs as jsxs206 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/all-sides.tsx
-import { jsx as jsx447, jsxs as jsxs196 } from "react/jsx-runtime";
+import { jsx as jsx464, jsxs as jsxs207 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/individual.tsx
-import { jsx as jsx448, jsxs as jsxs197 } from "react/jsx-runtime";
+import { jsx as jsx465, jsxs as jsxs208 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/left-right.tsx
-import { jsx as jsx449, jsxs as jsxs198 } from "react/jsx-runtime";
+import { jsx as jsx466, jsxs as jsxs209 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/border-width/top-bottom.tsx
-import { jsx as jsx450, jsxs as jsxs199 } from "react/jsx-runtime";
+import { jsx as jsx467, jsxs as jsxs210 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-color/all-sides.tsx
-import { jsx as jsx451 } from "react/jsx-runtime";
+import { jsx as jsx468 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-offset/all-sides.tsx
-import { jsx as jsx452, jsxs as jsxs200 } from "react/jsx-runtime";
+import { jsx as jsx469, jsxs as jsxs211 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-offset/no-offset.tsx
-import { jsx as jsx453 } from "react/jsx-runtime";
+import { jsx as jsx470 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-style/all-sides.tsx
-import { jsx as jsx454, jsxs as jsxs201 } from "react/jsx-runtime";
+import { jsx as jsx471, jsxs as jsxs212 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-style/no-style.tsx
-import { jsx as jsx455 } from "react/jsx-runtime";
+import { jsx as jsx472 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-width/all-sides.tsx
-import { jsx as jsx456, jsxs as jsxs202 } from "react/jsx-runtime";
+import { jsx as jsx473, jsxs as jsxs213 } from "react/jsx-runtime";
 
 // src/utils/templates/borders/outline-width/no-width.tsx
-import { jsx as jsx457 } from "react/jsx-runtime";
+import { jsx as jsx474 } from "react/jsx-runtime";
 
 // src/utils/templates/effects/opacity/applying.tsx
-import { jsx as jsx458, jsxs as jsxs203 } from "react/jsx-runtime";
+import { jsx as jsx475, jsxs as jsxs214 } from "react/jsx-runtime";
 
 // src/utils/templates/filters/backdrop-blur/applying.tsx
-import { Fragment as Fragment121, jsx as jsx459, jsxs as jsxs204 } from "react/jsx-runtime";
+import { Fragment as Fragment130, jsx as jsx476, jsxs as jsxs215 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/around.tsx
-import { jsx as jsx460, jsxs as jsxs205 } from "react/jsx-runtime";
+import { jsx as jsx477, jsxs as jsxs216 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/between.tsx
-import { jsx as jsx461, jsxs as jsxs206 } from "react/jsx-runtime";
+import { jsx as jsx478, jsxs as jsxs217 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/center.tsx
-import { jsx as jsx462, jsxs as jsxs207 } from "react/jsx-runtime";
+import { jsx as jsx479, jsxs as jsxs218 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/end.tsx
-import { jsx as jsx463, jsxs as jsxs208 } from "react/jsx-runtime";
+import { jsx as jsx480, jsxs as jsxs219 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/evenly.tsx
-import { jsx as jsx464, jsxs as jsxs209 } from "react/jsx-runtime";
+import { jsx as jsx481, jsxs as jsxs220 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/normal.tsx
-import { jsx as jsx465, jsxs as jsxs210 } from "react/jsx-runtime";
+import { jsx as jsx482, jsxs as jsxs221 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/start.tsx
-import { jsx as jsx466, jsxs as jsxs211 } from "react/jsx-runtime";
+import { jsx as jsx483, jsxs as jsxs222 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-content/stretch.tsx
-import { jsx as jsx467, jsxs as jsxs212 } from "react/jsx-runtime";
+import { jsx as jsx484, jsxs as jsxs223 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/baseline.tsx
-import { jsx as jsx468, jsxs as jsxs213 } from "react/jsx-runtime";
+import { jsx as jsx485, jsxs as jsxs224 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/center.tsx
-import { jsx as jsx469, jsxs as jsxs214 } from "react/jsx-runtime";
+import { jsx as jsx486, jsxs as jsxs225 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/end.tsx
-import { jsx as jsx470, jsxs as jsxs215 } from "react/jsx-runtime";
+import { jsx as jsx487, jsxs as jsxs226 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/start.tsx
-import { jsx as jsx471, jsxs as jsxs216 } from "react/jsx-runtime";
+import { jsx as jsx488, jsxs as jsxs227 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-items/stretch.tsx
-import { jsx as jsx472, jsxs as jsxs217 } from "react/jsx-runtime";
+import { jsx as jsx489, jsxs as jsxs228 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/baseline.tsx
-import { jsx as jsx473, jsxs as jsxs218 } from "react/jsx-runtime";
+import { jsx as jsx490, jsxs as jsxs229 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/center.tsx
-import { jsx as jsx474, jsxs as jsxs219 } from "react/jsx-runtime";
+import { jsx as jsx491, jsxs as jsxs230 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/end.tsx
-import { jsx as jsx475, jsxs as jsxs220 } from "react/jsx-runtime";
+import { jsx as jsx492, jsxs as jsxs231 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/start.tsx
-import { jsx as jsx476, jsxs as jsxs221 } from "react/jsx-runtime";
+import { jsx as jsx493, jsxs as jsxs232 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/align-self/stretch.tsx
-import { jsx as jsx477, jsxs as jsxs222 } from "react/jsx-runtime";
+import { jsx as jsx494, jsxs as jsxs233 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/auto.tsx
-import { jsx as jsx478, jsxs as jsxs223 } from "react/jsx-runtime";
+import { jsx as jsx495, jsxs as jsxs234 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/flex-1.tsx
-import { jsx as jsx479, jsxs as jsxs224 } from "react/jsx-runtime";
+import { jsx as jsx496, jsxs as jsxs235 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/initial.tsx
-import { jsx as jsx480, jsxs as jsxs225 } from "react/jsx-runtime";
+import { jsx as jsx497, jsxs as jsxs236 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex/none.tsx
-import { jsx as jsx481, jsxs as jsxs226 } from "react/jsx-runtime";
+import { jsx as jsx498, jsxs as jsxs237 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-basis/auto.tsx
-import { jsx as jsx482, jsxs as jsxs227 } from "react/jsx-runtime";
+import { jsx as jsx499, jsxs as jsxs238 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-basis/size.tsx
-import { jsx as jsx483, jsxs as jsxs228 } from "react/jsx-runtime";
+import { jsx as jsx500, jsxs as jsxs239 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/column-reverse.tsx
-import { jsx as jsx484, jsxs as jsxs229 } from "react/jsx-runtime";
+import { jsx as jsx501, jsxs as jsxs240 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/column.tsx
-import { jsx as jsx485, jsxs as jsxs230 } from "react/jsx-runtime";
+import { jsx as jsx502, jsxs as jsxs241 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/row-reverse.tsx
-import { jsx as jsx486, jsxs as jsxs231 } from "react/jsx-runtime";
+import { jsx as jsx503, jsxs as jsxs242 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-direction/row.tsx
-import { jsx as jsx487, jsxs as jsxs232 } from "react/jsx-runtime";
+import { jsx as jsx504, jsxs as jsxs243 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-grow/grow-0.tsx
-import { jsx as jsx488, jsxs as jsxs233 } from "react/jsx-runtime";
+import { jsx as jsx505, jsxs as jsxs244 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-grow/grow-1.tsx
-import { jsx as jsx489, jsxs as jsxs234 } from "react/jsx-runtime";
+import { jsx as jsx506, jsxs as jsxs245 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-srink/shrink-0.tsx
-import { jsx as jsx490, jsxs as jsxs235 } from "react/jsx-runtime";
+import { jsx as jsx507, jsxs as jsxs246 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-srink/shrink-1.tsx
-import { jsx as jsx491, jsxs as jsxs236 } from "react/jsx-runtime";
+import { jsx as jsx508, jsxs as jsxs247 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/nowrap.tsx
-import { jsx as jsx492, jsxs as jsxs237 } from "react/jsx-runtime";
+import { jsx as jsx509, jsxs as jsxs248 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/wrap-reverse.tsx
-import { jsx as jsx493, jsxs as jsxs238 } from "react/jsx-runtime";
+import { jsx as jsx510, jsxs as jsxs249 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/flex-wrap/wrap.tsx
-import { jsx as jsx494, jsxs as jsxs239 } from "react/jsx-runtime";
+import { jsx as jsx511, jsxs as jsxs250 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/gap/size-x-y.tsx
-import { jsx as jsx495, jsxs as jsxs240 } from "react/jsx-runtime";
+import { jsx as jsx512, jsxs as jsxs251 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/gap/size.tsx
-import { jsx as jsx496, jsxs as jsxs241 } from "react/jsx-runtime";
+import { jsx as jsx513, jsxs as jsxs252 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/auto.tsx
-import { jsx as jsx497, jsxs as jsxs242 } from "react/jsx-runtime";
+import { jsx as jsx514, jsxs as jsxs253 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/fr.tsx
-import { jsx as jsx498, jsxs as jsxs243 } from "react/jsx-runtime";
+import { jsx as jsx515, jsxs as jsxs254 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/max.tsx
-import { jsx as jsx499, jsxs as jsxs244 } from "react/jsx-runtime";
+import { jsx as jsx516, jsxs as jsxs255 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-cols/min.tsx
-import { jsx as jsx500, jsxs as jsxs245 } from "react/jsx-runtime";
+import { jsx as jsx517, jsxs as jsxs256 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/column.tsx
-import { jsx as jsx501, jsxs as jsxs246 } from "react/jsx-runtime";
+import { jsx as jsx518, jsxs as jsxs257 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/dense.tsx
-import { jsx as jsx502, jsxs as jsxs247 } from "react/jsx-runtime";
+import { jsx as jsx519, jsxs as jsxs258 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-flow/row.tsx
-import { jsx as jsx503, jsxs as jsxs248 } from "react/jsx-runtime";
+import { jsx as jsx520, jsxs as jsxs259 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/auto.tsx
-import { jsx as jsx504, jsxs as jsxs249 } from "react/jsx-runtime";
+import { jsx as jsx521, jsxs as jsxs260 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/fr.tsx
-import { jsx as jsx505, jsxs as jsxs250 } from "react/jsx-runtime";
+import { jsx as jsx522, jsxs as jsxs261 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-auto-rows/min.tsx
-import { jsx as jsx506, jsxs as jsxs251 } from "react/jsx-runtime";
+import { jsx as jsx523, jsxs as jsxs262 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-col-start-end/start-end-n.tsx
-import { jsx as jsx507, jsxs as jsxs252 } from "react/jsx-runtime";
+import { jsx as jsx524, jsxs as jsxs263 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-row-start-end/start-end-n.tsx
-import { jsx as jsx508, jsxs as jsxs253 } from "react/jsx-runtime";
+import { jsx as jsx525, jsxs as jsxs264 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-template-cols/integer.tsx
-import { jsx as jsx509, jsxs as jsxs254 } from "react/jsx-runtime";
+import { jsx as jsx526, jsxs as jsxs265 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/grid-template-rows/integer.tsx
-import { jsx as jsx510, jsxs as jsxs255 } from "react/jsx-runtime";
+import { jsx as jsx527, jsxs as jsxs266 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/around.tsx
-import { jsx as jsx511, jsxs as jsxs256 } from "react/jsx-runtime";
+import { jsx as jsx528, jsxs as jsxs267 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/between.tsx
-import { jsx as jsx512, jsxs as jsxs257 } from "react/jsx-runtime";
+import { jsx as jsx529, jsxs as jsxs268 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/center.tsx
-import { jsx as jsx513, jsxs as jsxs258 } from "react/jsx-runtime";
+import { jsx as jsx530, jsxs as jsxs269 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/end.tsx
-import { jsx as jsx514, jsxs as jsxs259 } from "react/jsx-runtime";
+import { jsx as jsx531, jsxs as jsxs270 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/evenly.tsx
-import { jsx as jsx515, jsxs as jsxs260 } from "react/jsx-runtime";
+import { jsx as jsx532, jsxs as jsxs271 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/normal.tsx
-import { jsx as jsx516, jsxs as jsxs261 } from "react/jsx-runtime";
+import { jsx as jsx533, jsxs as jsxs272 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/start.tsx
-import { jsx as jsx517, jsxs as jsxs262 } from "react/jsx-runtime";
+import { jsx as jsx534, jsxs as jsxs273 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-content/stretch.tsx
-import { jsx as jsx518, jsxs as jsxs263 } from "react/jsx-runtime";
+import { jsx as jsx535, jsxs as jsxs274 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/center.tsx
-import { jsx as jsx519, jsxs as jsxs264 } from "react/jsx-runtime";
+import { jsx as jsx536, jsxs as jsxs275 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/end.tsx
-import { jsx as jsx520, jsxs as jsxs265 } from "react/jsx-runtime";
+import { jsx as jsx537, jsxs as jsxs276 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/start.tsx
-import { jsx as jsx521, jsxs as jsxs266 } from "react/jsx-runtime";
+import { jsx as jsx538, jsxs as jsxs277 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-items/stretch.tsx
-import { jsx as jsx522, jsxs as jsxs267 } from "react/jsx-runtime";
+import { jsx as jsx539, jsxs as jsxs278 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/center.tsx
-import { jsx as jsx523, jsxs as jsxs268 } from "react/jsx-runtime";
+import { jsx as jsx540, jsxs as jsxs279 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/end.tsx
-import { jsx as jsx524, jsxs as jsxs269 } from "react/jsx-runtime";
+import { jsx as jsx541, jsxs as jsxs280 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/start.tsx
-import { jsx as jsx525, jsxs as jsxs270 } from "react/jsx-runtime";
+import { jsx as jsx542, jsxs as jsxs281 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/justify-self/stretch.tsx
-import { jsx as jsx526, jsxs as jsxs271 } from "react/jsx-runtime";
+import { jsx as jsx543, jsxs as jsxs282 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/first.tsx
-import { jsx as jsx527, jsxs as jsxs272 } from "react/jsx-runtime";
+import { jsx as jsx544, jsxs as jsxs283 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/integer.tsx
-import { jsx as jsx528, jsxs as jsxs273 } from "react/jsx-runtime";
+import { jsx as jsx545, jsxs as jsxs284 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/order/last.tsx
-import { jsx as jsx529, jsxs as jsxs274 } from "react/jsx-runtime";
+import { jsx as jsx546, jsxs as jsxs285 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/around.tsx
-import { jsx as jsx530, jsxs as jsxs275 } from "react/jsx-runtime";
+import { jsx as jsx547, jsxs as jsxs286 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/between.tsx
-import { jsx as jsx531, jsxs as jsxs276 } from "react/jsx-runtime";
+import { jsx as jsx548, jsxs as jsxs287 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/center.tsx
-import { jsx as jsx532, jsxs as jsxs277 } from "react/jsx-runtime";
+import { jsx as jsx549, jsxs as jsxs288 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/end.tsx
-import { jsx as jsx533, jsxs as jsxs278 } from "react/jsx-runtime";
+import { jsx as jsx550, jsxs as jsxs289 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/evenly.tsx
-import { jsx as jsx534, jsxs as jsxs279 } from "react/jsx-runtime";
+import { jsx as jsx551, jsxs as jsxs290 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/normal.tsx
-import { jsx as jsx535, jsxs as jsxs280 } from "react/jsx-runtime";
+import { jsx as jsx552, jsxs as jsxs291 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/start.tsx
-import { jsx as jsx536, jsxs as jsxs281 } from "react/jsx-runtime";
+import { jsx as jsx553, jsxs as jsxs292 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-content/stretch.tsx
-import { jsx as jsx537, jsxs as jsxs282 } from "react/jsx-runtime";
+import { jsx as jsx554, jsxs as jsxs293 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/center.tsx
-import { jsx as jsx538, jsxs as jsxs283 } from "react/jsx-runtime";
+import { jsx as jsx555, jsxs as jsxs294 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/end.tsx
-import { jsx as jsx539, jsxs as jsxs284 } from "react/jsx-runtime";
+import { jsx as jsx556, jsxs as jsxs295 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/start.tsx
-import { jsx as jsx540, jsxs as jsxs285 } from "react/jsx-runtime";
+import { jsx as jsx557, jsxs as jsxs296 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-items/stretch.tsx
-import { jsx as jsx541, jsxs as jsxs286 } from "react/jsx-runtime";
+import { jsx as jsx558, jsxs as jsxs297 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/center.tsx
-import { jsx as jsx542, jsxs as jsxs287 } from "react/jsx-runtime";
+import { jsx as jsx559, jsxs as jsxs298 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/end.tsx
-import { jsx as jsx543, jsxs as jsxs288 } from "react/jsx-runtime";
+import { jsx as jsx560, jsxs as jsxs299 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/start.tsx
-import { jsx as jsx544, jsxs as jsxs289 } from "react/jsx-runtime";
+import { jsx as jsx561, jsxs as jsxs300 } from "react/jsx-runtime";
 
 // src/utils/templates/flex-grid/place-self/stretch.tsx
-import { jsx as jsx545, jsxs as jsxs290 } from "react/jsx-runtime";
+import { jsx as jsx562, jsxs as jsxs301 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/appearance/applying.tsx
-import { jsx as jsx546, jsxs as jsxs291 } from "react/jsx-runtime";
+import { jsx as jsx563, jsxs as jsxs302 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/appearance/none.tsx
-import { jsx as jsx547, jsxs as jsxs292 } from "react/jsx-runtime";
+import { jsx as jsx564, jsxs as jsxs303 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/cursor/applying.tsx
-import { jsx as jsx548, jsxs as jsxs293 } from "react/jsx-runtime";
+import { jsx as jsx565, jsxs as jsxs304 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/pointer-events/applying.tsx
-import { jsx as jsx549, jsxs as jsxs294 } from "react/jsx-runtime";
+import { jsx as jsx566, jsxs as jsxs305 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/all-directions.tsx
-import { jsx as jsx550 } from "react/jsx-runtime";
+import { jsx as jsx567 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/horizontal.tsx
-import { jsx as jsx551 } from "react/jsx-runtime";
+import { jsx as jsx568 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/no-resizing.tsx
-import { jsx as jsx552 } from "react/jsx-runtime";
+import { jsx as jsx569 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/resize/vertical.tsx
-import { jsx as jsx553 } from "react/jsx-runtime";
+import { jsx as jsx570 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/auto.tsx
-import { jsx as jsx554 } from "react/jsx-runtime";
+import { jsx as jsx571 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/horizontal.tsx
-import { jsx as jsx555 } from "react/jsx-runtime";
+import { jsx as jsx572 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/none.tsx
-import { jsx as jsx556 } from "react/jsx-runtime";
+import { jsx as jsx573 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/touch-action/vertical.tsx
-import { jsx as jsx557 } from "react/jsx-runtime";
+import { jsx as jsx574 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/all.tsx
-import { jsx as jsx558 } from "react/jsx-runtime";
+import { jsx as jsx575 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/none.tsx
-import { jsx as jsx559 } from "react/jsx-runtime";
+import { jsx as jsx576 } from "react/jsx-runtime";
 
 // src/utils/templates/interactivity/user-select/text.tsx
-import { jsx as jsx560 } from "react/jsx-runtime";
+import { jsx as jsx577 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/auto.tsx
-import { jsx as jsx561 } from "react/jsx-runtime";
+import { jsx as jsx578 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/one.tsx
-import { jsx as jsx562 } from "react/jsx-runtime";
+import { jsx as jsx579 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/sqaure.tsx
-import { jsx as jsx563 } from "react/jsx-runtime";
+import { jsx as jsx580 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/aspect-ratio/video.tsx
-import { jsx as jsx564 } from "react/jsx-runtime";
+import { jsx as jsx581 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/box-sizing/border.tsx
-import { jsx as jsx565 } from "react/jsx-runtime";
+import { jsx as jsx582 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/box-sizing/content.tsx
-import { jsx as jsx566 } from "react/jsx-runtime";
+import { jsx as jsx583 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/both.tsx
-import { jsx as jsx567, jsxs as jsxs295 } from "react/jsx-runtime";
+import { jsx as jsx584, jsxs as jsxs306 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/left.tsx
-import { jsx as jsx568, jsxs as jsxs296 } from "react/jsx-runtime";
+import { jsx as jsx585, jsxs as jsxs307 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/no-clear.tsx
-import { jsx as jsx569, jsxs as jsxs297 } from "react/jsx-runtime";
+import { jsx as jsx586, jsxs as jsxs308 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/clear/right.tsx
-import { jsx as jsx570, jsxs as jsxs298 } from "react/jsx-runtime";
+import { jsx as jsx587, jsxs as jsxs309 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/columns/automatic.tsx
-import { jsx as jsx571, jsxs as jsxs299 } from "react/jsx-runtime";
+import { jsx as jsx588, jsxs as jsxs310 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/columns/count.tsx
-import { jsx as jsx572, jsxs as jsxs300 } from "react/jsx-runtime";
+import { jsx as jsx589, jsxs as jsxs311 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/block.tsx
-import { jsx as jsx573, jsxs as jsxs301 } from "react/jsx-runtime";
+import { jsx as jsx590, jsxs as jsxs312 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/flex.tsx
-import { jsx as jsx574, jsxs as jsxs302 } from "react/jsx-runtime";
+import { jsx as jsx591, jsxs as jsxs313 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/inline.tsx
-import { jsx as jsx575, jsxs as jsxs303 } from "react/jsx-runtime";
+import { jsx as jsx592, jsxs as jsxs314 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/display/none.tsx
-import { Fragment as Fragment122, jsx as jsx576, jsxs as jsxs304 } from "react/jsx-runtime";
+import { Fragment as Fragment131, jsx as jsx593, jsxs as jsxs315 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/left.tsx
-import { jsx as jsx577, jsxs as jsxs305 } from "react/jsx-runtime";
+import { jsx as jsx594, jsxs as jsxs316 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/no-float.tsx
-import { jsx as jsx578, jsxs as jsxs306 } from "react/jsx-runtime";
+import { jsx as jsx595, jsxs as jsxs317 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/float/right.tsx
-import { jsx as jsx579, jsxs as jsxs307 } from "react/jsx-runtime";
+import { jsx as jsx596, jsxs as jsxs318 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/contain.tsx
-import { jsx as jsx580 } from "react/jsx-runtime";
+import { jsx as jsx597 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/cover.tsx
-import { jsx as jsx581 } from "react/jsx-runtime";
+import { jsx as jsx598 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/fill.tsx
-import { jsx as jsx582 } from "react/jsx-runtime";
+import { jsx as jsx599 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-fit/scale-down.tsx
-import { jsx as jsx583 } from "react/jsx-runtime";
+import { jsx as jsx600 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/object-position/position.tsx
-import { jsx as jsx584, jsxs as jsxs308 } from "react/jsx-runtime";
+import { jsx as jsx601, jsxs as jsxs319 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/hidden.tsx
-import { jsx as jsx585 } from "react/jsx-runtime";
+import { jsx as jsx602 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/horizontal.tsx
-import { jsx as jsx586 } from "react/jsx-runtime";
+import { jsx as jsx603 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/vertical.tsx
-import { jsx as jsx587 } from "react/jsx-runtime";
+import { jsx as jsx604 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/overflow/visible.tsx
-import { jsx as jsx588 } from "react/jsx-runtime";
+import { jsx as jsx605 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/placement/multiple.tsx
-import { jsx as jsx589, jsxs as jsxs309 } from "react/jsx-runtime";
+import { jsx as jsx606, jsxs as jsxs320 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/placement/single.tsx
-import { jsx as jsx590, jsxs as jsxs310 } from "react/jsx-runtime";
+import { jsx as jsx607, jsxs as jsxs321 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/position/applying.tsx
-import { jsx as jsx591, jsxs as jsxs311 } from "react/jsx-runtime";
+import { jsx as jsx608, jsxs as jsxs322 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/visibility/invisible.tsx
-import { jsx as jsx592, jsxs as jsxs312 } from "react/jsx-runtime";
+import { jsx as jsx609, jsxs as jsxs323 } from "react/jsx-runtime";
 
 // src/utils/templates/layout/z-index/applying.tsx
-import { Fragment as Fragment123, jsx as jsx593, jsxs as jsxs313 } from "react/jsx-runtime";
+import { Fragment as Fragment132, jsx as jsx610, jsxs as jsxs324 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/fixed.tsx
-import { jsx as jsx594, jsxs as jsxs314 } from "react/jsx-runtime";
+import { jsx as jsx611, jsxs as jsxs325 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/full.tsx
-import { jsx as jsx595 } from "react/jsx-runtime";
+import { jsx as jsx612 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/maximum.tsx
-import { jsx as jsx596 } from "react/jsx-runtime";
+import { jsx as jsx613 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/minimum.tsx
-import { jsx as jsx597 } from "react/jsx-runtime";
+import { jsx as jsx614 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/height/screen.tsx
-import { jsx as jsx598 } from "react/jsx-runtime";
+import { jsx as jsx615 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/fixed.tsx
-import { jsx as jsx599, jsxs as jsxs315 } from "react/jsx-runtime";
+import { jsx as jsx616, jsxs as jsxs326 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/full.tsx
-import { jsx as jsx600 } from "react/jsx-runtime";
+import { jsx as jsx617 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/maximum.tsx
-import { jsx as jsx601 } from "react/jsx-runtime";
+import { jsx as jsx618 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/minimum.tsx
-import { jsx as jsx602 } from "react/jsx-runtime";
+import { jsx as jsx619 } from "react/jsx-runtime";
 
 // src/utils/templates/sizing/width/screen.tsx
-import { jsx as jsx603 } from "react/jsx-runtime";
+import { jsx as jsx620 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/all.tsx
-import { jsx as jsx604 } from "react/jsx-runtime";
+import { jsx as jsx621 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/single.tsx
-import { Fragment as Fragment124, jsx as jsx605, jsxs as jsxs316 } from "react/jsx-runtime";
+import { Fragment as Fragment133, jsx as jsx622, jsxs as jsxs327 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/x.tsx
-import { jsx as jsx606 } from "react/jsx-runtime";
+import { jsx as jsx623 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/margin/y.tsx
-import { jsx as jsx607 } from "react/jsx-runtime";
+import { jsx as jsx624 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/all.tsx
-import { jsx as jsx608 } from "react/jsx-runtime";
+import { jsx as jsx625 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/single.tsx
-import { Fragment as Fragment125, jsx as jsx609, jsxs as jsxs317 } from "react/jsx-runtime";
+import { Fragment as Fragment134, jsx as jsx626, jsxs as jsxs328 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/x.tsx
-import { jsx as jsx610 } from "react/jsx-runtime";
+import { jsx as jsx627 } from "react/jsx-runtime";
 
 // src/utils/templates/spacing/padding/y.tsx
-import { jsx as jsx611 } from "react/jsx-runtime";
+import { jsx as jsx628 } from "react/jsx-runtime";
 
 // src/utils/templates/svg/fill/color.tsx
-import { Fragment as Fragment126, jsx as jsx612, jsxs as jsxs318 } from "react/jsx-runtime";
+import { Fragment as Fragment135, jsx as jsx629, jsxs as jsxs329 } from "react/jsx-runtime";
 
 // src/utils/templates/svg/stroke/color.tsx
-import { Fragment as Fragment127, jsx as jsx613, jsxs as jsxs319 } from "react/jsx-runtime";
+import { Fragment as Fragment136, jsx as jsx630, jsxs as jsxs330 } from "react/jsx-runtime";
 
 // src/utils/templates/table/border-collapse/collapse.tsx
-import { jsx as jsx614, jsxs as jsxs320 } from "react/jsx-runtime";
+import { jsx as jsx631, jsxs as jsxs331 } from "react/jsx-runtime";
 
 // src/utils/templates/table/border-collapse/separate.tsx
-import { jsx as jsx615, jsxs as jsxs321 } from "react/jsx-runtime";
+import { jsx as jsx632, jsxs as jsxs332 } from "react/jsx-runtime";
 
 // src/utils/templates/table/table-layout/auto.tsx
-import { jsx as jsx616, jsxs as jsxs322 } from "react/jsx-runtime";
+import { jsx as jsx633, jsxs as jsxs333 } from "react/jsx-runtime";
 
 // src/utils/templates/table/table-layout/fixed.tsx
-import { jsx as jsx617, jsxs as jsxs323 } from "react/jsx-runtime";
+import { jsx as jsx634, jsxs as jsxs334 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/flip/horizontal.tsx
-import { jsx as jsx618, jsxs as jsxs324 } from "react/jsx-runtime";
+import { jsx as jsx635, jsxs as jsxs335 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/flip/vertical.tsx
-import { jsx as jsx619, jsxs as jsxs325 } from "react/jsx-runtime";
+import { jsx as jsx636, jsxs as jsxs336 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/origin/applying.tsx
-import { jsx as jsx620, jsxs as jsxs326 } from "react/jsx-runtime";
+import { jsx as jsx637, jsxs as jsxs337 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/rotate/applying.tsx
-import { jsx as jsx621, jsxs as jsxs327 } from "react/jsx-runtime";
+import { jsx as jsx638, jsxs as jsxs338 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/scale/applying.tsx
-import { jsx as jsx622, jsxs as jsxs328 } from "react/jsx-runtime";
+import { jsx as jsx639, jsxs as jsxs339 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/skew/applying.tsx
-import { jsx as jsx623, jsxs as jsxs329 } from "react/jsx-runtime";
+import { jsx as jsx640, jsxs as jsxs340 } from "react/jsx-runtime";
 
 // src/utils/templates/transform/translate/applying.tsx
-import { jsx as jsx624, jsxs as jsxs330 } from "react/jsx-runtime";
+import { jsx as jsx641, jsxs as jsxs341 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/font-style/italic.tsx
-import { jsx as jsx625 } from "react/jsx-runtime";
+import { jsx as jsx642 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/font-weight/size.tsx
-import { Fragment as Fragment128, jsx as jsx626, jsxs as jsxs331 } from "react/jsx-runtime";
+import { Fragment as Fragment137, jsx as jsx643, jsxs as jsxs342 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/decimal.tsx
-import { jsx as jsx627, jsxs as jsxs332 } from "react/jsx-runtime";
+import { jsx as jsx644, jsxs as jsxs343 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/disc.tsx
-import { jsx as jsx628, jsxs as jsxs333 } from "react/jsx-runtime";
+import { jsx as jsx645, jsxs as jsxs344 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/list-style-type/none.tsx
-import { jsx as jsx629, jsxs as jsxs334 } from "react/jsx-runtime";
+import { jsx as jsx646, jsxs as jsxs345 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/center.tsx
-import { jsx as jsx630 } from "react/jsx-runtime";
+import { jsx as jsx647 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/justify.tsx
-import { jsx as jsx631 } from "react/jsx-runtime";
+import { jsx as jsx648 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/left.tsx
-import { jsx as jsx632 } from "react/jsx-runtime";
+import { jsx as jsx649 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-align/right.tsx
-import { jsx as jsx633 } from "react/jsx-runtime";
+import { jsx as jsx650 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-color/inherit.tsx
-import { jsx as jsx634 } from "react/jsx-runtime";
+import { jsx as jsx651 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-color/white.tsx
-import { jsx as jsx635 } from "react/jsx-runtime";
+import { jsx as jsx652 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-decoration/all.tsx
-import { Fragment as Fragment129, jsx as jsx636, jsxs as jsxs335 } from "react/jsx-runtime";
+import { Fragment as Fragment138, jsx as jsx653, jsxs as jsxs346 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-overflow/clip.tsx
-import { jsx as jsx637 } from "react/jsx-runtime";
+import { jsx as jsx654 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-overflow/ellipsis.tsx
-import { jsx as jsx638 } from "react/jsx-runtime";
+import { jsx as jsx655 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/text-transform/all.tsx
-import { Fragment as Fragment130, jsx as jsx639, jsxs as jsxs336 } from "react/jsx-runtime";
+import { Fragment as Fragment139, jsx as jsx656, jsxs as jsxs347 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/baseline.tsx
-import { jsx as jsx640, jsxs as jsxs337 } from "react/jsx-runtime";
+import { jsx as jsx657, jsxs as jsxs348 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/bottom.tsx
-import { jsx as jsx641, jsxs as jsxs338 } from "react/jsx-runtime";
+import { jsx as jsx658, jsxs as jsxs349 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/center.tsx
-import { jsx as jsx642, jsxs as jsxs339 } from "react/jsx-runtime";
+import { jsx as jsx659, jsxs as jsxs350 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/vertical-align/top.tsx
-import { jsx as jsx643, jsxs as jsxs340 } from "react/jsx-runtime";
+import { jsx as jsx660, jsxs as jsxs351 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/normal.tsx
-import { jsx as jsx644 } from "react/jsx-runtime";
+import { jsx as jsx661 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/nowrap.tsx
-import { jsx as jsx645 } from "react/jsx-runtime";
+import { jsx as jsx662 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre-line.tsx
-import { jsx as jsx646 } from "react/jsx-runtime";
+import { jsx as jsx663 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre-wrap.tsx
-import { jsx as jsx647 } from "react/jsx-runtime";
+import { jsx as jsx664 } from "react/jsx-runtime";
 
 // src/utils/templates/typography/white-space/pre.tsx
-import { jsx as jsx648 } from "react/jsx-runtime";
+import { jsx as jsx665 } from "react/jsx-runtime";
 
 // src/multiselect/templates/multiselect-prefix.tsx
-import { Fragment as Fragment131, jsx as jsx649 } from "react/jsx-runtime";
+import { Fragment as Fragment140, jsx as jsx666 } from "react/jsx-runtime";
 
 // src/multiselect/templates/multiselect-suffix.tsx
-import { Fragment as Fragment132, jsx as jsx650 } from "react/jsx-runtime";
+import { Fragment as Fragment141, jsx as jsx667 } from "react/jsx-runtime";
 
 // src/multiselect/tests/multiselect-outline.tsx
-import { Fragment as Fragment133, jsx as jsx651, jsxs as jsxs341 } from "react/jsx-runtime";
+import { Fragment as Fragment142, jsx as jsx668, jsxs as jsxs352 } from "react/jsx-runtime";
 var styles = `
     #test-area {
         grid-template-columns: 160px repeat(2, 300px);
     }
 `;
-var multiselect_outline_default = () => /* @__PURE__ */ jsxs341(Fragment133, { children: [
-  /* @__PURE__ */ jsx651("style", { children: styles }),
-  /* @__PURE__ */ jsxs341("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ jsx651("span", {}),
-    /* @__PURE__ */ jsx651("span", { children: "MultiSelect Outline" }),
-    /* @__PURE__ */ jsx651("span", { children: "MultiSelect Outline RTL" }),
-    /* @__PURE__ */ jsx651("div", { children: "placeholder" }),
-    /* @__PURE__ */ jsx651("div", { children: /* @__PURE__ */ jsx651(MultiSelectNormal, { fillMode: "outline", placeholder: "placeholder..." }) }),
-    /* @__PURE__ */ jsx651("div", { dir: "rtl", children: /* @__PURE__ */ jsx651(MultiSelectNormal, { fillMode: "outline", placeholder: "placeholder..." }) }),
-    /* @__PURE__ */ jsx651("div", { children: "arrow button" }),
-    /* @__PURE__ */ jsx651("div", { children: /* @__PURE__ */ jsx651(MultiSelectArrowButton, { fillMode: "outline", placeholder: "multiSelect with arrow button" }) }),
-    /* @__PURE__ */ jsx651("div", { dir: "rtl", children: /* @__PURE__ */ jsx651(MultiSelectArrowButton, { fillMode: "outline", placeholder: "multiSelect with arrow button" }) }),
-    ["normal", ...MultiSelect.states].map((state) => /* @__PURE__ */ jsxs341(Fragment133, { children: [
-      /* @__PURE__ */ jsx651("div", { children: state }),
-      /* @__PURE__ */ jsx651("div", { children: /* @__PURE__ */ jsx651(MultiSelectValue, { ...{ [state]: true }, fillMode: "outline", children: state }) }),
-      /* @__PURE__ */ jsx651("div", { dir: "rtl", children: /* @__PURE__ */ jsx651(MultiSelectValue, { ...{ [state]: true }, fillMode: "outline", children: state }) })
+var multiselect_outline_default = () => /* @__PURE__ */ jsxs352(Fragment142, { children: [
+  /* @__PURE__ */ jsx668("style", { children: styles }),
+  /* @__PURE__ */ jsxs352("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ jsx668("span", {}),
+    /* @__PURE__ */ jsx668("span", { children: "MultiSelect Outline" }),
+    /* @__PURE__ */ jsx668("span", { children: "MultiSelect Outline RTL" }),
+    /* @__PURE__ */ jsx668("div", { children: "placeholder" }),
+    /* @__PURE__ */ jsx668("div", { children: /* @__PURE__ */ jsx668(MultiSelectNormal, { fillMode: "outline", placeholder: "placeholder..." }) }),
+    /* @__PURE__ */ jsx668("div", { dir: "rtl", children: /* @__PURE__ */ jsx668(MultiSelectNormal, { fillMode: "outline", placeholder: "placeholder..." }) }),
+    /* @__PURE__ */ jsx668("div", { children: "arrow button" }),
+    /* @__PURE__ */ jsx668("div", { children: /* @__PURE__ */ jsx668(MultiSelectArrowButton, { fillMode: "outline", placeholder: "multiSelect with arrow button" }) }),
+    /* @__PURE__ */ jsx668("div", { dir: "rtl", children: /* @__PURE__ */ jsx668(MultiSelectArrowButton, { fillMode: "outline", placeholder: "multiSelect with arrow button" }) }),
+    ["normal", ...MultiSelect.states].map((state) => /* @__PURE__ */ jsxs352(Fragment142, { children: [
+      /* @__PURE__ */ jsx668("div", { children: state }),
+      /* @__PURE__ */ jsx668("div", { children: /* @__PURE__ */ jsx668(MultiSelectValue, { ...{ [state]: true }, fillMode: "outline", children: state }) }),
+      /* @__PURE__ */ jsx668("div", { dir: "rtl", children: /* @__PURE__ */ jsx668(MultiSelectValue, { ...{ [state]: true }, fillMode: "outline", children: state }) })
     ] })),
-    /* @__PURE__ */ jsx651("div", { children: "invalid + focus" }),
-    /* @__PURE__ */ jsx651("div", { children: /* @__PURE__ */ jsx651(MultiSelectValue, { fillMode: "outline", invalid: true, focus: true, children: "invalid + focus" }) }),
-    /* @__PURE__ */ jsx651("div", { dir: "rtl", children: /* @__PURE__ */ jsx651(MultiSelectValue, { fillMode: "outline", invalid: true, focus: true, children: "invalid + focus" }) }),
-    /* @__PURE__ */ jsx651("div", { children: "valid + focus" }),
-    /* @__PURE__ */ jsx651("div", { children: /* @__PURE__ */ jsx651(MultiSelectValue, { fillMode: "outline", valid: true, focus: true, children: "valid + focus" }) }),
-    /* @__PURE__ */ jsx651("div", { dir: "rtl", children: /* @__PURE__ */ jsx651(MultiSelectValue, { fillMode: "outline", valid: true, focus: true, children: "valid + focus" }) }),
-    /* @__PURE__ */ jsx651("div", { children: "multi line + overflow" }),
-    /* @__PURE__ */ jsx651("div", { children: /* @__PURE__ */ jsx651(
+    /* @__PURE__ */ jsx668("div", { children: "invalid + focus" }),
+    /* @__PURE__ */ jsx668("div", { children: /* @__PURE__ */ jsx668(MultiSelectValue, { fillMode: "outline", invalid: true, focus: true, children: "invalid + focus" }) }),
+    /* @__PURE__ */ jsx668("div", { dir: "rtl", children: /* @__PURE__ */ jsx668(MultiSelectValue, { fillMode: "outline", invalid: true, focus: true, children: "invalid + focus" }) }),
+    /* @__PURE__ */ jsx668("div", { children: "valid + focus" }),
+    /* @__PURE__ */ jsx668("div", { children: /* @__PURE__ */ jsx668(MultiSelectValue, { fillMode: "outline", valid: true, focus: true, children: "valid + focus" }) }),
+    /* @__PURE__ */ jsx668("div", { dir: "rtl", children: /* @__PURE__ */ jsx668(MultiSelectValue, { fillMode: "outline", valid: true, focus: true, children: "valid + focus" }) }),
+    /* @__PURE__ */ jsx668("div", { children: "multi line + overflow" }),
+    /* @__PURE__ */ jsx668("div", { children: /* @__PURE__ */ jsx668(
       MultiSelectNormal,
       {
         fillMode: "outline",
-        tags: /* @__PURE__ */ jsxs341(Fragment133, { children: [
-          /* @__PURE__ */ jsx651(Chip, { text: "multi-line", actions: /* @__PURE__ */ jsx651(ChipAction, { type: "remove" }) }),
-          /* @__PURE__ */ jsx651(Chip, { text: "multi-line + overflow with a very very very long text", actions: /* @__PURE__ */ jsx651(ChipAction, { type: "remove" }) })
+        tags: /* @__PURE__ */ jsxs352(Fragment142, { children: [
+          /* @__PURE__ */ jsx668(Chip, { text: "multi-line", actions: /* @__PURE__ */ jsx668(ChipAction, { type: "remove" }) }),
+          /* @__PURE__ */ jsx668(Chip, { text: "multi-line + overflow with a very very very long text", actions: /* @__PURE__ */ jsx668(ChipAction, { type: "remove" }) })
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsx651("div", { dir: "rtl", children: /* @__PURE__ */ jsx651(
+    /* @__PURE__ */ jsx668("div", { dir: "rtl", children: /* @__PURE__ */ jsx668(
       MultiSelectNormal,
       {
         fillMode: "outline",
-        tags: /* @__PURE__ */ jsxs341(Fragment133, { children: [
-          /* @__PURE__ */ jsx651(Chip, { text: "multi-line", actions: /* @__PURE__ */ jsx651(ChipAction, { type: "remove" }) }),
-          /* @__PURE__ */ jsx651(Chip, { text: "multi-line + overflow with a very very very long text", actions: /* @__PURE__ */ jsx651(ChipAction, { type: "remove" }) })
+        tags: /* @__PURE__ */ jsxs352(Fragment142, { children: [
+          /* @__PURE__ */ jsx668(Chip, { text: "multi-line", actions: /* @__PURE__ */ jsx668(ChipAction, { type: "remove" }) }),
+          /* @__PURE__ */ jsx668(Chip, { text: "multi-line + overflow with a very very very long text", actions: /* @__PURE__ */ jsx668(ChipAction, { type: "remove" }) })
         ] })
       }
     ) })