sccoreui 2.4.1 → 2.4.3

package/dist/assets/sccoreui.css

@@ -2424,8 +2424,8 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
   border-radius: 2rem;
 }
 .p-button.p-button-icon-only {
-  width: 2.25rem;
-  padding: 8px;
+  width: auto !important;
+  padding: auto !important;
 }
 .p-button.p-button-icon-only .p-button-icon-left,
 .p-button.p-button-icon-only .p-button-icon-right {
@@ -8722,22 +8722,30 @@ input[type="number"]::-webkit-outer-spin-button {
   font-size: 18px;
 }
 
-
+/* Default button with dual icon */
 .p-button.p-button-dual-icon {
   width: auto;
-  padding: 10px 18px;
-  font-size: 14px;
+  padding: 8px 14px;
 }
+
+.p-button.p-button-icon-only {
+  padding: 8px;
+}
+
 .p-button.p-button-dual-icon.p-button-xs {
   width: auto;
   padding: 6px 14px;
+  font-size: 14px;
 }
+
 .p-button.p-button-icon-only.p-button-xs {
-  padding: 8px;
+  padding: 6px;
 }
+
 .p-button.p-button-dual-icon.p-button-sm {
   width: auto;
-  padding: 10px 16px ;
+  padding: 10px 16px;
+  font-size: 14px;
 }
 .p-button.p-button-icon-only.p-button-sm {
   padding: 10px;
@@ -8746,7 +8754,8 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .p-button.p-button-dual-icon.p-button-md {
   width: auto;
-  padding: 10px 14px;
+  padding: 10px 18px;
+  font-size: 16px;
 }
 .p-button.p-button-icon-only.p-button-md {
   padding: 12px;
@@ -8755,6 +8764,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .p-button.p-button-dual-icon.p-button-lg{
   width: auto;
   padding: 12px 20px;
+  font-size: 16px;
 }
 .p-button.p-button-icon-only.p-button-lg {
   padding: 14px;
@@ -8764,6 +8774,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .p-button.p-button-dual-icon.p-button-xl {
   width: auto;
   padding: 16px 28px;
+  font-size: 18px;
 }
 .p-button.p-button-icon-only.p-button-xl {
   padding: 16px;

package/dist/components/progress-steps/progress-steps.js

@@ -7,16 +7,18 @@ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-co
 const react_1 = require("react");
 const ProgressSteps = (props) => {
     const { stepsItems, orientation, activeIndex, withButtons = true, icons, className, style, } = props;
-    const [currentActive, setCurrentActive] = (0, react_1.useState)(activeIndex || 0);
+    const [currentActive, setCurrentActive] = (0, react_1.useState)(!activeIndex ? 0 : activeIndex);
     const progressRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         if (!orientation || orientation === "horizontal") {
             progressRef.current.style.width = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
+            progressRef.current.style.height = "2px";
         }
         else {
             progressRef.current.style.height = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
+            progressRef.current.style.width = "2px";
         }
-    }, [currentActive]);
+    }, [currentActive, orientation]);
     const handleNext = () => {
         if (currentActive > stepsItems.length) {
             setCurrentActive(stepsItems.length);

package/dist/directives/svg-component.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const svg_icons_1 = require("./svg-icons");
+const svg_icons_1 = tslib_1.__importDefault(require("./svg-icons"));
 const SvgComponent = ({ iconName }) => {
-    const iconObj = svg_icons_1.svgIcons.find((icon) => icon.name === iconName);
+    const iconObj = svg_icons_1.default.find((icon) => icon.name === iconName);
     if (!iconObj)
         return null; // handle case where icon name is not found
     return ((0, jsx_runtime_1.jsx)("span", { className: "flex align-items-center justify-content-center", dangerouslySetInnerHTML: { __html: iconObj.svg } }));

package/dist/directives/svg-icons.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.svgIcons = void 0;
-exports.svgIcons = [
+const svgIcons = [
     {
         name: "user",
         svg: `<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -939,3 +938,4 @@ exports.svgIcons = [
     `,
     },
 ];
+exports.default = svgIcons;

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chart = exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
-exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = void 0;
+exports.svgIcons = exports.SvgComponent = exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -116,4 +116,8 @@ var progress_steps_1 = require("./components/progress-steps/progress-steps");
 Object.defineProperty(exports, "ProgressSteps", { enumerable: true, get: function () { return tslib_1.__importDefault(progress_steps_1).default; } });
 var circle_progress_bar_1 = require("./components/progress_bar_round/circle-progress-bar");
 Object.defineProperty(exports, "CircleProgressComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(circle_progress_bar_1).default; } });
-client_1.default.createRoot(document.getElementById('root')).render((0, jsx_runtime_1.jsx)(App_1.default, {}));
+var svg_component_1 = require("./directives/svg-component");
+Object.defineProperty(exports, "SvgComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(svg_component_1).default; } });
+var svg_icons_1 = require("./directives/svg-icons");
+Object.defineProperty(exports, "svgIcons", { enumerable: true, get: function () { return tslib_1.__importDefault(svg_icons_1).default; } });
+client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/pages/button/button.js

@@ -5,6 +5,6 @@ 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 text-base white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-white" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-base 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, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", outlined: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-base white-space-nowrap gap-2 p-button-dual-icon", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-secondary p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-primary" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-base 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, { iconName: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between text-base white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none text-base white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", link: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between shadow-none text-base white-space-nowrap gap-2 p-button-dual-icon", link: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 bg-red-200 border-none", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", outlined: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between text-base white-space-nowrap gap-2 p-button-dual-icon", outlined: true, disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon bg-red-25", disabled: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between text-base white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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 text-base white-space-nowrap gap-2 p-button-dual-icon", text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" })] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "p-button-danger flex align-items-center justify-content-between text-base white-space-nowrap gap-2 p-button-dual-icon", disabled: true, text: true }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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"] }))] })) }))] }))] }))] }));
+    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, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-primary" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-gray" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-white" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "button-ring-red" }), " Button CTA", " ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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, { iconName: "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/types/directives/svg-icons.d.ts

@@ -1,4 +1,5 @@
-export declare const svgIcons: {
+declare const svgIcons: {
     name: string;
     svg: string;
 }[];
+export default svgIcons;

package/dist/types/index.d.ts

@@ -1,60 +1,63 @@
-import { DropdownChangeEvent } from 'primereact/dropdown';
-import { ColorPickerChangeEvent } from 'primereact/colorpicker';
-import { SliderChangeEvent } from 'primereact/slider';
-import { FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from 'primereact/fileupload';
-import { CarouselResponsiveOption } from 'primereact/carousel';
-import { MenuItem } from 'primereact/menuitem';
-export { default as Button } from './components/button/button';
-export { default as Dropdown } from './components/dropdown/dropdown';
-export { default as InputText } from './components/input/input';
-export { Accordion, AccordionTab } from './components/accordion/accordion';
-export { default as ColorPicker } from './components/color-picker/color-picker';
-export { default as AutoComplete } from './components/auto-complete/auto-complete';
-export { default as Checkbox } from './components/checkbox/checkbox';
-export { default as DataTable } from './components/data-table/data-table';
-export { default as Column } from './components/data-table/column';
-export { default as Sidebar } from './components/side-panel/side-panel';
-export { TabView, TabPanel } from './components/tabview/tabview';
-export { default as TabMenu } from './components/tab-menu/tab-menu';
-export { default as FileUpload } from './components/file-upload/file-upload';
-export { default as MultiSelect } from './components/multi-select/multi-select';
-export { default as Paginator } from './components/data-table/paginator';
-export { default as classNames } from './components/utils/classnames';
-export { default as Avatar } from './components/avatar/avatar';
-export { default as AvatarGroup } from './components/avatar/avatar-group';
-export { default as Image } from './components/image/image';
-export { default as Calendar } from './components/calendar/calendar';
-export { default as Tooltip } from './components/tooltip/tooltip';
-export { default as Badge } from './components/badge/badge';
-export { default as RadioButton } from './components/radio-button/radio-button';
-export { default as ConfirmDialog } from './components/dialogs/confirm-dialog';
-export { default as confirmPopup } from './components/dialogs/confirm-popup';
-export { default as Password } from './components/password/password';
-export { default as Dialog } from './components/dialogs/dialog';
-export { default as Card } from './components/card/card';
-export { default as Slider } from './components/range-slider/slider';
-export { default as ToggleButton } from './components/toggle/toggle-button';
-export { default as Carousel } from './components/carousel/carousel';
-export { default as Tag } from './components/carousel/tag';
-export { default as OverlayPanel } from './components/overlays/overlay-panel';
-export { default as InputNumber } from './components/input/input-number';
-export { default as Toast } from './components/toast/toast';
-export { DataView, DataViewLayoutOptions } from './components/data-view/data-view';
-export { default as SplitButton } from './components/button/split-button';
-export { default as SpeedDial } from './components/button/speed-dial';
-export { default as InputMask } from './components/input/input-mask';
-export { default as InputSwitch } from './components/input/input-switch';
-export { default as InputTextarea } from './components/input/input-textarea';
-export { default as Rating } from './components/rating/rating';
-export { default as Chips } from './components/chips/chips';
-export { default as Chip } from './components/chips/chip';
-export { default as Skeleton } from './components/skeleton/skeleton';
-export { default as ProgressSpinner } from './components/spinner/spinner';
-export { default as Chart } from './components/chart/chart';
-export { default as BreadCrumb } from './components/breadcrumb/breacrumb';
-export { default as MegaMenu } from './components/megamenu/mega-menu';
-export { default as Divider } from './components/divider/divider';
-export { default as ProgressBar } from './components/progress-bar/progress-bar';
-export { default as ProgressSteps } from './components/progress-steps/progress-steps';
-export { default as CircleProgressComponent } from './components/progress_bar_round/circle-progress-bar';
-export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions };
+import { DropdownChangeEvent } from "primereact/dropdown";
+import { ColorPickerChangeEvent } from "primereact/colorpicker";
+import { SliderChangeEvent } from "primereact/slider";
+import { FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from "primereact/fileupload";
+import { InputNumberValueChangeEvent } from "primereact/inputnumber";
+import { CarouselResponsiveOption } from "primereact/carousel";
+import { MenuItem } from "primereact/menuitem";
+export { default as Button } from "./components/button/button";
+export { default as Dropdown } from "./components/dropdown/dropdown";
+export { default as InputText } from "./components/input/input";
+export { Accordion, AccordionTab } from "./components/accordion/accordion";
+export { default as ColorPicker } from "./components/color-picker/color-picker";
+export { default as AutoComplete } from "./components/auto-complete/auto-complete";
+export { default as Checkbox } from "./components/checkbox/checkbox";
+export { default as DataTable } from "./components/data-table/data-table";
+export { default as Column } from "./components/data-table/column";
+export { default as Sidebar } from "./components/side-panel/side-panel";
+export { TabView, TabPanel } from "./components/tabview/tabview";
+export { default as TabMenu } from "./components/tab-menu/tab-menu";
+export { default as FileUpload } from "./components/file-upload/file-upload";
+export { default as MultiSelect } from "./components/multi-select/multi-select";
+export { default as Paginator } from "./components/data-table/paginator";
+export { default as classNames } from "./components/utils/classnames";
+export { default as Avatar } from "./components/avatar/avatar";
+export { default as AvatarGroup } from "./components/avatar/avatar-group";
+export { default as Image } from "./components/image/image";
+export { default as Calendar } from "./components/calendar/calendar";
+export { default as Tooltip } from "./components/tooltip/tooltip";
+export { default as Badge } from "./components/badge/badge";
+export { default as RadioButton } from "./components/radio-button/radio-button";
+export { default as ConfirmDialog } from "./components/dialogs/confirm-dialog";
+export { default as confirmPopup } from "./components/dialogs/confirm-popup";
+export { default as Password } from "./components/password/password";
+export { default as Dialog } from "./components/dialogs/dialog";
+export { default as Card } from "./components/card/card";
+export { default as Slider } from "./components/range-slider/slider";
+export { default as ToggleButton } from "./components/toggle/toggle-button";
+export { default as Carousel } from "./components/carousel/carousel";
+export { default as Tag } from "./components/carousel/tag";
+export { default as OverlayPanel } from "./components/overlays/overlay-panel";
+export { default as InputNumber } from "./components/input/input-number";
+export { default as Toast } from "./components/toast/toast";
+export { DataView, DataViewLayoutOptions, } from "./components/data-view/data-view";
+export { default as SplitButton } from "./components/button/split-button";
+export { default as SpeedDial } from "./components/button/speed-dial";
+export { default as InputMask } from "./components/input/input-mask";
+export { default as InputSwitch } from "./components/input/input-switch";
+export { default as InputTextarea } from "./components/input/input-textarea";
+export { default as Rating } from "./components/rating/rating";
+export { default as Chips } from "./components/chips/chips";
+export { default as Chip } from "./components/chips/chip";
+export { default as Skeleton } from "./components/skeleton/skeleton";
+export { default as ProgressSpinner } from "./components/spinner/spinner";
+export { default as Chart } from "./components/chart/chart";
+export { default as BreadCrumb } from "./components/breadcrumb/breacrumb";
+export { default as MegaMenu } from "./components/megamenu/mega-menu";
+export { default as Divider } from "./components/divider/divider";
+export { default as ProgressBar } from "./components/progress-bar/progress-bar";
+export { default as ProgressSteps } from "./components/progress-steps/progress-steps";
+export { default as CircleProgressComponent } from "./components/progress_bar_round/circle-progress-bar";
+export { default as SvgComponent } from "./directives/svg-component";
+export { default as svgIcons } from "./directives/svg-icons";
+export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions, InputNumberValueChangeEvent };

package/package.json

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