sccoreui 2.2.8 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/App.scss +13 -15
  2. package/dist/assets/flex.css +845 -404
  3. package/dist/assets/sccoreui.css +466 -242
  4. package/dist/assets/theme.css +2 -2
  5. package/dist/components/breadcrumb/breacrumb.js +4 -0
  6. package/dist/components/sliders/sliders.js +4 -0
  7. package/dist/directives/svg-icons.js +170 -0
  8. package/dist/index.js +2 -2
  9. package/dist/pages/avatar/avatar.js +13 -115
  10. package/dist/pages/breadcrumb/breadcrumb.js +12 -0
  11. package/dist/pages/button/button.js +10 -0
  12. package/dist/pages/button-group/button-group.js +10 -0
  13. package/dist/pages/chart/chart.js +257 -0
  14. package/dist/pages/home.js +10 -1
  15. package/dist/pages/paginator/pagination.js +123 -0
  16. package/dist/pages/progress-steps/progress-steps.js +44 -0
  17. package/dist/pages/shadows/shadows.js +7 -0
  18. package/dist/pages/sliders/slider.js +39 -0
  19. package/dist/pages/tabs/tabs.js +9 -0
  20. package/dist/pages/toggle/toggle.js +1 -1
  21. package/dist/pages/tooltip/tooltip.js +1 -1
  22. package/dist/types/components/breadcrumb/breacrumb.d.ts +2 -0
  23. package/dist/types/components/sliders/sliders.d.ts +2 -0
  24. package/dist/types/index.d.ts +1 -1
  25. package/dist/types/pages/breadcrumb/breadcrumb.d.ts +2 -0
  26. package/dist/types/pages/button/button.d.ts +2 -0
  27. package/dist/types/pages/button-group/button-group.d.ts +2 -0
  28. package/dist/types/pages/chart/chart.d.ts +2 -0
  29. package/dist/types/pages/paginator/pagination.d.ts +2 -0
  30. package/dist/types/pages/progress-steps/progress-steps.d.ts +2 -0
  31. package/dist/types/pages/shadows/shadows.d.ts +2 -0
  32. package/dist/types/pages/sliders/slider.d.ts +1 -0
  33. package/dist/types/pages/tabs/tabs.d.ts +3 -0
  34. package/package.json +1 -1
package/dist/assets/theme.css CHANGED
@@ -5585,9 +5585,9 @@ input.p-dropdown-label {
5585
5585
  }
5586
5586
 
5587
5587
  .p-tabview-title {
5588
- line-height: 1;
5588
+ line-height: 20px;
5589
5589
  white-space: nowrap;
5590
- font-weight: 500;
5590
+ font-weight: 600;
5591
5591
  }
5592
5592
 
5593
5593
  .p-tabview-nav-btn {
package/dist/components/breadcrumb/breacrumb.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const breadcrumb_1 = require("primereact/breadcrumb");
4
+ exports.default = breadcrumb_1.BreadCrumb;
package/dist/components/sliders/sliders.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const slider_1 = require("primereact/slider");
4
+ exports.default = slider_1.Slider;
package/dist/directives/svg-icons.js CHANGED
@@ -210,6 +210,20 @@ exports.svgIcons = [
210
210
  svg: `<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
211
211
  <circle cx="3" cy="3" r="3" fill="#667085"/>
212
212
  </svg>
213
+ `,
214
+ },
215
+ {
216
+ name: "arrow-left-gray-700",
217
+ svg: `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
218
+ <path d="M12.8333 7.00002H1.16663M1.16663 7.00002L6.99996 12.8334M1.16663 7.00002L6.99996 1.16669" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
219
+ </svg>
220
+ `,
221
+ },
222
+ {
223
+ name: "arrow-right-gray-700",
224
+ svg: `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
225
+ <path d="M1.16675 7.00002H12.8334M12.8334 7.00002L7.00008 1.16669M12.8334 7.00002L7.00008 12.8334" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
226
+ </svg>
213
227
  `,
214
228
  },
215
229
  {
@@ -549,4 +563,160 @@ exports.svgIcons = [
549
563
  </svg>
550
564
  `,
551
565
  },
566
+ {
567
+ name: "step-checked",
568
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
569
+ <g clip-path="url(#clip0_6908_8633)">
570
+ <rect width="24" height="24" rx="12" fill="#E2E5FA"/>
571
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z" fill="#132067"/>
572
+ </g>
573
+ <defs>
574
+ <clipPath id="clip0_6908_8633">
575
+ <rect width="24" height="24" rx="12" fill="white"/>
576
+ </clipPath>
577
+ </defs>
578
+ </svg>`,
579
+ },
580
+ {
581
+ name: "step-checked-outline",
582
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
583
+ <g clip-path="url(#clip0_6908_9329)">
584
+ <rect width="24" height="24" rx="12" fill="#E2E5FA"/>
585
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z" fill="#132067"/>
586
+ <rect x="0.75" y="0.75" width="22.5" height="22.5" rx="11.25" stroke="#132067" stroke-width="1.5"/>
587
+ </g>
588
+ <defs>
589
+ <clipPath id="clip0_6908_9329">
590
+ <rect width="24" height="24" rx="12" fill="white"/>
591
+ </clipPath>
592
+ </defs>
593
+ </svg>`,
594
+ },
595
+ {
596
+ name: "step-current",
597
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
598
+ <rect width="24" height="24" rx="12" fill="#E2E5FA"/>
599
+ <circle cx="12" cy="12" r="4" fill="#132067"/>
600
+ </svg>`,
601
+ },
602
+ {
603
+ name: "step-current-outline",
604
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
605
+ <rect x="0.75" y="0.75" width="22.5" height="22.5" rx="11.25" fill="#E2E5FA"/>
606
+ <circle cx="12" cy="12" r="4" fill="#132067"/>
607
+ <rect x="0.75" y="0.75" width="22.5" height="22.5" rx="11.25" stroke="#132067" stroke-width="1.5"/>
608
+ </svg>`,
609
+ },
610
+ {
611
+ name: "step-unvisited",
612
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
613
+ <g clip-path="url(#clip0_6908_8485)">
614
+ <rect width="24" height="24" rx="12" fill="#F9FAFB"/>
615
+ <circle cx="12" cy="12" r="4" fill="#EAECF0"/>
616
+ </g>
617
+ <defs>
618
+ <clipPath id="clip0_6908_8485">
619
+ <rect width="24" height="24" rx="12" fill="white"/>
620
+ </clipPath>
621
+ </defs>
622
+ </svg>`,
623
+ },
624
+ {
625
+ name: "step-unvisited-outline",
626
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
627
+ <g clip-path="url(#clip0_6908_10368)">
628
+ <rect width="24" height="24" rx="12" fill="white"/>
629
+ <circle cx="12" cy="12" r="4" fill="#EAECF0"/>
630
+ <rect x="0.75" y="0.75" width="22.5" height="22.5" rx="11.25" stroke="#EAECF0" stroke-width="1.5"/>
631
+ </g>
632
+ <defs>
633
+ <clipPath id="clip0_6908_10368">
634
+ <rect width="24" height="24" rx="12" fill="white"/>
635
+ </clipPath>
636
+ </defs>
637
+ </svg>`,
638
+ },
639
+ {
640
+ name: "button-ring-white",
641
+ svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
642
+ <path d="M9.99999 18.3334C14.6024 18.3334 18.3333 14.6024 18.3333 10C18.3333 5.39765 14.6024 1.66669 9.99999 1.66669C5.39762 1.66669 1.66666 5.39765 1.66666 10C1.66666 14.6024 5.39762 18.3334 9.99999 18.3334Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
643
+ </svg>`,
644
+ },
645
+ {
646
+ name: "button-ring-gray",
647
+ svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
648
+ <path d="M9.99999 18.3334C14.6024 18.3334 18.3333 14.6024 18.3333 10C18.3333 5.39765 14.6024 1.66669 9.99999 1.66669C5.39762 1.66669 1.66666 5.39765 1.66666 10C1.66666 14.6024 5.39762 18.3334 9.99999 18.3334Z" stroke="var(--gray-700)" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
649
+ </svg>`,
650
+ },
651
+ {
652
+ name: "button-ring-primary",
653
+ svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
654
+ <path d="M9.99999 18.3334C14.6024 18.3334 18.3333 14.6024 18.3333 10C18.3333 5.39765 14.6024 1.66669 9.99999 1.66669C5.39762 1.66669 1.66666 5.39765 1.66666 10C1.66666 14.6024 5.39762 18.3334 9.99999 18.3334Z" stroke="var(--primary-500)" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
655
+ </svg>`,
656
+ },
657
+ {
658
+ name: "button-ring-red",
659
+ svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
660
+ <path d="M9.99999 18.3334C14.6024 18.3334 18.3333 14.6024 18.3333 10C18.3333 5.39765 14.6024 1.66669 9.99999 1.66669C5.39762 1.66669 1.66666 5.39765 1.66666 10C1.66666 14.6024 5.39762 18.3334 9.99999 18.3334Z" stroke="var(--red-700)" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
661
+ </svg>`,
662
+ },
663
+ {
664
+ name: "google-logo",
665
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
666
+ <g clip-path="url(#clip0_1256_130935)">
667
+ <path d="M23.766 12.2764C23.766 11.4607 23.6999 10.6406 23.5588 9.83807H12.24V14.4591H18.7217C18.4528 15.9494 17.5885 17.2678 16.323 18.1056V21.1039H20.19C22.4608 19.0139 23.766 15.9274 23.766 12.2764Z" fill="#4285F4"/>
668
+ <path d="M12.2401 24.0008C15.4766 24.0008 18.2059 22.9382 20.1945 21.1039L16.3276 18.1055C15.2517 18.8375 13.8627 19.252 12.2445 19.252C9.11388 19.252 6.45946 17.1399 5.50705 14.3003H1.5166V17.3912C3.55371 21.4434 7.7029 24.0008 12.2401 24.0008Z" fill="#34A853"/>
669
+ <path d="M5.50253 14.3003C4.99987 12.8099 4.99987 11.1961 5.50253 9.70575V6.61481H1.51649C-0.18551 10.0056 -0.18551 14.0004 1.51649 17.3912L5.50253 14.3003Z" fill="#FBBC04"/>
670
+ <path d="M12.2401 4.74966C13.9509 4.7232 15.6044 5.36697 16.8434 6.54867L20.2695 3.12262C18.1001 1.0855 15.2208 -0.034466 12.2401 0.000808666C7.7029 0.000808666 3.55371 2.55822 1.5166 6.61481L5.50264 9.70575C6.45064 6.86173 9.10947 4.74966 12.2401 4.74966Z" fill="#EA4335"/>
671
+ </g>
672
+ <defs>
673
+ <clipPath id="clip0_1256_130935">
674
+ <rect width="24" height="24" fill="white"/>
675
+ </clipPath>
676
+ </defs>
677
+ </svg>`,
678
+ },
679
+ {
680
+ name: "facebook-logo",
681
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
682
+ <g clip-path="url(#clip0_1256_130925)">
683
+ <path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.3882 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9701 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.34 7.875 13.875 8.80008 13.875 9.75V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="white"/>
684
+ </g>
685
+ <defs>
686
+ <clipPath id="clip0_1256_130925">
687
+ <rect width="24" height="24" fill="white"/>
688
+ </clipPath>
689
+ </defs>
690
+ </svg>`,
691
+ },
692
+ {
693
+ name: "apple-logo",
694
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
695
+ <path d="M20.8426 17.1449C20.5099 17.9135 20.1161 18.6211 19.6598 19.2715C19.0378 20.1583 18.5286 20.7721 18.1361 21.113C17.5277 21.6724 16.8759 21.959 16.1779 21.9753C15.6768 21.9753 15.0725 21.8327 14.3691 21.5434C13.6633 21.2555 13.0148 21.113 12.4217 21.113C11.7998 21.113 11.1327 21.2555 10.4193 21.5434C9.70469 21.8327 9.12904 21.9834 8.68892 21.9984C8.01957 22.0269 7.35239 21.7322 6.68644 21.113C6.26139 20.7422 5.72974 20.1067 5.09285 19.2063C4.40951 18.2449 3.84772 17.13 3.4076 15.8589C2.93624 14.486 2.69995 13.1565 2.69995 11.8694C2.69995 10.3951 3.01853 9.12345 3.65665 8.05784C4.15815 7.20191 4.82533 6.52672 5.66035 6.03105C6.49537 5.53539 7.39761 5.2828 8.36925 5.26664C8.9009 5.26664 9.59809 5.43109 10.4645 5.75429C11.3284 6.07858 11.8832 6.24303 12.1264 6.24303C12.3082 6.24303 12.9245 6.05074 13.9692 5.66738C14.9571 5.31186 15.7909 5.16466 16.474 5.22264C18.3249 5.37202 19.7155 6.10167 20.6402 7.41619C18.9849 8.4192 18.166 9.82403 18.1823 11.6262C18.1972 13.03 18.7065 14.1981 19.7073 15.1256C20.1609 15.5561 20.6674 15.8888 21.231 16.1251C21.1087 16.4795 20.9797 16.819 20.8426 17.1449ZM16.5975 0.440369C16.5975 1.54062 16.1956 2.56792 15.3944 3.51878C14.4275 4.64917 13.258 5.30236 11.9898 5.19929C11.9736 5.06729 11.9642 4.92837 11.9642 4.78239C11.9642 3.72615 12.424 2.59576 13.2406 1.67152C13.6483 1.20356 14.1667 0.814453 14.7955 0.504058C15.4229 0.198295 16.0163 0.0292007 16.5744 0.000244141C16.5907 0.147331 16.5975 0.294426 16.5975 0.440355V0.440369Z" fill="white"/>
696
+ </svg>`,
697
+ },
698
+ {
699
+ name: "twitter-logo",
700
+ svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
701
+ <path d="M7.55016 21.75C16.6045 21.75 21.5583 14.2467 21.5583 7.74186C21.5583 7.53092 21.5536 7.3153 21.5442 7.10436C22.5079 6.40746 23.3395 5.54425 24 4.5553C23.1025 4.9546 22.1496 5.21538 21.1739 5.32874C22.2013 4.71291 22.9705 3.74547 23.3391 2.60577C22.3726 3.17856 21.3156 3.58261 20.2134 3.80061C19.4708 3.01156 18.489 2.48912 17.4197 2.31405C16.3504 2.13899 15.2532 2.32105 14.2977 2.8321C13.3423 3.34314 12.5818 4.15471 12.1338 5.14131C11.6859 6.12792 11.5754 7.23462 11.8195 8.2903C9.86249 8.19209 7.94794 7.6837 6.19998 6.7981C4.45203 5.91249 2.90969 4.66944 1.67297 3.14952C1.0444 4.23324 0.852057 5.51565 1.13503 6.73609C1.418 7.95654 2.15506 9.02345 3.19641 9.71999C2.41463 9.69517 1.64998 9.48468 0.965625 9.10592V9.16686C0.964925 10.3041 1.3581 11.4066 2.07831 12.2868C2.79852 13.167 3.80132 13.7706 4.91625 13.995C4.19206 14.1931 3.43198 14.222 2.69484 14.0794C3.00945 15.0574 3.62157 15.9129 4.44577 16.5263C5.26997 17.1398 6.26512 17.4806 7.29234 17.5012C5.54842 18.8711 3.39417 19.6141 1.17656 19.6106C0.783287 19.61 0.390399 19.5859 0 19.5384C2.25286 20.9837 4.87353 21.7514 7.55016 21.75Z" fill="white"/>
702
+ </svg>`,
703
+ },
704
+ {
705
+ name: "home-line-gray-500",
706
+ svg: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
707
+ <path d="M5.66667 13.1667H12.3333M8.18141 1.30333L2.52949 5.69927C2.15168 5.99312 1.96278 6.14005 1.82669 6.32405C1.70614 6.48704 1.61633 6.67065 1.56169 6.86588C1.5 7.08627 1.5 7.32558 1.5 7.80421V13.8333C1.5 14.7667 1.5 15.2335 1.68166 15.59C1.84144 15.9036 2.09641 16.1585 2.41002 16.3183C2.76654 16.5 3.23325 16.5 4.16667 16.5H13.8333C14.7668 16.5 15.2335 16.5 15.59 16.3183C15.9036 16.1585 16.1586 15.9036 16.3183 15.59C16.5 15.2335 16.5 14.7667 16.5 13.8333V7.80421C16.5 7.32558 16.5 7.08627 16.4383 6.86588C16.3837 6.67065 16.2939 6.48704 16.1733 6.32405C16.0372 6.14005 15.8483 5.99312 15.4705 5.69927L9.81859 1.30333C9.52582 1.07562 9.37943 0.961766 9.21779 0.918001C9.07516 0.879384 8.92484 0.879384 8.78221 0.918001C8.62057 0.961766 8.47418 1.07562 8.18141 1.30333Z" stroke="#667085" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
708
+ </svg>`,
709
+ },
710
+ {
711
+ name: "chevron-right-gray-300",
712
+ svg: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
713
+ <path d="M6 12L10 8L6 4" stroke="#D0D5DD" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
714
+ </svg>`,
715
+ },
716
+ {
717
+ name: "slash-divider-gray-300",
718
+ svg: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
719
+ <path d="M5.83325 18.3334L14.1666 1.66669" stroke="#D0D5DD" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
720
+ </svg>`,
721
+ },
552
722
  ];
package/dist/index.js CHANGED
@@ -83,8 +83,8 @@ Object.defineProperty(exports, "DataView", { enumerable: true, get: function ()
83
83
  Object.defineProperty(exports, "DataViewLayoutOptions", { enumerable: true, get: function () { return data_view_1.DataViewLayoutOptions; } });
84
84
  var split_button_1 = require("./components/button/split-button");
85
85
  Object.defineProperty(exports, "SplitButton", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_1).default; } });
86
- var split_button_2 = require("./components/button/split-button");
87
- Object.defineProperty(exports, "SpeedDial", { enumerable: true, get: function () { return tslib_1.__importDefault(split_button_2).default; } });
86
+ var speed_dial_1 = require("./components/button/speed-dial");
87
+ Object.defineProperty(exports, "SpeedDial", { enumerable: true, get: function () { return tslib_1.__importDefault(speed_dial_1).default; } });
88
88
  var input_mask_1 = require("./components/input/input-mask");
89
89
  Object.defineProperty(exports, "InputMask", { enumerable: true, get: function () { return tslib_1.__importDefault(input_mask_1).default; } });
90
90
  var input_switch_1 = require("./components/input/input-switch");
package/dist/pages/avatar/avatar.js CHANGED
@@ -10,143 +10,41 @@ const avatar_1 = require("primereact/avatar");
10
10
  const avatargroup_1 = require("primereact/avatargroup");
11
11
  const profile_square_image_png_1 = tslib_1.__importDefault(require("../../assets/images/profile-square-image.png"));
12
12
  const AvatarComponent = () => {
13
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xs border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle border-1 border-white" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xs" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-sm" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-md" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xl" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-2xl" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xs" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-sm" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-md" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-lg" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xl" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-2lx" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-3xl" }), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-4xl" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 justify-content-between gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xs border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xs border-circle absolute border-1 border-white", style: {
13
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4" }, { children: "Tags" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white", style: {
14
14
  position: "absolute",
15
15
  right: "0",
16
16
  bottom: "0",
17
- } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
18
- position: "absolute",
19
- right: "0",
20
- bottom: "0",
21
- } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle absolute border-1 border-white", style: {
22
- position: "absolute",
23
- right: "0",
24
- bottom: "0",
25
- } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle absolute border-1 border-white", style: {
26
- position: "absolute",
27
- right: "0",
28
- bottom: "0",
29
- } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle absolute border-1 border-white", style: {
30
- position: "absolute",
31
- right: "0",
32
- bottom: "0",
33
- } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-2xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle absolute border-1 border-white", style: {
34
- position: "absolute",
35
- right: "0",
36
- bottom: "0",
37
- } })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 justify-content-between gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xs border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
38
- right: "-2px",
39
- bottom: "-2px",
40
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xs" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
41
- right: "-2px",
42
- bottom: "-2px",
43
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-sm" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
44
- right: "-2px",
45
- bottom: "-2px",
46
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-md" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
47
- right: "-2px",
48
- bottom: "-2px",
49
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
50
- right: "-2px",
51
- bottom: "-2px",
52
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-2xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
53
- right: "-2px",
54
- bottom: "-2px",
55
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-2xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 justify-content-between gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xs border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xs p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
17
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
56
18
  right: "-2px",
57
19
  bottom: "-2px",
58
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xs" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
20
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-2xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
59
21
  right: "-2px",
60
22
  bottom: "-2px",
61
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-sm" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
62
- right: "-2px",
63
- bottom: "-2px",
64
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-md" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
65
- right: "-2px",
66
- bottom: "-2px",
67
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
68
- right: "-2px",
69
- bottom: "-2px",
70
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-2xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-2xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
71
- right: "-2px",
72
- bottom: "-2px",
73
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-2xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xs border-circle relative bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xs" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xs border-circle border-1 border-white", style: {
23
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-2xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-2xl" }) })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "w-4rem h-4rem border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-2xl" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 w-1rem h-1rem border-circle border-1 border-white", style: {
74
24
  position: "absolute",
75
25
  right: "0px",
76
26
  bottom: "0px",
77
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-sm border-circle relative bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-sm" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle border-1 border-white", style: {
27
+ } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "w-4rem h-4rem border-circle bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "w-4rem h-4rem border-circle relative bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200", style: { fontSize: "18px" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 w-1rem h-1rem border-circle absolute border-1 border-white", style: {
78
28
  position: "absolute",
79
29
  right: "0px",
80
30
  bottom: "0px",
81
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-md border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-md" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle border-1 border-white", style: {
82
- position: "absolute",
83
- right: "0px",
84
- bottom: "0px",
85
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-lg border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-lg" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle border-1 border-white", style: {
86
- position: "absolute",
87
- right: "0px",
88
- bottom: "0px",
89
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xl border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xl" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle border-1 border-white", style: {
90
- position: "absolute",
91
- right: "0px",
92
- bottom: "0px",
93
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-2xl border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-2xl" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle border-1 border-white", style: {
94
- position: "absolute",
95
- right: "0px",
96
- bottom: "0px",
97
- } })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-xs border-circle bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xs" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-sm border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-sm" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-md border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-md" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-lg border-circle bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-lg" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-xl border-circle bg-gray-100 flex align-items-center justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-xl" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-2xl border-circle bg-gray-100 flex align-items-center relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-user-2xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-sm border-circle relative bg-gray-100 flex align-items-center text-sm text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
98
- right: "0px",
99
- bottom: "0px",
100
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-md border-circle relative bg-gray-100 flex align-items-center text-lg text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle absolute border-1 border-white", style: {
101
- right: "0px",
102
- bottom: "0px",
103
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-lg border-circle relative bg-gray-100 text-18 flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200", style: { fontSize: "18px" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-lg border-circle absolute border-1 border-white", style: {
104
- position: "absolute",
105
- right: "0px",
106
- bottom: "0px",
107
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xl border-circle relative bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200", style: { fontSize: "18px" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-xl border-circle absolute border-1 border-white", style: {
108
- position: "absolute",
109
- right: "0px",
110
- bottom: "0px",
111
- } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-2xl border-circle relative bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200", style: { fontSize: "18px" } }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-2xl border-circle absolute border-1 border-white", style: {
112
- position: "absolute",
113
- right: "0px",
114
- bottom: "0px",
115
- } })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-sm border-circle bg-gray-100 flex align-items-center text-sm text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-md border-circle bg-gray-100 flex align-items-center text-lg text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-lg border-circle bg-gray-100 text-18 flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-xl border-circle bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-avatar-2xl border-circle bg-gray-100 text-2xl flex align-items-center text-gray-600 font-medium justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: "OR" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-md border-circle relative bg-gray-100 text-lg flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
116
- position: "absolute",
117
- right: "-2px",
118
- bottom: "-2px",
119
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-md" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-lg border-circle relative bg-gray-100 text-18 flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
31
+ } })] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "w-4rem h-4rem border-circle relative bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
120
32
  position: "absolute",
121
33
  right: "-2px",
122
34
  bottom: "-2px",
123
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-avatar-xl border-circle relative bg-gray-100 text-xl flex align-items-center text-gray-600 font-medium relative justify-content-center border-3 border-transparent hover:border-gray-200" }, { children: ["OR", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "absolute ", style: {
124
- position: "absolute",
125
- right: "-2px",
126
- bottom: "-2px",
127
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "p-avatar-xs border-gray-300 border-1 bg-white avatar-button p-dark-tooltip border-dashed p-0 flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed w-2rem h-2rem p-0 flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed p-avatar-md flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: true, rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed p-avatar-md flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: "+2", shape: "circle", size: "large", className: "bg-gray-100 text-gray-600 text-base font-medium" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 p-0 border-1 ml-1 bg-white avatar-button p-dark-tooltip border-dashed h-2rem w-2rem flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "xlarge" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: "+2", shape: "circle", size: "xlarge", className: "bg-gray-100 text-gray-600 text-base line-height-3 font-medium" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 p-0 border-1 ml-1 bg-white avatar-button p-dark-tooltip border-dashed p-avatar-md flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-sm border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-sm p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
128
- position: "absolute",
129
- right: "0",
130
- bottom: "0",
131
- } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-md border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-md p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-md border-circle absolute border-1 border-white", style: {
35
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-xl" }) }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "w-3rem h-3rem border-gray-300 border-1 bg-white avatar-button p-dark-tooltip border-dashed p-0 flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: true, rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 border-1 avatar-button bg-white p-dark-tooltip border-dashed w-3rem h-3rem flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: avatar_for_av_component_png_1.default, shape: "circle", size: "large" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: "+2", shape: "circle", size: "large", className: "bg-gray-100 text-gray-600 text-base font-medium" })] }), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ rounded: true, tooltipOptions: { position: "top" }, tooltip: "Add user", className: "border-gray-300 p-0 border-1 ml-1 bg-white avatar-button p-dark-tooltip border-dashed h-2rem w-2rem flex align-items-center justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-button-plus" }) }))] })) })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-2rem h-2rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-2rem h-2rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-2rem h-2rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 green-online-indicator-sm border-circle absolute border-1 border-white", style: {
132
36
  position: "absolute",
133
37
  right: "0",
134
38
  bottom: "0",
135
- } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-lg border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-lg p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
39
+ } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-semibold line-height-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-normal line-height-2" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
136
40
  right: "-2px",
137
41
  bottom: "-2px",
138
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-avatar-xl border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle p-avatar-xl p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
42
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "avatar-company-logo-lg" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-4rem h-4rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle w-4rem h-4rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
139
43
  right: "-2px",
140
44
  bottom: "-2px",
141
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-18 font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-profile-72 border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle border-3 border-white p-profile-72 sc-profile" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
142
- right: "-2px",
143
- bottom: "-2px",
144
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-2xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6rem h-6rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle border-3 border-white w-6rem h-6rem sc-profile" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
145
- right: "2px",
146
- bottom: "2px",
147
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-3xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-11rem h-11rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle border-3 border-white w-11rem h-11rem sc-profile" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
148
- right: "4px",
149
- bottom: "4px",
150
- } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-4xl" }) }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10rem flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: profile_square_image_png_1.default, alt: "profile", className: "h-10rem " }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg text-gray-900 line-height-3 pt-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 line-height-3 " }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "link-01" }) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com", className: "text-gray-500 font-normal" }, { children: "Source" }))] }))] })) }))] }))] }));
45
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-xl" }) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-semibold line-height-3" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg font-normal line-height-3" }, { children: "olivia@untitledui.com" }))] }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-6rem h-6rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_for_av_component_png_1.default, className: " border-circle border-3 border-white w-6rem h-6rem sc-profile" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: " absolute ", style: {
46
+ right: "2px",
47
+ bottom: "2px",
48
+ } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "verified-tick-3xl" }) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 md:col-4 lg:col-3 px-7 flex flex-wrap align-items-center my-8 gap-3 my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10rem flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: profile_square_image_png_1.default, alt: "profile", className: "h-10rem " }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg text-gray-900 line-height-3 pt-2" }, { children: "Olivia Rhye" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 line-height-3 " }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "link-01" }) })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "www.google.com", className: "text-gray-500 font-normal" }, { children: "Source" }))] }))] })) }))] }))] }));
151
49
  };
152
50
  exports.default = AvatarComponent;
package/dist/pages/breadcrumb/breadcrumb.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const breadcrumb_1 = require("primereact/breadcrumb");
6
+ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
7
+ const BreadCrumbComponent = () => {
8
+ const items = [{ label: 'Setting', className: "text-gray-600 px-4 py-2" }, { label: '...', className: "px-4 py-2" }, { label: "Team", className: "px-4 py-2 last-element" }];
9
+ const home = { icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "home-line-gray-500" }), url: "", className: "pr-4" };
10
+ 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" }) }) }))] }))] }));
11
+ };
12
+ exports.default = BreadCrumbComponent;
package/dist/pages/button/button.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const button_1 = require("primereact/button");
6
+ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
7
+ const ButtonComponent = () => {
8
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Buttons" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 align-items-start" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start gap-3 p-3" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "flex align-items-center justify-content-between 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" })] }))] }))] }))] }))] }));
9
+ };
10
+ exports.default = ButtonComponent;
package/dist/pages/button-group/button-group.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const button_1 = require("primereact/button");
6
+ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
7
+ const ButtonGroupComponent = () => {
8
+ return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Button Groups" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-3 p-2" }, { children: [(0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-4rem h-3rem" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Text" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-4rem h-3rem" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Text" }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-4rem h-3rem" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "Text" }) }))] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-buttonset" }, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-6rem h-3rem" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2" }, { children: "Text" }))] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-6rem h-3rem" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2" }, { children: "Text" }))] })), (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ className: "text-gray-700 bg-transparent border-gray-300 font-semibold text-base w-6rem h-3rem" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "button-ring-gray" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ml-2" }, { children: "Text" }))] }))] }))] }))] }));
9
+ };
10
+ exports.default = ButtonGroupComponent;