@progress/kendo-themes-html 6.3.1-dev.0 → 6.4.0-dev.0

package/dist/{editor/tests/editor-table-wizard-accessibility.js → multiselecttree/tests/multiselecttree-opened.js}

@@ -58,7 +58,7 @@
     mod
   ));
 
-  // src/editor/tests/editor-table-wizard-accessibility.tsx
+  // src/multiselecttree/tests/multiselecttree-opened.tsx
   var import_client = __toESM(__require("react-dom/client"));
 
   // src/utils/class-names.ts
@@ -168,48 +168,11 @@
     "readonly": "readonly"
   };
 
-  // src/action-buttons/action-buttons.spec.tsx
-  var import_jsx_runtime = __require("react/jsx-runtime");
-  var ACTIONBUTTONS_CLASSNAME = `k-actions`;
-  var states = [];
-  var options = {};
-  var defaultProps = {
-    alignment: "start",
-    orientation: "horizontal"
-  };
-  var ActionButtons = (props) => {
-    const _a = props, {
-      alignment = defaultProps.alignment,
-      orientation = defaultProps.orientation
-    } = _a, other = __objRest(_a, [
-      "alignment",
-      "orientation"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      __spreadProps(__spreadValues({}, 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;
-
   // src/icon/icon.spec.tsx
-  var import_jsx_runtime2 = __require("react/jsx-runtime");
+  var import_jsx_runtime = __require("react/jsx-runtime");
   var ICON_CLASSNAME = `k-icon`;
-  var states2 = [];
-  var options2 = {
+  var states = [];
+  var options = {
     size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
     themeColor: [
       ThemeColor.base,
@@ -224,7 +187,7 @@
       ThemeColor.dark
     ]
   };
-  var defaultProps2 = {};
+  var defaultProps = {};
   var Icon = (props) => {
     const _a = props, {
       size,
@@ -240,9 +203,9 @@
       "flip"
     ]);
     if (!name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -261,25 +224,58 @@
       })
     );
   };
-  Icon.states = states2;
-  Icon.options = options2;
+  Icon.states = states;
+  Icon.options = options;
   Icon.className = ICON_CLASSNAME;
-  Icon.defaultProps = defaultProps2;
+  Icon.defaultProps = defaultProps;
 
-  // src/button/button.spec.tsx
+  // src/chip/chip-action.tsx
+  var import_jsx_runtime2 = __require("react/jsx-runtime");
+  var CHIPACTION_CLASSNAME = `k-chip-action`;
+  var ChipAction = (props) => {
+    const _a = props, {
+      type
+    } = _a, other = __objRest(_a, [
+      "type"
+    ]);
+    let icon;
+    switch (type) {
+      case "remove" /* REMOVE */:
+        icon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "x-circle" });
+        break;
+      case "more" /* MORE */:
+        icon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "more-vertical" });
+        break;
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: type });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          CHIPACTION_CLASSNAME,
+          `k-chip-${type}-action`
+        ),
+        children: icon
+      })
+    );
+  };
+
+  // src/avatar/avatar.spec.tsx
   var import_jsx_runtime3 = __require("react/jsx-runtime");
-  var BUTTON_CLASSNAME = `k-button`;
-  var states3 = [
+  var AVATAR_CLASSNAME = `k-avatar`;
+  var states2 = [
     States.hover,
     States.focus,
     States.active,
     States.selected,
     States.disabled
   ];
-  var options3 = {
+  var options2 = {
     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],
+    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline],
     themeColor: [
       ThemeColor.base,
       ThemeColor.primary,
@@ -290,161 +286,187 @@
       ThemeColor.error,
       ThemeColor.info,
       ThemeColor.light,
-      ThemeColor.dark,
-      ThemeColor.inverse
+      ThemeColor.dark
+    ]
+  };
+  var defaultProps2 = {
+    type: "text" /* TEXT */,
+    size: Size.medium,
+    rounded: Roundness.full,
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.primary,
+    border: false
+  };
+  var Avatar = (props) => {
+    const _a = props, {
+      size = defaultProps2.size,
+      rounded = defaultProps2.rounded,
+      fillMode = defaultProps2.fillMode,
+      themeColor = defaultProps2.themeColor,
+      type = defaultProps2.type,
+      border = defaultProps2.border
+    } = _a, other = __objRest(_a, [
+      "size",
+      "rounded",
+      "fillMode",
+      "themeColor",
+      "type",
+      "border"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          AVATAR_CLASSNAME,
+          optionClassNames(AVATAR_CLASSNAME, {
+            size,
+            rounded,
+            fillMode,
+            themeColor
+          }),
+          {
+            [`${AVATAR_CLASSNAME}-bordered`]: border
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `${AVATAR_CLASSNAME}-${type}`, children: props.children })
+      })
+    );
+  };
+  Avatar.states = states2;
+  Avatar.options = options2;
+  Avatar.className = AVATAR_CLASSNAME;
+  Avatar.defaultProps = defaultProps2;
+
+  // src/chip/chip.spec.tsx
+  var import_jsx_runtime4 = __require("react/jsx-runtime");
+  var CHIP_CLASSNAME = `k-chip`;
+  var states3 = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.selected,
+    States.disabled
+  ];
+  var options3 = {
+    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 defaultProps3 = {
     size: Size.medium,
     rounded: Roundness.medium,
     fillMode: FillMode.solid,
-    themeColor: ThemeColor.base,
-    showArrow: false,
-    arrowIconName: "arrow-s"
+    themeColor: ThemeColor.base
   };
-  var Button = (props) => {
+  var Chip = (props) => {
     const _a = props, {
       size = defaultProps3.size,
       rounded = defaultProps3.rounded,
       fillMode = defaultProps3.fillMode,
       themeColor = defaultProps3.themeColor,
+      text,
+      icon,
+      actions,
+      showAvatar,
       hover,
       focus,
       active,
       selected,
-      disabled,
-      icon,
-      text,
-      iconClassName,
-      showArrow = defaultProps3.showArrow,
-      arrowIconName = defaultProps3.arrowIconName
+      disabled
     } = _a, other = __objRest(_a, [
       "size",
       "rounded",
       "fillMode",
       "themeColor",
+      "text",
+      "icon",
+      "actions",
+      "showAvatar",
       "hover",
       "focus",
       "active",
       "selected",
-      "disabled",
-      "icon",
-      "text",
-      "iconClassName",
-      "showArrow",
-      "arrowIconName"
+      "disabled"
     ]);
-    const hasIcon = icon !== void 0;
-    const hasChildren = props.children !== void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "button",
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
           props.className,
-          BUTTON_CLASSNAME,
-          optionClassNames(BUTTON_CLASSNAME, {
+          CHIP_CLASSNAME,
+          optionClassNames(CHIP_CLASSNAME, {
             size,
             rounded,
             fillMode,
             themeColor
           }),
-          stateClassNames(BUTTON_CLASSNAME, {
+          stateClassNames(CHIP_CLASSNAME, {
             hover,
             focus,
             active,
             disabled,
             selected
-          }),
-          {
-            ["k-icon-button"]: !text && !hasChildren && hasIcon
-          }
+          })
         ),
         children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Icon,
-            {
-              className: classNames(iconClassName, "k-button-icon"),
-              name: icon
-            }
-          ),
-          text ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            text && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-button-text", children: text }),
-            props.children
-          ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-button-text", children: props.children }),
-          showArrow && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { name: arrowIconName }) })
+          icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "k-chip-icon", name: icon }),
+          showAvatar && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { className: "k-chip-avatar", type: "image", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: "/packages/html/assets/avatar.jpg" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-chip-content", children: props.children ? props.children : text && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-chip-label k-text-ellipsis", children: text }) }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-chip-actions", children: actions })
         ]
       })
     );
   };
-  Button.states = states3;
-  Button.options = options3;
-  Button.className = BUTTON_CLASSNAME;
-  Button.defaultProps = defaultProps3;
+  Chip.states = states3;
+  Chip.options = options3;
+  Chip.className = CHIP_CLASSNAME;
+  Chip.defaultProps = defaultProps3;
 
-  // src/window/window.spec.tsx
-  var import_jsx_runtime4 = __require("react/jsx-runtime");
-  var WINDOW_CLASSNAME = `k-window`;
+  // src/chip/chip-list.spec.tsx
+  var import_jsx_runtime5 = __require("react/jsx-runtime");
+  var CHIPLIST_CLASSNAME = `k-chip-list`;
   var states4 = [];
   var options4 = {
-    themeColor: [
-      ThemeColor.primary,
-      ThemeColor.light,
-      ThemeColor.dark
-    ]
+    size: [Size.small, Size.medium, Size.large]
   };
-  var defaultProps4 = {};
-  var Window = (props) => {
+  var defaultProps4 = {
+    size: Size.medium
+  };
+  var ChipList = (props) => {
     const _a = props, {
-      title,
-      actions,
-      minimized,
-      themeColor,
-      actionButtons,
-      actionButtonsAlign
+      size = defaultProps4.size
     } = _a, other = __objRest(_a, [
-      "title",
-      "actions",
-      "minimized",
-      "themeColor",
-      "actionButtons",
-      "actionButtonsAlign"
+      "size"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
           props.className,
-          WINDOW_CLASSNAME,
-          optionClassNames(WINDOW_CLASSNAME, { themeColor }),
-          {
-            [`${WINDOW_CLASSNAME}-minimized`]: minimized
-          }
+          CHIPLIST_CLASSNAME,
+          optionClassNames(CHIPLIST_CLASSNAME, {
+            size
+          })
         ),
-        children: [
-          (title !== void 0 || actions) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "k-window-titlebar", children: [
-            title !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "k-window-title", children: title }),
-            actions && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "k-window-titlebar-actions", children: actions.map(
-              (actionName) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { icon: actionName, fillMode: "flat", className: "k-window-titlebar-action" }, actionName)
-            ) }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: classNames(
-            "k-window-content",
-            {
-              "k-hidden": minimized
-            }
-          ), children: props.children }),
-          actionButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions", children: actionButtons })
-        ]
+        children: props.children
       })
     );
   };
-  Window.states = states4;
-  Window.options = options4;
-  Window.className = WINDOW_CLASSNAME;
-  Window.defaultProps = defaultProps4;
+  ChipList.states = states4;
+  ChipList.options = options4;
+  ChipList.className = CHIPLIST_CLASSNAME;
+  ChipList.defaultProps = defaultProps4;
 
   // src/input/input.spec.tsx
-  var import_jsx_runtime5 = __require("react/jsx-runtime");
+  var import_jsx_runtime6 = __require("react/jsx-runtime");
   var INPUT_CLASSNAME = `k-input`;
   var states5 = [
     States.hover,
@@ -490,7 +512,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -508,7 +530,7 @@
   Input.defaultProps = defaultProps5;
 
   // src/input/picker.spec.tsx
-  var import_jsx_runtime6 = __require("react/jsx-runtime");
+  var import_jsx_runtime7 = __require("react/jsx-runtime");
   var PICKER_CLASSNAME = `k-picker`;
   var pickerStates = [
     States.hover,
@@ -554,7 +576,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -573,7 +595,7 @@
   Picker.defaultProps = defaultProps6;
 
   // src/input/input-clear-value.tsx
-  var import_jsx_runtime7 = __require("react/jsx-runtime");
+  var import_jsx_runtime8 = __require("react/jsx-runtime");
   var className = `k-clear-value`;
   var states6 = [
     States.disabled,
@@ -589,16 +611,16 @@
       value
     } = props;
     if (disabled || readonly || loading || !value) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { name: "x" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "x" }) });
   };
   InputClearValue.states = states6;
   InputClearValue.options = options6;
   InputClearValue.className = className;
 
   // src/input/input-inner-input.tsx
-  var import_jsx_runtime8 = __require("react/jsx-runtime");
+  var import_jsx_runtime9 = __require("react/jsx-runtime");
   var className2 = `k-input-inner`;
   var states7 = [];
   var options7 = {};
@@ -620,7 +642,7 @@
       "placeholder",
       "autocomplete"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "input",
       __spreadProps(__spreadValues({}, other), {
         type,
@@ -636,7 +658,7 @@
   InputInnerInput.className = className2;
 
   // src/input/input-inner-span.tsx
-  var import_jsx_runtime9 = __require("react/jsx-runtime");
+  var import_jsx_runtime10 = __require("react/jsx-runtime");
   var className3 = `k-input-inner`;
   var states8 = [];
   var options8 = {};
@@ -654,15 +676,15 @@
       "valueIcon",
       "valueIconName"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className3, optionClassNames(className3, props)),
         children: [
           valueIcon,
-          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
+          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
           showValue && !value && placeholder,
-          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "k-input-value-text", children: value })
+          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "k-input-value-text", children: value })
         ]
       })
     );
@@ -672,7 +694,7 @@
   InputInnerSpan.className = className3;
 
   // src/input/input-inner-textarea.tsx
-  var import_jsx_runtime10 = __require("react/jsx-runtime");
+  var import_jsx_runtime11 = __require("react/jsx-runtime");
   var defaultProps8 = {
     value: "",
     placeholder: ""
@@ -690,7 +712,7 @@
       "placeholder",
       "rows"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "textarea",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className4, optionClassNames(className4, props)),
@@ -705,7 +727,7 @@
   InputInnerTextarea.className = className4;
 
   // src/input/input-loading-icon.tsx
-  var import_jsx_runtime11 = __require("react/jsx-runtime");
+  var import_jsx_runtime12 = __require("react/jsx-runtime");
   var className5 = `k-input-loading-icon`;
   var states10 = [
     States.disabled,
@@ -717,13 +739,13 @@
       loading
     } = props;
     if (disabled || !loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
   };
 
   // src/input/input-validation-icon.tsx
-  var import_jsx_runtime12 = __require("react/jsx-runtime");
+  var import_jsx_runtime13 = __require("react/jsx-runtime");
   var className6 = `k-input-validation-icon`;
   var states11 = [
     States.valid,
@@ -742,278 +764,198 @@
     const iconName = invalid ? "warning" : "check";
     const renderValidationIcon = Boolean(valid || invalid);
     if (disabled || loading || !renderValidationIcon) {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { className: classNames(className6), name: iconName });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: classNames(className6), name: iconName });
   };
   InputValidationIcon.states = states11;
   InputValidationIcon.options = options10;
   InputValidationIcon.className = className6;
 
   // src/input/input-prefix.tsx
-  var import_jsx_runtime13 = __require("react/jsx-runtime");
+  var import_jsx_runtime14 = __require("react/jsx-runtime");
   var className7 = `k-input-prefix`;
   var InputPrefix = (props) => {
     if (!props.children) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: classNames(className7, props.className), children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: classNames(className7, props.className), children: props.children });
   };
 
   // src/input/input-suffix.tsx
-  var import_jsx_runtime14 = __require("react/jsx-runtime");
+  var import_jsx_runtime15 = __require("react/jsx-runtime");
   var className8 = `k-input-suffix`;
   var InputSuffix = (props) => {
     if (!props.children) {
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: classNames(className8, props.className), children: props.children });
-  };
-
-  // src/popup/popup.spec.tsx
-  var import_jsx_runtime15 = __require("react/jsx-runtime");
-  var POPUP_CLASSNAME = `k-popup`;
-  var states12 = [];
-  var options11 = {};
-  var defaultProps9 = {};
-  var Popup = (props) => {
-    const other = __objRest(props, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", __spreadProps(__spreadValues({}, other), { className: classNames(props.className, POPUP_CLASSNAME), children: props.children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: classNames(className8, props.className), children: props.children });
   };
-  Popup.states = states12;
-  Popup.options = options11;
-  Popup.className = POPUP_CLASSNAME;
-  Popup.defaultProps = defaultProps9;
 
-  // src/dropdownlist/dropdownlist.spec.tsx
+  // src/button/button.spec.tsx
   var import_jsx_runtime16 = __require("react/jsx-runtime");
-  var DROPDOWNLIST_CLASSNAME = `k-dropdownlist`;
-  var states13 = [
+  var BUTTON_CLASSNAME = `k-button`;
+  var states12 = [
     States.hover,
     States.focus,
-    States.valid,
-    States.invalid,
-    States.required,
-    States.disabled,
-    States.loading,
-    States.readonly
+    States.active,
+    States.selected,
+    States.disabled
   ];
-  var options12 = {
+  var options11 = {
     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,
+      ThemeColor.secondary,
+      ThemeColor.tertiary,
+      ThemeColor.success,
+      ThemeColor.warning,
+      ThemeColor.error,
+      ThemeColor.info,
+      ThemeColor.light,
+      ThemeColor.dark,
+      ThemeColor.inverse
+    ]
   };
-  var defaultProps10 = {
-    showValue: true,
-    arrowIconName: "arrow-s",
+  var defaultProps9 = {
     size: Size.medium,
     rounded: Roundness.medium,
-    fillMode: FillMode.solid
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.base,
+    showArrow: false,
+    arrowIconName: "arrow-s"
   };
-  var DropdownList = (props) => {
+  var Button = (props) => {
     const _a = props, {
-      valueIconName,
-      arrowIconName = defaultProps10.arrowIconName,
-      prefix,
-      suffix,
-      value,
-      placeholder,
-      size,
-      rounded,
-      fillMode,
+      size = defaultProps9.size,
+      rounded = defaultProps9.rounded,
+      fillMode = defaultProps9.fillMode,
+      themeColor = defaultProps9.themeColor,
       hover,
       focus,
-      valid,
-      invalid,
-      required,
-      loading,
+      active,
+      selected,
       disabled,
-      readonly,
-      showValue = defaultProps10.showValue,
-      popup,
-      opened
+      icon,
+      text,
+      iconClassName,
+      showArrow = defaultProps9.showArrow,
+      arrowIconName = defaultProps9.arrowIconName
     } = _a, other = __objRest(_a, [
-      "valueIconName",
-      "arrowIconName",
-      "prefix",
-      "suffix",
-      "value",
-      "placeholder",
       "size",
       "rounded",
       "fillMode",
+      "themeColor",
       "hover",
       "focus",
-      "valid",
-      "invalid",
-      "required",
-      "loading",
+      "active",
+      "selected",
       "disabled",
-      "readonly",
-      "showValue",
-      "popup",
-      "opened"
-    ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-        Picker,
-        __spreadProps(__spreadValues({}, other), {
-          size,
-          rounded,
-          fillMode,
-          hover,
-          focus,
-          valid,
-          invalid,
-          required,
-          loading,
-          disabled,
-          readonly,
-          className: classNames(
-            props.className,
-            DROPDOWNLIST_CLASSNAME,
-            {
-              "k-icon-picker": !showValue && valueIconName
-            }
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputPrefix, { children: prefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              InputInnerSpan,
-              {
-                placeholder,
-                value,
-                showValue,
-                valueIconName
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              InputValidationIcon,
-              {
-                valid,
-                invalid,
-                loading,
-                disabled
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              InputLoadingIcon,
-              {
-                loading,
-                disabled
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(InputSuffix, { children: suffix }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-              Button,
-              {
-                className: "k-input-button",
-                icon: arrowIconName,
-                rounded: null,
-                size: props.size,
-                fillMode: props.fillMode
-              }
-            )
-          ]
-        })
-      ),
-      opened && popup && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Popup, { className: "k-dropdownlist-popup", children: popup })
-    ] });
-  };
-  DropdownList.states = states13;
-  DropdownList.options = options12;
-  DropdownList.className = DROPDOWNLIST_CLASSNAME;
-  DropdownList.defaultProps = defaultProps10;
-
-  // src/spinbutton/spinbutton.spec.tsx
-  var import_jsx_runtime17 = __require("react/jsx-runtime");
-  var SPINBUTTON_CLASSNAME = `k-spin-button`;
-  var states14 = [];
-  var options13 = {
-    size: [Size.small, Size.medium, Size.large],
-    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
-  };
-  var defaultProps11 = {
-    size: Size.medium,
-    fillMode: FillMode.solid
-  };
-  var SpinButton = (props) => {
-    const _a = props, {
-      size = defaultProps11.size,
-      fillMode = defaultProps11.fillMode
-    } = _a, other = __objRest(_a, [
-      "size",
-      "fillMode"
+      "icon",
+      "text",
+      "iconClassName",
+      "showArrow",
+      "arrowIconName"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      "span",
+    const hasIcon = icon !== void 0;
+    const hasChildren = props.children !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "button",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
-          SPINBUTTON_CLASSNAME,
-          props.className
+          props.className,
+          BUTTON_CLASSNAME,
+          optionClassNames(BUTTON_CLASSNAME, {
+            size,
+            rounded,
+            fillMode,
+            themeColor
+          }),
+          stateClassNames(BUTTON_CLASSNAME, {
+            hover,
+            focus,
+            active,
+            disabled,
+            selected
+          }),
+          {
+            ["k-icon-button"]: !text && !hasChildren && hasIcon
+          }
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            Button,
+          icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Icon,
             {
-              className: "k-spinner-increase",
-              icon: "arrow-n",
-              rounded: null,
-              size,
-              fillMode
+              className: classNames(iconClassName, "k-button-icon"),
+              name: icon
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-            Button,
-            {
-              className: "k-spinner-decrease",
-              icon: "arrow-s",
-              rounded: null,
-              size,
-              fillMode
-            }
-          )
+          text ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+            text && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-button-text", children: text }),
+            props.children
+          ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-button-text", children: props.children }),
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: arrowIconName }) })
         ]
       })
     );
   };
-  SpinButton.states = states14;
-  SpinButton.options = options13;
-  SpinButton.className = SPINBUTTON_CLASSNAME;
-  SpinButton.defaultProps = defaultProps11;
+  Button.states = states12;
+  Button.options = options11;
+  Button.className = BUTTON_CLASSNAME;
+  Button.defaultProps = defaultProps9;
 
-  // src/numerictextbox/numerictextbox.spec.tsx
+  // src/popup/popup.spec.tsx
+  var import_jsx_runtime17 = __require("react/jsx-runtime");
+  var POPUP_CLASSNAME = `k-popup`;
+  var states13 = [];
+  var options12 = {};
+  var defaultProps10 = {};
+  var Popup = (props) => {
+    const other = __objRest(props, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", __spreadProps(__spreadValues({}, other), { className: classNames(props.className, POPUP_CLASSNAME), children: props.children }));
+  };
+  Popup.states = states13;
+  Popup.options = options12;
+  Popup.className = POPUP_CLASSNAME;
+  Popup.defaultProps = defaultProps10;
+
+  // src/multiselecttree/multiselecttree.spec.tsx
   var import_jsx_runtime18 = __require("react/jsx-runtime");
-  var NUMERICTEXTBOX_CLASSNAME = `k-numerictextbox`;
-  var states15 = [
+  var MULTISELECTTREE_CLASSNAME = `k-multiselecttree`;
+  var states14 = [
     States.hover,
     States.focus,
     States.valid,
     States.invalid,
-    States.loading,
     States.required,
     States.disabled,
+    States.loading,
     States.readonly
   ];
-  var options14 = {
+  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]
   };
-  var defaultProps12 = {
-    showSpinButton: true,
-    showClearButton: true,
+  var defaultProps11 = {
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
     fillMode: Input.defaultProps.fillMode
   };
-  var NumericTextbox = (props) => {
+  var MultiSelectTree = (props) => {
     const _a = props, {
-      value,
+      prefix,
+      suffix,
       placeholder,
+      tags,
+      popup,
       size,
       rounded,
       fillMode,
+      showArrowButton,
       hover,
       focus,
       valid,
@@ -1022,14 +964,17 @@
       loading,
       disabled,
       readonly,
-      showClearButton = defaultProps12.showClearButton,
-      showSpinButton = defaultProps12.showSpinButton
+      opened
     } = _a, other = __objRest(_a, [
-      "value",
+      "prefix",
+      "suffix",
       "placeholder",
+      "tags",
+      "popup",
       "size",
       "rounded",
       "fillMode",
+      "showArrowButton",
       "hover",
       "focus",
       "valid",
@@ -1038,155 +983,147 @@
       "loading",
       "disabled",
       "readonly",
-      "showClearButton",
-      "showSpinButton"
+      "opened"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-      Input,
-      __spreadProps(__spreadValues({}, other), {
-        size,
-        rounded,
-        fillMode,
-        hover,
-        focus,
-        valid,
-        invalid,
-        required,
-        loading,
-        disabled,
-        readonly,
-        className: classNames(props.className, NUMERICTEXTBOX_CLASSNAME),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            InputValidationIcon,
-            {
-              valid,
-              invalid,
-              loading,
-              disabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            InputLoadingIcon,
-            {
-              loading,
-              disabled
-            }
-          ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            InputClearValue,
-            {
-              loading,
-              disabled,
-              readonly,
-              value
-            }
-          ),
-          showSpinButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-            SpinButton,
-            {
-              className: "k-input-spinner",
-              size,
-              fillMode
-            }
-          )
-        ]
-      })
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+        Input,
+        __spreadProps(__spreadValues({}, other), {
+          size,
+          rounded,
+          fillMode,
+          hover,
+          focus,
+          valid,
+          invalid,
+          required,
+          loading,
+          disabled,
+          readonly,
+          className: classNames(props.className, MULTISELECTTREE_CLASSNAME),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputPrefix, { children: prefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ChipList, { size, className: "k-input-values", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_jsx_runtime18.Fragment, { children: tags }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-input-inner", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "k-input-value-text", children: placeholder }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              InputValidationIcon,
+              {
+                valid,
+                invalid,
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              InputLoadingIcon,
+              {
+                loading,
+                disabled
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              InputClearValue,
+              {
+                loading,
+                disabled,
+                readonly,
+                value: tags ? "value" : ""
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputSuffix, { children: suffix }),
+            showArrowButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Button,
+              {
+                className: "k-input-button",
+                icon: "caret-alt-down",
+                rounded: null,
+                size,
+                fillMode
+              }
+            )
+          ]
+        })
+      ),
+      opened && popup && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popup, { className: "k-multiselecttree-popup", children: popup })
+    ] });
   };
-  NumericTextbox.states = states15;
-  NumericTextbox.options = options14;
-  NumericTextbox.className = NUMERICTEXTBOX_CLASSNAME;
-  NumericTextbox.defaultProps = defaultProps12;
+  MultiSelectTree.states = states14;
+  MultiSelectTree.options = options13;
+  MultiSelectTree.className = MULTISELECTTREE_CLASSNAME;
+  MultiSelectTree.defaultProps = defaultProps11;
 
-  // src/textarea/textarea.spec.tsx
+  // src/checkbox/checkbox.spec.tsx
   var import_jsx_runtime19 = __require("react/jsx-runtime");
-  var TEXTAREA_CLASSNAME = `k-textarea`;
-  var states16 = [
+  var CHECKBOX_CLASSNAME = `k-checkbox`;
+  var states15 = [
     States.hover,
     States.focus,
     States.valid,
     States.invalid,
     States.required,
     States.disabled,
-    States.loading
+    States.checked,
+    States.indeterminate
   ];
-  var options15 = {
+  var options14 = {
     size: [Size.small, Size.medium, Size.large],
-    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
   };
-  var defaultProps13 = {
-    size: Input.defaultProps.size,
-    rounded: Input.defaultProps.rounded,
-    fillMode: Input.defaultProps.fillMode
+  var defaultProps12 = {
+    size: Size.medium,
+    rounded: Roundness.medium
   };
-  var Textarea = (props) => {
+  var Checkbox = (props) => {
     const _a = props, {
-      rows,
-      value,
-      placeholder,
-      size,
-      rounded,
-      fillMode,
+      id,
+      checked,
+      indeterminate,
       hover,
       focus,
-      valid,
+      disabled,
       invalid,
+      valid,
       required,
-      loading,
-      disabled
+      size = defaultProps12.size,
+      rounded = defaultProps12.rounded
     } = _a, other = __objRest(_a, [
-      "rows",
-      "value",
-      "placeholder",
-      "size",
-      "rounded",
-      "fillMode",
+      "id",
+      "checked",
+      "indeterminate",
       "hover",
       "focus",
-      "valid",
+      "disabled",
       "invalid",
+      "valid",
       "required",
-      "loading",
-      "disabled"
+      "size",
+      "rounded"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      Input,
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "k-checkbox-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      "input",
       __spreadProps(__spreadValues({}, other), {
-        size,
-        rounded,
-        fillMode,
-        hover,
-        focus,
-        valid,
-        invalid,
+        id,
+        type: "checkbox",
+        checked,
         required,
-        loading,
-        disabled,
-        className: classNames(props.className, TEXTAREA_CLASSNAME),
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-          InputInnerTextarea,
-          {
-            className: "!k-overflow-auto",
-            value,
-            placeholder,
-            rows
-          }
+        className: classNames(
+          props.className,
+          CHECKBOX_CLASSNAME,
+          optionClassNames(CHECKBOX_CLASSNAME, { size, rounded }),
+          stateClassNames(CHECKBOX_CLASSNAME, { hover, focus, disabled, invalid, valid, indeterminate, checked })
         )
       })
-    );
+    ) });
   };
-  Textarea.states = states16;
-  Textarea.options = options15;
-  Textarea.className = TEXTAREA_CLASSNAME;
-  Textarea.defaultProps = defaultProps13;
+  Checkbox.states = states15;
+  Checkbox.options = options14;
+  Checkbox.className = CHECKBOX_CLASSNAME;
+  Checkbox.defaultProps = defaultProps12;
 
   // src/textbox/textbox.spec.tsx
   var import_jsx_runtime20 = __require("react/jsx-runtime");
   var TEXTBOX_CLASSNAME = `k-textbox`;
-  var states17 = [
+  var states16 = [
     States.hover,
     States.focus,
     States.valid,
@@ -1196,12 +1133,12 @@
     States.loading,
     States.readonly
   ];
-  var options16 = {
+  var options15 = {
     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 = {
+  var defaultProps13 = {
     showClearButton: true,
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
@@ -1224,7 +1161,7 @@
       loading,
       disabled,
       readonly,
-      showClearButton = defaultProps14.showClearButton
+      showClearButton = defaultProps13.showClearButton
     } = _a, other = __objRest(_a, [
       "prefix",
       "suffix",
@@ -1291,206 +1228,270 @@
       })
     );
   };
-  Textbox.states = states17;
-  Textbox.options = options16;
+  Textbox.states = states16;
+  Textbox.options = options15;
   Textbox.className = TEXTBOX_CLASSNAME;
-  Textbox.defaultProps = defaultProps14;
+  Textbox.defaultProps = defaultProps13;
 
-  // src/form/fieldset.tsx
+  // src/treeview/treeview.spec.tsx
   var import_jsx_runtime21 = __require("react/jsx-runtime");
-  var FIELDSET_CLASSNAME = "k-form-fieldset";
-  var Fieldset = (props) => {
-    const {
-      legend
-    } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: classNames(FIELDSET_CLASSNAME), children: [
-      legend && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { className: "k-form-legend", children: legend }),
-      props.children
-    ] });
-  };
-  Fieldset.className = FIELDSET_CLASSNAME;
-
-  // src/form/form.spec.tsx
-  var import_jsx_runtime22 = __require("react/jsx-runtime");
-  var FORM_CLASSNAME = "k-form";
-  var states18 = [];
-  var options17 = {
+  var TREEVIEW_CLASSNAME = `k-treeview`;
+  var states17 = [];
+  var options16 = {
     size: [Size.small, Size.medium, Size.large]
   };
-  var defaultProps15 = {
-    size: Size.medium,
-    layout: "basic",
-    tag: "form"
+  var defaultProps14 = {
+    size: Size.medium
   };
-  var Form = (props) => {
-    const {
-      size = defaultProps15.size,
-      orientation,
-      layout = defaultProps15.layout,
-      formButtons,
-      legend,
-      cols,
-      gapX,
-      gapY,
-      tag = defaultProps15.tag
-    } = props;
-    const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
-    const Parent = ({ tag: tag2, className: className9, children }) => tag2 === "form" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("form", { className: className9, children }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: className9, children });
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Parent, { tag, className: classNames(
-      props.className,
-      FORM_CLASSNAME,
-      optionClassNames(FORM_CLASSNAME, {
-        size
-      }),
-      {
-        [`${FORM_CLASSNAME}-${orientation}`]: orientation
-      }
-    ), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        ConditionalWrapper,
-        {
-          condition: layout === "grid",
-          wrapper: (children) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Fieldset, { legend, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: classNames(
-            "k-form-layout",
-            "k-d-grid",
-            {
-              [`k-grid-cols-${cols}`]: cols,
-              [`k-gap-x-${gapX}`]: gapX,
-              [`k-gap-y-${gapY}`]: gapY
-            }
-          ), children }) }),
-          children: props.children
-        }
-      ),
-      formButtons && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "k-form-buttons", children: formButtons })
-    ] });
+  var Treeview = (props) => {
+    const _a = props, {
+      size = defaultProps14.size,
+      children
+    } = _a, other = __objRest(_a, [
+      "size",
+      "children"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          TREEVIEW_CLASSNAME,
+          optionClassNames(TREEVIEW_CLASSNAME, {
+            size
+          })
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TreeviewGroup, { className: "k-treeview-lines", children })
+      })
+    );
+  };
+  Treeview.states = states17;
+  Treeview.options = options16;
+  Treeview.className = TREEVIEW_CLASSNAME;
+  Treeview.defaultProps = defaultProps14;
+
+  // src/treeview/treeview-leaf.tsx
+  var import_jsx_runtime22 = __require("react/jsx-runtime");
+  var TREEVIEWLEAF_CLASSNAME = `k-treeview-leaf`;
+  var states18 = [
+    States.hover,
+    States.focus,
+    States.selected
+  ];
+  var options17 = {};
+  var TreeviewLeaf = (props) => {
+    const _a = props, {
+      text,
+      showIcon,
+      icon,
+      hover,
+      focus,
+      selected
+    } = _a, other = __objRest(_a, [
+      "text",
+      "showIcon",
+      "icon",
+      "hover",
+      "focus",
+      "selected"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "span",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          TREEVIEWLEAF_CLASSNAME,
+          stateClassNames(TREEVIEWLEAF_CLASSNAME, {
+            hover,
+            focus,
+            selected
+          })
+        ),
+        children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "k-treeview-leaf-text", children: text })
+        ]
+      })
+    );
   };
-  Form.states = states18;
-  Form.options = options17;
-  Form.className = FORM_CLASSNAME;
-  Form.defaultProps = defaultProps15;
+  TreeviewLeaf.states = states18;
+  TreeviewLeaf.options = options17;
+  TreeviewLeaf.className = TREEVIEWLEAF_CLASSNAME;
+  var treeview_leaf_default = TreeviewLeaf;
 
-  // src/form/form-field.tsx
+  // src/treeview/treeview-item.spec.tsx
   var import_jsx_runtime23 = __require("react/jsx-runtime");
-  var FORMFIELD_CLASSNAME = "k-form-field";
+  var TREEVIEWITEM_CLASSNAME = `k-treeview-item`;
   var states19 = [
+    States.hover,
+    States.focus,
+    States.selected,
     States.disabled
   ];
-  var FormField = (props) => {
-    const {
-      label,
-      optional,
-      editor,
-      hint,
-      error,
-      info,
-      disabled,
-      dir
-    } = props;
+  var options18 = {};
+  var defaultProps15 = {};
+  var TreeviewItem = (props) => {
+    const _a = props, {
+      leafClassName,
+      hasChildren,
+      expanded,
+      text,
+      showIcon,
+      icon,
+      showCheckbox,
+      checked,
+      hover,
+      focus,
+      selected,
+      disabled
+    } = _a, other = __objRest(_a, [
+      "leafClassName",
+      "hasChildren",
+      "expanded",
+      "text",
+      "showIcon",
+      "icon",
+      "showCheckbox",
+      "checked",
+      "hover",
+      "focus",
+      "selected",
+      "disabled"
+    ]);
+    const _hasChildren = hasChildren || props.children;
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
-      "div",
-      {
+      "li",
+      __spreadProps(__spreadValues({}, other), {
         className: classNames(
-          FORMFIELD_CLASSNAME,
           props.className,
-          stateClassNames(FORMFIELD_CLASSNAME, { disabled })
+          TREEVIEWITEM_CLASSNAME
         ),
-        dir,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: classNames(
-            "k-label",
-            "k-form-label",
-            {
-              "k-label-empty": label === " "
-            }
-          ), children: [
-            label,
-            optional && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "k-label-optional", children: "(Optional)" }),
-            info && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "k-field-info", children: "(field info)" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "k-treeview-mid", children: [
+            _hasChildren && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              "span",
+              {
+                className: classNames(
+                  "k-treeview-toggle",
+                  stateClassNames("k-treeview-toggle", { disabled })
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: expanded ? "caret-alt-down" : "caret-alt-right" })
+              }
+            ),
+            showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Checkbox, { checked, disabled }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              treeview_leaf_default,
+              {
+                className: classNames(
+                  leafClassName,
+                  stateClassNames(leafClassName, { disabled })
+                ),
+                text,
+                showIcon,
+                icon,
+                hover,
+                focus,
+                selected
+              }
+            )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "k-form-field-wrap", children: [
-            editor,
-            hint && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "k-form-hint", children: hint }),
-            error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "k-form-error", children: error })
-          ] })
+          expanded && _hasChildren && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: props.children })
         ]
-      }
+      })
     );
   };
-  FormField.className = FORMFIELD_CLASSNAME;
+  TreeviewItem.states = states19;
+  TreeviewItem.options = options18;
+  TreeviewItem.className = TREEVIEWITEM_CLASSNAME;
+  TreeviewItem.defaultProps = defaultProps15;
 
-  // src/editor/tests/editor-table-wizard-accessibility.tsx
+  // src/treeview/treeview-group.tsx
   var import_jsx_runtime24 = __require("react/jsx-runtime");
+  var className9 = `k-treeview-group`;
+  var TreeviewGroup = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { className: classNames(props.className, className9), children: props.children });
+
+  // src/multiselecttree/tests/multiselecttree-opened.tsx
+  var import_jsx_runtime25 = __require("react/jsx-runtime");
   var root = import_client.default.createRoot(
     document.getElementById("app")
   );
   var styles = `
     #test-area {
-        width: 600px;
-    }
-    .k-window {
-        width: 100%;
-        position: relative;
+        grid-template-columns: 160px repeat(2, 300px);
     }
 `;
   root.render(
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("style", { children: styles }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { id: "test-area", className: "k-d-grid", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Window, { className: "k-editor-window k-editor-table-wizard-window", title: "Table Wizard", actions: ["close"], actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { themeColor: "primary", children: "Update" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { children: "Cancel" })
-      ] }), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "k-tabstrip k-tabstrip-top", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-tabstrip-items-wrapper k-hstack", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("ul", { className: "k-tabstrip-items k-reset", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "k-item k-first", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-loading k-complete" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: "Table" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "k-item", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-loading k-complete" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: "Cell" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "k-item k-last k-tab-on-top k-active", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-loading k-complete" }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "k-link", children: "Accessibility" })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "k-tabstrip-content k-active", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Form, { tag: "div", orientation: "horizontal", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormField, { label: "Header Rows", editor: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NumericTextbox, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormField, { label: "Header Cols", editor: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NumericTextbox, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormField, { label: "Caption", editor: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Textbox, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            FormField,
-            {
-              label: "Alignment",
-              editor: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                DropdownList,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("style", { children: styles }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "MultiSelectTree" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "MultiSelectTree RTL" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: "Opened" }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          MultiSelectTree,
+          {
+            opened: true,
+            tags: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Chip, { text: "Furniture", actions: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChipAction, { type: "remove" }) }) }),
+            popup: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "k-list-filter", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                Textbox,
                 {
-                  className: "k-align",
-                  showValue: false,
-                  value: "Remove align",
-                  valueIconName: "align-remove",
-                  style: { width: "min-content" }
+                  prefix: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "search" }) })
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-            FormField,
-            {
-              label: "Summary",
-              editor: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                Textarea,
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "k-check-all", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Checkbox, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "k-checkbox-label", children: "Check all" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Treeview, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Furniture", showCheckbox: true, checked: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TreeviewGroup, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 1", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 2", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 3", showCheckbox: true })
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Decor", showCheckbox: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TreeviewGroup, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 1", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 2", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 3", showCheckbox: true })
+                ] }) })
+              ] })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          MultiSelectTree,
+          {
+            opened: true,
+            tags: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Chip, { text: "Furniture", actions: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChipAction, { type: "remove" }) }) }),
+            popup: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "k-list-filter", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                Textbox,
                 {
-                  className: "k-editor-accessibility-summary",
-                  placeholder: "Summary attribute is not HTML5 compatible."
+                  prefix: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "search" }) })
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FormField, { label: "Associate headers", editor: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownList, { value: "None" }) })
-        ] }) })
-      ] }) }) }) })
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "k-check-all", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Checkbox, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "k-checkbox-label", children: "Check all" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Treeview, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Furniture", showCheckbox: true, checked: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TreeviewGroup, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 1", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 2", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 3", showCheckbox: true })
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Decor", showCheckbox: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TreeviewGroup, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 1", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 2", showCheckbox: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TreeviewItem, { text: "Child 3", showCheckbox: true })
+                ] }) })
+              ] })
+            ] })
+          }
+        ) })
+      ] })
     ] })
   );
 })();
-//# sourceMappingURL=editor-table-wizard-accessibility.js.map
+//# sourceMappingURL=multiselecttree-opened.js.map