@homefile/components-v2 1.0.2 → 1.0.4

package/dist/components/inputs/DateRangePicker.js

@@ -1,22 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Input } from '@chakra-ui/react';
+import Calendar from '@hassanmojab/react-modern-calendar-datepicker';
+import { Calendar as CalendarIcon } from '..';
+import { useDateRangePicker } from '../../hooks';
+import { colors } from '../../theme/colors';
+export const DateRangePicker = ({ handleClick, }) => {
+    const { formatInputValue, selectedDayRange, setSelectedDayRange } = useDateRangePicker({ handleClick });
+    const renderCustomInput = ({ ref }) => (_jsxs(Flex, { align: "center", justify: "end", gap: "base", children: [_jsx(CalendarIcon, {}), _jsx(Input, { value: selectedDayRange.from && selectedDayRange.to ? formatInputValue() : '', readOnly: true, ref: ref, placeholder: "Select date range", variant: "date", size: "sm", maxW: "9rem" })] }));
+    return (_jsx(Calendar, { value: selectedDayRange, onChange: setSelectedDayRange, renderInput: renderCustomInput, calendarClassName: "custom-calendar", colorPrimary: colors.blue['3'], colorPrimaryLight: colors.lightBlue['3'] }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateRangePicker = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var react_modern_calendar_datepicker_1 = __importDefault(require("@hassanmojab/react-modern-calendar-datepicker"));
-var components_1 = require("..");
-var hooks_1 = require("../../hooks");
-var colors_1 = require("../../theme/colors");
-var DateRangePicker = function (_a) {
-    var handleClick = _a.handleClick;
-    var _b = (0, hooks_1.useDateRangePicker)({ handleClick: handleClick }), formatInputValue = _b.formatInputValue, selectedDayRange = _b.selectedDayRange, setSelectedDayRange = _b.setSelectedDayRange;
-    var renderCustomInput = function (_a) {
-        var ref = _a.ref;
-        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "end", gap: "base", children: [(0, jsx_runtime_1.jsx)(components_1.Calendar, {}), (0, jsx_runtime_1.jsx)(react_1.Input, { value: selectedDayRange.from && selectedDayRange.to ? formatInputValue() : '', readOnly: true, ref: ref, placeholder: "Select date range", variant: "date", size: "sm", maxW: "9rem" })] }));
-    };
-    return ((0, jsx_runtime_1.jsx)(react_modern_calendar_datepicker_1.default, { value: selectedDayRange, onChange: setSelectedDayRange, renderInput: renderCustomInput, calendarClassName: "custom-calendar", colorPrimary: colors_1.colors.blue['3'], colorPrimaryLight: colors_1.colors.lightBlue['3'] }));
-};
-exports.DateRangePicker = DateRangePicker;

package/dist/components/inputs/EditFileUploader.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,17 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditFileUploader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var react_2 = require("@chakra-ui/react");
-var components_1 = require("..");
-var colors_1 = require("../../theme/colors");
-var EditFileUploader = function (_a) {
-    var handleInputChange = _a.handleInputChange, props = __rest(_a, ["handleInputChange"]);
-    var hiddenFileInput = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: (0, i18next_1.t)('tooltips.editPhoto'), children: (0, jsx_runtime_1.jsx)(react_2.IconButton, __assign({}, props, { variant: "menuIconWithShadow", maxW: "fit-content", p: "1", icon: (0, jsx_runtime_1.jsx)(components_1.Edit, { stroke: colors_1.colors.neutral.white }), onClick: function () { var _a; return (_a = hiddenFileInput === null || hiddenFileInput === void 0 ? void 0 : hiddenFileInput.current) === null || _a === void 0 ? void 0 : _a.click(); } })) }), (0, jsx_runtime_1.jsx)("input", { style: { display: 'none' }, accept: "image/*", type: "file", name: "imageUpload", ref: hiddenFileInput, placeholder: (0, i18next_1.t)('addMedia.placeholder'), onChange: handleInputChange })] }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { t } from 'i18next';
+import { IconButton, Tooltip } from '@chakra-ui/react';
+import { Edit } from '..';
+import { colors } from '../../theme/colors';
+export const EditFileUploader = (_a) => {
+    var { handleInputChange } = _a, props = __rest(_a, ["handleInputChange"]);
+    const hiddenFileInput = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: t('tooltips.editPhoto'), children: _jsx(IconButton, Object.assign({}, props, { variant: "menuIconWithShadow", maxW: "fit-content", p: "1", icon: _jsx(Edit, { stroke: colors.neutral.white }), onClick: () => { var _a; return (_a = hiddenFileInput === null || hiddenFileInput === void 0 ? void 0 : hiddenFileInput.current) === null || _a === void 0 ? void 0 : _a.click(); } })) }), _jsx("input", { style: { display: 'none' }, accept: "image/*", type: "file", name: "imageUpload", ref: hiddenFileInput, placeholder: t('addMedia.placeholder'), onChange: handleInputChange })] }));
 };
-exports.EditFileUploader = EditFileUploader;

package/dist/components/inputs/ItemSubTypeSelect.js

@@ -1,11 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemSubTypeSelect = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var ItemSubTypeSelect = function (_a) {
-    var handleSelectSubType = _a.handleSelectSubType, subTypes = _a.subTypes, initialSubType = _a.initialSubType, label = _a.label;
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: "lightBlue.1", p: "1rem", w: "100%", children: initialSubType && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", justifyContent: "flex-start", children: [label && ((0, jsx_runtime_1.jsx)(react_1.Text, { p: ".5rem", children: label })), (0, jsx_runtime_1.jsx)(components_1.SelectInput, { handleClick: handleSelectSubType, initialValue: initialSubType.name, items: subTypes })] })) }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { SelectInput } from '..';
+export const ItemSubTypeSelect = ({ handleSelectSubType, subTypes, initialSubType, label }) => {
+    return (_jsx(Box, { bg: "lightBlue.1", p: "1rem", w: "100%", children: initialSubType && (_jsxs(Flex, { alignItems: "center", justifyContent: "flex-start", children: [label && (_jsx(Text, { p: ".5rem", children: label })), _jsx(SelectInput, { handleClick: handleSelectSubType, initialValue: initialSubType.name, items: subTypes })] })) }));
 };
-exports.ItemSubTypeSelect = ItemSubTypeSelect;

package/dist/components/inputs/MobileFileUploader.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,16 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileFileUploader = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var react_2 = require("@chakra-ui/react");
-var components_1 = require("..");
-var MobileFileUploader = function (_a) {
-    var handleInputChange = _a.handleInputChange, props = __rest(_a, ["handleInputChange"]);
-    var hiddenFileInput = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, __assign({}, props, { variant: "iconOutlined", h: "2.3rem", icon: (0, jsx_runtime_1.jsx)(components_1.Camera, {}), onClick: function () { var _a; return (_a = hiddenFileInput === null || hiddenFileInput === void 0 ? void 0 : hiddenFileInput.current) === null || _a === void 0 ? void 0 : _a.click(); } })), (0, jsx_runtime_1.jsx)("input", { style: { display: 'none' }, accept: "image/*", type: "file", name: "imageUpload", ref: hiddenFileInput, placeholder: (0, i18next_1.t)('addMedia.placeholder'), onChange: handleInputChange })] }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { t } from 'i18next';
+import { IconButton } from '@chakra-ui/react';
+import { Camera } from '..';
+export const MobileFileUploader = (_a) => {
+    var { handleInputChange } = _a, props = __rest(_a, ["handleInputChange"]);
+    const hiddenFileInput = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({}, props, { variant: "iconOutlined", h: "2.3rem", icon: _jsx(Camera, {}), onClick: () => { var _a; return (_a = hiddenFileInput === null || hiddenFileInput === void 0 ? void 0 : hiddenFileInput.current) === null || _a === void 0 ? void 0 : _a.click(); } })), _jsx("input", { style: { display: 'none' }, accept: "image/*", type: "file", name: "imageUpload", ref: hiddenFileInput, placeholder: t('addMedia.placeholder'), onChange: handleInputChange })] }));
 };
-exports.MobileFileUploader = MobileFileUploader;

package/dist/components/inputs/PasswordInput.js

@@ -1,19 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PasswordInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_2 = require("@chakra-ui/react");
-var components_1 = require("..");
-var PasswordInput = function (_a) {
-    var errorMessage = _a.errorMessage, id = _a.id, handleChange = _a.handleChange, hasError = _a.hasError, _b = _a.placeholder, placeholder = _b === void 0 ? 'password' : _b, _c = _a.value, value = _c === void 0 ? '' : _c;
-    var _d = (0, react_1.useState)(false), show = _d[0], setShow = _d[1];
-    var handleClick = function () { return setShow(!show); };
-    var ViewIcon = show ? (0, jsx_runtime_1.jsx)(components_1.Eye, { size: 20 }) : (0, jsx_runtime_1.jsx)(components_1.EyeOff, { size: 20 });
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: hasError, children: [(0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { autoCapitalize: "none", autoCorrect: "off", id: id, placeholder: placeholder, type: show ? 'text' : 'password', value: value, onChange: handleChange }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { width: "3rem", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { variant: "icon", "aria-label": "Enter password", icon: ViewIcon, onClick: handleClick, _hover: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { InputGroup, Input, InputRightElement, IconButton, FormControl, Text, } from '@chakra-ui/react';
+import { Eye, EyeOff } from '..';
+export const PasswordInput = ({ errorMessage, id, handleChange, hasError, placeholder = 'password', value = '', }) => {
+    const [show, setShow] = useState(false);
+    const handleClick = () => setShow(!show);
+    const ViewIcon = show ? _jsx(Eye, { size: 20 }) : _jsx(EyeOff, { size: 20 });
+    return (_jsxs(FormControl, { isInvalid: hasError, children: [_jsxs(InputGroup, { children: [_jsx(Input, { autoCapitalize: "none", autoCorrect: "off", id: id, placeholder: placeholder, type: show ? 'text' : 'password', value: value, onChange: handleChange }), _jsx(InputRightElement, { width: "3rem", children: _jsx(IconButton, { variant: "icon", "aria-label": "Enter password", icon: ViewIcon, onClick: handleClick, _hover: {
                                 svg: {
                                     fill: 'blue.3',
                                 },
-                            }, children: show ? 'Hide' : 'Show' }) })] }), hasError && (0, jsx_runtime_1.jsx)(react_2.Text, { variant: "error", children: errorMessage })] }));
+                            }, children: show ? 'Hide' : 'Show' }) })] }), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };
-exports.PasswordInput = PasswordInput;

package/dist/components/inputs/RadioCard.js

@@ -1,33 +1,18 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioCard = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var utils_1 = require("../../utils");
-var RadioCard = function (props) {
-    var _a = (0, react_1.useRadio)(props), getInputProps = _a.getInputProps, getRadioProps = _a.getRadioProps;
-    var input = getInputProps();
-    var checkbox = getRadioProps();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "label", children: [(0, jsx_runtime_1.jsx)("input", __assign({}, input)), (0, jsx_runtime_1.jsx)(react_1.Box, __assign({}, checkbox, { cursor: "pointer", borderWidth: "1px", bg: "neutral.white", _checked: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, useRadio } from '@chakra-ui/react';
+import { isSafari } from '../../utils';
+export const RadioCard = (props) => {
+    const { getInputProps, getRadioProps } = useRadio(props);
+    const input = getInputProps();
+    const checkbox = getRadioProps();
+    return (_jsxs(Box, { as: "label", children: [_jsx("input", Object.assign({}, input)), _jsx(Box, Object.assign({}, checkbox, { cursor: "pointer", borderWidth: "1px", bg: "neutral.white", _checked: {
                     borderColor: 'lightBlue.6',
                     borderLeft: '6px solid',
                     borderLeftColor: 'blue.6',
                     boxShadow: 'md',
-                }, px: 5, py: 3, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "base", minH: "40px", children: [(0, jsx_runtime_1.jsx)(react_1.Box, __assign({}, checkbox, { height: "18px", width: "18px", rounded: (0, utils_1.isSafari)() ? 'sm' : 'full', border: "1px", borderColor: "lightBlue.5", _checked: {
+                }, px: 5, py: 3, children: _jsxs(Flex, { align: "center", gap: "base", minH: "40px", children: [_jsx(Box, Object.assign({}, checkbox, { height: "18px", width: "18px", rounded: isSafari() ? 'sm' : 'full', border: "1px", borderColor: "lightBlue.5", _checked: {
                                 bg: 'blue.2',
                                 outline: '2px solid white',
                                 outlineOffset: '-3px',
                             } })), props.children] }) }))] }));
 };
-exports.RadioCard = RadioCard;

package/dist/components/inputs/SearchInput.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,15 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var i18next_1 = require("i18next");
-var react_1 = require("@chakra-ui/react");
-var components_1 = require("..");
-var colors_1 = require("../../theme/colors");
-var SearchInput = function (_a) {
-    var _b = _a.maxW, maxW = _b === void 0 ? '16rem' : _b, onChange = _a.onChange, _c = _a.placeholder, placeholder = _c === void 0 ? (0, i18next_1.t)('forms.search') : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, value = _a.value, props = __rest(_a, ["maxW", "onChange", "placeholder", "size", "value"]);
-    return ((0, jsx_runtime_1.jsxs)(react_1.InputGroup, { size: size, maxW: maxW, children: [(0, jsx_runtime_1.jsx)(react_1.InputLeftElement, { children: (0, jsx_runtime_1.jsx)(components_1.SearchIcon, { size: 26, stroke: colors_1.colors.gray[3] }) }), (0, jsx_runtime_1.jsx)(react_1.Input, __assign({ variant: "filled", bg: "lightBlue.2", placeholder: placeholder, value: value, onChange: onChange, pl: "2.5rem" }, props))] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { InputGroup, Input, InputLeftElement } from '@chakra-ui/react';
+import { SearchIcon } from '..';
+import { colors } from '../../theme/colors';
+export const SearchInput = (_a) => {
+    var { maxW = '16rem', onChange, placeholder = t('forms.search'), size = 'md', value } = _a, props = __rest(_a, ["maxW", "onChange", "placeholder", "size", "value"]);
+    return (_jsxs(InputGroup, { size: size, maxW: maxW, children: [_jsx(InputLeftElement, { children: _jsx(SearchIcon, { size: 26, stroke: colors.gray[3] }) }), _jsx(Input, Object.assign({ variant: "filled", bg: "lightBlue.2", placeholder: placeholder, value: value, onChange: onChange, pl: "2.5rem" }, props))] }));
 };
-exports.SearchInput = SearchInput;

package/dist/components/inputs/SelectButton.js

@@ -1,36 +1,20 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var helpers_1 = require("../../helpers");
-var components_1 = require("..");
-var SelectButton = function (_a) {
-    var _b, _c;
-    var _d = _a.height, height = _d === void 0 ? 'sm' : _d, isDisabled = _a.isDisabled, _e = _a.variant, variant = _e === void 0 ? 'primary' : _e, _f = _a.width, width = _f === void 0 ? '10rem' : _f, selectedValue = _a.selectedValue;
-    var type = selectedValue.toLowerCase();
-    var triggerVariants = {
-        accountType: __assign(__assign({}, helpers_1.commonStyles), { w: 'input.xxl', h: 'input.xs', borderRadius: '4px', border: '1px solid', borderColor: (_b = helpers_1.homeRoles[type]) === null || _b === void 0 ? void 0 : _b.bg, bg: (_c = helpers_1.homeRoles[type]) === null || _c === void 0 ? void 0 : _c.bg, px: '0', pl: '2', pr: '1', _hover: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuButton, Flex, Text } from '@chakra-ui/react';
+import { textVariants, iconVariants, commonStyles, homeRoles } from '../../helpers';
+import { ChevronDown } from '..';
+export const SelectButton = ({ height = 'sm', isDisabled, variant = 'primary', width = '10rem', selectedValue, }) => {
+    var _a, _b;
+    const type = selectedValue.toLowerCase();
+    const triggerVariants = {
+        accountType: Object.assign(Object.assign({}, commonStyles), { w: 'input.xxl', h: 'input.xs', borderRadius: '4px', border: '1px solid', borderColor: (_a = homeRoles[type]) === null || _a === void 0 ? void 0 : _a.bg, bg: (_b = homeRoles[type]) === null || _b === void 0 ? void 0 : _b.bg, px: '0', pl: '2', pr: '1', _hover: {
                 filter: 'brightness(0.9)',
             } }),
-        primary: __assign({ w: width, h: "input.".concat(height), borderRadius: 'sm', border: '1px solid', borderColor: 'lightBlue.6' }, helpers_1.commonStyles),
-        secondary: __assign({ w: 'input.xxl', h: 'input.xs', borderRadius: '4px', border: '1px solid', borderColor: 'lightBlue.6' }, helpers_1.commonStyles),
-        tertiary: __assign({ w: 'input.xxl', h: 'input.xs', borderRadius: '4px', border: '1px solid', borderColor: 'error.2' }, helpers_1.commonStyles),
+        primary: Object.assign({ w: width, h: `input.${height}`, borderRadius: 'sm', border: '1px solid', borderColor: 'lightBlue.6' }, commonStyles),
+        secondary: Object.assign({ w: 'input.xxl', h: 'input.xs', borderRadius: '4px', border: '1px solid', borderColor: 'lightBlue.6' }, commonStyles),
+        tertiary: Object.assign({ w: 'input.xxl', h: 'input.xs', borderRadius: '4px', border: '1px solid', borderColor: 'error.2' }, commonStyles),
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.MenuButton, __assign({ disabled: isDisabled }, triggerVariants[variant], { _disabled: {
+    return (_jsx(MenuButton, Object.assign({ disabled: isDisabled }, triggerVariants[variant], { _disabled: {
             bg: 'lightBlue.1',
             cursor: 'not-allowed',
-        }, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "4", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Text, __assign({}, helpers_1.textVariants[variant], { children: selectedValue })), (0, jsx_runtime_1.jsx)(components_1.ChevronDown, __assign({}, helpers_1.iconVariants[variant]))] }) })));
+        }, children: _jsxs(Flex, { align: "center", gap: "4", justify: "space-between", children: [_jsx(Text, Object.assign({}, textVariants[variant], { children: selectedValue })), _jsx(ChevronDown, Object.assign({}, iconVariants[variant]))] }) })));
 };
-exports.SelectButton = SelectButton;

package/dist/components/inputs/SelectInput.js

@@ -1,39 +1,23 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var i18next_1 = require("i18next");
-var react_2 = require("@chakra-ui/react");
-var helpers_1 = require("../../helpers");
-var components_1 = require("..");
-var colors_1 = require("../../theme/colors");
-var SelectInput = function (_a) {
-    var _b = _a.filterValue, filterValue = _b === void 0 ? '' : _b, handleClick = _a.handleClick, _c = _a.handleFilter, handleFilter = _c === void 0 ? function () { return null; } : _c, hasFilter = _a.hasFilter, _d = _a.height, height = _d === void 0 ? 'sm' : _d, _e = _a.initialValue, initialValue = _e === void 0 ? 'All' : _e, isDisabled = _a.isDisabled, items = _a.items, placeholder = _a.placeholder, _f = _a.variant, variant = _f === void 0 ? 'primary' : _f, _g = _a.width, width = _g === void 0 ? '10rem' : _g;
-    var _h = (0, react_1.useState)(initialValue), selectedValue = _h[0], setSelectedValue = _h[1];
-    (0, react_1.useEffect)(function () {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { t } from 'i18next';
+import { Menu, Text, Input, InputGroup, InputRightElement, Tooltip, Box, } from '@chakra-ui/react';
+import { textOptionVariants } from '../../helpers';
+import { SearchIcon, SelectButton, SelectItem, SelectList } from '..';
+import { colors } from '../../theme/colors';
+export const SelectInput = ({ filterValue = '', handleClick, handleFilter = () => null, hasFilter, height = 'sm', initialValue = 'All', isDisabled, items, placeholder, variant = 'primary', width = '10rem', }) => {
+    const [selectedValue, setSelectedValue] = useState(initialValue);
+    useEffect(() => {
         setSelectedValue(initialValue);
     }, [initialValue]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: placeholder, children: (0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", children: (0, jsx_runtime_1.jsx)(components_1.SelectButton, { selectedValue: selectedValue, height: height, isDisabled: isDisabled, variant: variant, width: width }) }) }), (0, jsx_runtime_1.jsxs)(components_1.SelectList, { children: [hasFilter && ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "md", w: "100%", px: "2", pb: "2", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { variant: "filled", bg: "lightBlue.2", pr: "4.5rem", placeholder: (0, i18next_1.t)('forms.search'), value: String(filterValue), onChange: handleFilter }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { mr: "base", children: (0, jsx_runtime_1.jsx)(components_1.SearchIcon, { size: 26, stroke: colors_1.colors.gray[3] }) })] })), items === null || items === void 0 ? void 0 : items.map(function (item) {
-                        var isSelectItem = typeof item === 'object';
-                        var id = isSelectItem ? item._id : item;
-                        var name = isSelectItem ? item.name : item;
-                        var handleItemClick = function () {
+    return (_jsxs(Menu, { children: [_jsx(Tooltip, { label: placeholder, children: _jsx(Box, { w: "100%", children: _jsx(SelectButton, { selectedValue: selectedValue, height: height, isDisabled: isDisabled, variant: variant, width: width }) }) }), _jsxs(SelectList, { children: [hasFilter && (_jsxs(InputGroup, { size: "md", w: "100%", px: "2", pb: "2", children: [_jsx(Input, { variant: "filled", bg: "lightBlue.2", pr: "4.5rem", placeholder: t('forms.search'), value: String(filterValue), onChange: handleFilter }), _jsx(InputRightElement, { mr: "base", children: _jsx(SearchIcon, { size: 26, stroke: colors.gray[3] }) })] })), items === null || items === void 0 ? void 0 : items.map((item) => {
+                        const isSelectItem = typeof item === 'object';
+                        const id = isSelectItem ? item._id : item;
+                        const name = isSelectItem ? item.name : item;
+                        const handleItemClick = () => {
                             handleClick(item);
                             setSelectedValue(name);
                         };
-                        return ((0, jsx_runtime_1.jsx)(components_1.SelectItem, { onClick: handleItemClick, children: (0, jsx_runtime_1.jsx)(react_2.Text, __assign({}, helpers_1.textOptionVariants[variant], { children: name })) }, id));
+                        return (_jsx(SelectItem, { onClick: handleItemClick, children: _jsx(Text, Object.assign({}, textOptionVariants[variant], { children: name })) }, id));
                     })] })] }));
 };
-exports.SelectInput = SelectInput;

package/dist/components/inputs/SelectInputWithBadge.js

@@ -1,33 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectInputWithBadge = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_2 = require("@chakra-ui/react");
-var components_1 = require("..");
-var SelectInputWithBadge = function (_a) {
-    var handleClick = _a.handleClick, _b = _a.height, height = _b === void 0 ? 'md' : _b, initialValue = _a.initialValue, isDisabled = _a.isDisabled, items = _a.items, _c = _a.width, width = _c === void 0 ? '10rem' : _c, _d = _a.displaySelectedValue, displaySelectedValue = _d === void 0 ? false : _d;
-    var _e = (0, react_1.useState)(initialValue !== null && initialValue !== void 0 ? initialValue : 'All'), selectedValue = _e[0], setSelectedValue = _e[1];
-    var isLargeWidth = width < '100px';
-    var elementRef = (0, react_1.useRef)(null);
-    var dimensions = (0, react_2.useDimensions)(elementRef);
-    return ((0, jsx_runtime_1.jsx)(react_2.Menu, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { w: width, ref: elementRef, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { w: "full", disabled: isDisabled, bg: "neutral.white", h: "input.".concat(height), px: "2", border: "1px", borderRadius: "sm", borderColor: "lightBlue.6", _hover: { borderColor: 'blue.1' }, _focus: { borderColor: 'blue.3' }, _disabled: {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Box, Flex, Menu, MenuButton, MenuItem, MenuList, useDimensions, } from '@chakra-ui/react';
+import { ChevronDown, SelectTextDisplay } from '..';
+export const SelectInputWithBadge = ({ handleClick, height = 'md', initialValue, isDisabled, items, width = '10rem', displaySelectedValue = false, }) => {
+    const [selectedValue, setSelectedValue] = useState(initialValue !== null && initialValue !== void 0 ? initialValue : 'All');
+    const isLargeWidth = width < '100px';
+    const elementRef = useRef(null);
+    const dimensions = useDimensions(elementRef);
+    return (_jsx(Menu, { children: _jsxs(Box, { w: width, ref: elementRef, children: [_jsx(MenuButton, { w: "full", disabled: isDisabled, bg: "neutral.white", h: `input.${height}`, px: "2", border: "1px", borderRadius: "sm", borderColor: "lightBlue.6", _hover: { borderColor: 'blue.1' }, _focus: { borderColor: 'blue.3' }, _disabled: {
                         bg: 'container.transparent',
                         color: 'gray.1',
                         pointerEvents: 'none',
                         svg: { fill: 'gray.1' },
-                    }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "2", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(components_1.SelectTextDisplay, { value: selectedValue, displaySelectedValue: displaySelectedValue }), (0, jsx_runtime_1.jsx)(components_1.ChevronDown, {})] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { zIndex: "dropdown", minH: "fit-content", maxH: "30rem", overflow: "scroll", w: isLargeWidth ? dimensions === null || dimensions === void 0 ? void 0 : dimensions.contentBox.width : 'fit-content', children: items === null || items === void 0 ? void 0 : items.map(function (item) {
-                        var isSelectItem = typeof item === 'object';
-                        var id = isSelectItem ? item._id : item;
-                        var name = isSelectItem ? item.name : item;
-                        return ((0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: function () {
+                    }, children: _jsxs(Flex, { align: "center", gap: "2", justify: "space-between", children: [_jsx(SelectTextDisplay, { value: selectedValue, displaySelectedValue: displaySelectedValue }), _jsx(ChevronDown, {})] }) }), _jsx(MenuList, { zIndex: "dropdown", minH: "fit-content", maxH: "30rem", overflow: "scroll", w: isLargeWidth ? dimensions === null || dimensions === void 0 ? void 0 : dimensions.contentBox.width : 'fit-content', children: items === null || items === void 0 ? void 0 : items.map((item) => {
+                        const isSelectItem = typeof item === 'object';
+                        const id = isSelectItem ? item._id : item;
+                        const name = isSelectItem ? item.name : item;
+                        return (_jsx(MenuItem, { onClick: () => {
                                 handleClick(item);
                                 setSelectedValue(name);
                             }, _hover: {
                                 bg: 'lightGreen.1',
                             }, _focus: {
                                 bg: 'lightGreen.1',
-                            }, children: (0, jsx_runtime_1.jsx)(components_1.SelectTextDisplay, { value: name }) }, id));
+                            }, children: _jsx(SelectTextDisplay, { value: name }) }, id));
                     }) })] }) }));
 };
-exports.SelectInputWithBadge = SelectInputWithBadge;

package/dist/components/inputs/SelectItem.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,16 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectItem = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var SelectItem = function (_a) {
-    var children = _a.children, args = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(react_1.MenuItem, __assign({}, args, { w: "100%", _hover: {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuItem } from '@chakra-ui/react';
+export const SelectItem = (_a) => {
+    var { children } = _a, args = __rest(_a, ["children"]);
+    return (_jsx(MenuItem, Object.assign({}, args, { w: "100%", _hover: {
             bg: 'lightGreen.1',
         }, _focus: {
             bg: 'lightGreen.1',
         }, children: children })));
 };
-exports.SelectItem = SelectItem;

package/dist/components/inputs/SelectList.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,12 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectList = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var SelectList = function (_a) {
-    var children = _a.children, args = __rest(_a, ["children"]);
-    return ((0, jsx_runtime_1.jsx)(react_1.MenuList, __assign({ zIndex: "dropdown", maxH: "30rem", overflow: "scroll", w: "100%", shadow: "0 25px 50px -12px rgba(0, 0, 0, 0.40)" }, args, { children: children })));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MenuList } from '@chakra-ui/react';
+export const SelectList = (_a) => {
+    var { children } = _a, args = __rest(_a, ["children"]);
+    return (_jsx(MenuList, Object.assign({ zIndex: "dropdown", maxH: "30rem", overflow: "scroll", w: "100%", shadow: "0 25px 50px -12px rgba(0, 0, 0, 0.40)" }, args, { children: children })));
 };
-exports.SelectList = SelectList;

package/dist/components/inputs/SelectTextDisplay.js

@@ -1,14 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectTextDisplay = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var helpers_1 = require("../../helpers");
-var SelectTextDisplay = function (_a) {
-    var _b, _c;
-    var _d = _a.displaySelectedValue, displaySelectedValue = _d === void 0 ? true : _d, value = _a.value;
-    var bg = (_c = (_b = helpers_1.homeRoles[value.toLowerCase()]) === null || _b === void 0 ? void 0 : _b.bg) !== null && _c !== void 0 ? _c : 'transparent';
-    var hasBadge = bg !== 'transparent';
-    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "p", py: "1", align: "center", gap: "2", children: [hasBadge && ((0, jsx_runtime_1.jsx)(react_1.chakra.span, { py: "4px", w: "22px", textAlign: "center", borderRadius: "base", bg: bg, fontSize: "0.625rem", fontWeight: "bold", textColor: "neutral.white", fontFamily: "primary", display: "inline-block", children: value.toUpperCase().charAt(0) })), displaySelectedValue && ((0, jsx_runtime_1.jsx)(react_1.chakra.span, { fontSize: "md", fontFamily: "secondary", display: "inline-block", textTransform: "capitalize", children: value }))] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, chakra } from '@chakra-ui/react';
+import { homeRoles } from '../../helpers';
+export const SelectTextDisplay = ({ displaySelectedValue = true, value, }) => {
+    var _a, _b;
+    const bg = (_b = (_a = homeRoles[value.toLowerCase()]) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : 'transparent';
+    const hasBadge = bg !== 'transparent';
+    return (_jsxs(Flex, { as: "p", py: "1", align: "center", gap: "2", children: [hasBadge && (_jsx(chakra.span, { py: "4px", w: "22px", textAlign: "center", borderRadius: "base", bg: bg, fontSize: "0.625rem", fontWeight: "bold", textColor: "neutral.white", fontFamily: "primary", display: "inline-block", children: value.toUpperCase().charAt(0) })), displaySelectedValue && (_jsx(chakra.span, { fontSize: "md", fontFamily: "secondary", display: "inline-block", textTransform: "capitalize", children: value }))] }));
 };
-exports.SelectTextDisplay = SelectTextDisplay;

package/dist/components/inputs/TextAreaInput.js

@@ -1,15 +1,3 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -21,13 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextAreaInput = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@chakra-ui/react");
-var TextAreaInput = function (_a) {
-    var errorMessage = _a.errorMessage, props = __rest(_a, ["errorMessage"]);
-    var hasError = Boolean(errorMessage);
-    return ((0, jsx_runtime_1.jsxs)(react_1.FormControl, { isInvalid: hasError, children: [(0, jsx_runtime_1.jsx)(react_1.Textarea, __assign({}, props, { bg: "neutral.white" })), hasError && (0, jsx_runtime_1.jsx)(react_1.Text, { variant: "error", children: errorMessage })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, Text, Textarea } from '@chakra-ui/react';
+export const TextAreaInput = (_a) => {
+    var { errorMessage } = _a, props = __rest(_a, ["errorMessage"]);
+    const hasError = Boolean(errorMessage);
+    return (_jsxs(FormControl, { isInvalid: hasError, children: [_jsx(Textarea, Object.assign({}, props, { bg: "neutral.white" })), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };
-exports.TextAreaInput = TextAreaInput;