gov-layout 1.2.14 → 1.2.17

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 +27 -2
  2. package/dist/index.d.mts +20 -2
  3. package/dist/index.d.ts +20 -2
  4. package/dist/index.js +91 -36
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +91 -37
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -233,7 +233,11 @@ Header ด้านบนพร้อม notification bell
233
233
  import { UserHeader } from 'gov-layout';
234
234
 
235
235
  <UserHeader
236
- user={{ firstName: 'สมหญิง', pictureUrl: '/avatar.jpg' }}
236
+ user={{
237
+ firstName: 'ชนธัญ',
238
+ pictureUrl: '/avatar.jpg',
239
+ subtitle: 'ผู้สูงอายุ', // แสดงใต้ข้อความทักทาย (optional)
240
+ }}
237
241
  notifications={[
238
242
  {
239
243
  id: 1,
@@ -247,15 +251,35 @@ import { UserHeader } from 'gov-layout';
247
251
  onToggleSidebar={() => setOpen(true)}
248
252
  onMarkAllRead={() => markAllRead()}
249
253
  onViewAll={() => router.push('/notifications')}
254
+ onNotificationClick={(notif) => router.push(`/notifications/${notif.id}`)}
250
255
  onProfile={() => router.push('/profile')}
251
256
  />
252
257
  ```
253
258
 
259
+ ### Props
260
+
261
+ | Prop | Type | Default | คำอธิบาย |
262
+ |------|------|---------|----------|
263
+ | `user.firstName` | `string?` | - | ชื่อ |
264
+ | `user.lastName` | `string?` | - | นามสกุล |
265
+ | `user.pictureUrl` | `string?` | - | URL รูปโปรไฟล์ |
266
+ | `user.subtitle` | `string?` | - | ข้อความใต้ชื่อ เช่น "ผู้สูงอายุ" |
267
+ | `notifications` | `NotificationItem[]?` | `[]` | รายการแจ้งเตือน |
268
+ | `onToggleSidebar` | `() => void?` | - | callback เปิด sidebar |
269
+ | `onMarkAllRead` | `() => void?` | - | callback อ่านทั้งหมดแล้ว |
270
+ | `onViewAll` | `() => void?` | - | callback ดูทั้งหมด |
271
+ | `onNotificationClick` | `(notification) => void?` | - | callback เมื่อกดแจ้งเตือนแต่ละรายการ |
272
+ | `onProfile` | `() => void?` | - | callback เมื่อกดโปรไฟล์ |
273
+ | `notificationBell` | `ReactNode?` | - | custom bell icon |
274
+ | `className` | `string?` | - | className เพิ่มเติม |
275
+
254
276
  ### Features
255
277
 
256
278
  - ✅ Notification bell พร้อม badge (99+ เมื่อเกิน)
257
279
  - ✅ ไม่มีแจ้งเตือน → ไม่แสดง badge
258
280
  - ✅ Notification dropdown แบบ scroll
281
+ - ✅ กดแจ้งเตือนแต่ละรายการ → `onNotificationClick`
282
+ - ✅ Subtitle ใต้ข้อความทักทาย (เช่น "ผู้สูงอายุ")
259
283
  - ✅ ปุ่มเปิด sidebar (☰)
260
284
  - ✅ กดโปรไฟล์ผู้ใช้ (avatar + ชื่อ) → `onProfile`
261
285
 
@@ -476,9 +500,10 @@ export default function UserLayout({ children }) {
476
500
  return (
477
501
  <>
478
502
  <UserHeader
479
- user={user}
503
+ user={{ ...user, subtitle: 'ผู้สูงอายุ' }}
480
504
  notifications={notifications}
481
505
  onToggleSidebar={() => setOpen(true)}
506
+ onNotificationClick={(notif) => setCurrentPath(`/notifications/${notif.id}`)}
482
507
  onProfile={() => setCurrentPath('/profile')}
483
508
  />
484
509
  <UserSidebar
package/dist/index.d.mts CHANGED
@@ -95,6 +95,8 @@ interface UserHeaderProps {
95
95
  firstName?: string;
96
96
  lastName?: string;
97
97
  pictureUrl?: string;
98
+ /** เช่น 'ผู้สูงอายุ', 'เจ้าหน้าที่' */
99
+ subtitle?: string;
98
100
  };
99
101
  notifications?: NotificationItem[];
100
102
  onToggleSidebar?: () => void;
@@ -102,11 +104,13 @@ interface UserHeaderProps {
102
104
  notificationBell?: React.ReactNode;
103
105
  onMarkAllRead?: () => void;
104
106
  onViewAll?: () => void;
107
+ /** Callback เมื่อกดการแจ้งเตือนแต่ละรายการ */
108
+ onNotificationClick?: (notification: NotificationItem) => void;
105
109
  /** Callback เมื่อกดโปรไฟล์ผู้ใช้ */
106
110
  onProfile?: () => void;
107
111
  className?: string;
108
112
  }
109
- declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
113
+ declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onNotificationClick, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
110
114
 
111
115
  interface UserSidebarProps {
112
116
  user: User | null;
@@ -122,6 +126,20 @@ interface UserSidebarProps {
122
126
  }
123
127
  declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, onProfile, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
124
128
 
129
+ interface BottomBarProps {
130
+ /** Content inside the bottom bar (pagination, buttons, etc.) */
131
+ children: React.ReactNode;
132
+ /** Left offset to account for sidebar width (default: '280px') */
133
+ sidebarWidth?: string;
134
+ /** Height of the bottom bar (default: '73px') */
135
+ height?: string;
136
+ /** Additional CSS class */
137
+ className?: string;
138
+ /** Custom inline styles */
139
+ style?: React.CSSProperties;
140
+ }
141
+ declare function BottomBar({ children, sidebarWidth, height, className, style, }: BottomBarProps): react_jsx_runtime.JSX.Element;
142
+
125
143
  type Theme = 'light' | 'dark';
126
144
  type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
127
145
  interface FontSizeOption {
@@ -245,4 +263,4 @@ declare const Icons: {
245
263
  readonly Trash: typeof TrashIcon;
246
264
  };
247
265
 
248
- export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
266
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BottomBar, type BottomBarProps, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
package/dist/index.d.ts CHANGED
@@ -95,6 +95,8 @@ interface UserHeaderProps {
95
95
  firstName?: string;
96
96
  lastName?: string;
97
97
  pictureUrl?: string;
98
+ /** เช่น 'ผู้สูงอายุ', 'เจ้าหน้าที่' */
99
+ subtitle?: string;
98
100
  };
99
101
  notifications?: NotificationItem[];
100
102
  onToggleSidebar?: () => void;
@@ -102,11 +104,13 @@ interface UserHeaderProps {
102
104
  notificationBell?: React.ReactNode;
103
105
  onMarkAllRead?: () => void;
104
106
  onViewAll?: () => void;
107
+ /** Callback เมื่อกดการแจ้งเตือนแต่ละรายการ */
108
+ onNotificationClick?: (notification: NotificationItem) => void;
105
109
  /** Callback เมื่อกดโปรไฟล์ผู้ใช้ */
106
110
  onProfile?: () => void;
107
111
  className?: string;
108
112
  }
109
- declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
113
+ declare function UserHeader({ user, notifications, onToggleSidebar, notificationBell, onMarkAllRead, onViewAll, onNotificationClick, onProfile, className, }: UserHeaderProps): react_jsx_runtime.JSX.Element;
110
114
 
111
115
  interface UserSidebarProps {
112
116
  user: User | null;
@@ -122,6 +126,20 @@ interface UserSidebarProps {
122
126
  }
123
127
  declare function UserSidebar({ user, roleLabel, menuItems, onNavigate, onLogout, isOpen, onClose, roleColor, onProfile, }: UserSidebarProps): react_jsx_runtime.JSX.Element;
124
128
 
129
+ interface BottomBarProps {
130
+ /** Content inside the bottom bar (pagination, buttons, etc.) */
131
+ children: React.ReactNode;
132
+ /** Left offset to account for sidebar width (default: '280px') */
133
+ sidebarWidth?: string;
134
+ /** Height of the bottom bar (default: '73px') */
135
+ height?: string;
136
+ /** Additional CSS class */
137
+ className?: string;
138
+ /** Custom inline styles */
139
+ style?: React.CSSProperties;
140
+ }
141
+ declare function BottomBar({ children, sidebarWidth, height, className, style, }: BottomBarProps): react_jsx_runtime.JSX.Element;
142
+
125
143
  type Theme = 'light' | 'dark';
126
144
  type FontSizeKey = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
127
145
  interface FontSizeOption {
@@ -245,4 +263,4 @@ declare const Icons: {
245
263
  readonly Trash: typeof TrashIcon;
246
264
  };
247
265
 
248
- export { AlertTriangleIcon, BarChartIcon, BellIcon, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
266
+ export { AlertTriangleIcon, BarChartIcon, BellIcon, BottomBar, type BottomBarProps, BuildingIcon, CalendarIcon, CheckCircleIcon, ClipboardIcon, DatabaseIcon, DownloadIcon, EditIcon, EyeIcon, FONT_SIZE_OPTIONS, FileTextIcon, FolderIcon, type FontSizeKey, type FontSizeOption, FontSizeSettings, GearIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, type IconProps, Icons, LogOutIcon, MailIcon, MapPinIcon, type MenuItem, type NotificationItem, PhoneIcon, PlusCircleIcon, PrinterIcon, SearchIcon, SettingsPanel, SettingsProvider, ShieldIcon, SidebarHeader, SidebarMenu, SidebarUserProfile, StaffSidebar, type StaffSidebarProps, StarIcon, type Theme, ThemeSettings, TrashIcon, UploadIcon, type User, UserHeader, UserIcon, UserSidebar, UsersIcon, WrenchIcon, XCircleIcon, useDarkMode, useSettings };
package/dist/index.js CHANGED
@@ -308,6 +308,12 @@ function TrashIcon({ size = 20, className, style } = {}) {
308
308
  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
309
309
  ] });
310
310
  }
311
+ var safeCssEscape = (value) => {
312
+ if (typeof CSS !== "undefined" && CSS.escape) {
313
+ return CSS.escape(value);
314
+ }
315
+ return value.replace(/[^a-zA-Z0-9_-]/g, "_");
316
+ };
311
317
  var ICON_MAP = {
312
318
  home: HomeIcon,
313
319
  dashboard: HomeIcon,
@@ -460,11 +466,11 @@ function MenuItemComponent({
460
466
  const hoverBg = isDark ? "#334155" : "var(--color-foundations-fuji-pallet-light, #ebedf5)";
461
467
  if (collapsed && depth === 0) {
462
468
  return /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
463
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${CSS.escape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
469
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
464
470
  /* @__PURE__ */ jsxRuntime.jsx(
465
471
  "button",
466
472
  {
467
- className: `sidebar-btn-${CSS.escape(btnId)}`,
473
+ className: `sidebar-btn-${safeCssEscape(btnId)}`,
468
474
  "data-active": isActive || isChildActive,
469
475
  onClick: handleClick,
470
476
  title: item.title,
@@ -500,11 +506,11 @@ function MenuItemComponent({
500
506
  }
501
507
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
502
508
  /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
503
- /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${CSS.escape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
509
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@media(hover:hover){.sidebar-btn-${safeCssEscape(btnId)}:not([data-active='true']):hover{background-color:${hoverBg}!important}}` }),
504
510
  /* @__PURE__ */ jsxRuntime.jsxs(
505
511
  "button",
506
512
  {
507
- className: `sidebar-btn-${CSS.escape(btnId)}`,
513
+ className: `sidebar-btn-${safeCssEscape(btnId)}`,
508
514
  "data-active": isActive,
509
515
  onClick: handleClick,
510
516
  style: {
@@ -690,7 +696,7 @@ function SidebarUserProfile({
690
696
  onClick: onProfile,
691
697
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
692
698
  onMouseEnter: (e) => {
693
- e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
699
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #faf9e5)";
694
700
  },
695
701
  onMouseLeave: (e) => {
696
702
  e.currentTarget.style.backgroundColor = "transparent";
@@ -830,7 +836,7 @@ function SidebarUserProfile({
830
836
  onClick: onProfile,
831
837
  title: "\u0E42\u0E1B\u0E23\u0E44\u0E1F\u0E25\u0E4C\u0E02\u0E2D\u0E07\u0E09\u0E31\u0E19",
832
838
  onMouseEnter: (e) => {
833
- e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #f0fdf4)";
839
+ e.currentTarget.style.backgroundColor = isDark ? "#334155" : "var(--color-alias-color-brand-surface, #faf9e5)";
834
840
  },
835
841
  onMouseLeave: (e) => {
836
842
  e.currentTarget.style.backgroundColor = "transparent";
@@ -1118,6 +1124,7 @@ function UserHeader({
1118
1124
  notificationBell,
1119
1125
  onMarkAllRead,
1120
1126
  onViewAll,
1127
+ onNotificationClick,
1121
1128
  onProfile,
1122
1129
  className
1123
1130
  }) {
@@ -1214,30 +1221,44 @@ function UserHeader({
1214
1221
  )
1215
1222
  }
1216
1223
  ),
1217
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
1218
- "p",
1219
- {
1220
- style: {
1221
- fontSize: "15px",
1222
- fontWeight: 600,
1223
- color: "#ffffff",
1224
- margin: 0
1225
- },
1226
- children: [
1227
- "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
1228
- " ",
1229
- /* @__PURE__ */ jsxRuntime.jsx(
1230
- "span",
1231
- {
1232
- style: {
1233
- color: "#ffffff"
1234
- },
1235
- children: displayName
1236
- }
1237
- )
1238
- ]
1239
- }
1240
- ) })
1224
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1225
+ /* @__PURE__ */ jsxRuntime.jsxs(
1226
+ "p",
1227
+ {
1228
+ style: {
1229
+ fontSize: "15px",
1230
+ fontWeight: 600,
1231
+ color: "#ffffff",
1232
+ margin: 0
1233
+ },
1234
+ children: [
1235
+ "\u0E2A\u0E27\u0E31\u0E2A\u0E14\u0E35,",
1236
+ " ",
1237
+ /* @__PURE__ */ jsxRuntime.jsx(
1238
+ "span",
1239
+ {
1240
+ style: {
1241
+ color: "#ffffff"
1242
+ },
1243
+ children: displayName
1244
+ }
1245
+ )
1246
+ ]
1247
+ }
1248
+ ),
1249
+ user?.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
1250
+ "p",
1251
+ {
1252
+ style: {
1253
+ fontSize: "12px",
1254
+ color: "rgba(255,255,255,0.75)",
1255
+ margin: "2px 0 0",
1256
+ fontWeight: 400
1257
+ },
1258
+ children: user.subtitle
1259
+ }
1260
+ )
1261
+ ] })
1241
1262
  ]
1242
1263
  }
1243
1264
  ),
@@ -1355,6 +1376,7 @@ function UserHeader({
1355
1376
  ) : notifications.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
1356
1377
  "div",
1357
1378
  {
1379
+ onClick: () => onNotificationClick?.(item),
1358
1380
  style: {
1359
1381
  padding: "12px 16px",
1360
1382
  borderBottom: "1px solid #f9fafb",
@@ -1601,7 +1623,7 @@ function UserSidebar({
1601
1623
  {
1602
1624
  style: {
1603
1625
  padding: "20px",
1604
- borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1626
+ borderBottom: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`
1605
1627
  },
1606
1628
  children: /* @__PURE__ */ jsxRuntime.jsxs(
1607
1629
  "div",
@@ -1666,7 +1688,7 @@ function UserSidebar({
1666
1688
  {
1667
1689
  style: {
1668
1690
  fontSize: "13px",
1669
- color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #6b7280)",
1691
+ color: isDark ? "#e2e8f0" : "var(--color-alias-text-colors-tertiary, #475272)",
1670
1692
  margin: "2px 0 0",
1671
1693
  display: "flex",
1672
1694
  alignItems: "center",
@@ -1714,7 +1736,7 @@ function UserSidebar({
1714
1736
  {
1715
1737
  style: {
1716
1738
  padding: "20px",
1717
- borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #e5e7eb)"}`
1739
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`
1718
1740
  },
1719
1741
  children: /* @__PURE__ */ jsxRuntime.jsxs(
1720
1742
  "button",
@@ -1735,7 +1757,7 @@ function UserSidebar({
1735
1757
  borderRadius: "8px",
1736
1758
  border: "none",
1737
1759
  background: "transparent",
1738
- color: "var(--color-alias-semantic-critical, #ef4444)",
1760
+ color: "var(--color-alias-semantic-critical, #f21515)",
1739
1761
  cursor: "pointer",
1740
1762
  transition: "background-color 0.15s ease",
1741
1763
  fontSize: "15px",
@@ -1754,6 +1776,38 @@ function UserSidebar({
1754
1776
  )
1755
1777
  ] });
1756
1778
  }
1779
+ function BottomBar({
1780
+ children,
1781
+ sidebarWidth = "280px",
1782
+ height = "73px",
1783
+ className,
1784
+ style
1785
+ }) {
1786
+ const isDark = useDarkMode();
1787
+ return /* @__PURE__ */ jsxRuntime.jsx(
1788
+ "div",
1789
+ {
1790
+ className,
1791
+ style: {
1792
+ position: "fixed",
1793
+ bottom: 0,
1794
+ left: sidebarWidth,
1795
+ right: 0,
1796
+ height,
1797
+ background: isDark ? "#111827" : "#ffffff",
1798
+ borderTop: `1px solid ${isDark ? "#374151" : "var(--color-border-colors-neutral, #c8cedd)"}`,
1799
+ display: "flex",
1800
+ alignItems: "center",
1801
+ justifyContent: "space-between",
1802
+ padding: "16px 24px",
1803
+ zIndex: 30,
1804
+ transition: "left 0.3s ease",
1805
+ ...style
1806
+ },
1807
+ children
1808
+ }
1809
+ );
1810
+ }
1757
1811
  var FONT_SIZE_OPTIONS = [
1758
1812
  { key: "xsmall", label: "\u0E40\u0E25\u0E47\u0E01\u0E21\u0E32\u0E01", scale: 0.8 },
1759
1813
  { key: "small", label: "\u0E40\u0E25\u0E47\u0E01", scale: 0.9 },
@@ -1961,7 +2015,7 @@ function FontSizeSettings({ onBack }) {
1961
2015
  margin: "8px 16px",
1962
2016
  padding: "16px",
1963
2017
  borderRadius: 10,
1964
- background: "var(--color-foundations-fuji-pallet-light, #f5f6fa)",
2018
+ background: "var(--color-foundations-fuji-pallet-light, #ebedf5)",
1965
2019
  textAlign: "center"
1966
2020
  }, children: [
1967
2021
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: {
@@ -2064,7 +2118,7 @@ function SettingsPanel({ className, showTheme = true }) {
2064
2118
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
2065
2119
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
2066
2120
  padding: "16px",
2067
- borderBottom: "1px solid var(--color-border-colors-neutral, #e5e7eb)"
2121
+ borderBottom: "1px solid var(--color-border-colors-neutral, #c8cedd)"
2068
2122
  }, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: {
2069
2123
  fontSize: 16,
2070
2124
  fontWeight: 700,
@@ -2167,6 +2221,7 @@ var Icons = {
2167
2221
  exports.AlertTriangleIcon = AlertTriangleIcon;
2168
2222
  exports.BarChartIcon = BarChartIcon;
2169
2223
  exports.BellIcon = BellIcon;
2224
+ exports.BottomBar = BottomBar;
2170
2225
  exports.BuildingIcon = BuildingIcon;
2171
2226
  exports.CalendarIcon = CalendarIcon;
2172
2227
  exports.CheckCircleIcon = CheckCircleIcon;