sccoreui 3.5.8 → 3.5.9

package/dist/components/multi-select-dropdown/multi-select-dropdown.js

@@ -26,7 +26,7 @@ const MultiSelectDropDown = (props) => {
             if (props.onClear)
                 props.onClear();
         };
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: () => onClear, className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "propile_icon icon_right right_section_item absolute z-5 ", icon: props.clear, size: 20 }, Math.floor(Math.random() * 1000)) })));
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: onClear, className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { className: "propile_icon icon_right right_section_item absolute z-5 ", icon: props.clear, size: 20 }, Math.floor(Math.random() * 1000)) })));
     };
     const onChange = (e) => {
         setItems(e.value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/pages/avatar/avatar.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("primereact/button");
-const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-require("./avatar.scss");
-const avatar_1 = require("primereact/avatar");
-const avatargroup_1 = require("primereact/avatargroup");
-const profile_square_image_png_1 = tslib_1.__importDefault(require("../../assets/images/profile-square-image.png"));
-const AvatarComponent = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white", style: {
-                                            position: "absolute",
-                                            right: "0",
-                                            bottom: "0",
-                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
-                                            right: "-2px",
-                                            bottom: "-2px",
-                                        } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-company-logo-2xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
-                                            right: "-2px",
-                                            bottom: "-2px",
-                                        } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "verified-tick-2xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-user-2xl" }) })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-user-2xl" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 w-1rem h-1rem border-circle  border-1 border-white", style: {
-                                            position: "absolute",
-                                            right: "0px",
-                                            bottom: "0px",
-                                        } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "w-4rem h-4rem border-circle  bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium  justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "w-4rem h-4rem border-circle relative bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200", style: { fontSize: "18px" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white", style: {
-                                            position: "absolute",
-                                            right: "0px",
-                                            bottom: "0px",
-                                        } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "w-4rem h-4rem border-circle relative bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
-                                            position: "absolute",
-                                            right: "-2px",
-                                            bottom: "-2px",
-                                        } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-company-logo-xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "w-3rem h-3rem border-gray-300 border-1 bg-white avatar-button p-dark-tooltip border-dashed p-0 flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: true, rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed w-3rem h-3rem flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-button-plus" }) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: "+2", shape: "circle", size: "large", className: "bg-gray-100 text-gray-600 text-base font-medium" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 p-0 border-1 ml-1 bg-white avatar-button  p-dark-tooltip border-dashed h-2rem w-2rem flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-button-plus" }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-2rem h-2rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-2rem h-2rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-2rem h-2rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
-                                                    position: "absolute",
-                                                    right: "0",
-                                                    bottom: "0",
-                                                } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
-                                                    right: "-2px",
-                                                    bottom: "-2px",
-                                                } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
-                                                    right: "-2px",
-                                                    bottom: "-2px",
-                                                } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "verified-tick-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6rem h-6rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle border-3 border-white w-6rem h-6rem shadow-4" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
-                                        right: "2px",
-                                        bottom: "2px",
-                                    } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "verified-tick-3xl" }) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10rem flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: profile_square_image_png_1.default, alt: "profile", className: "h-10rem " }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg text-gray-900 line-height-3 pt-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 line-height-3 " }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "link-01" }) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com", className: "text-gray-500 font-normal" }, { children: "Source" }))] }))] })) }))] }))] }));
-};
-exports.default = AvatarComponent;

package/dist/pages/badges/badge.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const badge_1 = require("primereact/badge");
-require("./badge.scss");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const label_image_png_1 = tslib_1.__importDefault(require("../../assets/images/label-image.png"));
-const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
-const dropdown_1 = require("primereact/dropdown");
-const react_1 = require("react");
-const button_1 = require("primereact/button");
-const BadgeComponent = () => {
-    // dropdown badge state
-    const [selectedLabel, setSelectedLabel] = (0, react_1.useState)({
-        name: "Error",
-        code: "bg-red-500",
-        text_code: "text-red-700",
-        bg: "bg-red-50",
-    });
-    //dropdown badge options list
-    const labels = [
-        {
-            name: "Error",
-            code: "bg-red-500",
-            text_code: "text-red-700",
-            bg: "bg-red-50",
-        },
-        {
-            name: "Pending",
-            code: "bg-primary-500",
-            text_code: "text-primary-700",
-            bg: "bg-primary-50",
-        },
-        {
-            name: "Success",
-            code: "bg-green-500",
-            text_code: "text-green-700",
-            bg: "bg-green-50",
-        },
-    ];
-    // badge dropdown selected lablel templete
-    const selectedlabelTemplate = (option) => {
-        if (option) {
-            return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${option.text_code}` }, { children: option.name }))] })));
-        }
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${selectedLabel.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${selectedLabel.text_code}` }, { children: selectedLabel.name }))] })));
-    };
-    // badge dropdown option lablel templete
-    const labelOptionTemplate = (option) => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${option.code} p-1 border-circle` }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${option.text_code}` }, { children: option.name }))] })));
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Badges" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-8 h-full w-full flex flex-column" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid " }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-12 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-round-2xl px-3 border-1 border-green-600 py-1 text-green-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-round-2xl px-3 border-1 border-primary-600 py-1 text-primary-700" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-round-2xl px-3 border-1 border-red-600 py-1 text-red-700" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600  p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-primary-600  p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600  p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-gray-600 p-1" }), " Label"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-red-600 p-1" }), " Label"] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-primary-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 gap-2 px-3 py-1 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 gap-2 px-3 py-1 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 gap-2 px-3 py-1 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, className: "h-1rem w-1rem" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-a", className: "bg-green-50 border-round-2xl font-medium flex align-items-center py-1 gap-2 px-3 text-green-700" }, { children: ["Label", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
-                                                const el = document.getElementById("badge-1-a");
-                                                el.remove();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-green-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-b", className: "bg-primary-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
-                                                const el = document.getElementById("badge-1-b");
-                                                el.remove();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-primary-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-1-c", className: "bg-red-50 border-round-2xl flex align-items-center py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
-                                                const el = document.getElementById("badge-1-c");
-                                                el.remove();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-red-500" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-a", className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
-                                                const el = document.getElementById("badge-2-a");
-                                                el.remove();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-green-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-b", className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
-                                                const el = document.getElementById("badge-2-b");
-                                                el.remove();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-primary-500" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ id: "badge-2-c", className: "bg-red-50 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
-                                                const el = document.getElementById("badge-2-c");
-                                                el.remove();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "close-chip-red-500" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center  py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-700 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-700 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-100 border-round-2xl flex align-items-center border-red-700 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center border-green-600 border-1 py-1 gap-2 px-3 text-green-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-green-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 border-round-2xl flex align-items-center border-primary-600 border-1 py-1 gap-2 px-3 text-primary-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-primary-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 border-round-2xl flex align-items-center border-red-600 border-1 py-1 gap-2 px-3 text-red-700" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-red-600" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: "Label" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center border-green-600 border-1 p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center border-primary-600 border-1 p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center border-red-600 border-1 p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center  p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 border-circle flex align-items-center justify-content-center  p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-50 border-circle flex align-items-center justify-content-center  p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-top-red-600" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 border-circle flex align-items-center justify-content-center  p-3 text-green-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-icon-green-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-100 border-circle flex align-items-center justify-content-center  p-3 text-primary-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-icon-primary-600" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-100 border-circle flex align-items-center justify-content-center  p-3 text-red-700" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-icon-red-600" }) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex col-6 md:col-6 lg:col-3 justify-content-around px-3" }, { children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedLabel, onChange: (e) => setSelectedLabel(e.value), options: labels, optionLabel: "name", placeholder: selectedLabel.name, className: `shadow-none p-dropdown-badge py-0 ${selectedLabel.bg} border-0 text-red-500  flex align-items-center justify-content-center border-round-3xl`, valueTemplate: selectedlabelTemplate, itemTemplate: labelOptionTemplate }) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 gap-3 flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50  pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50  pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white  flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-gray-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-white flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-red-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-red-600 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-white text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-green-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between  border-round-3xl border-1 border-primary-600 text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-gray-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700   " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center justify-content-center border-round-2xl py-1 text-md font-medium text-red-700" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-1 pr-4 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-green-50 flex align-items-center justify-content-center border-round-2xl py-1 px-3 text-green-700 text-md font-medium" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl text-primary-700 gap-2 " }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-primary-50 text-primary-700 text-md font-medium flex align-items-center justify-content-center border-round-2xl py-1 px-3" }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 text-red-700 pl-1 pr-4 py-1 flex align-items-center text-md font-medium justify-content-between border-round-3xl gap-2 text-gray-700" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-red-700 text-gray-700 bg-red-50 text-md font-medium px-3 flex align-items-center justify-content-center border-round-2xl py-1 " }, { children: "Sample text" })), "We\u2019ve just released a new feature", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-white flex align-items-center gap-2 border-round-2xl py-1 px-3 text-md font-medium text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl  text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-green-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new featur", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-50 text-md font-medium px-3 flex align-items-center gap-2  border-round-2xl py-1 text-primary-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-100 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-gray-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-50 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-red-700" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-green-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-primary-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-primary-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-red-50 pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-red-600 text-md font-medium px-3 flex align-items-center gap-2 border-round-2xl py-1 text-white" }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-white" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-6 md:col-6 lg:col-3 px-3 flex flex-column gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-green-600 text-md font-medium text-green-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-green-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-green-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-green-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-primary-600 text-md font-medium text-primary-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-primary-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-primary-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-primary-600" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bg-white pl-3 pr-1 py-1 flex align-items-center justify-content-between border-round-3xl border-1 border-red-600 text-md font-medium text-red-700" }, { children: ["We\u2019ve just released a new feature", (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "border-1 border-red-600 bg-white px-3 flex align-items-center gap-2 border-round-2xl py-1 text-md font-medium text-red-700 " }, { children: ["Sample text", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "arrow-right-red-600" })] }))] }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ type: "button", label: "Emails", className: "bg-primary-500 p-auto m-auto" }, { children: (0, jsx_runtime_1.jsx)(badge_1.Badge, { value: "8" }) }))] })) }))] }));
-};
-exports.default = BadgeComponent;

package/dist/pages/breadcrumb/breadcrumb.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const breadcrumb_1 = require("primereact/breadcrumb");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const BreadCrumbComponent = () => {
-    ///menu of breadcrumbs +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-    const items = [{ label: 'Setting', className: "text-gray-600 px-3 py-2" }, { label: 'Project', className: "px-3 py-2" }, { label: "Team", className: "px-3 py-2 last-element" }];
-    // home icon of breadcrumbs ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-    const home = { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "home-line-gray-500" }), url: "", className: "pr-4" };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "BreadCrumbs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid " }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'border-1 border-x-none border-gray-200', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'border-1 border-x-none border-gray-200', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'last-item-bg-color-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'bg-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "slash-divider-gray-300" }) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4  my-8 px-4" }, { children: (0, jsx_runtime_1.jsx)(breadcrumb_1.BreadCrumb, { model: items, home: home, className: 'bg-gray-50', separatorIcon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "chevron-right-gray-300" }) }) }))] }))] }));
-};
-exports.default = BreadCrumbComponent;

package/dist/pages/button/button.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("primereact/button");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const ButtonComponent = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Buttons" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon bg-primary-100 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, className: "bg-primary-100 border-none", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", outlined: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, outlined: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-secondary p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-secondary p-button-dual-icon bg-primary-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-primary" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-button-secondary", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, className: "p-button-secondary", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }) })] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 hover:bg-gray-50 focus:bg-transparent justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 focus:bg-transparent justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-primary-500 hover:text-primary-800 hover:bg-primary-50 focus:bg-transparent justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 bg-transparent focus:bg-transparent justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-gray-600 hover:text-gray-700 focus:bg-transparent justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", link: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none  white-space-nowrap gap-2 p-button-dual-icon", link: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" })] }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between p-button-dual-icon  white-space-nowrap gap-2 bg-red-200 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), className: "p-button-danger" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-white" }), className: "p-button-danger bg-red-200 border-none" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", outlined: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" }), (0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon bg-red-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger-secondary" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger-secondary bg-red-25" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" }), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), className: "p-button-danger" })] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger text-red-700 hover:text-red-800 bg-transparent  flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between  white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-red" })] }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), label: "Sign in with Google", className: "flex align-items-center gap-2 p-button-google" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), label: "Sign in with Google", className: "flex align-items-center gap-2 p-button-google" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), className: "p-button-google" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "google-logo" }), className: "p-button-google" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), label: "Sign in with Facebook", className: "flex align-items-center gap-2 p-button-facebook" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), label: "Sign in with Facebook", className: "flex align-items-center gap-2 p-button-facebook" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), className: "p-button-facebook" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "facebook-logo" }), className: "p-button-facebook" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), label: "Sign in with Apple", className: "flex align-items-center gap-2 p-button-apple" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), label: "Sign in with Apple", className: "flex align-items-center gap-2 p-button-apple" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), className: "p-button-apple" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "apple-logo" }), className: "p-button-apple" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between w-18rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), label: "Sign in with Twitter", className: "flex align-items-center gap-2 p-button-twitter" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), label: "Sign in with Twitter", className: "flex align-items-center gap-2 p-button-twitter" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start m-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), className: "p-button-twitter" }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "twitter-logo" }), className: "p-button-twitter" })] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-lg white-space-nowrap py-3 px-5 gap-2" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5 bg-primary-100 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", outlined: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-lg py-3 px-5 white-space-nowrap gap-2", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-secondary text-lg py-3 px-5" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 p-button-secondary text-lg py-3 px-5 bg-primary-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-primary-300" }), " ", "Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center text-primary-500 hover:text-primary-800 hover:bg-primary-50 justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center hover:bg-primary-50 text-primary-500 hover:text-primary-800 justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", link: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, link: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-gray-300" }), " Button CTA"] }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between text-lg py-3 px-5 white-space-nowrap gap-2 bg-red-200 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-white" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", outlined: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger-secondary flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5 bg-red-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-3" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center bg-transparent text-red-700 hover:text-red-800 justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-green-500" }), " Button CTA"] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between white-space-nowrap gap-2 text-lg py-3 px-5", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-1 border-circle bg-red-300" }), " Button CTA"] }))] })) }))] }))] }))] }));
-};
-exports.default = ButtonComponent;

package/dist/pages/button-group/button-group.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("primereact/button");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const ButtonGroupComponent = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Button Groups" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-2" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-4rem h-3rem" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Text" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-4rem h-3rem" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Text" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-4rem h-3rem" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Text" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-6rem h-3rem" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2" }, { children: "Text" }))] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-6rem h-3rem" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2" }, { children: "Text" }))] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-6rem h-3rem" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "button-ring-gray" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2" }, { children: "Text" }))] }))] }))] }))] }));
-};
-exports.default = ButtonGroupComponent;