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

package/dist/esm/filemanager/{tests/filemanager-toolbar.js → filemanager.spec.js}

@@ -4512,389 +4512,471 @@ import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 // src/button-group/templates/mixed-button-group.tsx
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 
-// src/input/input.spec.tsx
+// src/animation-container/animation-container.spec.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-var INPUT_CLASSNAME = `k-input`;
-var states6 = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-var options6 = {
-  size: [Size.small, Size.medium, Size.large],
-  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
-};
+var ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
+var states6 = [];
+var options6 = {};
 var defaultProps6 = {
-  size: Size.medium,
-  rounded: Size.medium,
-  fillMode: FillMode.solid
+  positionMode: "absolute"
 };
-var Input = (props) => {
+var AnimationContainer = (props) => {
   const {
-    hover,
-    focus,
-    disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps6.size,
-    rounded = defaultProps6.rounded,
-    fillMode = defaultProps6.fillMode,
+    positionMode,
+    animationStyle,
+    offset,
     ...other
   } = props;
   return /* @__PURE__ */ jsx13(
-    "span",
+    "div",
     {
       ...other,
+      style: { ...offset, ...props.style },
       className: classNames(
-        props.className,
-        INPUT_CLASSNAME,
-        optionClassNames(INPUT_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(INPUT_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
-      )
+        ANIMATION_CONTAINER_CLASSNAME,
+        "k-animation-container-shown",
+        {
+          ["k-animation-container-fixed"]: positionMode === "fixed"
+        }
+      ),
+      children: /* @__PURE__ */ jsx13("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
     }
   );
 };
-Input.states = states6;
-Input.options = options6;
-Input.className = INPUT_CLASSNAME;
-Input.defaultProps = defaultProps6;
+AnimationContainer.states = states6;
+AnimationContainer.options = options6;
+AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
+AnimationContainer.defaultProps = defaultProps6;
 
-// src/input/picker.spec.tsx
+// src/popup/popup.spec.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var PICKER_CLASSNAME = `k-picker`;
-var pickerStates = [
-  States.hover,
-  States.focus,
-  States.valid,
-  States.invalid,
-  States.required,
-  States.disabled,
-  States.loading,
-  States.readonly
-];
-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 POPUP_CLASSNAME = `k-popup`;
+var states7 = [];
+var options7 = {};
 var defaultProps7 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid
+  positionMode: "absolute"
 };
-var Picker = (props) => {
+var Popup = (props) => {
   const {
-    hover,
-    focus,
-    disabled,
-    invalid,
-    valid,
-    loading,
-    readonly,
-    size = defaultProps7.size,
-    rounded = defaultProps7.rounded,
-    fillMode = defaultProps7.fillMode,
+    offset,
+    positionMode,
     ...other
   } = props;
   return /* @__PURE__ */ jsx14(
-    "span",
+    AnimationContainer,
     {
-      ...other,
-      className: classNames(
-        props.className,
-        PICKER_CLASSNAME,
-        optionClassNames(PICKER_CLASSNAME, { size, rounded, fillMode }),
-        stateClassNames(PICKER_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
-      ),
-      children: props.children
+      positionMode,
+      offset,
+      children: /* @__PURE__ */ jsx14("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
     }
   );
 };
-Picker.states = pickerStates;
-Picker.options = pickerOptions;
-Picker.className = PICKER_CLASSNAME;
-Picker.defaultProps = defaultProps7;
+Popup.states = states7;
+Popup.options = options7;
+Popup.className = POPUP_CLASSNAME;
+Popup.defaultProps = defaultProps7;
 
-// src/input/input-clear-value.tsx
-import { Fragment as Fragment5, jsx as jsx15 } from "react/jsx-runtime";
-var className = `k-clear-value`;
-var states7 = [
-  States.disabled,
-  States.loading,
-  States.readonly
+// src/split-button/split-button.spec.tsx
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var SPLITBUTTON_CLASSNAME = `k-split-button`;
+var states8 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
 ];
-var options7 = {};
-var InputClearValue = (props) => {
-  const {
-    disabled,
-    loading,
-    readonly,
-    value
-  } = props;
-  if (disabled || readonly || loading || !value) {
-    return /* @__PURE__ */ jsx15(Fragment5, {});
-  }
-  return /* @__PURE__ */ jsx15("span", { className: classNames(props.className, className), children: /* @__PURE__ */ jsx15(Icon, { icon: "x" }) });
+var options8 = {
+  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
+  ]
 };
-InputClearValue.states = states7;
-InputClearValue.options = options7;
-InputClearValue.className = className;
-
-// src/input/input-inner-input.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var className2 = `k-input-inner`;
-var states8 = [];
-var options8 = {};
 var defaultProps8 = {
-  type: "text",
-  autocomplete: "off",
-  value: "",
-  placeholder: ""
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.base,
+  arrowIconName: "caret-alt-down"
 };
-var InputInnerInput = (props) => {
+var SplitButton = (props) => {
   const {
-    value = defaultProps8.value,
-    type = defaultProps8.type,
-    placeholder = defaultProps8.placeholder,
-    autocomplete = defaultProps8.autocomplete,
+    size = defaultProps8.size,
+    rounded = defaultProps8.rounded,
+    fillMode = defaultProps8.fillMode,
+    themeColor = defaultProps8.themeColor,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    arrowIconName = defaultProps8.arrowIconName,
+    popup,
+    opened,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx16(
-    "input",
-    {
-      ...other,
-      type,
-      className: classNames(props.className, className2, optionClassNames(className2, props)),
-      placeholder,
-      autoComplete: autocomplete,
-      defaultValue: value
-    }
-  );
+  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ...other,
+        className: classNames(
+          props.className,
+          SPLITBUTTON_CLASSNAME,
+          "k-button-group",
+          optionClassNames(SPLITBUTTON_CLASSNAME, {
+            rounded
+          })
+        ),
+        children: [
+          /* @__PURE__ */ jsx15(
+            Button,
+            {
+              text,
+              icon,
+              size,
+              rounded,
+              fillMode,
+              themeColor,
+              hover,
+              focus,
+              active,
+              selected,
+              disabled,
+              children: props.children
+            }
+          ),
+          /* @__PURE__ */ jsx15(
+            Button,
+            {
+              className: "k-split-button-arrow",
+              icon: arrowIconName,
+              size,
+              rounded,
+              fillMode,
+              disabled
+            }
+          )
+        ]
+      }
+    ),
+    opened && popup && /* @__PURE__ */ jsx15(Popup, { className: "k-menu-popup", children: popup })
+  ] });
 };
-InputInnerInput.states = states8;
-InputInnerInput.options = options8;
-InputInnerInput.className = className2;
+SplitButton.states = states8;
+SplitButton.options = options8;
+SplitButton.className = SPLITBUTTON_CLASSNAME;
+SplitButton.defaultProps = defaultProps8;
+var split_button_spec_default = SplitButton;
 
-// src/input/input-inner-span.tsx
-import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
-var className3 = `k-input-inner`;
-var states9 = [];
+// src/split-button/templates/icon-split-button.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+
+// src/split-button/templates/icon-text-split-button.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+
+// src/split-button/templates/text-split-button.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+
+// src/menu/menu-item.spec.tsx
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+var MENUITEM_CLASSNAME = `k-menu-item`;
+var states9 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
 var options9 = {};
-var InputInnerSpan = (props) => {
+var defaultProps9 = {
+  dir: "ltr"
+};
+var MenuItem = (props) => {
   const {
-    value,
-    placeholder,
-    showValue,
-    valueIcon,
-    valueIconName,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    showArrow,
+    arrowIconName,
+    dir = defaultProps9.dir,
+    children,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs6(
-    "span",
+  const contentTemplate = /* @__PURE__ */ jsx19(Fragment6, {});
+  if (children) {
+    children.forEach((child) => {
+      const component = child.type;
+      if (component === "MenuItemContent") {
+        contentTemplate.props.children.push(child);
+        return;
+      }
+    });
+  }
+  let expandArrowName = arrowIconName;
+  if (!expandArrowName) {
+    expandArrowName = dir === "rtl" ? "caret-alt-left" : "caret-alt-right";
+  }
+  return /* @__PURE__ */ jsxs7(
+    "li",
     {
       ...other,
-      className: classNames(props.className, className3, optionClassNames(className3, props)),
+      className: classNames(
+        props.className,
+        MENUITEM_CLASSNAME,
+        //TODO
+        "k-item",
+        stateClassNames(MENUITEM_CLASSNAME, {
+          focus,
+          disabled
+        })
+      ),
       children: [
-        valueIcon,
-        !valueIcon && valueIconName && /* @__PURE__ */ jsx17(Icon, { className: "k-input-value-icon", icon: valueIconName }),
-        showValue && !value && placeholder,
-        showValue && value && /* @__PURE__ */ jsx17("span", { className: "k-input-value-text", children: value })
+        /* @__PURE__ */ jsxs7(
+          "span",
+          {
+            className: classNames(
+              "k-link k-menu-link",
+              stateClassNames("k-menu-link", {
+                hover,
+                active,
+                selected,
+                disabled
+              })
+            ),
+            children: [
+              icon && /* @__PURE__ */ jsx19(Icon, { className: "k-menu-link-icon", icon }),
+              /* @__PURE__ */ jsx19("span", { className: "k-menu-link-text", children: text }),
+              showArrow && /* @__PURE__ */ jsx19("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx19(Icon, { icon: expandArrowName }) })
+            ]
+          }
+        ),
+        contentTemplate
       ]
     }
   );
 };
-InputInnerSpan.states = states9;
-InputInnerSpan.options = options9;
-InputInnerSpan.className = className3;
-
-// src/input/input-inner-textarea.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var defaultProps9 = {
-  value: "",
-  placeholder: ""
-};
-var className4 = `k-input-inner`;
-var states10 = [];
-var options10 = {};
-var InputInnerTextarea = (props) => {
-  const {
-    value = defaultProps9.value,
-    placeholder = defaultProps9.placeholder,
-    rows,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx18(
-    "textarea",
-    {
-      ...other,
-      className: classNames(props.className, className4, optionClassNames(className4, props)),
-      placeholder,
-      rows,
-      children: value
-    }
-  );
-};
-InputInnerTextarea.states = states10;
-InputInnerTextarea.options = options10;
-InputInnerTextarea.className = className4;
-
-// src/input/input-loading-icon.tsx
-import { Fragment as Fragment6, jsx as jsx19 } from "react/jsx-runtime";
-var className5 = `k-input-loading-icon`;
-var states11 = [
-  States.disabled,
-  States.loading
-];
-var InputLoadingIcon = (props) => {
-  const {
-    disabled,
-    loading
-  } = props;
-  if (disabled || !loading) {
-    return /* @__PURE__ */ jsx19(Fragment6, {});
-  }
-  return /* @__PURE__ */ jsx19("span", { className: classNames(props.className, className5, "k-icon k-i-loading") });
-};
-
-// src/input/input-validation-icon.tsx
-import { Fragment as Fragment7, jsx as jsx20 } from "react/jsx-runtime";
-var className6 = `k-input-validation-icon`;
-var states12 = [
-  States.valid,
-  States.invalid,
-  States.disabled,
-  States.loading
-];
-var options11 = {};
-var InputValidationIcon = (props) => {
-  const {
-    valid,
-    invalid,
-    disabled,
-    loading
-  } = props;
-  const iconName = invalid ? "warning-circle" : "check-circle";
-  const renderValidationIcon = Boolean(valid || invalid);
-  if (disabled || loading || !renderValidationIcon) {
-    return /* @__PURE__ */ jsx20(Fragment7, {});
-  }
-  return /* @__PURE__ */ jsx20(Icon, { className: classNames(className6), icon: iconName });
-};
-InputValidationIcon.states = states12;
-InputValidationIcon.options = options11;
-InputValidationIcon.className = className6;
+MenuItem.states = states9;
+MenuItem.options = options9;
+MenuItem.className = MENUITEM_CLASSNAME;
+MenuItem.defaultProps = defaultProps9;
+var menu_item_spec_default = MenuItem;
 
-// src/input/input-prefix.tsx
-import { Fragment as Fragment8, jsx as jsx21 } from "react/jsx-runtime";
-var className7 = `k-input-prefix`;
+// src/menu/menu-separator.spec.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SEPARATOR_CLASSNAME = `k-separator`;
 var defaultProps10 = {
-  direction: "horizontal"
+  orientation: "horizontal"
 };
-var InputPrefix = (props) => {
+var MenuSeparator = (props) => {
   const {
-    direction = defaultProps10.direction,
+    orientation = defaultProps10.orientation,
     ...other
   } = props;
-  if (!props.children) {
-    return /* @__PURE__ */ jsx21(Fragment8, {});
-  }
-  return /* @__PURE__ */ jsx21(
-    "span",
+  return /* @__PURE__ */ jsx20(
+    "li",
     {
       ...other,
       className: classNames(
-        className7,
         props.className,
+        "k-item",
+        SEPARATOR_CLASSNAME,
         {
-          [`k-input-prefix-${direction}`]: direction
+          [`${SEPARATOR_CLASSNAME}-${orientation}`]: orientation
         }
-      ),
-      children: props.children
+      )
     }
   );
 };
+var menu_separator_spec_default = MenuSeparator;
 
-// src/input/input-suffix.tsx
-import { Fragment as Fragment9, jsx as jsx22 } from "react/jsx-runtime";
-var className8 = `k-input-suffix`;
+// src/menu/menu-item-content.tsx
+import { Fragment as Fragment7, jsx as jsx21 } from "react/jsx-runtime";
+
+// src/menu/menu-list.spec.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+import { createElement } from "react";
+var MENULIST_CLASSNAME = `k-menu-group`;
+var states10 = [];
+var options10 = {
+  size: [Size.small, Size.medium, Size.large]
+};
 var defaultProps11 = {
-  direction: "horizontal"
+  size: Size.medium,
+  dir: "ltr"
 };
-var InputSuffix = (props) => {
+var MenuList = (props) => {
   const {
-    direction = defaultProps11.direction,
+    children,
+    size = defaultProps11.size,
+    dir = defaultProps11.dir,
     ...other
   } = props;
-  if (!props.children) {
-    return /* @__PURE__ */ jsx22(Fragment9, {});
+  const listChildren = [];
+  if (children) {
+    if (Array.isArray(children)) {
+      children.map((child, index) => {
+        if (child.type === menu_item_spec_default) {
+          listChildren.push(
+            /* @__PURE__ */ createElement(menu_item_spec_default, { ...child.props, dir, key: index })
+          );
+        } else if (child.type === menu_separator_spec_default) {
+          listChildren.push(
+            /* @__PURE__ */ jsx22(menu_separator_spec_default, {})
+          );
+        } else {
+          listChildren.push(child);
+        }
+      });
+    }
   }
   return /* @__PURE__ */ jsx22(
-    "span",
+    "ul",
     {
       ...other,
       className: classNames(
-        className8,
         props.className,
-        {
-          [`k-input-suffix-${direction}`]: direction
-        }
+        MENULIST_CLASSNAME,
+        optionClassNames(MENULIST_CLASSNAME, {
+          size
+        })
       ),
-      children: props.children
+      children: listChildren
     }
   );
 };
+MenuList.states = states10;
+MenuList.options = options10;
+MenuList.className = MENULIST_CLASSNAME;
+MenuList.defaultProps = defaultProps11;
 
-// src/input/input-prefix-text.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-
-// src/input/input-suffix-text.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+// src/split-button/templates/split-button-popup.tsx
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
 
-// src/input/input-separator.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
-var className9 = `k-input-separator`;
+// src/switch/switch.spec.tsx
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+var SWITCH_CLASSNAME = `k-switch`;
+var states11 = [
+  States.hover,
+  States.focus,
+  States.disabled,
+  States.checked
+];
+var options11 = {
+  size: [Size.small, Size.medium, Size.large],
+  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
+};
 var defaultProps12 = {
-  direction: "vertical"
+  size: Size.medium,
+  trackRounded: Roundness.full,
+  thumbRounded: Roundness.full
 };
-var InputSeparator = (props) => {
+var Switch = (props) => {
   const {
-    direction = defaultProps12.direction,
+    checked,
+    onLabel,
+    offLabel,
+    size = defaultProps12.size,
+    trackRounded = defaultProps12.trackRounded,
+    thumbRounded = defaultProps12.thumbRounded,
+    hover,
+    focus,
+    disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs9(
     "span",
     {
       ...other,
       className: classNames(
-        className9,
         props.className,
+        SWITCH_CLASSNAME,
+        optionClassNames(SWITCH_CLASSNAME, {
+          size
+        }),
+        stateClassNames(SWITCH_CLASSNAME, {
+          hover,
+          focus,
+          disabled
+        }),
         {
-          [`${className9}-${direction}`]: direction
+          [`${SWITCH_CLASSNAME}-on`]: checked,
+          [`${SWITCH_CLASSNAME}-off`]: !checked
         }
-      )
+      ),
+      children: [
+        /* @__PURE__ */ jsxs9(
+          "span",
+          {
+            className: classNames(
+              "k-switch-track",
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: trackRounded
+              })
+            ),
+            children: [
+              onLabel && /* @__PURE__ */ jsx24("span", { className: "k-switch-label-on", children: onLabel }),
+              offLabel && /* @__PURE__ */ jsx24("span", { className: "k-switch-label-off", children: offLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx24("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ jsx24(
+          "span",
+          {
+            className: classNames(
+              "k-switch-thumb",
+              optionClassNames(SWITCH_CLASSNAME, {
+                rounded: thumbRounded
+              })
+            )
+          }
+        ) })
+      ]
     }
   );
 };
+Switch.states = states11;
+Switch.options = options11;
+Switch.className = SWITCH_CLASSNAME;
+Switch.defaultProps = defaultProps12;
 
-// src/searchbox/searchbox.spec.tsx
-import { jsx as jsx26, jsxs as jsxs7 } from "react/jsx-runtime";
-var SEARCHBOX_CLASSNAME = `k-searchbox`;
-var states13 = [
-  States.hover,
-  States.focus,
-  States.valid,
+// src/switch/templates/switch-normal.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+
+// src/switch/templates/switch-checked.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+
+// src/input/input.spec.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var INPUT_CLASSNAME = `k-input`;
+var states12 = [
+  States.hover,
+  States.focus,
+  States.valid,
   States.invalid,
   States.required,
   States.disabled,
-  States.loading
+  States.loading,
+  States.readonly
 ];
 var options12 = {
   size: [Size.small, Size.medium, Size.large],
@@ -4902,514 +4984,432 @@ var options12 = {
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
 var defaultProps13 = {
-  showIcon: true,
-  icon: "search",
-  size: Input.defaultProps.size,
-  rounded: Input.defaultProps.rounded,
-  fillMode: Input.defaultProps.fillMode
+  size: Size.medium,
+  rounded: Size.medium,
+  fillMode: FillMode.solid
 };
-var Searchbox = (props) => {
+var Input = (props) => {
   const {
-    value,
-    placeholder,
-    size,
-    rounded,
-    fillMode,
     hover,
     focus,
-    valid,
+    disabled,
     invalid,
-    required,
+    valid,
     loading,
-    disabled,
-    showIcon = defaultProps13.showIcon,
-    icon = defaultProps13.icon,
+    readonly,
+    size = defaultProps13.size,
+    rounded = defaultProps13.rounded,
+    fillMode = defaultProps13.fillMode,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs7(
-    Input,
+  return /* @__PURE__ */ jsx27(
+    "span",
     {
       ...other,
-      size,
-      rounded,
-      fillMode,
-      hover,
-      focus,
-      valid,
-      invalid,
-      required,
-      loading,
-      disabled,
-      className: classNames(props.className, SEARCHBOX_CLASSNAME),
-      children: [
-        showIcon && /* @__PURE__ */ jsx26(Icon, { className: "k-input-icon", icon }),
-        /* @__PURE__ */ jsx26(InputInnerInput, { placeholder, value }),
-        /* @__PURE__ */ jsx26(InputLoadingIcon, { ...props }),
-        /* @__PURE__ */ jsx26(InputValidationIcon, { ...props }),
-        /* @__PURE__ */ jsx26(InputClearValue, { ...props })
-      ]
+      className: classNames(
+        props.className,
+        INPUT_CLASSNAME,
+        optionClassNames(INPUT_CLASSNAME, { size, rounded, fillMode }),
+        stateClassNames(INPUT_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
+      )
     }
   );
 };
-Searchbox.states = states13;
-Searchbox.options = options12;
-Searchbox.className = SEARCHBOX_CLASSNAME;
-Searchbox.defaultProps = defaultProps13;
-
-// src/searchbox/templates/searchbox-normal.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+Input.states = states12;
+Input.options = options12;
+Input.className = INPUT_CLASSNAME;
+Input.defaultProps = defaultProps13;
 
-// src/animation-container/animation-container.spec.tsx
+// src/input/picker.spec.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
-var ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
-var states14 = [];
-var options13 = {};
+var PICKER_CLASSNAME = `k-picker`;
+var pickerStates = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+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 defaultProps14 = {
-  positionMode: "absolute"
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid
 };
-var AnimationContainer = (props) => {
+var Picker = (props) => {
   const {
-    positionMode,
-    animationStyle,
-    offset,
+    hover,
+    focus,
+    disabled,
+    invalid,
+    valid,
+    loading,
+    readonly,
+    size = defaultProps14.size,
+    rounded = defaultProps14.rounded,
+    fillMode = defaultProps14.fillMode,
     ...other
   } = props;
   return /* @__PURE__ */ jsx28(
-    "div",
+    "span",
     {
       ...other,
-      style: { ...offset, ...props.style },
       className: classNames(
-        ANIMATION_CONTAINER_CLASSNAME,
-        "k-animation-container-shown",
-        {
-          ["k-animation-container-fixed"]: positionMode === "fixed"
-        }
+        props.className,
+        PICKER_CLASSNAME,
+        optionClassNames(PICKER_CLASSNAME, { size, rounded, fillMode }),
+        stateClassNames(PICKER_CLASSNAME, { hover, focus, disabled, invalid, valid, loading, readonly })
       ),
-      children: /* @__PURE__ */ jsx28("div", { className: "k-child-animation-container", style: animationStyle, children: props.children })
+      children: props.children
     }
   );
 };
-AnimationContainer.states = states14;
-AnimationContainer.options = options13;
-AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
-AnimationContainer.defaultProps = defaultProps14;
+Picker.states = pickerStates;
+Picker.options = pickerOptions;
+Picker.className = PICKER_CLASSNAME;
+Picker.defaultProps = defaultProps14;
 
-// src/popup/popup.spec.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
-var POPUP_CLASSNAME = `k-popup`;
-var states15 = [];
+// src/input/input-clear-value.tsx
+import { Fragment as Fragment8, jsx as jsx29 } from "react/jsx-runtime";
+var className = `k-clear-value`;
+var states13 = [
+  States.disabled,
+  States.loading,
+  States.readonly
+];
+var options13 = {};
+var InputClearValue = (props) => {
+  const {
+    disabled,
+    loading,
+    readonly,
+    value
+  } = props;
+  if (disabled || readonly || loading || !value) {
+    return /* @__PURE__ */ jsx29(Fragment8, {});
+  }
+  return /* @__PURE__ */ jsx29("span", { className: classNames(props.className, className), children: /* @__PURE__ */ jsx29(Icon, { icon: "x" }) });
+};
+InputClearValue.states = states13;
+InputClearValue.options = options13;
+InputClearValue.className = className;
+
+// src/input/input-inner-input.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+var className2 = `k-input-inner`;
+var states14 = [];
 var options14 = {};
 var defaultProps15 = {
-  positionMode: "absolute"
+  type: "text",
+  autocomplete: "off",
+  value: "",
+  placeholder: ""
 };
-var Popup = (props) => {
+var InputInnerInput = (props) => {
   const {
-    offset,
-    positionMode,
+    value = defaultProps15.value,
+    type = defaultProps15.type,
+    placeholder = defaultProps15.placeholder,
+    autocomplete = defaultProps15.autocomplete,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx29(
-    AnimationContainer,
+  return /* @__PURE__ */ jsx30(
+    "input",
     {
-      positionMode,
-      offset,
-      children: /* @__PURE__ */ jsx29("div", { ...other, className: classNames(props.className, POPUP_CLASSNAME), children: props.children })
+      ...other,
+      type,
+      className: classNames(props.className, className2, optionClassNames(className2, props)),
+      placeholder,
+      autoComplete: autocomplete,
+      defaultValue: value
     }
   );
 };
-Popup.states = states15;
-Popup.options = options14;
-Popup.className = POPUP_CLASSNAME;
-Popup.defaultProps = defaultProps15;
+InputInnerInput.states = states14;
+InputInnerInput.options = options14;
+InputInnerInput.className = className2;
 
-// src/split-button/split-button.spec.tsx
-import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs8 } from "react/jsx-runtime";
-var SPLITBUTTON_CLASSNAME = `k-split-button`;
-var states16 = [
-  States.hover,
-  States.focus,
-  States.active,
-  States.selected,
-  States.disabled
-];
-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, 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
-  ]
+// src/input/input-inner-span.tsx
+import { jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+var className3 = `k-input-inner`;
+var states15 = [];
+var options15 = {};
+var InputInnerSpan = (props) => {
+  const {
+    value,
+    placeholder,
+    showValue,
+    valueIcon,
+    valueIconName,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsxs10(
+    "span",
+    {
+      ...other,
+      className: classNames(props.className, className3, optionClassNames(className3, props)),
+      children: [
+        valueIcon,
+        !valueIcon && valueIconName && /* @__PURE__ */ jsx31(Icon, { className: "k-input-value-icon", icon: valueIconName }),
+        showValue && !value && placeholder,
+        showValue && value && /* @__PURE__ */ jsx31("span", { className: "k-input-value-text", children: value })
+      ]
+    }
+  );
 };
+InputInnerSpan.states = states15;
+InputInnerSpan.options = options15;
+InputInnerSpan.className = className3;
+
+// src/input/input-inner-textarea.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
 var defaultProps16 = {
-  size: Size.medium,
-  rounded: Roundness.medium,
-  fillMode: FillMode.solid,
-  themeColor: ThemeColor.base,
-  arrowIconName: "caret-alt-down"
+  value: "",
+  placeholder: ""
 };
-var SplitButton = (props) => {
+var className4 = `k-input-inner`;
+var states16 = [];
+var options16 = {};
+var InputInnerTextarea = (props) => {
   const {
-    size = defaultProps16.size,
-    rounded = defaultProps16.rounded,
-    fillMode = defaultProps16.fillMode,
-    themeColor = defaultProps16.themeColor,
-    hover,
-    focus,
-    active,
-    selected,
-    disabled,
-    icon,
-    text,
-    arrowIconName = defaultProps16.arrowIconName,
-    popup,
-    opened,
+    value = defaultProps16.value,
+    placeholder = defaultProps16.placeholder,
+    rows,
     ...other
   } = props;
-  return /* @__PURE__ */ jsxs8(Fragment10, { children: [
-    /* @__PURE__ */ jsxs8(
-      "div",
-      {
-        ...other,
-        className: classNames(
-          props.className,
-          SPLITBUTTON_CLASSNAME,
-          "k-button-group",
-          optionClassNames(SPLITBUTTON_CLASSNAME, {
-            rounded
-          })
-        ),
-        children: [
-          /* @__PURE__ */ jsx30(
-            Button,
-            {
-              text,
-              icon,
-              size,
-              rounded,
-              fillMode,
-              themeColor,
-              hover,
-              focus,
-              active,
-              selected,
-              disabled,
-              children: props.children
-            }
-          ),
-          /* @__PURE__ */ jsx30(
-            Button,
-            {
-              className: "k-split-button-arrow",
-              icon: arrowIconName,
-              size,
-              rounded,
-              fillMode,
-              disabled
-            }
-          )
-        ]
-      }
-    ),
-    opened && popup && /* @__PURE__ */ jsx30(Popup, { className: "k-menu-popup", children: popup })
-  ] });
+  return /* @__PURE__ */ jsx32(
+    "textarea",
+    {
+      ...other,
+      className: classNames(props.className, className4, optionClassNames(className4, props)),
+      placeholder,
+      rows,
+      children: value
+    }
+  );
 };
-SplitButton.states = states16;
-SplitButton.options = options15;
-SplitButton.className = SPLITBUTTON_CLASSNAME;
-SplitButton.defaultProps = defaultProps16;
-var split_button_spec_default = SplitButton;
-
-// src/split-button/templates/icon-split-button.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
-
-// src/split-button/templates/icon-text-split-button.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
-
-// src/split-button/templates/text-split-button.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+InputInnerTextarea.states = states16;
+InputInnerTextarea.options = options16;
+InputInnerTextarea.className = className4;
 
-// src/menu/menu-item.spec.tsx
-import { Fragment as Fragment11, jsx as jsx34, jsxs as jsxs9 } from "react/jsx-runtime";
-var MENUITEM_CLASSNAME = `k-menu-item`;
+// src/input/input-loading-icon.tsx
+import { Fragment as Fragment9, jsx as jsx33 } from "react/jsx-runtime";
+var className5 = `k-input-loading-icon`;
 var states17 = [
-  States.hover,
-  States.focus,
-  States.active,
-  States.selected,
-  States.disabled
+  States.disabled,
+  States.loading
 ];
-var options16 = {};
-var defaultProps17 = {
-  dir: "ltr"
+var InputLoadingIcon = (props) => {
+  const {
+    disabled,
+    loading
+  } = props;
+  if (disabled || !loading) {
+    return /* @__PURE__ */ jsx33(Fragment9, {});
+  }
+  return /* @__PURE__ */ jsx33("span", { className: classNames(props.className, className5, "k-icon k-i-loading") });
 };
-var MenuItem = (props) => {
+
+// src/input/input-validation-icon.tsx
+import { Fragment as Fragment10, jsx as jsx34 } from "react/jsx-runtime";
+var className6 = `k-input-validation-icon`;
+var states18 = [
+  States.valid,
+  States.invalid,
+  States.disabled,
+  States.loading
+];
+var options17 = {};
+var InputValidationIcon = (props) => {
   const {
-    hover,
-    focus,
-    active,
-    selected,
+    valid,
+    invalid,
     disabled,
-    icon,
-    text,
-    showArrow,
-    arrowIconName,
-    dir = defaultProps17.dir,
-    children,
+    loading
+  } = props;
+  const iconName = invalid ? "warning-circle" : "check-circle";
+  const renderValidationIcon = Boolean(valid || invalid);
+  if (disabled || loading || !renderValidationIcon) {
+    return /* @__PURE__ */ jsx34(Fragment10, {});
+  }
+  return /* @__PURE__ */ jsx34(Icon, { className: classNames(className6), icon: iconName });
+};
+InputValidationIcon.states = states18;
+InputValidationIcon.options = options17;
+InputValidationIcon.className = className6;
+
+// src/input/input-prefix.tsx
+import { Fragment as Fragment11, jsx as jsx35 } from "react/jsx-runtime";
+var className7 = `k-input-prefix`;
+var defaultProps17 = {
+  direction: "horizontal"
+};
+var InputPrefix = (props) => {
+  const {
+    direction = defaultProps17.direction,
     ...other
   } = props;
-  const contentTemplate = /* @__PURE__ */ jsx34(Fragment11, {});
-  if (children) {
-    children.forEach((child) => {
-      const component = child.type;
-      if (component === "MenuItemContent") {
-        contentTemplate.props.children.push(child);
-        return;
-      }
-    });
-  }
-  let expandArrowName = arrowIconName;
-  if (!expandArrowName) {
-    expandArrowName = dir === "rtl" ? "caret-alt-left" : "caret-alt-right";
+  if (!props.children) {
+    return /* @__PURE__ */ jsx35(Fragment11, {});
   }
-  return /* @__PURE__ */ jsxs9(
-    "li",
+  return /* @__PURE__ */ jsx35(
+    "span",
     {
       ...other,
       className: classNames(
+        className7,
         props.className,
-        MENUITEM_CLASSNAME,
-        //TODO
-        "k-item",
-        stateClassNames(MENUITEM_CLASSNAME, {
-          focus,
-          disabled
-        })
+        {
+          [`k-input-prefix-${direction}`]: direction
+        }
       ),
-      children: [
-        /* @__PURE__ */ jsxs9(
-          "span",
-          {
-            className: classNames(
-              "k-link k-menu-link",
-              stateClassNames("k-menu-link", {
-                hover,
-                active,
-                selected,
-                disabled
-              })
-            ),
-            children: [
-              icon && /* @__PURE__ */ jsx34(Icon, { className: "k-menu-link-icon", icon }),
-              /* @__PURE__ */ jsx34("span", { className: "k-menu-link-text", children: text }),
-              showArrow && /* @__PURE__ */ jsx34("span", { className: "k-menu-expand-arrow", children: /* @__PURE__ */ jsx34(Icon, { icon: expandArrowName }) })
-            ]
-          }
-        ),
-        contentTemplate
-      ]
+      children: props.children
     }
   );
 };
-MenuItem.states = states17;
-MenuItem.options = options16;
-MenuItem.className = MENUITEM_CLASSNAME;
-MenuItem.defaultProps = defaultProps17;
-var menu_item_spec_default = MenuItem;
 
-// src/menu/menu-separator.spec.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SEPARATOR_CLASSNAME = `k-separator`;
+// src/input/input-suffix.tsx
+import { Fragment as Fragment12, jsx as jsx36 } from "react/jsx-runtime";
+var className8 = `k-input-suffix`;
 var defaultProps18 = {
-  orientation: "horizontal"
+  direction: "horizontal"
 };
-var MenuSeparator = (props) => {
+var InputSuffix = (props) => {
   const {
-    orientation = defaultProps18.orientation,
+    direction = defaultProps18.direction,
     ...other
   } = props;
-  return /* @__PURE__ */ jsx35(
-    "li",
+  if (!props.children) {
+    return /* @__PURE__ */ jsx36(Fragment12, {});
+  }
+  return /* @__PURE__ */ jsx36(
+    "span",
     {
       ...other,
       className: classNames(
+        className8,
         props.className,
-        "k-item",
-        SEPARATOR_CLASSNAME,
         {
-          [`${SEPARATOR_CLASSNAME}-${orientation}`]: orientation
+          [`k-input-suffix-${direction}`]: direction
         }
-      )
+      ),
+      children: props.children
     }
   );
 };
-var menu_separator_spec_default = MenuSeparator;
-
-// src/menu/menu-item-content.tsx
-import { Fragment as Fragment12, jsx as jsx36 } from "react/jsx-runtime";
 
-// src/menu/menu-list.spec.tsx
+// src/input/input-prefix-text.tsx
 import { jsx as jsx37 } from "react/jsx-runtime";
-import { createElement } from "react";
-var MENULIST_CLASSNAME = `k-menu-group`;
-var states18 = [];
-var options17 = {
-  size: [Size.small, Size.medium, Size.large]
-};
+
+// src/input/input-suffix-text.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+
+// src/input/input-separator.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+var className9 = `k-input-separator`;
 var defaultProps19 = {
-  size: Size.medium,
-  dir: "ltr"
+  direction: "vertical"
 };
-var MenuList = (props) => {
+var InputSeparator = (props) => {
   const {
-    children,
-    size = defaultProps19.size,
-    dir = defaultProps19.dir,
+    direction = defaultProps19.direction,
     ...other
   } = props;
-  const listChildren = [];
-  if (children) {
-    if (Array.isArray(children)) {
-      children.map((child, index) => {
-        if (child.type === menu_item_spec_default) {
-          listChildren.push(
-            /* @__PURE__ */ createElement(menu_item_spec_default, { ...child.props, dir, key: index })
-          );
-        } else if (child.type === menu_separator_spec_default) {
-          listChildren.push(
-            /* @__PURE__ */ jsx37(menu_separator_spec_default, {})
-          );
-        } else {
-          listChildren.push(child);
-        }
-      });
-    }
-  }
-  return /* @__PURE__ */ jsx37(
-    "ul",
+  return /* @__PURE__ */ jsx39(
+    "span",
     {
       ...other,
       className: classNames(
+        className9,
         props.className,
-        MENULIST_CLASSNAME,
-        optionClassNames(MENULIST_CLASSNAME, {
-          size
-        })
-      ),
-      children: listChildren
+        {
+          [`${className9}-${direction}`]: direction
+        }
+      )
     }
   );
 };
-MenuList.states = states18;
-MenuList.options = options17;
-MenuList.className = MENULIST_CLASSNAME;
-MenuList.defaultProps = defaultProps19;
 
-// src/split-button/templates/split-button-popup.tsx
-import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
-
-// src/switch/switch.spec.tsx
-import { jsx as jsx39, jsxs as jsxs11 } from "react/jsx-runtime";
-var SWITCH_CLASSNAME = `k-switch`;
+// src/searchbox/searchbox.spec.tsx
+import { jsx as jsx40, jsxs as jsxs11 } from "react/jsx-runtime";
+var SEARCHBOX_CLASSNAME = `k-searchbox`;
 var states19 = [
   States.hover,
   States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
   States.disabled,
-  States.checked
+  States.loading
 ];
 var options18 = {
   size: [Size.small, Size.medium, Size.large],
-  trackRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-  thumbRounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full]
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
 var defaultProps20 = {
-  size: Size.medium,
-  trackRounded: Roundness.full,
-  thumbRounded: Roundness.full
+  showIcon: true,
+  icon: "search",
+  size: Input.defaultProps.size,
+  rounded: Input.defaultProps.rounded,
+  fillMode: Input.defaultProps.fillMode
 };
-var Switch = (props) => {
+var Searchbox = (props) => {
   const {
-    checked,
-    onLabel,
-    offLabel,
-    size = defaultProps20.size,
-    trackRounded = defaultProps20.trackRounded,
-    thumbRounded = defaultProps20.thumbRounded,
+    value,
+    placeholder,
+    size,
+    rounded,
+    fillMode,
     hover,
     focus,
+    valid,
+    invalid,
+    required,
+    loading,
     disabled,
+    showIcon = defaultProps20.showIcon,
+    icon = defaultProps20.icon,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs11(
-    "span",
+    Input,
     {
       ...other,
-      className: classNames(
-        props.className,
-        SWITCH_CLASSNAME,
-        optionClassNames(SWITCH_CLASSNAME, {
-          size
-        }),
-        stateClassNames(SWITCH_CLASSNAME, {
-          hover,
-          focus,
-          disabled
-        }),
-        {
-          [`${SWITCH_CLASSNAME}-on`]: checked,
-          [`${SWITCH_CLASSNAME}-off`]: !checked
-        }
-      ),
+      size,
+      rounded,
+      fillMode,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
+      loading,
+      disabled,
+      className: classNames(props.className, SEARCHBOX_CLASSNAME),
       children: [
-        /* @__PURE__ */ jsxs11(
-          "span",
-          {
-            className: classNames(
-              "k-switch-track",
-              optionClassNames(SWITCH_CLASSNAME, {
-                rounded: trackRounded
-              })
-            ),
-            children: [
-              onLabel && /* @__PURE__ */ jsx39("span", { className: "k-switch-label-on", children: onLabel }),
-              offLabel && /* @__PURE__ */ jsx39("span", { className: "k-switch-label-off", children: offLabel })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx39("span", { className: "k-switch-thumb-wrap", children: /* @__PURE__ */ jsx39(
-          "span",
-          {
-            className: classNames(
-              "k-switch-thumb",
-              optionClassNames(SWITCH_CLASSNAME, {
-                rounded: thumbRounded
-              })
-            )
-          }
-        ) })
+        showIcon && /* @__PURE__ */ jsx40(Icon, { className: "k-input-icon", icon }),
+        /* @__PURE__ */ jsx40(InputInnerInput, { placeholder, value }),
+        /* @__PURE__ */ jsx40(InputLoadingIcon, { ...props }),
+        /* @__PURE__ */ jsx40(InputValidationIcon, { ...props }),
+        /* @__PURE__ */ jsx40(InputClearValue, { ...props })
       ]
     }
   );
 };
-Switch.states = states19;
-Switch.options = options18;
-Switch.className = SWITCH_CLASSNAME;
-Switch.defaultProps = defaultProps20;
-
-// src/switch/templates/switch-normal.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+Searchbox.states = states19;
+Searchbox.options = options18;
+Searchbox.className = SEARCHBOX_CLASSNAME;
+Searchbox.defaultProps = defaultProps20;
 
-// src/switch/templates/switch-checked.tsx
+// src/searchbox/templates/searchbox-normal.tsx
 import { jsx as jsx41 } from "react/jsx-runtime";
 
 // src/color-preview/color-preview.tsx
@@ -5611,7 +5611,9 @@ var defaultProps23 = {
   orientation: "horizontal",
   readonly: false,
   disabled: false,
-  handlePosition: "end"
+  handlePosition: "end",
+  showButtons: true,
+  showTicks: true
 };
 var Slider = (props) => {
   const {
@@ -5620,6 +5622,8 @@ var Slider = (props) => {
     readonly = defaultProps23.readonly,
     disabled = defaultProps23.disabled,
     handlePosition = defaultProps23.handlePosition,
+    showButtons = defaultProps23.showButtons,
+    showTicks = defaultProps23.showTicks,
     hover,
     focus,
     active,
@@ -5648,9 +5652,9 @@ var Slider = (props) => {
       "k-range-slider": type === "range"
     }
   ), dir, children: [
-    type !== "gradient" && /* @__PURE__ */ jsx46(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
+    showButtons && /* @__PURE__ */ jsx46(Button, { className: "k-button-decrease", rounded: "full", icon: iconDecrease }),
     /* @__PURE__ */ jsxs14("div", { className: "k-slider-track-wrap", children: [
-      type !== "gradient" && /* @__PURE__ */ jsx46("ul", { className: "k-reset k-slider-items", children: props.children }),
+      showTicks && /* @__PURE__ */ jsx46("ul", { className: "k-reset k-slider-items", children: props.children }),
       /* @__PURE__ */ jsxs14("div", { className: "k-slider-track", style: trackStyle, children: [
         /* @__PURE__ */ jsx46("div", { className: "k-slider-selection" }),
         type === "range" && /* @__PURE__ */ jsx46("span", { className: classNames(
@@ -5673,7 +5677,7 @@ var Slider = (props) => {
         ) })
       ] })
     ] }),
-    type !== "gradient" && /* @__PURE__ */ jsx46(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
+    showButtons && /* @__PURE__ */ jsx46(Button, { className: "k-button-increase", rounded: "full", icon: iconIncrease })
   ] });
 };
 Slider.states = states23;
@@ -5733,6 +5737,8 @@ var SliderGradientVertical = (props) => /* @__PURE__ */ jsx53(
   {
     type: "gradient",
     orientation: "vertical",
+    showButtons: false,
+    showTicks: false,
     children: /* @__PURE__ */ jsxs20(Fragment19, { children: [
       /* @__PURE__ */ jsx53(SliderTick, { label: true, large: true, text: "0" }),
       /* @__PURE__ */ jsx53(SliderTick, {}),
@@ -7929,30 +7935,86 @@ import { jsx as jsx131 } from "react/jsx-runtime";
 // src/toolbar/templates/toolbar-angular-resizable.tsx
 import { jsx as jsx132 } from "react/jsx-runtime";
 
-// src/filemanager/tests/filemanager-toolbar.tsx
-import { Fragment as Fragment42, jsx as jsx133, jsxs as jsxs54 } from "react/jsx-runtime";
-var filemanager_toolbar_default = () => /* @__PURE__ */ jsx133(Fragment42, { children: /* @__PURE__ */ jsxs54("div", { id: "test-area", className: "k-d-grid k-grid-cols-1", children: [
-  /* @__PURE__ */ jsx133("span", { children: "Full toolbar" }),
-  /* @__PURE__ */ jsx133("div", { className: "k-widget k-filemanager", children: /* @__PURE__ */ jsx133("div", { className: "k-filemanager-header", children: /* @__PURE__ */ jsxs54(Toolbar, { className: "k-filemanager-toolbar", children: [
-    /* @__PURE__ */ jsx133(Button, { children: "New Folder" }),
-    /* @__PURE__ */ jsx133(Button, { children: "Upload" }),
-    /* @__PURE__ */ jsxs54(ButtonGroup, { children: [
-      /* @__PURE__ */ jsx133(Button, { icon: "sort-asc-small" }),
-      /* @__PURE__ */ jsx133(Button, { icon: "sort-desc-small" })
-    ] }),
-    /* @__PURE__ */ jsx133(SplitButton, { text: "Sort By" }),
-    /* @__PURE__ */ jsxs54(ButtonGroup, { children: [
-      /* @__PURE__ */ jsx133(Button, { icon: "grid-layout" }),
-      /* @__PURE__ */ jsx133(Button, { icon: "grid" })
-    ] }),
-    /* @__PURE__ */ jsx133("div", { className: "k-spacer" }),
-    /* @__PURE__ */ jsxs54("div", { className: "k-filemanager-details-toggle", children: [
-      /* @__PURE__ */ jsx133("label", { children: "View Details" }),
-      /* @__PURE__ */ jsx133(Switch, { checked: true })
-    ] }),
-    /* @__PURE__ */ jsx133(Searchbox, { className: "k-filemanager-search-tool", placeholder: "Search..." })
-  ] }) }) })
+// src/filemanager/filemanager-toolbar.spec.tsx
+import { jsx as jsx133 } from "react/jsx-runtime";
+var FILEMANAGERTOOLBAR_CLASSNAME = `k-filemanager-toolbar`;
+var states50 = [];
+var options48 = {};
+var defaultProps48 = {};
+var FileManagerToolbar = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx133(
+    Toolbar,
+    {
+      className: classNames(
+        props.className,
+        FILEMANAGERTOOLBAR_CLASSNAME
+      ),
+      ...other,
+      children
+    }
+  );
+};
+FileManagerToolbar.states = states50;
+FileManagerToolbar.options = options48;
+FileManagerToolbar.className = FILEMANAGERTOOLBAR_CLASSNAME;
+FileManagerToolbar.defaultProps = defaultProps48;
+var filemanager_toolbar_spec_default = FileManagerToolbar;
+
+// src/filemanager/filemanager.spec.tsx
+import { Fragment as Fragment42, jsx as jsx134, jsxs as jsxs54 } from "react/jsx-runtime";
+var FILEMANAGER_CLASSNAME = "k-filemanager";
+var states51 = [
+  States.disabled
+];
+var options49 = {};
+var defaultToolbar = /* @__PURE__ */ jsx134(Fragment42, { children: /* @__PURE__ */ jsxs54(filemanager_toolbar_spec_default, { children: [
+  /* @__PURE__ */ jsx134(Button, { children: "New Folder" }),
+  /* @__PURE__ */ jsx134(Button, { children: "Upload" }),
+  /* @__PURE__ */ jsxs54(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx134(Button, { icon: "sort-asc-small" }),
+    /* @__PURE__ */ jsx134(Button, { icon: "sort-desc-small" })
+  ] }),
+  /* @__PURE__ */ jsx134(SplitButton, { text: "Sort By" }),
+  /* @__PURE__ */ jsxs54(ButtonGroup, { children: [
+    /* @__PURE__ */ jsx134(Button, { icon: "grid-layout" }),
+    /* @__PURE__ */ jsx134(Button, { icon: "grid" })
+  ] }),
+  /* @__PURE__ */ jsx134("div", { className: "k-spacer" }),
+  /* @__PURE__ */ jsxs54("div", { className: "k-filemanager-details-toggle", children: [
+    /* @__PURE__ */ jsx134("label", { children: "View Details" }),
+    /* @__PURE__ */ jsx134(Switch, {})
+  ] }),
+  /* @__PURE__ */ jsx134(Searchbox, { className: "k-filemanager-search-tool", placeholder: "Search..." })
 ] }) });
+var defaultProps49 = {
+  toolbar: defaultToolbar
+};
+var FileManager = (props) => {
+  const {
+    disabled,
+    toolbar
+  } = props;
+  return /* @__PURE__ */ jsxs54("div", { className: classNames(
+    props.className,
+    FILEMANAGER_CLASSNAME,
+    stateClassNames(FILEMANAGER_CLASSNAME, {
+      disabled
+    })
+  ), children: [
+    /* @__PURE__ */ jsx134("div", { className: "k-filemanager-header", children: toolbar }),
+    /* @__PURE__ */ jsx134("div", { className: "k-filemanager-content-container", children: props.children })
+  ] });
+};
+FileManager.states = states51;
+FileManager.options = options49;
+FileManager.className = FILEMANAGER_CLASSNAME;
+FileManager.defaultProps = defaultProps49;
+var filemanager_spec_default = FileManager;
 export {
-  filemanager_toolbar_default as default
+  FileManager,
+  filemanager_spec_default as default
 };