@codezee/sixtify-brahma 0.2.201 → 0.2.203

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

@@ -1,4 +1,4 @@
-import { type SwitchProps } from "@mui/material";
+import { type SwitchProps } from "@mui/material/Switch";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 export type SwitchFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<Omit<SwitchProps, "checked">, keyof ControllerRenderProps<P>> & {

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

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SwitchField/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACzE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,EACjD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAe,EACf,aAAa,EACb,GAAG,eAAe,EACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAgFrB"}
+{"version":3,"file":"SwitchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SwitchField/SwitchField.tsx"],"names":[],"mappings":"AACA,OAAkB,EAEhB,KAAK,WAAW,EACjB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAI7C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACzE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,EACjD,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,OAAe,EACf,aAAa,EACb,GAAG,eAAe,EACnB,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAoFrB"}

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

@@ -1,16 +1,53 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwitchField = SwitchField;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Switch_1 = __importStar(require("@mui/material/Switch"));
 const react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("../../utils");
 const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const Skeleton_1 = require("./Skeleton");
 function SwitchField({ name, rules, control, defaultValue, loading = false, navigationKey, ...restSwitchProps }) {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { butterflyBlue, iron } = theme.palette.app.color;
     const { field: { value = false, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
-    const { setInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
+    const { setInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: resolvedNavigationKey });
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
@@ -20,7 +57,7 @@ function SwitchField({ name, rules, control, defaultValue, loading = false, navi
             restSwitchProps.onKeyDown(event);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Switch, { checked: value, ...restField, ...restSwitchProps, inputRef: setInputRef, onKeyDown: handleKeyDown, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsx)(Switch_1.default, { checked: value, ...restField, ...restSwitchProps, inputRef: setInputRef, onKeyDown: handleKeyDown, onChange: (event) => {
             restField.onChange(event);
             maintainFocus();
         }, sx: {
@@ -38,7 +75,7 @@ function SwitchField({ name, rules, control, defaultValue, loading = false, navi
                     height: 16,
                     left: 12,
                 },
-                [material_1.switchClasses.input]: {
+                [Switch_1.switchClasses.input]: {
                     width: "80px !important",
                 },
                 "&::after": {

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

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

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

@@ -1,13 +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.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 = ({ rows, label, styling }) => {
     const height = rows === undefined ? 35.69 : rows * 26.5;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", 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", 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: `${height}px`, sx: {
+                } })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: `${height}px`, sx: {
                     transform: "scale(1)",
                 } })] }));
 };

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

@@ -1,8 +1,9 @@
-import { type TextFieldProps as MuiTextFieldProps, type StackProps } from "@mui/material";
-import type { ReactNode } from "react";
+import { type StackProps } from "@mui/material/Stack";
+import { type TextFieldProps as MuiTextFieldProps } from "@mui/material/TextField";
 import { type ControllerRenderProps, type FieldError, type FieldValues, type UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { Styling } from "../../utils/types";
+import type { ReactNode } from "react";
 export type AllowedCharacterType = "string" | "string-number" | "string-number-special" | "string-special" | "string-special-all" | "custom";
 export type LetterCase = "uppercase" | "lowercase" | "mixed";
 export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiTextFieldProps, keyof ControllerRenderProps<P>> & {

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAKzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,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,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,aAAa,EACb,cAAc,EACd,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAkKnB"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TextField/TextField.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAqB,EACnB,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAQ7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,GACvB,gBAAgB,GAChB,oBAAoB,GACpB,QAAQ,CAAC;AAEb,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAY7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,IAAI,CAAC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,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,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,eAAe,CAAC,EAAE;QAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QACvB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,YAAoB,EACpB,mBAA2B,EAC3B,IAAI,EACJ,aAAuC,EACvC,UAAoB,EACpB,QAAQ,EACR,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,eAGC,EACD,aAAa,EACb,cAAc,EACd,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAwLnB"}

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

@@ -1,11 +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.TextField = TextField;
 const jsx_runtime_1 = require("react/jsx-runtime");
-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_hook_form_1 = require("react-hook-form");
-const icons_material_1 = require("@mui/icons-material");
 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("./Skeleton");
@@ -22,12 +28,26 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
     regex: /^[\s\S]*$/,
 }, navigationKey, customOnChange, ...inputFieldProps }) {
     const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
-    const { inputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
+    const { inputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: resolvedNavigationKey });
     const handleKeyDown = (event) => {
         if (event.key === "-" && type === "number") {
             event.preventDefault();
         }
-        handleNavigationKeyDown(event, undefined, false);
+        const isMultiline = Boolean(rows ?? inputFieldProps.multiline);
+        if (isMultiline &&
+            event.key === "Enter" &&
+            resolvedNavigationKey === "enter" &&
+            !event.shiftKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey) {
+            handleEnterNavigation(event, true);
+        }
+        else {
+            handleNavigationKeyDown(event, undefined, false);
+        }
     };
     const getCharacterRegex = (type) => {
         switch (type) {
@@ -71,16 +91,16 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows, 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", 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: {
+    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", 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)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, inputRef: inputRef, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
+                            } }) }))] })), (0, jsx_runtime_1.jsx)(TextField_1.default, { disabled: disabled, required: required, fullWidth: true, inputRef: inputRef, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : (placeholder ?? label), type: type, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), inputProps: {
                     min: 0,
                 }, error: Boolean(error), helperText: error?.message, onChange: (event) => {
                     const input = event.target;
                     const { selectionStart, selectionEnd } = input;
-                    let value = event.target.value || null;
+                    let value = event.target.value ?? null;
                     if (typeof value === "string" && value.trim() === "") {
-                        value = null;
+                        value = "";
                     }
                     else if (!isTrimStartDisabled && typeof value === "string") {
                         value = value.trimStart();

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimeField/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/TimeField/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/TimeField/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/TimeField/TimeField.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimeField/TimeField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAEL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,iBAAiB,CAAC,eAAe,CAAC,GAClC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAEL,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,OAAkB,EAClB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CAgGnB"}
+{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimeField/TimeField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,+BAA+B,CAAC;AAKvC,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAQ7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACvE,iBAAiB,CAAC,eAAe,CAAC,GAClC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAEL,wBAAgB,SAAS,CAAC,CAAC,SAAS,WAAW,EAAE,EAC/C,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,OAAkB,EAClB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CAqGnB"}

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

@@ -1,18 +1,26 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeField = TimeField;
 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 TimeField_1 = require("@mui/x-date-pickers/TimeField");
 const luxon_1 = require("luxon");
 const react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("../../utils");
 const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 function TimeField({ control, defaultValue, disabled = false, label, name, error, helperText, loading = false, required = false, rules, format = "HH:mm", isReturnLocalTime = false, isReturnDateWithTime = false, styling = "custom", navigationKey, ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
-    const { inputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
-    const theme = (0, material_1.useTheme)();
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
+    const { inputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: resolvedNavigationKey });
+    const theme = (0, styles_1.useTheme)();
     const { butterflyBlue } = theme.palette.app.color;
     if (error && value && typeof value === "object") {
         helperText = "Invalid time";
@@ -23,7 +31,7 @@ function TimeField({ control, defaultValue, disabled = false, label, name, error
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(TimeField_1.TimeField, { ...restField, ...restProps, disabled: disabled, value: pickerValue, onChange: (value) => {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(TimeField_1.TimeField, { ...restField, ...restProps, disabled: disabled, value: pickerValue, onChange: (value) => {
                     if (value?.isValid) {
                         if (isReturnLocalTime) {
                             onChange(value.toFormat(format));

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimePicker/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/TimePicker/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/TimePicker/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/TimePicker/TimePicker.d.ts

@@ -1,10 +1,10 @@
-import type { StackProps } from "@mui/material";
-import type { TimePickerProps as MuiTimePickerProps } from "@mui/x-date-pickers/TimePicker";
-import type { PickerValidDate } from "@mui/x-date-pickers/models";
+import { type TimePickerProps as MuiTimePickerProps } from "@mui/x-date-pickers/TimePicker";
 import { type ReactElement } from "react";
-import type { FieldValues, UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { Styling } from "../../utils/types";
+import type { StackProps } from "@mui/material/Stack";
+import type { PickerValidDate } from "@mui/x-date-pickers/models";
+import type { FieldValues, UseControllerProps } from "react-hook-form";
 export type TimePickerProps<P extends FieldValues> = UseControllerProps<P> & MuiTimePickerProps<PickerValidDate> & Partial<{
     label: string;
     required: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,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,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAEL,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,gBAAoB,EACpB,UAAU,EACV,WAAW,EACX,cAAc,EACd,OAAkB,EAClB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAwMpB"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,eAAe,IAAI,kBAAkB,EAC3C,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAQ7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,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,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAEL,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,KAAK,EACL,MAAgB,EAChB,iBAAyB,EACzB,oBAA4B,EAC5B,gBAAoB,EACpB,UAAU,EACV,WAAW,EACX,cAAc,EACd,OAAkB,EAClB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAgNpB"}

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

@@ -1,23 +1,32 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = TimePicker;
 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 Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 const TimePicker_1 = require("@mui/x-date-pickers/TimePicker");
 const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("../../utils");
 const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const commonStyles_1 = require("../commonStyles");
 const Skeleton_1 = require("./Skeleton");
 function TimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, rules, format = "HH:mm", isReturnLocalTime = false, isReturnDateWithTime = false, timeStepsMinutes = 1, helperIcon, toolTipText, containerProps, 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 { butterflyBlue } = theme.palette.app.color;
     const pickerValue = value
         ? luxon_1.DateTime.fromISO(value)
@@ -25,7 +34,7 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [(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)(TimePicker_1.TimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, format: format, onOpen: () => setOpen(true), onClose: () => {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { alignItems: "center", flexDirection: "row", gap: "5px", children: [(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)(TimePicker_1.TimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, format: format, onOpen: () => setOpen(true), onClose: () => {
                     setOpen(false);
                     maintainFocusAfterClose();
                 }, timeSteps: { minutes: timeStepsMinutes }, slotProps: {
@@ -46,7 +55,7 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
                             },
                         },
                         onKeyDown: (event) => {
-                            if (navigationKey === "enter") {
+                            if (resolvedNavigationKey === "enter") {
                                 if (event.key === " " && !open && !disabled && !readOnly) {
                                     event.preventDefault();
                                     event.stopPropagation();
@@ -74,7 +83,7 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
                         },
                     },
                     openPickerButton: {
-                        ...(navigationKey === "enter"
+                        ...(resolvedNavigationKey === "enter"
                             ? {
                                 onKeyDown: (event) => {
                                     if (event.key === "Enter") {
@@ -119,7 +128,9 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
                             },
                         },
                         onKeyDown: (event) => {
-                            if (navigationKey === "enter" && event.key === "Enter" && open) {
+                            if (resolvedNavigationKey === "enter" &&
+                                event.key === "Enter" &&
+                                open) {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 setOpen(false);

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

@@ -1,4 +1,4 @@
-import type { SxProps, Theme } from "@mui/material";
+import type { Theme, SxProps } from "@mui/material/styles";
 export declare const getDefaultInputLabelProps: (styling?: "custom" | "default") => {
     sx?: SxProps<Theme>;
 } | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../src/FormFields/commonStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,eAAO,MAAM,yBAAyB,GACpC,UAAU,QAAQ,GAAG,SAAS,KAC7B;IAAE,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CAAE,GAAG,SAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,UAAU,QAAQ,GAAG,SAAS,KAE7B,OAAO,CAAC,KAAK,CAAC,GAAG,SAanB,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,UAAU,QAAQ,GAAG,SAAS,KAE7B,OAAO,CAAC,KAAK,CAAC,GAAG,SAUnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,UAAU,QAAQ,GAAG,SAAS,KAE7B,OAAO,CAAC,KAAK,CAAC,GAAG,SAgBnB,CAAC"}
+{"version":3,"file":"commonStyles.d.ts","sourceRoot":"","sources":["../../src/FormFields/commonStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE3D,eAAO,MAAM,yBAAyB,GACpC,UAAU,QAAQ,GAAG,SAAS,KAC7B;IAAE,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CAAE,GAAG,SAkB5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,UAAU,QAAQ,GAAG,SAAS,KAE7B,OAAO,CAAC,KAAK,CAAC,GAAG,SAanB,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,UAAU,QAAQ,GAAG,SAAS,KAE7B,OAAO,CAAC,KAAK,CAAC,GAAG,SAUnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,UAAU,QAAQ,GAAG,SAAS,KAE7B,OAAO,CAAC,KAAK,CAAC,GAAG,SAgBnB,CAAC"}

package/packages/shared-components/dist/HighlightedText/HighlightedText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightedText.d.ts","sourceRoot":"","sources":["../../src/HighlightedText/HighlightedText.tsx"],"names":[],"mappings":"AAIA,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,2BAG7B,oBAAoB,KAAG,GAAG,CAAC,OA2C7B,CAAC"}
+{"version":3,"file":"HighlightedText.d.ts","sourceRoot":"","sources":["../../src/HighlightedText/HighlightedText.tsx"],"names":[],"mappings":"AAKA,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,2BAG7B,oBAAoB,KAAG,GAAG,CAAC,OA2C7B,CAAC"}

package/packages/shared-components/dist/HighlightedText/HighlightedText.js

@@ -1,25 +1,29 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HighlightedText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const styles_1 = require("@mui/material/styles");
 const regex_1 = require("../utils/regex");
 const HighlightedText = ({ text, highlightWords, }) => {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { slate } = theme.palette.app.color;
     if (!highlightWords?.length) {
-        return (0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", children: text });
+        return (0, jsx_runtime_1.jsx)(Box_1.default, { component: "span", children: text });
     }
     const escapedWords = highlightWords.map((w) => w.replace(regex_1.highlightWordsRegex, "\\$&"));
     const pattern = new RegExp(`(${escapedWords.join("|")})`, "gi");
     const segments = text.split(pattern);
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", children: segments.map((segment, index) => pattern.test(segment) ? ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", sx: {
+    return ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "span", children: segments.map((segment, index) => pattern.test(segment) ? ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "span", sx: {
                 padding: "2px 4px",
                 backgroundColor: slate[800],
                 border: `1px solid ${slate[700]}`,
                 borderRadius: "5px",
                 fontFamily: "monospace",
                 fontSize: "0.9em",
-            }, children: segment }, `highlight-${index}-${segment}`)) : ((0, jsx_runtime_1.jsx)(material_1.Box, { component: "span", children: segment }, `text-${index}-${segment}`))) }));
+            }, children: segment }, `highlight-${index}-${segment}`)) : ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "span", children: segment }, `text-${index}-${segment}`))) }));
 };
 exports.HighlightedText = HighlightedText;

package/packages/shared-components/dist/Indicator/Indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/Indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,gCAAgC,cAAc,4CAOvE,CAAC"}
+{"version":3,"file":"Indicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/Indicator.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,KAAK,cAAc,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,gCAAgC,cAAc,4CAQvE,CAAC"}

package/packages/shared-components/dist/Indicator/Indicator.js

@@ -1,10 +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.Indicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const SvgIndicator_1 = require("../Svgs/SvgIndicator");
 const Indicator = ({ label, variant, colourCode }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(SvgIndicator_1.SvgIndicator, { variant: variant, colourCode: colourCode }), label] }));
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(SvgIndicator_1.SvgIndicator, { variant: variant, colourCode: colourCode }), label] }));
 };
 exports.Indicator = Indicator;

package/packages/shared-components/dist/Indicator/SeverityIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeverityIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/SeverityIndicator.tsx"],"names":[],"mappings":"AAIA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,iCAI/B,sBAAsB,4CAmBxB,CAAC"}
+{"version":3,"file":"SeverityIndicator.d.ts","sourceRoot":"","sources":["../../src/Indicator/SeverityIndicator.tsx"],"names":[],"mappings":"AAQA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,iCAI/B,sBAAsB,4CAmBxB,CAAC"}

package/packages/shared-components/dist/Indicator/SeverityIndicator.js

@@ -5,14 +5,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SeverityIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const PadBox_1 = require("../PadBox");
 const Circle_1 = __importDefault(require("@mui/icons-material/Circle"));
+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 PadBox_1 = require("../PadBox");
 const SeverityIndicator = ({ color, label, isBackground = false, }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
-            backgroundColor: `${isBackground ? (0, material_1.alpha)(color, 0.2) : ""}`,
+    return ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
+            backgroundColor: `${isBackground ? (0, styles_1.alpha)(color, 0.2) : ""}`,
             width: "max-content",
             borderRadius: "6px",
-        }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: isBackground ? "5px 8px" : "0" }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { flexDirection: "row", alignItems: "center", gap: "8px", children: [(0, jsx_runtime_1.jsx)(Circle_1.default, { sx: { color, fontSize: "12px" } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: { fontWeight: 500 }, children: label })] }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: isBackground ? "5px 8px" : "0" }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { flexDirection: "row", alignItems: "center", gap: "8px", children: [(0, jsx_runtime_1.jsx)(Circle_1.default, { sx: { color, fontSize: "12px" } }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", sx: { fontWeight: 500 }, children: label })] }) }) }));
 };
 exports.SeverityIndicator = SeverityIndicator;

package/packages/shared-components/dist/Layouts/ButtonContainer.d.ts

@@ -1,4 +1,4 @@
-import { type SxProps } from "@mui/material";
+import type { SxProps } from "@mui/material/styles";
 import type { PropsWithChildren } from "react";
 type ButtonContainerProps = PropsWithChildren & {
     columns?: number;

package/packages/shared-components/dist/Layouts/ButtonContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../src/Layouts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,KAAK,oBAAoB,GAAG,iBAAiB,GAAG;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,6CAK7B,oBAAoB,4CAYtB,CAAC"}
+{"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../src/Layouts/ButtonContainer.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,KAAK,oBAAoB,GAAG,iBAAiB,GAAG;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE,OAAO,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,6CAK7B,oBAAoB,4CAYtB,CAAC"}

package/packages/shared-components/dist/Layouts/ButtonContainer.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.ButtonContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const useGetDeviceType_1 = require("../utils/hooks/useGetDeviceType");
 const FormGridLayout_1 = require("./FormGridLayout");
 const ButtonContainer = ({ columns = 2, columnsOnMobile = 2, children, sx, }) => {
     const { layout } = (0, useGetDeviceType_1.useGetDeviceType)();
-    return layout === "mobile" ? ((0, jsx_runtime_1.jsx)(FormGridLayout_1.FormGridLayout, { columnsOnMobile: columnsOnMobile, columns: columns, children: children })) : ((0, jsx_runtime_1.jsx)(material_1.Stack, { sx: sx, direction: "row", gap: "5px", children: children }));
+    return layout === "mobile" ? ((0, jsx_runtime_1.jsx)(FormGridLayout_1.FormGridLayout, { columnsOnMobile: columnsOnMobile, columns: columns, children: children })) : ((0, jsx_runtime_1.jsx)(Stack_1.default, { sx: sx, direction: "row", gap: "5px", children: children }));
 };
 exports.ButtonContainer = ButtonContainer;

package/packages/shared-components/dist/Layouts/FilePreviewContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilePreviewContainer.d.ts","sourceRoot":"","sources":["../../src/Layouts/FilePreviewContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,yBAAyB,GAAG,QAAQ,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAY,GACb,EAAE,yBAAyB,2CAM3B"}
+{"version":3,"file":"FilePreviewContainer.d.ts","sourceRoot":"","sources":["../../src/Layouts/FilePreviewContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,KAAK,yBAAyB,GAAG,QAAQ,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAY,GACb,EAAE,yBAAyB,2CAM3B"}