@progress/kendo-themes-html 7.0.2-dev.4 → 7.0.2

package/dist/cjs/{multiselecttree/tests/multiselecttree-size.js → upload/templates/upload-chunk.js}

@@ -16,12 +16,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/multiselecttree/tests/multiselecttree-size.tsx
-var multiselecttree_size_exports = {};
-__export(multiselecttree_size_exports, {
-  default: () => multiselecttree_size_default
+// src/upload/templates/upload-chunk.tsx
+var upload_chunk_exports = {};
+__export(upload_chunk_exports, {
+  UploadChunk: () => UploadChunk
 });
-module.exports = __toCommonJS(multiselecttree_size_exports);
+module.exports = __toCommonJS(upload_chunk_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -130,11 +130,48 @@ var States = {
   "readonly": "readonly"
 };
 
-// src/icon/font-icon.spec.tsx
+// src/action-buttons/action-buttons.spec.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var ACTIONBUTTONS_CLASSNAME = `k-actions`;
 var states = [];
-var options = {
+var options = {};
+var defaultProps = {
+  alignment: "start",
+  orientation: "horizontal"
+};
+var ActionButtons = (props) => {
+  const {
+    alignment = defaultProps.alignment,
+    orientation = defaultProps.orientation,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        ACTIONBUTTONS_CLASSNAME,
+        {
+          [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
+          [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
+        },
+        props.className
+      ),
+      children: props.children
+    }
+  );
+};
+ActionButtons.states = states;
+ActionButtons.options = options;
+ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
+ActionButtons.defaultProps = defaultProps;
+var action_buttons_spec_default = ActionButtons;
+
+// src/icon/font-icon.spec.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FONTICON_CLASSNAME = `k-icon k-font-icon`;
+var states2 = [];
+var options2 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -149,7 +186,7 @@ var options = {
     ThemeColor.dark
   ]
 };
-var defaultProps = {};
+var defaultProps2 = {};
 var FontIcon = (props) => {
   const {
     size,
@@ -160,9 +197,9 @@ var FontIcon = (props) => {
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     {
       ...other,
@@ -183,17 +220,17 @@ var FontIcon = (props) => {
     }
   );
 };
-FontIcon.states = states;
-FontIcon.options = options;
+FontIcon.states = states2;
+FontIcon.options = options2;
 FontIcon.className = FONTICON_CLASSNAME;
-FontIcon.defaultProps = defaultProps;
+FontIcon.defaultProps = defaultProps2;
 var font_icon_spec_default = FontIcon;
 
 // src/icon/svg-icon.spec.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var SVGICON_CLASSNAME = `k-icon k-svg-icon`;
-var states2 = [];
-var options2 = {
+var states3 = [];
+var options3 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -208,7 +245,7 @@ var options2 = {
     ThemeColor.dark
   ]
 };
-var defaultProps2 = {
+var defaultProps3 = {
   viewBox: "0 0 24 24"
 };
 var SvgIcon = (props) => {
@@ -217,15 +254,15 @@ var SvgIcon = (props) => {
     themeColor,
     rotate,
     flip,
-    viewBox = defaultProps2.viewBox,
+    viewBox = defaultProps3.viewBox,
     icon,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
   }
   if (icon === "none") {
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       {
         ...other,
@@ -238,7 +275,7 @@ var SvgIcon = (props) => {
     );
   }
   const name = typeof icon === "object" && icon.name && icon.name;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "span",
     {
       ...other,
@@ -256,7 +293,7 @@ var SvgIcon = (props) => {
           "k-flip-v": flip === "v" || flip === "both"
         }
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "svg",
         {
           "aria-hidden": true,
@@ -270,10 +307,10 @@ var SvgIcon = (props) => {
     }
   );
 };
-SvgIcon.states = states2;
-SvgIcon.options = options2;
+SvgIcon.states = states3;
+SvgIcon.options = options3;
 SvgIcon.className = SVGICON_CLASSNAME;
-SvgIcon.defaultProps = defaultProps2;
+SvgIcon.defaultProps = defaultProps3;
 var svg_icon_spec_default = SvgIcon;
 
 // ../../node_modules/@progress/kendo-svg-icons/dist/index.es.js
@@ -4272,13 +4309,13 @@ var chartChoroplethIcon = {
 };
 
 // src/icon/icon.spec.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var snakeToCamel = (str) => str.toLowerCase().replace(
   /([-_][a-z])/g,
   (group) => group.toUpperCase().replace("-", "").replace("_", "")
 );
-var states3 = [];
-var options3 = {
+var states4 = [];
+var options4 = {
   size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
   themeColor: [
     ThemeColor.base,
@@ -4293,7 +4330,7 @@ var options3 = {
     ThemeColor.dark
   ]
 };
-var defaultProps3 = {
+var defaultProps4 = {
   viewBox: "0 0 24 24",
   type: "svg"
 };
@@ -4302,78 +4339,45 @@ var Icon = (props) => {
     size,
     themeColor,
     icon,
-    type = defaultProps3.type,
+    type = defaultProps4.type,
     rotate,
     flip,
-    viewBox = defaultProps3.viewBox,
+    viewBox = defaultProps4.viewBox,
     ...other
   } = props;
   if (!icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
   }
   if (type === "svg") {
     if (icon === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon, size });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon, size });
     }
     const iconSVG = snakeToCamel(`${icon}-icon`);
     if (!index_es_exports[iconSVG]) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
-};
-Icon.states = states3;
-Icon.options = options3;
-Icon.defaultProps = defaultProps3;
-
-// src/chip/chip-action.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CHIPACTION_CLASSNAME = `k-chip-action`;
-var ChipAction = (props) => {
-  const {
-    type,
-    ...other
-  } = props;
-  let icon;
-  switch (type) {
-    case "remove" /* REMOVE */:
-      icon = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "x-circle", size: "small" });
-      break;
-    case "more" /* MORE */:
-      icon = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: "more-vertical", size: "small" });
-      break;
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon: type, size: "small" });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(svg_icon_spec_default, { ...other, icon: index_es_exports[iconSVG], size, themeColor, rotate, flip, viewBox });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        CHIPACTION_CLASSNAME,
-        `k-chip-${type}-action`
-      ),
-      children: icon
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(font_icon_spec_default, { ...other, icon, size, themeColor, rotate, flip });
 };
+Icon.states = states4;
+Icon.options = options4;
+Icon.defaultProps = defaultProps4;
 
-// src/avatar/avatar.spec.tsx
+// src/button/button.spec.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var AVATAR_CLASSNAME = `k-avatar`;
-var states4 = [
+var BUTTON_CLASSNAME = `k-button`;
+var states5 = [
   States.hover,
   States.focus,
   States.active,
   States.selected,
   States.disabled
 ];
-var options4 = {
+var options5 = {
   size: [Size.small, Size.medium, Size.large],
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
   themeColor: [
     ThemeColor.base,
     ThemeColor.primary,
@@ -4388,822 +4392,446 @@ var options4 = {
     ThemeColor.inverse
   ]
 };
-var defaultProps4 = {
-  type: "text" /* TEXT */,
-  size: Size.medium,
-  rounded: Roundness.full,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.primary,
-  border: false
-};
-var Avatar = (props) => {
-  const {
-    size = defaultProps4.size,
-    rounded = defaultProps4.rounded,
-    fillMode = defaultProps4.fillMode,
-    themeColor = defaultProps4.themeColor,
-    type = defaultProps4.type,
-    border = defaultProps4.border,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        AVATAR_CLASSNAME,
-        optionClassNames(AVATAR_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        {
-          [`${AVATAR_CLASSNAME}-bordered`]: border
-        }
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
-    }
-  );
-};
-Avatar.states = states4;
-Avatar.options = options4;
-Avatar.className = AVATAR_CLASSNAME;
-Avatar.defaultProps = defaultProps4;
-
-// src/avatar/templates/avatar-icon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-
-// src/avatar/templates/avatar-text.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-
-// src/avatar/templates/avatar-image.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-
-// src/chip/chip.spec.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var CHIP_CLASSNAME = `k-chip`;
-var states5 = [
-  States.hover,
-  States.focus,
-  States.active,
-  States.selected,
-  States.disabled
-];
-var options5 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.outline],
-  themeColor: [
-    ThemeColor.base,
-    ThemeColor.success,
-    ThemeColor.warning,
-    ThemeColor.error,
-    ThemeColor.info
-  ]
-};
 var defaultProps5 = {
   size: Size.medium,
   rounded: Roundness.medium,
   fillMode: FillMode.solid,
-  themeColor: ThemeColor.base
+  themeColor: ThemeColor.base,
+  showArrow: false,
+  arrowIconName: "caret-alt-down"
 };
-var Chip = (props) => {
+var Button = (props) => {
   const {
     size = defaultProps5.size,
     rounded = defaultProps5.rounded,
     fillMode = defaultProps5.fillMode,
     themeColor = defaultProps5.themeColor,
-    text,
-    icon,
-    actions,
-    showAvatar,
     hover,
     focus,
     active,
     selected,
     disabled,
+    icon,
+    text,
+    iconClassName,
+    showArrow = defaultProps5.showArrow,
+    arrowIconName = defaultProps5.arrowIconName,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
+  const hasIcon = icon !== void 0;
+  const hasChildren = props.children !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "button",
     {
       ...other,
       className: classNames(
         props.className,
-        CHIP_CLASSNAME,
-        optionClassNames(CHIP_CLASSNAME, {
+        BUTTON_CLASSNAME,
+        optionClassNames(BUTTON_CLASSNAME, {
           size,
           rounded,
           fillMode,
           themeColor
         }),
-        stateClassNames(CHIP_CLASSNAME, {
+        stateClassNames(BUTTON_CLASSNAME, {
           hover,
           focus,
           active,
           disabled,
           selected
-        })
+        }),
+        {
+          ["k-icon-button"]: !text && !hasChildren && hasIcon
+        }
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "k-chip-icon", icon, size: "small" }),
-        showAvatar && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
-        actions && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-chip-actions", children: actions })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-button-text", children: text }),
+          props.children
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon: arrowIconName }) })
       ]
     }
   );
 };
-Chip.states = states5;
-Chip.options = options5;
-Chip.className = CHIP_CLASSNAME;
-Chip.defaultProps = defaultProps5;
-
-// src/chip/chip-list.spec.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CHIPLIST_CLASSNAME = `k-chip-list`;
-var states6 = [];
-var options6 = {
-  size: [Size.small, Size.medium, Size.large]
-};
-var defaultProps6 = {
-  size: Size.medium
-};
-var ChipList = (props) => {
-  const {
-    size = defaultProps6.size,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      ...other,
-      className: classNames(
-        props.className,
-        CHIPLIST_CLASSNAME,
-        optionClassNames(CHIPLIST_CLASSNAME, {
-          size
-        })
-      ),
-      children: props.children
-    }
-  );
-};
-ChipList.states = states6;
-ChipList.options = options6;
-ChipList.className = CHIPLIST_CLASSNAME;
-ChipList.defaultProps = defaultProps6;
-
-// src/chip/templates/chip-avatar.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+Button.states = states5;
+Button.options = options5;
+Button.className = BUTTON_CLASSNAME;
+Button.defaultProps = defaultProps5;
 
-// src/chip/templates/chip-icon.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+// src/button/templates/icon-button.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 
-// src/chip/templates/chip-normal.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+// src/button/templates/icon-text-button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 
-// src/chip/templates/chip-removable.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+// src/button/templates/text-button.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 
-// src/input/input.spec.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var INPUT_CLASSNAME = `k-input`;
-var states7 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
+// src/upload/upload-dropzone.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var UPLOADDROPZONE_CLASSNAME = `k-upload-dropzone`;
+var states6 = [
+  States.hover
 ];
-var options7 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps7 = {
-  size: Size.medium,
-  rounded: Size.medium,
-  fillMode: FillMode.solid
-};
-var Input = (props) => {
+var UploadDropzone = (props) => {
   const {
     hover,
-    focus,
-    disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps7.size,
-    rounded = defaultProps7.rounded,
-    fillMode = defaultProps7.fillMode,
+    status,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "span",
+  let statusMsg = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
+  switch (status) {
+    case "uploading":
+      statusMsg = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { icon: "upload" }),
+        "Uploading..."
+      ] });
+      break;
+    case "done":
+      statusMsg = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { icon: "check" }),
+        "Done"
+      ] });
+      break;
+    case "failed":
+      statusMsg = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { icon: "exclamation-circle" }),
+        "Done"
+      ] });
+      break;
+    default:
+      statusMsg = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
+      break;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
     {
       ...other,
       className: classNames(
         props.className,
-        INPUT_CLASSNAME,
-        optionClassNames(INPUT_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(INPUT_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
-      )
+        UPLOADDROPZONE_CLASSNAME,
+        "k-dropzone",
+        stateClassNames(UPLOADDROPZONE_CLASSNAME, {
+          hover
+        })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "k-upload-button-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Button, { className: "k-upload-button", children: "Select files..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("input", { id: "upload-input", className: "k-hidden" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "span",
+          {
+            className: classNames(
+              "k-dropzone-hint",
+              {
+                "k-hidden": status !== "upload"
+              }
+            ),
+            children: "Drop files here to upload"
+          }
+        ),
+        status !== "upload" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-upload-status", children: statusMsg })
+      ]
     }
   );
 };
-Input.states = states7;
-Input.options = options7;
-Input.className = INPUT_CLASSNAME;
-Input.defaultProps = defaultProps7;
 
-// src/input/picker.spec.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var PICKER_CLASSNAME = `k-picker`;
-var pickerStates = [
+// src/upload/upload.spec.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var UPLOAD_CLASSNAME = `k-upload`;
+var states7 = [
   States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
+  States.disabled
 ];
-var pickerOptions = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps8 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid
-};
-var Picker = (props) => {
+var options6 = {};
+var defaultProps6 = {};
+var Upload = (props) => {
   const {
+    async,
+    empty,
+    actions,
     hover,
-    focus,
+    status,
     disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps8.size,
-    rounded = defaultProps8.rounded,
-    fillMode = defaultProps8.fillMode,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    "span",
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
     {
       ...other,
       className: classNames(
         props.className,
-        PICKER_CLASSNAME,
-        optionClassNames(PICKER_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(PICKER_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
+        UPLOAD_CLASSNAME,
+        stateClassNames(UPLOAD_CLASSNAME, {
+          disabled
+        }),
+        {
+          "k-upload-async": async,
+          "k-upload-empty": empty
+        }
       ),
-      children: props.children
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(UploadDropzone, { status, hover }),
+        props.children && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "k-upload-files", children: props.children }),
+        actions && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(action_buttons_spec_default, { alignment: "end", orientation: "horizontal", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { className: "k-clear-selected", children: "Clear" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button, { themeColor: "primary", className: "k-upload-selected", children: "Upload" })
+        ] })
+      ]
     }
   );
 };
-Picker.states = pickerStates;
-Picker.options = pickerOptions;
-Picker.className = PICKER_CLASSNAME;
-Picker.defaultProps = defaultProps8;
+Upload.states = states7;
+Upload.options = options6;
+Upload.className = UPLOAD_CLASSNAME;
+Upload.defaultProps = defaultProps6;
 
-// src/input/input-clear-value.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var className = `k-clear-value`;
+// src/progressbar/progressbar.spec.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var PROGRESSBAR_CLASSNAME = `k-progressbar`;
 var states8 = [
   States.disabled,
-  States.loading,
-  States.readonly
+  States.indeterminate
 ];
-var options8 = {};
-var InputClearValue = (props) => {
+var options7 = {};
+var defaultProps7 = {
+  indeterminate: false,
+  label: true,
+  labelPosition: "start",
+  orientation: "horizontal",
+  reverse: false,
+  value: "0"
+};
+var ProgressBar = (props) => {
   const {
     disabled,
-    loading,
-    readonly,
-    value
-  } = props;
-  if (disabled || readonly || loading || !value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { icon: "x" }) });
-};
-InputClearValue.states = states8;
-InputClearValue.options = options8;
-InputClearValue.className = className;
-
-// src/input/input-inner-input.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var className2 = `k-input-inner`;
-var states9 = [];
-var options9 = {};
-var defaultProps9 = {
-  type: "text",
-  autocomplete: "off",
-  value: "",
-  placeholder: ""
-};
-var InputInnerInput = (props) => {
-  const {
-    value = defaultProps9.value,
-    type = defaultProps9.type,
-    placeholder = defaultProps9.placeholder,
-    autocomplete = defaultProps9.autocomplete,
+    height,
+    indeterminate = defaultProps7.indeterminate,
+    label = defaultProps7.label,
+    labelPosition = defaultProps7.labelPosition,
+    orientation = defaultProps7.orientation,
+    reverse = defaultProps7.reverse,
+    value = defaultProps7.value,
+    width,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    "input",
-    {
-      ...other,
-      type,
-      className: classNames(props.className, className2, optionClassNames(className2, props)),
-      placeholder,
-      autoComplete: autocomplete,
-      defaultValue: value
-    }
-  );
-};
-InputInnerInput.states = states9;
-InputInnerInput.options = options9;
-InputInnerInput.className = className2;
-
-// src/input/input-inner-span.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var className3 = `k-input-inner`;
-var states10 = [];
-var options10 = {};
-var InputInnerSpan = (props) => {
-  const {
-    value,
-    placeholder,
-    showValue,
-    valueIcon,
-    valueIconName,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
-    "span",
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
     {
       ...other,
-      className: classNames(props.className, className3, optionClassNames(className3, props)),
+      className: classNames(
+        props.className,
+        PROGRESSBAR_CLASSNAME,
+        stateClassNames(PROGRESSBAR_CLASSNAME, {
+          disabled
+        }),
+        {
+          [`${PROGRESSBAR_CLASSNAME}-${orientation}`]: orientation,
+          [`${PROGRESSBAR_CLASSNAME}-indeterminate`]: indeterminate,
+          [`${PROGRESSBAR_CLASSNAME}-reverse`]: reverse
+        }
+      ),
+      style: orientation === "horizontal" ? { "--kendo-progressbar-value": value, height } : { "--kendo-progressbar-value": value, width },
       children: [
-        valueIcon,
-        !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { className: "k-input-value-icon", icon: valueIconName }),
-        showValue && !value && placeholder,
-        showValue && value && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-input-value-text", children: value })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: classNames(
+          "k-progress-status-wrap",
+          {
+            [`k-progress-${labelPosition}`]: labelPosition && !indeterminate
+          }
+        ), children: label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "k-progress-status", children: [
+          value,
+          "%"
+        ] }) }),
+        !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "k-progressbar-value k-selected", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: classNames(
+          "k-progress-status-wrap",
+          {
+            [`k-progress-${labelPosition}`]: labelPosition
+          }
+        ), children: label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "k-progress-status", children: [
+          props.value,
+          "%"
+        ] }) }) })
       ]
     }
   );
 };
-InputInnerSpan.states = states10;
-InputInnerSpan.options = options10;
-InputInnerSpan.className = className3;
+ProgressBar.states = states8;
+ProgressBar.options = options7;
+ProgressBar.className = PROGRESSBAR_CLASSNAME;
+ProgressBar.defaultProps = defaultProps7;
 
-// src/input/input-inner-textarea.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var defaultProps10 = {
-  value: "",
-  placeholder: ""
-};
-var className4 = `k-input-inner`;
-var states11 = [];
-var options11 = {};
-var InputInnerTextarea = (props) => {
-  const {
-    value = defaultProps10.value,
-    placeholder = defaultProps10.placeholder,
-    rows,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "textarea",
-    {
-      ...other,
-      className: classNames(props.className, className4, optionClassNames(className4, props)),
-      placeholder,
-      rows,
-      children: value
-    }
-  );
-};
-InputInnerTextarea.states = states11;
-InputInnerTextarea.options = options11;
-InputInnerTextarea.className = className4;
-
-// src/input/input-loading-icon.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var className5 = `k-input-loading-icon`;
-var states12 = [
-  States.disabled,
-  States.loading
-];
-var InputLoadingIcon = (props) => {
-  const {
-    disabled,
-    loading
-  } = props;
-  if (disabled || !loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: classNames(props.className, className5, "k-icon k-i-loading") });
-};
-
-// src/input/input-validation-icon.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var className6 = `k-input-validation-icon`;
-var states13 = [
-  States.valid,
-  States.invalid,
+// src/progressbar/chunk-progressbar.spec.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var CHUNKPROGRESSBAR_CLASSNAME = `k-chunk-progressbar`;
+var isSelected = (progress, index) => index <= progress - 1 ? true : false;
+var states9 = [
   States.disabled,
-  States.loading
+  States.indeterminate
 ];
-var options12 = {};
-var InputValidationIcon = (props) => {
-  const {
-    valid,
-    invalid,
-    disabled,
-    loading
-  } = props;
-  const iconName = invalid ? "exclamation-circle" : "check";
-  const renderValidationIcon = Boolean(valid || invalid);
-  if (disabled || loading || !renderValidationIcon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { className: classNames(className6), icon: iconName });
-};
-InputValidationIcon.states = states13;
-InputValidationIcon.options = options12;
-InputValidationIcon.className = className6;
-
-// src/input/input-prefix.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var className7 = `k-input-prefix`;
-var InputPrefix = (props) => {
-  if (!props.children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: classNames(className7, props.className), children: props.children });
-};
-
-// src/input/input-suffix.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var className8 = `k-input-suffix`;
-var InputSuffix = (props) => {
-  if (!props.children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: classNames(className8, props.className), children: props.children });
-};
-
-// src/input/input-separator.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-
-// src/button/button.spec.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var BUTTON_CLASSNAME = `k-button`;
-var states14 = [
-  States.hover,
-  States.focus,
-  States.active,
-  States.selected,
-  States.disabled
-];
-var options13 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
-  themeColor: [
-    ThemeColor.base,
-    ThemeColor.primary,
-    ThemeColor.secondary,
-    ThemeColor.tertiary,
-    ThemeColor.success,
-    ThemeColor.warning,
-    ThemeColor.error,
-    ThemeColor.info,
-    ThemeColor.light,
-    ThemeColor.dark,
-    ThemeColor.inverse
-  ]
-};
-var defaultProps11 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.base,
-  showArrow: false,
-  arrowIconName: "caret-alt-down"
+var options8 = {};
+var defaultProps8 = {
+  chunkCount: 5,
+  orientation: "horizontal",
+  progress: 0
 };
-var Button = (props) => {
+var ChunkProgressBar = (props) => {
   const {
-    size = defaultProps11.size,
-    rounded = defaultProps11.rounded,
-    fillMode = defaultProps11.fillMode,
-    themeColor = defaultProps11.themeColor,
-    hover,
-    focus,
-    active,
-    selected,
     disabled,
-    icon,
-    text,
-    iconClassName,
-    showArrow = defaultProps11.showArrow,
-    arrowIconName = defaultProps11.arrowIconName,
+    chunkCount = defaultProps8.chunkCount,
+    indeterminate,
+    orientation = defaultProps8.orientation,
+    progress = defaultProps8.progress,
+    reverse,
     ...other
   } = props;
-  const hasIcon = icon !== void 0;
-  const hasChildren = props.children !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-    "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
     {
       ...other,
       className: classNames(
         props.className,
-        BUTTON_CLASSNAME,
-        optionClassNames(BUTTON_CLASSNAME, {
-          size,
-          rounded,
-          fillMode,
-          themeColor
-        }),
-        stateClassNames(BUTTON_CLASSNAME, {
-          hover,
-          focus,
-          active,
-          disabled,
-          selected
+        PROGRESSBAR_CLASSNAME,
+        CHUNKPROGRESSBAR_CLASSNAME,
+        stateClassNames(PROGRESSBAR_CLASSNAME, {
+          disabled
         }),
         {
-          ["k-icon-button"]: !text && !hasChildren && hasIcon
+          [`${PROGRESSBAR_CLASSNAME}-${orientation}`]: orientation,
+          [`${PROGRESSBAR_CLASSNAME}-indeterminate`]: indeterminate,
+          [`${PROGRESSBAR_CLASSNAME}-reverse`]: reverse
         }
       ),
-      children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-          Icon,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "k-progressbar-chunks k-reset", children: [...Array(chunkCount)].map(
+        (_el, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { className: classNames(
+          "k-progressbar-chunk",
           {
-            className: classNames(iconClassName, "k-button-icon"),
-            icon
+            "k-first": i === 0,
+            "k-last": i === [...Array(chunkCount)].length - 1,
+            "k-selected": isSelected(progress, i)
           }
-        ),
-        text ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
-          text && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "k-button-text", children: text }),
-          props.children
-        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "k-button-text", children: props.children }),
-        showArrow && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { icon: arrowIconName }) })
-      ]
+        ) }, i)
+      ) })
     }
   );
 };
-Button.states = states14;
-Button.options = options13;
-Button.className = BUTTON_CLASSNAME;
-Button.defaultProps = defaultProps11;
-
-// src/button/templates/icon-button.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+ChunkProgressBar.states = states9;
+ChunkProgressBar.options = options8;
+ChunkProgressBar.className = CHUNKPROGRESSBAR_CLASSNAME;
+ChunkProgressBar.defaultProps = defaultProps8;
 
-// src/button/templates/icon-text-button.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+// src/progressbar/templates/progressbar-normal.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 
-// src/button/templates/text-button.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+// src/progressbar/templates/chunk-progressbar-normal.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 
-// src/animation-container/animation-container.spec.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
-var states15 = [];
-var options14 = {};
-var defaultProps12 = {
-  positionMode: "absolute"
-};
-var AnimationContainer = (props) => {
+// src/upload/upload-file-info.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var UPLOADFILEINFO_CLASSNAME = `k-file-info`;
+var UploadFileInfo = (props) => {
   const {
-    positionMode,
-    animationStyle,
-    offset,
+    name,
+    size,
+    validationMsg,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       ...other,
-      style: { ...offset, ...props.style },
       className: classNames(
-        ANIMATION_CONTAINER_CLASSNAME,
-        "k-animation-container-shown",
-        {
-          ["k-animation-container-fixed"]: positionMode === "fixed"
-        }
+        props.className,
+        UPLOADFILEINFO_CLASSNAME
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
+      children: [
+        name && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "k-file-name", children: name }),
+        size && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "k-file-size", children: size }),
+        validationMsg && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "k-file-validation-message", children: validationMsg })
+      ]
     }
   );
 };
-AnimationContainer.states = states15;
-AnimationContainer.options = options14;
-AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
-AnimationContainer.defaultProps = defaultProps12;
 
-// src/popup/popup.spec.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var POPUP_CLASSNAME = `k-popup`;
-var states16 = [];
-var options15 = {};
-var defaultProps13 = {
-  positionMode: "absolute"
-};
-var Popup = (props) => {
+// src/upload/upload-file.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var UPLOADFILE_CLASSNAME = `k-file`;
+var UploadFile = (props) => {
   const {
-    offset,
-    positionMode,
+    status,
+    progress,
+    name,
+    icon,
+    size,
+    state,
+    validationMsg,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    AnimationContainer,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "li",
     {
-      positionMode,
-      offset,
-      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
+      ...other,
+      className: classNames(
+        props.className,
+        UPLOADFILE_CLASSNAME,
+        {
+          [`k-file-${status}`]: status
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "k-file-single", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ProgressBar, { className: classNames(
+          {
+            "k-hidden": status !== "progress"
+          }
+        ), value: progress, label: false }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "k-file-icon-wrapper", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { className: "k-file-icon", icon, size: "xxlarge" }),
+          state && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-file-state", children: state })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(UploadFileInfo, { name, size, validationMsg }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "k-upload-actions", children: status === "progress" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "k-upload-pct", children: [
+            progress,
+            "%"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { icon: "pause-sm", fillMode: "flat", className: "k-upload-action" }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { icon: "cancel", fillMode: "flat", className: "k-upload-action" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { icon: "x", fillMode: "flat", className: "k-upload-action" }) })
+      ] })
     }
   );
 };
-Popup.states = states16;
-Popup.options = options15;
-Popup.className = POPUP_CLASSNAME;
-Popup.defaultProps = defaultProps13;
 
-// src/multiselecttree/multiselecttree.spec.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var MULTISELECTTREE_CLASSNAME = `k-multiselecttree`;
-var states17 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options16 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
-var defaultProps14 = {
-  size: Input.defaultProps.size,
-  rounded: Input.defaultProps.rounded,
-  fillMode: Input.defaultProps.fillMode
-};
-var MultiSelectTree = (props) => {
-  const {
-    prefix,
-    suffix,
-    placeholder,
-    tags,
-    popup,
-    size,
-    rounded,
-    fillMode,
-    showArrowButton,
-    hover,
-    focus,
-    valid,
-    invalid,
-    required,
-    loading,
-    disabled,
-    readonly,
-    opened,
-    dir,
-    ...other
-  } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-      Input,
-      {
-        ...other,
-        dir,
-        size,
-        rounded,
-        fillMode,
-        hover,
-        focus,
-        valid,
-        invalid,
-        required,
-        loading,
-        disabled,
-        readonly,
-        className: classNames(props.className, MULTISELECTTREE_CLASSNAME),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ChipList, { size, className: "k-input-values", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: tags }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "k-input-inner", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "k-input-value-text", children: placeholder }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            InputValidationIcon,
-            {
-              valid,
-              invalid,
-              loading,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            InputLoadingIcon,
-            {
-              loading,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            InputClearValue,
-            {
-              loading,
-              disabled,
-              readonly,
-              value: tags ? "value" : ""
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InputSuffix, { children: suffix }),
-          showArrowButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            Button,
-            {
-              className: "k-input-button",
-              icon: "caret-alt-down",
-              rounded: null,
-              size,
-              fillMode
-            }
-          )
-        ]
-      }
-    ),
-    opened && popup && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Popup, { className: "k-multiselecttree-popup", dir, children: popup })
-  ] });
-};
-MultiSelectTree.states = states17;
-MultiSelectTree.options = options16;
-MultiSelectTree.className = MULTISELECTTREE_CLASSNAME;
-MultiSelectTree.defaultProps = defaultProps14;
+// src/upload/upload-file-multiple.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 
-// src/multiselecttree/tests/multiselecttree-size.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var styles = `
-    #test-area {
-        max-width: 600px;
-        grid-template-columns: 120px repeat(1, 1fr);
-    }
-`;
-var multiselecttree_size_default = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      MultiSelectTree,
-      {
-        size: "small",
-        tags: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Chip, { text: "Chip Text", size: "small", actions: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChipAction, { type: "remove" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Chip, { text: "Chip Text", size: "small", actions: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChipAction, { type: "remove" }) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      MultiSelectTree,
-      {
-        size: "medium",
-        tags: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Chip, { text: "Chip Text", size: "medium", actions: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChipAction, { type: "remove" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Chip, { text: "Chip Text", size: "medium", actions: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChipAction, { type: "remove" }) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      MultiSelectTree,
-      {
-        size: "large",
-        tags: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Chip, { text: "Chip Text", size: "large", actions: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChipAction, { type: "remove" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Chip, { text: "Chip Text", size: "large", actions: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ChipAction, { type: "remove" }) })
-        ] })
-      }
-    )
-  ] })
-] });
+// src/upload/templates/upload-batch.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+
+// src/upload/templates/upload-normal.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/upload/templates/upload-chunk.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var UploadChunk = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  Upload,
+  {
+    async: true,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UploadFile, { name: "Image_With_Very_Very_Very_Very_Very_Long_Name1.png", icon: "file-image", size: "51.23 KB" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UploadFile, { name: "Image2.jpg", icon: "file-image", size: "106.43 KB" })
+      ] })
+    ],
+    ...props
+  }
+);