@codezee/sixtify-brahma 0.2.86 → 0.2.88

package/package.json

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

package/packages/shared-components/dist/Charts/LineChart.d.ts

@@ -0,0 +1,30 @@
+import type { LineSeriesType } from "@mui/x-charts";
+import type { AnchorPosition } from "@mui/x-charts/ChartsLegend/legend.types";
+import type { MakeOptional } from "@mui/x-charts/internals";
+import type { LineChartProps as MuiLineChartProps } from "@mui/x-charts/LineChart";
+type ExtendedLineSeriesType = MakeOptional<LineSeriesType, "type"> & {
+    color?: string;
+    colorMap?: {
+        [key: string]: string;
+    };
+    strokeWidth?: number;
+    getColor?: (value: number, index: number, data: readonly (number | null)[]) => string;
+};
+type LineChartProps = Omit<MuiLineChartProps, "series"> & {
+    series: ExtendedLineSeriesType[];
+    xAxisData?: string[];
+    yAxisLabel?: string;
+    xAxisLabel?: string;
+    loading?: boolean;
+    height?: MuiLineChartProps["height"];
+    width?: MuiLineChartProps["width"];
+    hideLegend?: boolean;
+    legendPosition?: AnchorPosition;
+    grid?: {
+        horizontal?: boolean;
+        vertical?: boolean;
+    };
+};
+export declare const LineChart: ({ height, width, skipAnimation, loading, tooltip, series, xAxisData, yAxisLabel, xAxisLabel, hideLegend, legendPosition, grid, ...rest }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LineChart.d.ts.map

package/packages/shared-components/dist/Charts/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/Charts/LineChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAC9E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAGnF,KAAK,sBAAsB,GAAG,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,GAAG;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,KAC7B,MAAM,CAAC;CACb,CAAC;AAEF,KAAK,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IACxD,MAAM,EAAE,sBAAsB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,IAAI,CAAC,EAAE;QAAE,UAAU,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CACrD,CAAC;AAkBF,eAAO,MAAM,SAAS,GAAI,0IAcvB,cAAc,4CAsChB,CAAC"}

package/packages/shared-components/dist/Charts/LineChart.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const LineChart_1 = require("@mui/x-charts/LineChart");
+const StyledLineChart = (0, styles_1.styled)(LineChart_1.LineChart)(({ theme }) => ({
+    "& .MuiChartsAxis-tick": {
+        stroke: theme.palette.text.secondary,
+    },
+    "& .MuiChartsAxis-line": {
+        stroke: theme.palette.divider,
+    },
+    "& .MuiChartsAxis-tickLabel": {
+        fill: theme.palette.text.secondary,
+        fontSize: 12,
+    },
+    "& .MuiChartsLegend-mark": {
+        rx: 4,
+    },
+}));
+const LineChart = ({ height = 300, width, skipAnimation = false, loading = false, tooltip, series, xAxisData, yAxisLabel, xAxisLabel, hideLegend = false, legendPosition = { horizontal: "right", vertical: "top" }, grid = { horizontal: false, vertical: false }, ...rest }) => {
+    if (loading) {
+        return (0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: height, width: width, variant: "rectangular" });
+    }
+    const xAxisConfig = xAxisData
+        ? [
+            {
+                data: xAxisData,
+                scaleType: "point",
+                label: xAxisLabel,
+            },
+        ]
+        : undefined;
+    const yAxisConfig = yAxisLabel
+        ? [
+            {
+                label: yAxisLabel,
+                width: 50,
+            },
+        ]
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(StyledLineChart, { height: height, width: width, series: series, xAxis: xAxisConfig, yAxis: yAxisConfig, skipAnimation: skipAnimation, tooltip: tooltip, grid: grid, slotProps: { legend: { hidden: hideLegend, position: legendPosition } }, ...rest }));
+};
+exports.LineChart = LineChart;

package/packages/shared-components/dist/Charts/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./BarChart";
+export * from "./LineChart";
 export * from "./PieChart";
 //# sourceMappingURL=index.d.ts.map

package/packages/shared-components/dist/Charts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}

package/packages/shared-components/dist/Charts/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BarChart"), exports);
+__exportStar(require("./LineChart"), exports);
 __exportStar(require("./PieChart"), exports);

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

@@ -0,0 +1,29 @@
+import type { SelectProps as MuiSelectProps } from "@mui/material";
+import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
+export type SelectOption = {
+    heading?: string;
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    employee_code?: string;
+    avatar?: string | null;
+    punch_code?: string;
+};
+export type SelectProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiSelectProps, keyof ControllerRenderProps<P> | "multiple" | "value" | "onChange"> & {
+    required?: boolean;
+    helperText?: string;
+    error?: boolean;
+    placeholder?: string;
+    multiple?: boolean;
+    options?: SelectOption[];
+    loading?: boolean;
+    isShowAvatar?: boolean;
+    onAction?: () => void;
+    isShowSelectAll?: boolean;
+    maxLimit?: number;
+    renderOption?: (option: SelectOption, selected: boolean) => JSX.Element;
+    maxDisplayItems?: number;
+    disableClearable?: boolean;
+};
+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, ...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

@@ -0,0 +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;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,GAAG,SAAS,EACb,EAAE,WAAW,CAAC,CAAC,CAAC,2CA0UhB"}

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

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = Select;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+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, ...restProps }) {
+    const { field: { onChange, value, ...restField }, } = (0, react_hook_form_1.useController)({
+        name,
+        control,
+        defaultValue,
+        rules,
+    });
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const theme = (0, material_1.useTheme)();
+    const { slate } = theme.palette.app.color;
+    const handleSelectAll = (isSelected) => {
+        if (isSelected) {
+            const allValues = options
+                .filter((option) => !option.disabled)
+                .map((option) => option.value);
+            onChange(allValues);
+        }
+        else {
+            onChange([]);
+        }
+    };
+    const isAllSelected = (0, react_1.useMemo)(() => {
+        if (!multiple || !isShowSelectAll || !Array.isArray(value)) {
+            return false;
+        }
+        const selectableOptions = options.filter((option) => !option.disabled);
+        return value.length === selectableOptions.length;
+    }, [multiple, isShowSelectAll, options, value]);
+    const selectedOptions = (0, react_1.useMemo)(() => {
+        if (!multiple || !Array.isArray(value)) {
+            return [];
+        }
+        return options.filter((option) => value.includes(option.value));
+    }, [multiple, options, value]);
+    const renderValue = (selected) => {
+        if (!multiple) {
+            const selectedOption = options.find((option) => option.value === selected);
+            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", noWrap: true, children: selectedOption ? selectedOption.label : placeholder })] }));
+        }
+        if (!Array.isArray(selected) || selected.length === 0) {
+            return ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", noWrap: true, children: placeholder }));
+        }
+        const visibleItems = selectedOptions.slice(0, maxDisplayItems);
+        const overflowCount = selectedOptions.length - maxDisplayItems;
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                overflow: "hidden",
+            }, children: [visibleItems.map((option) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", noWrap: true, sx: {
+                        backgroundColor: slate[800],
+                        padding: "2px 5px",
+                        borderRadius: "12px",
+                        fontSize: "12px",
+                        maxWidth: "120px",
+                    }, children: option.label }, option.value))), overflowCount > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", sx: {
+                        backgroundColor: slate[300],
+                        padding: "2px 5px",
+                        borderRadius: "12px",
+                        fontSize: "12px",
+                        fontWeight: 500,
+                    }, children: ["+", overflowCount] }))] }));
+    };
+    const groupedOptions = (0, react_1.useMemo)(() => {
+        const groups = {};
+        options.forEach((option) => {
+            const groupKey = option.heading ?? "";
+            if (!groups[groupKey]) {
+                groups[groupKey] = [];
+            }
+            groups[groupKey].push(option);
+        });
+        return groups;
+    }, [options]);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)(material_1.Skeleton, { height: "40px", sx: {
+                transform: "scale(1)",
+            } }));
+    }
+    const renderMenuItems = () => {
+        const items = [];
+        if (multiple && isShowSelectAll && options.length > 0) {
+            items.push((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { value: "select-all", children: [(0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: "small" }), indeterminate: !isAllSelected && Array.isArray(value) && value.length > 0, checked: isAllSelected, sx: { marginRight: 1 } }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Select All" })] }, "select-all"));
+            items.push((0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { margin: "0px !important" } }, "divider-select-all"));
+        }
+        Object.entries(groupedOptions).forEach(([groupName, groupOptions]) => {
+            if (groupName) {
+                items.push((0, jsx_runtime_1.jsx)(Select_styled_1.GroupHeader, { children: groupName }, `group-${groupName}`));
+            }
+            groupOptions.forEach((option) => {
+                const isSelected = multiple
+                    ? Array.isArray(value) && value.includes(option.value)
+                    : value === option.value;
+                items.push((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: option.value, disabled: option.disabled, children: renderOption ? (renderOption(option, isSelected)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [multiple && ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { icon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.BoxStyled, { size: "small" }), checkedIcon: (0, jsx_runtime_1.jsx)(CheckBox_styled_1.CheckStyled, { size: "small" }), checked: isSelected, sx: { marginRight: 1 } })), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [isShowAvatar && option.avatar && ((0, jsx_runtime_1.jsx)(material_1.Avatar, { src: option.avatar, alt: option.label, sx: { width: 24, height: 24 } })), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label })] })] })) }, option.value));
+            });
+        });
+        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: value || (multiple ? [] : ""), onChange: (event) => {
+                                const newValue = event.target.value;
+                                if (multiple && Array.isArray(newValue)) {
+                                    // Handle Select All
+                                    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);
+                                }
+                                else {
+                                    onChange(newValue);
+                                }
+                            }, 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 })] }) }));
+}

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

@@ -0,0 +1,5 @@
+import type { FormControlProps } from "@mui/material/FormControl";
+import type { TypographyProps } from "@mui/material/Typography";
+export declare const StyledFormControl: React.FC<FormControlProps>;
+export declare const GroupHeader: React.FC<TypographyProps>;
+//# sourceMappingURL=Select.styled.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Select/Select.styled.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA6BvD,CAAC;AAEH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiBhD,CAAC"}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupHeader = exports.StyledFormControl = void 0;
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+exports.StyledFormControl = (0, styles_1.styled)(material_1.FormControl)(({ theme }) => {
+    const { lightBlue, iron } = theme.palette.app.color;
+    const styles = {
+        "& .MuiInputBase-root": {
+            backgroundColor: iron[600],
+        },
+        "& .MuiSelect-select": {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            flexWrap: "nowrap",
+            overflow: "hidden",
+        },
+        "& .MuiList-root": {
+            maxHeight: 300,
+            overflowY: "auto",
+            "&::-webkit-scrollbar": {
+                width: "6px",
+            },
+            "&::-webkit-scrollbar-track": {
+                backgroundColor: lightBlue[100],
+            },
+        },
+    };
+    return styles;
+});
+exports.GroupHeader = (0, styles_1.styled)(material_1.Typography)(({ theme, }) => {
+    const { butterflyBlue } = theme.palette.app.color;
+    const styles = {
+        position: "sticky",
+        top: 0,
+        padding: "8px 16px",
+        fontSize: "14px",
+        fontWeight: 600,
+        color: butterflyBlue[900],
+        backgroundColor: butterflyBlue[500],
+        zIndex: 1,
+    };
+    return styles;
+});

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

@@ -0,0 +1,2 @@
+export * from "./Select";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Select"), exports);

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

@@ -1,8 +1,8 @@
 export * from "./Autocomplete";
 export * from "./CheckBox";
 export * from "./DatePicker";
-export * from "./DateRangeSelector";
 export * from "./DateRangePicker";
+export * from "./DateRangeSelector";
 export * from "./DateTimePicker";
 export * from "./FileUpload";
 export * from "./ImageUpload";
@@ -11,6 +11,7 @@ export * from "./PasswordField";
 export * from "./PhoneInputField";
 export * from "./RadioGroupField";
 export * from "./SearchField";
+export * from "./Select";
 export * from "./SwitchField";
 export * from "./TextField";
 export * from "./TimeField";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFields/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFields/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

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

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Autocomplete"), exports);
 __exportStar(require("./CheckBox"), exports);
 __exportStar(require("./DatePicker"), exports);
-__exportStar(require("./DateRangeSelector"), exports);
 __exportStar(require("./DateRangePicker"), exports);
+__exportStar(require("./DateRangeSelector"), exports);
 __exportStar(require("./DateTimePicker"), exports);
 __exportStar(require("./FileUpload"), exports);
 __exportStar(require("./ImageUpload"), exports);
@@ -27,6 +27,7 @@ __exportStar(require("./PasswordField"), exports);
 __exportStar(require("./PhoneInputField"), exports);
 __exportStar(require("./RadioGroupField"), exports);
 __exportStar(require("./SearchField"), exports);
+__exportStar(require("./Select"), exports);
 __exportStar(require("./SwitchField"), exports);
 __exportStar(require("./TextField"), exports);
 __exportStar(require("./TimeField"), exports);

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

@@ -1 +1 @@
-{"version":3,"file":"FormRow.styled.d.ts","sourceRoot":"","sources":["../../../src/Layouts/FormRow/FormRow.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmB3C,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,uBAAuB,CAmBlE,CAAC"}
+{"version":3,"file":"FormRow.styled.d.ts","sourceRoot":"","sources":["../../../src/Layouts/FormRow/FormRow.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAmB3C,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,uBAAuB,CAuBlE,CAAC"}

package/packages/shared-components/dist/Layouts/FormRow/FormRow.styled.js

@@ -17,12 +17,15 @@ exports.RowContainerStyled = (0, styles_1.styled)(material_1.Stack, {
     shouldForwardProp(prop) {
         return prop !== "fullWidth" && prop !== "maxColumn";
     },
-})(({ children, fullWidth, maxColumn, }) => {
+})(({ theme, children, fullWidth, maxColumn, }) => {
     const childrenCount = react_1.Children.toArray(children).length;
     const flexBasis = calculateWidth(childrenCount, fullWidth, maxColumn);
     return {
         "& > *": {
             flexBasis,
+            [theme.breakpoints.down("sm")]: {
+                flexBasis: "100%",
+            },
         },
     };
 });