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

package/dist/cjs/fab/tests/fab-items.js

@@ -4483,129 +4483,67 @@ var FloatingActionButtonItem = (props) => {
     }
   );
 };
+FloatingActionButtonItem.states = states5;
 
-// src/fab/tests/fab-items.tsx
+// src/fab/templates/text-fab.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/fab/templates/icon-fab.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IconFloatingActionButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-text-fab.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/fab/tests/fab-items.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         grid-template-columns: 150px repeat(3, 1fr);
-        grid-template-rows: 30px repeat(5, 320px)
+        grid-template-rows: 30px repeat(3, 320px)
     }
     .relative-container {
         position: relative;
         border: 1px solid #ccc;
     }
 `;
-var fab_items_default = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Downward - Left Labels" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "small", position: "top-end", style: { top: "16px", right: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Normal", icon: "pencil", align: "right" }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Disabled", icon: "cancel", align: "right", disabled: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "medium", position: "top-end", style: { top: "16px", right: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Disabled & Focus", icon: "cancel", align: "right", disabled: true, focus: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "large", position: "top-end", style: { top: "16px", right: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Disabled", icon: "cancel", align: "right", disabled: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Downward - Right Labels" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "small", position: "top-start", style: { top: "16px", left: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "medium", position: "top-start", style: { top: "16px", left: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "large", position: "top-start", style: { top: "16px", left: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "bottom", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Upward - Left Labels" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 36px)", right: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 52px)", right: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 68px)", right: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Upward - Right Labels" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 36px)", left: "calc(16px + calc(36px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 52px)", left: "calc(16px + calc(52px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative-container", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "calc(16px + 68px)", left: "calc(16px + calc(68px / 2) - calc(36px /2))" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(FloatingActionButtonItems, { position: "top", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })
-      ] }) })
-    ] })
+var indexMap = {
+  0: 36,
+  1: 52,
+  2: 68
+};
+var fab_items_default = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Medium" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Large" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Downward - Left Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { size, position: "top-end", style: { top: "16px", right: "16px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: `calc(16px + ${indexMap[index]}px)`, right: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItems, { position: "bottom", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "right", ...{ [state]: true } })) }) })
+    ] })),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Downward - Right Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { size, position: "top-start", style: { top: "16px", left: "16px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", top: `calc(16px + ${indexMap[index]}px)`, left: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItems, { position: "bottom", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "left", ...{ [state]: true } })) }) })
+    ] })),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Upward - Left Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { size, position: "bottom-end", style: { bottom: "16px", right: "16px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: `calc(16px + ${indexMap[index]}px)`, right: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItems, { position: "top", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "right", ...{ [state]: true } })) }) })
+    ] })),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Upward - Right Labels" }),
+    FloatingActionButton.options.size.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { size, position: "bottom-start", style: { bottom: "16px", left: "16px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: `calc(16px + ${indexMap[index]}px)`, left: `calc(16px + calc(${indexMap[index]}px / 2) - calc(36px /2))` }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItems, { position: "top", children: ["normal", ...FloatingActionButtonItem.states].map((state) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(FloatingActionButtonItem, { text: state, icon: state === "disabled" ? "cancel" : "pencil", align: "left", ...{ [state]: true } })) }) })
+    ] }))
   ] })
 ] });

package/dist/cjs/fab/tests/fab-position.js

@@ -4420,15 +4420,68 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 
 // src/fab/fab-item.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var className = `k-fab-item`;
 var states5 = [
   States.hover,
   States.focus,
   States.active,
   States.disabled
 ];
+var FloatingActionButtonItem = (props) => {
+  const {
+    text,
+    icon,
+    align,
+    hover,
+    focus,
+    active,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        className,
+        {
+          [`k-text-${align}`]: align
+        },
+        stateClassNames(className, {
+          hover,
+          focus,
+          active,
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-fab-item-text", children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "k-fab-item-icon", icon })
+      ]
+    }
+  );
+};
+FloatingActionButtonItem.states = states5;
 
-// src/fab/tests/fab-position.tsx
+// src/fab/templates/text-fab.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/fab/templates/icon-fab.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IconFloatingActionButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-text-fab.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+
+// src/fab/tests/fab-position.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         grid-template-columns: 150px repeat(3, 1fr);
@@ -4439,24 +4492,24 @@ var styles = `
         border: 1px solid #ccc;
     }
 `;
-var fab_position_default = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Start" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Center" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "End" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Top" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "top-start", style: { top: "16px", left: "16px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "top-center", style: { top: "16px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "top-end", style: { top: "16px", right: "16px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Middle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "middle-start", style: { left: "16px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: "NO CENTER POSITION" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "middle-end", style: { right: "16px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Bottom" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "bottom-start", style: { bottom: "16px", left: "16px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "bottom-center", style: { bottom: "16px" } }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", position: "bottom-end", style: { bottom: "16px", right: "16px" } }) })
+var fab_position_default = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Start" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Center" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "End" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Top" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "top-start", style: { top: "16px", left: "16px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "top-center", style: { top: "16px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "top-end", style: { top: "16px", right: "16px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Middle" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "middle-start", style: { left: "16px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: "NO CENTER POSITION" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "middle-end", style: { right: "16px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "Bottom" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "bottom-start", style: { bottom: "16px", left: "16px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "bottom-center", style: { bottom: "16px" } }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "relative-container", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { position: "bottom-end", style: { bottom: "16px", right: "16px" } }) })
   ] })
 ] });

package/dist/cjs/fab/tests/{fab-size.js → fab-size-rounded.js}

@@ -16,12 +16,12 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/fab/tests/fab-size.tsx
-var fab_size_exports = {};
-__export(fab_size_exports, {
-  default: () => fab_size_default
+// src/fab/tests/fab-size-rounded.tsx
+var fab_size_rounded_exports = {};
+__export(fab_size_rounded_exports, {
+  default: () => fab_size_rounded_default
 });
-module.exports = __toCommonJS(fab_size_exports);
+module.exports = __toCommonJS(fab_size_rounded_exports);
 
 // src/misc/class-names.ts
 var classNames = (...args) => {
@@ -4420,15 +4420,83 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 
 // src/fab/fab-item.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var className = `k-fab-item`;
 var states5 = [
   States.hover,
   States.focus,
   States.active,
   States.disabled
 ];
+var FloatingActionButtonItem = (props) => {
+  const {
+    text,
+    icon,
+    align,
+    hover,
+    focus,
+    active,
+    disabled,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "li",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        className,
+        {
+          [`k-text-${align}`]: align
+        },
+        stateClassNames(className, {
+          hover,
+          focus,
+          active,
+          disabled
+        })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "k-fab-item-text", children: text }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "k-fab-item-icon", icon })
+      ]
+    }
+  );
+};
+FloatingActionButtonItem.states = states5;
 
-// src/fab/tests/fab-size.tsx
+// src/fab/templates/text-fab.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var TextFloatingActionButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  FloatingActionButton,
+  {
+    text: "Create",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-fab.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var IconFloatingActionButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    ...props
+  }
+);
+
+// src/fab/templates/icon-text-fab.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var IconTextFloatingActionButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  FloatingActionButton,
+  {
+    icon: "plus",
+    text: "Create",
+    ...props
+  }
+);
+
+// src/fab/tests/fab-size-rounded.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         max-width: 1200px;
@@ -4436,92 +4504,20 @@ var styles = `
         align-items: center;
     }
 `;
-var fab_size_default = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("small", { children: "rounded / size" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "null" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: null, size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: null, size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: null, size: "small" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: null, size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: null, size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: null, size: "medium" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: null, size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: null, size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: null, size: "large" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "small", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "small", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "small", size: "small" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "small", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "small", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "small", size: "medium" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "small", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "small", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "small", size: "large" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "medium" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "medium", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "medium", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "medium", size: "small" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "medium", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "medium", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "medium", size: "medium" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "medium", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "medium", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "medium", size: "large" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "large" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "large", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "large", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "large", size: "small" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "large", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "large", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "large", size: "medium" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "large", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "large", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "large", size: "large" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "full" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "full", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "full", size: "small", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "full", size: "small" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "full", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "full", size: "medium", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "full", size: "medium" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { rounded: "full", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "full", size: "large", text: "Create" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FloatingActionButton, { icon: "plus", rounded: "full", size: "large" })
-    ] })
+var fab_size_rounded_default = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("small", { children: "rounded / size" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "medium" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "large" }),
+    [null, ...FloatingActionButton.options.rounded].map((rounded) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: String(rounded) }),
+      FloatingActionButton.options.size.map((size) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "k-d-flex k-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextFloatingActionButton, { rounded, size }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconTextFloatingActionButton, { rounded, size }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconFloatingActionButton, { rounded, size })
+      ] }))
+    ] }))
   ] })
 ] });