sccoreui 2.3.8 → 2.4.0

package/dist/assets/sccoreicons.css

@@ -991,6 +991,7 @@
     content: "\e909";
 }
 
+
 .pi-check-circle:before {
     content: "\e90a";
 }

package/dist/assets/sccoreui.css

@@ -957,8 +957,10 @@ a {
   border-radius: 8px;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
   padding: 10px 14px;
-  height: 44px;
+  height: 40px;
 }
+
+
 .p-inputgroup > .p-dropdown {
   background: #ffffff;
   height: 40px;
@@ -1009,7 +1011,14 @@ a {
   text-align: left;
   line-height: 20px;
   padding-inline-start: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.p-dropdown .p-dropdown-label.p-inputtext {
+   height: auto; 
 }
+
 .p-inputgroup > .p-dropdown > .p-dropdown-label {
   padding: 0px 0px;
   width: 3rem;
@@ -1021,7 +1030,7 @@ a {
 .p-dropdown .p-dropdown-label.p-placeholder {
   color: var(--gray-500);
   text-align: left;
-  height: 24px;
+  height: 20px;
   line-height: 20px;
   font-size: 16px;
   font-weight: 400;
@@ -1037,8 +1046,9 @@ a {
   color: #444b74;
   height: 20px;
   width: 20px;
-  padding-top: 6px;
+  padding-top: 0px;
 }
+
 .p-inputgroup > .p-dropdown .p-dropdown-trigger {
   width: 1rem;
   padding-top: 0px;
@@ -3402,14 +3412,14 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 }
 /* Error Secondary color CSS changes END */
 .p-button.p-button-link {
-  color: var(--gray-900);
+  color: var(--primary-400);
   background: transparent;
   border: transparent;
 }
 .p-button.p-button-link:enabled:hover,
 .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover {
   background: transparent;
-  color: #4338ca;
+  color: var(--primary-600);
   border-color: transparent;
 }
 .p-button.p-button-link:enabled:hover .p-button-label,
@@ -3422,11 +3432,12 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
   background: transparent;
   /* box-shadow: 0 0 0 0.2rem #C7D2FE; */
   border-color: transparent;
+  color: var(--primary-500);
 }
 .p-button.p-button-link:enabled:active,
 .p-button.p-button-link:not(button):not(a):not(.p-disabled):active {
   background: transparent;
-  color: #4338ca;
+  color: var(--primary-500);
   border-color: transparent;
 }
 
@@ -5588,7 +5599,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 }
 
 .p-divider .p-divider-content {
-  background-color: #ffffff;
+  background-color: transparent;
 }
 .p-divider.p-divider-horizontal {
   margin: 1.25rem 0;
@@ -7970,8 +7981,8 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
 
 .p-tabview .p-tabview-nav li .p-tabview-nav-link {
   transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  padding-left: 0px;
-  padding-right: 0px;
+  padding-left: 4px;
+  padding-right: 4px;
   cursor: pointer;
   font-weight: normal;
 }
@@ -8295,16 +8306,22 @@ input[type="number"]::-webkit-outer-spin-button {
   margin: -24px;
 }
 
+/* dropdown trigger positon */
+.p-dropdown-trigger[aria-expanded="true"] {
+  rotate: 180deg;
+}
 
-
+.p-dropdown-item.p-highlight{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 
 /*  tabs component clasess for changing the style */
 .tab-view-border-light .p-tabview-nav{
   border-bottom: 1px solid var(--gray-200) ;  /* adding bottom border only bottom border tabs */
 }
 
-
-
 /*some tabs responsive section these tabs are worked as responsive in all devices */
 .tab-view-bg-dark.responsive  .p-tabview-nav{
  display: flex ;
@@ -8438,6 +8455,11 @@ input[type="number"]::-webkit-outer-spin-button {
   outline-offset: 0;
   box-shadow: none;
 }
+.tab-view-border-light.no-shadow .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
 .tab-view-border-light.border .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus {
   outline: 0 none;
   outline-offset: 0;
@@ -8458,10 +8480,12 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .divider-top-bottom.p-divider-horizontal::before{
   border-top: 0px;
+  width: 0px;
 }
 
 .devider-background.p-divider-horizontal::before{
   border-top: 0px;
+  width: 0px;
 }
 
 
@@ -8504,12 +8528,13 @@ input[type="number"]::-webkit-outer-spin-button {
   border-color: var(--gray-400) !important;
 }
 .p-paginator>.p-dropdown>.p-dropdown-trigger{
-  padding-top: 0px !important;
+  padding-top: 0px;
 }
 .p-paginator>.p-dropdown{
   display: flex;
   align-items: center;
-  border: 1px solid var(--gray-400) !important;
+  border: 1px solid var(--gray-400);
+  height: 36px;
 }
 
 /* Progress siders calsses for styling the component */
@@ -8543,15 +8568,12 @@ input[type="number"]::-webkit-outer-spin-button {
 /*  Badges classes for styling the badges  */
 
 .p-dropdown-badge > .p-dropdown-label {
-  height: auto !important;
+  height: auto;
 }
 .p-dropdown-badge > .p-dropdown-trigger {
-  padding-top: 2px !important;
+  padding-top: 2px;
 }
 
-
-
-
 /*  Input components changes classes for styling the input components */
 .payment-card-input > .p-inputnumber > .p-inputtext {
   padding-left: 52px;
@@ -8582,7 +8604,7 @@ input[type="number"]::-webkit-outer-spin-button {
 .svgAnimation {
   display: inline-block;
   -webkit-animation: animation-61bdi0 1.8s linear infinite;
-  animation: animation-61bdi0 1.8s linear infinite;
+  animation: animation-61bdi0 1.3s linear infinite;
 }
 
 
@@ -8608,7 +8630,7 @@ input[type="number"]::-webkit-outer-spin-button {
   stroke-dasharray: 80px,200px;
   stroke-dashoffset: 0;
   -webkit-animation: animation-1p2h4ri 1.8s ease-in-out infinite;
-  animation: animation-1p2h4ri 1.8s ease-in-out infinite;
+  animation: animation-1p2h4ri 1.3s ease-in-out infinite;
 }
 
 @keyframes animation-1p2h4ri {
@@ -8628,7 +8650,42 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 
+.p-megamenu-start{
+  width: auto;
+ 
+}
+@media screen and (max-width:768px) {
+  .p-megamenu-start{
+  width: 100%;
+}
+}
+/* mega menu classes */
+.p-megamenu-mobile-active .megamenu-closeicon {
+  display: flex;
+}
+	
+.p-megamenu-mobile-active	.megamenu-hamburgermenu{
+		display: none;
+}
 
+.megamenu-closeicon {
+	display: none;
+}
+.megamenu-hamburgermenu {
+	display: flex;
+}
+
+
+.p-dropdown-xl.p-dropdown{
+  height: 44px;
+}
+.p-dropdown-xl .p-dropdown-label.p-placeholder{
+  height: 24px;
+}
+
+.p-dropdown-xl.p-dropdown .p-dropdown-trigger {
+  padding-top: 0px;
+}
 
 
 /* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@@ -8637,76 +8694,79 @@ input[type="number"]::-webkit-outer-spin-button {
 
 
 /* New button classes added for different Size Variations ++++++++++++++++++++++++++++ */
+.p-button.p-button-xs {
+  height: 32px;
+  line-height: 20px;
+  font-size: 14px;
+}
 
-.p-button.p-button-dual-icon {
-  width: 157px !important;
-  padding: 10px 18px;
+.p-button.p-button-sm {
+  height: 40px;
+  line-height: 20px;
   font-size: 14px;
 }
 
-.p-button.p-button-xs {
-  height: 32px !important;
-  line-height: 20px !important;
-  font-size: 14px !important;
+.p-button.p-button-md {
+  height: 44px ;
+  line-height: 24px ;
+  font-size: 16px ;
 }
-.p-button.p-button-dual-icon.p-button-xs {
-  width: 157px !important;
-  padding: 6px 14px !important;
+.p-button.p-button-lg {
+  height: 48px;
+  line-height: 24px;
+  font-size: 16px;
 }
-.p-button.p-button-icon-only.p-button-xs {
-  padding: 8px !important;
+.p-button.p-button-xl {
+  height: 60px;
+  line-height: 28px;
+  font-size: 18px;
 }
 
-.p-button.p-button-sm {
-  height: 40px !important;
-  line-height: 20px !important;
-  font-size: 14px !important;
+
+.p-button.p-button-dual-icon {
+  width: auto;
+  padding: 10px 18px;
+  font-size: 14px;
+}
+.p-button.p-button-dual-icon.p-button-xs {
+  width: auto;
+  padding: 6px 14px;
+}
+.p-button.p-button-icon-only.p-button-xs {
+  padding: 8px;
 }
 .p-button.p-button-dual-icon.p-button-sm {
-  width: 161px !important;
-  padding: 10px 16px !important;
+  width: auto;
+  padding: 10px 16px ;
 }
 .p-button.p-button-icon-only.p-button-sm {
-  padding: 10px !important;
+  padding: 10px;
 }
 
-.p-button.p-button-md {
-  height: 44px !important;
-  line-height: 24px !important;
-  font-size: 16px !important;
-}
+
 .p-button.p-button-dual-icon.p-button-md {
-  width: 175px !important;
-  padding: 10px 14px !important;
+  width: auto;
+  padding: 10px 14px;
 }
 .p-button.p-button-icon-only.p-button-md {
-  padding: 12px !important;
+  padding: 12px;
 }
 
-.p-button.p-button-lg {
-  height: 48px !important;
-  line-height: 24px !important;
-  font-size: 16px !important;
-}
 .p-button.p-button-dual-icon.p-button-lg{
-  width: 179px !important;
-  padding: 12px 20px !important;
+  width: auto;
+  padding: 12px 20px;
 }
 .p-button.p-button-icon-only.p-button-lg {
-  padding: 14px !important;
+  padding: 14px;
 }
 
-.p-button.p-button-xl {
-  height: 60px !important;
-  line-height: 28px !important;
-  font-size: 18px !important;
-}
+
 .p-button.p-button-dual-icon.p-button-xl {
-  width: 221px !important;
-  padding: 16px 28px !important;
+  width: auto;
+  padding: 16px 28px;
 }
 .p-button.p-button-icon-only.p-button-xl {
-  padding: 16px !important;
+  padding: 16px;
 }
 
 /* Social Button classes */

package/dist/assets/svg/check2.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="#132067" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/progress_bar_round/circle-progress-bar.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CircleProgressComponent = ({ height = 290, strokeWidth = 14, text = "", strokeColor = 'var(--primary-600)', strokeBgColor = 'var(--gray-300)', value = -1, textDisabled = false }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex align-items-center justify-content-center", style: { height: height, width: height } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex ", style: { width: `${height}px`, height: `${height}px`, transform: "rotate(-90deg)", position: "absolute", top: "0", zIndex: "10" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "256.92", strokeDashoffset: `${(256.92 - ((256.92 / 100) * value))}`, strokeLinecap: "round", stroke: `${strokeColor}` } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex obsolute ", style: { width: `${height}px`, height: `${height}px`, position: "absolute", transform: "rotate(-90deg)" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "256.92", strokeDashoffset: "0", strokeLinecap: "round", stroke: `${strokeBgColor}` } }) })) })), !textDisabled && (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center mr-auto ml-auto mt-auto mb-auto" }, { children: [text !== "" && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base" }, { children: text })), value !== -1 && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "text-4xl my-2" }, { children: [value, "%"] }))] }))] })));
+const CircleProgressComponent = ({ height = 290, strokeWidth = 14, text = "", strokeColor = 'var(--primary-600)', strokeBgColor = 'var(--gray-300)', value = -1, textDisabled = false, textClassName = "text-lg text-gray-700 font-normal", valueTextClassName = "text-2xl, text-gray-700 font-bold" }) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative flex align-items-center justify-content-center", style: { height: height, width: height } }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex ", style: { width: `${height}px`, height: `${height}px`, transform: "rotate(-90deg)", position: "absolute", top: "0", zIndex: "10" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "256.92", strokeDashoffset: `${(256.92 - ((256.92 / 100) * value))}`, strokeLinecap: "round", stroke: `${strokeColor}` } }) })) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ role: "progressbar", className: "flex obsolute ", style: { width: `${height}px`, height: `${height}px`, position: "absolute", transform: "rotate(-90deg)" } }, { children: (0, jsx_runtime_1.jsx)("svg", Object.assign({ viewBox: "22 22 110 110" }, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "76", cy: "76", r: "40.2", fill: "none", "stroke-width": strokeWidth, style: { strokeDasharray: "256.92", strokeDashoffset: "0", strokeLinecap: "round", stroke: `${strokeBgColor}` } }) })) })), !textDisabled && (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center mr-auto ml-auto mt-auto mb-auto" }, { children: [text !== "" && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: textClassName }, { children: text })), value !== -1 && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: valueTextClassName }, { children: [value, "%"] }))] }))] })));
 };
 exports.default = CircleProgressComponent;

package/dist/directives/svg-icons.js

@@ -838,4 +838,104 @@ exports.svgIcons = [
     <rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/>
     </svg>`,
     },
+    {
+        name: "menu-logo",
+        svg: `<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_dd_7423_12476)">
+    <g clip-path="url(#clip0_7423_12476)">
+    <rect x="3" y="2" width="32" height="32" rx="8" fill="white"/>
+    <rect x="3" y="2" width="32" height="32" rx="8" fill="url(#paint0_linear_7423_12476)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 4.03885C11.2895 4.03885 5.03885 10.2895 5.03885 18C5.03885 25.7106 11.2895 31.9612 19 31.9612C26.7106 31.9612 32.9612 25.7106 32.9612 18C32.9612 10.2895 26.7106 4.03885 19 4.03885ZM4.96118 18C4.96118 10.2466 11.2466 3.96118 19 3.96118C26.7535 3.96118 33.0389 10.2466 33.0389 18C33.0389 25.7535 26.7535 32.0389 19 32.0389C11.2466 32.0389 4.96118 25.7535 4.96118 18Z" fill="#D0D5DD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 14.0779C16.8338 14.0779 15.0777 15.834 15.0777 18.0002C15.0777 20.1665 16.8338 21.9226 19 21.9226C21.1662 21.9226 22.9223 20.1665 22.9223 18.0002C22.9223 15.834 21.1662 14.0779 19 14.0779ZM15 18.0002C15 15.7911 16.7909 14.0002 19 14.0002C21.2091 14.0002 23 15.7911 23 18.0002C23 20.2094 21.2091 22.0002 19 22.0002C16.7909 22.0002 15 20.2094 15 18.0002Z" fill="#D0D5DD"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M19 15.3201C17.52 15.3201 16.3203 16.5198 16.3203 17.9997C16.3203 19.4796 17.52 20.6793 19 20.6793C20.4799 20.6793 21.6796 19.4796 21.6796 17.9997C21.6796 16.5198 20.4799 15.3201 19 15.3201ZM16.2427 17.9997C16.2427 16.4769 17.4772 15.2424 19 15.2424C20.5228 15.2424 21.7572 16.4769 21.7572 17.9997C21.7572 19.5225 20.5228 20.757 19 20.757C17.4772 20.757 16.2427 19.5225 16.2427 17.9997Z" fill="#D0D5DD"/>
+    <path d="M18.9612 2H19.0389V34H18.9612V2Z" fill="#D0D5DD"/>
+    <path d="M35 17.9609L35 18.0386L3 18.0386L3 17.9609L35 17.9609Z" fill="#D0D5DD"/>
+    <path d="M29.6021 2H29.6797V34H29.6021V2Z" fill="#D0D5DD"/>
+    <path d="M13.6409 2H13.7185V34H13.6409V2Z" fill="#D0D5DD"/>
+    <path d="M24.2815 2H24.3592V34H24.2815V2Z" fill="#D0D5DD"/>
+    <path d="M8.32031 2H8.39798V34H8.32031V2Z" fill="#D0D5DD"/>
+    <path d="M35 28.6016L35 28.6792L3 28.6792L3 28.6016L35 28.6016Z" fill="#D0D5DD"/>
+    <path d="M35 12.6406L35 12.7183L3 12.7183L3 12.6406L35 12.6406Z" fill="#D0D5DD"/>
+    <path d="M35 23.2812L35 23.3589L3 23.3589L3 23.2812L35 23.2812Z" fill="#D0D5DD"/>
+    <path d="M35 7.32031L35 7.39798L3 7.39798L3 7.32031L35 7.32031Z" fill="#D0D5DD"/>
+    <g filter="url(#filter1_dd_7423_12476)">
+    <circle cx="19" cy="18" r="8" fill="url(#paint1_linear_7423_12476)"/>
+    </g>
+    <g filter="url(#filter2_b_7423_12476)">
+    <path d="M3 18H35V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V18Z" fill="white" fill-opacity="0.2"/>
+    </g>
+    </g>
+    <rect x="3.1" y="2.1" width="31.8" height="31.8" rx="7.9" stroke="#D0D5DD" stroke-width="0.2"/>
+    </g>
+    <defs>
+    <filter id="filter0_dd_7423_12476" x="0" y="0" width="38" height="38" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="1"/>
+    <feGaussianBlur stdDeviation="1"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7423_12476"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="1"/>
+    <feGaussianBlur stdDeviation="1.5"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
+    <feBlend mode="normal" in2="effect1_dropShadow_7423_12476" result="effect2_dropShadow_7423_12476"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7423_12476" result="shape"/>
+    </filter>
+    <filter id="filter1_dd_7423_12476" x="8" y="8" width="22" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="1"/>
+    <feGaussianBlur stdDeviation="1"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.06 0"/>
+    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7423_12476"/>
+    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+    <feOffset dy="1"/>
+    <feGaussianBlur stdDeviation="1.5"/>
+    <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.1 0"/>
+    <feBlend mode="normal" in2="effect1_dropShadow_7423_12476" result="effect2_dropShadow_7423_12476"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7423_12476" result="shape"/>
+    </filter>
+    <filter id="filter2_b_7423_12476" x="-2" y="13" width="42" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feGaussianBlur in="BackgroundImageFix" stdDeviation="2.5"/>
+    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_7423_12476"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_7423_12476" result="shape"/>
+    </filter>
+    <linearGradient id="paint0_linear_7423_12476" x1="19" y1="2" x2="19" y2="34" gradientUnits="userSpaceOnUse">
+    <stop stop-color="white"/>
+    <stop offset="1" stop-color="#D0D5DD"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_7423_12476" x1="15" y1="26" x2="23" y2="10" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#53389E"/>
+    <stop offset="1" stop-color="#6941C6"/>
+    </linearGradient>
+    <clipPath id="clip0_7423_12476">
+    <rect x="3" y="2" width="32" height="32" rx="8" fill="white"/>
+    </clipPath>
+    </defs>
+    </svg>
+    `,
+    },
+    {
+        name: "hamburger-menu",
+        svg: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11 20H29M11 14H29M11 26H29" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    `,
+    },
+    {
+        name: "close-icon",
+        svg: `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M26 14L14 26M14 14L26 26" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    `,
+    },
+    {
+        name: "dropdown-panel-check",
+        svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="#132067" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    `,
+    },
 ];

package/dist/pages/breadcrumb/breadcrumb.js

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

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 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 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 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 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 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 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 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 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.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 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 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 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 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 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 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 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 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.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" })] }))] }))] }))] }))] }));
+    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"] }))] })) }))] }))] }))] }));
 };
 exports.default = ButtonComponent;

package/dist/pages/dropdown/dropdown-component.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const dropdown_1 = require("primereact/dropdown");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const react_1 = require("react");
+const svg_component_2 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const DropdownComponent = () => {
     const [selectedValue, setSelectedValue] = (0, react_1.useState)(null);
     // Dropdown options
@@ -20,9 +21,10 @@ const DropdownComponent = () => {
     const handleDropdownChange = (e) => {
         setSelectedValue(e.value);
     };
+    console.log(selectedValue);
     // Item Template to display the options in the dropdown pannel
     const itemTemplate = (option, isIcon) => {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })), selectedValue && selectedValue.name === option.name && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-primary-600" }))] })));
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between align-items-center w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-gray-900 text-lg" }, { children: option.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-normal text-gray-600 text-lg" }, { children: option.at }))] })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.name === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name) && (0, jsx_runtime_1.jsx)(svg_component_2.default, { iconName: "dropdown-panel-check" }) })] })));
     };
     // Value Template to display value in the dropdown after selecting an option from the dropdown.
     const selectedOptionTemplate = (option, isIcon, props) => {
@@ -31,6 +33,6 @@ const DropdownComponent = () => {
         }
         return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex gap-2" }, { children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", { children: props.placeholder })] })));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Dropdown" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, true, props), placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, true) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-invalid", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem p-error mt-2" }, { children: "This is an error message." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { disabled: true, onChange: handleDropdownChange, options: members, optionLabel: "name", placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Dropdown" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-dropdown-xl flex align-items-center pp-check", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, true, props), placeholder: "Select team member", className: "w-20rem p-dropdown-md flex align-items-center", itemTemplate: (options) => itemTemplate(options, true) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-invalid flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem p-error mt-2" }, { children: "This is an error message." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "card flex flex-column justify-content-between ml-2" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-base font-medium text-gray-700 mb-1" }, { children: "Team member" })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { disabled: true, onChange: handleDropdownChange, options: members, optionLabel: "name", placeholder: "Select team member", className: "w-20rem flex align-items-center", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-normal text-base h-1rem text-gray-600 mt-2" }, { children: "This is a hint text to help user." }))] }))] }))] }));
 };
 exports.default = DropdownComponent;

package/dist/pages/home.js

@@ -32,7 +32,8 @@ const file_upload_1 = tslib_1.__importDefault(require("./file-upload/file-upload
 const table_1 = tslib_1.__importDefault(require("./tabels/table"));
 const slideout_menus_1 = tslib_1.__importDefault(require("./slideout-menus/slideout-menus"));
 const content_dividers_1 = tslib_1.__importDefault(require("./content-dividers/content-dividers"));
+const mega_menu_1 = tslib_1.__importDefault(require("./mega-mennu/mega-menu"));
 const Home = () => {
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button", element: (0, jsx_runtime_1.jsx)(button_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button-group", element: (0, jsx_runtime_1.jsx)(button_group_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slider", element: (0, jsx_runtime_1.jsx)(slider_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/charts", element: (0, jsx_runtime_1.jsx)(chart_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/shadow", element: (0, jsx_runtime_1.jsx)(shadows_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/pagination", element: (0, jsx_runtime_1.jsx)(pagination_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-steps", element: (0, jsx_runtime_1.jsx)(progress_steps_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tabs", element: (0, jsx_runtime_1.jsx)(tabs_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tables", element: (0, jsx_runtime_1.jsx)(table_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "breadcrumbs", element: (0, jsx_runtime_1.jsx)(breadcrumb_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/date-picker", element: (0, jsx_runtime_1.jsx)(date_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/file-upload", element: (0, jsx_runtime_1.jsx)(file_upload_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/loader-indicator", element: (0, jsx_runtime_1.jsx)(loader_indicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slideout-menus", element: (0, jsx_runtime_1.jsx)(slideout_menus_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/content-dividers", element: (0, jsx_runtime_1.jsx)(content_dividers_1.default, {}) })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toast", element: (0, jsx_runtime_1.jsx)(toast_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tooltip", element: (0, jsx_runtime_1.jsx)(tooltip_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/badges", element: (0, jsx_runtime_1.jsx)(badge_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox", element: (0, jsx_runtime_1.jsx)(checkbox_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/checkbox-group", element: (0, jsx_runtime_1.jsx)(checkbox_group_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/radio-button", element: (0, jsx_runtime_1.jsx)(radio_button_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button", element: (0, jsx_runtime_1.jsx)(button_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/button-group", element: (0, jsx_runtime_1.jsx)(button_group_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tags", element: (0, jsx_runtime_1.jsx)(tags_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/toggle-switch", element: (0, jsx_runtime_1.jsx)(toggle_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-bar", element: (0, jsx_runtime_1.jsx)(progress_bar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/avatar", element: (0, jsx_runtime_1.jsx)(avatar_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/flex", element: (0, jsx_runtime_1.jsx)(flex_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slider", element: (0, jsx_runtime_1.jsx)(slider_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/charts", element: (0, jsx_runtime_1.jsx)(chart_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/shadow", element: (0, jsx_runtime_1.jsx)(shadows_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/pagination", element: (0, jsx_runtime_1.jsx)(pagination_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/progress-steps", element: (0, jsx_runtime_1.jsx)(progress_steps_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tabs", element: (0, jsx_runtime_1.jsx)(tabs_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/tables", element: (0, jsx_runtime_1.jsx)(table_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/breadcrumbs", element: (0, jsx_runtime_1.jsx)(breadcrumb_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/date-picker", element: (0, jsx_runtime_1.jsx)(date_picker_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/file-upload", element: (0, jsx_runtime_1.jsx)(file_upload_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/loader-indicator", element: (0, jsx_runtime_1.jsx)(loader_indicator_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/slideout-menus", element: (0, jsx_runtime_1.jsx)(slideout_menus_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/content-dividers", element: (0, jsx_runtime_1.jsx)(content_dividers_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/mega-menu", element: (0, jsx_runtime_1.jsx)(mega_menu_1.default, {}) })] }) }));
 };
 exports.default = Home;

package/dist/pages/input/input-text.js

@@ -60,7 +60,10 @@ const InputComponent = () => {
     };
     // dropdown for phone number input component with image showing
     const countryOptionTemplate = (item) => {
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: item.name, src: item.img }) })));
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between w-full" }, { children: [(0, jsx_runtime_1.jsx)("img", { alt: item.name, src: item.img }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item.name === selectedCountry.name && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) })] })));
+    };
+    const phoneNumberItemTemplate = (item) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center w-full justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900" }, { children: item.name })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item.name === selectedCurrency.name && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) })] })));
     };
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column h-full w-full" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid px-7 py-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "email", className: "font-medium text-gray-700 text-base mb-1" }, { children: "Email" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "email", "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900 ", onChange: (e) => {
                                                         setEmailValue(e.target.value);
@@ -88,15 +91,15 @@ const InputComponent = () => {
                                                         setCardNumber(e.value);
                                                     }, "aria-describedby": "username-help", placeholder: "Enter card number", className: "w-full p-invalid text-lg font-normal  card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid card number." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
                                                                 setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", itemTemplate: phoneNumberItemTemplate, placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
                                                                 setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full   text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter sale amount", className: "w-full   text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", itemTemplate: phoneNumberItemTemplate, placeholder: "Select a City", className: "w-5rem flex px-3 py-2 border-left-none align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Sale amount" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5 p-input-icon-left dollar-icon-class p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "dollar-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
                                                                 setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Sale amount", className: "w-full p-invalid  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-left-none p-invalid flex align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid amount." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                            }, "aria-describedby": "username-help", placeholder: "Sale amount", className: "w-full p-invalid  text-lg border-noround-right font-normal card-number text-gray-500 hover:text-gray-900" })] })), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, itemTemplate: phoneNumberItemTemplate, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-left-none p-invalid flex align-items-center" })] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal p-error mt-1" }, { children: "Enter valid amount." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, itemTemplate: phoneNumberItemTemplate, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
                                                                 setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-disabled w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", itemTemplate: phoneNumberItemTemplate, placeholder: "Select a City", className: "w-5rem px-3 py-2 flex border-right-none align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
                                                                 setCardNumber(e.value);
-                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix " }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
+                                                            }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full  text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base font-normal text-gray-500 mt-1" }, { children: "This is a hint text to help user." }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup p-invalid w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCurrency, onChange: (e) => setSelectedCurrency(e.value), options: currencies, optionLabel: "name", itemTemplate: phoneNumberItemTemplate, placeholder: "Select a City", className: "w-5rem p-invalid px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix " }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "alert-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onChange: (e) => {
                                                                 setCardNumber(e.value);
                                                             }, "aria-describedby": "username-help", placeholder: "Enter phone number", className: "w-full p-invalid text-lg border-noround-left font-normal  text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsx)("small", Object.assign({ id: "username-help", className: "text-base p-error font-normal  mt-1" }, { children: "Enter valid phone number." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column col-6 md:col-4 lg:col-3 px-7" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-5 " }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Amount", className: "font-medium text-base mb-1" }, { children: "Phone number" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCountry, onChange: (e) => setSelectedCountry(e.value), options: countries, optionLabel: "name", placeholder: "Select a Country", valueTemplate: selectedCountryTemplate, itemTemplate: countryOptionTemplate, className: "w-5rem  px-3 py-2 border-right-none flex align-items-center" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " z-5  p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, { value: cardNumber, id: "Amount", onValueChange: (e) => {
                                                                 setCardNumber(e.value);

package/dist/pages/mega-mennu/mega-menu.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const megamenu_1 = require("primereact/megamenu");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const button_1 = require("primereact/button");
+const HeaderComponent = () => {
+    const items = [
+        {
+            label: "Home",
+        },
+        {
+            label: "Products",
+            items: [
+                [
+                    {
+                        label: "Products",
+                        items: [
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
+                            },
+                        ],
+                    },
+                ],
+            ],
+        },
+        {
+            label: "Resources",
+            items: [
+                [
+                    {
+                        label: "Resources",
+                        items: [
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8 " }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "blog-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Blogs" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "The latest industry news, updates and info." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "customer-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Customer Stories" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Learn how our customers are making big changes." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "tutorials-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Video tutorials" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "Get up and running on new features and techniques.." }))] }))] }))),
+                            },
+                            {
+                                template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-row align-items-start gap-5 ml-8" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "documentation-icon" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column mb-2" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-semibold text-gray-900" }, { children: "Documentation" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0 font-normal text-gray-600" }, { children: "All the boring stuff that you (hopefully won\u2019t) need." }))] }))] }))),
+                            },
+                        ],
+                    },
+                ],
+            ],
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "#", className: "m-0 text-gray-600 w-6" }, { children: "Aboutus" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Support" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Press" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Contact" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Carrer" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Sitemap" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "md:hidden m-0 w-full flex" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Legal" })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: '#', className: "m-0 text-gray-600 w-6" }, { children: "Cookie settings" }))] }))),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "md:hidden m-0 bg-primary-500 w-full " })),
+        },
+        {
+            template: ((0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "md:hidden m-0 border-500 bg-transparent text-gray-500 w-full border-gray-300 shadow-md" })),
+        },
+    ];
+    const start = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 w-full" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "menu-logo" }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "text-gray-900 font-bold" }, { children: "Untitled UI" }))] })));
+    const end = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "hidden md:flex gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Log in", className: "bg-transparent text-gray-500 border-none" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Sign up", className: "bg-primary-500 " })] })));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(megamenu_1.MegaMenu, { model: items, orientation: "horizontal", start: start, end: end, menuIcon: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-closeicon absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-icon" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "megamenu-hamburgermenu absolute" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "hamburger-menu" }) }))] }), breakpoint: "770px", className: "w-full", pt: {} }) }));
+};
+exports.default = HeaderComponent;

package/dist/pages/progress-bar/progress-bar.js

@@ -22,6 +22,6 @@ const ProgressBarComponent = () => {
                                             left: `${value}%`,
                                             transition: "left 1s ease-in-out",
                                             transform: "translate(-50%, -50%)",
-                                        }, className: "p-progress-value bg-white shadow-3 h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value bg-white shadow-3 py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
+                                        }, className: "p-progress-value bg-white shadow-3 h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value bg-white shadow-3 py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { textClassName: "text-md text-green-500", valueTextClassName: "text-green text-5xl", text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 15, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
 };
 exports.default = ProgressBarComponent;

package/dist/pages/tabs/tabs.js

@@ -4,6 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const tabview_1 = require("primereact/tabview");
 require("./tabs.scss");
 const TabsComponent = () => {
-    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: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light border" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand border" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark responsive flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box responsive flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
+    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: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light no-shadow" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand no-shadow" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark responsive flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box responsive flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
 };
 exports.default = TabsComponent;

package/dist/types/components/progress_bar_round/circle-progress-bar.d.ts

@@ -6,6 +6,8 @@ interface SVGProps {
     value?: number;
     text?: string;
     textDisabled?: boolean;
+    textClassName?: string;
+    valueTextClassName?: string;
 }
-declare const CircleProgressComponent: ({ height, strokeWidth, text, strokeColor, strokeBgColor, value, textDisabled }: SVGProps) => import("react/jsx-runtime").JSX.Element;
+declare const CircleProgressComponent: ({ height, strokeWidth, text, strokeColor, strokeBgColor, value, textDisabled, textClassName, valueTextClassName }: SVGProps) => import("react/jsx-runtime").JSX.Element;
 export default CircleProgressComponent;

package/dist/types/pages/mega-mennu/mega-menu.d.ts

@@ -0,0 +1,2 @@
+declare const HeaderComponent: () => import("react/jsx-runtime").JSX.Element;
+export default HeaderComponent;

package/package.json

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