gov-layout 1.2.5 → 1.2.6

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 (8) hide show
  1. package/README.md +8 -0
  2. package/dist/index.d.mts +12 -4
  3. package/dist/index.d.ts +12 -4
  4. package/dist/index.js +386 -188
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +386 -188
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -586,11 +586,31 @@ function LogoutIcon() {
586
586
  }
587
587
  );
588
588
  }
589
+ function ProfileIcon() {
590
+ return /* @__PURE__ */ jsxs(
591
+ "svg",
592
+ {
593
+ width: "18",
594
+ height: "18",
595
+ viewBox: "0 0 24 24",
596
+ fill: "none",
597
+ stroke: "currentColor",
598
+ strokeWidth: "2",
599
+ strokeLinecap: "round",
600
+ strokeLinejoin: "round",
601
+ children: [
602
+ /* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
603
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
604
+ ]
605
+ }
606
+ );
607
+ }
589
608
  function SidebarUserProfile({
590
609
  user,
591
610
  roleLabel,
592
611
  onLogout,
593
- collapsed
612
+ collapsed,
613
+ onProfile
594
614
  }) {
595
615
  if (!user) return null;
596
616
  const getFullName = () => {
@@ -611,36 +631,69 @@ function SidebarUserProfile({
611
631
  alignItems: "center",
612
632
  gap: "12px"
613
633
  }, children: [
614
- user.pictureUrl ? /* @__PURE__ */ jsx(
615
- "img",
634
+ /* @__PURE__ */ jsx(
635
+ "div",
616
636
  {
617
- src: user.pictureUrl,
618
- alt: getFullName(),
619
- title: getFullName(),
620
- style: {
621
- width: "36px",
622
- height: "36px",
623
- borderRadius: "50%",
624
- objectFit: "cover"
625
- }
637
+ onClick: onProfile,
638
+ title: onProfile ? "\u0E14\u0E39\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C" : getFullName(),
639
+ style: { cursor: onProfile ? "pointer" : "default" },
640
+ children: user.pictureUrl ? /* @__PURE__ */ jsx(
641
+ "img",
642
+ {
643
+ src: user.pictureUrl,
644
+ alt: getFullName(),
645
+ style: {
646
+ width: "36px",
647
+ height: "36px",
648
+ borderRadius: "50%",
649
+ objectFit: "cover"
650
+ }
651
+ }
652
+ ) : /* @__PURE__ */ jsx(
653
+ "div",
654
+ {
655
+ style: {
656
+ width: "36px",
657
+ height: "36px",
658
+ borderRadius: "50%",
659
+ background: "var(--color-alias-color-brand-primary, #1e7d55)",
660
+ display: "flex",
661
+ alignItems: "center",
662
+ justifyContent: "center",
663
+ color: "#fff",
664
+ fontWeight: 700,
665
+ fontSize: "14px"
666
+ },
667
+ children: getInitial()
668
+ }
669
+ )
626
670
  }
627
- ) : /* @__PURE__ */ jsx(
628
- "div",
671
+ ),
672
+ onProfile && /* @__PURE__ */ jsx(
673
+ "button",
629
674
  {
630
- title: getFullName(),
675
+ onClick: onProfile,
676
+ title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
677
+ onMouseEnter: (e) => {
678
+ e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
679
+ },
680
+ onMouseLeave: (e) => {
681
+ e.currentTarget.style.backgroundColor = "transparent";
682
+ },
631
683
  style: {
632
684
  width: "36px",
633
685
  height: "36px",
634
- borderRadius: "50%",
635
- background: "var(--color-alias-color-brand-primary, #1e7d55)",
686
+ borderRadius: "8px",
687
+ border: "none",
688
+ background: "transparent",
689
+ color: "var(--color-alias-color-brand-primary, #1e7d55)",
690
+ cursor: "pointer",
636
691
  display: "flex",
637
692
  alignItems: "center",
638
693
  justifyContent: "center",
639
- color: "#fff",
640
- fontWeight: 700,
641
- fontSize: "14px"
694
+ transition: "background-color 0.15s ease"
642
695
  },
643
- children: getInitial()
696
+ children: /* @__PURE__ */ jsx(ProfileIcon, {})
644
697
  }
645
698
  ),
646
699
  /* @__PURE__ */ jsx(
@@ -683,56 +736,107 @@ function SidebarUserProfile({
683
736
  gap: "12px"
684
737
  },
685
738
  children: [
686
- user.pictureUrl ? /* @__PURE__ */ jsx(
687
- "img",
739
+ /* @__PURE__ */ jsxs(
740
+ "div",
688
741
  {
689
- src: user.pictureUrl,
690
- alt: getFullName(),
742
+ onClick: onProfile,
743
+ onMouseEnter: (e) => {
744
+ if (onProfile) e.currentTarget.style.opacity = "0.8";
745
+ },
746
+ onMouseLeave: (e) => {
747
+ if (onProfile) e.currentTarget.style.opacity = "1";
748
+ },
691
749
  style: {
692
- width: "40px",
693
- height: "40px",
694
- borderRadius: "50%",
695
- objectFit: "cover",
696
- flexShrink: 0
697
- }
750
+ display: "flex",
751
+ alignItems: "center",
752
+ gap: "12px",
753
+ flex: 1,
754
+ minWidth: 0,
755
+ cursor: onProfile ? "pointer" : "default",
756
+ transition: "opacity 0.15s ease"
757
+ },
758
+ children: [
759
+ user.pictureUrl ? /* @__PURE__ */ jsx(
760
+ "img",
761
+ {
762
+ src: user.pictureUrl,
763
+ alt: getFullName(),
764
+ style: {
765
+ width: "40px",
766
+ height: "40px",
767
+ borderRadius: "50%",
768
+ objectFit: "cover",
769
+ flexShrink: 0
770
+ }
771
+ }
772
+ ) : /* @__PURE__ */ jsx(
773
+ "div",
774
+ {
775
+ style: {
776
+ width: "40px",
777
+ height: "40px",
778
+ borderRadius: "50%",
779
+ background: "var(--color-alias-color-brand-primary, #1e7d55)",
780
+ display: "flex",
781
+ alignItems: "center",
782
+ justifyContent: "center",
783
+ color: "#fff",
784
+ fontWeight: 700,
785
+ fontSize: "16px",
786
+ flexShrink: 0
787
+ },
788
+ children: getInitial()
789
+ }
790
+ ),
791
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
792
+ /* @__PURE__ */ jsx("p", { style: {
793
+ fontWeight: 600,
794
+ fontSize: "14px",
795
+ lineHeight: "20px",
796
+ color: "var(--color-alias-text-colors-primary, #060d26)",
797
+ margin: 0,
798
+ overflow: "hidden",
799
+ textOverflow: "ellipsis",
800
+ whiteSpace: "nowrap"
801
+ }, children: getFullName() }),
802
+ /* @__PURE__ */ jsx("p", { style: {
803
+ fontSize: "12px",
804
+ lineHeight: "16px",
805
+ color: "var(--color-alias-text-colors-tertiary, #475272)",
806
+ margin: 0
807
+ }, children: roleLabel })
808
+ ] })
809
+ ]
698
810
  }
699
- ) : /* @__PURE__ */ jsx(
700
- "div",
811
+ ),
812
+ onProfile && /* @__PURE__ */ jsx(
813
+ "button",
701
814
  {
815
+ onClick: onProfile,
816
+ title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
817
+ onMouseEnter: (e) => {
818
+ e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
819
+ },
820
+ onMouseLeave: (e) => {
821
+ e.currentTarget.style.backgroundColor = "transparent";
822
+ },
702
823
  style: {
703
- width: "40px",
704
- height: "40px",
705
- borderRadius: "50%",
706
- background: "var(--color-alias-color-brand-primary, #1e7d55)",
824
+ width: "36px",
825
+ height: "36px",
826
+ borderRadius: "8px",
827
+ border: "none",
828
+ background: "transparent",
829
+ color: "var(--color-alias-color-brand-primary, #1e7d55)",
830
+ cursor: "pointer",
707
831
  display: "flex",
708
832
  alignItems: "center",
709
833
  justifyContent: "center",
710
- color: "#fff",
711
- fontWeight: 700,
712
- fontSize: "16px",
834
+ transition: "background-color 0.15s ease",
713
835
  flexShrink: 0
714
836
  },
715
- children: getInitial()
837
+ children: /* @__PURE__ */ jsx(ProfileIcon, {})
716
838
  }
717
839
  ),
718
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
719
- /* @__PURE__ */ jsx("p", { style: {
720
- fontWeight: 600,
721
- fontSize: "14px",
722
- lineHeight: "20px",
723
- color: "var(--color-alias-text-colors-primary, #060d26)",
724
- margin: 0,
725
- overflow: "hidden",
726
- textOverflow: "ellipsis",
727
- whiteSpace: "nowrap"
728
- }, children: getFullName() }),
729
- /* @__PURE__ */ jsx("p", { style: {
730
- fontSize: "12px",
731
- lineHeight: "16px",
732
- color: "var(--color-alias-text-colors-tertiary, #475272)",
733
- margin: 0
734
- }, children: roleLabel })
735
- ] }),
736
840
  /* @__PURE__ */ jsx(
737
841
  "button",
738
842
  {
@@ -814,6 +918,7 @@ function StaffSidebar({
814
918
  roleLabel,
815
919
  onNavigate,
816
920
  onLogout,
921
+ onProfile,
817
922
  currentPath,
818
923
  width = "280px",
819
924
  className,
@@ -909,6 +1014,7 @@ function StaffSidebar({
909
1014
  user,
910
1015
  roleLabel,
911
1016
  onLogout,
1017
+ onProfile,
912
1018
  collapsed
913
1019
  }
914
1020
  )
@@ -996,6 +1102,7 @@ function UserHeader({
996
1102
  notificationBell,
997
1103
  onMarkAllRead,
998
1104
  onViewAll,
1105
+ onProfile,
999
1106
  className
1000
1107
  }) {
1001
1108
  const displayName = `${user?.firstName || ""} ${user?.lastName || ""}`.trim() || "\u0E1C\u0E39\u0E49\u0E43\u0E0A\u0E49";
@@ -1033,67 +1140,88 @@ function UserHeader({
1033
1140
  padding: "14px 20px"
1034
1141
  },
1035
1142
  children: [
1036
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
1037
- user?.pictureUrl ? /* @__PURE__ */ jsx(
1038
- "img",
1039
- {
1040
- src: user.pictureUrl,
1041
- alt: displayName,
1042
- style: {
1043
- width: "44px",
1044
- height: "44px",
1045
- borderRadius: "50%",
1046
- objectFit: "cover",
1047
- border: "2px solid var(--color-alias-color-brand-surface, #faf9e5)"
1048
- }
1049
- }
1050
- ) : /* @__PURE__ */ jsx(
1051
- "div",
1052
- {
1053
- style: {
1054
- width: "44px",
1055
- height: "44px",
1056
- borderRadius: "50%",
1057
- background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
1058
- display: "flex",
1059
- alignItems: "center",
1060
- justifyContent: "center",
1061
- boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
1062
- },
1063
- children: /* @__PURE__ */ jsx(
1064
- "span",
1143
+ /* @__PURE__ */ jsxs(
1144
+ "div",
1145
+ {
1146
+ onClick: onProfile,
1147
+ onMouseEnter: (e) => {
1148
+ if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
1149
+ },
1150
+ onMouseLeave: (e) => {
1151
+ if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
1152
+ },
1153
+ style: {
1154
+ display: "flex",
1155
+ alignItems: "center",
1156
+ gap: "12px",
1157
+ cursor: onProfile ? "pointer" : "default",
1158
+ padding: "4px 8px",
1159
+ borderRadius: "10px",
1160
+ transition: "background-color 0.15s ease"
1161
+ },
1162
+ children: [
1163
+ user?.pictureUrl ? /* @__PURE__ */ jsx(
1164
+ "img",
1065
1165
  {
1066
- style: { color: "#fff", fontSize: "18px", fontWeight: 600 },
1067
- children: firstChar
1068
- }
1069
- )
1070
- }
1071
- ),
1072
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
1073
- "p",
1074
- {
1075
- style: {
1076
- fontSize: "14px",
1077
- fontWeight: 600,
1078
- color: "var(--color-alias-color-brand-text-dark, #05010e)",
1079
- margin: 0
1080
- },
1081
- children: [
1082
- "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
1083
- " ",
1084
- /* @__PURE__ */ jsx(
1085
- "span",
1086
- {
1087
- style: {
1088
- color: "var(--color-alias-color-brand-primary, #1e7d55)"
1089
- },
1090
- children: displayName
1166
+ src: user.pictureUrl,
1167
+ alt: displayName,
1168
+ style: {
1169
+ width: "44px",
1170
+ height: "44px",
1171
+ borderRadius: "50%",
1172
+ objectFit: "cover",
1173
+ border: "2px solid var(--color-alias-color-brand-surface, #faf9e5)"
1091
1174
  }
1092
- )
1093
- ]
1094
- }
1095
- ) })
1096
- ] }),
1175
+ }
1176
+ ) : /* @__PURE__ */ jsx(
1177
+ "div",
1178
+ {
1179
+ style: {
1180
+ width: "44px",
1181
+ height: "44px",
1182
+ borderRadius: "50%",
1183
+ background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
1184
+ display: "flex",
1185
+ alignItems: "center",
1186
+ justifyContent: "center",
1187
+ boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
1188
+ },
1189
+ children: /* @__PURE__ */ jsx(
1190
+ "span",
1191
+ {
1192
+ style: { color: "#fff", fontSize: "18px", fontWeight: 600 },
1193
+ children: firstChar
1194
+ }
1195
+ )
1196
+ }
1197
+ ),
1198
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
1199
+ "p",
1200
+ {
1201
+ style: {
1202
+ fontSize: "14px",
1203
+ fontWeight: 600,
1204
+ color: "var(--color-alias-color-brand-text-dark, #05010e)",
1205
+ margin: 0
1206
+ },
1207
+ children: [
1208
+ "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
1209
+ " ",
1210
+ /* @__PURE__ */ jsx(
1211
+ "span",
1212
+ {
1213
+ style: {
1214
+ color: "var(--color-alias-color-brand-primary, #1e7d55)"
1215
+ },
1216
+ children: displayName
1217
+ }
1218
+ )
1219
+ ]
1220
+ }
1221
+ ) })
1222
+ ]
1223
+ }
1224
+ ),
1097
1225
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
1098
1226
  /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: notifRef, children: [
1099
1227
  notificationBell || /* @__PURE__ */ jsxs(
@@ -1360,6 +1488,12 @@ function LogoutIcon2() {
1360
1488
  /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
1361
1489
  ] });
1362
1490
  }
1491
+ function ProfileIcon2() {
1492
+ return /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
1493
+ /* @__PURE__ */ jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
1494
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
1495
+ ] });
1496
+ }
1363
1497
  function UserSidebar({
1364
1498
  user,
1365
1499
  roleLabel,
@@ -1368,7 +1502,8 @@ function UserSidebar({
1368
1502
  onLogout,
1369
1503
  isOpen,
1370
1504
  onClose,
1371
- roleColor = "var(--color-alias-semantic-warning, orange)"
1505
+ roleColor = "var(--color-alias-semantic-warning, orange)",
1506
+ onProfile
1372
1507
  }) {
1373
1508
  useEffect(() => {
1374
1509
  if (isOpen) {
@@ -1430,92 +1565,155 @@ function UserSidebar({
1430
1565
  flexDirection: "column"
1431
1566
  },
1432
1567
  children: [
1433
- user && /* @__PURE__ */ jsx(
1568
+ user && /* @__PURE__ */ jsxs(
1434
1569
  "div",
1435
1570
  {
1436
1571
  style: {
1437
1572
  padding: "20px",
1438
1573
  borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
1439
1574
  },
1440
- children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
1441
- user.pictureUrl ? /* @__PURE__ */ jsx(
1442
- "img",
1443
- {
1444
- src: user.pictureUrl,
1445
- alt: getFullName(),
1446
- style: {
1447
- width: "56px",
1448
- height: "56px",
1449
- borderRadius: "50%",
1450
- objectFit: "cover",
1451
- boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
1452
- }
1453
- }
1454
- ) : /* @__PURE__ */ jsx(
1575
+ children: [
1576
+ /* @__PURE__ */ jsxs(
1455
1577
  "div",
1456
1578
  {
1579
+ onClick: () => {
1580
+ if (onProfile) {
1581
+ onProfile();
1582
+ onClose();
1583
+ }
1584
+ },
1585
+ onMouseEnter: (e) => {
1586
+ if (onProfile) e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
1587
+ },
1588
+ onMouseLeave: (e) => {
1589
+ if (onProfile) e.currentTarget.style.backgroundColor = "transparent";
1590
+ },
1457
1591
  style: {
1458
- width: "56px",
1459
- height: "56px",
1460
- borderRadius: "50%",
1461
- background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
1462
1592
  display: "flex",
1463
1593
  alignItems: "center",
1464
- justifyContent: "center",
1465
- color: "#fff",
1466
- fontWeight: 700,
1467
- fontSize: "20px",
1468
- boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
1594
+ gap: "12px",
1595
+ cursor: onProfile ? "pointer" : "default",
1596
+ padding: "8px",
1597
+ borderRadius: "12px",
1598
+ transition: "background-color 0.15s ease"
1469
1599
  },
1470
- children: getInitial()
1471
- }
1472
- ),
1473
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1474
- /* @__PURE__ */ jsx(
1475
- "p",
1476
- {
1477
- style: {
1478
- fontWeight: 700,
1479
- fontSize: "16px",
1480
- color: "var(--color-alias-text-colors-primary, #060d26)",
1481
- margin: 0,
1482
- overflow: "hidden",
1483
- textOverflow: "ellipsis",
1484
- whiteSpace: "nowrap"
1485
- },
1486
- children: getFullName()
1487
- }
1488
- ),
1489
- /* @__PURE__ */ jsxs(
1490
- "p",
1491
- {
1492
- style: {
1493
- fontSize: "13px",
1494
- color: "var(--color-alias-text-colors-tertiary, #6b7280)",
1495
- margin: "2px 0 0",
1496
- display: "flex",
1497
- alignItems: "center",
1498
- gap: "6px"
1499
- },
1500
- children: [
1600
+ children: [
1601
+ user.pictureUrl ? /* @__PURE__ */ jsx(
1602
+ "img",
1603
+ {
1604
+ src: user.pictureUrl,
1605
+ alt: getFullName(),
1606
+ style: {
1607
+ width: "56px",
1608
+ height: "56px",
1609
+ borderRadius: "50%",
1610
+ objectFit: "cover",
1611
+ boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
1612
+ }
1613
+ }
1614
+ ) : /* @__PURE__ */ jsx(
1615
+ "div",
1616
+ {
1617
+ style: {
1618
+ width: "56px",
1619
+ height: "56px",
1620
+ borderRadius: "50%",
1621
+ background: "linear-gradient(135deg, var(--color-alias-color-brand-secondary, #80d897), var(--color-alias-color-brand-primary, #1e7d55))",
1622
+ display: "flex",
1623
+ alignItems: "center",
1624
+ justifyContent: "center",
1625
+ color: "#fff",
1626
+ fontWeight: 700,
1627
+ fontSize: "20px",
1628
+ boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
1629
+ },
1630
+ children: getInitial()
1631
+ }
1632
+ ),
1633
+ /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1501
1634
  /* @__PURE__ */ jsx(
1502
- "span",
1635
+ "p",
1503
1636
  {
1504
1637
  style: {
1505
- width: "8px",
1506
- height: "8px",
1507
- borderRadius: "50%",
1508
- background: roleColor,
1509
- display: "inline-block"
1510
- }
1638
+ fontWeight: 700,
1639
+ fontSize: "16px",
1640
+ color: "var(--color-alias-text-colors-primary, #060d26)",
1641
+ margin: 0,
1642
+ overflow: "hidden",
1643
+ textOverflow: "ellipsis",
1644
+ whiteSpace: "nowrap"
1645
+ },
1646
+ children: getFullName()
1511
1647
  }
1512
1648
  ),
1513
- roleLabel
1514
- ]
1515
- }
1516
- )
1517
- ] })
1518
- ] })
1649
+ /* @__PURE__ */ jsxs(
1650
+ "p",
1651
+ {
1652
+ style: {
1653
+ fontSize: "13px",
1654
+ color: "var(--color-alias-text-colors-tertiary, #6b7280)",
1655
+ margin: "2px 0 0",
1656
+ display: "flex",
1657
+ alignItems: "center",
1658
+ gap: "6px"
1659
+ },
1660
+ children: [
1661
+ /* @__PURE__ */ jsx(
1662
+ "span",
1663
+ {
1664
+ style: {
1665
+ width: "8px",
1666
+ height: "8px",
1667
+ borderRadius: "50%",
1668
+ background: roleColor,
1669
+ display: "inline-block"
1670
+ }
1671
+ }
1672
+ ),
1673
+ roleLabel
1674
+ ]
1675
+ }
1676
+ )
1677
+ ] })
1678
+ ]
1679
+ }
1680
+ ),
1681
+ onProfile && /* @__PURE__ */ jsxs(
1682
+ "button",
1683
+ {
1684
+ onClick: () => {
1685
+ onProfile();
1686
+ onClose();
1687
+ },
1688
+ onMouseEnter: (e) => {
1689
+ e.currentTarget.style.backgroundColor = "var(--color-alias-color-brand-surface, #f0fdf4)";
1690
+ },
1691
+ onMouseLeave: (e) => {
1692
+ e.currentTarget.style.backgroundColor = "transparent";
1693
+ },
1694
+ style: {
1695
+ width: "100%",
1696
+ display: "flex",
1697
+ alignItems: "center",
1698
+ gap: "12px",
1699
+ padding: "10px 12px",
1700
+ marginTop: "8px",
1701
+ borderRadius: "8px",
1702
+ border: "none",
1703
+ background: "transparent",
1704
+ color: "var(--color-alias-color-brand-primary, #1e7d55)",
1705
+ cursor: "pointer",
1706
+ transition: "background-color 0.15s ease",
1707
+ fontSize: "14px",
1708
+ fontWeight: 500
1709
+ },
1710
+ children: [
1711
+ /* @__PURE__ */ jsx(ProfileIcon2, {}),
1712
+ /* @__PURE__ */ jsx("span", { children: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19" })
1713
+ ]
1714
+ }
1715
+ )
1716
+ ]
1519
1717
  }
1520
1718
  ),
1521
1719
  /* @__PURE__ */ jsx(