@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170

package/dist/editor/tests/editor-image-editor.js

@@ -168,10 +168,186 @@
     "readonly": "readonly"
   };
 
-  // src/input/input.spec.tsx
+  // src/icon/icon.spec.tsx
   var import_jsx_runtime = __require("react/jsx-runtime");
+  var ICON_CLASSNAME = `k-icon`;
+  var states = [];
+  var options = {
+    size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
+    themeColor: [
+      ThemeColor.base,
+      ThemeColor.primary,
+      ThemeColor.secondary,
+      ThemeColor.tertiary,
+      ThemeColor.success,
+      ThemeColor.warning,
+      ThemeColor.error,
+      ThemeColor.info,
+      ThemeColor.light,
+      ThemeColor.dark
+    ]
+  };
+  var defaultProps = {};
+  var Icon = (props) => {
+    const _a = props, {
+      size,
+      themeColor,
+      name,
+      rotate,
+      flip
+    } = _a, other = __objRest(_a, [
+      "size",
+      "themeColor",
+      "name",
+      "rotate",
+      "flip"
+    ]);
+    if (!name) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          props.className,
+          ICON_CLASSNAME,
+          optionClassNames(ICON_CLASSNAME, {
+            size,
+            themeColor
+          }),
+          {
+            [`k-i-${name}`]: name,
+            [`k-rotate-${rotate}`]: rotate,
+            [`k-flip-${flip}`]: flip
+          }
+        )
+      })
+    );
+  };
+  Icon.states = states;
+  Icon.options = options;
+  Icon.className = ICON_CLASSNAME;
+  Icon.defaultProps = defaultProps;
+
+  // src/button/button.spec.tsx
+  var import_jsx_runtime2 = __require("react/jsx-runtime");
+  var BUTTON_CLASSNAME = `k-button`;
+  var states2 = [
+    States.hover,
+    States.focus,
+    States.active,
+    States.selected,
+    States.disabled
+  ];
+  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],
+    themeColor: [
+      ThemeColor.base,
+      ThemeColor.primary,
+      ThemeColor.secondary,
+      ThemeColor.tertiary,
+      ThemeColor.success,
+      ThemeColor.warning,
+      ThemeColor.error,
+      ThemeColor.info,
+      ThemeColor.light,
+      ThemeColor.dark,
+      ThemeColor.inverse
+    ]
+  };
+  var defaultProps2 = {
+    size: Size.medium,
+    rounded: Roundness.medium,
+    fillMode: FillMode.solid,
+    themeColor: ThemeColor.base,
+    showArrow: false,
+    arrowIconName: "arrow-s"
+  };
+  var Button = (props) => {
+    const _a = props, {
+      size = defaultProps2.size,
+      rounded = defaultProps2.rounded,
+      fillMode = defaultProps2.fillMode,
+      themeColor = defaultProps2.themeColor,
+      hover,
+      focus,
+      active,
+      selected,
+      disabled,
+      icon,
+      text,
+      iconClassName,
+      showArrow = defaultProps2.showArrow,
+      arrowIconName = defaultProps2.arrowIconName
+    } = _a, other = __objRest(_a, [
+      "size",
+      "rounded",
+      "fillMode",
+      "themeColor",
+      "hover",
+      "focus",
+      "active",
+      "selected",
+      "disabled",
+      "icon",
+      "text",
+      "iconClassName",
+      "showArrow",
+      "arrowIconName"
+    ]);
+    const hasIcon = icon !== void 0;
+    const hasChildren = props.children !== void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      __spreadProps(__spreadValues({}, other), {
+        className: classNames(
+          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: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Icon,
+            {
+              className: classNames(iconClassName, "k-button-icon"),
+              name: icon
+            }
+          ),
+          text ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            text && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-button-text", children: text }),
+            props.children
+          ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-button-text", children: props.children }),
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: arrowIconName }) })
+        ]
+      })
+    );
+  };
+  Button.states = states2;
+  Button.options = options2;
+  Button.className = BUTTON_CLASSNAME;
+  Button.defaultProps = defaultProps2;
+
+  // src/input/input.spec.tsx
+  var import_jsx_runtime3 = __require("react/jsx-runtime");
   var INPUT_CLASSNAME = `k-input`;
-  var states = [
+  var states3 = [
     States.hover,
     States.focus,
     States.valid,
@@ -181,12 +357,12 @@
     States.loading,
     States.readonly
   ];
-  var options = {
+  var options3 = {
     size: [Size.small, Size.medium, Size.large],
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps = {
+  var defaultProps3 = {
     size: Size.medium,
     rounded: Size.medium,
     fillMode: FillMode.solid
@@ -200,9 +376,9 @@
       valid,
       loading,
       readonly,
-      size = defaultProps.size,
-      rounded = defaultProps.rounded,
-      fillMode = defaultProps.fillMode
+      size = defaultProps3.size,
+      rounded = defaultProps3.rounded,
+      fillMode = defaultProps3.fillMode
     } = _a, other = __objRest(_a, [
       "hover",
       "focus",
@@ -215,7 +391,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -227,13 +403,13 @@
       })
     );
   };
-  Input.states = states;
-  Input.options = options;
+  Input.states = states3;
+  Input.options = options3;
   Input.className = INPUT_CLASSNAME;
-  Input.defaultProps = defaultProps;
+  Input.defaultProps = defaultProps3;
 
   // src/input/picker.spec.tsx
-  var import_jsx_runtime2 = __require("react/jsx-runtime");
+  var import_jsx_runtime4 = __require("react/jsx-runtime");
   var PICKER_CLASSNAME = `k-picker`;
   var pickerStates = [
     States.hover,
@@ -250,7 +426,7 @@
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps2 = {
+  var defaultProps4 = {
     size: Size.medium,
     rounded: Roundness.medium,
     fillMode: FillMode.solid
@@ -264,9 +440,9 @@
       valid,
       loading,
       readonly,
-      size = defaultProps2.size,
-      rounded = defaultProps2.rounded,
-      fillMode = defaultProps2.fillMode
+      size = defaultProps4.size,
+      rounded = defaultProps4.rounded,
+      fillMode = defaultProps4.fillMode
     } = _a, other = __objRest(_a, [
       "hover",
       "focus",
@@ -279,7 +455,7 @@
       "rounded",
       "fillMode"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -295,78 +471,17 @@
   Picker.states = pickerStates;
   Picker.options = pickerOptions;
   Picker.className = PICKER_CLASSNAME;
-  Picker.defaultProps = defaultProps2;
-
-  // src/icon/icon.spec.tsx
-  var import_jsx_runtime3 = __require("react/jsx-runtime");
-  var ICON_CLASSNAME = `k-icon`;
-  var states2 = [];
-  var options2 = {
-    size: [Size.xsmall, Size.small, Size.medium, Size.large, Size.xlarge, Size.xxlarge, Size.xxxlarge],
-    themeColor: [
-      ThemeColor.base,
-      ThemeColor.primary,
-      ThemeColor.secondary,
-      ThemeColor.tertiary,
-      ThemeColor.success,
-      ThemeColor.warning,
-      ThemeColor.error,
-      ThemeColor.info,
-      ThemeColor.light,
-      ThemeColor.dark
-    ]
-  };
-  var defaultProps3 = {};
-  var Icon = (props) => {
-    const _a = props, {
-      size,
-      themeColor,
-      name,
-      rotate,
-      flip
-    } = _a, other = __objRest(_a, [
-      "size",
-      "themeColor",
-      "name",
-      "rotate",
-      "flip"
-    ]);
-    if (!name) {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "span",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          props.className,
-          ICON_CLASSNAME,
-          optionClassNames(ICON_CLASSNAME, {
-            size,
-            themeColor
-          }),
-          {
-            [`k-i-${name}`]: name,
-            [`k-rotate-${rotate}`]: rotate,
-            [`k-flip-${flip}`]: flip
-          }
-        )
-      })
-    );
-  };
-  Icon.states = states2;
-  Icon.options = options2;
-  Icon.className = ICON_CLASSNAME;
-  Icon.defaultProps = defaultProps3;
+  Picker.defaultProps = defaultProps4;
 
   // src/input/input-clear-value.tsx
-  var import_jsx_runtime4 = __require("react/jsx-runtime");
+  var import_jsx_runtime5 = __require("react/jsx-runtime");
   var className = `k-clear-value`;
-  var states3 = [
+  var states4 = [
     States.disabled,
     States.loading,
     States.readonly
   ];
-  var options3 = {};
+  var options4 = {};
   var InputClearValue = (props) => {
     const {
       disabled,
@@ -375,20 +490,20 @@
       value
     } = props;
     if (disabled || readonly || loading || !value) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "x" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: classNames(props.className, className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "x" }) });
   };
-  InputClearValue.states = states3;
-  InputClearValue.options = options3;
+  InputClearValue.states = states4;
+  InputClearValue.options = options4;
   InputClearValue.className = className;
 
   // src/input/input-inner-input.tsx
-  var import_jsx_runtime5 = __require("react/jsx-runtime");
+  var import_jsx_runtime6 = __require("react/jsx-runtime");
   var className2 = `k-input-inner`;
-  var states4 = [];
-  var options4 = {};
-  var defaultProps4 = {
+  var states5 = [];
+  var options5 = {};
+  var defaultProps5 = {
     type: "text",
     autocomplete: "off",
     value: "",
@@ -396,17 +511,17 @@
   };
   var InputInnerInput = (props) => {
     const _a = props, {
-      value = defaultProps4.value,
-      type = defaultProps4.type,
-      placeholder = defaultProps4.placeholder,
-      autocomplete = defaultProps4.autocomplete
+      value = defaultProps5.value,
+      type = defaultProps5.type,
+      placeholder = defaultProps5.placeholder,
+      autocomplete = defaultProps5.autocomplete
     } = _a, other = __objRest(_a, [
       "value",
       "type",
       "placeholder",
       "autocomplete"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       __spreadProps(__spreadValues({}, other), {
         type,
@@ -417,15 +532,15 @@
       })
     );
   };
-  InputInnerInput.states = states4;
-  InputInnerInput.options = options4;
+  InputInnerInput.states = states5;
+  InputInnerInput.options = options5;
   InputInnerInput.className = className2;
 
   // src/input/input-inner-span.tsx
-  var import_jsx_runtime6 = __require("react/jsx-runtime");
+  var import_jsx_runtime7 = __require("react/jsx-runtime");
   var className3 = `k-input-inner`;
-  var states5 = [];
-  var options5 = {};
+  var states6 = [];
+  var options6 = {};
   var InputInnerSpan = (props) => {
     const _a = props, {
       value,
@@ -440,43 +555,43 @@
       "valueIcon",
       "valueIconName"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "span",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className3, optionClassNames(className3, props)),
         children: [
           valueIcon,
-          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
+          !valueIcon && valueIconName && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "k-input-value-icon", name: valueIconName }),
           showValue && !value && placeholder,
-          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-input-value-text", children: value })
+          showValue && value && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "k-input-value-text", children: value })
         ]
       })
     );
   };
-  InputInnerSpan.states = states5;
-  InputInnerSpan.options = options5;
+  InputInnerSpan.states = states6;
+  InputInnerSpan.options = options6;
   InputInnerSpan.className = className3;
 
   // src/input/input-inner-textarea.tsx
-  var import_jsx_runtime7 = __require("react/jsx-runtime");
-  var defaultProps5 = {
+  var import_jsx_runtime8 = __require("react/jsx-runtime");
+  var defaultProps6 = {
     value: "",
     placeholder: ""
   };
   var className4 = `k-input-inner`;
-  var states6 = [];
-  var options6 = {};
+  var states7 = [];
+  var options7 = {};
   var InputInnerTextarea = (props) => {
     const _a = props, {
-      value = defaultProps5.value,
-      placeholder = defaultProps5.placeholder,
+      value = defaultProps6.value,
+      placeholder = defaultProps6.placeholder,
       rows
     } = _a, other = __objRest(_a, [
       "value",
       "placeholder",
       "rows"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "textarea",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(props.className, className4, optionClassNames(className4, props)),
@@ -486,14 +601,14 @@
       })
     );
   };
-  InputInnerTextarea.states = states6;
-  InputInnerTextarea.options = options6;
+  InputInnerTextarea.states = states7;
+  InputInnerTextarea.options = options7;
   InputInnerTextarea.className = className4;
 
   // src/input/input-loading-icon.tsx
-  var import_jsx_runtime8 = __require("react/jsx-runtime");
+  var import_jsx_runtime9 = __require("react/jsx-runtime");
   var className5 = `k-input-loading-icon`;
-  var states7 = [
+  var states8 = [
     States.disabled,
     States.loading
   ];
@@ -503,21 +618,21 @@
       loading
     } = props;
     if (disabled || !loading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: classNames(props.className, className5), name: "loading" });
   };
 
   // src/input/input-validation-icon.tsx
-  var import_jsx_runtime9 = __require("react/jsx-runtime");
+  var import_jsx_runtime10 = __require("react/jsx-runtime");
   var className6 = `k-input-validation-icon`;
-  var states8 = [
+  var states9 = [
     States.valid,
     States.invalid,
     States.disabled,
     States.loading
   ];
-  var options7 = {};
+  var options8 = {};
   var InputValidationIcon = (props) => {
     const {
       valid,
@@ -528,38 +643,38 @@
     const iconName = invalid ? "warning" : "check";
     const renderValidationIcon = Boolean(valid || invalid);
     if (disabled || loading || !renderValidationIcon) {
-      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { className: classNames(className6), name: iconName });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { className: classNames(className6), name: iconName });
   };
-  InputValidationIcon.states = states8;
-  InputValidationIcon.options = options7;
+  InputValidationIcon.states = states9;
+  InputValidationIcon.options = options8;
   InputValidationIcon.className = className6;
 
   // src/input/input-prefix.tsx
-  var import_jsx_runtime10 = __require("react/jsx-runtime");
+  var import_jsx_runtime11 = __require("react/jsx-runtime");
   var className7 = `k-input-prefix`;
   var InputPrefix = (props) => {
     if (!props.children) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: classNames(className7, props.className), children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: classNames(className7, props.className), children: props.children });
   };
 
   // src/input/input-suffix.tsx
-  var import_jsx_runtime11 = __require("react/jsx-runtime");
+  var import_jsx_runtime12 = __require("react/jsx-runtime");
   var className8 = `k-input-suffix`;
   var InputSuffix = (props) => {
     if (!props.children) {
-      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)("span", { className: classNames(className8, props.className), children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: classNames(className8, props.className), children: props.children });
   };
 
   // src/textbox/textbox.spec.tsx
-  var import_jsx_runtime12 = __require("react/jsx-runtime");
+  var import_jsx_runtime13 = __require("react/jsx-runtime");
   var TEXTBOX_CLASSNAME = `k-textbox`;
-  var states9 = [
+  var states10 = [
     States.hover,
     States.focus,
     States.valid,
@@ -569,12 +684,12 @@
     States.loading,
     States.readonly
   ];
-  var options8 = {
+  var options9 = {
     size: [Size.small, Size.medium, Size.large],
     rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
     fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
   };
-  var defaultProps6 = {
+  var defaultProps7 = {
     showClearButton: true,
     size: Input.defaultProps.size,
     rounded: Input.defaultProps.rounded,
@@ -597,7 +712,7 @@
       loading,
       disabled,
       readonly,
-      showClearButton = defaultProps6.showClearButton
+      showClearButton = defaultProps7.showClearButton
     } = _a, other = __objRest(_a, [
       "prefix",
       "suffix",
@@ -616,7 +731,7 @@
       "readonly",
       "showClearButton"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       Input,
       __spreadProps(__spreadValues({}, other), {
         size,
@@ -632,9 +747,9 @@
         readonly,
         className: classNames(props.className, TEXTBOX_CLASSNAME),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InputPrefix, { children: prefix }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InputInnerInput, { placeholder, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InputPrefix, { children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InputInnerInput, { placeholder, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             InputValidationIcon,
             {
               valid,
@@ -643,14 +758,14 @@
               disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             InputLoadingIcon,
             {
               loading,
               disabled
             }
           ),
-          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          showClearButton && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             InputClearValue,
             {
               loading,
@@ -659,34 +774,34 @@
               value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(InputSuffix, { children: suffix })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(InputSuffix, { children: suffix })
         ]
       })
     );
   };
-  Textbox.states = states9;
-  Textbox.options = options8;
+  Textbox.states = states10;
+  Textbox.options = options9;
   Textbox.className = TEXTBOX_CLASSNAME;
-  Textbox.defaultProps = defaultProps6;
+  Textbox.defaultProps = defaultProps7;
 
   // src/action-buttons/action-buttons.spec.tsx
-  var import_jsx_runtime13 = __require("react/jsx-runtime");
+  var import_jsx_runtime14 = __require("react/jsx-runtime");
   var ACTIONBUTTONS_CLASSNAME = `k-actions`;
-  var states10 = [];
-  var options9 = {};
-  var defaultProps7 = {
+  var states11 = [];
+  var options10 = {};
+  var defaultProps8 = {
     alignment: "start",
     orientation: "horizontal"
   };
   var ActionButtons = (props) => {
     const _a = props, {
-      alignment = defaultProps7.alignment,
-      orientation = defaultProps7.orientation
+      alignment = defaultProps8.alignment,
+      orientation = defaultProps8.orientation
     } = _a, other = __objRest(_a, [
       "alignment",
       "orientation"
     ]);
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "div",
       __spreadProps(__spreadValues({}, other), {
         className: classNames(
@@ -701,125 +816,10 @@
       })
     );
   };
-  ActionButtons.states = states10;
-  ActionButtons.options = options9;
+  ActionButtons.states = states11;
+  ActionButtons.options = options10;
   ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
-  ActionButtons.defaultProps = defaultProps7;
-
-  // src/button/button.spec.tsx
-  var import_jsx_runtime14 = __require("react/jsx-runtime");
-  var BUTTON_CLASSNAME = `k-button`;
-  var states11 = [
-    States.hover,
-    States.focus,
-    States.active,
-    States.selected,
-    States.disabled
-  ];
-  var options10 = {
-    size: [Size.small, Size.medium, Size.large],
-    rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
-    fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
-    themeColor: [
-      ThemeColor.base,
-      ThemeColor.primary,
-      ThemeColor.secondary,
-      ThemeColor.tertiary,
-      ThemeColor.success,
-      ThemeColor.warning,
-      ThemeColor.error,
-      ThemeColor.info,
-      ThemeColor.light,
-      ThemeColor.dark,
-      ThemeColor.inverse
-    ]
-  };
-  var defaultProps8 = {
-    size: Size.medium,
-    rounded: Roundness.medium,
-    fillMode: FillMode.solid,
-    themeColor: ThemeColor.base,
-    showArrow: false,
-    arrowIconName: "arrow-s"
-  };
-  var Button = (props) => {
-    const _a = props, {
-      size = defaultProps8.size,
-      rounded = defaultProps8.rounded,
-      fillMode = defaultProps8.fillMode,
-      themeColor = defaultProps8.themeColor,
-      hover,
-      focus,
-      active,
-      selected,
-      disabled,
-      icon,
-      text,
-      iconClassName,
-      showArrow = defaultProps8.showArrow,
-      arrowIconName = defaultProps8.arrowIconName
-    } = _a, other = __objRest(_a, [
-      "size",
-      "rounded",
-      "fillMode",
-      "themeColor",
-      "hover",
-      "focus",
-      "active",
-      "selected",
-      "disabled",
-      "icon",
-      "text",
-      "iconClassName",
-      "showArrow",
-      "arrowIconName"
-    ]);
-    const hasIcon = icon !== void 0;
-    const hasChildren = props.children !== void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      "button",
-      __spreadProps(__spreadValues({}, other), {
-        className: classNames(
-          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: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            Icon,
-            {
-              className: classNames(iconClassName, "k-button-icon"),
-              name: icon
-            }
-          ),
-          text ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-            text && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-button-text", children: text }),
-            props.children
-          ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-button-text", children: props.children }),
-          showArrow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: arrowIconName }) })
-        ]
-      })
-    );
-  };
-  Button.states = states11;
-  Button.options = options10;
-  Button.className = BUTTON_CLASSNAME;
-  Button.defaultProps = defaultProps8;
+  ActionButtons.defaultProps = defaultProps8;
 
   // src/window/window.spec.tsx
   var import_jsx_runtime15 = __require("react/jsx-runtime");
@@ -873,10 +873,7 @@
               "k-hidden": minimized
             }
           ), children: props.children }),
-          actionButtons && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { themeColor: "primary", children: "Update" })
-          ] })
+          actionButtons && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActionButtons, { alignment: actionButtonsAlign, className: "k-window-actions", children: actionButtons })
         ]
       })
     );
@@ -1026,7 +1023,10 @@
       /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Find Window" }),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Window, { title: "Insert Image", actions: ["close"], actionButtons: true, actionButtonsAlign: "end", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Form, { tag: "div", orientation: "horizontal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Window, { title: "Insert Image", actions: ["close"], actionButtonsAlign: "start", actionButtons: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { themeColor: "primary", children: "Insert" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { children: "Cancel" })
+        ] }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Form, { tag: "div", orientation: "vertical", children: [
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormField, { label: "Web address:", editor: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Textbox, { showClearButton: false }) }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormField, { label: "Alternate text:", editor: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Textbox, { showClearButton: false }) }),
           /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FormField, { label: "Width:", editor: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Textbox, { showClearButton: false }) }),