@codezee/sixtify-brahma 0.2.200 → 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;AAM7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,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,aAAqB,EACrB,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]}`,
@@ -39,23 +44,25 @@ const RightArrowIcon = () => {
             p: "4px",
         } }));
 };
-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 = "tab", ...restProps }) {
+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

@@ -1,5 +1,6 @@
-import { type TextFieldProps as MuiTextFieldProps, type StackProps } from "@mui/material";
-import type { FieldValues, UseControllerProps } from "react-hook-form";
+import { type StackProps } from "@mui/material/Stack";
+import { type TextFieldProps as MuiTextFieldProps } from "@mui/material/TextField";
+import { type FieldValues, type UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { Styling } from "../../utils/types";
 export type DecimalTextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiTextFieldProps, keyof UseControllerProps<P> | "type" | "value" | "onChange"> & {
@@ -12,8 +13,8 @@ export type DecimalTextFieldProps<P extends FieldValues> = UseControllerProps<P>
     defaultFallbackValue?: number;
     min?: number;
     max?: number;
-    customOnChange?: (value: number) => void;
+    customOnChange?: (value?: number) => void;
     navigationKey?: NavigationKey;
 };
-export declare function DecimalTextField<P extends FieldValues>({ control, name, decimalScale, defaultFallbackValue, min, max, defaultValue, label, required, disabled, loading, placeholder, containerProps, styling, infoMessage, customOnChange, navigationKey, ...restProps }: DecimalTextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function DecimalTextField<P extends FieldValues>({ control, name, decimalScale, defaultFallbackValue, min, max, defaultValue, label, required, disabled, loading, placeholder, containerProps, styling, infoMessage, customOnChange, navigationKey, rules, ...restProps }: DecimalTextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DecimalTextField.d.ts.map

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":"AACA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,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,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,EACtD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,oBAAwB,EACxB,GAAG,EACH,GAAG,EACH,YAAY,EACZ,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,cAAc,EACd,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAsW1B"}
+{"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

@@ -1,227 +1,128 @@
+"use client";
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DecimalTextField = DecimalTextField;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
+const InfoOutlined_1 = __importDefault(require("@mui/icons-material/InfoOutlined"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
 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");
-function DecimalTextField({ control, name, decimalScale, defaultFallbackValue = 0, min, max, defaultValue, label = "", required, disabled, loading = false, placeholder = "", containerProps, styling = "custom", infoMessage, customOnChange, navigationKey = "tab", ...restProps }) {
-    const { field: { value, onChange: formOnChange, onBlur: formOnBlur, ref }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue });
-    const { inputRef: navigationInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
-    const inputRef = (0, react_1.useRef)(null);
-    const isInitializedRef = (0, react_1.useRef)(false);
-    const formatNumber = (0, react_1.useCallback)((num) => {
-        return num.toFixed(decimalScale);
-    }, [decimalScale]);
-    const parseValue = (0, react_1.useCallback)((val) => {
-        if (typeof val === "string") {
-            const parsed = parseFloat(val);
-            return isNaN(parsed) ? null : parsed;
-        }
-        if (typeof val === "number" && !isNaN(val)) {
-            return val;
-        }
-        return null;
-    }, []);
-    const getValidInitialValue = (0, react_1.useMemo)(() => {
-        return (fallback) => {
-            let candidateValue = fallback ?? 0;
-            if (min !== undefined && candidateValue < min) {
-                candidateValue = min;
+function DecimalTextField({ control, name, decimalScale, defaultFallbackValue, min, max, defaultValue, label = "", required, disabled, loading = false, placeholder = "", containerProps, styling = "custom", infoMessage, customOnChange, navigationKey, rules, ...restProps }) {
+    const validationRules = (0, react_1.useMemo)(() => {
+        const builtRules = { ...rules };
+        builtRules.validate = (val) => {
+            if (required && (val === undefined || val == null)) {
+                return "This field is required";
             }
-            if (max !== undefined && candidateValue > max) {
-                candidateValue = max;
+            if (val === undefined || val == null) {
+                return true;
             }
-            return candidateValue;
-        };
-    }, [min, max]);
-    const isValidValue = (0, react_1.useCallback)((val) => {
-        return (!isNaN(val) &&
-            (min === undefined || val >= min) &&
-            (max === undefined || val <= max));
-    }, [min, max]);
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    (0, react_1.useEffect)(() => {
-        if (isInitializedRef.current) {
-            return;
-        }
-        const currentNumericValue = parseValue(value);
-        let initialValue = null;
-        const isDefaultZero = currentNumericValue === 0 &&
-            (defaultValue === undefined ||
-                defaultValue === null ||
-                defaultValue === "");
-        if (currentNumericValue !== null &&
-            isValidValue(currentNumericValue) &&
-            !isDefaultZero) {
-            initialValue = currentNumericValue;
-        }
-        else if (defaultValue !== undefined &&
-            defaultValue !== null &&
-            defaultValue !== "") {
-            const parsedDefault = typeof defaultValue === "number"
-                ? defaultValue
-                : parseValue(defaultValue);
-            if (parsedDefault !== null) {
-                initialValue = getValidInitialValue(parsedDefault);
+            if (isNaN(val)) {
+                return "Please enter a valid number";
             }
-        }
-        if (initialValue === null) {
-            if (defaultFallbackValue != undefined && defaultFallbackValue != null) {
-                initialValue = getValidInitialValue(defaultFallbackValue);
+            if (min !== undefined && val < min) {
+                return `Value must be at least ${min}`;
             }
-        }
-        if (initialValue !== null) {
-            const formattedValue = formatNumber(initialValue);
-            if (value !== formattedValue) {
-                formOnChange(formattedValue);
+            if (max !== undefined && val > max) {
+                return `Value must be at most ${max}`;
             }
+            return true;
+        };
+        return builtRules;
+    }, [required, min, max, rules]);
+    const { field: { value, onChange, onBlur, ref }, fieldState: { error }, } = (0, react_hook_form_1.useController)({
+        name,
+        control,
+        rules: validationRules,
+        defaultValue,
+    });
+    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 === "") {
+            return undefined;
         }
-        isInitializedRef.current = true;
-    }, []);
+        const parsed = Number(val);
+        return isNaN(parsed) ? undefined : parsed;
+    };
     const handleValueChange = (0, react_1.useCallback)((values) => {
-        const numericValue = values.floatValue;
-        formOnChange(values.value);
-        if (customOnChange && numericValue !== undefined) {
-            customOnChange(numericValue);
-        }
+        const numericValue = parseValue(values.value);
+        onChange(numericValue);
+        customOnChange?.(numericValue);
         maintainFocus();
-    }, [formOnChange, customOnChange, maintainFocus]);
+    }, [onChange, customOnChange, maintainFocus]);
+    const isValidValue = (0, react_1.useCallback)((val) => {
+        if (val === undefined || isNaN(val)) {
+            return false;
+        }
+        return ((min === undefined || val >= min) && (max === undefined || val <= max));
+    }, [min, max]);
     const handleBlur = (0, react_1.useCallback)((event) => {
-        const currentValue = parseValue(value);
-        if (currentValue === null || !isValidValue(currentValue)) {
+        const currentValue = typeof value === "number" ? value : undefined;
+        // If value is invalid, reset to fallback value
+        if (error && currentValue !== undefined && !isValidValue(currentValue)) {
             let resetValue;
-            if (defaultFallbackValue != undefined &&
+            // Priority: defaultFallbackValue > min > 0
+            if (defaultFallbackValue !== undefined &&
                 isValidValue(defaultFallbackValue)) {
                 resetValue = defaultFallbackValue;
             }
             else if (min !== undefined) {
                 resetValue = min;
             }
-            else {
-                resetValue = 0;
-            }
-            const formattedValue = formatNumber(resetValue);
-            formOnChange(formattedValue);
-            if (customOnChange) {
-                customOnChange(resetValue);
-            }
-        }
-        else {
-            const formattedValue = formatNumber(currentValue);
-            formOnChange(formattedValue);
-        }
-        formOnBlur();
-        if (restProps.onBlur) {
-            restProps.onBlur(event);
-        }
-    }, [
-        value,
-        isValidValue,
-        min,
-        defaultFallbackValue,
-        formOnChange,
-        formOnBlur,
-        customOnChange,
-        formatNumber,
-        parseValue,
-        restProps,
-    ]);
-    const handleFocus = (0, react_1.useCallback)((event) => {
-        if (restProps.onFocus) {
-            restProps.onFocus(event);
-        }
-    }, [value, isValidValue, parseValue, restProps]);
-    const handleKeyDown = (0, react_1.useCallback)(
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    (event) => {
-        // Handle arrow keys for increment/decrement
-        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-            event.preventDefault();
-            const currentValue = parseValue(value) ?? getValidInitialValue(defaultFallbackValue);
-            const step = 1 / Math.pow(10, decimalScale);
-            let newValue;
-            if (event.key === "ArrowUp") {
-                newValue = currentValue + step;
+            else if (max !== undefined && currentValue > max) {
+                resetValue = max;
             }
             else {
-                newValue = currentValue - step;
-            }
-            if (min !== undefined && newValue < min) {
-                newValue = min;
-            }
-            if (max !== undefined && newValue > max) {
-                newValue = max;
-            }
-            if (isValidValue(newValue)) {
-                const formattedValue = formatNumber(newValue);
-                formOnChange(formattedValue);
-                if (customOnChange) {
-                    customOnChange(newValue);
-                }
-                maintainFocus();
+                resetValue = defaultFallbackValue ?? 0;
             }
-            return;
-        }
-        // Handle navigation keys (Tab/Enter)
-        handleNavigationKeyDown(event, undefined, false);
-        if (restProps.onKeyDown) {
-            restProps.onKeyDown(event);
+            onChange(resetValue);
         }
+        onBlur();
+        restProps.onBlur?.(event);
     }, [
         value,
-        parseValue,
-        getValidInitialValue,
-        defaultFallbackValue,
-        decimalScale,
+        error,
         min,
         max,
+        defaultFallbackValue,
         isValidValue,
-        formatNumber,
-        formOnChange,
-        customOnChange,
-        maintainFocus,
-        handleNavigationKeyDown,
+        onChange,
+        onBlur,
         restProps,
     ]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        handleNavigationKeyDown(event, undefined, false);
+        restProps.onKeyDown?.(event);
+    }, [handleNavigationKeyDown, restProps]);
     const handleInputRef = (0, react_1.useCallback)((el) => {
         inputRef.current = el;
         navigationInputRef.current = el;
-        if (ref) {
-            if (typeof ref === "function") {
-                ref(el);
-            }
-            else {
-                ref.current = el;
-            }
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
         }
     }, [ref, navigationInputRef]);
-    // eslint-disable-next-line sonarjs/function-return-type
     const displayValue = (0, react_1.useMemo)(() => {
-        const numericValue = parseValue(value);
-        if (numericValue !== null) {
-            if (typeof value === "string" && value.includes(".")) {
-                const parts = value.split(".");
-                if (parts[1] && parts[1].length <= decimalScale) {
-                    return value;
-                }
-            }
-            return numericValue;
-        }
-        return "";
-    }, [value, parseValue, decimalScale]);
+        return typeof value === "number" ? value : "";
+    }, [value]);
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "4px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, disabled: disabled, children: label }), infoMessage && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: infoMessage, children: (0, jsx_runtime_1.jsx)(icons_material_1.InfoOutlined, { sx: {
-                                fontSize: 13,
-                            } }) }))] })), (0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { customInput: material_1.TextField, ...restProps, disabled: disabled, required: required, fullWidth: true, placeholder: styling === "default" ? placeholder : placeholder || label, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
-                    ...restProps.inputProps,
-                }, error: Boolean(error), helperText: error?.message, name: name, decimalScale: decimalScale, fixedDecimalScale: true, allowNegative: false, thousandSeparator: false, value: displayValue, onValueChange: handleValueChange, onBlur: handleBlur, onFocus: handleFocus, onKeyDown: handleKeyDown, inputMode: "decimal", getInputRef: handleInputRef })] }));
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { ...containerProps, gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", gap: "4px", children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, disabled: disabled, children: label }), infoMessage && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: infoMessage, children: (0, jsx_runtime_1.jsx)(InfoOutlined_1.default, { sx: { fontSize: 13 } }) }))] })), (0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { customInput: TextField_1.default, ...restProps, value: displayValue, decimalScale: decimalScale, fixedDecimalScale: true, allowNegative: false, thousandSeparator: false, disabled: disabled, required: required, fullWidth: true, name: name, error: Boolean(error), helperText: error?.message, placeholder: styling === "default" ? placeholder : placeholder || label, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), onValueChange: handleValueChange, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: "decimal", getInputRef: handleInputRef })] }));
 }

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"}