@codezee/sixtify-brahma 0.2.201 → 0.2.202

package/packages/shared-components/dist/FormFields/DateRangePicker/DateRangePicker.js

@@ -1,8 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = DateRangePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_date_range_1 = require("react-date-range");
@@ -20,7 +25,7 @@ function DateRangePicker({ control, defaultValue, disabled = false, label, name,
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(react_date_range_1.DateRangePicker, { ranges: range, onChange: (ranges) => {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(react_date_range_1.DateRangePicker, { ranges: range, onChange: (ranges) => {
                     const selectedRange = ranges.selection;
                     if (selectedRange?.endDate &&
                         selectedRange?.startDate &&
@@ -36,5 +41,5 @@ function DateRangePicker({ control, defaultValue, disabled = false, label, name,
                         const endDate = luxon_1.DateTime.fromJSDate(selectedRange.endDate).toISODate();
                         onChange([startDate, endDate]);
                     }
-                }, months: months, direction: "horizontal", calendarFocus: "backwards", staticRanges: [], inputRanges: [], moveRangeOnFirstSelection: false, preventSnapRefocus: true, minDate: minDate, maxDate: maxDate }), error && (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "red", children: helperText })] }));
+                }, months: months, direction: "horizontal", calendarFocus: "backwards", staticRanges: [], inputRanges: [], moveRangeOnFirstSelection: false, preventSnapRefocus: true, minDate: minDate, maxDate: maxDate }), error && (0, jsx_runtime_1.jsx)(Typography_1.default, { color: "red", children: helperText })] }));
 }

package/packages/shared-components/dist/FormFields/DateRangePicker/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/Skeleton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAmCpB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangePicker/Skeleton.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,+CAmCpB,CAAC"}

package/packages/shared-components/dist/FormFields/DateRangePicker/Skeleton.js

@@ -1,16 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const Skeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "10px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", gap: "10px", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { width: 120, height: "18.69px", sx: {
                             transform: "scale(1)",
-                        } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", sx: {
+                        } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "35.69px", sx: {
                             transform: "scale(1)",
-                        } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
+                        } })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { width: 120, height: "18.69px", sx: {
                             transform: "scale(1)",
-                        } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", sx: {
+                        } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "35.69px", sx: {
                             transform: "scale(1)",
                         } })] })] }));
 };

package/packages/shared-components/dist/FormFields/DateRangeSelector/DateRangeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeSelector.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangeSelector/DateRangeSelector.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,IAAI,EAEJ,eAAe,EACf,YAAY,EACb,MAAM,iBAAiB,CAAC;AAWzB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI;IACnD,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,EACvD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,2CAwFrC"}
+{"version":3,"file":"DateRangeSelector.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateRangeSelector/DateRangeSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,OAAO,EACP,WAAW,EACX,IAAI,EAEJ,eAAe,EACf,YAAY,EACb,MAAM,iBAAiB,CAAC;AAOzB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI;IACnD,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EAAE,EACvD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,GACT,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,2CAwFrC"}

package/packages/shared-components/dist/FormFields/DateRangeSelector/DateRangeSelector.js

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangeSelector = DateRangeSelector;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-const material_1 = require("@mui/material");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const Popover_1 = __importDefault(require("@mui/material/Popover"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const luxon_1 = require("luxon");
 const react_1 = require("react");
 const PadBox_1 = require("../../PadBox");
@@ -47,9 +51,9 @@ function DateRangeSelector({ name, watch, control, setValue, }) {
         setAnchorEl(null);
         setShowCustom(false);
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, utils_1.formatDate)(dateField[0] ?? "", "dd MMM yyyy"), " -", (0, utils_1.formatDate)(dateField[1] ?? "", "dd MMM yyyy")] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { component: "div", onClick: handleClick, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, { fontSize: "small" }) }), !!anchorEl && ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: true, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "left" }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: showCustom ? ((0, jsx_runtime_1.jsx)(DateRangePicker_1.DateRangePicker, { name: name, control: control })) : (defaultRanges.map((item) => ((0, jsx_runtime_1.jsx)(material_1.ListItemButton, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "body2", children: [(0, utils_1.formatDate)(dateField[0] ?? "", "dd MMM yyyy"), " -", (0, utils_1.formatDate)(dateField[1] ?? "", "dd MMM yyyy")] }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { component: "div", onClick: handleClick, children: (0, jsx_runtime_1.jsx)(MoreVert_1.default, { fontSize: "small" }) }), !!anchorEl && ((0, jsx_runtime_1.jsx)(Popover_1.default, { open: true, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: "bottom", horizontal: "left" }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: showCustom ? ((0, jsx_runtime_1.jsx)(DateRangePicker_1.DateRangePicker, { name: name, control: control })) : (defaultRanges.map((item) => ((0, jsx_runtime_1.jsx)(ListItemButton_1.default, { sx: {
                             width: "100%",
                             textAlign: "start",
                             padding: "5px 16px 5px 10px",
-                        }, onClick: item.onClick, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", children: item.title }) }, item.title)))) }) }))] }));
+                        }, onClick: item.onClick, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body1", children: item.title }) }, item.title)))) }) }))] }));
 }

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts

@@ -1,9 +1,9 @@
-import type { DateTimePickerProps as MuiDateTimePickerProps } from "@mui/x-date-pickers/DateTimePicker";
-import type { PickerValidDate } from "@mui/x-date-pickers/models";
 import { type ReactElement } from "react";
-import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { Styling } from "../../utils/types";
+import type { DateTimePickerProps as MuiDateTimePickerProps } from "@mui/x-date-pickers/DateTimePicker";
+import type { PickerValidDate } from "@mui/x-date-pickers/models";
+import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
 export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> & MuiDateTimePickerProps<PickerValidDate> & Partial<{
     label: string;
     required: boolean;

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAExG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAc,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,OAAkB,EAClB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAwOxB"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AASA,OAAc,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAK3D,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAQ7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AACxG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,OAAkB,EAClB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CA+OxB"}

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.js

@@ -7,12 +7,17 @@ exports.DateTimePicker = DateTimePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft"));
 const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const styles_1 = require("@mui/material/styles");
+const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 const DateTimePicker_1 = require("@mui/x-date-pickers/DateTimePicker");
 const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const Actions_1 = require("../../Actions");
+const utils_1 = require("../../utils");
 const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
@@ -22,7 +27,7 @@ const hoverTextStyle = (color) => ({
     },
 });
 const LeftArrowIcon = () => {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { iron } = theme.palette.app.color;
     return ((0, jsx_runtime_1.jsx)(ChevronLeft_1.default, { sx: {
             border: `1px solid ${iron[800]}`,
@@ -31,7 +36,7 @@ const LeftArrowIcon = () => {
         } }));
 };
 const RightArrowIcon = () => {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { iron } = theme.palette.app.color;
     return ((0, jsx_runtime_1.jsx)(ChevronRight_1.default, { sx: {
             border: `1px solid ${iron[800]}`,
@@ -42,20 +47,22 @@ const RightArrowIcon = () => {
 function DateTimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, format = "dd-MM-yyyy HH:mm", helperIcon, toolTipText, timeStepsMinutes = 1, styling = "custom", navigationKey, ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
-    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: open, navigationKey });
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
+    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: open, navigationKey: resolvedNavigationKey });
     if (error && value && typeof value === "object") {
         helperText = "Invalid time";
     }
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { iron, butterflyBlue, mirage } = theme.palette.app.color;
     const pickerValue = value
         ? luxon_1.DateTime.fromISO(value)
         : null;
     if (loading) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "350px" }, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling }) }));
+        return ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: { width: "350px" }, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling }) }));
     }
     const EmptyIcon = () => null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => {
                     setOpen(true);
                 }, onClose: () => {
                     setOpen(false);
@@ -71,7 +78,7 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                     clearButton: {
                         tabIndex: clearable ? 0 : -1,
                         onKeyDown: (event) => {
-                            if (navigationKey === "enter" && event.key === "Enter") {
+                            if (resolvedNavigationKey === "enter" && event.key === "Enter") {
                                 handleEnterNavigation(event);
                             }
                         },
@@ -85,7 +92,8 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                         inputRef: setInputRef,
                         InputProps: {
                             endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { showTooltip: false, disabled: disabled, onClick: () => setOpen(true), onKeyDown: (event) => {
-                                    if (navigationKey === "enter" && event.key === "Enter") {
+                                    if (resolvedNavigationKey === "enter" &&
+                                        event.key === "Enter") {
                                         handleEnterNavigation(event);
                                     }
                                 } })),

package/packages/shared-components/dist/FormFields/DateTimePicker/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAqBzD,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/Skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAqBzD,CAAC"}

package/packages/shared-components/dist/FormFields/DateTimePicker/Skeleton.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const Skeleton = ({ label, styling }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "35.69px", width: "100%", sx: {
+                } })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "35.69px", width: "100%", sx: {
                     transform: "scale(1)",
                 } })] }));
 };

package/packages/shared-components/dist/FormFields/DecimalTextField/DecimalTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DecimalTextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DecimalTextField/DecimalTextField.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAkB,EAChB,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,IACrD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CACF,iBAAiB,EACjB,MAAM,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAC5D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,EACtD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,GAAG,EACH,GAAG,EACH,YAAY,EACZ,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,cAAc,EACd,aAAa,EACb,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAqM1B"}
+{"version":3,"file":"DecimalTextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DecimalTextField/DecimalTextField.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAkB,EAChB,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGjD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,IACrD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CACF,iBAAiB,EACjB,MAAM,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAC5D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,EACtD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,GAAG,EACH,GAAG,EACH,YAAY,EACZ,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,cAAc,EACd,aAAa,EACb,KAAK,EACL,GAAG,SAAS,EACb,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAyM1B"}

package/packages/shared-components/dist/FormFields/DecimalTextField/DecimalTextField.js

@@ -14,6 +14,7 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_number_format_1 = require("react-number-format");
 const Tooltip_1 = require("../../Tooltip");
+const utils_1 = require("../../utils");
 const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("../TextField/Skeleton");
@@ -46,7 +47,9 @@ function DecimalTextField({ control, name, decimalScale, defaultFallbackValue, m
         rules: validationRules,
         defaultValue,
     });
-    const { inputRef: navigationInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
+    const { inputRef: navigationInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: resolvedNavigationKey });
     const inputRef = (0, react_1.useRef)(null);
     const parseValue = (val) => {
         if (val === "") {

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/FilePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/FormFields/FileUpload/Dialogs/FilePreview.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAYrD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,QAAQ,CAAC;IACpB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,uBAAuB,oCAAqC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,mBAAoB,CAAC;AAEvD,eAAO,MAAM,qBAAqB,4BAA6B,CAAC;AAEhE,eAAO,MAAM,uBAAuB,4BAA6B,CAAC;AASlE,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,SAAS,MAAM,EAAE,GAC5B,OAAO,CAET;AAED,eAAO,MAAM,WAAW,6GAqUvB,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../../src/FormFields/FileUpload/Dialogs/FilePreview.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAYrD,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,EAAE,QAAQ,CAAC;IACpB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,uBAAuB,oCAAqC,CAAC;AAE1E,eAAO,MAAM,qBAAqB,mBAAoB,CAAC;AAEvD,eAAO,MAAM,qBAAqB,4BAA6B,CAAC;AAEhE,eAAO,MAAM,uBAAuB,4BAA6B,CAAC;AASlE,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,EACX,UAAU,EAAE,SAAS,MAAM,EAAE,GAC5B,OAAO,CAET;AAED,eAAO,MAAM,WAAW,6GAqUvB,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/FilePreview.js

@@ -8,7 +8,10 @@ exports.isFileType = isFileType;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ZoomInOutlined_1 = __importDefault(require("@mui/icons-material/ZoomInOutlined"));
 const ZoomOutOutlined_1 = __importDefault(require("@mui/icons-material/ZoomOutOutlined"));
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const styles_1 = require("@mui/material/styles");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const isFunction_1 = __importDefault(require("lodash/isFunction"));
 const react_1 = require("react");
 const Button_1 = require("../../../Button");
@@ -35,7 +38,7 @@ exports.FilePreview = (0, react_1.forwardRef)(({ fileName, resetTrigger, showAct
     const [zoomLevel, setZoomLevel] = (0, react_1.useState)(1);
     const imageContainerRef = (0, react_1.useRef)(null);
     const { isDesktop } = (0, utils_1.useGetDeviceType)();
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { slate } = theme.palette.app.color;
     const { sensitivity, min, max, step } = DEFAULT_ZOOM_CONFIG;
     const { x: positionX, y: positionY } = position;
@@ -145,14 +148,14 @@ exports.FilePreview = (0, react_1.forwardRef)(({ fileName, resetTrigger, showAct
     }, [zoomLevel, resetZoom, zoomIn, zoomOut]);
     const pointerEvent = isDesktop ? "auto" : "none";
     if (isFileType(fileName, exports.SUPPORTED_PDF_FORMATS)) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: () => window.open(fileName, "_blank"), height: "100%", children: (0, jsx_runtime_1.jsx)("iframe", { src: `${fileName}#toolbar=0`, style: {
+        return ((0, jsx_runtime_1.jsx)(Box_1.default, { onClick: () => window.open(fileName, "_blank"), height: "100%", children: (0, jsx_runtime_1.jsx)("iframe", { src: `${fileName}#toolbar=0`, style: {
                     width: "100%",
                     height: "100%",
                     pointerEvents: pointerEvent,
                 } }) }));
     }
     if (isFileType(fileName, exports.SUPPORTED_IMAGE_FORMATS)) {
-        return ((0, jsx_runtime_1.jsxs)(Layouts_1.FilePreviewContainer, { height: "100%", children: [showActions && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "10px", sx: {
+        return ((0, jsx_runtime_1.jsxs)(Layouts_1.FilePreviewContainer, { height: "100%", children: [showActions && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "10px", sx: {
                         position: "absolute",
                         top: 10,
                         right: 66,
@@ -169,7 +172,7 @@ exports.FilePreview = (0, react_1.forwardRef)(({ fileName, resetTrigger, showAct
                                 backgroundColor: slate[900],
                                 minWidth: "42px",
                                 height: "42px",
-                            }, onClick: zoomIn, children: (0, jsx_runtime_1.jsx)(ZoomInOutlined_1.default, {}) })] })), (0, jsx_runtime_1.jsx)(material_1.Box, { ref: imageContainerRef, style: {
+                            }, onClick: zoomIn, children: (0, jsx_runtime_1.jsx)(ZoomInOutlined_1.default, {}) })] })), (0, jsx_runtime_1.jsx)(Box_1.default, { ref: imageContainerRef, style: {
                         position: "relative",
                         width: "100%",
                         height: "100%",
@@ -188,12 +191,12 @@ exports.FilePreview = (0, react_1.forwardRef)(({ fileName, resetTrigger, showAct
     }
     if (isFileType(fileName, exports.SUPPORTED_DOC_FORMATS) ||
         isFileType(fileName, exports.SUPPORTED_EXCEL_FORMATS)) {
-        return ((0, jsx_runtime_1.jsx)(material_1.Box, { onClick: () => window.open(fileName, "_blank"), height: "100%", children: (0, jsx_runtime_1.jsx)("iframe", { src: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileName)}`, style: {
+        return ((0, jsx_runtime_1.jsx)(Box_1.default, { onClick: () => window.open(fileName, "_blank"), height: "100%", children: (0, jsx_runtime_1.jsx)("iframe", { src: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileName)}`, style: {
                     width: "100%",
                     height: "100%",
                     pointerEvents: pointerEvent,
                 } }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(Layouts_1.FilePreviewContainer, { children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: { textAlign: "center" }, children: "File Preview Not Supported" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Layouts_1.FilePreviewContainer, { children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body1", sx: { textAlign: "center" }, children: "File Preview Not Supported" }) }) }));
 });
 exports.FilePreview.displayName = "FilePreview";

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/ViewFilePreviewDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewFilePreviewDialog.d.ts","sourceRoot":"","sources":["../../../../src/FormFields/FileUpload/Dialogs/ViewFilePreviewDialog.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AASrD,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,8BAInC,0BAA0B,4CAwE5B,CAAC"}
+{"version":3,"file":"ViewFilePreviewDialog.d.ts","sourceRoot":"","sources":["../../../../src/FormFields/FileUpload/Dialogs/ViewFilePreviewDialog.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,8BAInC,0BAA0B,4CAwE5B,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/ViewFilePreviewDialog.js

@@ -1,9 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewFilePreviewDialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
+const RotateLeftOutlined_1 = __importDefault(require("@mui/icons-material/RotateLeftOutlined"));
+const ZoomInOutlined_1 = __importDefault(require("@mui/icons-material/ZoomInOutlined"));
+const ZoomOutOutlined_1 = __importDefault(require("@mui/icons-material/ZoomOutOutlined"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const styles_1 = require("@mui/material/styles");
 const react_1 = require("react");
 const Dialog_1 = require("../../../Dialog");
 const PadBox_1 = require("../../../PadBox");
@@ -11,13 +19,13 @@ const download_1 = require("../../../utils/download");
 const DownloadAction_1 = require("../DownloadAction");
 const FilePreview_1 = require("./FilePreview");
 const ViewFilePreviewDialog = ({ open, onClose, fileName, }) => {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const [zoomLevel, setZoomLevel] = (0, react_1.useState)(0);
     const filePreviewRef = (0, react_1.useRef)(null);
     const { butterflyBlue, slate } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { maxWidth: "lg", onClose: onClose, open: open, title: "View File Preview", actions: (0, jsx_runtime_1.jsxs)(material_1.Stack, { height: 30, minHeight: 30, maxHeight: 30, direction: "row", children: [(0, FilePreview_1.isFileType)(fileName, FilePreview_1.SUPPORTED_IMAGE_FORMATS) && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignContent: "center", justifyContent: "end", children: [zoomLevel !== 1 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => filePreviewRef.current?.resetZoom(), children: (0, jsx_runtime_1.jsx)(icons_material_1.RotateLeft, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => filePreviewRef.current?.zoomIn(), children: (0, jsx_runtime_1.jsx)(icons_material_1.ZoomInOutlined, {}) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => filePreviewRef.current?.zoomOut(), children: (0, jsx_runtime_1.jsx)(icons_material_1.ZoomOutOutlined, {}) })] })), (0, jsx_runtime_1.jsx)(DownloadAction_1.DownloadAction, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { maxWidth: "lg", onClose: onClose, open: open, title: "View File Preview", actions: (0, jsx_runtime_1.jsxs)(Stack_1.default, { height: 30, minHeight: 30, maxHeight: 30, direction: "row", children: [(0, FilePreview_1.isFileType)(fileName, FilePreview_1.SUPPORTED_IMAGE_FORMATS) && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignContent: "center", justifyContent: "end", children: [zoomLevel !== 1 && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => filePreviewRef.current?.resetZoom(), children: (0, jsx_runtime_1.jsx)(RotateLeftOutlined_1.default, {}) })), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => filePreviewRef.current?.zoomIn(), children: (0, jsx_runtime_1.jsx)(ZoomInOutlined_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => filePreviewRef.current?.zoomOut(), children: (0, jsx_runtime_1.jsx)(ZoomOutOutlined_1.default, {}) })] })), (0, jsx_runtime_1.jsx)(DownloadAction_1.DownloadAction, { onClick: () => {
                         (0, download_1.downloadFile)(fileName, fileName);
-                    } })] }), children: (0, jsx_runtime_1.jsx)(material_1.Stack, { bgcolor: butterflyBlue[700], position: "relative", borderRadius: "5px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: { sm: "20px 50px 20px 50px", xs: "0" } }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { bgcolor: slate[600], borderRadius: 1, overflow: "hidden", height: "calc(100vh - 335px)", sx: {
+                    } })] }), children: (0, jsx_runtime_1.jsx)(Stack_1.default, { bgcolor: butterflyBlue[700], position: "relative", borderRadius: "5px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: { sm: "20px 50px 20px 50px", xs: "0" } }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { bgcolor: slate[600], borderRadius: 1, overflow: "hidden", height: "calc(100vh - 335px)", sx: {
                         userSelect: "none",
                     }, children: (0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { ref: filePreviewRef, fileName: fileName, resetTrigger: 1, showActions: false, onZoomChange: (zoomOffset) => {
                             setZoomLevel(zoomOffset);

package/packages/shared-components/dist/FormFields/FileUpload/DownloadAction.d.ts

@@ -1,3 +1,3 @@
-import { type IconButtonProps } from "@mui/material";
+import { type IconButtonProps } from "@mui/material/IconButton";
 export declare const DownloadAction: (props: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DownloadAction.d.ts.map

package/packages/shared-components/dist/FormFields/FileUpload/DownloadAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadAction.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/DownloadAction.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAIjE,eAAO,MAAM,cAAc,GAAI,OAAO,eAAe,4CAcpD,CAAC"}
+{"version":3,"file":"DownloadAction.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/DownloadAction.tsx"],"names":[],"mappings":"AAAA,OAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAK5E,eAAO,MAAM,cAAc,GAAI,OAAO,eAAe,4CAcpD,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/DownloadAction.js

@@ -1,12 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DownloadAction = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 const Svgs_1 = require("../../Svgs");
 const Tooltip_1 = require("../../Tooltip");
 const DownloadAction = (props) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.IconButton, { sx: {
+    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, { sx: {
             height: "30px",
             width: "50px",
         }, ...props, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Download", children: (0, jsx_runtime_1.jsx)(Svgs_1.SvgDownload, { fontColor: "black", fill: "none" }) }) }));

package/packages/shared-components/dist/FormFields/FileUpload/FileNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileNames.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileNames.tsx"],"names":[],"mappings":"AAaA,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0CAIvB,cAAc,4CAmFhB,CAAC"}
+{"version":3,"file":"FileNames.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileNames.tsx"],"names":[],"mappings":"AAkBA,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0CAIvB,cAAc,4CAmFhB,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/FileNames.js

@@ -5,18 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileNames = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const AttachFile_1 = __importDefault(require("@mui/icons-material/AttachFile"));
 const DeleteOutlineOutlined_1 = __importDefault(require("@mui/icons-material/DeleteOutlineOutlined"));
-const material_1 = require("@mui/material");
+const VisibilityOutlined_1 = __importDefault(require("@mui/icons-material/VisibilityOutlined"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const drop_1 = __importDefault(require("lodash/drop"));
 const join_1 = __importDefault(require("lodash/join"));
 const last_1 = __importDefault(require("lodash/last"));
 const split_1 = __importDefault(require("lodash/split"));
 const react_1 = require("react");
 const uuid_1 = require("uuid");
+const Tooltip_1 = require("../../Tooltip");
 const utils_1 = require("../../utils");
 const ViewFilePreviewDialog_1 = require("./Dialogs/ViewFilePreviewDialog");
-const Tooltip_1 = require("../../Tooltip");
 const FileNames = ({ fileNames, previewEnabled = false, onDelete, }) => {
     const [selectedFile, setSelectedFile] = (0, react_1.useState)();
     const { openedDialog, onDialogClose, onDialogOpen } = (0, utils_1.useDialogActions)();
@@ -36,6 +39,6 @@ const FileNames = ({ fileNames, previewEnabled = false, onDelete, }) => {
     const dialogRenderer = {
         viewAttachment: selectedFile && ((0, jsx_runtime_1.jsx)(ViewFilePreviewDialog_1.ViewFilePreviewDialog, { open: openedDialog === "viewAttachment", onClose: onDialogClose, fileName: selectedFile })),
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", maxHeight: "120px", overflow: "auto", children: [names.map((name, index) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5x", alignItems: "center", maxWidth: "80%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(icons_material_1.AttachFile, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: "100%", textOverflow: "clip", children: name })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [previewEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fileNames[index] && handlePreviewClick(fileNames[index]), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Preview", children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}) }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => onDelete(index), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Delete", children: (0, jsx_runtime_1.jsx)(DeleteOutlineOutlined_1.default, {}) }) })] })] }, (0, uuid_1.v4)()))), openedDialog && dialogRenderer[openedDialog]] }));
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", maxHeight: "120px", overflow: "auto", children: [names.map((name, index) => ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", gap: "5x", alignItems: "center", maxWidth: "80%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(AttachFile_1.default, {}), (0, jsx_runtime_1.jsx)(Typography_1.default, { maxWidth: "100%", textOverflow: "clip", children: name })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", children: [previewEnabled && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => fileNames[index] && handlePreviewClick(fileNames[index]), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Preview", children: (0, jsx_runtime_1.jsx)(VisibilityOutlined_1.default, {}) }) })), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => onDelete(index), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Delete", children: (0, jsx_runtime_1.jsx)(DeleteOutlineOutlined_1.default, {}) }) })] })] }, (0, uuid_1.v4)()))), openedDialog && dialogRenderer[openedDialog]] }));
 };
 exports.FileNames = FileNames;

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.d.ts

@@ -1,5 +1,5 @@
-import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
 import { type SupportedFileType } from "../../utils";
+import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
 export type FileUploadProps<P extends FieldValues> = UseControllerProps<P> & {
     multiple?: boolean;
     loading?: boolean;

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAKrB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA6B,EAC7B,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAoSpB"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAMrB,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAAG;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAC7B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;CACX,CAAC;AAEF,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAe,EACf,QAAQ,EACR,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAA6B,EAC7B,WAAsD,EACtD,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAoSpB"}

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.error_with_transaltion = void 0;
 exports.FileUpload = FileUpload;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const styles_1 = require("@mui/material/styles");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const isFunction_1 = __importDefault(require("lodash/isFunction"));
 const isNull_1 = __importDefault(require("lodash/isNull"));
 const react_1 = require("react");
@@ -19,7 +22,7 @@ const FileUpload_styled_1 = require("./FileUpload.styled");
 const Skeleton_1 = require("./Skeleton");
 exports.error_with_transaltion = "error_with_transaltion";
 function FileUpload({ loading = false, onChange, isDisabled, multiple = false, required = false, error, helperText, label, fileNames, size = 10, name, setError, accept = utils_1.SUPPORTED_FILE_TYPES, acceptTitle = "Only JPG, PNG, PDF files are accepted.", ...restProps }) {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { red, iron, black, butterflyBlue } = theme.palette.app.color;
     const { t } = (0, react_i18next_1.useTranslation)();
     const { inputRef, setInputRef } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: "tab" });
@@ -170,16 +173,16 @@ function FileUpload({ loading = false, onChange, isDisabled, multiple = false, r
     }
     const boxShadowIntensity = 0.08 + 0.12 * dragProgress;
     const scale = 1 + 0.02 * dragProgress;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, error: error, disabled: isDisabled, tabIndex: isDisabled ? -1 : 0, role: "button", "aria-label": label ?? "Upload files", sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, error: error, disabled: isDisabled, tabIndex: isDisabled ? -1 : 0, role: "button", "aria-label": label ?? "Upload files", sx: {
                     transform: `scale(${scale})`,
                     transition: "transform 30ms linear",
-                    boxShadow: `0 0px ${12 * dragProgress}px ${(0, material_1.alpha)(black[900], boxShadowIntensity)}`,
+                    boxShadow: `0 0px ${12 * dragProgress}px ${(0, styles_1.alpha)(black[900], boxShadowIntensity)}`,
                     cursor: isDisabled ? "not-allowed" : "pointer",
                     "&:focus-visible": {
                         outline: `2px solid ${butterflyBlue[900]}`,
                         outlineOffset: "2px",
                     },
-                }, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: setInputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(material_1.Typography, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
+                }, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: setInputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(Typography_1.default, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", sx: {
                     color: `${red[900]}`,
                     whiteSpace: "pre",
                     textWrap: "wrap",

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,wBAAwB,CAYnE,CAAC;AAEN,eAAO,MAAM,SAAS,EAAE,aAAa,CACnC,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAG1E,CAAC"}
+{"version":3,"file":"FileUpload.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileUpload.styled.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,wBAAwB,CAYnE,CAAC;AAEN,eAAO,MAAM,SAAS,EAAE,aAAa,CACnC,iBAAiB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAG1E,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.styled.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileInput = exports.FileUploadContainer = void 0;
-const material_1 = require("@mui/material");
-exports.FileUploadContainer = (0, material_1.styled)(material_1.Box)(({ theme, error, disabled }) => ({
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const styles_1 = require("@mui/material/styles");
+exports.FileUploadContainer = (0, styles_1.styled)(Box_1.default)(({ theme, error, disabled }) => ({
     border: error
         ? `2px dashed ${theme.palette.app.color.red[900]}`
         : `2px dashed ${theme.palette.app.color.iron[800]}`,
@@ -14,6 +18,6 @@ exports.FileUploadContainer = (0, material_1.styled)(material_1.Box)(({ theme, e
             : theme.palette.app.color.butterflyBlue[900],
     },
 }));
-exports.FileInput = (0, material_1.styled)("input")({
+exports.FileInput = (0, styles_1.styled)("input")({
     display: "none",
 });

package/packages/shared-components/dist/FormFields/FileUpload/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/Skeleton.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,+CAkBpB,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/Skeleton.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,+CAkBpB,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/Skeleton.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const Skeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 120, height: "18.69px", sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "136px", sx: {
+                } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "136px", sx: {
                     transform: "scale(1)",
                 } })] }));
 };