@codezee/sixtify-brahma 0.2.200 → 0.2.202

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

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItemButton = ListItemButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const styles_1 = require("@mui/material/styles");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = require("react");
 const Tooltip_1 = require("../../Tooltip");
 const ListItemButton_styled_1 = require("./ListItemButton.styled");
 function ListItemButton({ label, selected, actions, companyName, ...restListItemButtonProps }) {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const { iron } = theme.palette.app.color;
     const textRef = (0, react_1.useRef)(null);
     const [isOverflowed, setIsOverflowed] = (0, react_1.useState)(false);
@@ -22,11 +27,11 @@ function ListItemButton({ label, selected, actions, companyName, ...restListItem
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, [label, companyName]);
-    return ((0, jsx_runtime_1.jsx)(ListItemButton_styled_1.StyledListItemButton, { selected: selected, alignItems: "flex-start", ...restListItemButtonProps, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { width: "100%", flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", direction: "column", flex: 1, display: "grid", children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: label, checkOverflow: !isOverflowed, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: 500, ref: textRef, sx: {
+    return ((0, jsx_runtime_1.jsx)(ListItemButton_styled_1.StyledListItemButton, { selected: selected, alignItems: "flex-start", ...restListItemButtonProps, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { width: "100%", flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", direction: "column", flex: 1, display: "grid", children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: label, checkOverflow: !isOverflowed, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body2", fontWeight: 500, ref: textRef, sx: {
                                     width: "auto",
                                     whiteSpace: "nowrap",
                                     overflow: "hidden",
                                     textOverflow: "ellipsis",
                                     display: "block",
-                                }, children: label }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: iron[800], children: companyName })] }), actions] }) }));
+                                }, children: label }) }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", color: iron[800], children: companyName })] }), actions] }) }));
 }

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

@@ -1,4 +1,4 @@
-import { type ListItemButtonProps as MuiListItemButtonProps } from "@mui/material";
+import { type ListItemButtonProps as MuiListItemButtonProps } from "@mui/material/ListItemButton";
 import type { ComponentType } from "react";
 export declare const StyledListItemButton: ComponentType<MuiListItemButtonProps & {
     selected?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"ListItemButton.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ListItemButton/ListItemButton.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,IAAI,sBAAsB,EACnD,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAC9C,sBAAsB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAgB9C,CAAC"}
+{"version":3,"file":"ListItemButton.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ListItemButton/ListItemButton.styled.tsx"],"names":[],"mappings":"AAAA,OAA0B,EACxB,KAAK,mBAAmB,IAAI,sBAAsB,EACnD,MAAM,8BAA8B,CAAC;AAGtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,oBAAoB,EAAE,aAAa,CAC9C,sBAAsB,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAgB9C,CAAC"}

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

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledListItemButton = void 0;
-const material_1 = require("@mui/material");
-exports.StyledListItemButton = (0, material_1.styled)(material_1.ListItemButton, {
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const styles_1 = require("@mui/material/styles");
+exports.StyledListItemButton = (0, styles_1.styled)(ListItemButton_1.default, {
     shouldForwardProp: (prop) => prop !== "selected",
 })(({ theme, selected }) => ({
     background: theme.palette.app.color.iron[600],

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI,QAAQ,CACvD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CACtC,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,EACjD,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAoC7B"}
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,kBAAkB,CAAC,CAAC,SAAS,WAAW,IAAI,QAAQ,CACvD,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CACtC,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,EACjD,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAoC7B"}

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

@@ -5,10 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PasswordField = PasswordField;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
+const LockOutlined_1 = __importDefault(require("@mui/icons-material/LockOutlined"));
 const VisibilityOffOutlined_1 = __importDefault(require("@mui/icons-material/VisibilityOffOutlined"));
 const VisibilityOutlined_1 = __importDefault(require("@mui/icons-material/VisibilityOutlined"));
-const material_1 = require("@mui/material");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 const react_1 = require("react");
 const TextField_1 = require("../TextField");
 function PasswordField(props) {
@@ -17,7 +18,7 @@ function PasswordField(props) {
         setIsPasswordVisible((prevState) => !prevState);
     };
     return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { type: isPasswordVisible ? "text" : "password", InputProps: {
-            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(icons_material_1.LockOutlined, { fontSize: "small" }) })),
-            endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "toggle password visibility", onClick: togglePasswordVisibility, edge: "end", children: isPasswordVisible ? ((0, jsx_runtime_1.jsx)(VisibilityOffOutlined_1.default, { fontSize: "small" })) : ((0, jsx_runtime_1.jsx)(VisibilityOutlined_1.default, { fontSize: "small" })) }) })),
+            startAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: (0, jsx_runtime_1.jsx)(LockOutlined_1.default, { fontSize: "small" }) })),
+            endAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: (0, jsx_runtime_1.jsx)(IconButton_1.default, { "aria-label": "toggle password visibility", onClick: togglePasswordVisibility, edge: "end", children: isPasswordVisible ? ((0, jsx_runtime_1.jsx)(VisibilityOffOutlined_1.default, { fontSize: "small" })) : ((0, jsx_runtime_1.jsx)(VisibilityOutlined_1.default, { fontSize: "small" })) }) })),
         }, ...props }));
 }

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

@@ -1,7 +1,7 @@
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
-import type { PhoneInputProps } from "react-phone-input-2";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { Styling } from "../../utils/types";
+import type { PhoneInputProps } from "react-phone-input-2";
 export type PhoneInputFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<PhoneInputProps, keyof ControllerRenderProps<P>> & {
     label?: string;
     loading?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,aAAqB,EACrB,OAAkB,EAClB,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAkMzB"}
+{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAK7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,aAAa,EACb,OAAkB,EAClB,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAyMzB"}

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

@@ -6,16 +6,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInputField = PhoneInputField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable sonarjs/no-nested-conditional */
-const material_1 = require("@mui/material");
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const styles_1 = require("@mui/material/styles");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_phone_input_2_1 = __importDefault(require("react-phone-input-2"));
+const utils_1 = require("../../utils");
 const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
 const PhoneInputField_styled_1 = require("./PhoneInputField.styled");
 const Skeleton_1 = require("./Skeleton");
-function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, navigationKey = "tab", styling = "custom", ...phoneInputProps }) {
-    const theme = (0, material_1.useTheme)();
+function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, navigationKey, styling = "custom", ...phoneInputProps }) {
+    const theme = (0, styles_1.useTheme)();
     const { iron, red, slate } = theme.palette.app.color;
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -23,7 +29,10 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
         rules,
     });
     const [dropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
-    const { setInputRef, maintainFocusAfterClose, handleKeyDown } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: dropdownOpen, navigationKey });
+    const { setInputRef, maintainFocusAfterClose, handleKeyDown } = (0, useFormFieldFocus_1.useFormFieldFocus)({
+        isOpen: dropdownOpen,
+        navigationKey: resolvedNavigationKey,
+    });
     const containerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const container = containerRef.current;
@@ -87,7 +96,7 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
     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, { gap: "4px", children: [(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)(PhoneInputField_styled_1.PhoneInputWrapper, { ref: containerRef, styling: styling, error: error, className: styling === "custom" ? "custom_phone_input" : "default_phone_input", children: (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, specialLabel: label ?? "", placeholder: placeholder || label, onChange: (phone) => {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "4px", children: [(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)(PhoneInputField_styled_1.PhoneInputWrapper, { ref: containerRef, styling: styling, error: error, className: styling === "custom" ? "custom_phone_input" : "default_phone_input", children: (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, specialLabel: label ?? "", placeholder: placeholder || label, onChange: (phone) => {
                                 onChange(phone);
                             }, value: value, onBlur: () => {
                                 restField.onBlur();
@@ -117,7 +126,7 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
                                 color: disabled ? iron[100] : slate[900],
                             }, containerClass: "phone-input-container", inputClass: "phone-input-field", buttonStyle: {
                                 border: "none",
-                            }, ...phoneInputProps }) })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: {
+                            }, ...phoneInputProps }) })] }), error && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", sx: {
                     color: "red",
                     whiteSpace: "pre",
                     textWrap: "wrap",

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

@@ -1,6 +1,6 @@
-import { type BoxProps } from "@mui/material";
-import type { ComponentType } from "react";
+import { type BoxProps } from "@mui/material/Box";
 import type { Styling } from "../../utils/types";
+import type { ComponentType } from "react";
 type PhoneInputWrapperProps = BoxProps & {
     styling?: Styling;
     error?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"PhoneInputField.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,QAAQ,EAAkB,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,sBAAsB,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAuNlE,CAAC"}
+{"version":3,"file":"PhoneInputField.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.styled.tsx"],"names":[],"mappings":"AAAA,OAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,KAAK,sBAAsB,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAwNlE,CAAC"}

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

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PhoneInputWrapper = void 0;
-const material_1 = require("@mui/material");
-exports.PhoneInputWrapper = (0, material_1.styled)(material_1.Box)(({ styling, theme, error }) => {
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const styles_1 = require("@mui/material/styles");
+exports.PhoneInputWrapper = (0, styles_1.styled)(Box_1.default)(({ styling, theme, error }) => {
     const baseStyles = {
         position: "relative",
     };
@@ -202,8 +206,9 @@ exports.PhoneInputWrapper = (0, material_1.styled)(material_1.Box)(({ styling, t
                     top: "-7px",
                     left: "10px",
                     display: "block",
+                    color: black[900],
                     background: iron[600],
-                    opacity: "0.8",
+                    opacity: "1",
                     fontSize: "10.5px",
                     whiteSpace: "nowrap",
                     lineHeight: "1.1",

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

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

@@ -1,8 +1,9 @@
-import { type StackOwnProps, type StackProps, type SxProps } from "@mui/material";
 import { type RadioProps as MuiRadioProps } from "@mui/material/Radio";
+import { type StackOwnProps, type StackProps } from "@mui/material/Stack";
 import { type ReactNode } from "react";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
+import type { SxProps } from "@mui/material/styles";
 type Options = {
     values: boolean | string;
     label?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AACvB,OAAc,EAAE,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,KAAK,OAAO,GAAG;IACb,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAY,EACZ,IAAc,EACd,KAAmB,EACnB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,EAAO,EACP,cAAc,EACd,YAAoB,EACpB,aAAqB,EACrB,cAAc,EACd,GAAG,oBAAoB,EACxB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAwIzB"}
+{"version":3,"file":"RadioGroupField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":"AAGA,OAAc,EAAE,KAAK,UAAU,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAc,EACZ,KAAK,aAAa,EAClB,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAI7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAEpD,KAAK,OAAO,GAAG;IACb,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,YAAY,EACZ,IAAc,EACd,KAAmB,EACnB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,EAAO,EACP,cAAc,EACd,YAAoB,EACpB,aAAa,EACb,cAAc,EACd,GAAG,oBAAoB,EACxB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CA4IzB"}

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

@@ -5,15 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioGroupField = RadioGroupField;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
+const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
 const Radio_1 = __importDefault(require("@mui/material/Radio"));
+const RadioGroup_1 = __importDefault(require("@mui/material/RadioGroup"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 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 Skeleton_1 = require("./Skeleton");
-function RadioGroupField({ name, rules, label, control, options, defaultValue, size = "small", color = "secondary", loading = false, required = false, direction = "row", sx = {}, containerProps, isHorizontal = false, navigationKey = "tab", customOnChange, ...restRadioButtonProps }) {
+function RadioGroupField({ name, rules, label, control, options, defaultValue, size = "small", color = "secondary", loading = false, required = false, direction = "row", sx = {}, containerProps, isHorizontal = false, navigationKey, customOnChange, ...restRadioButtonProps }) {
     const { field: { value, onChange, ref, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
-    const { inputRef, handleKeyDown: handleNavigationKeyDown, maintainFocus, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey });
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
+    const { inputRef, handleKeyDown: handleNavigationKeyDown, maintainFocus, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: resolvedNavigationKey });
     const fallbackInputRef = (0, react_1.useRef)(null);
     const handleKeyDown = (event) => {
         handleNavigationKeyDown(event, undefined, false);
@@ -21,11 +28,11 @@ function RadioGroupField({ name, rules, label, control, options, defaultValue, s
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: isHorizontal ? "row" : "column", alignItems: isHorizontal ? "center" : undefined, gap: isHorizontal ? 1 : "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: isHorizontal ? "row" : "column", alignItems: isHorizontal ? "center" : undefined, gap: isHorizontal ? 1 : "5px", children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { sx: {
                     whiteSpace: "normal",
                     overflow: "visible",
                     textOverflow: "unset",
-                }, required: required, disabled: restRadioButtonProps.disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { name: name, value: value, onKeyDown: handleKeyDown, onChange: (event, radioValue) => {
+                }, required: required, disabled: restRadioButtonProps.disabled, children: label })), (0, jsx_runtime_1.jsx)(RadioGroup_1.default, { name: name, value: value, onKeyDown: handleKeyDown, onChange: (event, radioValue) => {
                     let selectedValue;
                     if (radioValue === "true") {
                         selectedValue = true;
@@ -53,10 +60,10 @@ function RadioGroupField({ name, rules, label, control, options, defaultValue, s
                         inputRef.current = fallbackInputRef.current;
                     }
                     maintainFocus();
-                }, children: (0, jsx_runtime_1.jsx)(material_1.Stack, { gap: direction === "column" ? "5px" : "10px", direction: direction, ...containerProps, children: options?.map(({ label, values, disabled }, index) => {
+                }, children: (0, jsx_runtime_1.jsx)(Stack_1.default, { gap: direction === "column" ? "5px" : "10px", direction: direction, ...containerProps, children: options?.map(({ label, values, disabled }, index) => {
                         return (
                         // eslint-disable-next-line sonarjs/no-array-index-key
-                        (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: values, control: (0, jsx_runtime_1.jsx)(Radio_1.default, { ...restField, ...restRadioButtonProps, color: color, size: size, inputRef: (el) => {
+                        (0, jsx_runtime_1.jsx)(Box_1.default, { children: (0, jsx_runtime_1.jsx)(FormControlLabel_1.default, { value: values, control: (0, jsx_runtime_1.jsx)(Radio_1.default, { ...restField, ...restRadioButtonProps, color: color, size: size, inputRef: (el) => {
                                         if (!el) {
                                             return;
                                         }

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

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

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

@@ -1,9 +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.Skeleton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 const Skeleton = () => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "18.69px", width: "70px", sx: { transform: "scale(1)" } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", gap: "50px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "21px", width: "45px", sx: { transform: "scale(1)" } })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "21px", width: "45px", sx: { transform: "scale(1)" } })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "18.69px", width: "70px", sx: { transform: "scale(1)" } }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", gap: "50px", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "21px", width: "45px", sx: { transform: "scale(1)" } })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "circular", height: "25px", width: "25px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "21px", width: "45px", sx: { transform: "scale(1)" } })] })] })] }));
 };
 exports.Skeleton = Skeleton;

package/packages/shared-components/dist/FormFields/Rating/Ratting.d.ts

@@ -2,5 +2,5 @@ import { type FieldValues } from "react-hook-form";
 import type { RatingProps } from "./types";
 export declare function Rating<P extends FieldValues & {
     required?: boolean;
-}>({ control, name, defaultValue, label, rules, disabled, loading, direction, required, ...ratingProps }: RatingProps<P>): import("react/jsx-runtime").JSX.Element;
+}>({ control, name, defaultValue, label, rules, disabled, loading, direction, required, navigationKey, ...ratingProps }: RatingProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Ratting.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Ratting.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Ratting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EACrE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAoB,EACpB,QAAgB,EAChB,GAAG,WAAW,EACf,EAAE,WAAW,CAAC,CAAC,CAAC,2CA8ChB"}
+{"version":3,"file":"Ratting.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Ratting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAMlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,EAAE,EACrE,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAe,EACf,SAAoB,EACpB,QAAgB,EAChB,aAAa,EACb,GAAG,WAAW,EACf,EAAE,WAAW,CAAC,CAAC,CAAC,2CAyDhB"}

package/packages/shared-components/dist/FormFields/Rating/Ratting.js

@@ -6,17 +6,22 @@ const material_1 = require("@mui/material");
 const react_hook_form_1 = require("react-hook-form");
 const utils_1 = require("../../utils");
 const Skeleton_1 = require("./Skeleton");
-function Rating({ control, name, defaultValue, label = "", rules, disabled, loading = false, direction = "column", required = false, ...ratingProps }) {
+function Rating({ control, name, defaultValue, label = "", rules, disabled, loading = false, direction = "column", required = false, navigationKey, ...ratingProps }) {
     const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
-    const { maintainFocus } = (0, utils_1.useFormFieldFocus)({});
+    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
+    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
+    const { maintainFocus, handleKeyDown: handleNavigationKeyDown } = (0, utils_1.useFormFieldFocus)({ navigationKey: resolvedNavigationKey });
+    const handleKeyDown = (event) => {
+        handleNavigationKeyDown(event, undefined, false);
+    };
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.RatingSkeleton, { label: label });
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", direction: direction, alignItems: direction === "row" ? "center" : "flex-start", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: {
                             minWidth: direction === "row" ? "120px" : "auto",
                             marginBottom: direction === "row" ? 0 : "auto",
-                        }, required: required, children: label })), (0, jsx_runtime_1.jsx)(material_1.Rating, { disabled: disabled, value: value ?? null, onChange: (event, newValue) => {
-                            onChange(newValue);
-                            maintainFocus();
-                        }, ...restField, ...ratingProps })] }), error && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { error: true, children: error?.message })] }));
+                        }, required: required, children: label })), (0, jsx_runtime_1.jsx)("div", { onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)(material_1.Rating, { disabled: disabled, value: value ?? null, onChange: (event, newValue) => {
+                                onChange(newValue);
+                                maintainFocus();
+                            }, ...restField, ...ratingProps }) })] }), error && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { error: true, children: error?.message })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Skeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,cAAc,GAAI,WAAW,mBAAmB,4CA2B5D,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/Skeleton.tsx"],"names":[],"mappings":"AAGA,KAAK,mBAAmB,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,eAAO,MAAM,cAAc,GAAI,WAAW,mBAAmB,4CA2B5D,CAAC"}

package/packages/shared-components/dist/FormFields/Rating/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.RatingSkeleton = 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 STAR_KEYS = ["star-1", "star-2", "star-3", "star-4", "star-5"];
 const RatingSkeleton = ({ label }) => {
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((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 && ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { width: 120, height: "18.69px", sx: {
                     transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", gap: "5px", children: STAR_KEYS.map((key) => ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { width: 25, height: 25, sx: {
+                } })), (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "row", gap: "5px", children: STAR_KEYS.map((key) => ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { width: 25, height: 25, sx: {
                         transform: "scale(1)",
                     } }, key))) })] }));
 };

package/packages/shared-components/dist/FormFields/Rating/types.d.ts

@@ -1,9 +1,11 @@
 import { type RatingProps as MuiRatingProps } from "@mui/material";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+import type { NavigationKey } from "../../utils";
 export type RatingProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiRatingProps, keyof ControllerRenderProps<P>> & {
     label?: string;
     loading?: boolean;
     required?: boolean;
     direction?: "row" | "column";
+    navigationKey?: NavigationKey;
 };
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACpE,IAAI,CAAC,cAAc,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC9B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACpE,IAAI,CAAC,cAAc,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC"}

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

@@ -1,4 +1,4 @@
-import type { FieldValues } from "react-hook-form";
 import type { TextFieldProps } from "../TextField";
+import type { FieldValues } from "react-hook-form";
 export declare function SearchField<P extends FieldValues>(props: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SearchField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/SearchField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,2CAiC1E"}
+{"version":3,"file":"SearchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/SearchField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,2CAiC1E"}

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchField = SearchField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SearchOutlined_1 = __importDefault(require("@mui/icons-material/SearchOutlined"));
-const material_1 = require("@mui/material");
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 const TextField_1 = require("../TextField");
 function SearchField(props) {
     const { styling = "custom" } = props;
     return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { placeholder: "Search", InputProps: {
-            startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(SearchOutlined_1.default, { fontSize: "small" }) })),
+            startAdornment: ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: (0, jsx_runtime_1.jsx)(SearchOutlined_1.default, { fontSize: "small" }) })),
         }, InputLabelProps: styling === "default"
             ? {
                 sx: {

package/packages/shared-components/dist/FormFields/SearchField/StickySearchField.d.ts

@@ -1,6 +1,7 @@
-import { type PaperProps, type SxProps } from "@mui/material";
-import type { FieldValues } from "react-hook-form";
+import { type PaperProps } from "@mui/material/Paper";
 import type { TextFieldProps } from "../TextField";
+import type { SxProps } from "@mui/material/styles";
+import type { FieldValues } from "react-hook-form";
 type StickySearchFieldProps<T extends FieldValues> = TextFieldProps<T> & {
     top?: object | string;
     paperSx?: PaperProps;

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

@@ -1 +1 @@
-{"version":3,"file":"StickySearchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/StickySearchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAGnD,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IACvE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EAAE,mCAKtD,sBAAsB,CAAC,CAAC,CAAC,4CAkB3B,CAAC"}
+{"version":3,"file":"StickySearchField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/SearchField/StickySearchField.tsx"],"names":[],"mappings":"AACA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAM7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG;IACvE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EAAE,mCAKtD,sBAAsB,CAAC,CAAC,CAAC,4CAkB3B,CAAC"}

package/packages/shared-components/dist/FormFields/SearchField/StickySearchField.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.StickySearchField = 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 Paper_1 = __importDefault(require("@mui/material/Paper"));
 const PadBox_1 = require("../../PadBox");
 const SearchField_1 = require("./SearchField");
 const StickySearchField = ({ top = "0px", paperSx, boxSx, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(material_1.Paper, { variant: "outlined", sx: {
+    return ((0, jsx_runtime_1.jsx)(Paper_1.default, { variant: "outlined", sx: {
             position: "sticky",
             top,
             zIndex: 100,
             ...paperSx,
-        }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "5px" }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", justifyContent: "flex-end", ...boxSx }, children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...props }) }) }) }));
+        }, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "5px" }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { sx: { display: "flex", justifyContent: "flex-end", ...boxSx }, children: (0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...props }) }) }) }));
 };
 exports.StickySearchField = StickySearchField;

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

@@ -1,4 +1,4 @@
-import type { SelectProps as MuiSelectProps } from "@mui/material";
+import { type SelectProps as MuiSelectProps } from "@mui/material/Select";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
 import type { OnAction, Styling } from "../../utils/types";

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

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAmBnE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAIzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAQ3D,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACpE,IAAI,CACF,cAAc,EACd,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CACnE,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,EAC5C,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,WAAgB,EAChB,eAAsB,EACtB,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,eAAmB,EACnB,gBAA0C,EAC1C,gBAAwB,EACxB,OAAkB,EAClB,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAkfhB"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Select/Select.tsx"],"names":[],"mappings":"AASA,OAAkB,EAChB,KAAK,WAAW,IAAI,cAAc,EACnC,MAAM,sBAAsB,CAAC;AAO9B,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAMzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAS7C,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACpE,IAAI,CACF,cAAc,EACd,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CACnE,GAAG;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,CAAC;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEJ,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,EAC5C,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,WAAgB,EAChB,eAAsB,EACtB,YAAoB,EACpB,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,eAAmB,EACnB,gBAA0C,EAC1C,gBAAwB,EACxB,OAAkB,EAClB,aAAa,EACb,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAsfhB"}