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

package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js

@@ -6979,6 +6979,48 @@ var import_jsx_runtime105 = require("react/jsx-runtime");
 
 // src/form/templates/form-normal.tsx
 var import_jsx_runtime106 = require("react/jsx-runtime");
+var FormNormal = ({ size, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  Form,
+  {
+    formButtons: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { className: "k-form-submit", themeColor: "primary", size, children: "Submit" }),
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Button, { className: "k-form-clear", size, children: "Clear" })
+    ] }),
+    children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(Fieldset, { legend: "Form Legend", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(FormField, { label: "Label", editor: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Textbox, { size }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+        FormField,
+        {
+          label: "Label",
+          hint: "Hint text",
+          editor: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(DropdownList, { value: "Dropdown List", size })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+        FormField,
+        {
+          label: "City",
+          editor: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("ul", { className: "k-radio-list k-list-horizontal", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RadioButton, { checked: true, size }),
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("label", { className: "k-radio-label", children: "Label" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RadioButton, { size }),
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("label", { className: "k-radio-label", children: "Label" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("li", { className: "k-radio-list-item", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(RadioButton, { size }),
+              /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("label", { className: "k-radio-label", children: "Label" })
+            ] })
+          ] })
+        }
+      )
+    ] }),
+    size,
+    ...other
+  }
+);
 
 // src/form/templates/form-horizontal.tsx
 var import_jsx_runtime107 = require("react/jsx-runtime");
@@ -13614,15 +13656,272 @@ var import_jsx_runtime343 = require("react/jsx-runtime");
 // src/pager/templates/pager-adaptive-input.tsx
 var import_jsx_runtime344 = require("react/jsx-runtime");
 
-// src/card/card-callout.tsx
+// src/stepper/stepper.spec.tsx
 var import_jsx_runtime345 = require("react/jsx-runtime");
+var STEPPER_CLASSNAME = "k-stepper";
+var states113 = [];
+var options104 = {};
+var defaultProps103 = {};
+var Stepper = (props) => {
+  const {
+    style,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+    "nav",
+    {
+      ...other,
+      style,
+      className: classNames(
+        props.className,
+        STEPPER_CLASSNAME
+      ),
+      children: props.children
+    }
+  );
+};
+Stepper.options = options104;
+Stepper.states = states113;
+Stepper.className = STEPPER_CLASSNAME;
+Stepper.defaultProps = defaultProps103;
+
+// src/stepper/step-list.tsx
+var import_jsx_runtime346 = require("react/jsx-runtime");
+var STEPLIST_CLASSNAME = "k-step-list";
+var states114 = [];
+var options105 = {};
+var defaultProps104 = {
+  orientation: "horizontal"
+};
+var StepList = (props) => {
+  const {
+    style,
+    orientation = defaultProps104.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(
+    "ol",
+    {
+      ...other,
+      style,
+      className: classNames(
+        props.className,
+        STEPLIST_CLASSNAME,
+        {
+          [`${STEPLIST_CLASSNAME}-${orientation}`]: orientation
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+StepList.options = options105;
+StepList.states = states114;
+StepList.className = STEPLIST_CLASSNAME;
+StepList.defaultProps = defaultProps104;
+
+// src/stepper/step.tsx
+var import_jsx_runtime347 = require("react/jsx-runtime");
+var STEP_CLASSNAME = "k-step";
+var states115 = [
+  States.disabled,
+  States.hover,
+  States.focus,
+  States.invalid,
+  States.valid
+];
+var options106 = {};
+var defaultProps105 = {};
+var Step = (props) => {
+  const {
+    style,
+    disabled,
+    hover,
+    focus,
+    invalid,
+    valid,
+    optional,
+    first,
+    done,
+    current,
+    last,
+    label,
+    text,
+    icon,
+    stepContent,
+    ...other
+  } = props;
+  const iconName = invalid ? "warning-circle" : "check-circle";
+  const renderValidationIcon = Boolean(valid || invalid);
+  return /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)(
+    "li",
+    {
+      ...other,
+      style,
+      className: classNames(
+        props.className,
+        STEP_CLASSNAME,
+        {
+          [`${STEP_CLASSNAME}-done`]: done,
+          [`${STEP_CLASSNAME}-first`]: first,
+          [`${STEP_CLASSNAME}-current`]: current,
+          [`${STEP_CLASSNAME}-last`]: last,
+          [`${STEP_CLASSNAME}-optional`]: optional,
+          [`${STEP_CLASSNAME}-success`]: valid,
+          [`${STEP_CLASSNAME}-error`]: invalid
+        },
+        stateClassNames(STEP_CLASSNAME, { hover, focus, disabled })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("a", { href: "#", className: "k-step-link", children: [
+          text && !icon && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "k-step-indicator-text", children: text }) }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "k-step-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Icon, { className: "k-step-indicator-icon", icon }) }),
+          optional && !label && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "k-step-label", children: /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" }) }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime347.jsxs)("span", { className: "k-step-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "k-step-text", children: label }),
+            renderValidationIcon && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(Icon, { icon: iconName }),
+            optional && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("span", { className: "k-step-label-optional", children: "(Optional)" })
+          ] })
+        ] }),
+        stepContent && /* @__PURE__ */ (0, import_jsx_runtime347.jsx)("div", { className: "k-step-content", style: { height: "140px" }, children: stepContent })
+      ]
+    }
+  );
+};
+Step.options = options106;
+Step.states = states115;
+Step.className = STEP_CLASSNAME;
+Step.defaultProps = defaultProps105;
+
+// src/stepper/templates/stepper-normal.tsx
+var import_jsx_runtime348 = require("react/jsx-runtime");
+
+// src/stepper/templates/stepper-vertical.tsx
+var import_jsx_runtime349 = require("react/jsx-runtime");
+
+// src/wizard/wizard.spec.tsx
+var import_jsx_runtime350 = require("react/jsx-runtime");
+var WIZZARD_CLASSNAME = `k-wizard`;
+var states116 = [
+  States.disabled
+];
+var options107 = {};
+var defaultProps106 = {
+  orientation: "horizontal",
+  contentPosition: "right"
+};
+var Wizard = (props) => {
+  const {
+    disabled,
+    orientation = defaultProps106.orientation,
+    contentPosition = defaultProps106.contentPosition,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        WIZZARD_CLASSNAME,
+        stateClassNames(WIZZARD_CLASSNAME, { disabled }),
+        {
+          [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+Wizard.states = states116;
+Wizard.options = options107;
+Wizard.className = WIZZARD_CLASSNAME;
+Wizard.defaultProps = defaultProps106;
+
+// src/wizard/wizard-step.tsx
+var import_jsx_runtime351 = require("react/jsx-runtime");
+var WIZZARDSTEP_CLASSNAME = `k-wizard-step`;
+var states117 = [
+  States.focus
+];
+var options108 = {};
+var defaultProps107 = {
+  buttons: /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(import_jsx_runtime351.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("span", { className: "k-wizard-buttons-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { children: "Reset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("span", { className: "k-wizard-pager", children: "Step 1 of 2" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)("span", { className: "k-wizard-buttons-right", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { children: "Previous" }),
+      /* @__PURE__ */ (0, import_jsx_runtime351.jsx)(Button, { themeColor: "primary", children: "Next" })
+    ] })
+  ] })
+};
+var WizardStep = (props) => {
+  const {
+    focus,
+    buttons,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime351.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        WIZZARDSTEP_CLASSNAME,
+        stateClassNames(WIZZARDSTEP_CLASSNAME, { focus })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "k-wizard-content", children: props.children }),
+        buttons && /* @__PURE__ */ (0, import_jsx_runtime351.jsx)("div", { className: "k-wizard-buttons", children: buttons })
+      ]
+    }
+  );
+};
+WizardStep.states = states117;
+WizardStep.options = options108;
+WizardStep.className = WIZZARDSTEP_CLASSNAME;
+WizardStep.defaultProps = defaultProps107;
+
+// src/wizard/wizard-steps.tsx
+var import_jsx_runtime352 = require("react/jsx-runtime");
+var WIZZARDSTEPS_CLASSNAME = `k-wizard-steps`;
+var states118 = [];
+var options109 = {};
+var defaultProps108 = {};
+var WizardSteps = (props) => /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      WIZZARDSTEPS_CLASSNAME
+    ),
+    children: props.children
+  }
+);
+WizardSteps.states = states118;
+WizardSteps.options = options109;
+WizardSteps.className = WIZZARDSTEPS_CLASSNAME;
+WizardSteps.defaultProps = defaultProps108;
+
+// src/wizard/templates/wizard-normal.tsx
+var import_jsx_runtime353 = require("react/jsx-runtime");
+
+// src/wizard/templates/wizard-vertical.tsx
+var import_jsx_runtime354 = require("react/jsx-runtime");
+
+// src/card/card-callout.tsx
+var import_jsx_runtime355 = require("react/jsx-runtime");
 var CARDCALLOUT_CLASSNAME = `k-card-callout`;
 var CardCallout = (props) => {
   const {
     callout,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime345.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime355.jsx)(
     "span",
     {
       ...other,
@@ -13638,15 +13937,15 @@ var CardCallout = (props) => {
 };
 
 // src/card/card.spec.tsx
-var import_jsx_runtime346 = require("react/jsx-runtime");
+var import_jsx_runtime356 = require("react/jsx-runtime");
 var CARD_CLASSNAME = `k-card`;
-var states113 = [
+var states119 = [
   States.hover,
   States.focus,
   States.selected,
   States.disabled
 ];
-var options104 = {
+var options110 = {
   themeColor: [
     ThemeColor.primary,
     ThemeColor.success,
@@ -13655,7 +13954,7 @@ var options104 = {
     ThemeColor.info
   ]
 };
-var defaultProps103 = {};
+var defaultProps109 = {};
 var Card = (props) => {
   const {
     orientation,
@@ -13667,7 +13966,7 @@ var Card = (props) => {
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime346.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)(
     "div",
     {
       ...other,
@@ -13689,21 +13988,21 @@ var Card = (props) => {
         }
       ),
       children: [
-        callout && callout !== "true" && /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(CardCallout, { callout }),
-        /* @__PURE__ */ (0, import_jsx_runtime346.jsx)(import_jsx_runtime346.Fragment, { children: props.children })
+        callout && callout !== "true" && /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(CardCallout, { callout }),
+        /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(import_jsx_runtime356.Fragment, { children: props.children })
       ]
     }
   );
 };
-Card.states = states113;
-Card.options = options104;
+Card.states = states119;
+Card.options = options110;
 Card.className = CARD_CLASSNAME;
-Card.defaultProps = defaultProps103;
+Card.defaultProps = defaultProps109;
 
 // src/card/card-title.tsx
-var import_jsx_runtime347 = require("react/jsx-runtime");
+var import_jsx_runtime357 = require("react/jsx-runtime");
 var CARDTITLE_CLASSNAME = `k-card-title`;
-var states114 = [
+var states120 = [
   States.hover,
   States.focus
 ];
@@ -13713,7 +14012,7 @@ var CardTitle = (props) => {
     focus,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime347.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime357.jsx)(
     "div",
     {
       ...other,
@@ -13731,13 +14030,13 @@ var CardTitle = (props) => {
 };
 
 // src/card/card-subtitle.tsx
-var import_jsx_runtime348 = require("react/jsx-runtime");
+var import_jsx_runtime358 = require("react/jsx-runtime");
 var CARDSUBTITLE_CLASSNAME = `k-card-subtitle`;
 var CardSubtitle = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime348.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime358.jsx)(
     "div",
     {
       ...other,
@@ -13751,10 +14050,10 @@ var CardSubtitle = (props) => {
 };
 
 // src/card/card-media.tsx
-var import_jsx_runtime349 = require("react/jsx-runtime");
+var import_jsx_runtime359 = require("react/jsx-runtime");
 
 // src/card/card-header.tsx
-var import_jsx_runtime350 = require("react/jsx-runtime");
+var import_jsx_runtime360 = require("react/jsx-runtime");
 var CARDHEADER_CLASSNAME = `k-card-header`;
 var CardHeader = (props) => {
   const {
@@ -13763,7 +14062,7 @@ var CardHeader = (props) => {
     details,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime350.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)(
     "div",
     {
       ...other,
@@ -13772,10 +14071,10 @@ var CardHeader = (props) => {
         CARDHEADER_CLASSNAME
       ),
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(import_jsx_runtime350.Fragment, { children: props.children }),
-        details && /* @__PURE__ */ (0, import_jsx_runtime350.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime350.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(import_jsx_runtime360.Fragment, { children: props.children }),
+        details && /* @__PURE__ */ (0, import_jsx_runtime360.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(
           Button,
           {
             className: "k-card-details",
@@ -13792,10 +14091,10 @@ var CardHeader = (props) => {
 };
 
 // src/card/card-footer.tsx
-var import_jsx_runtime351 = require("react/jsx-runtime");
+var import_jsx_runtime361 = require("react/jsx-runtime");
 
 // src/card/card-body.tsx
-var import_jsx_runtime352 = require("react/jsx-runtime");
+var import_jsx_runtime362 = require("react/jsx-runtime");
 var CARDBODY_CLASSNAME = `k-card-body`;
 var CardBody = (props) => {
   const {
@@ -13804,7 +14103,7 @@ var CardBody = (props) => {
     details,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime352.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime362.jsxs)(
     "div",
     {
       ...other,
@@ -13813,10 +14112,10 @@ var CardBody = (props) => {
         CARDBODY_CLASSNAME
       ),
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(CardTitle, { children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(CardSubtitle, { children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(import_jsx_runtime352.Fragment, { children: props.children }),
-        details && /* @__PURE__ */ (0, import_jsx_runtime352.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime352.jsx)(
+        title && /* @__PURE__ */ (0, import_jsx_runtime362.jsx)(CardTitle, { children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime362.jsx)(CardSubtitle, { children: subtitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime362.jsx)(import_jsx_runtime362.Fragment, { children: props.children }),
+        details && /* @__PURE__ */ (0, import_jsx_runtime362.jsx)("span", { className: "k-card-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime362.jsx)(
           Button,
           {
             className: "k-card-details",
@@ -13833,24 +14132,24 @@ var CardBody = (props) => {
 };
 
 // src/card/card-deck.tsx
-var import_jsx_runtime353 = require("react/jsx-runtime");
+var import_jsx_runtime363 = require("react/jsx-runtime");
 
 // src/card/templates/card-normal.tsx
-var import_jsx_runtime354 = require("react/jsx-runtime");
+var import_jsx_runtime364 = require("react/jsx-runtime");
 
 // src/card/templates/card-horizontal.tsx
-var import_jsx_runtime355 = require("react/jsx-runtime");
+var import_jsx_runtime365 = require("react/jsx-runtime");
 
 // src/expansion-panel/expansion-panel.spec.tsx
-var import_jsx_runtime356 = require("react/jsx-runtime");
+var import_jsx_runtime366 = require("react/jsx-runtime");
 var EXPANSION_PANEL_CLASSNAME = "k-expander";
-var states115 = [
+var states121 = [
   States.hover,
   States.focus,
   States.disabled
 ];
-var options105 = {};
-var defaultProps104 = {};
+var options111 = {};
+var defaultProps110 = {};
 var ExpansionPanel = (props) => {
   const {
     title,
@@ -13862,7 +14161,7 @@ var ExpansionPanel = (props) => {
     dir,
     contentStyle
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)("div", { className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)("div", { className: classNames(
     props.className,
     EXPANSION_PANEL_CLASSNAME,
     stateClassNames(EXPANSION_PANEL_CLASSNAME, {
@@ -13874,42 +14173,42 @@ var ExpansionPanel = (props) => {
       "k-expanded": expanded
     }
   ), dir, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime356.jsxs)("div", { className: classNames(
+    /* @__PURE__ */ (0, import_jsx_runtime366.jsxs)("div", { className: classNames(
       "k-expander-header",
       stateClassNames(EXPANSION_PANEL_CLASSNAME, {
         hover
       })
     ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { className: "k-expander-title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("span", { className: "k-spacer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { className: "k-expander-sub-title", children: subtitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("span", { className: "k-expander-indicator", children: !expanded ? /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(Icon, { icon: "chevron-down" }) : /* @__PURE__ */ (0, import_jsx_runtime356.jsx)(Icon, { icon: "chevron-up" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("div", { className: "k-expander-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("span", { className: "k-spacer" }),
+      /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("div", { className: "k-expander-sub-title", children: subtitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("span", { className: "k-expander-indicator", children: !expanded ? /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(Icon, { icon: "chevron-down" }) : /* @__PURE__ */ (0, import_jsx_runtime366.jsx)(Icon, { icon: "chevron-up" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { className: classNames(
+    /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("div", { className: classNames(
       "k-expander-content-wrapper",
       {
         "k-d-none": !expanded
       }
-    ), children: /* @__PURE__ */ (0, import_jsx_runtime356.jsx)("div", { className: "k-expander-content", style: contentStyle, children: props.children }) })
+    ), children: /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("div", { className: "k-expander-content", style: contentStyle, children: props.children }) })
   ] });
 };
-ExpansionPanel.states = states115;
-ExpansionPanel.options = options105;
+ExpansionPanel.states = states121;
+ExpansionPanel.options = options111;
 ExpansionPanel.className = EXPANSION_PANEL_CLASSNAME;
-ExpansionPanel.defaultProps = defaultProps104;
+ExpansionPanel.defaultProps = defaultProps110;
 
 // src/expansion-panel/templates/expansion-panel-normal.tsx
-var import_jsx_runtime357 = require("react/jsx-runtime");
+var import_jsx_runtime367 = require("react/jsx-runtime");
 
 // src/expansion-panel/templates/expansion-panel-expanded.tsx
-var import_jsx_runtime358 = require("react/jsx-runtime");
+var import_jsx_runtime368 = require("react/jsx-runtime");
 
 // src/splitter/splitter-pane.tsx
-var import_jsx_runtime359 = require("react/jsx-runtime");
+var import_jsx_runtime369 = require("react/jsx-runtime");
 var SPLITTERPANE_CLASSNAME = "k-pane";
-var states116 = [];
-var options106 = {};
-var defaultProps105 = {
+var states122 = [];
+var options112 = {};
+var defaultProps111 = {
   resizable: true,
   flex: false
 };
@@ -13920,7 +14219,7 @@ var SplitterPane = (props) => {
     flex,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime359.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime369.jsx)(
     "div",
     {
       ...other,
@@ -13938,21 +14237,21 @@ var SplitterPane = (props) => {
     }
   );
 };
-SplitterPane.states = states116;
-SplitterPane.options = options106;
+SplitterPane.states = states122;
+SplitterPane.options = options112;
 SplitterPane.className = SPLITTERPANE_CLASSNAME;
-SplitterPane.defaultProps = defaultProps105;
+SplitterPane.defaultProps = defaultProps111;
 var splitter_pane_default = SplitterPane;
 
 // src/splitter/splitter-splitbar.tsx
-var import_jsx_runtime360 = require("react/jsx-runtime");
+var import_jsx_runtime370 = require("react/jsx-runtime");
 var SPLITTERSPLITBAR_CLASSNAME = "k-splitbar";
-var states117 = [
+var states123 = [
   States.hover,
   States.focus
 ];
-var options107 = {};
-var defaultProps106 = {
+var options113 = {};
+var defaultProps112 = {
   orientation: "horizontal",
   draggable: true
 };
@@ -13966,7 +14265,7 @@ var SplitterSplitbar = (props) => {
     collapseNext,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime360.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime370.jsxs)(
     "div",
     {
       ...other,
@@ -13984,25 +14283,25 @@ var SplitterSplitbar = (props) => {
         }
       ),
       children: [
-        collapsePrev && /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(import_jsx_runtime360.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime360.jsx)("div", { className: "k-collapse-prev", children: /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "left" : "up"}`, size: "xsmall" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime360.jsx)("div", { className: "k-resize-handle" }),
-        collapseNext && /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(import_jsx_runtime360.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime360.jsx)("div", { className: "k-collapse-next", children: /* @__PURE__ */ (0, import_jsx_runtime360.jsx)(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "right" : "down"}`, size: "xsmall" }) }) })
+        collapsePrev && /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(import_jsx_runtime370.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime370.jsx)("div", { className: "k-collapse-prev", children: /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "left" : "up"}`, size: "xsmall" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime370.jsx)("div", { className: "k-resize-handle" }),
+        collapseNext && /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(import_jsx_runtime370.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime370.jsx)("div", { className: "k-collapse-next", children: /* @__PURE__ */ (0, import_jsx_runtime370.jsx)(Icon, { icon: `caret-alt-${orientation === "horizontal" ? "right" : "down"}`, size: "xsmall" }) }) })
       ]
     }
   );
 };
-SplitterSplitbar.states = states117;
-SplitterSplitbar.options = options107;
+SplitterSplitbar.states = states123;
+SplitterSplitbar.options = options113;
 SplitterSplitbar.className = SPLITTERSPLITBAR_CLASSNAME;
-SplitterSplitbar.defaultProps = defaultProps106;
+SplitterSplitbar.defaultProps = defaultProps112;
 var splitter_splitbar_default = SplitterSplitbar;
 
 // src/splitter/splitter.spec.tsx
-var import_jsx_runtime361 = require("react/jsx-runtime");
+var import_jsx_runtime371 = require("react/jsx-runtime");
 var import_react6 = require("react");
 var SPLITTER_CLASSNAME = "k-splitter";
-var options108 = {};
-var defaultProps107 = {
+var options114 = {};
+var defaultProps113 = {
   orientation: "horizontal"
 };
 var Splitter = (props) => {
@@ -14018,7 +14317,7 @@ var Splitter = (props) => {
         if (child.type === splitter_pane_default) {
           listChildren.push(
             /* @__PURE__ */ (0, import_react6.createElement)(splitter_pane_default, { ...child.props, key: index }),
-            children[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime361.jsx)(import_jsx_runtime361.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime361.jsx)(
+            children[index + 1] && /* @__PURE__ */ (0, import_jsx_runtime371.jsx)(import_jsx_runtime371.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime371.jsx)(
               splitter_splitbar_default,
               {
                 draggable: child.props.resizable !== false && children[index + 1].props.resizable !== false,
@@ -14034,7 +14333,7 @@ var Splitter = (props) => {
       });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime361.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime371.jsx)(
     "div",
     {
       ...other,
@@ -14050,22 +14349,22 @@ var Splitter = (props) => {
     }
   );
 };
-Splitter.options = options108;
+Splitter.options = options114;
 Splitter.className = SPLITTER_CLASSNAME;
-Splitter.defaultProps = defaultProps107;
+Splitter.defaultProps = defaultProps113;
 
 // src/splitter/templates/splitter-normal.tsx
-var import_jsx_runtime362 = require("react/jsx-runtime");
+var import_jsx_runtime372 = require("react/jsx-runtime");
 
 // src/splitter/templates/splitter-vertical.tsx
-var import_jsx_runtime363 = require("react/jsx-runtime");
+var import_jsx_runtime373 = require("react/jsx-runtime");
 
 // src/tilelayout/tilelayout.spec.tsx
-var import_jsx_runtime364 = require("react/jsx-runtime");
+var import_jsx_runtime374 = require("react/jsx-runtime");
 var TILELAYOUT_CLASSNAME = `k-tilelayout`;
-var states118 = [];
-var options109 = {};
-var defaultProps108 = {};
+var states124 = [];
+var options115 = {};
+var defaultProps114 = {};
 var TileLayout = (props) => {
   const {
     gap,
@@ -14081,7 +14380,7 @@ var TileLayout = (props) => {
     gap,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime364.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime374.jsx)(
     "div",
     {
       className: classNames(
@@ -14093,20 +14392,20 @@ var TileLayout = (props) => {
     }
   );
 };
-TileLayout.states = states118;
-TileLayout.options = options109;
+TileLayout.states = states124;
+TileLayout.options = options115;
 TileLayout.className = TILELAYOUT_CLASSNAME;
-TileLayout.defaultProps = defaultProps108;
+TileLayout.defaultProps = defaultProps114;
 
 // src/tilelayout/tilelayout-item.spec.tsx
 var import_react7 = __toESM(require("react"));
-var import_jsx_runtime365 = require("react/jsx-runtime");
+var import_jsx_runtime375 = require("react/jsx-runtime");
 var TILELAYOUTITEM_CLASSNAME = `k-tilelayout-item`;
-var states119 = [
+var states125 = [
   States.focus
 ];
-var options110 = {};
-var defaultProps109 = {};
+var options116 = {};
+var defaultProps115 = {};
 var TileLayoutItem = (props) => {
   const {
     header,
@@ -14115,7 +14414,7 @@ var TileLayoutItem = (props) => {
     resize,
     style
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime365.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime375.jsxs)(
     Card,
     {
       className: classNames(
@@ -14132,49 +14431,49 @@ var TileLayoutItem = (props) => {
       ),
       style,
       children: [
-        header && import_react7.default.isValidElement(header) ? /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", children: header }) : /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", title: header }),
-        body && /* @__PURE__ */ (0, import_jsx_runtime365.jsx)(CardBody, { className: "k-tilelayout-item-body", children: body })
+        header && import_react7.default.isValidElement(header) ? /* @__PURE__ */ (0, import_jsx_runtime375.jsx)(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", children: header }) : /* @__PURE__ */ (0, import_jsx_runtime375.jsx)(CardHeader, { className: "k-tilelayout-item-header k-cursor-move", title: header }),
+        body && /* @__PURE__ */ (0, import_jsx_runtime375.jsx)(CardBody, { className: "k-tilelayout-item-body", children: body })
       ]
     }
   );
 };
-TileLayoutItem.states = states119;
-TileLayoutItem.options = options110;
+TileLayoutItem.states = states125;
+TileLayoutItem.options = options116;
 TileLayoutItem.className = TILELAYOUTITEM_CLASSNAME;
-TileLayoutItem.defaultProps = defaultProps109;
+TileLayoutItem.defaultProps = defaultProps115;
 
 // src/tilelayout/tilelayout-item-hint.spec.tsx
-var import_jsx_runtime366 = require("react/jsx-runtime");
+var import_jsx_runtime376 = require("react/jsx-runtime");
 var TILELAYOUTITEMHINT_CLASSNAME = `k-layout-item-hint`;
-var states120 = [];
-var options111 = {};
-var defaultProps110 = {};
+var states126 = [];
+var options117 = {};
+var defaultProps116 = {};
 var TileLayoutItemHint = (props) => {
   const { style } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime366.jsx)("div", { className: TILELAYOUTITEMHINT_CLASSNAME, style });
+  return /* @__PURE__ */ (0, import_jsx_runtime376.jsx)("div", { className: TILELAYOUTITEMHINT_CLASSNAME, style });
 };
-TileLayoutItemHint.states = states120;
-TileLayoutItemHint.options = options111;
+TileLayoutItemHint.states = states126;
+TileLayoutItemHint.options = options117;
 TileLayoutItemHint.className = TILELAYOUTITEMHINT_CLASSNAME;
-TileLayoutItemHint.defaultProps = defaultProps110;
+TileLayoutItemHint.defaultProps = defaultProps116;
 
 // src/tilelayout/templates/tilelayout-normal.tsx
-var import_jsx_runtime367 = require("react/jsx-runtime");
+var import_jsx_runtime377 = require("react/jsx-runtime");
 
 // src/grid/grid.spec.tsx
-var import_jsx_runtime368 = require("react/jsx-runtime");
+var import_jsx_runtime378 = require("react/jsx-runtime");
 var GRID_CLASSNAME = "k-grid";
-var states121 = [];
-var options112 = {
+var states127 = [];
+var options118 = {
   size: [Size.small, Size.medium, Size.large]
 };
-var defaultProps111 = {
+var defaultProps117 = {
   size: Size.medium,
   pagerPosition: "bottom"
 };
 var Grid = (props) => {
   const {
-    size = defaultProps111.size,
+    size = defaultProps117.size,
     toolbar,
     pager,
     pagerPosition,
@@ -14182,7 +14481,7 @@ var Grid = (props) => {
     _renderAriaRoot,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime368.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime378.jsxs)(
     "div",
     {
       ...other,
@@ -14195,64 +14494,64 @@ var Grid = (props) => {
         toolbar,
         pagerPosition === "top" && pager,
         groupingHeader,
-        props.children && _renderAriaRoot ? /* @__PURE__ */ (0, import_jsx_runtime368.jsx)("div", { className: "k-grid-aria-root", children: props.children }) : props.children,
+        props.children && _renderAriaRoot ? /* @__PURE__ */ (0, import_jsx_runtime378.jsx)("div", { className: "k-grid-aria-root", children: props.children }) : props.children,
         pagerPosition === "bottom" && pager
       ]
     }
   );
 };
-Grid.states = states121;
-Grid.options = options112;
+Grid.states = states127;
+Grid.options = options118;
 Grid.className = GRID_CLASSNAME;
-Grid.defaultProps = defaultProps111;
+Grid.defaultProps = defaultProps117;
 
 // src/grid/grid-header.spec.tsx
-var import_jsx_runtime369 = require("react/jsx-runtime");
+var import_jsx_runtime379 = require("react/jsx-runtime");
 
 // src/grid/grid-grouping-header.spec.tsx
-var import_jsx_runtime370 = require("react/jsx-runtime");
+var import_jsx_runtime380 = require("react/jsx-runtime");
 
 // src/grid/grid-header-table.spec.tsx
-var import_jsx_runtime371 = require("react/jsx-runtime");
+var import_jsx_runtime381 = require("react/jsx-runtime");
 
 // src/grid/grid-header-cell.spec.tsx
-var import_jsx_runtime372 = require("react/jsx-runtime");
-var states122 = [
+var import_jsx_runtime382 = require("react/jsx-runtime");
+var states128 = [
   States.hover,
   States.focus,
   States.active
 ];
 
 // src/grid/grid-container.spec.tsx
-var import_jsx_runtime373 = require("react/jsx-runtime");
+var import_jsx_runtime383 = require("react/jsx-runtime");
 
 // src/grid/grid-content.spec.tsx
-var import_jsx_runtime374 = require("react/jsx-runtime");
+var import_jsx_runtime384 = require("react/jsx-runtime");
 
 // src/grid/grid-table.spec.tsx
-var import_jsx_runtime375 = require("react/jsx-runtime");
+var import_jsx_runtime385 = require("react/jsx-runtime");
 
 // src/grid/grid-footer.spec.tsx
-var import_jsx_runtime376 = require("react/jsx-runtime");
+var import_jsx_runtime386 = require("react/jsx-runtime");
 
 // src/grid/grid-footer-table.spec.tsx
-var import_jsx_runtime377 = require("react/jsx-runtime");
+var import_jsx_runtime387 = require("react/jsx-runtime");
 
 // src/grid/grid-pager.spec.tsx
-var import_jsx_runtime378 = require("react/jsx-runtime");
+var import_jsx_runtime388 = require("react/jsx-runtime");
 
 // src/grid/grid-toolbar.spec.tsx
-var import_jsx_runtime379 = require("react/jsx-runtime");
+var import_jsx_runtime389 = require("react/jsx-runtime");
 
 // src/listview/listview.spec.tsx
-var import_jsx_runtime380 = require("react/jsx-runtime");
+var import_jsx_runtime390 = require("react/jsx-runtime");
 var LISTVIEW_CLASSNAME = `k-listview`;
-var states123 = [
+var states129 = [
   States.loading,
   States.disabled
 ];
-var options113 = {};
-var defaultProps112 = {
+var options119 = {};
+var defaultProps118 = {
   pagerPosition: "bottom",
   layout: "flex",
   flexDirection: "row"
@@ -14262,23 +14561,23 @@ var ListView = (props) => {
     header,
     footer,
     pageable,
-    pagerPosition = defaultProps112.pagerPosition,
+    pagerPosition = defaultProps118.pagerPosition,
     bordered,
-    layout = defaultProps112.layout,
-    flexDirection = defaultProps112.flexDirection,
+    layout = defaultProps118.layout,
+    flexDirection = defaultProps118.flexDirection,
     flexWrap,
     gridColumns,
     loading,
     disabled,
     ...other
   } = props;
-  const pager = /* @__PURE__ */ (0, import_jsx_runtime380.jsx)(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
-  const loader = /* @__PURE__ */ (0, import_jsx_runtime380.jsx)(import_jsx_runtime380.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime380.jsxs)("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime380.jsx)("span", { className: "k-loading-text", children: "Loading..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime380.jsx)("div", { className: "k-loading-image" }),
-    /* @__PURE__ */ (0, import_jsx_runtime380.jsx)("div", { className: "k-loading-color" })
+  const pager = /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Pager, { className: `k-listview-pager k-listview-pager-${pagerPosition}` });
+  const loader = /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(import_jsx_runtime390.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)("div", { className: "k-loading-mask k-opaque", style: { height: "100%", width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("span", { className: "k-loading-text", children: "Loading..." }),
+    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("div", { className: "k-loading-color" })
   ] }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime380.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)(
     "div",
     {
       ...other,
@@ -14295,8 +14594,8 @@ var ListView = (props) => {
       ),
       children: [
         pageable && pagerPosition === "top" && pager,
-        header && /* @__PURE__ */ (0, import_jsx_runtime380.jsx)("div", { className: "k-listview-header", children: "Header" }),
-        /* @__PURE__ */ (0, import_jsx_runtime380.jsxs)("div", { className: classNames(
+        header && /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("div", { className: "k-listview-header", children: "Header" }),
+        /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)("div", { className: classNames(
           "k-listview-content",
           {
             [`k-d-${layout}`]: layout,
@@ -14308,33 +14607,33 @@ var ListView = (props) => {
           loading && loader,
           props.children
         ] }),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime380.jsx)("div", { className: "k-listview-footer", children: "Footer" }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("div", { className: "k-listview-footer", children: "Footer" }),
         pageable && pagerPosition === "bottom" && pager
       ]
     }
   );
 };
-ListView.states = states123;
-ListView.options = options113;
+ListView.states = states129;
+ListView.options = options119;
 ListView.className = LISTVIEW_CLASSNAME;
-ListView.defaultProps = defaultProps112;
+ListView.defaultProps = defaultProps118;
 
 // src/listview/listview-item.spec.tsx
-var import_jsx_runtime381 = require("react/jsx-runtime");
+var import_jsx_runtime391 = require("react/jsx-runtime");
 var LISTVIEWITEM_CLASSNAME = `k-listview-item`;
-var states124 = [
+var states130 = [
   States.focus,
   States.selected
 ];
-var options114 = {};
-var defaultProps113 = {};
+var options120 = {};
+var defaultProps119 = {};
 var ListViewItem = (props) => {
   const {
     focus,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime381.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(
     "div",
     {
       ...other,
@@ -14350,208 +14649,207 @@ var ListViewItem = (props) => {
     }
   );
 };
-ListViewItem.states = states124;
-ListViewItem.options = options114;
+ListViewItem.states = states130;
+ListViewItem.options = options120;
 ListViewItem.className = LISTVIEWITEM_CLASSNAME;
-ListViewItem.defaultProps = defaultProps113;
+ListViewItem.defaultProps = defaultProps119;
 
 // src/listview/templates/listview-normal.tsx
-var import_jsx_runtime382 = require("react/jsx-runtime");
+var import_jsx_runtime392 = require("react/jsx-runtime");
 
 // src/filter/filter-preview.tsx
-var import_jsx_runtime383 = require("react/jsx-runtime");
+var import_jsx_runtime393 = require("react/jsx-runtime");
 var FILTER_PREVIEW_CLASSNAME = "k-filter-preview";
-var states125 = [];
-var options115 = {};
-var defaultProps114 = {};
+var states131 = [];
+var options121 = {};
+var defaultProps120 = {};
 var FilterPreview = (props) => {
   const { fields } = props;
   const expressionPreview = [];
   if (fields) {
     fields.map(({ name, value }) => {
       expressionPreview.push(
-        /* @__PURE__ */ (0, import_jsx_runtime383.jsx)("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
+        /* @__PURE__ */ (0, import_jsx_runtime393.jsx)("span", { className: `k-filter-preview-${name}`, children: `${value} ` })
       );
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime383.jsx)("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
+  return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)("div", { className: classNames(FILTER_PREVIEW_CLASSNAME), children: expressionPreview });
 };
-FilterPreview.states = states125;
-FilterPreview.options = options115;
-FilterPreview.defaultProps = defaultProps114;
+FilterPreview.states = states131;
+FilterPreview.options = options121;
+FilterPreview.defaultProps = defaultProps120;
 FilterPreview.className = FILTER_PREVIEW_CLASSNAME;
 
 // src/filter/filter.spec.tsx
-var import_jsx_runtime384 = require("react/jsx-runtime");
+var import_jsx_runtime394 = require("react/jsx-runtime");
 var FILTER_CLASSNAME = "k-filter";
-var states126 = [];
-var options116 = {};
-var defaultProps115 = {};
+var states132 = [];
+var options122 = {};
+var defaultProps121 = {};
 var Filter = (props) => {
   const {
     children,
     showApplyButton
   } = props;
   const filterChildren = [];
-  let expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime384.jsx)(import_jsx_runtime384.Fragment, {});
+  let expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(import_jsx_runtime394.Fragment, {});
   if (children) {
     if (Array.isArray(children)) {
       children.map((child) => {
         if (child.type !== FilterPreview) {
           filterChildren.push(child);
         } else {
-          expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime384.jsx)(FilterPreview, { ...child.props });
+          expressionPreview = /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(FilterPreview, { ...child.props });
         }
       });
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime384.jsxs)("div", { className: classNames(props.className, FILTER_CLASSNAME), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime384.jsx)("ul", { className: "k-filter-container", children: /* @__PURE__ */ (0, import_jsx_runtime384.jsx)("li", { className: "k-filter-group-main", children: filterChildren }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime394.jsxs)("div", { className: classNames(props.className, FILTER_CLASSNAME), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime394.jsx)("ul", { className: "k-filter-container", children: /* @__PURE__ */ (0, import_jsx_runtime394.jsx)("li", { className: "k-filter-group-main", children: filterChildren }) }),
     expressionPreview,
-    showApplyButton && /* @__PURE__ */ (0, import_jsx_runtime384.jsx)(Button, { className: "k-filter-apply", children: "Apply" })
+    showApplyButton && /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(Button, { className: "k-filter-apply", children: "Apply" })
   ] });
 };
-Filter.states = states126;
-Filter.options = options116;
-Filter.defaultProps = defaultProps115;
+Filter.states = states132;
+Filter.options = options122;
+Filter.defaultProps = defaultProps121;
 Filter.className = FILTER_CLASSNAME;
 
 // src/filter/filter-toolbar.tsx
-var import_jsx_runtime385 = require("react/jsx-runtime");
+var import_jsx_runtime395 = require("react/jsx-runtime");
 var FILTER_TOOLBAR_CLASSNAME = "k-filter-toolbar";
-var states127 = [];
-var options117 = {};
-var defaultProps116 = {};
+var states133 = [];
+var options123 = {};
+var defaultProps122 = {};
 var FilterToolbar = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime385.jsx)("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("div", { className: classNames(FILTER_TOOLBAR_CLASSNAME), children });
 };
-FilterToolbar.states = states127;
-FilterToolbar.options = options117;
-FilterToolbar.defaultProps = defaultProps116;
+FilterToolbar.states = states133;
+FilterToolbar.options = options123;
+FilterToolbar.defaultProps = defaultProps122;
 
 // src/filter/filter-lines.tsx
-var import_jsx_runtime386 = require("react/jsx-runtime");
+var import_jsx_runtime396 = require("react/jsx-runtime");
 var FILTER_LINES_CLASSNAME = "k-filter-lines";
-var states128 = [];
-var options118 = {};
-var defaultProps117 = {};
+var states134 = [];
+var options124 = {};
+var defaultProps123 = {};
 var FilterLines = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime386.jsx)("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime396.jsx)("ul", { className: classNames(FILTER_LINES_CLASSNAME), children });
 };
-FilterLines.states = states128;
-FilterLines.options = options118;
-FilterLines.defaultProps = defaultProps117;
+FilterLines.states = states134;
+FilterLines.options = options124;
+FilterLines.defaultProps = defaultProps123;
 
 // src/filter/filter-item.tsx
-var import_jsx_runtime387 = require("react/jsx-runtime");
+var import_jsx_runtime397 = require("react/jsx-runtime");
 var FILTER_ITEM_CLASSNAME = "k-filter-item";
-var states129 = [];
-var options119 = {};
-var defaultProps118 = {};
+var states135 = [];
+var options125 = {};
+var defaultProps124 = {};
 var FilterItem = (props) => {
   const { children } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime387.jsx)("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime397.jsx)("li", { className: classNames(FILTER_ITEM_CLASSNAME), children });
 };
-FilterItem.states = states129;
-FilterItem.options = options119;
-FilterItem.defaultProps = defaultProps118;
+FilterItem.states = states135;
+FilterItem.options = options125;
+FilterItem.defaultProps = defaultProps124;
 
 // src/filter/templates/filter-normal.tsx
-var import_jsx_runtime388 = require("react/jsx-runtime");
+var import_jsx_runtime398 = require("react/jsx-runtime");
 
 // src/filemanager/filemanager-toolbar.spec.tsx
-var import_jsx_runtime389 = require("react/jsx-runtime");
+var import_jsx_runtime399 = require("react/jsx-runtime");
 var FILEMANAGERTOOLBAR_CLASSNAME = `k-filemanager-toolbar`;
-var states130 = [];
-var options120 = {};
-var defaultProps119 = {};
+var states136 = [];
+var options126 = {};
+var defaultProps125 = {};
 var FileManagerToolbar = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime389.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime399.jsx)(
     Toolbar,
     {
+      ...other,
       className: classNames(
         props.className,
         FILEMANAGERTOOLBAR_CLASSNAME
       ),
-      ...other,
       children
     }
   );
 };
-FileManagerToolbar.states = states130;
-FileManagerToolbar.options = options120;
+FileManagerToolbar.states = states136;
+FileManagerToolbar.options = options126;
 FileManagerToolbar.className = FILEMANAGERTOOLBAR_CLASSNAME;
-FileManagerToolbar.defaultProps = defaultProps119;
-var filemanager_toolbar_spec_default = FileManagerToolbar;
+FileManagerToolbar.defaultProps = defaultProps125;
 
 // src/filemanager/filemanager.spec.tsx
-var import_jsx_runtime390 = require("react/jsx-runtime");
+var import_jsx_runtime400 = require("react/jsx-runtime");
 var FILEMANAGER_CLASSNAME = "k-filemanager";
-var states131 = [
+var states137 = [
   States.disabled
 ];
-var options121 = {};
-var defaultToolbar = /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(import_jsx_runtime390.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)(filemanager_toolbar_spec_default, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Button, { children: "New Folder" }),
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Button, { children: "Upload" }),
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)(ButtonGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Button, { icon: "sort-asc-small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Button, { icon: "sort-desc-small" })
+var options127 = {};
+var defaultToolbar = /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(import_jsx_runtime400.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime400.jsxs)(FileManagerToolbar, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Button, { children: "New Folder" }),
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Button, { children: "Upload" }),
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsxs)(ButtonGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Button, { icon: "sort-asc-small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Button, { icon: "sort-desc-small" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(SplitButton, { text: "Sort By" }),
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)(ButtonGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Button, { icon: "grid-layout" }),
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Button, { icon: "grid" })
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(SplitButton, { text: "Sort By" }),
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsxs)(ButtonGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Button, { icon: "grid-layout" }),
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Button, { icon: "grid" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("div", { className: "k-spacer" }),
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)("div", { className: "k-filemanager-details-toggle", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("label", { children: "View Details" }),
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Switch, {})
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsx)("div", { className: "k-spacer" }),
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsxs)("div", { className: "k-filemanager-details-toggle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)("label", { children: "View Details" }),
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Switch, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime390.jsx)(Searchbox, { className: "k-filemanager-search-tool", placeholder: "Search..." })
+  /* @__PURE__ */ (0, import_jsx_runtime400.jsx)(Searchbox, { className: "k-filemanager-search-tool", placeholder: "Search..." })
 ] }) });
-var defaultProps120 = {
+var defaultProps126 = {
   toolbar: defaultToolbar
 };
 var FileManager = (props) => {
   const {
     disabled,
-    toolbar
+    toolbar = defaultProps126.toolbar
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime390.jsxs)("div", { className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime400.jsxs)("div", { className: classNames(
     props.className,
     FILEMANAGER_CLASSNAME,
     stateClassNames(FILEMANAGER_CLASSNAME, {
       disabled
     })
   ), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("div", { className: "k-filemanager-header", children: toolbar }),
-    /* @__PURE__ */ (0, import_jsx_runtime390.jsx)("div", { className: "k-filemanager-content-container", children: props.children })
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)("div", { className: "k-filemanager-header", children: toolbar }),
+    /* @__PURE__ */ (0, import_jsx_runtime400.jsx)("div", { className: "k-filemanager-content-container", children: props.children })
   ] });
 };
-FileManager.states = states131;
-FileManager.options = options121;
+FileManager.states = states137;
+FileManager.options = options127;
 FileManager.className = FILEMANAGER_CLASSNAME;
-FileManager.defaultProps = defaultProps120;
+FileManager.defaultProps = defaultProps126;
 
 // src/filemanager/filemanager-breadcrumb.spec.tsx
-var import_jsx_runtime391 = require("react/jsx-runtime");
+var import_jsx_runtime401 = require("react/jsx-runtime");
 var FILEMANAGERBREADCRUMB_CLASSNAME = `k-filemanager-breadcrumb`;
-var states132 = [];
-var options122 = {};
-var defaultProps121 = {};
+var states138 = [];
+var options128 = {};
+var defaultProps127 = {};
 var FileManagerBreadcrumb = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime391.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(
     Breadcrumb,
     {
       className: classNames(
@@ -14563,23 +14861,23 @@ var FileManagerBreadcrumb = (props) => {
     }
   );
 };
-FileManagerBreadcrumb.states = states132;
-FileManagerBreadcrumb.options = options122;
+FileManagerBreadcrumb.states = states138;
+FileManagerBreadcrumb.options = options128;
 FileManagerBreadcrumb.className = FILEMANAGERBREADCRUMB_CLASSNAME;
-FileManagerBreadcrumb.defaultProps = defaultProps121;
+FileManagerBreadcrumb.defaultProps = defaultProps127;
 
 // src/filemanager/filemanager-listview.spec.tsx
-var import_jsx_runtime392 = require("react/jsx-runtime");
+var import_jsx_runtime402 = require("react/jsx-runtime");
 var FILEMANAGERLISTVIEW_CLASSNAME = `k-filemanager-listview`;
-var states133 = [];
-var options123 = {};
-var defaultProps122 = {};
+var states139 = [];
+var options129 = {};
+var defaultProps128 = {};
 var FileManagerListView = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime392.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime402.jsx)(
     ListView,
     {
       className: classNames(
@@ -14593,23 +14891,23 @@ var FileManagerListView = (props) => {
     }
   );
 };
-FileManagerListView.states = states133;
-FileManagerListView.options = options123;
+FileManagerListView.states = states139;
+FileManagerListView.options = options129;
 FileManagerListView.className = FILEMANAGERLISTVIEW_CLASSNAME;
-FileManagerListView.defaultProps = defaultProps122;
+FileManagerListView.defaultProps = defaultProps128;
 
 // src/filemanager/filemanager-treeview.spec.tsx
-var import_jsx_runtime393 = require("react/jsx-runtime");
+var import_jsx_runtime403 = require("react/jsx-runtime");
 var FILEMANAGERTREEVIEW_CLASSNAME = `k-filemanager-treeview`;
-var states134 = [];
-var options124 = {};
-var defaultProps123 = {};
+var states140 = [];
+var options130 = {};
+var defaultProps129 = {};
 var FileManagerTreeview = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime393.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime403.jsx)(
     Treeview,
     {
       className: classNames(
@@ -14621,26 +14919,26 @@ var FileManagerTreeview = (props) => {
     }
   );
 };
-FileManagerTreeview.states = states134;
-FileManagerTreeview.options = options124;
+FileManagerTreeview.states = states140;
+FileManagerTreeview.options = options130;
 FileManagerTreeview.className = FILEMANAGERTREEVIEW_CLASSNAME;
-FileManagerTreeview.defaultProps = defaultProps123;
+FileManagerTreeview.defaultProps = defaultProps129;
 
 // src/filemanager/filemanager-drag-hint.tsx
-var import_jsx_runtime394 = require("react/jsx-runtime");
+var import_jsx_runtime404 = require("react/jsx-runtime");
 var FILEMANAGERDRAGHINT_CLASSNAME = "k-filemanager-drag-hint";
-var states135 = [];
-var options125 = {};
-var defaultProps124 = {
+var states141 = [];
+var options131 = {};
+var defaultProps130 = {
   icon: "file"
 };
 var FileManagerDragHint = (props) => {
   const {
     hint,
-    icon = defaultProps124.icon,
+    icon = defaultProps130.icon,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime394.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime404.jsxs)(
     "div",
     {
       className: classNames(
@@ -14650,41 +14948,41 @@ var FileManagerDragHint = (props) => {
       ),
       ...other,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime394.jsx)(Icon, { icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime394.jsx)("span", { children: hint })
+        /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(Icon, { icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { children: hint })
       ]
     }
   );
 };
-FileManagerDragHint.states = states135;
-FileManagerDragHint.options = options125;
+FileManagerDragHint.states = states141;
+FileManagerDragHint.options = options131;
 FileManagerDragHint.className = FILEMANAGERDRAGHINT_CLASSNAME;
-FileManagerDragHint.defaultProps = defaultProps124;
+FileManagerDragHint.defaultProps = defaultProps130;
 
 // src/filemanager/file-info.tsx
-var import_jsx_runtime395 = require("react/jsx-runtime");
+var import_jsx_runtime405 = require("react/jsx-runtime");
 var FILEINFO_CLASSNAME = "k-file-info";
-var states136 = [];
-var options126 = {};
-var defaultProps125 = {
+var states142 = [];
+var options132 = {};
+var defaultProps131 = {
   name: "No File Selected",
   icon: "file"
 };
 var FileInfo = (props) => {
   const {
     selection,
-    name = defaultProps125.name,
-    icon = defaultProps125.icon,
+    name = defaultProps131.name,
+    icon = defaultProps131.icon,
     fileType,
     fileSize,
     fileDateCreated,
     fileDateModified
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)("div", { className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime405.jsxs)("div", { className: classNames(
     props.className,
     FILEINFO_CLASSNAME
   ), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime405.jsx)(
       FilePreview,
       {
         className: classNames(
@@ -14699,53 +14997,53 @@ var FileInfo = (props) => {
         size: "xxxlarge"
       }
     ),
-    selection === "single" && /* @__PURE__ */ (0, import_jsx_runtime395.jsx)(import_jsx_runtime395.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)("dl", { className: "k-file-meta", children: [
-      fileType && /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(import_jsx_runtime395.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dt", { className: "k-file-meta-label", children: "Type: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-file-meta-value k-file-type", children: fileType }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-line-break" })
+    selection === "single" && /* @__PURE__ */ (0, import_jsx_runtime405.jsx)(import_jsx_runtime405.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime405.jsxs)("dl", { className: "k-file-meta", children: [
+      fileType && /* @__PURE__ */ (0, import_jsx_runtime405.jsxs)(import_jsx_runtime405.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dt", { className: "k-file-meta-label", children: "Type: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-file-meta-value k-file-type", children: fileType }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-line-break" })
       ] }),
-      fileSize && /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(import_jsx_runtime395.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dt", { className: "k-file-meta-label", children: "Size: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-file-meta-value k-file-size", children: fileSize }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-line-break" })
+      fileSize && /* @__PURE__ */ (0, import_jsx_runtime405.jsxs)(import_jsx_runtime405.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dt", { className: "k-file-meta-label", children: "Size: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-file-meta-value k-file-size", children: fileSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-line-break" })
       ] }),
-      fileDateCreated && /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(import_jsx_runtime395.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dt", { className: "k-file-meta-label", children: "Date Created: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-file-meta-value k-file-created", children: fileDateCreated }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-line-break" })
+      fileDateCreated && /* @__PURE__ */ (0, import_jsx_runtime405.jsxs)(import_jsx_runtime405.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dt", { className: "k-file-meta-label", children: "Date Created: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-file-meta-value k-file-created", children: fileDateCreated }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-line-break" })
       ] }),
-      fileDateModified && /* @__PURE__ */ (0, import_jsx_runtime395.jsxs)(import_jsx_runtime395.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dt", { className: "k-file-meta-label", children: "Date Modified: " }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-file-meta-value k-file-modified", children: fileDateModified }),
-        /* @__PURE__ */ (0, import_jsx_runtime395.jsx)("dd", { className: "k-line-break" })
+      fileDateModified && /* @__PURE__ */ (0, import_jsx_runtime405.jsxs)(import_jsx_runtime405.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dt", { className: "k-file-meta-label", children: "Date Modified: " }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-file-meta-value k-file-modified", children: fileDateModified }),
+        /* @__PURE__ */ (0, import_jsx_runtime405.jsx)("dd", { className: "k-line-break" })
       ] })
     ] }) })
   ] });
 };
-FileInfo.states = states136;
-FileInfo.options = options126;
+FileInfo.states = states142;
+FileInfo.options = options132;
 FileInfo.className = FILEINFO_CLASSNAME;
-FileInfo.defaultProps = defaultProps125;
+FileInfo.defaultProps = defaultProps131;
 
 // src/filemanager/file-preview.tsx
-var import_jsx_runtime396 = require("react/jsx-runtime");
+var import_jsx_runtime406 = require("react/jsx-runtime");
 var FILEPREVIEW_CLASSNAME = "k-file-preview";
-var states137 = [];
-var options127 = {
+var states143 = [];
+var options133 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge]
 };
-var defaultProps126 = {};
+var defaultProps132 = {};
 var FilePreview = (props) => {
   const {
     size,
     icon,
     name
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime396.jsxs)(import_jsx_runtime396.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime396.jsx)("span", { className: classNames(
+  return /* @__PURE__ */ (0, import_jsx_runtime406.jsxs)(import_jsx_runtime406.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime406.jsx)("span", { className: classNames(
       FILEPREVIEW_CLASSNAME
-    ), children: /* @__PURE__ */ (0, import_jsx_runtime396.jsx)(
+    ), children: /* @__PURE__ */ (0, import_jsx_runtime406.jsx)(
       Icon,
       {
         className: "k-file-icon",
@@ -14753,34 +15051,242 @@ var FilePreview = (props) => {
         size
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime396.jsx)("span", { className: classNames(
+    /* @__PURE__ */ (0, import_jsx_runtime406.jsx)("span", { className: classNames(
       props.className,
       "k-file-name"
     ), children: name })
   ] });
 };
-FilePreview.states = states137;
-FilePreview.options = options127;
+FilePreview.states = states143;
+FilePreview.options = options133;
 FilePreview.className = FILEPREVIEW_CLASSNAME;
-FilePreview.defaultProps = defaultProps126;
+FilePreview.defaultProps = defaultProps132;
 
 // src/filemanager/templates/filemanager-normal.tsx
-var import_jsx_runtime397 = require("react/jsx-runtime");
+var import_jsx_runtime407 = require("react/jsx-runtime");
 
 // src/filemanager/templates/filemanager-preview.tsx
-var import_jsx_runtime398 = require("react/jsx-runtime");
+var import_jsx_runtime408 = require("react/jsx-runtime");
 
 // src/filemanager/templates/filemanager-grid.tsx
-var import_jsx_runtime399 = require("react/jsx-runtime");
+var import_jsx_runtime409 = require("react/jsx-runtime");
 
 // src/filemanager/templates/filemanager-grid-preview.tsx
-var import_jsx_runtime400 = require("react/jsx-runtime");
+var import_jsx_runtime410 = require("react/jsx-runtime");
+
+// src/taskboard/taskboard-toolbar.tsx
+var import_jsx_runtime411 = require("react/jsx-runtime");
+var TASKBOARDTOOLBAR_CLASSNAME = `k-taskboard-toolbar`;
+var states144 = [];
+var options134 = {};
+var defaultProps133 = {};
+var TaskBoardToolbar = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime411.jsx)(
+    Toolbar,
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TASKBOARDTOOLBAR_CLASSNAME
+      ),
+      children
+    }
+  );
+};
+TaskBoardToolbar.states = states144;
+TaskBoardToolbar.options = options134;
+TaskBoardToolbar.className = TASKBOARDTOOLBAR_CLASSNAME;
+TaskBoardToolbar.defaultProps = defaultProps133;
+
+// src/taskboard/taskboard-pane.tsx
+var import_jsx_runtime412 = require("react/jsx-runtime");
+var TASKBOARDPANE_CLASSNAME = `k-taskboard-pane`;
+var states145 = [];
+var options135 = {};
+var defaultHeader = /* @__PURE__ */ (0, import_jsx_runtime412.jsxs)(import_jsx_runtime412.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime412.jsx)("div", { className: "k-taskboard-pane-header-text", children: "Card X" }),
+  /* @__PURE__ */ (0, import_jsx_runtime412.jsx)("span", { className: "k-spacer" }),
+  /* @__PURE__ */ (0, import_jsx_runtime412.jsx)("div", { className: "k-taskboard-pane-header-actions", children: /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(Button, { fillMode: "flat", icon: "x" }) })
+] });
+var defaultProps134 = {
+  header: defaultHeader
+};
+var TaskBoardPane = (props) => {
+  const {
+    header = defaultProps134.header,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime412.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TASKBOARDPANE_CLASSNAME,
+        "k-taskboard-edit-pane"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime412.jsx)("div", { className: "k-taskboard-pane-header", children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime412.jsx)("div", { className: "k-taskboard-pane-content", children: props.children }),
+        /* @__PURE__ */ (0, import_jsx_runtime412.jsxs)(ActionButtons, { alignment: "end", className: "k-taskboard-pane-actions", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(Button, { icon: "trash", children: "Delete" }),
+          /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(Button, { themeColor: "primary", icon: "pencil", children: "Edit" })
+        ] })
+      ]
+    }
+  );
+};
+TaskBoardPane.states = states145;
+TaskBoardPane.options = options135;
+TaskBoardPane.className = TASKBOARDPANE_CLASSNAME;
+TaskBoardPane.defaultProps = defaultProps134;
+
+// src/taskboard/taskboard.spec.tsx
+var import_jsx_runtime413 = require("react/jsx-runtime");
+var TASKBOARD_CLASSNAME = `k-taskboard`;
+var states146 = [
+  States.disabled
+];
+var options136 = {};
+var defaultToolbar2 = /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(import_jsx_runtime413.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime413.jsxs)(TaskBoardToolbar, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(Button, { icon: "plus", children: "Add Column" }),
+  /* @__PURE__ */ (0, import_jsx_runtime413.jsx)("span", { className: "k-spacer" }),
+  /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(Searchbox, { placeholder: "Search..." })
+] }) });
+var defaultProps135 = {
+  toolbar: defaultToolbar2,
+  pane: false,
+  panePosition: "end"
+};
+var TaskBoard = (props) => {
+  const {
+    disabled,
+    toolbar = defaultProps135.toolbar,
+    panePosition = defaultProps135.panePosition,
+    pane,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime413.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TASKBOARD_CLASSNAME,
+        stateClassNames(TASKBOARD_CLASSNAME, {
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime413.jsx)("div", { className: "k-taskboard-header", children: toolbar }),
+        /* @__PURE__ */ (0, import_jsx_runtime413.jsx)("div", { className: "k-taskboard-content", style: {
+          marginRight: pane && panePosition === "end" ? "304px" : void 0,
+          marginLeft: pane && panePosition === "start" ? "304px" : void 0
+        }, children: /* @__PURE__ */ (0, import_jsx_runtime413.jsx)("div", { className: "k-taskboard-columns-container", children: props.children }) }),
+        pane && /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(import_jsx_runtime413.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(TaskBoardPane, { className: classNames(
+          {
+            ["k-taskboard-pane-start"]: panePosition === "start"
+          }
+        ), children: /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(FormNormal, { formButtons: null, children: /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(FormField, { label: "Textbox:", editor: /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(Textbox, {}) }) }) }) })
+      ]
+    }
+  );
+};
+TaskBoard.states = states146;
+TaskBoard.options = options136;
+TaskBoard.className = TASKBOARD_CLASSNAME;
+TaskBoard.defaultProps = defaultProps135;
+
+// src/taskboard/taskboard-column.tsx
+var import_jsx_runtime414 = require("react/jsx-runtime");
+var TASKBOARDCOLUMN_CLASSNAME = `k-taskboard-column`;
+var states147 = [];
+var options137 = {};
+var defaultHeader2 = /* @__PURE__ */ (0, import_jsx_runtime414.jsxs)(import_jsx_runtime414.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime414.jsx)("div", { className: "k-taskboard-column-header-text k-text-ellipsis", children: "Column Header" }),
+  /* @__PURE__ */ (0, import_jsx_runtime414.jsx)("span", { className: "k-spacer" }),
+  /* @__PURE__ */ (0, import_jsx_runtime414.jsxs)("div", { className: "k-taskboard-column-header-actions", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime414.jsx)(Button, { fillMode: "flat", icon: "pencil" }),
+    /* @__PURE__ */ (0, import_jsx_runtime414.jsx)(Button, { fillMode: "flat", icon: "plus" }),
+    /* @__PURE__ */ (0, import_jsx_runtime414.jsx)(Button, { fillMode: "flat", icon: "x" })
+  ] })
+] });
+var defaultProps136 = {
+  header: defaultHeader2
+};
+var TaskBoardColumn = (props) => {
+  const {
+    header = defaultProps136.header,
+    edit,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime414.jsxs)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TASKBOARDCOLUMN_CLASSNAME,
+        {
+          [`${TASKBOARDCOLUMN_CLASSNAME}-edit`]: edit
+        }
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime414.jsx)("div", { className: "k-taskboard-column-header", children: header }),
+        /* @__PURE__ */ (0, import_jsx_runtime414.jsx)("div", { className: "k-taskboard-column-cards-container", children: /* @__PURE__ */ (0, import_jsx_runtime414.jsx)("div", { className: "k-taskboard-column-cards", children: props.children }) })
+      ]
+    }
+  );
+};
+TaskBoardColumn.states = states147;
+TaskBoardColumn.options = options137;
+TaskBoardColumn.className = TASKBOARDCOLUMN_CLASSNAME;
+TaskBoardColumn.defaultProps = defaultProps136;
+
+// src/taskboard/taskboard-card.tsx
+var import_jsx_runtime415 = require("react/jsx-runtime");
+var TASKBOARDCARD_CLASSNAME = `k-taskboard-card`;
+var states148 = [];
+var options138 = {};
+var defaultProps137 = {};
+var TaskBoardCard = (props) => {
+  const {
+    children,
+    category,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime415.jsx)(
+    Card,
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        TASKBOARDCARD_CLASSNAME,
+        {
+          [`${TASKBOARDCARD_CLASSNAME}-category`]: category
+        }
+      ),
+      children
+    }
+  );
+};
+TaskBoardCard.states = states148;
+TaskBoardCard.options = options138;
+TaskBoardCard.className = TASKBOARDCARD_CLASSNAME;
+TaskBoardCard.defaultProps = defaultProps137;
+
+// src/taskboard/templates/taskboard-normal.tsx
+var import_jsx_runtime416 = require("react/jsx-runtime");
 
 // src/chat/chat.spec.tsx
-var import_jsx_runtime401 = require("react/jsx-runtime");
+var import_jsx_runtime417 = require("react/jsx-runtime");
 var CHAT_CLASSNAME = "k-chat";
-var states138 = [];
-var options128 = {};
+var states149 = [];
+var options139 = {};
 var defaultOptions = {
   showToolbar: true,
   showMessageBox: true,
@@ -14794,7 +15300,7 @@ var Chat = (props) => {
     showMoreButton,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime401.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime417.jsxs)(
     "div",
     {
       ...other,
@@ -14804,63 +15310,63 @@ var Chat = (props) => {
       ),
       dir,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime401.jsx)("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ (0, import_jsx_runtime401.jsx)("div", { className: "k-message-list-content", children: props.children }) }),
-        showMessageBox && /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime417.jsx)("div", { className: "k-message-list k-avatars", children: /* @__PURE__ */ (0, import_jsx_runtime417.jsx)("div", { className: "k-message-list-content", children: props.children }) }),
+        showMessageBox && /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(
           Textbox,
           {
             className: "k-message-box",
             placeholder: "Type a message...",
-            suffix: /* @__PURE__ */ (0, import_jsx_runtime401.jsxs)(import_jsx_runtime401.Fragment, { children: [
-              showMoreButton && /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { fillMode: "flat", icon: "more-horizontal" }),
-              /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { fillMode: "flat", icon: "paper-plane", className: "k-chat-send" })
+            suffix: /* @__PURE__ */ (0, import_jsx_runtime417.jsxs)(import_jsx_runtime417.Fragment, { children: [
+              showMoreButton && /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { fillMode: "flat", icon: "more-horizontal" }),
+              /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { fillMode: "flat", icon: "paper-plane", className: "k-chat-send" })
             ] })
           }
         ),
-        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime401.jsxs)("div", { className: "k-chat-toolbar k-toolbar", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { className: classNames("k-scroll-button", "k-scroll-button-left", dir === "rtl" ? "" : "k-hidden"), icon: "chevron-left" }),
-          /* @__PURE__ */ (0, import_jsx_runtime401.jsxs)("div", { className: "k-toolbar-group k-button-list", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "arrow-rotate-cw" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "gear" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "wrench" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "plus" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "search" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "star" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "bell" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "question-circle" }),
-            /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { icon: "trash" })
+        showToolbar && /* @__PURE__ */ (0, import_jsx_runtime417.jsxs)("div", { className: "k-chat-toolbar k-toolbar", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { className: classNames("k-scroll-button", "k-scroll-button-left", dir === "rtl" ? "" : "k-hidden"), icon: "chevron-left" }),
+          /* @__PURE__ */ (0, import_jsx_runtime417.jsxs)("div", { className: "k-toolbar-group k-button-list", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "arrow-rotate-cw" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "gear" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "wrench" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "plus" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "search" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "star" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "bell" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "question-circle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { icon: "trash" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime401.jsx)(Button, { className: classNames("k-scroll-button", "k-scroll-button-right", dir === "rtl" && "k-hidden"), icon: "chevron-right" })
+          /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(Button, { className: classNames("k-scroll-button", "k-scroll-button-right", dir === "rtl" && "k-hidden"), icon: "chevron-right" })
         ] })
       ]
     }
   );
 };
-Chat.states = states138;
-Chat.options = options128;
+Chat.states = states149;
+Chat.options = options139;
 Chat.className = CHAT_CLASSNAME;
 Chat.defaultOptions = defaultOptions;
 
 // src/chat/chat-message.tsx
-var import_jsx_runtime402 = require("react/jsx-runtime");
+var import_jsx_runtime418 = require("react/jsx-runtime");
 var CHATMESSAGE_CLASSNAME = "k-message";
-var states139 = [
+var states150 = [
   States.selected
 ];
-var options129 = {};
-var defaultProps127 = {
+var options140 = {};
+var defaultProps138 = {
   time: "Thu Feb 08 2018",
   text: "How can I help you?",
   status: "Seen"
 };
 var ChatMessage = (props) => {
   const {
-    time = defaultProps127.time,
-    text = defaultProps127.text,
-    status = defaultProps127.status,
+    time = defaultProps138.time,
+    text = defaultProps138.text,
+    status = defaultProps138.status,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime402.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime418.jsxs)(
     "div",
     {
       ...other,
@@ -14870,39 +15376,39 @@ var ChatMessage = (props) => {
         stateClassNames(CHATMESSAGE_CLASSNAME, { selected })
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime402.jsx)("time", { className: "k-message-time", children: time }),
-        /* @__PURE__ */ (0, import_jsx_runtime402.jsx)("div", { className: "k-chat-bubble", children: text }),
-        /* @__PURE__ */ (0, import_jsx_runtime402.jsx)("span", { className: "k-message-status", children: status })
+        /* @__PURE__ */ (0, import_jsx_runtime418.jsx)("time", { className: "k-message-time", children: time }),
+        /* @__PURE__ */ (0, import_jsx_runtime418.jsx)("div", { className: "k-chat-bubble", children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime418.jsx)("span", { className: "k-message-status", children: status })
       ]
     }
   );
 };
-ChatMessage.states = states139;
-ChatMessage.options = options129;
+ChatMessage.states = states150;
+ChatMessage.options = options140;
 ChatMessage.className = CHATMESSAGE_CLASSNAME;
-ChatMessage.defaultProps = defaultProps127;
+ChatMessage.defaultProps = defaultProps138;
 
 // src/chat/chat-message-group.tsx
-var import_jsx_runtime403 = require("react/jsx-runtime");
+var import_jsx_runtime419 = require("react/jsx-runtime");
 var CHATMESSAGEGROUP_CLASSNAME = "k-message-group";
-var states140 = [
+var states151 = [
   States.selected
 ];
-var options130 = {};
-var defaultProps128 = {
+var options141 = {};
+var defaultProps139 = {
   author: "Bruv",
   avatar: "/packages/html/assets/avatar.jpg",
   alt: false
 };
 var ChatMessageGroup = (props) => {
   const {
-    alt = defaultProps128.alt,
-    author = defaultProps128.author,
-    avatar = defaultProps128.avatar,
+    alt = defaultProps139.alt,
+    author = defaultProps139.author,
+    avatar = defaultProps139.avatar,
     selected,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime403.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime419.jsxs)(
     "div",
     {
       ...other,
@@ -14916,23 +15422,23 @@ var ChatMessageGroup = (props) => {
         }
       ),
       children: [
-        author && /* @__PURE__ */ (0, import_jsx_runtime403.jsx)("p", { className: "k-author", children: author }),
-        avatar && /* @__PURE__ */ (0, import_jsx_runtime403.jsx)(Avatar, { type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime403.jsx)("img", { src: avatar }) }),
+        author && /* @__PURE__ */ (0, import_jsx_runtime419.jsx)("p", { className: "k-author", children: author }),
+        avatar && /* @__PURE__ */ (0, import_jsx_runtime419.jsx)(Avatar, { type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime419.jsx)("img", { src: avatar }) }),
         props.children
       ]
     }
   );
 };
-ChatMessageGroup.states = states140;
-ChatMessageGroup.options = options130;
+ChatMessageGroup.states = states151;
+ChatMessageGroup.options = options141;
 ChatMessageGroup.className = CHATMESSAGEGROUP_CLASSNAME;
-ChatMessageGroup.defaultProps = defaultProps128;
+ChatMessageGroup.defaultProps = defaultProps139;
 
 // src/chat/chat-quick-replies.tsx
-var import_jsx_runtime404 = require("react/jsx-runtime");
+var import_jsx_runtime420 = require("react/jsx-runtime");
 var CHATQUICKREPLY_CLASSNAME = "k-quick-replies";
-var states141 = [];
-var options131 = {};
+var states152 = [];
+var options142 = {};
 var defaultOptions2 = {
   actions: ["Quick", "Reply", "Another quick", "Reply with different length"]
 };
@@ -14945,11 +15451,11 @@ var ChatQuickReply = (props) => {
   if (actions) {
     actions.map((action, index) => {
       children.push(
-        /* @__PURE__ */ (0, import_jsx_runtime404.jsx)("span", { className: "k-quick-reply", children: action }, index)
+        /* @__PURE__ */ (0, import_jsx_runtime420.jsx)("span", { className: "k-quick-reply", children: action }, index)
       );
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime404.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime420.jsx)(
     "div",
     {
       ...other,
@@ -14961,26 +15467,26 @@ var ChatQuickReply = (props) => {
     }
   );
 };
-ChatQuickReply.states = states141;
-ChatQuickReply.options = options131;
+ChatQuickReply.states = states152;
+ChatQuickReply.options = options142;
 ChatQuickReply.className = CHATQUICKREPLY_CLASSNAME;
 ChatQuickReply.defaultOptions = defaultOptions2;
 
 // src/chat/templates/chat-normal.tsx
-var import_jsx_runtime405 = require("react/jsx-runtime");
+var import_jsx_runtime421 = require("react/jsx-runtime");
 
 // src/chat/templates/chat-with-toolbar.tsx
-var import_jsx_runtime406 = require("react/jsx-runtime");
+var import_jsx_runtime422 = require("react/jsx-runtime");
 
 // src/chat/templates/chat-with-options.tsx
-var import_jsx_runtime407 = require("react/jsx-runtime");
+var import_jsx_runtime423 = require("react/jsx-runtime");
 
 // src/timeline/timeline.spec.tsx
-var import_jsx_runtime408 = require("react/jsx-runtime");
+var import_jsx_runtime424 = require("react/jsx-runtime");
 var TIMELINE_CLASSNAME = `k-timeline`;
-var states142 = [];
-var options132 = {};
-var defaultProps129 = {
+var states153 = [];
+var options143 = {};
+var defaultProps140 = {
   orientation: "vertical"
 };
 var Timeline = (props) => {
@@ -14990,7 +15496,7 @@ var Timeline = (props) => {
     alternatingMode,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime408.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime424.jsx)(
     "div",
     {
       ...other,
@@ -15003,21 +15509,21 @@ var Timeline = (props) => {
           [`${TIMELINE_CLASSNAME}-collapsible`]: collapsibleEvents
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime408.jsx)(import_jsx_runtime408.Fragment, { children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime424.jsx)(import_jsx_runtime424.Fragment, { children: props.children })
     }
   );
 };
-Timeline.states = states142;
-Timeline.options = options132;
+Timeline.states = states153;
+Timeline.options = options143;
 Timeline.className = TIMELINE_CLASSNAME;
-Timeline.defaultProps = defaultProps129;
+Timeline.defaultProps = defaultProps140;
 
 // src/timeline/vertical-timeline-event.spec.tsx
-var import_jsx_runtime409 = require("react/jsx-runtime");
+var import_jsx_runtime425 = require("react/jsx-runtime");
 var TIMELINEVERTICALEVENT_CLASSNAME = `k-timeline-event`;
-var states143 = [];
-var options133 = {};
-var defaultProps130 = {
+var states154 = [];
+var options144 = {};
+var defaultProps141 = {
   collapsed: false,
   reverse: false,
   title: "Event title",
@@ -15027,15 +15533,15 @@ var defaultProps130 = {
 var VerticalTimelineEvent = (props) => {
   const {
     date,
-    content = defaultProps130.content,
-    collapsed = defaultProps130.collapsed,
-    reverse = defaultProps130.reverse,
-    title = defaultProps130.title,
-    subtitle = defaultProps130.subtitle,
+    content = defaultProps141.content,
+    collapsed = defaultProps141.collapsed,
+    reverse = defaultProps141.reverse,
+    title = defaultProps141.title,
+    subtitle = defaultProps141.subtitle,
     showCollapseButton,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime409.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime425.jsxs)(
     "li",
     {
       ...other,
@@ -15045,43 +15551,43 @@ var VerticalTimelineEvent = (props) => {
         { "k-reverse": reverse }
       ),
       children: [
-        date && /* @__PURE__ */ (0, import_jsx_runtime409.jsx)("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime409.jsx)("span", { className: "k-timeline-date", children: date }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime409.jsx)(TimelineCircle, {}),
-        content && /* @__PURE__ */ (0, import_jsx_runtime409.jsx)("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ (0, import_jsx_runtime409.jsx)(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ (0, import_jsx_runtime409.jsxs)("div", { className: "k-card-inner", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime409.jsxs)(CardHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime409.jsx)(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime409.jsx)(CardSubtitle, { children: subtitle })
+        date && /* @__PURE__ */ (0, import_jsx_runtime425.jsx)("div", { className: "k-timeline-date-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime425.jsx)("span", { className: "k-timeline-date", children: date }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime425.jsx)(TimelineCircle, {}),
+        content && /* @__PURE__ */ (0, import_jsx_runtime425.jsx)("div", { className: classNames("k-timeline-card", { "k-collapsed": collapsed }), children: /* @__PURE__ */ (0, import_jsx_runtime425.jsx)(TimelineCard, { ...reverse ? { callout: "right" } : { callout: "left" }, children: /* @__PURE__ */ (0, import_jsx_runtime425.jsxs)("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime425.jsxs)(CardHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime425.jsx)(TimelineCardTitle, { collapsible: showCollapseButton, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime425.jsx)(CardSubtitle, { children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime409.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime409.jsx)("div", { className: "k-card-description", children: content }) })
+          /* @__PURE__ */ (0, import_jsx_runtime425.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime425.jsx)("div", { className: "k-card-description", children: content }) })
         ] }) }) }),
         props.children
       ]
     }
   );
 };
-VerticalTimelineEvent.states = states143;
-VerticalTimelineEvent.options = options133;
+VerticalTimelineEvent.states = states154;
+VerticalTimelineEvent.options = options144;
 VerticalTimelineEvent.className = TIMELINEVERTICALEVENT_CLASSNAME;
-VerticalTimelineEvent.defaultProps = defaultProps130;
+VerticalTimelineEvent.defaultProps = defaultProps141;
 
 // src/timeline/horizontal-timeline-event.spec.tsx
-var import_jsx_runtime410 = require("react/jsx-runtime");
+var import_jsx_runtime426 = require("react/jsx-runtime");
 var TIMELINEHORIZONTALEVENT_CLASSNAME = `k-timeline-event`;
-var states144 = [];
-var options134 = {};
-var defaultProps131 = {
+var states155 = [];
+var options145 = {};
+var defaultProps142 = {
   title: "Event title",
   subtitle: "Event subtitle",
   content: "Event content"
 };
 var HorizontalTimelineEvent = (props) => {
   const {
-    content = defaultProps131.content,
-    title = defaultProps131.title,
-    subtitle = defaultProps131.subtitle,
+    content = defaultProps142.content,
+    title = defaultProps142.title,
+    subtitle = defaultProps142.subtitle,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime410.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)(
     "li",
     {
       ...other,
@@ -15090,35 +15596,35 @@ var HorizontalTimelineEvent = (props) => {
         TIMELINEHORIZONTALEVENT_CLASSNAME
       ),
       children: [
-        content && /* @__PURE__ */ (0, import_jsx_runtime410.jsx)("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ (0, import_jsx_runtime410.jsx)(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ (0, import_jsx_runtime410.jsxs)("div", { className: "k-card-inner", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime410.jsxs)(CardHeader, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime410.jsx)(TimelineCardTitle, { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime410.jsx)(CardSubtitle, { children: subtitle })
+        content && /* @__PURE__ */ (0, import_jsx_runtime426.jsx)("div", { className: classNames("k-timeline-card"), children: /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(TimelineCard, { orientation: "vertical", callout: "top", children: /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)("div", { className: "k-card-inner", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)(CardHeader, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(TimelineCardTitle, { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(CardSubtitle, { children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime410.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime410.jsx)("div", { className: "k-card-description", children: content }) })
+          /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime426.jsx)("div", { className: "k-card-description", children: content }) })
         ] }) }) }),
         props.children
       ]
     }
   );
 };
-HorizontalTimelineEvent.states = states144;
-HorizontalTimelineEvent.options = options134;
+HorizontalTimelineEvent.states = states155;
+HorizontalTimelineEvent.options = options145;
 HorizontalTimelineEvent.className = TIMELINEHORIZONTALEVENT_CLASSNAME;
-HorizontalTimelineEvent.defaultProps = defaultProps131;
+HorizontalTimelineEvent.defaultProps = defaultProps142;
 
 // src/timeline/timeline-event-list.spec.tsx
-var import_jsx_runtime411 = require("react/jsx-runtime");
+var import_jsx_runtime427 = require("react/jsx-runtime");
 
 // src/timeline/timeline-flag-wrap.spec.tsx
-var import_jsx_runtime412 = require("react/jsx-runtime");
+var import_jsx_runtime428 = require("react/jsx-runtime");
 var TIMELINEFLAGWRAP_CLASSNAME = `k-timeline-flag-wrap`;
-var states145 = [
+var states156 = [
   States.focus,
   States.selected
 ];
-var options135 = {};
-var defaultProps132 = {
+var options146 = {};
+var defaultProps143 = {
   year: "2020"
 };
 var TimelineFlagWrap = (props) => {
@@ -15126,7 +15632,7 @@ var TimelineFlagWrap = (props) => {
     year,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime412.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime428.jsxs)(
     "li",
     {
       ...other,
@@ -15135,25 +15641,25 @@ var TimelineFlagWrap = (props) => {
         TIMELINEFLAGWRAP_CLASSNAME
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime412.jsx)("span", { className: "k-timeline-flag", children: year }),
+        /* @__PURE__ */ (0, import_jsx_runtime428.jsx)("span", { className: "k-timeline-flag", children: year }),
         props.children
       ]
     }
   );
 };
-TimelineFlagWrap.states = states145;
-TimelineFlagWrap.options = options135;
+TimelineFlagWrap.states = states156;
+TimelineFlagWrap.options = options146;
 TimelineFlagWrap.className = TIMELINEFLAGWRAP_CLASSNAME;
-TimelineFlagWrap.defaultProps = defaultProps132;
+TimelineFlagWrap.defaultProps = defaultProps143;
 
 // src/timeline/timeline-circle.spec.tsx
-var import_jsx_runtime413 = require("react/jsx-runtime");
+var import_jsx_runtime429 = require("react/jsx-runtime");
 var TIMELINECIRCLE_CLASSNAME = `k-timeline-circle`;
 var TimelineCircle = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime413.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime429.jsx)(
     "span",
     {
       ...other,
@@ -15166,19 +15672,19 @@ var TimelineCircle = (props) => {
 };
 
 // src/timeline/timeline-flag.spec.tsx
-var import_jsx_runtime414 = require("react/jsx-runtime");
+var import_jsx_runtime430 = require("react/jsx-runtime");
 
 // src/timeline/timeline-card.spec.tsx
-var import_jsx_runtime415 = require("react/jsx-runtime");
-var states146 = [];
-var defaultProps133 = {};
+var import_jsx_runtime431 = require("react/jsx-runtime");
+var states157 = [];
+var defaultProps144 = {};
 var TimelineCard = (props) => {
   const {
     callout,
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime415.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)(
     Card,
     {
       className: classNames(
@@ -15188,27 +15694,27 @@ var TimelineCard = (props) => {
       callout: "true",
       ...other,
       children: [
-        callout && /* @__PURE__ */ (0, import_jsx_runtime415.jsx)(TimelineCardCallout, { callout }),
+        callout && /* @__PURE__ */ (0, import_jsx_runtime431.jsx)(TimelineCardCallout, { callout }),
         children
       ]
     }
   );
 };
-TimelineCard.states = states146;
-TimelineCard.defaultProps = defaultProps133;
+TimelineCard.states = states157;
+TimelineCard.defaultProps = defaultProps144;
 
 // src/timeline/timeline-card-title.tsx
-var import_jsx_runtime416 = require("react/jsx-runtime");
+var import_jsx_runtime432 = require("react/jsx-runtime");
 var TIMELINECARDTITLE_CLASSNAME = `k-card-title`;
-var states147 = [];
-var defaultProps134 = {};
+var states158 = [];
+var defaultProps145 = {};
 var TimelineCardTitle = (props) => {
   const {
     collapsible,
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime416.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime432.jsxs)(
     "div",
     {
       className: classNames(
@@ -15217,26 +15723,26 @@ var TimelineCardTitle = (props) => {
       ),
       ...other,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime416.jsx)("span", { className: "k-event-title", children }),
-        collapsible && /* @__PURE__ */ (0, import_jsx_runtime416.jsx)("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__ */ (0, import_jsx_runtime416.jsx)(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime432.jsx)("span", { className: "k-event-title", children }),
+        collapsible && /* @__PURE__ */ (0, import_jsx_runtime432.jsx)("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__ */ (0, import_jsx_runtime432.jsx)(Icon, { icon: "chevron-right", className: "k-button-icon" }) })
       ]
     }
   );
 };
-TimelineCardTitle.states = states147;
+TimelineCardTitle.states = states158;
 TimelineCardTitle.className = TIMELINECARDTITLE_CLASSNAME;
-TimelineCardTitle.defaultProps = defaultProps134;
+TimelineCardTitle.defaultProps = defaultProps145;
 
 // src/timeline/timeline-card-callout.tsx
-var import_jsx_runtime417 = require("react/jsx-runtime");
+var import_jsx_runtime433 = require("react/jsx-runtime");
 var TIMELINECARDCALLOUT_CLASSNAME = `k-timeline-card-callout`;
-var states148 = [];
-var defaultProps135 = {};
+var states159 = [];
+var defaultProps146 = {};
 var TimelineCardCallout = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime417.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime433.jsx)(
     CardCallout,
     {
       className: classNames(
@@ -15247,24 +15753,24 @@ var TimelineCardCallout = (props) => {
     }
   );
 };
-TimelineCardCallout.states = states148;
+TimelineCardCallout.states = states159;
 TimelineCardCallout.className = TIMELINECARDCALLOUT_CLASSNAME;
-TimelineCardCallout.defaultProps = defaultProps135;
+TimelineCardCallout.defaultProps = defaultProps146;
 
 // src/timeline/timeline-date-wrap.spec.tsx
-var import_jsx_runtime418 = require("react/jsx-runtime");
+var import_jsx_runtime434 = require("react/jsx-runtime");
 var TIMELINEDATEWRAP_CLASSNAME = `k-timeline-date-wrap`;
-var states149 = [];
-var options136 = {};
-var defaultProps136 = {
+var states160 = [];
+var options147 = {};
+var defaultProps147 = {
   date: "May 25, 2008"
 };
 var TimelineDateWrap = (props) => {
   const {
-    date = defaultProps136.date,
+    date = defaultProps147.date,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime418.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime434.jsx)(
     "div",
     {
       ...other,
@@ -15272,53 +15778,53 @@ var TimelineDateWrap = (props) => {
         props.className,
         TIMELINEDATEWRAP_CLASSNAME
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime418.jsx)("span", { className: "k-timeline-date", children: date })
+      children: /* @__PURE__ */ (0, import_jsx_runtime434.jsx)("span", { className: "k-timeline-date", children: date })
     }
   );
 };
-TimelineDateWrap.states = states149;
-TimelineDateWrap.options = options136;
+TimelineDateWrap.states = states160;
+TimelineDateWrap.options = options147;
 TimelineDateWrap.className = TIMELINEDATEWRAP_CLASSNAME;
-TimelineDateWrap.defaultProps = defaultProps136;
+TimelineDateWrap.defaultProps = defaultProps147;
 
 // src/timeline/timeline-track-wrap.spec.tsx
-var import_jsx_runtime419 = require("react/jsx-runtime");
+var import_jsx_runtime435 = require("react/jsx-runtime");
 
 // src/timeline/timeline-track.spec.tsx
-var import_jsx_runtime420 = require("react/jsx-runtime");
+var import_jsx_runtime436 = require("react/jsx-runtime");
 
 // src/timeline/timeline-track-item.spec.tsx
-var import_jsx_runtime421 = require("react/jsx-runtime");
+var import_jsx_runtime437 = require("react/jsx-runtime");
 
 // src/timeline/templates/timeline-normal.tsx
-var import_jsx_runtime422 = require("react/jsx-runtime");
+var import_jsx_runtime438 = require("react/jsx-runtime");
 
 // src/timeline/templates/timeline-normal-collapsible.tsx
-var import_jsx_runtime423 = require("react/jsx-runtime");
+var import_jsx_runtime439 = require("react/jsx-runtime");
 
 // src/timeline/templates/timeline-normal-alternating.tsx
-var import_jsx_runtime424 = require("react/jsx-runtime");
+var import_jsx_runtime440 = require("react/jsx-runtime");
 
 // src/timeline/templates/timeline-horizontal.tsx
-var import_jsx_runtime425 = require("react/jsx-runtime");
+var import_jsx_runtime441 = require("react/jsx-runtime");
 
 // src/pdf-viewer/pdf-viewer.spec.tsx
-var import_jsx_runtime426 = require("react/jsx-runtime");
+var import_jsx_runtime442 = require("react/jsx-runtime");
 var PDFVIEWER_CLASSNAME = `k-pdf-viewer`;
-var states150 = [
+var states161 = [
   States.disabled
 ];
-var options137 = {};
-var defaultToolbar2 = /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(import_jsx_runtime426.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)(Toolbar, { resizable: true, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
-  /* @__PURE__ */ (0, import_jsx_runtime426.jsx)("span", { className: "k-spacer" }),
-  /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "search" }),
-  /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "file-pdf" }),
-  /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "print" }),
-  /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "fullscreen" })
+var options148 = {};
+var defaultToolbar3 = /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(import_jsx_runtime442.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime442.jsxs)(Toolbar, { resizable: true, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Pager, { type: "input", pageSizes: false, refresh: false, info: false }),
+  /* @__PURE__ */ (0, import_jsx_runtime442.jsx)("span", { className: "k-spacer" }),
+  /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "search" }),
+  /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "file-pdf" }),
+  /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "print" }),
+  /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "fullscreen" })
 ] }) });
-var defaultProps137 = {
-  toolbar: defaultToolbar2,
+var defaultProps148 = {
+  toolbar: defaultToolbar3,
   showSearchPanel: false,
   blank: false
 };
@@ -15330,7 +15836,7 @@ var PDFViewer = (props) => {
     blank,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime442.jsxs)(
     "div",
     {
       ...other,
@@ -15341,42 +15847,42 @@ var PDFViewer = (props) => {
       ),
       children: [
         toolbar,
-        /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: [
-          showSearchPanel && /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)("div", { className: "k-search-panel k-pos-sticky k-top-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "handle-drag", className: "k-search-dialog-draghandle" }),
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime442.jsxs)("div", { className: "k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto k-enable-text-select", children: [
+          showSearchPanel && /* @__PURE__ */ (0, import_jsx_runtime442.jsxs)("div", { className: "k-search-panel k-pos-sticky k-top-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "handle-drag", className: "k-search-dialog-draghandle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(
               Textbox,
               {
-                suffix: /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", className: "k-match-case-button", icon: "convert-lowercase" })
+                suffix: /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", className: "k-match-case-button", icon: "convert-lowercase" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)("span", { className: "k-search-matches", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime426.jsx)("span", { children: "0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsxs)("span", { className: "k-search-matches", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime442.jsx)("span", { children: "0" }),
               " of ",
-              /* @__PURE__ */ (0, import_jsx_runtime426.jsx)("span", { children: "1" })
+              /* @__PURE__ */ (0, import_jsx_runtime442.jsx)("span", { children: "1" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "arrow-up" }),
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "arrow-down" }),
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(Button, { fillMode: "flat", icon: "x" })
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "arrow-up" }),
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "arrow-down" }),
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(Button, { fillMode: "flat", icon: "x" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime426.jsx)("div", { className: "k-pdf-viewer-pages", children: blank ? /* @__PURE__ */ (0, import_jsx_runtime426.jsxs)("div", { className: "k-page k-blank-page", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(DropzoneNormal, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime426.jsx)(UploadNormal, { empty: true, status: "upload" })
+          /* @__PURE__ */ (0, import_jsx_runtime442.jsx)("div", { className: "k-pdf-viewer-pages", children: blank ? /* @__PURE__ */ (0, import_jsx_runtime442.jsxs)("div", { className: "k-page k-blank-page", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(DropzoneNormal, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime442.jsx)(UploadNormal, { empty: true, status: "upload" })
           ] }) : props.children })
         ] })
       ]
     }
   );
 };
-PDFViewer.states = states150;
-PDFViewer.options = options137;
+PDFViewer.states = states161;
+PDFViewer.options = options148;
 PDFViewer.className = PDFVIEWER_CLASSNAME;
-PDFViewer.defaultProps = defaultProps137;
+PDFViewer.defaultProps = defaultProps148;
 
 // src/pdf-viewer/pdf-viewer-page.tsx
-var import_jsx_runtime427 = require("react/jsx-runtime");
+var import_jsx_runtime443 = require("react/jsx-runtime");
 var PDFVIEWERPAGE_CLASSNAME = `k-page`;
-var defaultProps138 = {
+var defaultProps149 = {
   width: "720px",
   height: "360px"
 };
@@ -15386,7 +15892,7 @@ var PDFViewerPage = (props) => {
     height,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime427.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime443.jsx)(
     "div",
     {
       ...other,
@@ -15399,23 +15905,23 @@ var PDFViewerPage = (props) => {
   );
 };
 PDFViewerPage.className = PDFVIEWERPAGE_CLASSNAME;
-PDFViewerPage.defaultProps = defaultProps138;
+PDFViewerPage.defaultProps = defaultProps149;
 
 // src/pdf-viewer/templates/pdf-viewer-normal.tsx
-var import_jsx_runtime428 = require("react/jsx-runtime");
+var import_jsx_runtime444 = require("react/jsx-runtime");
 
 // src/pdf-viewer/templates/pdf-viewer-blank.tsx
-var import_jsx_runtime429 = require("react/jsx-runtime");
+var import_jsx_runtime445 = require("react/jsx-runtime");
 
 // src/pdf-viewer/templates/pdf-viewer-with-search-panel.tsx
-var import_jsx_runtime430 = require("react/jsx-runtime");
+var import_jsx_runtime446 = require("react/jsx-runtime");
 
 // src/scrollview/scrollview-spec.tsx
-var import_jsx_runtime431 = require("react/jsx-runtime");
+var import_jsx_runtime447 = require("react/jsx-runtime");
 var SCROLLVIEW_CLASSNAME = "k-scrollview";
-var states151 = [];
-var options138 = {};
-var defaultProps139 = {
+var states162 = [];
+var options149 = {};
+var defaultProps150 = {
   mode: "normal",
   views: 9,
   animate: true,
@@ -15425,12 +15931,12 @@ var defaultProps139 = {
 };
 var ScrollView = (props) => {
   const {
-    mode = defaultProps139.mode,
-    views = defaultProps139.views,
-    animate = defaultProps139.animate,
-    arrows = defaultProps139.arrows,
-    pager = defaultProps139.pager,
-    rtl = defaultProps139.rtl,
+    mode = defaultProps150.mode,
+    views = defaultProps150.views,
+    animate = defaultProps150.animate,
+    arrows = defaultProps150.arrows,
+    pager = defaultProps150.pager,
+    rtl = defaultProps150.rtl,
     ...other
   } = props;
   const scrollviewViews = [];
@@ -15438,10 +15944,10 @@ var ScrollView = (props) => {
   const iconNext = rtl ? "chevron-left" : "chevron-right";
   for (let i = 0; i < views; i++) {
     scrollviewViews.push(
-      /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("div", { className: "k-scrollview-view" }, i)
+      /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("div", { className: "k-scrollview-view" }, i)
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)(
     "div",
     {
       ...other,
@@ -15454,44 +15960,44 @@ var ScrollView = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("div", { className: classNames(
+        /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("div", { className: classNames(
           "k-scrollview-wrap",
           {
             ["k-scrollview-animate"]: animate
           }
         ), style: { "--kendo-scrollview-views": views, "--kendo-scrollview-current": 5 }, children: scrollviewViews }),
-        /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)("div", { className: "k-scrollview-elements", children: [
-          arrows && /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)(import_jsx_runtime431.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-scrollview-prev", children: /* @__PURE__ */ (0, import_jsx_runtime431.jsx)(Icon, { icon: iconPrev, size: "xxxlarge" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-scrollview-next", children: /* @__PURE__ */ (0, import_jsx_runtime431.jsx)(Icon, { icon: iconNext, size: "xxxlarge" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)("div", { className: "k-scrollview-elements", children: [
+          arrows && /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)(import_jsx_runtime447.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-scrollview-prev", children: /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(Icon, { icon: iconPrev, size: "xxxlarge" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-scrollview-next", children: /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(Icon, { icon: iconNext, size: "xxxlarge" }) })
           ] }),
-          pager && /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("div", { className: "k-scrollview-nav-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)("div", { className: "k-scrollview-nav", children: [
-            mode === "light" && /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)(import_jsx_runtime431.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link k-primary k-focus" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link k-focus" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link" })
+          pager && /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("div", { className: "k-scrollview-nav-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)("div", { className: "k-scrollview-nav", children: [
+            mode === "light" && /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)(import_jsx_runtime447.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link k-primary k-focus" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link k-focus" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link" })
             ] }),
-            mode === "normal" && /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)(import_jsx_runtime431.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } })
+            mode === "normal" && /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)(import_jsx_runtime447.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.8)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } })
             ] }),
-            mode === "dark" && /* @__PURE__ */ (0, import_jsx_runtime431.jsxs)(import_jsx_runtime431.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link k-primary" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link" }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime431.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } })
+            mode === "dark" && /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)(import_jsx_runtime447.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link k-primary" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link" }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.65)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-link", style: { transform: "scale(0.5)" } })
             ] })
           ] }) })
         ] })
@@ -15499,83 +16005,83 @@ var ScrollView = (props) => {
     }
   );
 };
-ScrollView.states = states151;
-ScrollView.options = options138;
+ScrollView.states = states162;
+ScrollView.options = options149;
 ScrollView.className = SCROLLVIEW_CLASSNAME;
-ScrollView.defaultProps = defaultProps139;
+ScrollView.defaultProps = defaultProps150;
 
 // src/scrollview/templates/scrollview-normal.tsx
-var import_jsx_runtime432 = require("react/jsx-runtime");
+var import_jsx_runtime448 = require("react/jsx-runtime");
 
 // src/prompt/prompt.spec.tsx
-var import_jsx_runtime433 = require("react/jsx-runtime");
+var import_jsx_runtime449 = require("react/jsx-runtime");
 var PROMPT_CLASSNAME = `k-prompt`;
-var states152 = [];
-var options139 = {};
-var defaultProps140 = {};
+var states163 = [];
+var options150 = {};
+var defaultProps151 = {};
 var Prompt = (props) => {
   const {
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime433.jsx)("div", { ...other, className: classNames(props.className, PROMPT_CLASSNAME), children: /* @__PURE__ */ (0, import_jsx_runtime433.jsx)(import_jsx_runtime433.Fragment, { children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime449.jsx)("div", { ...other, className: classNames(props.className, PROMPT_CLASSNAME), children: /* @__PURE__ */ (0, import_jsx_runtime449.jsx)(import_jsx_runtime449.Fragment, { children: props.children }) });
 };
-Prompt.states = states152;
-Prompt.options = options139;
+Prompt.states = states163;
+Prompt.options = options150;
 Prompt.className = PROMPT_CLASSNAME;
-Prompt.defaultProps = defaultProps140;
+Prompt.defaultProps = defaultProps151;
 
 // src/prompt/prompt-header.tsx
-var import_jsx_runtime434 = require("react/jsx-runtime");
+var import_jsx_runtime450 = require("react/jsx-runtime");
 
 // src/prompt/prompt-content.tsx
-var import_jsx_runtime435 = require("react/jsx-runtime");
+var import_jsx_runtime451 = require("react/jsx-runtime");
 
 // src/prompt/prompt-view.tsx
-var import_jsx_runtime436 = require("react/jsx-runtime");
+var import_jsx_runtime452 = require("react/jsx-runtime");
 
 // src/prompt/prompt-footer.tsx
-var import_jsx_runtime437 = require("react/jsx-runtime");
+var import_jsx_runtime453 = require("react/jsx-runtime");
 
 // src/prompt/prompt-suggestion.tsx
-var import_jsx_runtime438 = require("react/jsx-runtime");
+var import_jsx_runtime454 = require("react/jsx-runtime");
 
 // src/prompt/prompt-setting.tsx
-var import_jsx_runtime439 = require("react/jsx-runtime");
+var import_jsx_runtime455 = require("react/jsx-runtime");
 
 // src/prompt/templates/prompt-normal.tsx
-var import_jsx_runtime440 = require("react/jsx-runtime");
+var import_jsx_runtime456 = require("react/jsx-runtime");
 
 // src/prompt/templates/prompt-suggestions.tsx
-var import_jsx_runtime441 = require("react/jsx-runtime");
+var import_jsx_runtime457 = require("react/jsx-runtime");
 
 // src/prompt/templates/prompt-settings.tsx
-var import_jsx_runtime442 = require("react/jsx-runtime");
+var import_jsx_runtime458 = require("react/jsx-runtime");
 
 // src/prompt/templates/prompt-output.tsx
-var import_jsx_runtime443 = require("react/jsx-runtime");
+var import_jsx_runtime459 = require("react/jsx-runtime");
 
 // src/prompt/templates/prompt-more-actions.tsx
-var import_jsx_runtime444 = require("react/jsx-runtime");
+var import_jsx_runtime460 = require("react/jsx-runtime");
 
 // src/prompt/templates/prompt-popup.tsx
-var import_jsx_runtime445 = require("react/jsx-runtime");
+var import_jsx_runtime461 = require("react/jsx-runtime");
 
 // src/orgchart/orgchart.spec.tsx
-var import_jsx_runtime446 = require("react/jsx-runtime");
+var import_jsx_runtime462 = require("react/jsx-runtime");
 var ORGCHART_CLASSNAME = `k-orgchart`;
-var states153 = [];
-var options140 = {};
-var defaultProps141 = {
+var states164 = [];
+var options151 = {};
+var defaultProps152 = {
   width: "100%",
   height: "300px"
 };
 var Orgchart = (props) => {
   const {
-    width = defaultProps141.width,
-    height = defaultProps141.height,
+    width = defaultProps152.width,
+    height = defaultProps152.height,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime446.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime462.jsx)(
     "div",
     {
       ...other,
@@ -15583,19 +16089,19 @@ var Orgchart = (props) => {
         props.className,
         ORGCHART_CLASSNAME
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime446.jsx)("div", { className: "k-orgchart-container", style: { width, height }, children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime462.jsx)("div", { className: "k-orgchart-container", style: { width, height }, children: props.children })
     }
   );
 };
-Orgchart.states = states153;
-Orgchart.options = options140;
+Orgchart.states = states164;
+Orgchart.options = options151;
 Orgchart.className = ORGCHART_CLASSNAME;
-Orgchart.defaultProps = defaultProps141;
+Orgchart.defaultProps = defaultProps152;
 
 // src/orgchart/orgchart-node.tsx
-var import_jsx_runtime447 = require("react/jsx-runtime");
+var import_jsx_runtime463 = require("react/jsx-runtime");
 var ORGCHARTNODE_CLASSNAME = `k-orgchart-node`;
-var defaultProps142 = {
+var defaultProps153 = {
   buttonIcon: "plus"
 };
 var OrgchartNode = (props) => {
@@ -15607,12 +16113,12 @@ var OrgchartNode = (props) => {
     lineBottom,
     lineTop,
     button,
-    buttonIcon: buttonIcon2 = defaultProps142.buttonIcon,
+    buttonIcon: buttonIcon2 = defaultProps153.buttonIcon,
     avatar,
     avatarType,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime463.jsxs)(
     "div",
     {
       ...other,
@@ -15623,35 +16129,35 @@ var OrgchartNode = (props) => {
         "k-align-items-center"
       ),
       children: [
-        lineTop && /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(Card, { className: "k-orgchart-card", children: /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)(CardBody, { className: "k-hstack", details, style: { borderTopColor: color }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(Avatar, { type: avatarType, themeColor: "secondary", children: avatarType === "image" ? /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("img", { src: avatar }) : avatar }),
-          /* @__PURE__ */ (0, import_jsx_runtime447.jsxs)("div", { className: "k-card-title-wrap k-vstack", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(CardTitle, { className: "k-text-ellipsis", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-spacer" }),
-            /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(CardSubtitle, { className: "k-text-ellipsis", children: subtitle })
+        lineTop && /* @__PURE__ */ (0, import_jsx_runtime463.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        /* @__PURE__ */ (0, import_jsx_runtime463.jsx)(Card, { className: "k-orgchart-card", children: /* @__PURE__ */ (0, import_jsx_runtime463.jsxs)(CardBody, { className: "k-hstack", details, style: { borderTopColor: color }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime463.jsx)(Avatar, { type: avatarType, themeColor: "secondary", children: avatarType === "image" ? /* @__PURE__ */ (0, import_jsx_runtime463.jsx)("img", { src: avatar }) : avatar }),
+          /* @__PURE__ */ (0, import_jsx_runtime463.jsxs)("div", { className: "k-card-title-wrap k-vstack", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime463.jsx)(CardTitle, { className: "k-text-ellipsis", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime463.jsx)("span", { className: "k-spacer" }),
+            /* @__PURE__ */ (0, import_jsx_runtime463.jsx)(CardSubtitle, { className: "k-text-ellipsis", children: subtitle })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("span", { className: "k-spacer" })
+          /* @__PURE__ */ (0, import_jsx_runtime463.jsx)("span", { className: "k-spacer" })
         ] }) }),
-        lineBottom && /* @__PURE__ */ (0, import_jsx_runtime447.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        button && /* @__PURE__ */ (0, import_jsx_runtime447.jsx)(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
+        lineBottom && /* @__PURE__ */ (0, import_jsx_runtime463.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        button && /* @__PURE__ */ (0, import_jsx_runtime463.jsx)(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
       ]
     }
   );
 };
 
 // src/orgchart/orgchart-group.tsx
-var import_jsx_runtime448 = require("react/jsx-runtime");
+var import_jsx_runtime464 = require("react/jsx-runtime");
 var ORGCHARTGROUP_CLASSNAME = `k-orgchart-group`;
-var states154 = [];
-var options141 = {};
-var defaultProps143 = {
+var states165 = [];
+var options152 = {};
+var defaultProps154 = {
   orientation: "horizontal"
 };
 var OrgchartGroup = (props) => {
   const {
     children,
-    orientation = defaultProps143.orientation,
+    orientation = defaultProps154.orientation,
     justifyContent,
     ...other
   } = props;
@@ -15674,7 +16180,7 @@ var OrgchartGroup = (props) => {
       }
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime448.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime464.jsxs)(
     "div",
     {
       ...other,
@@ -15688,7 +16194,7 @@ var OrgchartGroup = (props) => {
       ),
       style: { width: "100%" },
       children: [
-        chartNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime448.jsx)(
+        chartNodes.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime464.jsx)(
           "div",
           {
             className: classNames(
@@ -15698,26 +16204,26 @@ var OrgchartGroup = (props) => {
                 [`k-${kendoThemeMaps.orientationMap[orientation] || orientation}`]: orientation
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime448.jsx)(import_jsx_runtime448.Fragment, { children: chartNodes })
+            children: /* @__PURE__ */ (0, import_jsx_runtime464.jsx)(import_jsx_runtime464.Fragment, { children: chartNodes })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime448.jsx)(import_jsx_runtime448.Fragment, { children: chartGroups })
+        /* @__PURE__ */ (0, import_jsx_runtime464.jsx)(import_jsx_runtime464.Fragment, { children: chartGroups })
       ]
     }
   );
 };
-OrgchartGroup.states = states154;
-OrgchartGroup.options = options141;
+OrgchartGroup.states = states165;
+OrgchartGroup.options = options152;
 OrgchartGroup.className = ORGCHARTGROUP_CLASSNAME;
-OrgchartGroup.defaultProps = defaultProps143;
+OrgchartGroup.defaultProps = defaultProps154;
 
 // src/orgchart/orgchart-node-group.tsx
-var import_jsx_runtime449 = require("react/jsx-runtime");
+var import_jsx_runtime465 = require("react/jsx-runtime");
 var ORGCHARTNODEGROUP_CLASSNAME = `k-orgchart-node-group`;
-var states155 = [
+var states166 = [
   States.focus
 ];
-var defaultProps144 = {
+var defaultProps155 = {
   orientation: "horizontal",
   buttonIcon: "plus"
 };
@@ -15728,12 +16234,12 @@ var OrgchartNodeGroup = (props) => {
     lineBottom,
     lineTop,
     button,
-    buttonIcon: buttonIcon2 = defaultProps144.buttonIcon,
+    buttonIcon: buttonIcon2 = defaultProps155.buttonIcon,
     focus,
-    orientation = defaultProps144.orientation,
+    orientation = defaultProps155.orientation,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime449.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime465.jsxs)(
     "div",
     {
       ...other,
@@ -15744,8 +16250,8 @@ var OrgchartNodeGroup = (props) => {
         "k-align-items-center"
       ),
       children: [
-        lineTop && /* @__PURE__ */ (0, import_jsx_runtime449.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        /* @__PURE__ */ (0, import_jsx_runtime449.jsxs)(
+        lineTop && /* @__PURE__ */ (0, import_jsx_runtime465.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        /* @__PURE__ */ (0, import_jsx_runtime465.jsxs)(
           "div",
           {
             className: classNames(
@@ -15756,9 +16262,9 @@ var OrgchartNodeGroup = (props) => {
               })
             ),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime449.jsx)("div", { className: "k-orgchart-node-group-title", children: title }),
-              subtitle && /* @__PURE__ */ (0, import_jsx_runtime449.jsx)("div", { className: "k-orgchart-node-group-subtitle", children: subtitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime449.jsx)(
+              title && /* @__PURE__ */ (0, import_jsx_runtime465.jsx)("div", { className: "k-orgchart-node-group-title", children: title }),
+              subtitle && /* @__PURE__ */ (0, import_jsx_runtime465.jsx)("div", { className: "k-orgchart-node-group-subtitle", children: subtitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime465.jsx)(
                 "div",
                 {
                   className: classNames(
@@ -15773,51 +16279,51 @@ var OrgchartNodeGroup = (props) => {
             ]
           }
         ),
-        lineBottom && /* @__PURE__ */ (0, import_jsx_runtime449.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
-        button && /* @__PURE__ */ (0, import_jsx_runtime449.jsx)(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
+        lineBottom && /* @__PURE__ */ (0, import_jsx_runtime465.jsx)("div", { className: "k-orgchart-line k-orgchart-line-v" }),
+        button && /* @__PURE__ */ (0, import_jsx_runtime465.jsx)(Button, { className: "k-orgchart-button", icon: buttonIcon2 })
       ]
     }
   );
 };
-OrgchartNodeGroup.states = states155;
+OrgchartNodeGroup.states = states166;
 
 // src/orgchart/templates/orgchart-normal.tsx
-var import_jsx_runtime450 = require("react/jsx-runtime");
+var import_jsx_runtime466 = require("react/jsx-runtime");
 
 // src/orgchart/templates/orgchart-vertical.tsx
-var import_jsx_runtime451 = require("react/jsx-runtime");
+var import_jsx_runtime467 = require("react/jsx-runtime");
 
 // src/orgchart/templates/orgchart-group-normal.tsx
-var import_jsx_runtime452 = require("react/jsx-runtime");
+var import_jsx_runtime468 = require("react/jsx-runtime");
 
 // src/orgchart/templates/orgchart-group-vertical.tsx
-var import_jsx_runtime453 = require("react/jsx-runtime");
+var import_jsx_runtime469 = require("react/jsx-runtime");
 
 // src/signature/signature.spec.tsx
-var import_jsx_runtime454 = require("react/jsx-runtime");
+var import_jsx_runtime470 = require("react/jsx-runtime");
 var SIGNATURE_CLASSNAME = `k-signature`;
-var states156 = [
+var states167 = [
   States.hover,
   States.focus,
   States.valid,
   States.invalid,
   States.disabled
 ];
-var options142 = {
+var options153 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultProps145 = {
+var defaultProps156 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid
 };
 var Signature = (props) => {
   const {
-    size = defaultProps145.size,
-    rounded = defaultProps145.rounded,
-    fillMode = defaultProps145.fillMode,
+    size = defaultProps156.size,
+    rounded = defaultProps156.rounded,
+    fillMode = defaultProps156.fillMode,
     hover,
     focus,
     valid,
@@ -15826,7 +16332,7 @@ var Signature = (props) => {
     maximized,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime454.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime470.jsxs)(
     "div",
     {
       ...other,
@@ -15854,8 +16360,8 @@ var Signature = (props) => {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime454.jsx)("canvas", { className: "k-signature-canvas" }),
-        /* @__PURE__ */ (0, import_jsx_runtime454.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime470.jsx)("canvas", { className: "k-signature-canvas" }),
+        /* @__PURE__ */ (0, import_jsx_runtime470.jsxs)(
           "div",
           {
             className: classNames(
@@ -15863,7 +16369,7 @@ var Signature = (props) => {
               "k-signature-actions-top"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime454.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime470.jsx)(
                 Button,
                 {
                   className: classNames(
@@ -15877,7 +16383,7 @@ var Signature = (props) => {
                   fillMode: "flat"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime454.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime470.jsx)(
                 Button,
                 {
                   className: classNames(
@@ -15894,15 +16400,15 @@ var Signature = (props) => {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime454.jsx)("div", { className: "k-signature-line" }),
-        /* @__PURE__ */ (0, import_jsx_runtime454.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime470.jsx)("div", { className: "k-signature-line" }),
+        /* @__PURE__ */ (0, import_jsx_runtime470.jsx)(
           "div",
           {
             className: classNames(
               "k-signature-actions",
               "k-signature-actions-bottom"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime454.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime470.jsx)(
               Button,
               {
                 className: classNames(
@@ -15921,27 +16427,27 @@ var Signature = (props) => {
     }
   );
 };
-Signature.states = states156;
-Signature.options = options142;
+Signature.states = states167;
+Signature.options = options153;
 Signature.className = SIGNATURE_CLASSNAME;
-Signature.defaultProps = defaultProps145;
+Signature.defaultProps = defaultProps156;
 
 // src/editor/editor.spec.tsx
-var import_jsx_runtime455 = require("react/jsx-runtime");
+var import_jsx_runtime471 = require("react/jsx-runtime");
 var EDITOR_CLASSNAME = `k-editor`;
-var states157 = [
+var states168 = [
   States.readonly,
   States.disabled
 ];
-var options143 = {};
-var defaultProps146 = {};
+var options154 = {};
+var defaultProps157 = {};
 var Editor = (props) => {
   const {
     readonly,
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime455.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime471.jsx)(
     "div",
     {
       ...other,
@@ -15957,764 +16463,764 @@ var Editor = (props) => {
     }
   );
 };
-Editor.states = states157;
-Editor.options = options143;
+Editor.states = states168;
+Editor.options = options154;
 Editor.className = EDITOR_CLASSNAME;
-Editor.defaultProps = defaultProps146;
+Editor.defaultProps = defaultProps157;
 
 // src/editor/editor-toolbar.tsx
-var import_jsx_runtime456 = require("react/jsx-runtime");
+var import_jsx_runtime472 = require("react/jsx-runtime");
 
 // src/editor/editor-content.tsx
-var import_jsx_runtime457 = require("react/jsx-runtime");
-var states158 = [
+var import_jsx_runtime473 = require("react/jsx-runtime");
+var states169 = [
   States.focus
 ];
 
 // src/editor/templates/editor-normal.tsx
-var import_jsx_runtime458 = require("react/jsx-runtime");
+var import_jsx_runtime474 = require("react/jsx-runtime");
 
 // src/utils/templates/background/background-clip/border-clip.tsx
-var import_jsx_runtime459 = require("react/jsx-runtime");
+var import_jsx_runtime475 = require("react/jsx-runtime");
 
 // src/utils/templates/background/background-clip/content-clip.tsx
-var import_jsx_runtime460 = require("react/jsx-runtime");
+var import_jsx_runtime476 = require("react/jsx-runtime");
 
 // src/utils/templates/background/background-clip/padding-clip.tsx
-var import_jsx_runtime461 = require("react/jsx-runtime");
+var import_jsx_runtime477 = require("react/jsx-runtime");
 
 // src/utils/templates/background/background-clip/text-clip.tsx
-var import_jsx_runtime462 = require("react/jsx-runtime");
+var import_jsx_runtime478 = require("react/jsx-runtime");
 
 // src/utils/templates/background/background-color/color.tsx
-var import_jsx_runtime463 = require("react/jsx-runtime");
+var import_jsx_runtime479 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-color/all-sides.tsx
-var import_jsx_runtime464 = require("react/jsx-runtime");
+var import_jsx_runtime480 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-color/individual.tsx
-var import_jsx_runtime465 = require("react/jsx-runtime");
+var import_jsx_runtime481 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-color/left-right.tsx
-var import_jsx_runtime466 = require("react/jsx-runtime");
+var import_jsx_runtime482 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-color/top-bottom.tsx
-var import_jsx_runtime467 = require("react/jsx-runtime");
+var import_jsx_runtime483 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-radius/corners.tsx
-var import_jsx_runtime468 = require("react/jsx-runtime");
+var import_jsx_runtime484 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-radius/no-rounding.tsx
-var import_jsx_runtime469 = require("react/jsx-runtime");
+var import_jsx_runtime485 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-radius/rounding.tsx
-var import_jsx_runtime470 = require("react/jsx-runtime");
+var import_jsx_runtime486 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-radius/sides.tsx
-var import_jsx_runtime471 = require("react/jsx-runtime");
+var import_jsx_runtime487 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-style/all-sides.tsx
-var import_jsx_runtime472 = require("react/jsx-runtime");
+var import_jsx_runtime488 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-style/individual.tsx
-var import_jsx_runtime473 = require("react/jsx-runtime");
+var import_jsx_runtime489 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-style/left-right.tsx
-var import_jsx_runtime474 = require("react/jsx-runtime");
+var import_jsx_runtime490 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-style/no-style.tsx
-var import_jsx_runtime475 = require("react/jsx-runtime");
+var import_jsx_runtime491 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-style/top-bottom.tsx
-var import_jsx_runtime476 = require("react/jsx-runtime");
+var import_jsx_runtime492 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-width/all-sides.tsx
-var import_jsx_runtime477 = require("react/jsx-runtime");
+var import_jsx_runtime493 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-width/individual.tsx
-var import_jsx_runtime478 = require("react/jsx-runtime");
+var import_jsx_runtime494 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-width/left-right.tsx
-var import_jsx_runtime479 = require("react/jsx-runtime");
+var import_jsx_runtime495 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/border-width/top-bottom.tsx
-var import_jsx_runtime480 = require("react/jsx-runtime");
+var import_jsx_runtime496 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/outline-color/all-sides.tsx
-var import_jsx_runtime481 = require("react/jsx-runtime");
+var import_jsx_runtime497 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/outline-offset/all-sides.tsx
-var import_jsx_runtime482 = require("react/jsx-runtime");
+var import_jsx_runtime498 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/outline-offset/no-offset.tsx
-var import_jsx_runtime483 = require("react/jsx-runtime");
+var import_jsx_runtime499 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/outline-style/all-sides.tsx
-var import_jsx_runtime484 = require("react/jsx-runtime");
+var import_jsx_runtime500 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/outline-style/no-style.tsx
-var import_jsx_runtime485 = require("react/jsx-runtime");
+var import_jsx_runtime501 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/outline-width/all-sides.tsx
-var import_jsx_runtime486 = require("react/jsx-runtime");
+var import_jsx_runtime502 = require("react/jsx-runtime");
 
 // src/utils/templates/borders/outline-width/no-width.tsx
-var import_jsx_runtime487 = require("react/jsx-runtime");
+var import_jsx_runtime503 = require("react/jsx-runtime");
 
 // src/utils/templates/effects/opacity/applying.tsx
-var import_jsx_runtime488 = require("react/jsx-runtime");
+var import_jsx_runtime504 = require("react/jsx-runtime");
 
 // src/utils/templates/filters/backdrop-blur/applying.tsx
-var import_jsx_runtime489 = require("react/jsx-runtime");
+var import_jsx_runtime505 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/around.tsx
-var import_jsx_runtime490 = require("react/jsx-runtime");
+var import_jsx_runtime506 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/between.tsx
-var import_jsx_runtime491 = require("react/jsx-runtime");
+var import_jsx_runtime507 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/center.tsx
-var import_jsx_runtime492 = require("react/jsx-runtime");
+var import_jsx_runtime508 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/end.tsx
-var import_jsx_runtime493 = require("react/jsx-runtime");
+var import_jsx_runtime509 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/evenly.tsx
-var import_jsx_runtime494 = require("react/jsx-runtime");
+var import_jsx_runtime510 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/normal.tsx
-var import_jsx_runtime495 = require("react/jsx-runtime");
+var import_jsx_runtime511 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/start.tsx
-var import_jsx_runtime496 = require("react/jsx-runtime");
+var import_jsx_runtime512 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-content/stretch.tsx
-var import_jsx_runtime497 = require("react/jsx-runtime");
+var import_jsx_runtime513 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-items/baseline.tsx
-var import_jsx_runtime498 = require("react/jsx-runtime");
+var import_jsx_runtime514 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-items/center.tsx
-var import_jsx_runtime499 = require("react/jsx-runtime");
+var import_jsx_runtime515 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-items/end.tsx
-var import_jsx_runtime500 = require("react/jsx-runtime");
+var import_jsx_runtime516 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-items/start.tsx
-var import_jsx_runtime501 = require("react/jsx-runtime");
+var import_jsx_runtime517 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-items/stretch.tsx
-var import_jsx_runtime502 = require("react/jsx-runtime");
+var import_jsx_runtime518 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-self/baseline.tsx
-var import_jsx_runtime503 = require("react/jsx-runtime");
+var import_jsx_runtime519 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-self/center.tsx
-var import_jsx_runtime504 = require("react/jsx-runtime");
+var import_jsx_runtime520 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-self/end.tsx
-var import_jsx_runtime505 = require("react/jsx-runtime");
+var import_jsx_runtime521 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-self/start.tsx
-var import_jsx_runtime506 = require("react/jsx-runtime");
+var import_jsx_runtime522 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/align-self/stretch.tsx
-var import_jsx_runtime507 = require("react/jsx-runtime");
+var import_jsx_runtime523 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex/auto.tsx
-var import_jsx_runtime508 = require("react/jsx-runtime");
+var import_jsx_runtime524 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex/flex-1.tsx
-var import_jsx_runtime509 = require("react/jsx-runtime");
+var import_jsx_runtime525 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex/initial.tsx
-var import_jsx_runtime510 = require("react/jsx-runtime");
+var import_jsx_runtime526 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex/none.tsx
-var import_jsx_runtime511 = require("react/jsx-runtime");
+var import_jsx_runtime527 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-basis/auto.tsx
-var import_jsx_runtime512 = require("react/jsx-runtime");
+var import_jsx_runtime528 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-basis/size.tsx
-var import_jsx_runtime513 = require("react/jsx-runtime");
+var import_jsx_runtime529 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-direction/column-reverse.tsx
-var import_jsx_runtime514 = require("react/jsx-runtime");
+var import_jsx_runtime530 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-direction/column.tsx
-var import_jsx_runtime515 = require("react/jsx-runtime");
+var import_jsx_runtime531 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-direction/row-reverse.tsx
-var import_jsx_runtime516 = require("react/jsx-runtime");
+var import_jsx_runtime532 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-direction/row.tsx
-var import_jsx_runtime517 = require("react/jsx-runtime");
+var import_jsx_runtime533 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-grow/grow-0.tsx
-var import_jsx_runtime518 = require("react/jsx-runtime");
+var import_jsx_runtime534 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-grow/grow-1.tsx
-var import_jsx_runtime519 = require("react/jsx-runtime");
+var import_jsx_runtime535 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-srink/shrink-0.tsx
-var import_jsx_runtime520 = require("react/jsx-runtime");
+var import_jsx_runtime536 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-srink/shrink-1.tsx
-var import_jsx_runtime521 = require("react/jsx-runtime");
+var import_jsx_runtime537 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-wrap/nowrap.tsx
-var import_jsx_runtime522 = require("react/jsx-runtime");
+var import_jsx_runtime538 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-wrap/wrap-reverse.tsx
-var import_jsx_runtime523 = require("react/jsx-runtime");
+var import_jsx_runtime539 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/flex-wrap/wrap.tsx
-var import_jsx_runtime524 = require("react/jsx-runtime");
+var import_jsx_runtime540 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/gap/size-x-y.tsx
-var import_jsx_runtime525 = require("react/jsx-runtime");
+var import_jsx_runtime541 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/gap/size.tsx
-var import_jsx_runtime526 = require("react/jsx-runtime");
+var import_jsx_runtime542 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-cols/auto.tsx
-var import_jsx_runtime527 = require("react/jsx-runtime");
+var import_jsx_runtime543 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-cols/fr.tsx
-var import_jsx_runtime528 = require("react/jsx-runtime");
+var import_jsx_runtime544 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-cols/max.tsx
-var import_jsx_runtime529 = require("react/jsx-runtime");
+var import_jsx_runtime545 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-cols/min.tsx
-var import_jsx_runtime530 = require("react/jsx-runtime");
+var import_jsx_runtime546 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-flow/column.tsx
-var import_jsx_runtime531 = require("react/jsx-runtime");
+var import_jsx_runtime547 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-flow/dense.tsx
-var import_jsx_runtime532 = require("react/jsx-runtime");
+var import_jsx_runtime548 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-flow/row.tsx
-var import_jsx_runtime533 = require("react/jsx-runtime");
+var import_jsx_runtime549 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-rows/auto.tsx
-var import_jsx_runtime534 = require("react/jsx-runtime");
+var import_jsx_runtime550 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-rows/fr.tsx
-var import_jsx_runtime535 = require("react/jsx-runtime");
+var import_jsx_runtime551 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-auto-rows/min.tsx
-var import_jsx_runtime536 = require("react/jsx-runtime");
+var import_jsx_runtime552 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-col-start-end/start-end-n.tsx
-var import_jsx_runtime537 = require("react/jsx-runtime");
+var import_jsx_runtime553 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-row-start-end/start-end-n.tsx
-var import_jsx_runtime538 = require("react/jsx-runtime");
+var import_jsx_runtime554 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-template-cols/integer.tsx
-var import_jsx_runtime539 = require("react/jsx-runtime");
+var import_jsx_runtime555 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/grid-template-rows/integer.tsx
-var import_jsx_runtime540 = require("react/jsx-runtime");
+var import_jsx_runtime556 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/around.tsx
-var import_jsx_runtime541 = require("react/jsx-runtime");
+var import_jsx_runtime557 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/between.tsx
-var import_jsx_runtime542 = require("react/jsx-runtime");
+var import_jsx_runtime558 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/center.tsx
-var import_jsx_runtime543 = require("react/jsx-runtime");
+var import_jsx_runtime559 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/end.tsx
-var import_jsx_runtime544 = require("react/jsx-runtime");
+var import_jsx_runtime560 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/evenly.tsx
-var import_jsx_runtime545 = require("react/jsx-runtime");
+var import_jsx_runtime561 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/normal.tsx
-var import_jsx_runtime546 = require("react/jsx-runtime");
+var import_jsx_runtime562 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/start.tsx
-var import_jsx_runtime547 = require("react/jsx-runtime");
+var import_jsx_runtime563 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-content/stretch.tsx
-var import_jsx_runtime548 = require("react/jsx-runtime");
+var import_jsx_runtime564 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-items/center.tsx
-var import_jsx_runtime549 = require("react/jsx-runtime");
+var import_jsx_runtime565 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-items/end.tsx
-var import_jsx_runtime550 = require("react/jsx-runtime");
+var import_jsx_runtime566 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-items/start.tsx
-var import_jsx_runtime551 = require("react/jsx-runtime");
+var import_jsx_runtime567 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-items/stretch.tsx
-var import_jsx_runtime552 = require("react/jsx-runtime");
+var import_jsx_runtime568 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-self/center.tsx
-var import_jsx_runtime553 = require("react/jsx-runtime");
+var import_jsx_runtime569 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-self/end.tsx
-var import_jsx_runtime554 = require("react/jsx-runtime");
+var import_jsx_runtime570 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-self/start.tsx
-var import_jsx_runtime555 = require("react/jsx-runtime");
+var import_jsx_runtime571 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/justify-self/stretch.tsx
-var import_jsx_runtime556 = require("react/jsx-runtime");
+var import_jsx_runtime572 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/order/first.tsx
-var import_jsx_runtime557 = require("react/jsx-runtime");
+var import_jsx_runtime573 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/order/integer.tsx
-var import_jsx_runtime558 = require("react/jsx-runtime");
+var import_jsx_runtime574 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/order/last.tsx
-var import_jsx_runtime559 = require("react/jsx-runtime");
+var import_jsx_runtime575 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/around.tsx
-var import_jsx_runtime560 = require("react/jsx-runtime");
+var import_jsx_runtime576 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/between.tsx
-var import_jsx_runtime561 = require("react/jsx-runtime");
+var import_jsx_runtime577 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/center.tsx
-var import_jsx_runtime562 = require("react/jsx-runtime");
+var import_jsx_runtime578 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/end.tsx
-var import_jsx_runtime563 = require("react/jsx-runtime");
+var import_jsx_runtime579 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/evenly.tsx
-var import_jsx_runtime564 = require("react/jsx-runtime");
+var import_jsx_runtime580 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/normal.tsx
-var import_jsx_runtime565 = require("react/jsx-runtime");
+var import_jsx_runtime581 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/start.tsx
-var import_jsx_runtime566 = require("react/jsx-runtime");
+var import_jsx_runtime582 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-content/stretch.tsx
-var import_jsx_runtime567 = require("react/jsx-runtime");
+var import_jsx_runtime583 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-items/center.tsx
-var import_jsx_runtime568 = require("react/jsx-runtime");
+var import_jsx_runtime584 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-items/end.tsx
-var import_jsx_runtime569 = require("react/jsx-runtime");
+var import_jsx_runtime585 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-items/start.tsx
-var import_jsx_runtime570 = require("react/jsx-runtime");
+var import_jsx_runtime586 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-items/stretch.tsx
-var import_jsx_runtime571 = require("react/jsx-runtime");
+var import_jsx_runtime587 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/center.tsx
-var import_jsx_runtime572 = require("react/jsx-runtime");
+var import_jsx_runtime588 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/end.tsx
-var import_jsx_runtime573 = require("react/jsx-runtime");
+var import_jsx_runtime589 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/start.tsx
-var import_jsx_runtime574 = require("react/jsx-runtime");
+var import_jsx_runtime590 = require("react/jsx-runtime");
 
 // src/utils/templates/flex-grid/place-self/stretch.tsx
-var import_jsx_runtime575 = require("react/jsx-runtime");
+var import_jsx_runtime591 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/appearance/applying.tsx
-var import_jsx_runtime576 = require("react/jsx-runtime");
+var import_jsx_runtime592 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/appearance/none.tsx
-var import_jsx_runtime577 = require("react/jsx-runtime");
+var import_jsx_runtime593 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/cursor/applying.tsx
-var import_jsx_runtime578 = require("react/jsx-runtime");
+var import_jsx_runtime594 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/pointer-events/applying.tsx
-var import_jsx_runtime579 = require("react/jsx-runtime");
+var import_jsx_runtime595 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/all-directions.tsx
-var import_jsx_runtime580 = require("react/jsx-runtime");
+var import_jsx_runtime596 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/horizontal.tsx
-var import_jsx_runtime581 = require("react/jsx-runtime");
+var import_jsx_runtime597 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/no-resizing.tsx
-var import_jsx_runtime582 = require("react/jsx-runtime");
+var import_jsx_runtime598 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/resize/vertical.tsx
-var import_jsx_runtime583 = require("react/jsx-runtime");
+var import_jsx_runtime599 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/auto.tsx
-var import_jsx_runtime584 = require("react/jsx-runtime");
+var import_jsx_runtime600 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/horizontal.tsx
-var import_jsx_runtime585 = require("react/jsx-runtime");
+var import_jsx_runtime601 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/none.tsx
-var import_jsx_runtime586 = require("react/jsx-runtime");
+var import_jsx_runtime602 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/touch-action/vertical.tsx
-var import_jsx_runtime587 = require("react/jsx-runtime");
+var import_jsx_runtime603 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/user-select/all.tsx
-var import_jsx_runtime588 = require("react/jsx-runtime");
+var import_jsx_runtime604 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/user-select/none.tsx
-var import_jsx_runtime589 = require("react/jsx-runtime");
+var import_jsx_runtime605 = require("react/jsx-runtime");
 
 // src/utils/templates/interactivity/user-select/text.tsx
-var import_jsx_runtime590 = require("react/jsx-runtime");
+var import_jsx_runtime606 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/auto.tsx
-var import_jsx_runtime591 = require("react/jsx-runtime");
+var import_jsx_runtime607 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/one.tsx
-var import_jsx_runtime592 = require("react/jsx-runtime");
+var import_jsx_runtime608 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/sqaure.tsx
-var import_jsx_runtime593 = require("react/jsx-runtime");
+var import_jsx_runtime609 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/aspect-ratio/video.tsx
-var import_jsx_runtime594 = require("react/jsx-runtime");
+var import_jsx_runtime610 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/box-sizing/border.tsx
-var import_jsx_runtime595 = require("react/jsx-runtime");
+var import_jsx_runtime611 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/box-sizing/content.tsx
-var import_jsx_runtime596 = require("react/jsx-runtime");
+var import_jsx_runtime612 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/both.tsx
-var import_jsx_runtime597 = require("react/jsx-runtime");
+var import_jsx_runtime613 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/left.tsx
-var import_jsx_runtime598 = require("react/jsx-runtime");
+var import_jsx_runtime614 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/no-clear.tsx
-var import_jsx_runtime599 = require("react/jsx-runtime");
+var import_jsx_runtime615 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/clear/right.tsx
-var import_jsx_runtime600 = require("react/jsx-runtime");
+var import_jsx_runtime616 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/columns/automatic.tsx
-var import_jsx_runtime601 = require("react/jsx-runtime");
+var import_jsx_runtime617 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/columns/count.tsx
-var import_jsx_runtime602 = require("react/jsx-runtime");
+var import_jsx_runtime618 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/block.tsx
-var import_jsx_runtime603 = require("react/jsx-runtime");
+var import_jsx_runtime619 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/flex.tsx
-var import_jsx_runtime604 = require("react/jsx-runtime");
+var import_jsx_runtime620 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/inline.tsx
-var import_jsx_runtime605 = require("react/jsx-runtime");
+var import_jsx_runtime621 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/display/none.tsx
-var import_jsx_runtime606 = require("react/jsx-runtime");
+var import_jsx_runtime622 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/float/left.tsx
-var import_jsx_runtime607 = require("react/jsx-runtime");
+var import_jsx_runtime623 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/float/no-float.tsx
-var import_jsx_runtime608 = require("react/jsx-runtime");
+var import_jsx_runtime624 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/float/right.tsx
-var import_jsx_runtime609 = require("react/jsx-runtime");
+var import_jsx_runtime625 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/contain.tsx
-var import_jsx_runtime610 = require("react/jsx-runtime");
+var import_jsx_runtime626 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/cover.tsx
-var import_jsx_runtime611 = require("react/jsx-runtime");
+var import_jsx_runtime627 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/fill.tsx
-var import_jsx_runtime612 = require("react/jsx-runtime");
+var import_jsx_runtime628 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-fit/scale-down.tsx
-var import_jsx_runtime613 = require("react/jsx-runtime");
+var import_jsx_runtime629 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/object-position/position.tsx
-var import_jsx_runtime614 = require("react/jsx-runtime");
+var import_jsx_runtime630 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/hidden.tsx
-var import_jsx_runtime615 = require("react/jsx-runtime");
+var import_jsx_runtime631 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/horizontal.tsx
-var import_jsx_runtime616 = require("react/jsx-runtime");
+var import_jsx_runtime632 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/vertical.tsx
-var import_jsx_runtime617 = require("react/jsx-runtime");
+var import_jsx_runtime633 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/overflow/visible.tsx
-var import_jsx_runtime618 = require("react/jsx-runtime");
+var import_jsx_runtime634 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/placement/multiple.tsx
-var import_jsx_runtime619 = require("react/jsx-runtime");
+var import_jsx_runtime635 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/placement/single.tsx
-var import_jsx_runtime620 = require("react/jsx-runtime");
+var import_jsx_runtime636 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/position/applying.tsx
-var import_jsx_runtime621 = require("react/jsx-runtime");
+var import_jsx_runtime637 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/visibility/invisible.tsx
-var import_jsx_runtime622 = require("react/jsx-runtime");
+var import_jsx_runtime638 = require("react/jsx-runtime");
 
 // src/utils/templates/layout/z-index/applying.tsx
-var import_jsx_runtime623 = require("react/jsx-runtime");
+var import_jsx_runtime639 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/fixed.tsx
-var import_jsx_runtime624 = require("react/jsx-runtime");
+var import_jsx_runtime640 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/full.tsx
-var import_jsx_runtime625 = require("react/jsx-runtime");
+var import_jsx_runtime641 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/maximum.tsx
-var import_jsx_runtime626 = require("react/jsx-runtime");
+var import_jsx_runtime642 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/minimum.tsx
-var import_jsx_runtime627 = require("react/jsx-runtime");
+var import_jsx_runtime643 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/height/screen.tsx
-var import_jsx_runtime628 = require("react/jsx-runtime");
+var import_jsx_runtime644 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/fixed.tsx
-var import_jsx_runtime629 = require("react/jsx-runtime");
+var import_jsx_runtime645 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/full.tsx
-var import_jsx_runtime630 = require("react/jsx-runtime");
+var import_jsx_runtime646 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/maximum.tsx
-var import_jsx_runtime631 = require("react/jsx-runtime");
+var import_jsx_runtime647 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/minimum.tsx
-var import_jsx_runtime632 = require("react/jsx-runtime");
+var import_jsx_runtime648 = require("react/jsx-runtime");
 
 // src/utils/templates/sizing/width/screen.tsx
-var import_jsx_runtime633 = require("react/jsx-runtime");
+var import_jsx_runtime649 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/all.tsx
-var import_jsx_runtime634 = require("react/jsx-runtime");
+var import_jsx_runtime650 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/single.tsx
-var import_jsx_runtime635 = require("react/jsx-runtime");
+var import_jsx_runtime651 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/x.tsx
-var import_jsx_runtime636 = require("react/jsx-runtime");
+var import_jsx_runtime652 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/margin/y.tsx
-var import_jsx_runtime637 = require("react/jsx-runtime");
+var import_jsx_runtime653 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/all.tsx
-var import_jsx_runtime638 = require("react/jsx-runtime");
+var import_jsx_runtime654 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/single.tsx
-var import_jsx_runtime639 = require("react/jsx-runtime");
+var import_jsx_runtime655 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/x.tsx
-var import_jsx_runtime640 = require("react/jsx-runtime");
+var import_jsx_runtime656 = require("react/jsx-runtime");
 
 // src/utils/templates/spacing/padding/y.tsx
-var import_jsx_runtime641 = require("react/jsx-runtime");
+var import_jsx_runtime657 = require("react/jsx-runtime");
 
 // src/utils/templates/svg/fill/color.tsx
-var import_jsx_runtime642 = require("react/jsx-runtime");
+var import_jsx_runtime658 = require("react/jsx-runtime");
 
 // src/utils/templates/svg/stroke/color.tsx
-var import_jsx_runtime643 = require("react/jsx-runtime");
+var import_jsx_runtime659 = require("react/jsx-runtime");
 
 // src/utils/templates/table/border-collapse/collapse.tsx
-var import_jsx_runtime644 = require("react/jsx-runtime");
+var import_jsx_runtime660 = require("react/jsx-runtime");
 
 // src/utils/templates/table/border-collapse/separate.tsx
-var import_jsx_runtime645 = require("react/jsx-runtime");
+var import_jsx_runtime661 = require("react/jsx-runtime");
 
 // src/utils/templates/table/table-layout/auto.tsx
-var import_jsx_runtime646 = require("react/jsx-runtime");
+var import_jsx_runtime662 = require("react/jsx-runtime");
 
 // src/utils/templates/table/table-layout/fixed.tsx
-var import_jsx_runtime647 = require("react/jsx-runtime");
+var import_jsx_runtime663 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/flip/horizontal.tsx
-var import_jsx_runtime648 = require("react/jsx-runtime");
+var import_jsx_runtime664 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/flip/vertical.tsx
-var import_jsx_runtime649 = require("react/jsx-runtime");
+var import_jsx_runtime665 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/origin/applying.tsx
-var import_jsx_runtime650 = require("react/jsx-runtime");
+var import_jsx_runtime666 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/rotate/applying.tsx
-var import_jsx_runtime651 = require("react/jsx-runtime");
+var import_jsx_runtime667 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/scale/applying.tsx
-var import_jsx_runtime652 = require("react/jsx-runtime");
+var import_jsx_runtime668 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/skew/applying.tsx
-var import_jsx_runtime653 = require("react/jsx-runtime");
+var import_jsx_runtime669 = require("react/jsx-runtime");
 
 // src/utils/templates/transform/translate/applying.tsx
-var import_jsx_runtime654 = require("react/jsx-runtime");
+var import_jsx_runtime670 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/font-style/italic.tsx
-var import_jsx_runtime655 = require("react/jsx-runtime");
+var import_jsx_runtime671 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/font-weight/size.tsx
-var import_jsx_runtime656 = require("react/jsx-runtime");
+var import_jsx_runtime672 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/list-style-type/decimal.tsx
-var import_jsx_runtime657 = require("react/jsx-runtime");
+var import_jsx_runtime673 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/list-style-type/disc.tsx
-var import_jsx_runtime658 = require("react/jsx-runtime");
+var import_jsx_runtime674 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/list-style-type/none.tsx
-var import_jsx_runtime659 = require("react/jsx-runtime");
+var import_jsx_runtime675 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/center.tsx
-var import_jsx_runtime660 = require("react/jsx-runtime");
+var import_jsx_runtime676 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/justify.tsx
-var import_jsx_runtime661 = require("react/jsx-runtime");
+var import_jsx_runtime677 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/left.tsx
-var import_jsx_runtime662 = require("react/jsx-runtime");
+var import_jsx_runtime678 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-align/right.tsx
-var import_jsx_runtime663 = require("react/jsx-runtime");
+var import_jsx_runtime679 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-color/inherit.tsx
-var import_jsx_runtime664 = require("react/jsx-runtime");
+var import_jsx_runtime680 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-color/white.tsx
-var import_jsx_runtime665 = require("react/jsx-runtime");
+var import_jsx_runtime681 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-decoration/all.tsx
-var import_jsx_runtime666 = require("react/jsx-runtime");
+var import_jsx_runtime682 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-overflow/clip.tsx
-var import_jsx_runtime667 = require("react/jsx-runtime");
+var import_jsx_runtime683 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-overflow/ellipsis.tsx
-var import_jsx_runtime668 = require("react/jsx-runtime");
+var import_jsx_runtime684 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/text-transform/all.tsx
-var import_jsx_runtime669 = require("react/jsx-runtime");
+var import_jsx_runtime685 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/baseline.tsx
-var import_jsx_runtime670 = require("react/jsx-runtime");
+var import_jsx_runtime686 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/bottom.tsx
-var import_jsx_runtime671 = require("react/jsx-runtime");
+var import_jsx_runtime687 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/center.tsx
-var import_jsx_runtime672 = require("react/jsx-runtime");
+var import_jsx_runtime688 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/vertical-align/top.tsx
-var import_jsx_runtime673 = require("react/jsx-runtime");
+var import_jsx_runtime689 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/normal.tsx
-var import_jsx_runtime674 = require("react/jsx-runtime");
+var import_jsx_runtime690 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/nowrap.tsx
-var import_jsx_runtime675 = require("react/jsx-runtime");
+var import_jsx_runtime691 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/pre-line.tsx
-var import_jsx_runtime676 = require("react/jsx-runtime");
+var import_jsx_runtime692 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/pre-wrap.tsx
-var import_jsx_runtime677 = require("react/jsx-runtime");
+var import_jsx_runtime693 = require("react/jsx-runtime");
 
 // src/utils/templates/typography/white-space/pre.tsx
-var import_jsx_runtime678 = require("react/jsx-runtime");
+var import_jsx_runtime694 = require("react/jsx-runtime");
 
 // src/multiselect/templates/multiselect-prefix.tsx
-var import_jsx_runtime679 = require("react/jsx-runtime");
-var MultiSelectPrefix = (props) => /* @__PURE__ */ (0, import_jsx_runtime679.jsx)(
+var import_jsx_runtime695 = require("react/jsx-runtime");
+var MultiSelectPrefix = (props) => /* @__PURE__ */ (0, import_jsx_runtime695.jsx)(
   multiselect_spec_default,
   {
-    prefix: /* @__PURE__ */ (0, import_jsx_runtime679.jsx)(import_jsx_runtime679.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime679.jsx)(Icon, { icon: "user" }) }),
-    tags: /* @__PURE__ */ (0, import_jsx_runtime679.jsx)(import_jsx_runtime679.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime679.jsx)(Chip, { text: "Prefix", actions: /* @__PURE__ */ (0, import_jsx_runtime679.jsx)(ChipAction, { type: "remove" }) }) }),
+    prefix: /* @__PURE__ */ (0, import_jsx_runtime695.jsx)(import_jsx_runtime695.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime695.jsx)(Icon, { icon: "user" }) }),
+    tags: /* @__PURE__ */ (0, import_jsx_runtime695.jsx)(import_jsx_runtime695.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime695.jsx)(Chip, { text: "Prefix", actions: /* @__PURE__ */ (0, import_jsx_runtime695.jsx)(ChipAction, { type: "remove" }) }) }),
     ...props
   }
 );
 
 // src/multiselect/templates/multiselect-suffix.tsx
-var import_jsx_runtime680 = require("react/jsx-runtime");
-var MultiSelectSuffix = (props) => /* @__PURE__ */ (0, import_jsx_runtime680.jsx)(
+var import_jsx_runtime696 = require("react/jsx-runtime");
+var MultiSelectSuffix = (props) => /* @__PURE__ */ (0, import_jsx_runtime696.jsx)(
   multiselect_spec_default,
   {
-    suffix: /* @__PURE__ */ (0, import_jsx_runtime680.jsx)(import_jsx_runtime680.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime680.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
-    tags: /* @__PURE__ */ (0, import_jsx_runtime680.jsx)(import_jsx_runtime680.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime680.jsx)(Chip, { text: "Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime680.jsx)(ChipAction, { type: "remove" }) }) }),
+    suffix: /* @__PURE__ */ (0, import_jsx_runtime696.jsx)(import_jsx_runtime696.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime696.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
+    tags: /* @__PURE__ */ (0, import_jsx_runtime696.jsx)(import_jsx_runtime696.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime696.jsx)(Chip, { text: "Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime696.jsx)(ChipAction, { type: "remove" }) }) }),
     ...props
   }
 );
 
 // src/multiselect/tests/multiselect-prefix-suffix.tsx
-var import_jsx_runtime681 = require("react/jsx-runtime");
+var import_jsx_runtime697 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         grid-template-columns: 80px repeat(3, 1fr);
     }
 `;
-var multiselect_prefix_suffix_default = () => /* @__PURE__ */ (0, import_jsx_runtime681.jsxs)(import_jsx_runtime681.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: MultiSelect.options.fillMode.map((fillMode) => /* @__PURE__ */ (0, import_jsx_runtime681.jsxs)(import_jsx_runtime681.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("span", { className: "k-col-span-full k-text-center", children: fillMode }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("span", { children: "normal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectPrefix, { fillMode }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectSuffix, { fillMode }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(
+var multiselect_prefix_suffix_default = () => /* @__PURE__ */ (0, import_jsx_runtime697.jsxs)(import_jsx_runtime697.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: MultiSelect.options.fillMode.map((fillMode) => /* @__PURE__ */ (0, import_jsx_runtime697.jsxs)(import_jsx_runtime697.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("span", { className: "k-col-span-full k-text-center", children: fillMode }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("span", { children: "normal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectPrefix, { fillMode }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectSuffix, { fillMode }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(
       MultiSelectNormal,
       {
         fillMode,
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Icon, { icon: "user" }) }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
-        tags: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(ChipAction, { type: "remove" }) }) })
+        prefix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Icon, { icon: "user" }) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
+        tags: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(ChipAction, { type: "remove" }) }) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("span", { children: "disabled" }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectPrefix, { fillMode, disabled: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectSuffix, { fillMode, disabled: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("span", { children: "disabled" }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectPrefix, { fillMode, disabled: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectSuffix, { fillMode, disabled: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(
       MultiSelectNormal,
       {
         fillMode,
         disabled: true,
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Icon, { icon: "user" }) }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
-        tags: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(ChipAction, { type: "remove" }) }) })
+        prefix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Icon, { icon: "user" }) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
+        tags: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(ChipAction, { type: "remove" }) }) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("span", { children: "validation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectPrefix, { fillMode, invalid: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectSuffix, { fillMode, invalid: true }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("span", { children: "validation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectPrefix, { fillMode, invalid: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectSuffix, { fillMode, invalid: true }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(
       MultiSelectNormal,
       {
         fillMode,
         invalid: true,
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Icon, { icon: "user" }) }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
-        tags: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(ChipAction, { type: "remove" }) }) })
+        prefix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Icon, { icon: "user" }) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
+        tags: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(ChipAction, { type: "remove" }) }) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("span", { children: "RTL" }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectPrefix, { fillMode }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(MultiSelectSuffix, { fillMode }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime681.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("span", { children: "RTL" }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectPrefix, { fillMode }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(MultiSelectSuffix, { fillMode }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime697.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(
       MultiSelectNormal,
       {
         fillMode,
-        prefix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Icon, { icon: "user" }) }),
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
-        tags: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(import_jsx_runtime681.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime681.jsx)(ChipAction, { type: "remove" }) }) })
+        prefix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Icon, { icon: "user" }) }),
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(TextButton, { fillMode: "clear", children: "Cc" }) }),
+        tags: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(import_jsx_runtime697.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(Chip, { text: "Prefix & Suffix", actions: /* @__PURE__ */ (0, import_jsx_runtime697.jsx)(ChipAction, { type: "remove" }) }) })
       }
     ) })
   ] })) })