@codezee/sixtify-brahma 0.2.121 → 0.2.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.121",
+  "version": "0.2.122",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"

package/packages/shared-components/dist/ActionButtons/ActionButtons.d.ts

@@ -5,6 +5,8 @@ export type ActionButtonsProps = DataProps & {
     justifyContent?: StackProps["justifyContent"];
     sx?: SxProps;
     buttonSx?: SxProps;
+    shouldOpenMenuOnShortcut?: boolean;
+    shortcutKey?: string;
 };
-export declare function ActionButtons({ buttons, justifyContent, sx, buttonSx, }: ActionButtonsProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionButtons({ buttons, justifyContent, sx, buttonSx, shouldOpenMenuOnShortcut, shortcutKey, }: ActionButtonsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ActionButtons.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../src/ActionButtons/ActionButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAIzD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC9C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAGF,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,cAAsB,EACtB,EAAE,EACF,QAAQ,GACT,EAAE,kBAAkB,2CAqGpB"}
+{"version":3,"file":"ActionButtons.d.ts","sourceRoot":"","sources":["../../src/ActionButtons/ActionButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKzD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC9C,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,cAAsB,EACtB,EAAE,EACF,QAAQ,EACR,wBAAgC,EAChC,WAAiB,GAClB,EAAE,kBAAkB,2CA0IpB"}

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

@@ -8,31 +8,52 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const noop_1 = __importDefault(require("lodash/noop"));
 const react_1 = require("react");
-// COMPONENT
-function ActionButtons({ buttons, justifyContent = "end", sx, buttonSx, }) {
+const utils_1 = require("../utils");
+function ActionButtons({ buttons, justifyContent = "end", sx, buttonSx, shouldOpenMenuOnShortcut = false, shortcutKey = "a", }) {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [openMenuKey, setOpenMenuKey] = (0, react_1.useState)(null);
+    const buttonRefs = (0, react_1.useRef)({});
     const handleMenuOpen = (event, key) => {
-        setAnchorEl(event.currentTarget);
+        const element = event instanceof HTMLElement ? event : event.currentTarget;
+        setAnchorEl(element);
         setOpenMenuKey(key);
     };
     const handleMenuClose = () => {
         setAnchorEl(null);
         setOpenMenuKey(null);
     };
+    (0, utils_1.useGlobalKeyboardShortcut)({
+        key: shortcutKey,
+        modifierKeys: ["ctrl", "alt"],
+        onTrigger: () => {
+            if (shouldOpenMenuOnShortcut) {
+                const buttonWithMenu = buttons.find((button) => !!button.menuItems?.length && !button.hidden);
+                if (buttonWithMenu) {
+                    const buttonElement = buttonRefs.current[buttonWithMenu.key];
+                    if (buttonElement) {
+                        handleMenuOpen(buttonElement, buttonWithMenu.key);
+                    }
+                }
+            }
+        },
+    });
     return ((0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", sx: sx, gap: "1.6rem", justifyContent: justifyContent, children: buttons
             .filter((button) => !button.hidden)
             .map(({ menuItems, key, ...button }) => {
             const visibleMenuItems = menuItems?.filter((menuItem) => !menuItem.hidden);
-            const isMenuOpen = openMenuKey === button.key;
+            const isMenuOpen = openMenuKey === key;
             const onClick = visibleMenuItems && visibleMenuItems.length > 0
-                ? (e) => handleMenuOpen(e, button.key)
+                ? (e) => handleMenuOpen(e, key)
                 : (button.onClick ?? noop_1.default);
             const buttonProps = {
                 ...button,
                 onClick,
             };
-            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [button.label ? ((0, jsx_runtime_1.jsx)(material_1.Button, { sx: buttonSx, ...buttonProps, children: button.label }, key)) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, { ...buttonProps, children: button.icon }, key)), isMenuOpen && visibleMenuItems && ((0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl && isMenuOpen), onClose: handleMenuClose, anchorOrigin: {
+            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [button.label ? ((0, jsx_runtime_1.jsx)(material_1.Button, { sx: buttonSx, ...buttonProps, ref: (el) => {
+                            buttonRefs.current[key] = el;
+                        }, children: button.label }, key)) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, { ref: (el) => {
+                            buttonRefs.current[key] = el;
+                        }, ...buttonProps, children: button.icon }, key)), isMenuOpen && visibleMenuItems && ((0, jsx_runtime_1.jsx)(material_1.Menu, { anchorEl: anchorEl, open: Boolean(anchorEl && isMenuOpen), onClose: handleMenuClose, anchorOrigin: {
                             vertical: "bottom",
                             horizontal: button.menuPlacement === "left" ? "left" : "right",
                         }, children: visibleMenuItems.map((item) => {

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

@@ -32,6 +32,7 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> & O
     disableClearable?: boolean;
     setValue?: UseFormSetValue<P>;
     containerProps?: StackProps;
+    styling?: "custom" | "default";
 };
-export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, autoFocus, defaultOption, disableClearable, containerProps, setValue, limitTags, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, withLabel, placeholder, freeSolo, isShowOptionsOnType, isShowSelectAll, isShowAvatar, isShowEmployeeData, shouldCloseOnSelect, onAction, renderOption, getOptionLabel, maxLimit, autoFocus, defaultOption, disableClearable, containerProps, setValue, limitTags, styling, ...restProps }: AutocompleteProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Autocomplete.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,IAAI,oBAAoB,EACzC,UAAU,EACX,MAAM,eAAe,CAAC;AAkBvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAEhB,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAC;AAUzB,MAAM,MAAM,MAAM,GAAG;IACnB,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,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC1E,IAAI,CACF,IAAI,CACF,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACvD,aAAa,CACd,EACD,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAC/B,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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EACrC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KACzB,GAAG,CAAC,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,aAAa,CAAC,EAAE,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACrE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,UAAU,CAAC;CAC7B,CAAC;AAEJ,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,SAAiB,EACjB,WAAgB,EAChB,QAAQ,EACR,mBAA2B,EAC3B,eAAsB,EACtB,YAAoB,EACpB,kBAA0B,EAC1B,mBAA2B,EAC3B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAiB,EACjB,aAAa,EACb,gBAA0C,EAC1C,cAAc,EACd,QAAQ,EACR,SAAa,EACb,GAAG,SAAS,EACb,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA2atB"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,IAAI,oBAAoB,EACzC,UAAU,EACX,MAAM,eAAe,CAAC;AAkBvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAEhB,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAC;AAUzB,MAAM,MAAM,MAAM,GAAG;IACnB,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,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC1E,IAAI,CACF,IAAI,CACF,oBAAoB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,EACvD,aAAa,CACd,EACD,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAC/B,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,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EACrC,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,KACzB,GAAG,CAAC,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,aAAa,CAAC,EAAE,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACrE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC9B,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC;AAEJ,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAAE,EAClD,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,OAAY,EACZ,KAAK,EACL,OAAe,EACf,UAAU,EACV,KAAK,EACL,SAAiB,EACjB,WAAgB,EAChB,QAAQ,EACR,mBAA2B,EAC3B,eAAsB,EACtB,YAAoB,EACpB,kBAA0B,EAC1B,mBAA2B,EAC3B,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAiB,EACjB,aAAa,EACb,gBAA0C,EAC1C,cAAc,EACd,QAAQ,EACR,SAAa,EACb,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAqctB"}

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

@@ -18,7 +18,7 @@ const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
 const ChipV2_styled_1 = require("./ChipV2.styled");
 const Skeleton_1 = require("./Skeleton");
 const Tags_1 = require("./Tags");
-function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, autoFocus = false, defaultOption, disableClearable = required ? true : false, containerProps, setValue, limitTags = 0, ...restProps }) {
+function Autocomplete({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, withLabel = false, placeholder = "", freeSolo, isShowOptionsOnType = false, isShowSelectAll = true, isShowAvatar = false, isShowEmployeeData = false, shouldCloseOnSelect = false, onAction, renderOption, getOptionLabel, maxLimit, autoFocus = false, defaultOption, disableClearable = required ? true : false, containerProps, setValue, limitTags = 0, styling = "custom", ...restProps }) {
     const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -123,7 +123,7 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", ...containerProps, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { PopperComponent: material_1.Popper, PaperComponent: StyledPaper, sx: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "start", children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { PopperComponent: material_1.Popper, PaperComponent: StyledPaper, sx: {
                             "& .MuiAutocomplete-tag": {
                                 backgroundColor: (0, styles_1.alpha)(color.iron[700], 0.6),
                                 color: color.black[900],
@@ -169,7 +169,26 @@ function Autocomplete({ control, defaultValue, name, required = false, label, mu
                             if (!multiple && selectedValue?.avatar && getOptionLabel) {
                                 startAdornment = ((0, jsx_runtime_1.jsx)(material_1.Box, { width: "20px", marginLeft: "10px", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: selectedValue.avatar, alt: selectedValue.label, sx: { width: 24, height: 24 } }) }));
                             }
-                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, placeholder: placeholder || `Select ${label}`, error: error, autoFocus: autoFocus, helperText: helperText, InputProps: {
+                            const getPlaceholder = () => {
+                                if (styling === "default") {
+                                    return placeholder;
+                                }
+                                return placeholder || `Select ${label}`;
+                            };
+                            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { ...params, placeholder: getPlaceholder(), label: styling === "default" ? label : undefined, required: styling === "default" ? required : undefined, error: error, autoFocus: autoFocus, helperText: helperText, InputLabelProps: styling === "default"
+                                    ? {
+                                        sx: {
+                                            "&:not(.MuiInputLabel-shrink)": {
+                                                fontSize: "14px",
+                                                top: "50%",
+                                                transform: "translate(14px, -50%)",
+                                            },
+                                            "&.MuiInputLabel-shrink": {
+                                                transform: "translate(14px, -9px) scale(0.75)",
+                                            },
+                                        },
+                                    }
+                                    : undefined, InputProps: {
                                     ...params.InputProps,
                                     startAdornment,
                                 }, onChange: (e) => {

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

@@ -20,6 +20,7 @@ export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> & Mui
         message?: string;
     }) => void;
     containerProps?: StackProps;
+    styling?: "custom" | "default";
 }>;
 export declare const dateFormats: {
     dateWithISO8601: string;
@@ -27,5 +28,5 @@ export declare const dateFormats: {
 };
 export declare const LeftArrowIcon: React.FC;
 export declare const RightArrowIcon: React.FC;
-export declare function DatePicker<P extends FieldValues>({ setError, control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, disableKeyboardInput, setOnFinalChange, views, format, containerProps, ...restProps }: DatePickerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker<P extends FieldValues>({ setError, control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, disableKeyboardInput, setOnFinalChange, views, format, containerProps, styling, ...restProps }: DatePickerProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,UAAU,EAAY,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;CAC7B,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,gBAAwB,EACxB,KAAgC,EAChC,MAAqC,EACrC,cAAc,EACd,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAuMpB"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,UAAU,EAAY,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAKzB,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,gBAAwB,EACxB,KAAgC,EAChC,MAAqC,EACrC,cAAc,EACd,OAAkB,EAClB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAyNpB"}

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

@@ -40,7 +40,7 @@ const RightArrowIcon = () => {
         } }));
 };
 exports.RightArrowIcon = RightArrowIcon;
-function DatePicker({ setError, control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, disableKeyboardInput = false, setOnFinalChange = false, views = ["year", "month", "day"], format = exports.dateFormats.dateWithEuropean, containerProps, ...restProps }) {
+function DatePicker({ setError, control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, disableKeyboardInput = false, setOnFinalChange = false, views = ["year", "month", "day"], format = exports.dateFormats.dateWithEuropean, containerProps, styling = "custom", ...restProps }) {
     const [localError, setLocalError] = (0, react_1.useState)();
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -64,19 +64,36 @@ function DatePicker({ setError, control, defaultValue, disabled = false, label,
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", ...containerProps, children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...restField, ...restProps, disabled: disabled, views: views, format: format, value: finalValue, readOnly: readOnly, open: open && !readOnly, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", ...containerProps, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { ...restField, ...restProps, disabled: disabled, views: views, format: format, value: finalValue, readOnly: readOnly, open: open && !readOnly, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
                     field: {
                         clearable,
                         onClear: () => onChange(null),
                         readOnly: disableKeyboardInput,
                     },
                     clearButton: {
-                        tabIndex: -1, // This will make the clear button skipped in the tab order
+                        tabIndex: -1,
                     },
                     textField: {
                         disabled,
                         error: !!localError || error,
                         helperText: localError ?? helperText,
+                        label: styling === "default" ? label : undefined,
+                        required: styling === "default" ? required : undefined,
+                        InputLabelProps: styling === "default"
+                            ? {
+                                sx: {
+                                    opacity: 0.8,
+                                    "&:not(.MuiInputLabel-shrink)": {
+                                        fontSize: "14px",
+                                        top: "50%",
+                                        transform: "translate(14px, -50%)",
+                                    },
+                                    "&.MuiInputLabel-shrink": {
+                                        transform: "translate(14px, -9px) scale(0.75)",
+                                    },
+                                },
+                            }
+                            : undefined,
                         InputProps: {
                             endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { disabled: disabled, onClick: () => setOpen(true), showTooltip: false })),
                             sx: {

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

@@ -18,6 +18,7 @@ export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> &
         type: string;
         message?: string;
     }) => void;
+    styling?: "custom" | "default";
 }>;
-export declare function DateTimePicker<P extends FieldValues>({ control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, format, helperIcon, toolTipText, timeStepsMinutes, ...restProps }: DateTimePickerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function DateTimePicker<P extends FieldValues>({ control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, format, helperIcon, toolTipText, timeStepsMinutes, styling, ...restProps }: DateTimePickerProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateTimePicker.d.ts.map

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

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

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

@@ -37,7 +37,7 @@ const RightArrowIcon = () => {
             p: "4px",
         } }));
 };
-function DateTimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, format = "dd-MM-yyyy HH:mm", helperIcon, toolTipText, timeStepsMinutes = 1, ...restProps }) {
+function DateTimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, format = "dd-MM-yyyy HH:mm", helperIcon, toolTipText, timeStepsMinutes = 1, styling = "custom", ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
     if (error && value && typeof value === "object") {
@@ -52,7 +52,7 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
         return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: "350px" }, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label }) }));
     }
     const EmptyIcon = () => null;
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => setOpen(true), onClose: () => setOpen(false), slotProps: {
                     field: {
                         clearable,
                         onClear: () => onChange(null),
@@ -64,6 +64,8 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                         disabled,
                         helperText,
                         error,
+                        label: styling === "default" ? label : undefined,
+                        required: styling === "default" ? required : undefined,
                         InputProps: {
                             endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { showTooltip: false, disabled: disabled, onClick: () => setOpen(true) })),
                             sx: {
@@ -72,6 +74,21 @@ function DateTimePicker({ control, defaultValue, disabled = false, label, readOn
                                 },
                             },
                         },
+                        InputLabelProps: styling === "default"
+                            ? {
+                                sx: {
+                                    opacity: 0.8,
+                                    "&:not(.MuiInputLabel-shrink)": {
+                                        fontSize: "14px",
+                                        top: "50%",
+                                        transform: "translate(14px, -50%)",
+                                    },
+                                    "&.MuiInputLabel-shrink": {
+                                        transform: "translate(14px, -9px) scale(0.75)",
+                                    },
+                                },
+                            }
+                            : undefined,
                     },
                     popper: {
                         sx: {

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,2CAc1E"}
+{"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,2CA6B1E"}

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

@@ -9,7 +9,18 @@ const SearchOutlined_1 = __importDefault(require("@mui/icons-material/SearchOutl
 const material_1 = require("@mui/material");
 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" }) })),
-        }, ...props }));
+        }, InputLabelProps: styling === "default"
+            ? {
+                sx: {
+                    "&:not(.MuiInputLabel-shrink)": {
+                        fontSize: "14px",
+                        top: "50%",
+                        transform: "translate(14px, -50%)",
+                    },
+                },
+            }
+            : undefined, ...props }));
 }

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

@@ -11,6 +11,7 @@ export type SelectOption = {
 };
 export type SelectProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiSelectProps, keyof ControllerRenderProps<P> | "multiple" | "value" | "onChange"> & {
     required?: boolean;
+    label?: string;
     helperText?: string;
     error?: boolean;
     placeholder?: string;
@@ -25,6 +26,7 @@ export type SelectProps<P extends FieldValues> = UseControllerProps<P> & Omit<Mu
     maxDisplayItems?: number;
     disableClearable?: boolean;
     setOnFinalChange?: boolean;
+    styling?: "custom" | "default";
 };
-export declare function Select<P extends FieldValues>({ control, defaultValue, name, required, multiple, disabled, options, rules, loading, helperText, error, placeholder, isShowSelectAll, isShowAvatar, onAction, renderOption, maxLimit, maxDisplayItems, disableClearable, setOnFinalChange, ...restProps }: SelectProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<P extends FieldValues>({ control, defaultValue, name, required, label, multiple, disabled, options, rules, loading, helperText, error, placeholder, isShowSelectAll, isShowAvatar, onAction, renderOption, maxLimit, maxDisplayItems, disableClearable, setOnFinalChange, styling, ...restProps }: SelectProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

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;AAkBnE,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAOzB,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,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,MAAM,IAAI,CAAC;IACtB,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;CAC5B,CAAC;AAEJ,wBAAgB,MAAM,CAAC,CAAC,SAAS,WAAW,EAAE,EAC5C,OAAO,EACP,YAAY,EACZ,IAAI,EACJ,QAAgB,EAChB,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,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CA4YhB"}
+{"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;AAOzB,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,MAAM,IAAI,CAAC;IACtB,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,QAAQ,GAAG,SAAS,CAAC;CAChC,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,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CAgdhB"}

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

@@ -11,7 +11,7 @@ const Actions_1 = require("../../Actions");
 const Toast_1 = require("../../Toast");
 const CheckBox_styled_1 = require("../CheckBox/CheckBox.styled");
 const Select_styled_1 = require("./Select.styled");
-function Select({ control, defaultValue, name, required = false, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, placeholder = "", isShowSelectAll = true, isShowAvatar = false, onAction, renderOption, maxLimit, maxDisplayItems = 2, disableClearable = required ? true : false, setOnFinalChange = false, ...restProps }) {
+function Select({ control, defaultValue, name, required = false, label, multiple = false, disabled = false, options = [], rules, loading = false, helperText, error, placeholder = "", isShowSelectAll = true, isShowAvatar = false, onAction, renderOption, maxLimit, maxDisplayItems = 2, disableClearable = required ? true : false, setOnFinalChange = false, styling = "custom", ...restProps }) {
     const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -51,14 +51,24 @@ function Select({ control, defaultValue, name, required = false, multiple = fals
     const renderValue = (selected) => {
         if (!multiple) {
             const selectedOption = options.find((option) => option.value === selected);
+            const placeholderText = () => {
+                if (selectedOption) {
+                    return selectedOption.label;
+                }
+                if (styling === "default" && label) {
+                    return "";
+                }
+                return placeholder;
+            };
             return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [isShowAvatar && selectedOption?.avatar && ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: selectedOption.avatar ?? "", sx: { width: 20, height: 20 } })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: disabledColor, sx: {
                             "-webkit-text-fill-color": disabledColor,
-                        }, noWrap: true, children: selectedOption ? selectedOption.label : placeholder })] }));
+                        }, noWrap: true, children: placeholderText() })] }));
         }
         if (!Array.isArray(selected) || selected.length === 0) {
+            const shouldShowPlaceholder = styling !== "default" || !label || placeholder;
             return ((0, jsx_runtime_1.jsx)(material_1.Typography, { sx: {
                     "-webkit-text-fill-color": disabledColor,
-                }, color: disabledColor, variant: "body2", noWrap: true, children: placeholder }));
+                }, color: disabledColor, variant: "body2", noWrap: true, children: shouldShowPlaceholder ? placeholder : "" }));
         }
         const visibleItems = selectedOptions.slice(0, maxDisplayItems);
         const overflowCount = selectedOptions.length - maxDisplayItems;
@@ -127,72 +137,98 @@ function Select({ control, defaultValue, name, required = false, multiple = fals
         });
         return items;
     };
-    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { gap: "10px", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "start", children: [(0, jsx_runtime_1.jsxs)(Select_styled_1.StyledFormControl, { fullWidth: true, error: error, disabled: disabled, required: required, children: [(0, jsx_runtime_1.jsx)(material_1.Select, { ...restField, ...restProps, multiple: multiple, value: getDisplayValue() ?? (multiple ? [] : ""), 
-                            // eslint-disable-next-line sonarjs/cognitive-complexity
-                            onChange: (event) => {
-                                const newValue = event.target.value;
-                                if (setOnFinalChange) {
-                                    hasPendingChange.current = true;
-                                    if (multiple &&
-                                        Array.isArray(newValue) &&
-                                        newValue.includes("select-all")) {
-                                        setPendingValue(Array.isArray(pendingValue) &&
-                                            pendingValue.length ===
-                                                options.filter(({ disabled }) => !disabled).length
-                                            ? []
-                                            : options
-                                                .filter(({ disabled }) => !disabled)
-                                                .map(({ value }) => value));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", gap: "10px", alignItems: "start", children: [(0, jsx_runtime_1.jsxs)(Select_styled_1.StyledFormControl, { fullWidth: true, error: error, disabled: disabled, required: required, sx: styling === "default"
+                            ? {
+                                "& .MuiOutlinedInput-notchedOutline": {
+                                    "& legend": {
+                                        maxWidth: 0,
+                                        "& span": {
+                                            padding: "0 5px",
+                                        },
+                                    },
+                                },
+                                "& .MuiInputLabel-root.MuiInputLabel-shrink + .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
+                                    maxWidth: "100%",
+                                },
+                            }
+                            : undefined, children: [label && styling === "default" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { id: `${name}-label`, sx: {
+                                    opacity: 0.8,
+                                    "&:not(.MuiInputLabel-shrink)": {
+                                        fontSize: "14px",
+                                        top: "50%",
+                                        transform: "translate(14px, -50%)",
+                                    },
+                                    "&.MuiInputLabel-shrink": {
+                                        transform: "translate(14px, -9px) scale(0.75)",
+                                    },
+                                }, children: label })), (0, jsx_runtime_1.jsx)(material_1.Select, { ...restField, ...restProps, multiple: multiple, value: getDisplayValue() ?? (multiple ? [] : ""), label: styling === "default" ? label : undefined, labelId: styling === "default" && label ? `${name}-label` : undefined, inputProps: {
+                                    "aria-label": styling === "custom" && label ? label : undefined,
+                                }, 
+                                // eslint-disable-next-line sonarjs/cognitive-complexity
+                                onChange: (event) => {
+                                    const newValue = event.target.value;
+                                    if (setOnFinalChange) {
+                                        hasPendingChange.current = true;
+                                        if (multiple &&
+                                            Array.isArray(newValue) &&
+                                            newValue.includes("select-all")) {
+                                            setPendingValue(Array.isArray(pendingValue) &&
+                                                pendingValue.length ===
+                                                    options.filter(({ disabled }) => !disabled).length
+                                                ? []
+                                                : options
+                                                    .filter(({ disabled }) => !disabled)
+                                                    .map(({ value }) => value));
+                                        }
+                                        else {
+                                            setPendingValue(newValue);
+                                        }
                                     }
                                     else {
-                                        setPendingValue(newValue);
-                                    }
-                                }
-                                else {
-                                    if (multiple && Array.isArray(newValue)) {
-                                        const isSelectAllIncluded = newValue.includes("select-all");
-                                        if (isSelectAllIncluded) {
-                                            handleSelectAll(!isAllSelected);
-                                            return;
-                                        }
-                                        if (maxLimit && newValue.length > maxLimit) {
-                                            Toast_1.toasts.error({
-                                                title: t("common.select.limitExceed", { maxLimit }),
-                                            });
-                                            return;
+                                        if (multiple && Array.isArray(newValue)) {
+                                            const isSelectAllIncluded = newValue.includes("select-all");
+                                            if (isSelectAllIncluded) {
+                                                handleSelectAll(!isAllSelected);
+                                                return;
+                                            }
+                                            if (maxLimit && newValue.length > maxLimit) {
+                                                Toast_1.toasts.error({
+                                                    title: t("common.select.limitExceed", { maxLimit }),
+                                                });
+                                                return;
+                                            }
                                         }
+                                        onChange(newValue);
+                                    }
+                                }, onClose: () => {
+                                    if (setOnFinalChange && hasPendingChange.current) {
+                                        onChange(pendingValue);
+                                        hasPendingChange.current = false;
+                                        setPendingValue(null);
                                     }
-                                    onChange(newValue);
-                                }
-                            }, onClose: () => {
-                                if (setOnFinalChange && hasPendingChange.current) {
-                                    onChange(pendingValue);
-                                    hasPendingChange.current = false;
-                                    setPendingValue(null);
-                                }
-                            }, renderValue: restProps.renderValue ?? renderValue, 
-                            // eslint-disable-next-line sonarjs/no-unstable-nested-components
-                            IconComponent: (props) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                                    display: "flex",
-                                    alignItems: "center",
-                                    gap: 0.5,
-                                    pr: 2.5,
-                                }, children: [value &&
-                                        ((Array.isArray(value) && value.length > 0) ||
-                                            (!Array.isArray(value) && value !== "")) &&
-                                        !disableClearable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: (e) => {
-                                            e.stopPropagation();
-                                            onChange(multiple ? [] : "");
-                                        }, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.ClearIcon, { sx: { fontSize: "14px" } }) })), (0, jsx_runtime_1.jsx)(x_date_pickers_1.ArrowDropDownIcon, { ...props })] })), displayEmpty: true, MenuProps: {
-                                PaperProps: {
-                                    sx: {
-                                        width: "inherit",
-                                        maxHeight: 300,
-                                        "& .MuiList-root": {
-                                            paddingTop: 0,
-                                            paddingBottom: 0,
+                                }, renderValue: restProps.renderValue ?? renderValue, 
+                                // eslint-disable-next-line sonarjs/no-unstable-nested-components
+                                IconComponent: (props) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 0.5,
+                                        pr: 2.5,
+                                    }, children: [value &&
+                                            ((Array.isArray(value) && value.length > 0) ||
+                                                (!Array.isArray(value) && value !== "")) &&
+                                            !disableClearable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: (e) => {
+                                                e.stopPropagation();
+                                                onChange(multiple ? [] : "");
+                                            }, children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.ClearIcon, { sx: { fontSize: "14px" } }) })), (0, jsx_runtime_1.jsx)(x_date_pickers_1.ArrowDropDownIcon, { ...props })] })), displayEmpty: true, MenuProps: {
+                                    PaperProps: {
+                                        sx: {
+                                            width: "inherit",
+                                            maxHeight: 300,
+                                            "& .MuiList-root": {
+                                                paddingTop: 0,
+                                                paddingBottom: 0,
+                                            },
                                         },
                                     },
-                                },
-                            }, children: Object.entries(groupedOptions).length ? (renderMenuItems()) : ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "No options" }) })) }), helperText && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: helperText })] }), onAction && (0, jsx_runtime_1.jsx)(Actions_1.EditIconAction, { disabled: disabled, onClick: onAction })] }) }));
+                                }, children: Object.entries(groupedOptions).length ? (renderMenuItems()) : ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "No options" }) })) }), helperText && (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: helperText })] }), onAction && (0, jsx_runtime_1.jsx)(Actions_1.EditIconAction, { disabled: disabled, onClick: onAction })] })] }));
 }

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

@@ -1,4 +1,4 @@
-import { type StackProps, type TextFieldProps as MuiTextFieldProps } from "@mui/material";
+import { type TextFieldProps as MuiTextFieldProps, type StackProps } from "@mui/material";
 import { type ControllerRenderProps, type FieldError, type FieldValues, type UseControllerProps } from "react-hook-form";
 export type AllowedCharacterType = "string" | "string-number" | "string-number-special";
 export type LetterCase = "uppercase" | "lowercase" | "mixed";
@@ -15,6 +15,7 @@ export type TextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit
         message?: string;
     }) => void;
     containerProps?: StackProps;
+    styling?: "custom" | "default";
 };
-export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function TextField<P extends FieldValues>({ control, name, defaultValue, label, rules, type, required, disabled, loading, placeholder, isCapitalize, isTrimStartDisabled, rows, characterType, letterCase, setError, containerProps, styling, ...inputFieldProps }: TextFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

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,UAAU,EACf,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAQ7D,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,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,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;CAC7B,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,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAgHnB"}
+{"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;AAEvB,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,oBAAoB,GAC5B,QAAQ,GACR,eAAe,GACf,uBAAuB,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,CAAC;AAQ7D,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,aAAa,CAAC,EAAE,oBAAoB,CAAC;IACrC,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,QAAQ,GAAG,SAAS,CAAC;CAChC,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,GAAG,eAAe,EACnB,EAAE,cAAc,CAAC,CAAC,CAAC,2CAkInB"}

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

@@ -10,7 +10,7 @@ const characterTypeMessages = {
     "string-number": "Only letters and numbers are allowed.",
     "string-number-special": "Special characters are allowed.",
 };
-function TextField({ control, name, defaultValue, label = "", rules, type, required, disabled, loading = false, placeholder = "", isCapitalize = false, isTrimStartDisabled = false, rows, characterType = "string-number-special", letterCase = "mixed", setError, containerProps, ...inputFieldProps }) {
+function TextField({ control, name, defaultValue, label = "", rules, type, required, disabled, loading = false, placeholder = "", isCapitalize = false, isTrimStartDisabled = false, rows, characterType = "string-number-special", letterCase = "mixed", setError, containerProps, styling = "custom", ...inputFieldProps }) {
     const { field: { value, onChange, ...restField }, fieldState: { error }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const handleKeyDown = (event) => {
         if (event.key === "-" && type === "number") {
@@ -49,7 +49,21 @@ function TextField({ control, name, defaultValue, label = "", rules, type, requi
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "10px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, onKeyDown: handleKeyDown, placeholder: placeholder || label, type: type, inputProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { ...containerProps, gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.TextField, { disabled: disabled, required: required, fullWidth: true, onKeyDown: handleKeyDown, placeholder: styling === "default" ? placeholder : placeholder || label, type: type, label: styling === "default" ? label : undefined, InputLabelProps: styling === "default"
+                    ? {
+                        sx: {
+                            opacity: 0.8,
+                            "&:not(.MuiInputLabel-shrink)": {
+                                fontSize: "14px",
+                                top: "50%",
+                                transform: "translate(14px, -50%)",
+                            },
+                            "&.MuiInputLabel-shrink": {
+                                transform: "translate(14px, -9px) scale(0.75)",
+                            },
+                        },
+                    }
+                    : undefined, inputProps: {
                     min: 0,
                 }, error: Boolean(error), helperText: error?.message, onChange: (event) => {
                     let value = event.target.value || null;

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

@@ -1,6 +1,6 @@
+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 { PickerValidDate } from "@mui/x-date-pickers/models";
 export type TimeFieldProps<P extends FieldValues> = UseControllerProps<P> & MuiTimeFieldProps<PickerValidDate> & Partial<{
     label: string;
     required: boolean;
@@ -11,6 +11,7 @@ export type TimeFieldProps<P extends FieldValues> = UseControllerProps<P> & MuiT
     format: string;
     isReturnLocalTime: boolean;
     isReturnDateWithTime: boolean;
+    styling?: "custom" | "default";
 }>;
-export declare function TimeField<P extends FieldValues>({ control, defaultValue, disabled, label, name, error, helperText, loading, required, rules, format, isReturnLocalTime, isReturnDateWithTime, ...restProps }: TimeFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function TimeField<P extends FieldValues>({ control, defaultValue, disabled, label, name, error, helperText, loading, required, rules, format, isReturnLocalTime, isReturnDateWithTime, styling, ...restProps }: TimeFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TimeField.d.ts.map

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,EAEL,KAAK,cAAc,IAAI,iBAAiB,EACzC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAGlE,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;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,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CA8EnB"}
+{"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;AAIzB,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,QAAQ,GAAG,SAAS,CAAC;CAChC,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,GAAG,SAAS,EACb,EAAE,cAAc,CAAC,CAAC,CAAC,2CAgGnB"}

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

@@ -7,7 +7,7 @@ const TimeField_1 = require("@mui/x-date-pickers/TimeField");
 const luxon_1 = require("luxon");
 const react_hook_form_1 = require("react-hook-form");
 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, ...restProps }) {
+function TimeField({ control, defaultValue, disabled = false, label, name, error, helperText, loading = false, required = false, rules, format = "HH:mm", isReturnLocalTime = false, isReturnDateWithTime = false, styling = "custom", ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const theme = (0, material_1.useTheme)();
     const { butterflyBlue } = theme.palette.app.color;
@@ -20,7 +20,7 @@ function TimeField({ control, defaultValue, disabled = false, label, name, error
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, 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)(material_1.Stack, { gap: "10px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, 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) {
                             return onChange(value.toFormat(format));
@@ -38,6 +38,23 @@ function TimeField({ control, defaultValue, disabled = false, label, name, error
                         disabled,
                         helperText,
                         error,
+                        label: styling === "default" ? label : undefined,
+                        required: styling === "default" ? required : undefined,
+                        InputLabelProps: styling === "default"
+                            ? {
+                                sx: {
+                                    opacity: 0.8,
+                                    "&:not(.MuiInputLabel-shrink)": {
+                                        fontSize: "14px",
+                                        top: "50%",
+                                        transform: "translate(14px, -50%)",
+                                    },
+                                    "&.MuiInputLabel-shrink": {
+                                        transform: "translate(14px, -9px) scale(0.75)",
+                                    },
+                                },
+                            }
+                            : undefined,
                         sx: {
                             backgroundColor: "white",
                             "& .Mui-selected": {

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

@@ -17,6 +17,7 @@ export type TimePickerProps<P extends FieldValues> = UseControllerProps<P> & Mui
     toolTipText?: string;
     timeStepsMinutes?: number;
     containerProps?: StackProps;
+    styling?: "custom" | "default";
 }>;
-export declare function TimePicker<P extends FieldValues>({ control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, rules, format, isReturnLocalTime, isReturnDateWithTime, timeStepsMinutes, helperIcon, toolTipText, containerProps, ...restProps }: TimePickerProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function TimePicker<P extends FieldValues>({ control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, rules, format, isReturnLocalTime, isReturnDateWithTime, timeStepsMinutes, helperIcon, toolTipText, containerProps, styling, ...restProps }: TimePickerProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TimePicker.d.ts.map

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,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,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;CAC7B,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,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAwHpB"}
+{"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,EAAE,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAIzB,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,QAAQ,GAAG,SAAS,CAAC;CAChC,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,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CA0IpB"}

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

@@ -8,7 +8,7 @@ const luxon_1 = require("luxon");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 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, ...restProps }) {
+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", ...restProps }) {
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
     const [open, setOpen] = (0, react_1.useState)(false);
     if (error && value && typeof value === "object") {
@@ -22,11 +22,28 @@ function TimePicker({ control, defaultValue, disabled = false, label, readOnly =
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", ...containerProps, children: [label && ((0, jsx_runtime_1.jsxs)(material_1.Stack, { alignItems: "center", flexDirection: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { sx: { fontSize: { xs: "14px", md: "16px" } }, 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: () => setOpen(false), timeSteps: { minutes: timeStepsMinutes }, slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "10px", ...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, { sx: { fontSize: { xs: "14px", md: "16px" } }, 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: () => setOpen(false), timeSteps: { minutes: timeStepsMinutes }, slotProps: {
                     textField: {
                         disabled,
                         helperText,
                         error,
+                        label: styling === "default" ? label : undefined,
+                        required: styling === "default" ? required : undefined,
+                        InputLabelProps: styling === "default"
+                            ? {
+                                sx: {
+                                    opacity: 0.8,
+                                    "&:not(.MuiInputLabel-shrink)": {
+                                        fontSize: "14px",
+                                        top: "50%",
+                                        transform: "translate(14px, -50%)",
+                                    },
+                                    "&.MuiInputLabel-shrink": {
+                                        transform: "translate(14px, -9px) scale(0.75)",
+                                    },
+                                },
+                            }
+                            : undefined,
                         sx: {
                             backgroundColor: "white",
                             "& .Mui-selected": {

package/packages/shared-components/dist/utils/hooks/useGlobalKeyboardShortcut.d.ts

@@ -3,7 +3,8 @@ type UseGlobalKeyboardShortcutArgs = {
     key: string;
     onTrigger: () => void;
     modifierKeys?: ModifierType | ModifierType[];
+    withoutModifiers?: boolean;
 };
-export declare const useGlobalKeyboardShortcut: ({ key, onTrigger, modifierKeys, }: UseGlobalKeyboardShortcutArgs) => void;
+export declare const useGlobalKeyboardShortcut: ({ key, onTrigger, modifierKeys, withoutModifiers, }: UseGlobalKeyboardShortcutArgs) => void;
 export {};
 //# sourceMappingURL=useGlobalKeyboardShortcut.d.ts.map

package/packages/shared-components/dist/utils/hooks/useGlobalKeyboardShortcut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalKeyboardShortcut.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useGlobalKeyboardShortcut.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAE7D,KAAK,6BAA6B,GAAG;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,mCAIvC,6BAA6B,SAsE/B,CAAC"}
+{"version":3,"file":"useGlobalKeyboardShortcut.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useGlobalKeyboardShortcut.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAE7D,KAAK,6BAA6B,GAAG;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC7C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,qDAKvC,6BAA6B,SAmF/B,CAAC"}

package/packages/shared-components/dist/utils/hooks/useGlobalKeyboardShortcut.js

@@ -7,12 +7,21 @@ exports.useGlobalKeyboardShortcut = void 0;
 const castArray_1 = __importDefault(require("lodash/castArray"));
 const every_1 = __importDefault(require("lodash/every"));
 const react_1 = require("react");
-const useGlobalKeyboardShortcut = ({ key, onTrigger, modifierKeys = "ctrl", }) => {
+const useGlobalKeyboardShortcut = ({ key, onTrigger, modifierKeys = "ctrl", withoutModifiers = false, }) => {
     (0, react_1.useEffect)(() => {
         // eslint-disable-next-line sonarjs/cognitive-complexity
         const handler = (e) => {
             const normalizedCode = key.length === 1 ? `Key${key.toUpperCase()}` : key;
             const keyMatch = e.code?.toLowerCase() === normalizedCode?.toLowerCase();
+            if (withoutModifiers) {
+                const hasNoModifiers = !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.altKey;
+                if (keyMatch && hasNoModifiers && !e.repeat) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onTrigger();
+                }
+                return;
+            }
             const normalizedModifierKeys = (0, castArray_1.default)(modifierKeys);
             const modifierMatch = (0, every_1.default)(normalizedModifierKeys, (mod) => {
                 switch (mod) {
@@ -57,6 +66,6 @@ const useGlobalKeyboardShortcut = ({ key, onTrigger, modifierKeys = "ctrl", }) =
         };
         window.addEventListener("keydown", handler, true);
         return () => window.removeEventListener("keydown", handler, true);
-    }, [key, modifierKeys, onTrigger]);
+    }, [key, modifierKeys, onTrigger, withoutModifiers]);
 };
 exports.useGlobalKeyboardShortcut = useGlobalKeyboardShortcut;