sccoreui 2.4.2 → 2.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/assets/sccoreui.css
CHANGED
|
@@ -2424,8 +2424,8 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
|
|
|
2424
2424
|
border-radius: 2rem;
|
|
2425
2425
|
}
|
|
2426
2426
|
.p-button.p-button-icon-only {
|
|
2427
|
-
width:
|
|
2428
|
-
padding:
|
|
2427
|
+
width: auto !important;
|
|
2428
|
+
padding: auto !important;
|
|
2429
2429
|
}
|
|
2430
2430
|
.p-button.p-button-icon-only .p-button-icon-left,
|
|
2431
2431
|
.p-button.p-button-icon-only .p-button-icon-right {
|
|
@@ -8722,22 +8722,30 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8722
8722
|
font-size: 18px;
|
|
8723
8723
|
}
|
|
8724
8724
|
|
|
8725
|
-
|
|
8725
|
+
/* Default button with dual icon */
|
|
8726
8726
|
.p-button.p-button-dual-icon {
|
|
8727
8727
|
width: auto;
|
|
8728
|
-
padding:
|
|
8729
|
-
font-size: 14px;
|
|
8728
|
+
padding: 8px 14px;
|
|
8730
8729
|
}
|
|
8730
|
+
|
|
8731
|
+
.p-button.p-button-icon-only {
|
|
8732
|
+
padding: 8px;
|
|
8733
|
+
}
|
|
8734
|
+
|
|
8731
8735
|
.p-button.p-button-dual-icon.p-button-xs {
|
|
8732
8736
|
width: auto;
|
|
8733
8737
|
padding: 6px 14px;
|
|
8738
|
+
font-size: 14px;
|
|
8734
8739
|
}
|
|
8740
|
+
|
|
8735
8741
|
.p-button.p-button-icon-only.p-button-xs {
|
|
8736
|
-
padding:
|
|
8742
|
+
padding: 6px;
|
|
8737
8743
|
}
|
|
8744
|
+
|
|
8738
8745
|
.p-button.p-button-dual-icon.p-button-sm {
|
|
8739
8746
|
width: auto;
|
|
8740
|
-
padding: 10px 16px
|
|
8747
|
+
padding: 10px 16px;
|
|
8748
|
+
font-size: 14px;
|
|
8741
8749
|
}
|
|
8742
8750
|
.p-button.p-button-icon-only.p-button-sm {
|
|
8743
8751
|
padding: 10px;
|
|
@@ -8746,7 +8754,8 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8746
8754
|
|
|
8747
8755
|
.p-button.p-button-dual-icon.p-button-md {
|
|
8748
8756
|
width: auto;
|
|
8749
|
-
padding: 10px
|
|
8757
|
+
padding: 10px 18px;
|
|
8758
|
+
font-size: 16px;
|
|
8750
8759
|
}
|
|
8751
8760
|
.p-button.p-button-icon-only.p-button-md {
|
|
8752
8761
|
padding: 12px;
|
|
@@ -8755,6 +8764,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8755
8764
|
.p-button.p-button-dual-icon.p-button-lg{
|
|
8756
8765
|
width: auto;
|
|
8757
8766
|
padding: 12px 20px;
|
|
8767
|
+
font-size: 16px;
|
|
8758
8768
|
}
|
|
8759
8769
|
.p-button.p-button-icon-only.p-button-lg {
|
|
8760
8770
|
padding: 14px;
|
|
@@ -8764,6 +8774,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8764
8774
|
.p-button.p-button-dual-icon.p-button-xl {
|
|
8765
8775
|
width: auto;
|
|
8766
8776
|
padding: 16px 28px;
|
|
8777
|
+
font-size: 18px;
|
|
8767
8778
|
}
|
|
8768
8779
|
.p-button.p-button-icon-only.p-button-xl {
|
|
8769
8780
|
padding: 16px;
|
|
@@ -7,16 +7,18 @@ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-co
|
|
|
7
7
|
const react_1 = require("react");
|
|
8
8
|
const ProgressSteps = (props) => {
|
|
9
9
|
const { stepsItems, orientation, activeIndex, withButtons = true, icons, className, style, } = props;
|
|
10
|
-
const [currentActive, setCurrentActive] = (0, react_1.useState)(activeIndex
|
|
10
|
+
const [currentActive, setCurrentActive] = (0, react_1.useState)(!activeIndex ? 0 : activeIndex);
|
|
11
11
|
const progressRef = (0, react_1.useRef)(null);
|
|
12
12
|
(0, react_1.useEffect)(() => {
|
|
13
13
|
if (!orientation || orientation === "horizontal") {
|
|
14
14
|
progressRef.current.style.width = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
|
|
15
|
+
progressRef.current.style.height = "2px";
|
|
15
16
|
}
|
|
16
17
|
else {
|
|
17
18
|
progressRef.current.style.height = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
|
|
19
|
+
progressRef.current.style.width = "2px";
|
|
18
20
|
}
|
|
19
|
-
}, [currentActive]);
|
|
21
|
+
}, [currentActive, orientation]);
|
|
20
22
|
const handleNext = () => {
|
|
21
23
|
if (currentActive > stepsItems.length) {
|
|
22
24
|
setCurrentActive(stepsItems.length);
|
package/dist/index.js
CHANGED
|
@@ -120,4 +120,4 @@ var svg_component_1 = require("./directives/svg-component");
|
|
|
120
120
|
Object.defineProperty(exports, "SvgComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(svg_component_1).default; } });
|
|
121
121
|
var svg_icons_1 = require("./directives/svg-icons");
|
|
122
122
|
Object.defineProperty(exports, "svgIcons", { enumerable: true, get: function () { return tslib_1.__importDefault(svg_icons_1).default; } });
|
|
123
|
-
client_1.default.createRoot(document.getElementById(
|
|
123
|
+
client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));
|
|
@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const button_1 = require("primereact/button");
|
|
6
6
|
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
7
7
|
const ButtonComponent = () => {
|
|
8
|
-
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"] }))] })) }))] }))] }))] }));
|
|
8
|
+
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"] }))] })) }))] }))] }))] }));
|
|
9
9
|
};
|
|
10
10
|
exports.default = ButtonComponent;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,62 +1,63 @@
|
|
|
1
|
-
import { DropdownChangeEvent } from
|
|
2
|
-
import { ColorPickerChangeEvent } from
|
|
3
|
-
import { SliderChangeEvent } from
|
|
4
|
-
import { FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
export { default as
|
|
9
|
-
export { default as
|
|
10
|
-
export {
|
|
11
|
-
export {
|
|
12
|
-
export { default as
|
|
13
|
-
export { default as
|
|
14
|
-
export { default as
|
|
15
|
-
export { default as
|
|
16
|
-
export { default as
|
|
17
|
-
export {
|
|
18
|
-
export {
|
|
19
|
-
export { default as
|
|
20
|
-
export { default as
|
|
21
|
-
export { default as
|
|
22
|
-
export { default as
|
|
23
|
-
export { default as
|
|
24
|
-
export { default as
|
|
25
|
-
export { default as
|
|
26
|
-
export { default as
|
|
27
|
-
export { default as
|
|
28
|
-
export { default as
|
|
29
|
-
export { default as
|
|
30
|
-
export { default as
|
|
31
|
-
export { default as
|
|
32
|
-
export { default as
|
|
33
|
-
export { default as
|
|
34
|
-
export { default as
|
|
35
|
-
export { default as
|
|
36
|
-
export { default as
|
|
37
|
-
export { default as
|
|
38
|
-
export { default as
|
|
39
|
-
export { default as
|
|
40
|
-
export { default as
|
|
41
|
-
export { default as
|
|
42
|
-
export {
|
|
43
|
-
export {
|
|
44
|
-
export { default as
|
|
45
|
-
export { default as
|
|
46
|
-
export { default as
|
|
47
|
-
export { default as
|
|
48
|
-
export { default as
|
|
49
|
-
export { default as
|
|
50
|
-
export { default as
|
|
51
|
-
export { default as
|
|
52
|
-
export { default as
|
|
53
|
-
export { default as
|
|
54
|
-
export { default as
|
|
55
|
-
export { default as
|
|
56
|
-
export { default as
|
|
57
|
-
export { default as
|
|
58
|
-
export { default as
|
|
59
|
-
export { default as
|
|
60
|
-
export { default as
|
|
61
|
-
export { default as
|
|
62
|
-
export
|
|
1
|
+
import { DropdownChangeEvent } from "primereact/dropdown";
|
|
2
|
+
import { ColorPickerChangeEvent } from "primereact/colorpicker";
|
|
3
|
+
import { SliderChangeEvent } from "primereact/slider";
|
|
4
|
+
import { FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from "primereact/fileupload";
|
|
5
|
+
import { InputNumberValueChangeEvent } from "primereact/inputnumber";
|
|
6
|
+
import { CarouselResponsiveOption } from "primereact/carousel";
|
|
7
|
+
import { MenuItem } from "primereact/menuitem";
|
|
8
|
+
export { default as Button } from "./components/button/button";
|
|
9
|
+
export { default as Dropdown } from "./components/dropdown/dropdown";
|
|
10
|
+
export { default as InputText } from "./components/input/input";
|
|
11
|
+
export { Accordion, AccordionTab } from "./components/accordion/accordion";
|
|
12
|
+
export { default as ColorPicker } from "./components/color-picker/color-picker";
|
|
13
|
+
export { default as AutoComplete } from "./components/auto-complete/auto-complete";
|
|
14
|
+
export { default as Checkbox } from "./components/checkbox/checkbox";
|
|
15
|
+
export { default as DataTable } from "./components/data-table/data-table";
|
|
16
|
+
export { default as Column } from "./components/data-table/column";
|
|
17
|
+
export { default as Sidebar } from "./components/side-panel/side-panel";
|
|
18
|
+
export { TabView, TabPanel } from "./components/tabview/tabview";
|
|
19
|
+
export { default as TabMenu } from "./components/tab-menu/tab-menu";
|
|
20
|
+
export { default as FileUpload } from "./components/file-upload/file-upload";
|
|
21
|
+
export { default as MultiSelect } from "./components/multi-select/multi-select";
|
|
22
|
+
export { default as Paginator } from "./components/data-table/paginator";
|
|
23
|
+
export { default as classNames } from "./components/utils/classnames";
|
|
24
|
+
export { default as Avatar } from "./components/avatar/avatar";
|
|
25
|
+
export { default as AvatarGroup } from "./components/avatar/avatar-group";
|
|
26
|
+
export { default as Image } from "./components/image/image";
|
|
27
|
+
export { default as Calendar } from "./components/calendar/calendar";
|
|
28
|
+
export { default as Tooltip } from "./components/tooltip/tooltip";
|
|
29
|
+
export { default as Badge } from "./components/badge/badge";
|
|
30
|
+
export { default as RadioButton } from "./components/radio-button/radio-button";
|
|
31
|
+
export { default as ConfirmDialog } from "./components/dialogs/confirm-dialog";
|
|
32
|
+
export { default as confirmPopup } from "./components/dialogs/confirm-popup";
|
|
33
|
+
export { default as Password } from "./components/password/password";
|
|
34
|
+
export { default as Dialog } from "./components/dialogs/dialog";
|
|
35
|
+
export { default as Card } from "./components/card/card";
|
|
36
|
+
export { default as Slider } from "./components/range-slider/slider";
|
|
37
|
+
export { default as ToggleButton } from "./components/toggle/toggle-button";
|
|
38
|
+
export { default as Carousel } from "./components/carousel/carousel";
|
|
39
|
+
export { default as Tag } from "./components/carousel/tag";
|
|
40
|
+
export { default as OverlayPanel } from "./components/overlays/overlay-panel";
|
|
41
|
+
export { default as InputNumber } from "./components/input/input-number";
|
|
42
|
+
export { default as Toast } from "./components/toast/toast";
|
|
43
|
+
export { DataView, DataViewLayoutOptions, } from "./components/data-view/data-view";
|
|
44
|
+
export { default as SplitButton } from "./components/button/split-button";
|
|
45
|
+
export { default as SpeedDial } from "./components/button/speed-dial";
|
|
46
|
+
export { default as InputMask } from "./components/input/input-mask";
|
|
47
|
+
export { default as InputSwitch } from "./components/input/input-switch";
|
|
48
|
+
export { default as InputTextarea } from "./components/input/input-textarea";
|
|
49
|
+
export { default as Rating } from "./components/rating/rating";
|
|
50
|
+
export { default as Chips } from "./components/chips/chips";
|
|
51
|
+
export { default as Chip } from "./components/chips/chip";
|
|
52
|
+
export { default as Skeleton } from "./components/skeleton/skeleton";
|
|
53
|
+
export { default as ProgressSpinner } from "./components/spinner/spinner";
|
|
54
|
+
export { default as Chart } from "./components/chart/chart";
|
|
55
|
+
export { default as BreadCrumb } from "./components/breadcrumb/breacrumb";
|
|
56
|
+
export { default as MegaMenu } from "./components/megamenu/mega-menu";
|
|
57
|
+
export { default as Divider } from "./components/divider/divider";
|
|
58
|
+
export { default as ProgressBar } from "./components/progress-bar/progress-bar";
|
|
59
|
+
export { default as ProgressSteps } from "./components/progress-steps/progress-steps";
|
|
60
|
+
export { default as CircleProgressComponent } from "./components/progress_bar_round/circle-progress-bar";
|
|
61
|
+
export { default as SvgComponent } from "./directives/svg-component";
|
|
62
|
+
export { default as svgIcons } from "./directives/svg-icons";
|
|
63
|
+
export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions, InputNumberValueChangeEvent };
|