@verma-consulting/design-library 0.1.37 → 0.1.38

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 +0 -1
  2. package/dist/index.d.mts +2 -19
  3. package/dist/index.d.ts +2 -19
  4. package/dist/index.js +280 -421
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +178 -327
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -31,7 +31,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  // src/index.tsx
32
32
  var index_exports = {};
33
33
  __export(index_exports, {
34
- ClearableSelect: () => ClearableSelect_default,
35
34
  EmptyState: () => EmptyState_default,
36
35
  FormDialog: () => FormDialog_default,
37
36
  FormDrawer: () => FormDrawer_default,
@@ -49,191 +48,39 @@ __export(index_exports, {
49
48
  StatusPill: () => StatusPill_default,
50
49
  TabPanel: () => TabPanel_default,
51
50
  TablePagination: () => TablePagination_default,
52
- ThemeProvider: () => import_styles19.ThemeProvider,
53
- createTheme: () => import_styles19.createTheme,
54
- makeStyles: () => import_styles20.makeStyles,
55
- styled: () => import_styles19.styled,
56
- useTheme: () => import_styles19.useTheme
51
+ ThemeProvider: () => import_styles17.ThemeProvider,
52
+ createTheme: () => import_styles17.createTheme,
53
+ makeStyles: () => import_styles18.makeStyles,
54
+ styled: () => import_styles17.styled,
55
+ useTheme: () => import_styles17.useTheme
57
56
  });
58
57
  module.exports = __toCommonJS(index_exports);
59
58
  __reExport(index_exports, require("@mui/material"), module.exports);
60
59
 
61
- // src/ClearableSelect.tsx
62
- var import_react = __toESM(require("react"));
60
+ // src/TabPanel.tsx
63
61
  var import_material = require("@mui/material");
64
- var import_styles = require("@mui/material/styles");
65
- var import_icons_material = require("@mui/icons-material");
66
- var import_styles2 = require("@mui/styles");
67
- var import_common_library = require("@verma-consulting/common-library");
68
62
  var import_jsx_runtime = require("react/jsx-runtime");
69
- var useStyles = (0, import_styles2.makeStyles)((theme) => ({
70
- defaultMode: {
71
- paddingTop: 14,
72
- paddingBottom: 14,
73
- paddingLeft: 12,
74
- paddingRight: 12,
75
- cursor: "pointer",
76
- borderRadius: 14,
77
- border: "1px solid rgba(255,255,255,0.55)",
78
- backdropFilter: "blur(14px) saturate(150%)",
79
- background: "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))",
80
- "&:hover": {
81
- boxShadow: "rgba(15, 23, 42, 0.16) 0px 8px 24px"
82
- }
83
- },
84
- formLabel: {
85
- cursor: "pointer"
86
- },
87
- formValue: {
88
- cursor: "pointer",
89
- wordBreak: "break-word",
90
- whiteSpace: "pre-wrap"
91
- }
92
- }));
93
- var ClearableSelect = ({
94
- name,
95
- label,
96
- value = "",
97
- onChange,
98
- size = "small",
99
- style,
100
- disabled = false,
101
- onClear,
102
- multiple = false,
103
- defaultEditMode = false,
104
- renderValue,
105
- children
106
- }) => {
107
- const classes = useStyles();
108
- const wrapperRef = import_react.default.useRef(null);
109
- const [editMode, setEditMode] = import_react.default.useState(defaultEditMode);
110
- import_react.default.useEffect(() => {
111
- const handleClickOutside = (event) => {
112
- if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
113
- setEditMode(false);
114
- }
115
- };
116
- if (editMode) {
117
- document.addEventListener("mousedown", handleClickOutside);
118
- }
119
- return () => {
120
- document.removeEventListener("mousedown", handleClickOutside);
121
- };
122
- }, [editMode]);
123
- const isValueEmpty = multiple && Array.isArray(value) ? value.length === 0 : value === "";
124
- const handleClear = (event) => {
125
- event.stopPropagation();
126
- if (onClear) {
127
- onClear();
128
- setEditMode(false);
129
- } else {
130
- const fakeEvent = {
131
- target: { name, value: multiple ? [] : "" }
132
- };
133
- onChange(fakeEvent);
134
- }
135
- };
136
- if (editMode) {
137
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
138
- import_material.FormControl,
139
- {
140
- variant: "outlined",
141
- size,
142
- style,
143
- disabled,
144
- fullWidth: true,
145
- children: [
146
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.InputLabel, { id: `${name}-select-label`, children: label }),
147
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
148
- import_material.Select,
149
- {
150
- labelId: `${name}-select-label`,
151
- id: `${name}-select`,
152
- name,
153
- multiple,
154
- value: multiple ? value == null ? void 0 : value.split(", ") : value,
155
- onChange,
156
- onBlur: () => setEditMode(false),
157
- onClose: () => setEditMode(false),
158
- label,
159
- input: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
160
- import_material.OutlinedInput,
161
- {
162
- size,
163
- color: "primary",
164
- endAdornment: onClear && !isValueEmpty ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.InputAdornment, { position: "end", sx: { gap: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
165
- import_material.IconButton,
166
- {
167
- "aria-label": `clear ${name}`,
168
- onClick: handleClear,
169
- edge: "end",
170
- size: "small",
171
- sx: { mr: 1 },
172
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_material.Clear, { fontSize: "inherit" })
173
- }
174
- ) }) : null,
175
- label,
176
- name,
177
- sx: {
178
- paddingRight: !isValueEmpty ? 2 : void 0,
179
- borderRadius: 1.75,
180
- backdropFilter: "blur(10px)",
181
- "& .MuiOutlinedInput-notchedOutline": {
182
- borderColor: (0, import_styles.alpha)("#FFFFFF", 0.6)
183
- }
184
- }
185
- }
186
- ),
187
- renderValue,
188
- children
189
- }
190
- )
191
- ]
192
- }
193
- );
194
- }
195
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
196
- "div",
197
- {
198
- onClick: () => {
199
- if (!disabled) {
200
- setEditMode(true);
201
- }
202
- },
203
- className: classes.defaultMode,
204
- children: [
205
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.FormLabel, { className: classes.formLabel, children: label }),
206
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, { className: classes.formValue, children: renderValue ? renderValue(value) : (0, import_common_library.prettifyString)(value) })
207
- ]
208
- }
209
- );
210
- };
211
- var ClearableSelect_default = ClearableSelect;
212
-
213
- // src/TabPanel.tsx
214
- var import_material2 = require("@mui/material");
215
- var import_jsx_runtime2 = require("react/jsx-runtime");
216
63
  var TabPanel = (props) => {
217
64
  const { children, value, index, ...other } = props;
218
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
65
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
219
66
  "div",
220
67
  {
221
68
  role: "tabpanel",
222
69
  hidden: value !== index,
223
70
  id: `simple-tabpanel-${index}`,
224
71
  ...other,
225
- children: value === index && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.Box, { sx: { p: 1 }, children })
72
+ children: value === index && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Box, { sx: { p: 1 }, children })
226
73
  }
227
74
  );
228
75
  };
229
76
  var TabPanel_default = TabPanel;
230
77
 
231
78
  // src/TablePagination.tsx
232
- var React2 = __toESM(require("react"));
79
+ var React = __toESM(require("react"));
233
80
  var import_TablePagination = __toESM(require("@mui/material/TablePagination"));
234
81
  var import_tablePaginationClasses = __toESM(require("@mui/material/TablePagination/tablePaginationClasses"));
235
- var import_styles3 = require("@mui/material/styles");
236
- var import_jsx_runtime3 = require("react/jsx-runtime");
82
+ var import_styles = require("@mui/material/styles");
83
+ var import_jsx_runtime2 = require("react/jsx-runtime");
237
84
  function mergeSx(...parts) {
238
85
  const flat = [];
239
86
  for (const p of parts) {
@@ -341,7 +188,7 @@ var rootSx = {
341
188
  }
342
189
  }
343
190
  };
344
- var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
191
+ var TablePagination = React.forwardRef(function TablePagination2(props, ref) {
345
192
  var _a2, _b;
346
193
  const {
347
194
  sx,
@@ -372,12 +219,12 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
372
219
  minWidth: 64,
373
220
  fontSize: theme.typography.body2.fontSize,
374
221
  backdropFilter: "blur(10px)",
375
- backgroundColor: (0, import_styles3.alpha)(
222
+ backgroundColor: (0, import_styles.alpha)(
376
223
  theme.palette.background.paper,
377
224
  theme.palette.mode === "dark" ? 0.2 : 0.74
378
225
  ),
379
226
  "& .MuiOutlinedInput-notchedOutline": {
380
- borderColor: (0, import_styles3.alpha)(
227
+ borderColor: (0, import_styles.alpha)(
381
228
  "#FFFFFF",
382
229
  theme.palette.mode === "dark" ? 0.16 : 0.56
383
230
  )
@@ -399,7 +246,7 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
399
246
  slotSelectSx
400
247
  )
401
248
  };
402
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
249
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
403
250
  import_TablePagination.default,
404
251
  {
405
252
  ref,
@@ -420,14 +267,14 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
420
267
  var TablePagination_default = TablePagination;
421
268
 
422
269
  // src/index.tsx
423
- var import_styles19 = require("@mui/material/styles");
424
- var import_styles20 = require("@mui/styles");
270
+ var import_styles17 = require("@mui/material/styles");
271
+ var import_styles18 = require("@mui/styles");
425
272
 
426
273
  // src/Logo.tsx
427
- var import_react2 = require("react");
428
- var import_material3 = require("@mui/material");
429
- var import_jsx_runtime4 = require("react/jsx-runtime");
430
- var Logo = (0, import_react2.memo)(
274
+ var import_react = require("react");
275
+ var import_material2 = require("@mui/material");
276
+ var import_jsx_runtime3 = require("react/jsx-runtime");
277
+ var Logo = (0, import_react.memo)(
431
278
  ({
432
279
  loggedIn = false,
433
280
  centered = false,
@@ -437,14 +284,14 @@ var Logo = (0, import_react2.memo)(
437
284
  companyComponent = null
438
285
  }) => {
439
286
  var _a2;
440
- const theme = (0, import_material3.useTheme)();
441
- const mdMatches = (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
287
+ const theme = (0, import_material2.useTheme)();
288
+ const mdMatches = (0, import_material2.useMediaQuery)(theme.breakpoints.down("md"));
442
289
  const maxWidth = mdMatches ? 160 : 320;
443
290
  const companyName = (organization == null ? void 0 : organization.name) || "\u2013";
444
291
  const logoUrl = (_a2 = organization == null ? void 0 : organization.logo) == null ? void 0 : _a2.url;
445
292
  if (centered) {
446
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
447
- import_material3.Grid,
293
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
294
+ import_material2.Grid,
448
295
  {
449
296
  container: true,
450
297
  direction: "column",
@@ -454,8 +301,8 @@ var Logo = (0, import_react2.memo)(
454
301
  sx: { cursor: "pointer" },
455
302
  onClick: handleClick,
456
303
  children: [
457
- (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Grid, { item: true, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
458
- import_material3.Avatar,
304
+ (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
305
+ import_material2.Avatar,
459
306
  {
460
307
  alt: companyName || "avatar",
461
308
  src: logoUrl,
@@ -471,8 +318,8 @@ var Logo = (0, import_react2.memo)(
471
318
  children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
472
319
  }
473
320
  ) : defaultLogo }),
474
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
475
- import_material3.Typography,
321
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Grid, { item: true, sx: { maxWidth, textAlign: "center" }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
322
+ import_material2.Typography,
476
323
  {
477
324
  variant: "h6",
478
325
  sx: {
@@ -482,13 +329,13 @@ var Logo = (0, import_react2.memo)(
482
329
  },
483
330
  children: companyName
484
331
  }
485
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Box, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
332
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { display: "flex", justifyContent: "center" }, children: companyComponent }) })
486
333
  ]
487
334
  }
488
335
  );
489
336
  }
490
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
491
- import_material3.Grid,
337
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
338
+ import_material2.Grid,
492
339
  {
493
340
  container: true,
494
341
  alignItems: "center",
@@ -499,8 +346,8 @@ var Logo = (0, import_react2.memo)(
499
346
  },
500
347
  onClick: handleClick,
501
348
  children: [
502
- (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Box, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
503
- import_material3.Avatar,
349
+ (logoUrl || defaultLogo) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { mr: 1, display: "flex", alignItems: "center" }, children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
350
+ import_material2.Avatar,
504
351
  {
505
352
  alt: companyName || "avatar",
506
353
  src: logoUrl,
@@ -515,8 +362,8 @@ var Logo = (0, import_react2.memo)(
515
362
  children: (companyName == null ? void 0 : companyName.charAt(0)) || "?"
516
363
  }
517
364
  ) : defaultLogo }),
518
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Box, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
519
- import_material3.Typography,
365
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Box, { sx: { maxWidth, flexShrink: 1, minWidth: 0 }, children: loggedIn ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_material2.Tooltip, { title: companyName, placement: "top", arrow: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
366
+ import_material2.Typography,
520
367
  {
521
368
  variant: "h6",
522
369
  noWrap: true,
@@ -539,12 +386,12 @@ var Logo = (0, import_react2.memo)(
539
386
  var Logo_default = Logo;
540
387
 
541
388
  // src/FormDialog.tsx
542
- var import_styles4 = require("@mui/material/styles");
543
- var import_material4 = require("@mui/material");
544
- var import_styles5 = require("@mui/material/styles");
545
- var import_icons_material2 = require("@mui/icons-material");
546
- var import_jsx_runtime5 = require("react/jsx-runtime");
547
- var BootstrapDialog = (0, import_styles4.styled)(import_material4.Dialog)(({ theme }) => ({
389
+ var import_styles2 = require("@mui/material/styles");
390
+ var import_material3 = require("@mui/material");
391
+ var import_styles3 = require("@mui/material/styles");
392
+ var import_icons_material = require("@mui/icons-material");
393
+ var import_jsx_runtime4 = require("react/jsx-runtime");
394
+ var BootstrapDialog = (0, import_styles2.styled)(import_material3.Dialog)(({ theme }) => ({
548
395
  "& .MuiDialog-paper": {
549
396
  borderRadius: "24px"
550
397
  },
@@ -557,8 +404,8 @@ var BootstrapDialog = (0, import_styles4.styled)(import_material4.Dialog)(({ the
557
404
  }));
558
405
  var BootstrapDialogTitle = (props) => {
559
406
  const { children, onClose, ...other } = props;
560
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
561
- import_material4.DialogTitle,
407
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
408
+ import_material3.DialogTitle,
562
409
  {
563
410
  sx: {
564
411
  px: 3,
@@ -574,8 +421,8 @@ var BootstrapDialogTitle = (props) => {
574
421
  ...other,
575
422
  children: [
576
423
  children,
577
- onClose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
578
- import_material4.IconButton,
424
+ onClose ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
425
+ import_material3.IconButton,
579
426
  {
580
427
  onClick: onClose,
581
428
  sx: {
@@ -583,7 +430,7 @@ var BootstrapDialogTitle = (props) => {
583
430
  right: 16,
584
431
  top: 16
585
432
  },
586
- children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_material2.Close, { color: "primary" })
433
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons_material.Close, { color: "primary" })
587
434
  }
588
435
  ) : null
589
436
  ]
@@ -599,9 +446,9 @@ var FormDialog = ({
599
446
  maxWidth = "lg",
600
447
  ...props
601
448
  }) => {
602
- const theme = (0, import_material4.useTheme)();
603
- const mdMatches = (0, import_material4.useMediaQuery)(theme.breakpoints.down("md"));
604
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
449
+ const theme = (0, import_material3.useTheme)();
450
+ const mdMatches = (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
451
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
605
452
  BootstrapDialog,
606
453
  {
607
454
  fullWidth: true,
@@ -610,9 +457,9 @@ var FormDialog = ({
610
457
  maxWidth,
611
458
  fullScreen: mdMatches,
612
459
  children: [
613
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
614
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.DialogContent, { dividers: true, children }),
615
- /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material4.DialogActions, { children: actions })
460
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BootstrapDialogTitle, { onClose: () => setOpen(false), children: title }),
461
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.DialogContent, { dividers: true, children }),
462
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_material3.DialogActions, { children: actions })
616
463
  ]
617
464
  }
618
465
  );
@@ -620,18 +467,18 @@ var FormDialog = ({
620
467
  var FormDialog_default = FormDialog;
621
468
 
622
469
  // src/InputFileUpload.tsx
623
- var import_styles7 = require("@mui/material/styles");
624
- var import_material5 = require("@mui/material");
625
- var import_icons_material3 = require("@mui/icons-material");
470
+ var import_styles5 = require("@mui/material/styles");
471
+ var import_material4 = require("@mui/material");
472
+ var import_icons_material2 = require("@mui/icons-material");
626
473
 
627
474
  // src/glassStyles.ts
628
- var import_styles6 = require("@mui/material/styles");
629
- var glassBorder = (theme) => `1px solid ${(0, import_styles6.alpha)(
475
+ var import_styles4 = require("@mui/material/styles");
476
+ var glassBorder = (theme) => `1px solid ${(0, import_styles4.alpha)(
630
477
  "#FFFFFF",
631
478
  theme.palette.mode === "dark" ? 0.16 : 0.62
632
479
  )}`;
633
480
  var glassSurface = (theme) => ({
634
- background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${(0, import_styles6.alpha)("#1F2937", 0.78)} 0%, ${(0, import_styles6.alpha)("#111827", 0.68)} 100%)` : `linear-gradient(160deg, ${(0, import_styles6.alpha)("#FFFFFF", 0.88)} 0%, ${(0, import_styles6.alpha)("#F5F9FF", 0.72)} 100%)`,
481
+ background: theme.palette.mode === "dark" ? `linear-gradient(160deg, ${(0, import_styles4.alpha)("#1F2937", 0.78)} 0%, ${(0, import_styles4.alpha)("#111827", 0.68)} 100%)` : `linear-gradient(160deg, ${(0, import_styles4.alpha)("#FFFFFF", 0.88)} 0%, ${(0, import_styles4.alpha)("#F5F9FF", 0.72)} 100%)`,
635
482
  border: glassBorder(theme),
636
483
  backdropFilter: "blur(18px) saturate(155%)",
637
484
  WebkitBackdropFilter: "blur(18px) saturate(155%)",
@@ -639,8 +486,8 @@ var glassSurface = (theme) => ({
639
486
  });
640
487
 
641
488
  // src/InputFileUpload.tsx
642
- var import_jsx_runtime6 = require("react/jsx-runtime");
643
- var VisuallyHiddenInput = (0, import_styles7.styled)("input")({
489
+ var import_jsx_runtime5 = require("react/jsx-runtime");
490
+ var VisuallyHiddenInput = (0, import_styles5.styled)("input")({
644
491
  clip: "rect(0 0 0 0)",
645
492
  clipPath: "inset(50%)",
646
493
  height: 1,
@@ -651,15 +498,15 @@ var VisuallyHiddenInput = (0, import_styles7.styled)("input")({
651
498
  whiteSpace: "nowrap",
652
499
  width: 1
653
500
  });
654
- var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
655
- import_material5.Button,
501
+ var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
502
+ import_material4.Button,
656
503
  {
657
504
  role: void 0,
658
505
  component: "label",
659
506
  size: "small",
660
507
  variant: "contained",
661
508
  tabIndex: -1,
662
- startIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material3.CloudUpload, { fontSize: "inherit" }),
509
+ startIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons_material2.CloudUpload, { fontSize: "inherit" }),
663
510
  sx: {
664
511
  ...(theme) => glassSurface(theme),
665
512
  textTransform: "none",
@@ -667,26 +514,26 @@ var InputFileUpload = ({ name = "", onChange = () => null, title = "" }) => /* @
667
514
  px: 2.25,
668
515
  py: 0.75,
669
516
  color: "text.primary",
670
- borderColor: (theme) => (0, import_styles7.alpha)(theme.palette.primary.main, 0.24),
517
+ borderColor: (theme) => (0, import_styles5.alpha)(theme.palette.primary.main, 0.24),
671
518
  "&:hover": {
672
- borderColor: (theme) => (0, import_styles7.alpha)(theme.palette.primary.main, 0.42)
519
+ borderColor: (theme) => (0, import_styles5.alpha)(theme.palette.primary.main, 0.42)
673
520
  }
674
521
  },
675
522
  children: [
676
523
  title,
677
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VisuallyHiddenInput, { type: "file", name, onChange })
524
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHiddenInput, { type: "file", name, onChange })
678
525
  ]
679
526
  }
680
527
  );
681
528
  var InputFileUpload_default = InputFileUpload;
682
529
 
683
530
  // src/ImageUploadAvatar.tsx
684
- var import_react3 = require("react");
685
- var import_material6 = require("@mui/material");
686
- var import_styles8 = require("@mui/material/styles");
687
- var import_icons_material4 = require("@mui/icons-material");
688
- var import_jsx_runtime7 = require("react/jsx-runtime");
689
- var HiddenInput = (0, import_styles8.styled)("input")({
531
+ var import_react2 = require("react");
532
+ var import_material5 = require("@mui/material");
533
+ var import_styles6 = require("@mui/material/styles");
534
+ var import_icons_material3 = require("@mui/icons-material");
535
+ var import_jsx_runtime6 = require("react/jsx-runtime");
536
+ var HiddenInput = (0, import_styles6.styled)("input")({
690
537
  position: "absolute",
691
538
  width: 1,
692
539
  height: 1,
@@ -696,7 +543,7 @@ var HiddenInput = (0, import_styles8.styled)("input")({
696
543
  clip: "rect(0 0 0 0)",
697
544
  border: 0
698
545
  });
699
- var Wrapper = (0, import_styles8.styled)(import_material6.Box, {
546
+ var Wrapper = (0, import_styles6.styled)(import_material5.Box, {
700
547
  shouldForwardProp: (prop) => prop !== "variant" && prop !== "size"
701
548
  })(({ theme, size, variant }) => ({
702
549
  position: "relative",
@@ -704,20 +551,20 @@ var Wrapper = (0, import_styles8.styled)(import_material6.Box, {
704
551
  height: size,
705
552
  borderRadius: variant === "circular" ? "50%" : variant === "rounded" ? theme.shape.borderRadius * 2 : 0,
706
553
  ...glassSurface(theme),
707
- border: `1px dashed ${(0, import_styles8.alpha)(theme.palette.primary.main, 0.28)}`,
554
+ border: `1px dashed ${(0, import_styles6.alpha)(theme.palette.primary.main, 0.28)}`,
708
555
  overflow: "hidden",
709
556
  cursor: "pointer",
710
557
  display: "flex",
711
558
  alignItems: "center",
712
559
  justifyContent: "center"
713
560
  }));
714
- var PreviewImg = (0, import_styles8.styled)("img")({
561
+ var PreviewImg = (0, import_styles6.styled)("img")({
715
562
  width: "100%",
716
563
  height: "100%",
717
564
  objectFit: "cover",
718
565
  display: "block"
719
566
  });
720
- var Overlay = (0, import_styles8.styled)(import_material6.Box)(({ theme }) => ({
567
+ var Overlay = (0, import_styles6.styled)(import_material5.Box)(({ theme }) => ({
721
568
  position: "absolute",
722
569
  inset: 0,
723
570
  display: "flex",
@@ -739,14 +586,14 @@ var Overlay = (0, import_styles8.styled)(import_material6.Box)(({ theme }) => ({
739
586
  "& .uploadIcon": { opacity: 1, transform: "scale(1)" }
740
587
  }
741
588
  }));
742
- var ClearButton = (0, import_styles8.styled)(import_material6.IconButton)(({ theme }) => ({
589
+ var ClearButton = (0, import_styles6.styled)(import_material5.IconButton)(({ theme }) => ({
743
590
  position: "absolute",
744
591
  top: -8,
745
592
  right: -8,
746
593
  ...glassSurface(theme),
747
594
  boxShadow: theme.shadows[2],
748
595
  "&:hover": {
749
- background: (0, import_styles8.alpha)(theme.palette.background.paper, 0.9)
596
+ background: (0, import_styles6.alpha)(theme.palette.background.paper, 0.9)
750
597
  }
751
598
  }));
752
599
  var ImageUploadAvatar = ({
@@ -759,16 +606,16 @@ var ImageUploadAvatar = ({
759
606
  disabled,
760
607
  allowClear = true
761
608
  }) => {
762
- const inputRef = (0, import_react3.useRef)(null);
763
- const [internalSrc, setInternalSrc] = (0, import_react3.useState)(defaultValue != null ? defaultValue : null);
764
- const [hover, setHover] = (0, import_react3.useState)(false);
765
- (0, import_react3.useEffect)(() => {
609
+ const inputRef = (0, import_react2.useRef)(null);
610
+ const [internalSrc, setInternalSrc] = (0, import_react2.useState)(defaultValue != null ? defaultValue : null);
611
+ const [hover, setHover] = (0, import_react2.useState)(false);
612
+ (0, import_react2.useEffect)(() => {
766
613
  if (!defaultValue) return;
767
614
  if (!internalSrc || !internalSrc.startsWith("blob:")) {
768
615
  setInternalSrc(defaultValue);
769
616
  }
770
617
  }, [defaultValue]);
771
- (0, import_react3.useEffect)(() => {
618
+ (0, import_react2.useEffect)(() => {
772
619
  return () => {
773
620
  if (internalSrc == null ? void 0 : internalSrc.startsWith("blob:")) {
774
621
  URL.revokeObjectURL(internalSrc);
@@ -803,7 +650,7 @@ var ImageUploadAvatar = ({
803
650
  setInternalSrc(null);
804
651
  onChange == null ? void 0 : onChange(null, null);
805
652
  };
806
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
653
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
807
654
  Wrapper,
808
655
  {
809
656
  role: "button",
@@ -813,10 +660,10 @@ var ImageUploadAvatar = ({
813
660
  onPointerLeave: () => setHover(false),
814
661
  onClick: triggerPick,
815
662
  children: [
816
- internalSrc && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PreviewImg, { src: internalSrc }),
817
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Overlay, { className: `${!internalSrc ? "empty" : ""} ${hover && !disabled ? "hover" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_material4.CloudUpload, { className: "uploadIcon", fontSize: "large" }) }),
818
- allowClear && internalSrc && !disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClearButton, { size: "small", "aria-label": "Clear image", onClick: handleClear, sx: { m: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons_material4.Close, { fontSize: "inherit" }) }),
819
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HiddenInput, { ref: inputRef, type: "file", name, accept, onChange: handlePick, disabled })
663
+ internalSrc && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PreviewImg, { src: internalSrc }),
664
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Overlay, { className: `${!internalSrc ? "empty" : ""} ${hover && !disabled ? "hover" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material3.CloudUpload, { className: "uploadIcon", fontSize: "large" }) }),
665
+ allowClear && internalSrc && !disabled && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClearButton, { size: "small", "aria-label": "Clear image", onClick: handleClear, sx: { m: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons_material3.Close, { fontSize: "inherit" }) }),
666
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiddenInput, { ref: inputRef, type: "file", name, accept, onChange: handlePick, disabled })
820
667
  ]
821
668
  }
822
669
  );
@@ -824,14 +671,14 @@ var ImageUploadAvatar = ({
824
671
  var ImageUploadAvatar_default = ImageUploadAvatar;
825
672
 
826
673
  // src/FormSnackBar.tsx
827
- var import_react4 = require("react");
828
- var import_material7 = require("@mui/material");
829
- var import_styles9 = require("@mui/material/styles");
674
+ var import_react3 = require("react");
675
+ var import_material6 = require("@mui/material");
676
+ var import_styles7 = require("@mui/material/styles");
830
677
  var import_Close = __toESM(require("@mui/icons-material/Close"));
831
- var import_common_library2 = require("@verma-consulting/common-library");
832
- var import_jsx_runtime8 = require("react/jsx-runtime");
678
+ var import_common_library = require("@verma-consulting/common-library");
679
+ var import_jsx_runtime7 = require("react/jsx-runtime");
833
680
  var _a;
834
- var SNACKBAR_TYPES = (_a = import_common_library2.constants) == null ? void 0 : _a.SNACKBAR_TYPES;
681
+ var SNACKBAR_TYPES = (_a = import_common_library.constants) == null ? void 0 : _a.SNACKBAR_TYPES;
835
682
  var DULL_SNACKBAR_COLORS = {
836
683
  success: "#6B8E6B",
837
684
  warning: "#C97B4B",
@@ -855,12 +702,12 @@ var FormSnackBar = ({
855
702
  autoHideDuration = 3500
856
703
  }) => {
857
704
  var _a2, _b;
858
- const theme = (0, import_styles9.useTheme)();
859
- const [queue, setQueue] = (0, import_react4.useState)([]);
860
- const idRef = (0, import_react4.useRef)(0);
861
- const prevOpenRef = (0, import_react4.useRef)(!!(snackBar == null ? void 0 : snackBar.open));
862
- const prevSignatureRef = (0, import_react4.useRef)("");
863
- const timersRef = (0, import_react4.useRef)(
705
+ const theme = (0, import_styles7.useTheme)();
706
+ const [queue, setQueue] = (0, import_react3.useState)([]);
707
+ const idRef = (0, import_react3.useRef)(0);
708
+ const prevOpenRef = (0, import_react3.useRef)(!!(snackBar == null ? void 0 : snackBar.open));
709
+ const prevSignatureRef = (0, import_react3.useRef)("");
710
+ const timersRef = (0, import_react3.useRef)(
864
711
  {}
865
712
  );
866
713
  const type = (_a2 = snackBar.type) != null ? _a2 : "";
@@ -882,7 +729,7 @@ var FormSnackBar = ({
882
729
  }, autoHideDuration);
883
730
  setSnackBar({ open: false, message: "", type: "" });
884
731
  };
885
- (0, import_react4.useEffect)(() => {
732
+ (0, import_react3.useEffect)(() => {
886
733
  const nextOpen = !!(snackBar == null ? void 0 : snackBar.open);
887
734
  enqueueFromProp();
888
735
  prevOpenRef.current = nextOpen;
@@ -893,7 +740,7 @@ var FormSnackBar = ({
893
740
  delete timersRef.current[id];
894
741
  setQueue((q) => q.filter((item) => item.id !== id));
895
742
  };
896
- (0, import_react4.useEffect)(() => {
743
+ (0, import_react3.useEffect)(() => {
897
744
  return () => {
898
745
  Object.values(timersRef.current).forEach((t) => clearTimeout(t));
899
746
  timersRef.current = {};
@@ -902,12 +749,12 @@ var FormSnackBar = ({
902
749
  const typeStyles = (severity2) => {
903
750
  const baseHex = severity2 === "success" ? DULL_SNACKBAR_COLORS.success : severity2 === "error" ? DULL_SNACKBAR_COLORS.error : severity2 === "warning" ? DULL_SNACKBAR_COLORS.warning : DULL_SNACKBAR_COLORS.info;
904
751
  return {
905
- bg: theme.palette.mode === "dark" ? (0, import_styles9.alpha)(baseHex, 0.34) : (0, import_styles9.alpha)(baseHex, 0.24),
752
+ bg: theme.palette.mode === "dark" ? (0, import_styles7.alpha)(baseHex, 0.34) : (0, import_styles7.alpha)(baseHex, 0.24),
906
753
  text: theme.palette.mode === "dark" ? "rgba(255,255,255,0.94)" : baseHex,
907
754
  icon: baseHex
908
755
  };
909
756
  };
910
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
757
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
911
758
  "div",
912
759
  {
913
760
  "aria-live": "polite",
@@ -926,8 +773,8 @@ var FormSnackBar = ({
926
773
  children: queue.map((item) => {
927
774
  const localSeverity = isSnackbarType(item.type) ? item.type : "info";
928
775
  const colors = typeStyles(localSeverity);
929
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material7.Grow, { in: true, timeout: 280, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
930
- import_material7.Alert,
776
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material6.Grow, { in: true, timeout: 280, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
777
+ import_material6.Alert,
931
778
  {
932
779
  variant: "filled",
933
780
  severity: localSeverity,
@@ -943,7 +790,7 @@ var FormSnackBar = ({
943
790
  color: colors.text,
944
791
  backdropFilter: "blur(14px) saturate(150%)",
945
792
  WebkitBackdropFilter: "blur(14px) saturate(150%)",
946
- border: `1px solid ${(0, import_styles9.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
793
+ border: `1px solid ${(0, import_styles7.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
947
794
  "& .MuiAlert-icon": {
948
795
  color: colors.icon
949
796
  },
@@ -954,14 +801,14 @@ var FormSnackBar = ({
954
801
  letterSpacing: "-0.01em"
955
802
  }
956
803
  },
957
- action: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
958
- import_material7.IconButton,
804
+ action: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
805
+ import_material6.IconButton,
959
806
  {
960
807
  "aria-label": "close",
961
808
  color: "inherit",
962
809
  size: "small",
963
810
  onClick: () => handleDismiss(item.id),
964
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Close.default, { fontSize: "small" })
811
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Close.default, { fontSize: "small" })
965
812
  }
966
813
  ),
967
814
  children: item.message
@@ -974,11 +821,11 @@ var FormSnackBar = ({
974
821
  var FormSnackBar_default = FormSnackBar;
975
822
 
976
823
  // src/Loader.tsx
977
- var import_material8 = require("@mui/material");
978
- var import_styles10 = require("@mui/styles");
979
- var import_styles11 = require("@mui/material/styles");
980
- var import_jsx_runtime9 = require("react/jsx-runtime");
981
- var useStyles2 = (0, import_styles10.makeStyles)({
824
+ var import_material7 = require("@mui/material");
825
+ var import_styles8 = require("@mui/styles");
826
+ var import_styles9 = require("@mui/material/styles");
827
+ var import_jsx_runtime8 = require("react/jsx-runtime");
828
+ var useStyles = (0, import_styles8.makeStyles)({
982
829
  "@keyframes pulse": {
983
830
  "0%": { transform: "scale(1)", opacity: 0.9 },
984
831
  "50%": { transform: "scale(1.05)", opacity: 1 },
@@ -989,9 +836,9 @@ var useStyles2 = (0, import_styles10.makeStyles)({
989
836
  }
990
837
  });
991
838
  var Loader = ({ size = 48, color = "primary" }) => {
992
- const classes = useStyles2();
993
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
994
- import_material8.Backdrop,
839
+ const classes = useStyles();
840
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
841
+ import_material7.Backdrop,
995
842
  {
996
843
  open: true,
997
844
  sx: {
@@ -999,8 +846,8 @@ var Loader = ({ size = 48, color = "primary" }) => {
999
846
  backgroundColor: "transparent",
1000
847
  backdropFilter: "blur(10px) saturate(145%)"
1001
848
  },
1002
- children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1003
- import_material8.CircularProgress,
849
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
850
+ import_material7.CircularProgress,
1004
851
  {
1005
852
  size,
1006
853
  color,
@@ -1010,7 +857,7 @@ var Loader = ({ size = 48, color = "primary" }) => {
1010
857
  p: 1,
1011
858
  borderRadius: "50%",
1012
859
  backgroundColor: "transparent",
1013
- border: (theme) => `1px solid ${(0, import_styles11.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`,
860
+ border: (theme) => `1px solid ${(0, import_styles9.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.14 : 0.56)}`,
1014
861
  boxShadow: (theme) => theme.palette.mode === "dark" ? "0 10px 24px rgba(0,0,0,0.32)" : "0 10px 20px rgba(15,23,42,0.14)"
1015
862
  }
1016
863
  }
@@ -1021,8 +868,8 @@ var Loader = ({ size = 48, color = "primary" }) => {
1021
868
  var Loader_default = Loader;
1022
869
 
1023
870
  // src/SkeletonBar.tsx
1024
- var import_material9 = require("@mui/material");
1025
- var import_jsx_runtime10 = require("react/jsx-runtime");
871
+ var import_material8 = require("@mui/material");
872
+ var import_jsx_runtime9 = require("react/jsx-runtime");
1026
873
  var SHIMMER_KEYFRAMES = {
1027
874
  "@keyframes skeletonShimmer": {
1028
875
  "0%": { backgroundPosition: "200% 0" },
@@ -1035,11 +882,11 @@ var SkeletonBar = ({
1035
882
  sx = {}
1036
883
  }) => {
1037
884
  var _a2, _b, _c, _d, _e, _f, _g, _h;
1038
- const theme = (0, import_material9.useTheme)();
885
+ const theme = (0, import_material8.useTheme)();
1039
886
  const base = theme.palette.mode === "dark" ? (_b = (_a2 = theme.palette.grey) == null ? void 0 : _a2[700]) != null ? _b : "#424242" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[200]) != null ? _d : "#e0e0e0";
1040
887
  const highlight = theme.palette.mode === "dark" ? (_f = (_e = theme.palette.grey) == null ? void 0 : _e[600]) != null ? _f : "#616161" : (_h = (_g = theme.palette.grey) == null ? void 0 : _g[100]) != null ? _h : "#f5f5f5";
1041
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1042
- import_material9.Box,
888
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
889
+ import_material8.Box,
1043
890
  {
1044
891
  sx: {
1045
892
  ...SHIMMER_KEYFRAMES,
@@ -1059,17 +906,17 @@ var SkeletonBar = ({
1059
906
  var SkeletonBar_default = SkeletonBar;
1060
907
 
1061
908
  // src/EmptyState.tsx
1062
- var import_react5 = __toESM(require("react"));
1063
- var import_material10 = require("@mui/material");
1064
- var import_icons_material5 = require("@mui/icons-material");
1065
- var import_jsx_runtime11 = require("react/jsx-runtime");
909
+ var import_react4 = __toESM(require("react"));
910
+ var import_material9 = require("@mui/material");
911
+ var import_icons_material4 = require("@mui/icons-material");
912
+ var import_jsx_runtime10 = require("react/jsx-runtime");
1066
913
  var EmptyState = ({ label, m = 8, icon }) => {
1067
- const theme = (0, import_material10.useTheme)();
914
+ const theme = (0, import_material9.useTheme)();
1068
915
  const text = label != null ? label : "No data created yet";
1069
916
  const iconColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.42)" : "rgba(0,0,0,0.42)";
1070
917
  const labelColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.50)" : "rgba(0,0,0,0.38)";
1071
- const iconEl = icon != null && import_react5.default.isValidElement(icon) ? icon : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1072
- import_icons_material5.DatasetOutlined,
918
+ const iconEl = icon != null && import_react4.default.isValidElement(icon) ? icon : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
919
+ import_icons_material4.DatasetOutlined,
1073
920
  {
1074
921
  sx: {
1075
922
  fontSize: 48,
@@ -1078,8 +925,8 @@ var EmptyState = ({ label, m = 8, icon }) => {
1078
925
  }
1079
926
  }
1080
927
  );
1081
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
1082
- import_material10.Box,
928
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
929
+ import_material9.Box,
1083
930
  {
1084
931
  sx: {
1085
932
  display: "flex",
@@ -1094,8 +941,8 @@ var EmptyState = ({ label, m = 8, icon }) => {
1094
941
  },
1095
942
  children: [
1096
943
  iconEl,
1097
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1098
- import_material10.Typography,
944
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
945
+ import_material9.Typography,
1099
946
  {
1100
947
  variant: "body2",
1101
948
  align: "center",
@@ -1117,9 +964,9 @@ var EmptyState = ({ label, m = 8, icon }) => {
1117
964
  var EmptyState_default = EmptyState;
1118
965
 
1119
966
  // src/Pill.tsx
1120
- var import_material11 = require("@mui/material");
1121
- var import_styles12 = require("@mui/material/styles");
1122
- var import_jsx_runtime12 = require("react/jsx-runtime");
967
+ var import_material10 = require("@mui/material");
968
+ var import_styles10 = require("@mui/material/styles");
969
+ var import_jsx_runtime11 = require("react/jsx-runtime");
1123
970
  var Pill = ({
1124
971
  variant = "filter",
1125
972
  leftIcon = null,
@@ -1130,9 +977,9 @@ var Pill = ({
1130
977
  label = "",
1131
978
  disabled = false
1132
979
  }) => {
1133
- const theme = (0, import_styles12.useTheme)();
1134
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1135
- import_material11.Button,
980
+ const theme = (0, import_styles10.useTheme)();
981
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
982
+ import_material10.Button,
1136
983
  {
1137
984
  variant: isSelected ? "contained" : "outlined",
1138
985
  color: color || "primary",
@@ -1142,18 +989,18 @@ var Pill = ({
1142
989
  padding: "8px 16px",
1143
990
  minHeight: 38,
1144
991
  textTransform: "none",
1145
- borderColor: isSelected ? (0, import_styles12.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles12.alpha)(theme.palette.text.primary, 0.18),
992
+ borderColor: isSelected ? (0, import_styles10.alpha)(theme.palette.primary.main, 0.34) : (0, import_styles10.alpha)(theme.palette.text.primary, 0.18),
1146
993
  color: isSelected ? "primary.main" : "text.primary",
1147
994
  "&:hover": {
1148
- borderColor: (0, import_styles12.alpha)(theme.palette.primary.main, 0.42),
995
+ borderColor: (0, import_styles10.alpha)(theme.palette.primary.main, 0.42),
1149
996
  boxShadow: theme.palette.mode === "dark" ? "0 10px 22px rgba(0,0,0,0.34)" : "0 10px 20px rgba(15,23,42,0.14)"
1150
997
  }
1151
998
  },
1152
999
  onClick,
1153
1000
  disabled,
1154
- children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
1155
- leftIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1156
- import_material11.Icon,
1001
+ children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
1002
+ leftIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1003
+ import_material10.Icon,
1157
1004
  {
1158
1005
  className: leftIcon,
1159
1006
  fontSize: 14,
@@ -1162,9 +1009,9 @@ var Pill = ({
1162
1009
  "data-testid": "pill-left-icon"
1163
1010
  }
1164
1011
  ),
1165
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_material11.Typography, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
1166
- rightIcon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
1167
- import_material11.Icon,
1012
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_material10.Typography, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
1013
+ rightIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
1014
+ import_material10.Icon,
1168
1015
  {
1169
1016
  className: rightIcon,
1170
1017
  fontSize: 14,
@@ -1180,10 +1027,10 @@ var Pill = ({
1180
1027
  var Pill_default = Pill;
1181
1028
 
1182
1029
  // src/IOSSwitch.tsx
1183
- var import_styles13 = require("@mui/material/styles");
1030
+ var import_styles11 = require("@mui/material/styles");
1184
1031
  var import_Switch = __toESM(require("@mui/material/Switch"));
1185
- var import_jsx_runtime13 = require("react/jsx-runtime");
1186
- var IOSSwitch = (0, import_styles13.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
1032
+ var import_jsx_runtime12 = require("react/jsx-runtime");
1033
+ var IOSSwitch = (0, import_styles11.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
1187
1034
  width: 46,
1188
1035
  height: 30,
1189
1036
  padding: 0,
@@ -1195,7 +1042,7 @@ var IOSSwitch = (0, import_styles13.styled)((props) => /* @__PURE__ */ (0, impor
1195
1042
  transform: "translateX(16px)",
1196
1043
  color: "#fff",
1197
1044
  "& + .MuiSwitch-track": {
1198
- background: `linear-gradient(120deg, ${(0, import_styles13.alpha)(theme.palette.primary.light, 0.92)} 0%, ${(0, import_styles13.alpha)(theme.palette.primary.main, 0.94)} 100%)`,
1045
+ background: `linear-gradient(120deg, ${(0, import_styles11.alpha)(theme.palette.primary.light, 0.92)} 0%, ${(0, import_styles11.alpha)(theme.palette.primary.main, 0.94)} 100%)`,
1199
1046
  opacity: 1,
1200
1047
  border: 0
1201
1048
  },
@@ -1223,7 +1070,7 @@ var IOSSwitch = (0, import_styles13.styled)((props) => /* @__PURE__ */ (0, impor
1223
1070
  "& .MuiSwitch-track": {
1224
1071
  borderRadius: 30 / 2,
1225
1072
  background: theme.palette.mode === "light" ? "linear-gradient(120deg, rgba(245,248,255,0.92) 0%, rgba(224,232,245,0.92) 100%)" : "linear-gradient(120deg, rgba(55,65,81,0.74) 0%, rgba(31,41,55,0.8) 100%)",
1226
- border: `1px solid ${(0, import_styles13.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
1073
+ border: `1px solid ${(0, import_styles11.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.56)}`,
1227
1074
  backdropFilter: "blur(10px) saturate(145%)",
1228
1075
  WebkitBackdropFilter: "blur(10px) saturate(145%)",
1229
1076
  opacity: 1,
@@ -1235,30 +1082,43 @@ var IOSSwitch = (0, import_styles13.styled)((props) => /* @__PURE__ */ (0, impor
1235
1082
  var IOSSwitch_default = IOSSwitch;
1236
1083
 
1237
1084
  // src/StatusPill.tsx
1238
- var import_material12 = require("@mui/material");
1239
- var import_styles14 = require("@mui/material/styles");
1240
- var import_common_library3 = require("@verma-consulting/common-library");
1241
- var import_jsx_runtime14 = require("react/jsx-runtime");
1085
+ var import_material11 = require("@mui/material");
1086
+ var import_styles12 = require("@mui/material/styles");
1087
+ var import_common_library2 = require("@verma-consulting/common-library");
1088
+ var import_jsx_runtime13 = require("react/jsx-runtime");
1242
1089
  var statusColorMap = {
1243
- [import_common_library3.userStatus.Pending]: "warning",
1244
- [import_common_library3.userStatus.Active]: "success",
1245
- [import_common_library3.userStatus.Inactive]: "error",
1246
- [import_common_library3.userStatus.Invited]: "info"
1090
+ [import_common_library2.userStatus.Pending]: "#B06A00",
1091
+ [import_common_library2.userStatus.Active]: "#087443",
1092
+ [import_common_library2.userStatus.Inactive]: "#B42318",
1093
+ [import_common_library2.userStatus.Invited]: "#175CD3"
1247
1094
  };
1248
1095
  var StatusPill = ({ status }) => {
1249
- const theme = (0, import_styles14.useTheme)();
1250
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1251
- import_material12.Chip,
1096
+ var _a2, _b, _c;
1097
+ const theme = (0, import_styles12.useTheme)();
1098
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
1099
+ import_material11.Chip,
1252
1100
  {
1253
1101
  label: status,
1254
- color: statusColorMap[status],
1255
- variant: "filled",
1102
+ variant: "outlined",
1256
1103
  sx: {
1257
1104
  ...glassSurface(theme),
1105
+ minHeight: 38,
1258
1106
  fontWeight: 700,
1259
1107
  borderRadius: "999px",
1260
- px: 1,
1261
- borderColor: (0, import_styles14.alpha)(theme.palette.text.primary, 0.14)
1108
+ px: 1.25,
1109
+ letterSpacing: "0.01em",
1110
+ color: (_a2 = statusColorMap[status]) != null ? _a2 : theme.palette.text.primary,
1111
+ backgroundColor: (0, import_styles12.alpha)(
1112
+ (_b = statusColorMap[status]) != null ? _b : theme.palette.text.primary,
1113
+ theme.palette.mode === "dark" ? 0.24 : 0.12
1114
+ ),
1115
+ borderColor: (0, import_styles12.alpha)(
1116
+ (_c = statusColorMap[status]) != null ? _c : theme.palette.text.primary,
1117
+ theme.palette.mode === "dark" ? 0.36 : 0.28
1118
+ ),
1119
+ "& .MuiChip-label": {
1120
+ px: 1.25
1121
+ }
1262
1122
  }
1263
1123
  }
1264
1124
  );
@@ -1266,12 +1126,12 @@ var StatusPill = ({ status }) => {
1266
1126
  var StatusPill_default = StatusPill;
1267
1127
 
1268
1128
  // src/FormPopover.tsx
1269
- var import_react6 = require("react");
1270
- var import_material13 = require("@mui/material");
1271
- var import_icons_material6 = require("@mui/icons-material");
1272
- var import_jsx_runtime15 = require("react/jsx-runtime");
1129
+ var import_react5 = require("react");
1130
+ var import_material12 = require("@mui/material");
1131
+ var import_icons_material5 = require("@mui/icons-material");
1132
+ var import_jsx_runtime14 = require("react/jsx-runtime");
1273
1133
  var FormPopover = ({ row, children, title }) => {
1274
- const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
1134
+ const [anchorEl, setAnchorEl] = (0, import_react5.useState)(null);
1275
1135
  const handleClick = (event) => {
1276
1136
  setAnchorEl(event.currentTarget);
1277
1137
  };
@@ -1279,9 +1139,9 @@ var FormPopover = ({ row, children, title }) => {
1279
1139
  setAnchorEl(null);
1280
1140
  };
1281
1141
  const open = Boolean(anchorEl);
1282
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
1283
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1284
- import_material13.IconButton,
1142
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
1143
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material12.Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1144
+ import_material12.IconButton,
1285
1145
  {
1286
1146
  onClick: handleClick,
1287
1147
  size: "small",
@@ -1295,11 +1155,11 @@ var FormPopover = ({ row, children, title }) => {
1295
1155
  backgroundColor: "#f0f0f0"
1296
1156
  }
1297
1157
  },
1298
- children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material6.MoreHoriz, { fontSize: "inherit", color: "primary" })
1158
+ children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material5.MoreHoriz, { fontSize: "inherit", color: "primary" })
1299
1159
  }
1300
1160
  ) }),
1301
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1302
- import_material13.Popover,
1161
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
1162
+ import_material12.Popover,
1303
1163
  {
1304
1164
  open,
1305
1165
  anchorEl,
@@ -1316,19 +1176,19 @@ var FormPopover = ({ row, children, title }) => {
1316
1176
  var FormPopover_default = FormPopover;
1317
1177
 
1318
1178
  // src/SearchableSelect.tsx
1319
- var import_react7 = __toESM(require("react"));
1320
- var import_material14 = require("@mui/material");
1321
- var import_styles15 = require("@mui/material/styles");
1322
- var import_icons_material7 = require("@mui/icons-material");
1323
- var import_styles16 = require("@mui/styles");
1324
- var import_jsx_runtime16 = require("react/jsx-runtime");
1325
- var useStyles3 = (0, import_styles16.makeStyles)((theme) => ({
1179
+ var import_react6 = __toESM(require("react"));
1180
+ var import_material13 = require("@mui/material");
1181
+ var import_styles13 = require("@mui/material/styles");
1182
+ var import_icons_material6 = require("@mui/icons-material");
1183
+ var import_styles14 = require("@mui/styles");
1184
+ var import_jsx_runtime15 = require("react/jsx-runtime");
1185
+ var useStyles2 = (0, import_styles14.makeStyles)((theme) => ({
1326
1186
  defaultMode: {
1327
1187
  margin: "4px",
1328
1188
  padding: "14px 8px",
1329
1189
  cursor: "pointer",
1330
1190
  borderRadius: 14,
1331
- border: `1px solid ${(0, import_styles15.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
1191
+ border: `1px solid ${(0, import_styles13.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
1332
1192
  backdropFilter: "blur(14px) saturate(150%)",
1333
1193
  background: theme.palette.mode === "dark" ? "linear-gradient(160deg, rgba(31,41,55,0.78), rgba(17,24,39,0.68))" : "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))",
1334
1194
  "&:hover": {
@@ -1344,7 +1204,7 @@ var useStyles3 = (0, import_styles16.makeStyles)((theme) => ({
1344
1204
  whiteSpace: "pre-wrap"
1345
1205
  }
1346
1206
  }));
1347
- var SearchableSelect = import_react7.default.memo(
1207
+ var SearchableSelect = import_react6.default.memo(
1348
1208
  ({
1349
1209
  name,
1350
1210
  label,
@@ -1358,14 +1218,14 @@ var SearchableSelect = import_react7.default.memo(
1358
1218
  defaultEditMode = false,
1359
1219
  multiple = false
1360
1220
  }) => {
1361
- const theme = (0, import_styles15.useTheme)();
1362
- const classes = useStyles3();
1363
- const wrapperRef = (0, import_react7.useRef)(null);
1364
- const inputRef = (0, import_react7.useRef)(null);
1365
- const [editMode, setEditMode] = (0, import_react7.useState)(defaultEditMode);
1366
- const [open, setOpen] = (0, import_react7.useState)(defaultEditMode);
1221
+ const theme = (0, import_styles13.useTheme)();
1222
+ const classes = useStyles2();
1223
+ const wrapperRef = (0, import_react6.useRef)(null);
1224
+ const inputRef = (0, import_react6.useRef)(null);
1225
+ const [editMode, setEditMode] = (0, import_react6.useState)(defaultEditMode);
1226
+ const [open, setOpen] = (0, import_react6.useState)(defaultEditMode);
1367
1227
  const glassBackground = theme.palette.mode === "dark" ? "linear-gradient(160deg, rgba(31,41,55,0.78), rgba(17,24,39,0.68))" : "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))";
1368
- (0, import_react7.useEffect)(() => {
1228
+ (0, import_react6.useEffect)(() => {
1369
1229
  function handleClickOutside(event) {
1370
1230
  if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
1371
1231
  setEditMode(false);
@@ -1379,7 +1239,7 @@ var SearchableSelect = import_react7.default.memo(
1379
1239
  document.removeEventListener("mousedown", handleClickOutside);
1380
1240
  };
1381
1241
  }, [editMode]);
1382
- (0, import_react7.useEffect)(() => {
1242
+ (0, import_react6.useEffect)(() => {
1383
1243
  if (editMode && open && inputRef.current) {
1384
1244
  inputRef.current.focus();
1385
1245
  }
@@ -1394,7 +1254,7 @@ var SearchableSelect = import_react7.default.memo(
1394
1254
  setEditMode(false);
1395
1255
  setOpen(false);
1396
1256
  };
1397
- const selected = (0, import_react7.useMemo)(() => {
1257
+ const selected = (0, import_react6.useMemo)(() => {
1398
1258
  var _a2;
1399
1259
  if (multiple) {
1400
1260
  if (!value.trim()) return [];
@@ -1404,7 +1264,7 @@ var SearchableSelect = import_react7.default.memo(
1404
1264
  return (_a2 = options.find((opt) => opt.value === value)) != null ? _a2 : null;
1405
1265
  }
1406
1266
  }, [value, options, multiple]);
1407
- const displayValue = (0, import_react7.useMemo)(() => {
1267
+ const displayValue = (0, import_react6.useMemo)(() => {
1408
1268
  var _a2;
1409
1269
  if (multiple) {
1410
1270
  if (!Array.isArray(selected)) return "";
@@ -1414,8 +1274,8 @@ var SearchableSelect = import_react7.default.memo(
1414
1274
  }
1415
1275
  }, [selected, multiple]);
1416
1276
  const isValueEmpty = !value.trim();
1417
- return editMode ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1418
- import_material14.Autocomplete,
1277
+ return editMode ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.FormControl, { fullWidth: true, style, disabled, size, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1278
+ import_material13.Autocomplete,
1419
1279
  {
1420
1280
  multiple,
1421
1281
  disableCloseOnSelect: multiple,
@@ -1475,17 +1335,17 @@ var SearchableSelect = import_react7.default.memo(
1475
1335
  sx: {
1476
1336
  background: glassBackground,
1477
1337
  backdropFilter: "blur(12px) saturate(150%)",
1478
- border: `1px solid ${(0, import_styles15.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
1338
+ border: `1px solid ${(0, import_styles13.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
1479
1339
  boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px",
1480
1340
  "& .MuiAutocomplete-option": {
1481
1341
  "&[aria-selected='true']": {
1482
- backgroundColor: (0, import_styles15.alpha)(
1342
+ backgroundColor: (0, import_styles13.alpha)(
1483
1343
  theme.palette.primary.main,
1484
1344
  theme.palette.mode === "dark" ? 0.28 : 0.14
1485
1345
  )
1486
1346
  },
1487
1347
  "&.Mui-focused": {
1488
- backgroundColor: (0, import_styles15.alpha)(
1348
+ backgroundColor: (0, import_styles13.alpha)(
1489
1349
  theme.palette.primary.main,
1490
1350
  theme.palette.mode === "dark" ? 0.2 : 0.1
1491
1351
  )
@@ -1494,8 +1354,8 @@ var SearchableSelect = import_react7.default.memo(
1494
1354
  }
1495
1355
  }
1496
1356
  },
1497
- renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1498
- import_material14.TextField,
1357
+ renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1358
+ import_material13.TextField,
1499
1359
  {
1500
1360
  ...params,
1501
1361
  label,
@@ -1521,15 +1381,15 @@ var SearchableSelect = import_react7.default.memo(
1521
1381
  WebkitTextFillColor: "currentColor"
1522
1382
  },
1523
1383
  "& .MuiOutlinedInput-notchedOutline": {
1524
- borderColor: (0, import_styles15.alpha)(
1384
+ borderColor: (0, import_styles13.alpha)(
1525
1385
  "#FFFFFF",
1526
1386
  theme.palette.mode === "dark" ? 0.18 : 0.6
1527
1387
  )
1528
1388
  }
1529
1389
  },
1530
- endAdornment: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
1531
- !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1532
- import_material14.IconButton,
1390
+ endAdornment: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
1391
+ !isValueEmpty && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
1392
+ import_material13.IconButton,
1533
1393
  {
1534
1394
  "aria-label": `clear ${name}`,
1535
1395
  onClick: handleClear,
@@ -1539,7 +1399,7 @@ var SearchableSelect = import_react7.default.memo(
1539
1399
  boxShadow: "none",
1540
1400
  mr: 0.25
1541
1401
  },
1542
- children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material7.Clear, { fontSize: "inherit" })
1402
+ children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons_material6.Clear, { fontSize: "inherit" })
1543
1403
  }
1544
1404
  ),
1545
1405
  params.InputProps.endAdornment
@@ -1552,7 +1412,7 @@ var SearchableSelect = import_react7.default.memo(
1552
1412
  setOpen(false);
1553
1413
  }
1554
1414
  }
1555
- ) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
1415
+ ) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
1556
1416
  "div",
1557
1417
  {
1558
1418
  ref: wrapperRef,
@@ -1565,8 +1425,8 @@ var SearchableSelect = import_react7.default.memo(
1565
1425
  className: classes.defaultMode,
1566
1426
  style,
1567
1427
  children: [
1568
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.FormLabel, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
1569
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
1428
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.FormLabel, { className: classes.formLabel, sx: { color: "text.secondary" }, children: label }),
1429
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material13.Typography, { className: classes.formValue, sx: { color: "text.primary" }, children: displayValue })
1570
1430
  ]
1571
1431
  }
1572
1432
  );
@@ -1575,10 +1435,10 @@ var SearchableSelect = import_react7.default.memo(
1575
1435
  var SearchableSelect_default = SearchableSelect;
1576
1436
 
1577
1437
  // src/FormDrawer.tsx
1578
- var import_material15 = require("@mui/material");
1579
- var import_styles17 = require("@mui/material/styles");
1580
- var import_icons_material8 = require("@mui/icons-material");
1581
- var import_jsx_runtime17 = require("react/jsx-runtime");
1438
+ var import_material14 = require("@mui/material");
1439
+ var import_styles15 = require("@mui/material/styles");
1440
+ var import_icons_material7 = require("@mui/icons-material");
1441
+ var import_jsx_runtime16 = require("react/jsx-runtime");
1582
1442
  var FormDrawer = ({
1583
1443
  open,
1584
1444
  setOpen,
@@ -1586,10 +1446,10 @@ var FormDrawer = ({
1586
1446
  actions,
1587
1447
  children
1588
1448
  }) => {
1589
- const theme = (0, import_material15.useTheme)();
1590
- const mdMatches = (0, import_material15.useMediaQuery)(theme.breakpoints.down("md"));
1591
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1592
- import_material15.Drawer,
1449
+ const theme = (0, import_material14.useTheme)();
1450
+ const mdMatches = (0, import_material14.useMediaQuery)(theme.breakpoints.down("md"));
1451
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
1452
+ import_material14.Drawer,
1593
1453
  {
1594
1454
  anchor: mdMatches ? "bottom" : "right",
1595
1455
  open,
@@ -1604,15 +1464,15 @@ var FormDrawer = ({
1604
1464
  }
1605
1465
  },
1606
1466
  children: [
1607
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1608
- import_material15.Box,
1467
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1468
+ import_material14.Box,
1609
1469
  {
1610
1470
  p: 3,
1611
- borderBottom: `1px solid ${(0, import_styles17.alpha)(theme.palette.divider, 0.36)}`,
1612
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.Grid, { container: true, children: [
1613
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
1614
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1615
- import_material15.IconButton,
1471
+ borderBottom: `1px solid ${(0, import_styles15.alpha)(theme.palette.divider, 0.36)}`,
1472
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_material14.Grid, { container: true, children: [
1473
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Grid, { item: true, children: title && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Typography, { variant: "h6", fontWeight: "bold", children: title }) }),
1474
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Grid, { item: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1475
+ import_material14.IconButton,
1616
1476
  {
1617
1477
  size: "medium",
1618
1478
  onClick: () => setOpen(false),
@@ -1621,25 +1481,25 @@ var FormDrawer = ({
1621
1481
  top: 8,
1622
1482
  right: 8,
1623
1483
  zIndex: 2,
1624
- backgroundColor: (0, import_styles17.alpha)(theme.palette.background.paper, 0.46)
1484
+ backgroundColor: (0, import_styles15.alpha)(theme.palette.background.paper, 0.46)
1625
1485
  },
1626
- children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons_material8.Close, { fontSize: "inherit" })
1486
+ children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_icons_material7.Close, { fontSize: "inherit" })
1627
1487
  }
1628
1488
  ) })
1629
1489
  ] })
1630
1490
  }
1631
1491
  ),
1632
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_material15.Box, { flex: 1, overflow: "auto", p: 3, children }),
1633
- actions && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1634
- import_material15.Box,
1492
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material14.Box, { flex: 1, overflow: "auto", p: 3, children }),
1493
+ actions && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1494
+ import_material14.Box,
1635
1495
  {
1636
1496
  p: 2,
1637
- borderTop: `1px solid ${(0, import_styles17.alpha)(theme.palette.divider, 0.36)}`,
1497
+ borderTop: `1px solid ${(0, import_styles15.alpha)(theme.palette.divider, 0.36)}`,
1638
1498
  sx: {
1639
1499
  position: "sticky",
1640
1500
  bottom: 0,
1641
1501
  zIndex: 1,
1642
- backgroundColor: (0, import_styles17.alpha)(theme.palette.background.paper, 0.38),
1502
+ backgroundColor: (0, import_styles15.alpha)(theme.palette.background.paper, 0.38),
1643
1503
  backdropFilter: "blur(10px)"
1644
1504
  },
1645
1505
  children: actions
@@ -1652,11 +1512,11 @@ var FormDrawer = ({
1652
1512
  var FormDrawer_default = FormDrawer;
1653
1513
 
1654
1514
  // src/PhoneNumberField.tsx
1655
- var import_react8 = require("react");
1656
- var import_material16 = require("@mui/material");
1657
- var import_styles18 = require("@mui/material/styles");
1658
- var import_common_library4 = require("@verma-consulting/common-library");
1659
- var import_jsx_runtime18 = require("react/jsx-runtime");
1515
+ var import_react7 = require("react");
1516
+ var import_material15 = require("@mui/material");
1517
+ var import_styles16 = require("@mui/material/styles");
1518
+ var import_common_library3 = require("@verma-consulting/common-library");
1519
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1660
1520
  var PhoneNumberField = ({
1661
1521
  value = "",
1662
1522
  onChange,
@@ -1667,25 +1527,25 @@ var PhoneNumberField = ({
1667
1527
  autoFocus = false,
1668
1528
  onBlur
1669
1529
  }) => {
1670
- const theme = (0, import_material16.useTheme)();
1671
- const smMatches = (0, import_material16.useMediaQuery)(theme.breakpoints.down("sm"));
1672
- const countries = import_common_library4.constants.COUNTRIES || [];
1530
+ const theme = (0, import_material15.useTheme)();
1531
+ const smMatches = (0, import_material15.useMediaQuery)(theme.breakpoints.down("sm"));
1532
+ const countries = import_common_library3.constants.COUNTRIES || [];
1673
1533
  const glassInputSx = {
1674
1534
  backdropFilter: "blur(10px) saturate(150%)",
1675
1535
  "& .MuiOutlinedInput-notchedOutline": {
1676
- borderColor: (0, import_styles18.alpha)(
1536
+ borderColor: (0, import_styles16.alpha)(
1677
1537
  "#FFFFFF",
1678
1538
  theme.palette.mode === "dark" ? 0.16 : 0.58
1679
1539
  )
1680
1540
  }
1681
1541
  };
1682
- const [country, setCountry] = (0, import_react8.useState)(defaultCountry);
1683
- const [localNumber, setLocalNumber] = (0, import_react8.useState)("");
1684
- const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
1685
- const [selectOpen, setSelectOpen] = (0, import_react8.useState)(false);
1686
- const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0, import_react8.useState)(false);
1687
- const wrapperRef = (0, import_react8.useRef)(null);
1688
- const parseE164 = (0, import_react8.useCallback)(
1542
+ const [country, setCountry] = (0, import_react7.useState)(defaultCountry);
1543
+ const [localNumber, setLocalNumber] = (0, import_react7.useState)("");
1544
+ const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
1545
+ const [selectOpen, setSelectOpen] = (0, import_react7.useState)(false);
1546
+ const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0, import_react7.useState)(false);
1547
+ const wrapperRef = (0, import_react7.useRef)(null);
1548
+ const parseE164 = (0, import_react7.useCallback)(
1689
1549
  (val) => {
1690
1550
  const cleaned = (val || "").toString().replace(/\D/g, "");
1691
1551
  if (!cleaned) return { dial: "", local: "" };
@@ -1702,7 +1562,7 @@ var PhoneNumberField = ({
1702
1562
  },
1703
1563
  [countries]
1704
1564
  );
1705
- (0, import_react8.useEffect)(() => {
1565
+ (0, import_react7.useEffect)(() => {
1706
1566
  if (isFocused) return;
1707
1567
  if (!value) {
1708
1568
  setLocalNumber("");
@@ -1723,7 +1583,7 @@ var PhoneNumberField = ({
1723
1583
  if (cleaned.length > 6) formatted += "-" + cleaned.slice(6, 10);
1724
1584
  return formatted;
1725
1585
  };
1726
- const commitValue = (0, import_react8.useCallback)(() => {
1586
+ const commitValue = (0, import_react7.useCallback)(() => {
1727
1587
  var _a2;
1728
1588
  const sel = countries.find((c) => c.code === country);
1729
1589
  const dial = (_a2 = sel == null ? void 0 : sel.phone) != null ? _a2 : "";
@@ -1740,7 +1600,7 @@ var PhoneNumberField = ({
1740
1600
  const handleCountryChange = (e) => {
1741
1601
  setCountry(e.target.value);
1742
1602
  };
1743
- (0, import_react8.useEffect)(() => {
1603
+ (0, import_react7.useEffect)(() => {
1744
1604
  const onDocMouseDown = (ev) => {
1745
1605
  if (!wrapperRef.current) return;
1746
1606
  if (wrapperRef.current.contains(ev.target)) return;
@@ -1767,23 +1627,23 @@ var PhoneNumberField = ({
1767
1627
  onBlur == null ? void 0 : onBlur();
1768
1628
  }
1769
1629
  };
1770
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1771
- import_material16.Box,
1630
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1631
+ import_material15.Box,
1772
1632
  {
1773
1633
  ref: wrapperRef,
1774
1634
  onFocusCapture: () => setIsFocused(true),
1775
1635
  onBlurCapture: handleWrapperBlur,
1776
1636
  sx: { display: "flex", alignItems: "center", width: "100%" },
1777
- children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1778
- import_material16.Stack,
1637
+ children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1638
+ import_material15.Stack,
1779
1639
  {
1780
1640
  direction: "row",
1781
1641
  spacing: 0,
1782
1642
  alignItems: "center",
1783
1643
  sx: { width: "100%" },
1784
1644
  children: [
1785
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1786
- import_material16.TextField,
1645
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1646
+ import_material15.TextField,
1787
1647
  {
1788
1648
  select: true,
1789
1649
  value: country,
@@ -1810,7 +1670,7 @@ var PhoneNumberField = ({
1810
1670
  },
1811
1671
  onClose: () => setSelectOpen(false)
1812
1672
  },
1813
- children: countries.map((option) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material16.MenuItem, { value: option.code, children: [
1673
+ children: countries.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.MenuItem, { value: option.code, children: [
1814
1674
  option.code,
1815
1675
  " (+",
1816
1676
  option.phone,
@@ -1818,8 +1678,8 @@ var PhoneNumberField = ({
1818
1678
  ] }, option.code))
1819
1679
  }
1820
1680
  ),
1821
- /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1822
- import_material16.TextField,
1681
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1682
+ import_material15.TextField,
1823
1683
  {
1824
1684
  label,
1825
1685
  value: localNumber ? formatLocalNumber(localNumber) : "",
@@ -1852,7 +1712,6 @@ var PhoneNumberField = ({
1852
1712
  var PhoneNumberField_default = PhoneNumberField;
1853
1713
  // Annotate the CommonJS export names for ESM import in node:
1854
1714
  0 && (module.exports = {
1855
- ClearableSelect,
1856
1715
  EmptyState,
1857
1716
  FormDialog,
1858
1717
  FormDrawer,