@progress/kendo-themes-html 6.2.1-dev.1 → 6.2.1-dev.44

package/dist/fab/fab-item.js

@@ -0,0 +1,104 @@
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw new Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // src/fab/fab-item.tsx
+  var React2 = __toESM(__require("react"));
+
+  // src/utils/classNames.ts
+  var classNames = (...args) => {
+    const result = {};
+    const addLeafKeys = (arg) => {
+      typeof arg === "object" ? Object.keys(arg).forEach((key) => {
+        result[key] = arg[key];
+      }) : result[arg] = true;
+    };
+    const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map(
+      (arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg)
+    );
+    addKeys(args);
+    return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
+  };
+
+  // src/icon/icon.tsx
+  var React = __toESM(__require("react"));
+  var Icon = class extends React.Component {
+    render() {
+      const {
+        className,
+        style,
+        name,
+        size,
+        rotate,
+        flip
+      } = this.props;
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, name && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: classNames(
+            className,
+            "k-icon",
+            {
+              [`k-i-${name}`]: name,
+              [`k-icon-${size}`]: size,
+              [`k-rotate-${rotate}`]: rotate,
+              [`k-flip-${flip}`]: flip
+            }
+          ),
+          style
+        }
+      ));
+    }
+  };
+
+  // src/fab/fab-item.tsx
+  var FloatingActionButtonItem = class extends React2.Component {
+    render() {
+      const {
+        className,
+        align,
+        text,
+        icon,
+        hover,
+        focus,
+        active,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React2.createElement("li", { className: classNames(
+        className,
+        "k-fab-item",
+        {
+          [`k-text-${align}`]: align,
+          "k-hover": hover,
+          "k-focus": focus,
+          "k-active": active,
+          "k-disabled": disabled
+        }
+      ) }, /* @__PURE__ */ React2.createElement("span", { className: "k-fab-item-text" }, text), /* @__PURE__ */ React2.createElement(Icon, { className: "k-fab-item-icon", name: icon }));
+    }
+  };
+})();
+//# sourceMappingURL=fab-item.js.map

package/dist/fab/fab-item.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/fab/fab-item.tsx", "../../src/utils/classNames.ts", "../../src/icon/icon.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nimport { classNames } from '../utils';\nimport { Icon } from '../icon';\n\nexport interface FloatingActionButtonItemProps {\n    className?: string;\n    align?: 'left' | 'right';\n    text?: string;\n    icon?: string;\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    disabled?: boolean;\n}\n\nexport class FloatingActionButtonItem extends React.Component<FloatingActionButtonItemProps> {\n\n    render() {\n        const {\n            className,\n            align,\n            text,\n            icon,\n            hover,\n            focus,\n            active,\n            disabled\n        } = this.props;\n\n        return (\n            <li className={classNames(\n                className,\n                'k-fab-item',\n                {\n                    [`k-text-${align}`]: align,\n                    'k-hover': hover,\n                    'k-focus': focus,\n                    'k-active': active,\n                    'k-disabled': disabled\n                }\n            )}>\n                <span className=\"k-fab-item-text\">{text}</span>\n                <Icon className=\"k-fab-item-icon\" name={icon} />\n            </li>\n        );\n\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n    size?: null | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';\n    rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n    flip?: null | 'v' | 'h';\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name,\n            size,\n            rotate,\n            flip\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name,\n                                [`k-icon-${size}`]: size,\n                                [`k-rotate-${rotate}`]: rotate,\n                                [`k-flip-${flip}`]: flip\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAAA,SAAuB;;;ACChB,MAAM,aAAa,IAAI,SAAiB;AAC3C,UAAM,SAAS,CAAC;AAEhB,UAAM,cAAc,CAAC,QAAQ;AACzB,MAAC,OAAO,QAAQ,WACV,OAAO,KAAK,GAAG,EAAE,QAAQ,CAAC,QAAQ;AAChC,eAAO,OAAO,IAAI;AAAA,MACtB,CAAC,IACE,OAAO,OAAO;AAAA,IAEzB;AAEA,UAAM,UAAU,CAAC,SACb,KACK,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,GAAG,CAAC,EAC5C;AAAA,MAAI,CAAC,QACD,MAAM,QAAQ,GAAG,IAAI,QAAQ,GAAG,IAAI,YAAY,GAAG;AAAA,IACxD;AAER,YAAQ,IAAI;AAEZ,WAAO,OAAO,KAAK,MAAM,EACpB,IAAI,CAAC,QAAS,OAAO,QAAQ,OAAQ,IAAI,EACzC,OAAO,CAAC,OAAO,OAAO,IAAI,EAC1B,KAAK,GAAG;AAAA,EACjB;;;AC1BA,cAAuB;AAYhB,MAAM,OAAN,cAAyB,gBAAqB;AAAA,IAEjD,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,IAAI,KAAK;AAET,aACI,0DACM,QACE;AAAA,QAAC;AAAA;AAAA,UACG,WAAW;AAAA,YACP;AAAA,YACA;AAAA,YACA;AAAA,cACI,CAAC,OAAO,SAAS;AAAA,cACjB,CAAC,UAAU,SAAS;AAAA,cACpB,CAAC,YAAY,WAAW;AAAA,cACxB,CAAC,UAAU,SAAS;AAAA,YACxB;AAAA,UACJ;AAAA,UACA;AAAA;AAAA,MACJ,CAER;AAAA,IAER;AAAA,EACJ;;;AF7BO,MAAM,2BAAN,cAA6C,iBAAyC;AAAA,IAEzF,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ,IAAI,KAAK;AAET,aACI,qCAAC,QAAG,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,UACI,CAAC,UAAU,UAAU;AAAA,UACrB,WAAW;AAAA,UACX,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,cAAc;AAAA,QAClB;AAAA,MACJ,KACI,qCAAC,UAAK,WAAU,qBAAmB,IAAK,GACxC,qCAAC,QAAK,WAAU,mBAAkB,MAAM,MAAM,CAClD;AAAA,IAGR;AAAA,EACJ;",
+  "names": ["React"]
+}

package/dist/fab/fab-items.js

@@ -0,0 +1,64 @@
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw new Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // src/fab/fab-items.tsx
+  var React = __toESM(__require("react"));
+
+  // src/utils/classNames.ts
+  var classNames = (...args) => {
+    const result = {};
+    const addLeafKeys = (arg) => {
+      typeof arg === "object" ? Object.keys(arg).forEach((key) => {
+        result[key] = arg[key];
+      }) : result[arg] = true;
+    };
+    const addKeys = (list) => list.filter((arg) => arg !== true && Boolean(arg)).map(
+      (arg) => Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg)
+    );
+    addKeys(args);
+    return Object.keys(result).map((key) => result[key] && key || null).filter((el) => el !== null).join(" ");
+  };
+
+  // src/fab/fab-items.tsx
+  var FloatingActionButtonItems = class extends React.Component {
+    render() {
+      const {
+        className,
+        position,
+        children
+      } = this.props;
+      return /* @__PURE__ */ React.createElement("ul", { className: classNames(
+        className,
+        "k-fab-items",
+        {
+          [`k-fab-items-${position}`]: position
+        }
+      ) }, children);
+    }
+  };
+})();
+//# sourceMappingURL=fab-items.js.map

package/dist/fab/fab-items.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/fab/fab-items.tsx", "../../src/utils/classNames.ts"],
+  "sourcesContent": ["import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface FloatingActionButtonItemsProps {\n    className?: string;\n    position?: null | 'top' | 'bottom';\n    children?: React.ReactNode;\n}\n\nexport class FloatingActionButtonItems extends React.Component<FloatingActionButtonItemsProps> {\n\n    render() {\n        const {\n            className,\n            position,\n            children\n        } = this.props;\n\n        return (\n            <ul className={classNames(\n                className,\n                'k-fab-items',\n                {\n                    [`k-fab-items-${position}`]: position\n                }\n            )}>\n                {children}\n            </ul>\n        );\n\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,cAAuB;;;ACChB,MAAM,aAAa,IAAI,SAAiB;AAC3C,UAAM,SAAS,CAAC;AAEhB,UAAM,cAAc,CAAC,QAAQ;AACzB,MAAC,OAAO,QAAQ,WACV,OAAO,KAAK,GAAG,EAAE,QAAQ,CAAC,QAAQ;AAChC,eAAO,OAAO,IAAI;AAAA,MACtB,CAAC,IACE,OAAO,OAAO;AAAA,IAEzB;AAEA,UAAM,UAAU,CAAC,SACb,KACK,OAAO,CAAC,QAAQ,QAAQ,QAAQ,QAAQ,GAAG,CAAC,EAC5C;AAAA,MAAI,CAAC,QACD,MAAM,QAAQ,GAAG,IAAI,QAAQ,GAAG,IAAI,YAAY,GAAG;AAAA,IACxD;AAER,YAAQ,IAAI;AAEZ,WAAO,OAAO,KAAK,MAAM,EACpB,IAAI,CAAC,QAAS,OAAO,QAAQ,OAAQ,IAAI,EACzC,OAAO,CAAC,OAAO,OAAO,IAAI,EAC1B,KAAK,GAAG;AAAA,EACjB;;;ADjBO,MAAM,4BAAN,cAA8C,gBAA0C;AAAA,IAE3F,SAAS;AACL,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,MACJ,IAAI,KAAK;AAET,aACI,oCAAC,QAAG,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,UACI,CAAC,eAAe,aAAa;AAAA,QACjC;AAAA,MACJ,KACK,QACL;AAAA,IAGR;AAAA,EACJ;",
+  "names": []
+}

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

@@ -58,8 +58,8 @@
   var import_react = __toESM(__require("react"));
   var import_client = __toESM(__require("react-dom/client"));
 
-  // src/icon/icon.tsx
-  var React = __toESM(__require("react"));
+  // src/fab/fab.tsx
+  var React2 = __toESM(__require("react"));
 
   // src/utils/classNames.ts
   var classNames = (...args) => {
@@ -101,6 +101,7 @@
   };
 
   // src/icon/icon.tsx
+  var React = __toESM(__require("react"));
   var Icon = class extends React.Component {
     render() {
       const {
@@ -131,7 +132,6 @@
   };
 
   // src/fab/fab.tsx
-  var React2 = __toESM(__require("react"));
   var FloatingActionButton = class extends React2.Component {
     render() {
       const _a = this.props, {
@@ -202,6 +202,53 @@
     themeColor: "primary"
   };
 
+  // src/fab/fab-items.tsx
+  var React3 = __toESM(__require("react"));
+  var FloatingActionButtonItems = class extends React3.Component {
+    render() {
+      const {
+        className,
+        position,
+        children
+      } = this.props;
+      return /* @__PURE__ */ React3.createElement("ul", { className: classNames(
+        className,
+        "k-fab-items",
+        {
+          [`k-fab-items-${position}`]: position
+        }
+      ) }, children);
+    }
+  };
+
+  // src/fab/fab-item.tsx
+  var React4 = __toESM(__require("react"));
+  var FloatingActionButtonItem = class extends React4.Component {
+    render() {
+      const {
+        className,
+        align,
+        text,
+        icon,
+        hover,
+        focus,
+        active,
+        disabled
+      } = this.props;
+      return /* @__PURE__ */ React4.createElement("li", { className: classNames(
+        className,
+        "k-fab-item",
+        {
+          [`k-text-${align}`]: align,
+          "k-hover": hover,
+          "k-focus": focus,
+          "k-active": active,
+          "k-disabled": disabled
+        }
+      ) }, /* @__PURE__ */ React4.createElement("span", { className: "k-fab-item-text" }, text), /* @__PURE__ */ React4.createElement(Icon, { className: "k-fab-item-icon", name: icon }));
+    }
+  };
+
   // src/fab/tests/fab-items.tsx
   var root = import_client.default.createRoot(
     document.getElementById("app")
@@ -217,7 +264,7 @@
     }
 `;
   root.render(
-    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, styles), /* @__PURE__ */ import_react.default.createElement("div", { id: "test-area", className: "k-d-grid" }, /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("span", null, "Small"), /* @__PURE__ */ import_react.default.createElement("span", null, "Medium"), /* @__PURE__ */ import_react.default.createElement("span", null, "Large"), /* @__PURE__ */ import_react.default.createElement("span", null, "Downward - Left Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "top-end", style: { top: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-sm k-fab-items-bottom" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Normal"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-disabled" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Disabled"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "cancel" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "top-end", style: { top: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-md k-fab-items-bottom" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-disabled k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Disabled & Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "cancel" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "top-end", style: { top: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-lg k-fab-items-bottom" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-disabled" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Disabled"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "cancel" }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Downward - Right Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "top-start", style: { top: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-bottom" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "top-start", style: { top: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-bottom" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "top-start", style: { top: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-bottom" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Upward - Left Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-end", style: { bottom: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-end", style: { bottom: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-end", style: { bottom: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-right k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Upward - Right Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-start", style: { bottom: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-start", style: { bottom: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-start", style: { bottom: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))), /* @__PURE__ */ import_react.default.createElement("span", null, "Angular rendering"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-pos-absolute k-bottom-start", style: { bottom: "16px", left: "16px" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "36px", left: "calc(calc(36px/2) - calc(36px/2))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-pos-absolute k-bottom-start", style: { bottom: "16px", left: "16px" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "52px", left: "calc(calc(52px/2) - calc(36px/2))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })))))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-pos-absolute k-bottom-start", style: { bottom: "16px", left: "16px" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "k-fab-popup k-popup k-popup-transparent", style: { position: "absolute", bottom: "68px", left: "calc(calc(68px/2) - calc(36px/2))" } }, /* @__PURE__ */ import_react.default.createElement("ul", { className: "k-fab-items k-fab-items-top" }, /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-hover" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Hover long text"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-focus" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Focus"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" })), /* @__PURE__ */ import_react.default.createElement("li", { className: "k-fab-item k-text-left k-active" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "k-fab-item-text" }, "Active"), /* @__PURE__ */ import_react.default.createElement(Icon, { className: "k-fab-item-icon", name: "pencil" }))))))))
+    /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, styles), /* @__PURE__ */ import_react.default.createElement("div", { id: "test-area", className: "k-d-grid" }, /* @__PURE__ */ import_react.default.createElement("span", null), /* @__PURE__ */ import_react.default.createElement("span", null, "Small"), /* @__PURE__ */ import_react.default.createElement("span", null, "Medium"), /* @__PURE__ */ import_react.default.createElement("span", null, "Large"), /* @__PURE__ */ import_react.default.createElement("span", null, "Downward - Left Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "top-end", style: { top: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "bottom" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Normal", icon: "pencil", align: "right" }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Disabled", icon: "cancel", align: "right", disabled: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "top-end", style: { top: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "bottom" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Disabled & Focus", icon: "cancel", align: "right", disabled: true, focus: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "top-end", style: { top: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "bottom" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Disabled", icon: "cancel", align: "right", disabled: true })))), /* @__PURE__ */ import_react.default.createElement("span", null, "Downward - Right Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "top-start", style: { top: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "bottom" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "top-start", style: { top: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "bottom" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "top-start", style: { top: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "bottom" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", null, "Upward - Left Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-end", style: { bottom: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "top" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-end", style: { bottom: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "top" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-end", style: { bottom: "16px", right: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "top" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "right", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "right", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "right", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", null, "Upward - Right Labels"), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "small", position: "bottom-start", style: { bottom: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "top" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "medium", position: "bottom-start", style: { bottom: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "top" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true })))), /* @__PURE__ */ import_react.default.createElement("span", { className: "relative-container" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButton, { icon: "plus", size: "large", position: "bottom-start", style: { bottom: "16px", left: "16px" } }), /* @__PURE__ */ import_react.default.createElement("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))" } }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItems, { position: "top" }, /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Hover long text", icon: "pencil", align: "left", hover: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Focus", icon: "pencil", align: "left", focus: true }), /* @__PURE__ */ import_react.default.createElement(FloatingActionButtonItem, { text: "Active", icon: "pencil", align: "left", active: true }))))))
   );
 })();
 //# sourceMappingURL=fab-items.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/fab/tests/fab-items.tsx", "../../../src/icon/icon.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/fab/fab.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { Icon } from '../../icon';\nimport { FloatingActionButton } from '../../fab';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    #test-area {\n        grid-template-columns: 150px repeat(3, 1fr);\n        grid-template-rows: 30px repeat(5, 320px)\n    }\n    .relative-container {\n        position: relative;\n        border: 1px solid #ccc;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n\n            <span></span>\n            <span>Small</span>\n            <span>Medium</span>\n            <span>Large</span>\n\n            <span>Downward - Left Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"top-end\" style={{ top: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-sm k-fab-items-bottom\">\n                        <li className=\"k-fab-item k-text-right\">\n                            <span className=\"k-fab-item-text\">Normal</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-disabled\">\n                            <span className=\"k-fab-item-text\">Disabled</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"cancel\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"top-end\" style={{ top: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-md k-fab-items-bottom\">\n                        <li className=\"k-fab-item k-text-right k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-disabled k-focus\">\n                            <span className=\"k-fab-item-text\">Disabled & Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"cancel\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"top-end\" style={{ top: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-lg k-fab-items-bottom\">\n                        <li className=\"k-fab-item k-text-right k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-disabled\">\n                            <span className=\"k-fab-item-text\">Disabled</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"cancel\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n\n            <span>Downward - Right Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"top-start\" style={{ top: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-bottom\">\n                        <li className=\"k-fab-item k-text-left k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"top-start\" style={{ top: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-bottom\">\n                        <li className=\"k-fab-item k-text-left k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"top-start\" style={{ top: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-bottom\">\n                        <li className=\"k-fab-item k-text-left k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n\n            <span>Upward - Left Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"bottom-end\" style={{ bottom: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-top\">\n                        <li className=\"k-fab-item k-text-right k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"bottom-end\" style={{ bottom: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-top\">\n                        <li className=\"k-fab-item k-text-right k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"bottom-end\" style={{ bottom: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-top\">\n                        <li className=\"k-fab-item k-text-right k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-right k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n\n            <span>Upward - Right Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-top\">\n                        <li className=\"k-fab-item k-text-left k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-top\">\n                        <li className=\"k-fab-item k-text-left k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <ul className=\"k-fab-items k-fab-items-top\">\n                        <li className=\"k-fab-item k-text-left k-hover\">\n                            <span className=\"k-fab-item-text\">Hover long text</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-focus\">\n                            <span className=\"k-fab-item-text\">Focus</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                        <li className=\"k-fab-item k-text-left k-active\">\n                            <span className=\"k-fab-item-text\">Active</span>\n                            <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                        </li>\n                    </ul>\n                </div>\n            </span>\n            <span>Angular rendering</span>\n            <span className=\"relative-container\">\n                <span className=\"k-pos-absolute k-bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }}>\n                    <FloatingActionButton icon=\"plus\" size=\"small\" />\n                    <div className=\"k-fab-popup k-popup k-popup-transparent\" style={{ position: \"absolute\", bottom: \"36px\", left: \"calc(calc(36px/2) - calc(36px/2))\" }}>\n                        <ul className=\"k-fab-items k-fab-items-top\" >\n                            <li className=\"k-fab-item k-text-left k-hover\">\n                                <span className=\"k-fab-item-text\">Hover long text</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                            <li className=\"k-fab-item k-text-left k-focus\">\n                                <span className=\"k-fab-item-text\">Focus</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                            <li className=\"k-fab-item k-text-left k-active\">\n                                <span className=\"k-fab-item-text\">Active</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                        </ul>\n                    </div>\n                </span>\n            </span>\n            <span className=\"relative-container\">\n                <span className=\"k-pos-absolute k-bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }}>\n                    <FloatingActionButton icon=\"plus\" size=\"medium\" />\n                    <div className=\"k-fab-popup k-popup k-popup-transparent\" style={{ position: \"absolute\", bottom: \"52px\", left: \"calc(calc(52px/2) - calc(36px/2))\" }}>\n                        <ul className=\"k-fab-items k-fab-items-top\" >\n                            <li className=\"k-fab-item k-text-left k-hover\">\n                                <span className=\"k-fab-item-text\">Hover long text</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                            <li className=\"k-fab-item k-text-left k-focus\">\n                                <span className=\"k-fab-item-text\">Focus</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                            <li className=\"k-fab-item k-text-left k-active\">\n                                <span className=\"k-fab-item-text\">Active</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                        </ul>\n                    </div>\n                </span>\n            </span>\n            <span className=\"relative-container\">\n                <span className=\"k-pos-absolute k-bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }}>\n                    <FloatingActionButton icon=\"plus\" size=\"large\" />\n                    <div className=\"k-fab-popup k-popup k-popup-transparent\" style={{ position: \"absolute\", bottom: \"68px\", left: \"calc(calc(68px/2) - calc(36px/2))\" }}>\n                        <ul className=\"k-fab-items k-fab-items-top\" >\n                            <li className=\"k-fab-item k-text-left k-hover\">\n                                <span className=\"k-fab-item-text\">Hover long text</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                            <li className=\"k-fab-item k-text-left k-focus\">\n                                <span className=\"k-fab-item-text\">Focus</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                            <li className=\"k-fab-item k-text-left k-active\">\n                                <span className=\"k-fab-item-text\">Active</span>\n                                <Icon className=\"k-fab-item-icon\" name=\"pencil\" />\n                            </li>\n                        </ul>\n                    </div>\n                </span>\n            </span>\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n    size?: null | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';\n    rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n    flip?: null | 'v' | 'h';\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name,\n            size,\n            rotate,\n            flip\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name,\n                                [`k-icon-${size}`]: size,\n                                [`k-rotate-${rotate}`]: rotate,\n                                [`k-flip-${flip}`]: flip\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "export interface KendoThemeMaps {\n    sizeMap: Record<Exclude<any, null>, string>;\n    roundedMap: Record<Exclude<any, null>, string>;\n    calloutMap: Record<Exclude<any, null>, string>;\n    orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n    sizeMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    roundedMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    calloutMap: {\n        top: 'n',\n        bottom: 's',\n        left: 'w',\n        right: 'e'\n    },\n    orientationMap: {\n        vertical: 'vstack',\n        horizontal: 'hstack',\n    },\n};\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon';\n\nexport interface FloatingActionButtonProps {\n    className?: string;\n    style?: React.CSSProperties;\n    text?: string;\n    icon?: string;\n    type?: 'button' | 'submit' | 'reset';\n    size?: null | 'small' | 'medium' | 'large';\n    rounded: null | 'small' | 'medium' | 'large' | 'full';\n    fillMode?: null | 'solid';\n    themeColor?: null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n    position?: null | 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n}\n\nexport class FloatingActionButton extends React.Component<FloatingActionButtonProps> {\n\n    static defaultProps = {\n        type: 'button',\n        size: 'medium',\n        rounded: 'full',\n        fillMode: 'solid',\n        themeColor: 'primary'\n    };\n\n    render() {\n        const {\n            className,\n            style,\n            text,\n            icon,\n            type,\n            size,\n            rounded,\n            fillMode,\n            themeColor,\n            position,\n            hover,\n            focus,\n            active,\n            selected,\n            disabled,\n            ...htmlAttributes\n        } = this.props;\n\n        return (\n            <button\n                {...htmlAttributes}\n                type={type}\n                className={classNames(\n                    className,\n                    'k-fab',\n                    {\n                        [`k-fab-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        [`k-fab-${fillMode}`]: fillMode,\n                        [`k-fab-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                        [`!k-pos-absolute k-${position}`]: position,\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-active': active,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}\n                style={style}>\n                {icon && <Icon className=\"k-fab-icon\" name={icon} /> }\n                {text && <span className=\"k-fab-text\">{text}</span>}\n            </button>\n        );\n    }\n}\n"],
-  "mappings": "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",
-  "names": ["React", "ReactDOM", "React"]
+  "sources": ["../../../src/fab/tests/fab-items.tsx", "../../../src/fab/fab.tsx", "../../../src/utils/classNames.ts", "../../../src/utils/theme.ts", "../../../src/icon/icon.tsx", "../../../src/fab/fab-items.tsx", "../../../src/fab/fab-item.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { FloatingActionButton, FloatingActionButtonItems, FloatingActionButtonItem } from '../../fab';\n\nconst root = ReactDOM.createRoot(\n    document.getElementById('app') as HTMLElement\n);\n\nconst styles = `\n    #test-area {\n        grid-template-columns: 150px repeat(3, 1fr);\n        grid-template-rows: 30px repeat(5, 320px)\n    }\n    .relative-container {\n        position: relative;\n        border: 1px solid #ccc;\n    }\n`;\n\nroot.render(\n    <>\n        <style>{styles}</style>\n        <div id=\"test-area\" className=\"k-d-grid\">\n\n            <span></span>\n            <span>Small</span>\n            <span>Medium</span>\n            <span>Large</span>\n\n            <span>Downward - Left Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"top-end\" style={{ top: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"bottom\">\n                        <FloatingActionButtonItem text=\"Normal\" icon=\"pencil\" align=\"right\" />\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"right\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"right\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"right\" active />\n                        <FloatingActionButtonItem text=\"Disabled\" icon=\"cancel\" align=\"right\" disabled />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"top-end\" style={{ top: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"bottom\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"right\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"right\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"right\" active />\n                        <FloatingActionButtonItem text=\"Disabled & Focus\" icon=\"cancel\" align=\"right\" disabled focus />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"top-end\" style={{ top: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"bottom\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"right\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"right\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"right\" active />\n                        <FloatingActionButtonItem text=\"Disabled\" icon=\"cancel\" align=\"right\" disabled />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n\n            <span>Downward - Right Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"top-start\" style={{ top: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"bottom\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"left\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"left\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"left\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"top-start\" style={{ top: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"bottom\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"left\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"left\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"left\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"top-start\" style={{ top: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"bottom\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"left\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"left\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"left\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n\n            <span>Upward - Left Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"bottom-end\" style={{ bottom: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"top\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"right\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"right\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"right\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"bottom-end\" style={{ bottom: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"top\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"right\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"right\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"right\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"bottom-end\" style={{ bottom: \"16px\", right: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"top\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"right\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"right\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"right\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n\n            <span>Upward - Right Labels</span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"small\" position=\"bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"top\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"left\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"left\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"left\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"medium\" position=\"bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"top\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"left\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"left\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"left\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n            <span className=\"relative-container\">\n                <FloatingActionButton icon=\"plus\" size=\"large\" position=\"bottom-start\" style={{ bottom: \"16px\", left: \"16px\" }} />\n                <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))\" }}>\n                    <FloatingActionButtonItems position=\"top\">\n                        <FloatingActionButtonItem text=\"Hover long text\" icon=\"pencil\" align=\"left\" hover />\n                        <FloatingActionButtonItem text=\"Focus\" icon=\"pencil\" align=\"left\" focus />\n                        <FloatingActionButtonItem text=\"Active\" icon=\"pencil\" align=\"left\" active />\n                    </FloatingActionButtonItems>\n                </div>\n            </span>\n        </div>\n    </>\n);\n", "import * as React from 'react';\nimport { classNames, kendoThemeMaps } from '../utils';\nimport { Icon } from '../icon';\n\nexport interface FloatingActionButtonProps {\n    className?: string;\n    style?: React.CSSProperties;\n    text?: string;\n    icon?: string;\n    type?: 'button' | 'submit' | 'reset';\n    size?: null | 'small' | 'medium' | 'large';\n    rounded: null | 'small' | 'medium' | 'large' | 'full';\n    fillMode?: null | 'solid';\n    themeColor?: null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';\n    position?: null | 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    selected?: boolean;\n    disabled?: boolean;\n}\n\nexport class FloatingActionButton extends React.Component<FloatingActionButtonProps> {\n\n    static defaultProps = {\n        type: 'button',\n        size: 'medium',\n        rounded: 'full',\n        fillMode: 'solid',\n        themeColor: 'primary'\n    };\n\n    render() {\n        const {\n            className,\n            style,\n            text,\n            icon,\n            type,\n            size,\n            rounded,\n            fillMode,\n            themeColor,\n            position,\n            hover,\n            focus,\n            active,\n            selected,\n            disabled,\n            ...htmlAttributes\n        } = this.props;\n\n        return (\n            <button\n                {...htmlAttributes}\n                type={type}\n                className={classNames(\n                    className,\n                    'k-fab',\n                    {\n                        [`k-fab-${kendoThemeMaps.sizeMap[size!] || size}`]: size,\n                        [`k-fab-${fillMode}`]: fillMode,\n                        [`k-fab-${fillMode}-${themeColor}`]: Boolean(fillMode && themeColor),\n                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,\n                        [`!k-pos-absolute k-${position}`]: position,\n                        'k-hover': hover,\n                        'k-focus': focus,\n                        'k-active': active,\n                        'k-selected': selected,\n                        'k-disabled': disabled\n                    }\n                )}\n                style={style}>\n                {icon && <Icon className=\"k-fab-icon\" name={icon} /> }\n                {text && <span className=\"k-fab-text\">{text}</span>}\n            </button>\n        );\n    }\n}\n", "/* eslint-disable no-return-assign */\nexport const classNames = (...args): string => {\n    const result = {};\n\n    const addLeafKeys = (arg) => {\n        (typeof arg === 'object'\n            ? Object.keys(arg).forEach((key) => {\n                result[key] = arg[key];\n            })\n            : (result[arg] = true)\n        );\n    };\n\n    const addKeys = (list) =>\n        list\n            .filter((arg) => arg !== true && Boolean(arg))\n            .map((arg: any) =>\n                (Array.isArray(arg) ? addKeys(arg) : addLeafKeys(arg))\n            );\n\n    addKeys(args);\n\n    return Object.keys(result)\n        .map((key) => (result[key] && key) || null)\n        .filter((el) => el !== null)\n        .join(' ');\n};\n", "export interface KendoThemeMaps {\n    sizeMap: Record<Exclude<any, null>, string>;\n    roundedMap: Record<Exclude<any, null>, string>;\n    calloutMap: Record<Exclude<any, null>, string>;\n    orientationMap: Record<Exclude<any, null>, string>;\n}\n\nexport const kendoThemeMaps: KendoThemeMaps = {\n    sizeMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    roundedMap: {\n        small: 'sm',\n        medium: 'md',\n        large: 'lg'\n    },\n    calloutMap: {\n        top: 'n',\n        bottom: 's',\n        left: 'w',\n        right: 'e'\n    },\n    orientationMap: {\n        vertical: 'vstack',\n        horizontal: 'hstack',\n    },\n};\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface IconProps {\n    className?: string;\n    style?: React.CSSProperties;\n    name?: string;\n    size?: null | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';\n    rotate?: null | '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n    flip?: null | 'v' | 'h';\n}\n\nexport class Icon extends React.Component<IconProps> {\n\n    render() {\n        const {\n            className,\n            style,\n            name,\n            size,\n            rotate,\n            flip\n        } = this.props;\n\n        return (\n            <>\n                { name &&\n                    <span\n                        className={classNames(\n                            className,\n                            'k-icon',\n                            {\n                                [`k-i-${name}`]: name,\n                                [`k-icon-${size}`]: size,\n                                [`k-rotate-${rotate}`]: rotate,\n                                [`k-flip-${flip}`]: flip\n                            }\n                        )}\n                        style={style}>\n                    </span>\n                }\n            </>\n        );\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\n\nexport interface FloatingActionButtonItemsProps {\n    className?: string;\n    position?: null | 'top' | 'bottom';\n    children?: React.ReactNode;\n}\n\nexport class FloatingActionButtonItems extends React.Component<FloatingActionButtonItemsProps> {\n\n    render() {\n        const {\n            className,\n            position,\n            children\n        } = this.props;\n\n        return (\n            <ul className={classNames(\n                className,\n                'k-fab-items',\n                {\n                    [`k-fab-items-${position}`]: position\n                }\n            )}>\n                {children}\n            </ul>\n        );\n\n    }\n}\n", "import * as React from 'react';\nimport { classNames } from '../utils';\nimport { Icon } from '../icon';\n\nexport interface FloatingActionButtonItemProps {\n    className?: string;\n    align?: 'left' | 'right';\n    text?: string;\n    icon?: string;\n    hover?: boolean;\n    focus?: boolean;\n    active?: boolean;\n    disabled?: boolean;\n}\n\nexport class FloatingActionButtonItem extends React.Component<FloatingActionButtonItemProps> {\n\n    render() {\n        const {\n            className,\n            align,\n            text,\n            icon,\n            hover,\n            focus,\n            active,\n            disabled\n        } = this.props;\n\n        return (\n            <li className={classNames(\n                className,\n                'k-fab-item',\n                {\n                    [`k-text-${align}`]: align,\n                    'k-hover': hover,\n                    'k-focus': focus,\n                    'k-active': active,\n                    'k-disabled': disabled\n                }\n            )}>\n                <span className=\"k-fab-item-text\">{text}</span>\n                <Icon className=\"k-fab-item-icon\" name={icon} />\n            </li>\n        );\n\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["React", "React", "React", "ReactDOM", "React"]
 }

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

@@ -202,6 +202,12 @@
     themeColor: "primary"
   };
 
+  // src/fab/fab-items.tsx
+  var React3 = __toESM(__require("react"));
+
+  // src/fab/fab-item.tsx
+  var React4 = __toESM(__require("react"));
+
   // src/fab/tests/fab-position.tsx
   var root = import_client.default.createRoot(
     document.getElementById("app")