@progress/kendo-themes-html 7.0.1-dev.1 → 7.0.2-dev.0

package/dist/cjs/tilelayout/tests/tilelayout-resizing.js

@@ -4766,11 +4766,41 @@ TileLayoutItem.options = options7;
 TileLayoutItem.className = TILELAYOUTITEM_CLASSNAME;
 TileLayoutItem.defaultProps = defaultProps7;
 
-// src/tilelayout/tests/tilelayout-resizing.tsx
+// src/tilelayout/tilelayout-item-hint.spec.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var tilelayout_resizing_default = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TileLayout, { columns: 4, gap: "16px", columnWidth: "1fr", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TileLayoutItem, { resize: "horizontal", header: "Card Title", body: "Horizontally resizable card" }),
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TileLayoutItem, { resize: "vertical", header: "Card Title", body: "Vertically resizable card" }),
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TileLayoutItem, { resize: true, header: "Card Title", body: "Horizontally and Vertically resizable card" }),
-  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TileLayoutItem, { header: "Card Title", body: "Non-resizable card" })
+var TILELAYOUTITEMHINT_CLASSNAME = `k-layout-item-hint`;
+var states9 = [];
+var options8 = {};
+var defaultProps8 = {};
+var TileLayoutItemHint = (props) => {
+  const { style } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: TILELAYOUTITEMHINT_CLASSNAME, style });
+};
+TileLayoutItemHint.states = states9;
+TileLayoutItemHint.options = options8;
+TileLayoutItemHint.className = TILELAYOUTITEMHINT_CLASSNAME;
+TileLayoutItemHint.defaultProps = defaultProps8;
+
+// src/tilelayout/templates/tilelayout-normal.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var TileLayoutNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  TileLayout,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" })
+    ],
+    ...props
+  }
+);
+
+// src/tilelayout/tests/tilelayout-resizing.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var tilelayout_resizing_default = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(TileLayoutNormal, { columns: 4, gap: "16px", columnWidth: "1fr", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { resize: "horizontal", header: "Card Title", body: "Horizontally resizable card" }),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { resize: "vertical", header: "Card Title", body: "Vertically resizable card" }),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { resize: true, header: "Card Title", body: "Horizontally and Vertically resizable card" }),
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Card Title", body: "Non-resizable card" })
 ] }) }) });

package/dist/cjs/tilelayout/tests/tilelayout.js

@@ -4782,10 +4782,25 @@ TileLayoutItemHint.className = TILELAYOUTITEMHINT_CLASSNAME;
 TileLayoutItemHint.defaultProps = defaultProps8;
 var tilelayout_item_hint_spec_default = TileLayoutItemHint;
 
-// src/tilelayout/tests/tilelayout.tsx
+// src/tilelayout/templates/tilelayout-normal.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var tilelayout_default = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+var TileLayoutNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
   TileLayout,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here" })
+    ],
+    ...props
+  }
+);
+
+// src/tilelayout/tests/tilelayout.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var tilelayout_default = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_jsx_runtime21.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id: "test-area", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  TileLayoutNormal,
   {
     columns: 5,
     columnWidth: "1fr",
@@ -4793,20 +4808,20 @@ var tilelayout_default = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(imp
     gap: "16px",
     style: { width: "1000px" },
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "0", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, focus: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "1", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "2", gridColumnEnd: "span 1", gridRowEnd: "span 2", width: "250px", position: "absolute", height: "198px", left: "410px", top: "16px", zIndex: 1 } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(tilelayout_item_hint_spec_default, { style: { order: "2", gridColumnEnd: "span 2", gridRowEnd: "span 2" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "3", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "4", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "5", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "6", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "7", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "8", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "0", gridColumnEnd: "span 1", gridRowEnd: "span 1" }, focus: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "1", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "2", gridColumnEnd: "span 1", gridRowEnd: "span 2", width: "250px", position: "absolute", height: "198px", left: "410px", top: "16px", zIndex: 1 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(tilelayout_item_hint_spec_default, { style: { order: "2", gridColumnEnd: "span 2", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "3", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "4", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "5", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "6", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "7", gridColumnEnd: "span 1", gridRowEnd: "span 2" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TileLayoutItem, { header: "Title goes here", body: "Content goes here", style: { order: "8", gridColumnEnd: "span 1", gridRowEnd: "span 1" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         TileLayoutItem,
         {
-          header: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h5", { className: "k-card-title", children: "Header element" }),
+          header: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h5", { className: "k-card-title", children: "Header element" }),
           body: "Content goes here",
           style: { order: "9", gridColumnEnd: "span 1", gridRowEnd: "span 2" }
         }

package/dist/cjs/toolbar/templates/toolbar-normal.js

@@ -7417,6 +7417,35 @@ Toolbar.className = TOOLBAR_CLASSNAME;
 Toolbar.defaultProps = defaultProps40;
 var toolbar_spec_default = Toolbar;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 var import_jsx_runtime106 = require("react/jsx-runtime");
-var ToolbarNormal = ({ children, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(toolbar_spec_default, { ...other, children });
+
+// src/split-button/templates/icon-text-split-button.tsx
+var import_jsx_runtime107 = require("react/jsx-runtime");
+
+// src/split-button/templates/text-split-button.tsx
+var import_jsx_runtime108 = require("react/jsx-runtime");
+
+// src/split-button/templates/split-button-popup.tsx
+var import_jsx_runtime109 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-normal.tsx
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var ToolbarNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  toolbar_spec_default,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Button, { children: "Button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(MenuButton, { text: "Menu button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(SplitButton, { children: "Split button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(ButtonGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Button, { icon: "align-left", children: "Left" }),
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Button, { icon: "align-center", children: "Center" }),
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Button, { icon: "align-right", children: "Right" })
+        ] })
+      ] })
+    ],
+    ...props
+  }
+);

package/dist/cjs/toolbar/tests/toolbar-adaptive.js

@@ -7653,21 +7653,33 @@ ToolbarPopup.options = options46;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 var import_jsx_runtime110 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 var import_jsx_runtime111 = require("react/jsx-runtime");
-var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(toolbar_spec_default, { ...other, resizable: true, children });
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 var import_jsx_runtime112 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-resizable.tsx
+// src/split-button/templates/split-button-popup.tsx
 var import_jsx_runtime113 = require("react/jsx-runtime");
 
-// src/toolbar/tests/toolbar-adaptive.tsx
+// src/toolbar/templates/toolbar-normal.tsx
 var import_jsx_runtime114 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-resizable.tsx
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(toolbar_spec_default, { ...other, resizable: true, children });
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-resizable.tsx
+var import_jsx_runtime117 = require("react/jsx-runtime");
+
+// src/toolbar/tests/toolbar-adaptive.tsx
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         --kendo-actionsheet-height: 300px;
@@ -7681,32 +7693,32 @@ var styles = `
         transform: translateZ(0);
     }
 `;
-var toolbar_adaptive_default = () => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Screen width <= 500px" }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("section", { className: "k-colspan-all k-col-span-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ToolbarResizable, { size: "large", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ButtonGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { size: "large", icon: "align-left", children: "Left" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { size: "large", icon: "align-center", children: "Center" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { size: "large", icon: "align-right", children: "Right" })
+var toolbar_adaptive_default = () => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "Screen width <= 500px" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("section", { className: "k-colspan-all k-col-span-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(ToolbarResizable, { size: "large", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(ButtonGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Button, { size: "large", icon: "align-left", children: "Left" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Button, { size: "large", icon: "align-center", children: "Center" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Button, { size: "large", icon: "align-right", children: "Right" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { size: "large", icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Button, { size: "large", icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ActionSheet, { adaptive: true, overlay: false, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ActionSheetHeader, { title: "Toolbar title", className: "k-text-center" }),
-        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { size: "large", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Left", icon: "align-left" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Center", icon: "align-center" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Right", icon: "align-right" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Justify", icon: "align-justify" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Font color" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuSeparator, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Cut", icon: "cut" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Copy", icon: "copy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Paste", icon: "paste" })
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(ActionSheet, { adaptive: true, overlay: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ActionSheetHeader, { title: "Toolbar title", className: "k-text-center" }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Left", icon: "align-left" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Center", icon: "align-center" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Right", icon: "align-right" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Justify", icon: "align-justify" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Font color" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Cut", icon: "cut" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Copy", icon: "copy" }),
+          /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Paste", icon: "paste" })
         ] })
       ] })
     ] })

package/dist/cjs/toolbar/tests/toolbar-components.js

@@ -7667,7 +7667,24 @@ ToolbarPopup.defaultProps = defaultProps43;
 
 // src/toolbar/templates/toolbar-normal.tsx
 var import_jsx_runtime114 = require("react/jsx-runtime");
-var ToolbarNormal = ({ children, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(toolbar_spec_default, { ...other, children });
+var ToolbarNormal = (props) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  toolbar_spec_default,
+  {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { children: "Button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuButton, { text: "Menu button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(SplitButton, { children: "Split button" }),
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(ButtonGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { icon: "align-left", children: "Left" }),
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { icon: "align-center", children: "Center" }),
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Button, { icon: "align-right", children: "Right" })
+        ] })
+      ] })
+    ],
+    ...props
+  }
+);
 
 // src/toolbar/templates/toolbar-resizable.tsx
 var import_jsx_runtime115 = require("react/jsx-runtime");

package/dist/cjs/toolbar/tests/toolbar-popup-size.js

@@ -7652,20 +7652,32 @@ ToolbarPopup.options = options46;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 var import_jsx_runtime110 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 var import_jsx_runtime111 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 var import_jsx_runtime112 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-resizable.tsx
+// src/split-button/templates/split-button-popup.tsx
 var import_jsx_runtime113 = require("react/jsx-runtime");
 
-// src/toolbar/tests/toolbar-popup-size.tsx
+// src/toolbar/templates/toolbar-normal.tsx
 var import_jsx_runtime114 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-resizable.tsx
+var import_jsx_runtime115 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-resizable.tsx
+var import_jsx_runtime117 = require("react/jsx-runtime");
+
+// src/toolbar/tests/toolbar-popup-size.tsx
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var style = `
     .k-animation-container {
         width: min-content;
@@ -7673,18 +7685,18 @@ var style = `
         overflow: visible;
     }
 `;
-var toolbar_popup_size_default = () => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("style", { children: style }),
-  /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { children: "Small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { children: "Medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { children: "Large" }),
-    MenuList.options.size.map((size) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { size, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item after separator", icon: "plus" })
+var toolbar_popup_size_default = () => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("style", { children: style }),
+  /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { children: "Small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { children: "Medium" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { children: "Large" }),
+    MenuList.options.size.map((size) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { size, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item after separator", icon: "plus" })
     ] }) }) }))
   ] })
 ] });

package/dist/cjs/toolbar/tests/toolbar-popup.js

@@ -7652,20 +7652,32 @@ ToolbarPopup.options = options46;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps43;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 var import_jsx_runtime110 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 var import_jsx_runtime111 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 var import_jsx_runtime112 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-resizable.tsx
+// src/split-button/templates/split-button-popup.tsx
 var import_jsx_runtime113 = require("react/jsx-runtime");
 
-// src/toolbar/tests/toolbar-popup.tsx
+// src/toolbar/templates/toolbar-normal.tsx
 var import_jsx_runtime114 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-resizable.tsx
+var import_jsx_runtime115 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+var import_jsx_runtime116 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-resizable.tsx
+var import_jsx_runtime117 = require("react/jsx-runtime");
+
+// src/toolbar/tests/toolbar-popup.tsx
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var style = `
     .k-animation-container {
         width: min-content;
@@ -7673,46 +7685,46 @@ var style = `
         overflow: visible;
     }
 `;
-var toolbar_popup_default = () => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("style", { children: style }),
-  /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { children: "Normal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { children: "With Icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { children: "With Separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 3" })
+var toolbar_popup_default = () => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("style", { children: style }),
+  /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { id: "test-area", className: "k-d-grid k-grid-cols-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { children: "Normal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { children: "With Icon" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { children: "With Separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 3" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 1", icon: "plus" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 2", icon: "plus" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 3", icon: "plus" })
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 1", icon: "plus" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 2", icon: "plus" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 3", icon: "plus" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item after separator", icon: "plus" })
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("section", { children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item after separator", icon: "plus" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "rtl" }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 3" })
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("span", { className: "k-colspan-all k-col-span-full", children: "rtl" }),
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 3" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 1", icon: "plus" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 2", icon: "plus" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 3", icon: "plus" })
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 1", icon: "plus" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 2", icon: "plus" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 3", icon: "plus" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(MenuList, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item 3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(MenuItem, { text: "Item after separator", icon: "plus" })
+    /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("section", { className: "k-rtl", dir: "rtl", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(ToolbarPopup, { className: "k-menu-popup", children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(MenuList, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item 3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(MenuItem, { text: "Item after separator", icon: "plus" })
     ] }) }) })
   ] })
 ] });

package/dist/cjs/toolbar/tests/toolbar-sizes.js

@@ -7749,41 +7749,53 @@ ToolbarPopup.options = options47;
 ToolbarPopup.className = TOOLBARPOPUP_CLASSNAME;
 ToolbarPopup.defaultProps = defaultProps44;
 
-// src/toolbar/templates/toolbar-normal.tsx
+// src/split-button/templates/icon-split-button.tsx
 var import_jsx_runtime113 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-resizable.tsx
+// src/split-button/templates/icon-text-split-button.tsx
 var import_jsx_runtime114 = require("react/jsx-runtime");
-var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(toolbar_spec_default, { ...other, resizable: true, children });
 
-// src/toolbar/templates/toolbar-angular-normal.tsx
+// src/split-button/templates/text-split-button.tsx
 var import_jsx_runtime115 = require("react/jsx-runtime");
 
-// src/toolbar/templates/toolbar-angular-resizable.tsx
+// src/split-button/templates/split-button-popup.tsx
 var import_jsx_runtime116 = require("react/jsx-runtime");
 
-// src/toolbar/tests/toolbar-sizes.tsx
+// src/toolbar/templates/toolbar-normal.tsx
 var import_jsx_runtime117 = require("react/jsx-runtime");
-var toolbar_sizes_default = () => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_jsx_runtime117.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { id: "test-area", className: "k-d-grid", children: Toolbar.options.size.map((size) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_jsx_runtime117.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("span", { className: "k-colspan-all k-col-span-full", children: size }),
-  /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(ToolbarResizable, { size, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, icon: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, children: "Button" }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, className: "k-toggle-button", children: "Toggle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(ButtonGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, icon: "align-left", children: "Left" }),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, icon: "align-center", children: "Center" }),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, icon: "align-right", children: "Right" })
+
+// src/toolbar/templates/toolbar-resizable.tsx
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var ToolbarResizable = ({ children, ...other }) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(toolbar_spec_default, { ...other, resizable: true, children });
+
+// src/toolbar/templates/toolbar-angular-normal.tsx
+var import_jsx_runtime119 = require("react/jsx-runtime");
+
+// src/toolbar/templates/toolbar-angular-resizable.tsx
+var import_jsx_runtime120 = require("react/jsx-runtime");
+
+// src/toolbar/tests/toolbar-sizes.tsx
+var import_jsx_runtime121 = require("react/jsx-runtime");
+var toolbar_sizes_default = () => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_jsx_runtime121.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { id: "test-area", className: "k-d-grid", children: Toolbar.options.size.map((size) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "k-colspan-all k-col-span-full", children: size }),
+  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("section", { className: "k-colspan-all k-col-span-full", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ToolbarResizable, { size, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, icon: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, children: "Button" }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, className: "k-toggle-button", children: "Toggle" }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ButtonGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, icon: "align-left", children: "Left" }),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, icon: "align-center", children: "Center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, icon: "align-right", children: "Right" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, themeColor: "primary", children: "Primary" }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(ToolbarItem, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("label", { children: "Label:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(ColorPicker, { size })
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, themeColor: "primary", children: "Primary" }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(ToolbarItem, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("label", { children: "Label:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ColorPicker, { size })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Switch, { size, checked: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Button, { size, icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Switch, { size, checked: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Button, { size, icon: "more-vertical", className: "k-toolbar-overflow-button", fillMode: "flat", rounded: null })
   ] }) })
 ] })) }) });