@xelto.npm/xc2-lib 0.0.45 → 0.0.47

package/dist/esm/index.js

@@ -19959,7 +19959,9 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
   variant: propTypes.exports /* @typescript-to-proptypes-ignore */.oneOfType([propTypes.exports.oneOf(['contained', 'outlined', 'text']), propTypes.exports.string])
 } : void 0;
 
-var CustomButton = styled(Button)(function (_a) {
+var CustomButton = styled(Button, {
+    shouldForwardProp: function (prop) { return prop !== "fluid"; }
+})(function (_a) {
     var fluid = _a.fluid;
     return ({
         width: fluid ? '100%' : 'auto',
@@ -20186,13 +20188,11 @@ var CustomButton = styled(Button)(function (_a) {
 });
 // @ts-ignore
 var CustomButtonComponent = function (_a) {
-    var type = _a.type, text = _a.text, size = _a.size, fluid = _a.fluid, color = _a.color; _a.resolution; _a.width; var onClick = _a.onClick, disabled = _a.disabled, _b = _a.forwardedRef, forwardedRef = _b === void 0 ? null : _b, props = __rest(_a, ["type", "text", "size", "fluid", "color", "resolution", "width", "onClick", "disabled", "forwardedRef"]);
+    var type = _a.type, text = _a.text, size = _a.size, fluid = _a.fluid, color = _a.color, onClick = _a.onClick, disabled = _a.disabled, forwardedRef = _a.forwardedRef, props = __rest(_a, ["type", "text", "size", "fluid", "color", "onClick", "disabled", "forwardedRef"]);
     var colorClassName = disabled ? 'grey' : color ? color : 'navy-blue'; // navy-blue / red / black / grey / special-green
     var typeClassName = type || 'primary'; // primary / secondary / ghost
     var sizeClassName = size || 'big'; // null / big / small
     // const behaviourClassName = behaviour || '';
-    // const resolutionClassName = resolution === '480x800' ? 'regular' : resolution === '720x1280' ? 'big' :resolution === '1024x768/1440x960/1920x1080' ? 'small' : ''
-    // const widthClassName = width === '100%' ? 'width100' : width === '50%' ? 'width50' : width === '33%' ? 'width33' : '';
     var finalClassName = "".concat(typeClassName, " ").concat(colorClassName, " ").concat(sizeClassName);
     return (jsxRuntime.exports.jsx(CustomButton, __assign({ disabled: disabled, onClick: onClick, className: finalClassName, fluid: fluid, variant: "contained", disableRipple: true, ref: forwardedRef }, props, { children: text })));
 };
@@ -21666,11 +21666,13 @@ var StyledIconWrapper = styled(Box)(function (_a) {
 });
 // @ts-ignore
 var Icon$1 = function (_a) {
-    var _b = _a.iconName, iconName = _b === void 0 ? '' : _b, _c = _a.color, color = _c === void 0 ? 'red-navy' : _c, _d = _a.size, size = _d === void 0 ? 'responsive' : _d, _e = _a.forwardedRef, forwardedRef = _e === void 0 ? null : _e, rest = __rest(_a, ["iconName", "color", "size", "forwardedRef"]);
-    return (jsxRuntime.exports.jsxs(StyledIconWrapper, __assign({}, rest, { ref: forwardedRef, className: "".concat(color, " ").concat(size), color: color, size: size, iconName: iconName }, { children: [iconName === 'icon_wf_search' && jsxRuntime.exports.jsx(SvgIconWfSearch, {}), iconName === 'icon_wf_locked' && jsxRuntime.exports.jsx(SvgIconWfLocked, {}), iconName === 'icon_wf_download' && jsxRuntime.exports.jsx(SvgIconWfDownload, {}), iconName === 'icon_wf_remove' && jsxRuntime.exports.jsx(SvgIconWfRemove, {}), iconName === 'icon_wf_logout' && jsxRuntime.exports.jsx(SvgIconWfLogout, {}), iconName === 'icon_wf_edit' && jsxRuntime.exports.jsx(SvgIconWfEdit, {}), iconName === 'icon_wf_settings_or_filter' && jsxRuntime.exports.jsx(SvgIconWfSettingsOrFilter, {}), iconName === 'icon_wf_barcode_1d' && jsxRuntime.exports.jsx(SvgIconWfBarcode1D, {}), iconName === 'icon_wf_barcode_2d' && jsxRuntime.exports.jsx(SvgIconWfBarcode2D, {}), iconName === 'icon_wf_barcode_printer' && jsxRuntime.exports.jsx(SvgIconWfBarcodePrinter, {}), iconName === 'icon_wf_box' && jsxRuntime.exports.jsx(SvgIconWfBox, {}), iconName === 'icon_wf_calculator' && jsxRuntime.exports.jsx(SvgIconWfCalculator, {}), iconName === 'icon_wf_calendar' && jsxRuntime.exports.jsx(SvgIconWfCalendar, {}), iconName === 'icon_wf_car' && jsxRuntime.exports.jsx(SvgIconWfCar, {}), iconName === 'icon_wf_forklift' && jsxRuntime.exports.jsx(SvgIconWfForklift, {}), iconName === 'icon_wf_invoice' && jsxRuntime.exports.jsx(SvgIconWfInvoice, {}), iconName === 'icon_wf_keyboard' && jsxRuntime.exports.jsx(SvgIconWfKeyboard, {}), iconName === 'icon_wf_logs' && jsxRuntime.exports.jsx(SvgIconWfLogs, {}), iconName === 'icon_wf_no_barcode_printer' && jsxRuntime.exports.jsx(SvgIconWfNoBarcodePrinter, {}), iconName === 'icon_wf_no_scan' && jsxRuntime.exports.jsx(SvgIconWfNoScan, {}), iconName === 'icon_wf_pallet' && jsxRuntime.exports.jsx(SvgIconWfPallet, {}), iconName === 'icon_wf_pin' && jsxRuntime.exports.jsx(SvgIconWfPin, {}), iconName === 'icon_wf_scan' && jsxRuntime.exports.jsx(SvgIconWfScan, {}), iconName === 'icon_wf_send' && jsxRuntime.exports.jsx(SvgIconWfSend, {}), iconName === 'icon_wf_status_ksef' && jsxRuntime.exports.jsx(SvgIconWfStatusKsef, {}), iconName === 'icon_wf_stop' && jsxRuntime.exports.jsx(SvgIconWfStop, {}), iconName === 'icon_wf_unpin' && jsxRuntime.exports.jsx(SvgIconWfUnpin, {}), iconName === 'icon_wf_refresh' && jsxRuntime.exports.jsx(SvgIconWfRefresh, {}), iconName === 'icon_ui_close' && jsxRuntime.exports.jsx(SvgIconUiClose, {}), iconName === 'icon_ui_chevron_up' && jsxRuntime.exports.jsx(SvgIconUiChevronUp, {}), iconName === 'icon_ui_chevron_down' && jsxRuntime.exports.jsx(SvgIconUiChevronDown, {}), iconName === 'icon_ui_chevron_right' && jsxRuntime.exports.jsx(SvgIconUiChevronRight, {}), iconName === 'icon_ui_chevron_left' && jsxRuntime.exports.jsx(SvgIconUiChevronLeft, {}), iconName === 'icon_sp_check_mark' && jsxRuntime.exports.jsx(SvgIconSpCheckMark, {}), iconName === 'icon_sp_warning' && jsxRuntime.exports.jsx(SvgIconSpWarning, {}), iconName === 'icon_sp_info' && jsxRuntime.exports.jsx(SvgIconSpInfo, {}), iconName === 'icon_sp_info_2' && jsxRuntime.exports.jsx(SvgIconSpInfo2, {}), iconName === 'icon_burger_menu' && jsxRuntime.exports.jsx(SvgMenuBurger, {}), iconName === 'icon_update' && jsxRuntime.exports.jsx(SvgUpdateIcon, {}), iconName === 'icon_checkbox_default' && jsxRuntime.exports.jsx(SvgCheckboxDefault, {}), iconName === 'icon_checkbox_checked' && jsxRuntime.exports.jsx(SvgCheckboxChecked, {}), iconName === 'icon_checkbox_indeterminate' && jsxRuntime.exports.jsx(SvgChecbkoxIndeterminate, {})] })));
+    var _b = _a.iconName, iconName = _b === void 0 ? '' : _b, _c = _a.color, color = _c === void 0 ? 'red-navy' : _c, _d = _a.size, size = _d === void 0 ? 'responsive' : _d, forwardedRef = _a.forwardedRef, rest = __rest(_a, ["iconName", "color", "size", "forwardedRef"]);
+    return (jsxRuntime.exports.jsxs(StyledIconWrapper, __assign({}, rest, { ref: forwardedRef, className: "".concat(color, " ").concat(size), color: color, iconName: iconName }, { children: [iconName === 'icon_wf_search' && jsxRuntime.exports.jsx(SvgIconWfSearch, {}), iconName === 'icon_wf_locked' && jsxRuntime.exports.jsx(SvgIconWfLocked, {}), iconName === 'icon_wf_download' && jsxRuntime.exports.jsx(SvgIconWfDownload, {}), iconName === 'icon_wf_remove' && jsxRuntime.exports.jsx(SvgIconWfRemove, {}), iconName === 'icon_wf_logout' && jsxRuntime.exports.jsx(SvgIconWfLogout, {}), iconName === 'icon_wf_edit' && jsxRuntime.exports.jsx(SvgIconWfEdit, {}), iconName === 'icon_wf_settings_or_filter' && jsxRuntime.exports.jsx(SvgIconWfSettingsOrFilter, {}), iconName === 'icon_wf_barcode_1d' && jsxRuntime.exports.jsx(SvgIconWfBarcode1D, {}), iconName === 'icon_wf_barcode_2d' && jsxRuntime.exports.jsx(SvgIconWfBarcode2D, {}), iconName === 'icon_wf_barcode_printer' && jsxRuntime.exports.jsx(SvgIconWfBarcodePrinter, {}), iconName === 'icon_wf_box' && jsxRuntime.exports.jsx(SvgIconWfBox, {}), iconName === 'icon_wf_calculator' && jsxRuntime.exports.jsx(SvgIconWfCalculator, {}), iconName === 'icon_wf_calendar' && jsxRuntime.exports.jsx(SvgIconWfCalendar, {}), iconName === 'icon_wf_car' && jsxRuntime.exports.jsx(SvgIconWfCar, {}), iconName === 'icon_wf_forklift' && jsxRuntime.exports.jsx(SvgIconWfForklift, {}), iconName === 'icon_wf_invoice' && jsxRuntime.exports.jsx(SvgIconWfInvoice, {}), iconName === 'icon_wf_keyboard' && jsxRuntime.exports.jsx(SvgIconWfKeyboard, {}), iconName === 'icon_wf_logs' && jsxRuntime.exports.jsx(SvgIconWfLogs, {}), iconName === 'icon_wf_no_barcode_printer' && jsxRuntime.exports.jsx(SvgIconWfNoBarcodePrinter, {}), iconName === 'icon_wf_no_scan' && jsxRuntime.exports.jsx(SvgIconWfNoScan, {}), iconName === 'icon_wf_pallet' && jsxRuntime.exports.jsx(SvgIconWfPallet, {}), iconName === 'icon_wf_pin' && jsxRuntime.exports.jsx(SvgIconWfPin, {}), iconName === 'icon_wf_scan' && jsxRuntime.exports.jsx(SvgIconWfScan, {}), iconName === 'icon_wf_send' && jsxRuntime.exports.jsx(SvgIconWfSend, {}), iconName === 'icon_wf_status_ksef' && jsxRuntime.exports.jsx(SvgIconWfStatusKsef, {}), iconName === 'icon_wf_stop' && jsxRuntime.exports.jsx(SvgIconWfStop, {}), iconName === 'icon_wf_unpin' && jsxRuntime.exports.jsx(SvgIconWfUnpin, {}), iconName === 'icon_wf_refresh' && jsxRuntime.exports.jsx(SvgIconWfRefresh, {}), iconName === 'icon_ui_close' && jsxRuntime.exports.jsx(SvgIconUiClose, {}), iconName === 'icon_ui_chevron_up' && jsxRuntime.exports.jsx(SvgIconUiChevronUp, {}), iconName === 'icon_ui_chevron_down' && jsxRuntime.exports.jsx(SvgIconUiChevronDown, {}), iconName === 'icon_ui_chevron_right' && jsxRuntime.exports.jsx(SvgIconUiChevronRight, {}), iconName === 'icon_ui_chevron_left' && jsxRuntime.exports.jsx(SvgIconUiChevronLeft, {}), iconName === 'icon_sp_check_mark' && jsxRuntime.exports.jsx(SvgIconSpCheckMark, {}), iconName === 'icon_sp_warning' && jsxRuntime.exports.jsx(SvgIconSpWarning, {}), iconName === 'icon_sp_info' && jsxRuntime.exports.jsx(SvgIconSpInfo, {}), iconName === 'icon_sp_info_2' && jsxRuntime.exports.jsx(SvgIconSpInfo2, {}), iconName === 'icon_burger_menu' && jsxRuntime.exports.jsx(SvgMenuBurger, {}), iconName === 'icon_update' && jsxRuntime.exports.jsx(SvgUpdateIcon, {}), iconName === 'icon_checkbox_default' && jsxRuntime.exports.jsx(SvgCheckboxDefault, {}), iconName === 'icon_checkbox_checked' && jsxRuntime.exports.jsx(SvgCheckboxChecked, {}), iconName === 'icon_checkbox_indeterminate' && jsxRuntime.exports.jsx(SvgChecbkoxIndeterminate, {})] })));
 };
 
-var CustomIconButton = styled(Button)(function (_a) {
+var CustomIconButton = styled(Button, {
+    shouldForwardProp: function (prop) { return prop !== "fluid"; }
+})(function (_a) {
     var fluid = _a.fluid;
     return ({
         width: fluid ? '100%' : 'auto',
@@ -21863,9 +21865,8 @@ var CustomIconButton = styled(Button)(function (_a) {
         },
     });
 });
-// @ts-ignore
-function IconButtonComponent(_a) {
-    var text = _a.text, type = _a.type, icon = _a.icon, color = _a.color, fluid = _a.fluid, onClick = _a.onClick, _b = _a.forwardedRef, forwardedRef = _b === void 0 ? null : _b, props = __rest(_a, ["text", "type", "icon", "color", "fluid", "onClick", "forwardedRef"]);
+var IconButtonComponent = function (_a) {
+    var text = _a.text, type = _a.type, icon = _a.icon, color = _a.color, fluid = _a.fluid, onClick = _a.onClick, forwardedRef = _a.forwardedRef, props = __rest(_a, ["text", "type", "icon", "color", "fluid", "onClick", "forwardedRef"]);
     var colorClassName = color || '';
     var typeClassName = type || '';
     // const resolutionClassName = resolution === '480x800' ? 'regular' : resolution === '720x1280' ? 'big' :resolution === '1024x768/1440x960/1920x1080' ? 'small' : ''
@@ -21874,7 +21875,7 @@ function IconButtonComponent(_a) {
     // const iconVariant = icon === 'download' ? IconDownloadGrey : IconDownloadWhite;
     // const iconVariant = `${type} ${icon} ${colorClassName}`;
     return (jsxRuntime.exports.jsx(CustomIconButton, __assign({}, props, { onClick: onClick, fluid: fluid, ref: forwardedRef, startIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: icon, color: color === 'grey' ? 'disabled' : type === 'primary' ? 'white' : color }), className: finalClassName, variant: "contained", disableRipple: true }, { children: text })));
-}
+};
 
 var _g$t;
 function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
@@ -34850,7 +34851,7 @@ var StyledLogoWrapper = styled(Box)(function (_a) {
 });
 // @ts-ignore
 var Logo = function (_a) {
-    var logoName = _a.logoName, color = _a.color, props = __rest(_a, ["logoName", "color"]);
+    var logoName = _a.logoName, _b = _a.color, color = _b === void 0 ? 'red-navy' : _b, props = __rest(_a, ["logoName", "color"]);
     return (jsxRuntime.exports.jsxs(StyledLogoWrapper, __assign({ className: color, color: color }, props, { children: [logoName === 'logo_xelcode' && jsxRuntime.exports.jsx(SvgLogoXelcode, {}), logoName === 'logo_xelcode_dashboard' && jsxRuntime.exports.jsx(SvgLogoXelcodeDashboard, {})] })));
 };
 
@@ -34877,7 +34878,6 @@ var StyledBottomBarWrapper = styled(Box)(function (_a) {
         },
     });
 });
-// @ts-ignore
 var BottomBarComponent = function (_a) {
     var buttons = _a.buttons, props = __rest(_a, ["buttons"]);
     return (jsxRuntime.exports.jsx(StyledBottomBarWrapper, __assign({}, props, { children: buttons.map(function (item) {
@@ -34888,7 +34888,7 @@ var BottomBarComponent = function (_a) {
             var text = (item === null || item === void 0 ? void 0 : item.text) || '';
             var color = (item === null || item === void 0 ? void 0 : item.color) || 'navy-blue';
             var size = (item === null || item === void 0 ? void 0 : item.size) || 'small';
-            return (jsxRuntime.exports.jsx(CustomButtonComponent, { disabled: disabled, fluid: fluid, onClick: onClick && typeof onClick === "function" ? onClick : null, type: type, text: text, color: color, size: size, resolution: undefined, width: undefined, forwardedRef: undefined }));
+            return (jsxRuntime.exports.jsx(CustomButtonComponent, { disabled: disabled, fluid: fluid, onClick: onClick && typeof onClick === "function" ? onClick : undefined, type: type, text: text, color: color, size: size }));
         }) })));
 };
 
@@ -34900,7 +34900,9 @@ var StyledInfoBar = styled('div')(function (_a) { return ({
     width: '100%',
     zIndex: 100,
 }); });
-var StyledInfoRow = styled('div')(function (_a) {
+var StyledInfoRow = styled('div', {
+    shouldForwardProp: function (prop) { return prop !== "noLogo"; }
+})(function (_a) {
     var noLogo = _a.noLogo;
     return ({
         boxSizing: 'border-box',
@@ -34923,13 +34925,7 @@ var StyledInfoRow = styled('div')(function (_a) {
 // @ts-ignore
 var BottomInfoBar = function (_a) {
     var _b = _a.noLogo, noLogo = _b === void 0 ? false : _b, _c = _a.leftText, leftText = _c === void 0 ? 'left' : _c, _d = _a.rightText, rightText = _d === void 0 ? 'right' : _d, onRightTextClick = _a.onRightTextClick;
-    return (jsxRuntime.exports.jsx(StyledInfoBar, { children: jsxRuntime.exports.jsxs(StyledInfoRow, __assign({ noLogo: noLogo }, { children: [jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(CustomButtonComponent, { type: "ghost", text: leftText, color: "grey", disabled: true }) }), !noLogo && (jsxRuntime.exports.jsx("a", __assign({ href: "https://xelcode.com/", target: "_blank" }, { children: jsxRuntime.exports.jsx(Logo, { logoName: "logo_xelcode" }) }))), jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(CustomButtonComponent, { type: "ghost", text: rightText, color: "red", onClick: function () { return onRightTextClick && typeof onRightTextClick === "function" ? onRightTextClick() : null; } }) })] })) }));
-};
-BottomInfoBar.propTypes = {
-    noLogo: propTypes.exports.bool,
-    leftText: propTypes.exports.string,
-    rightText: propTypes.exports.string,
-    onRightTextClick: propTypes.exports.func,
+    return (jsxRuntime.exports.jsx(StyledInfoBar, { children: jsxRuntime.exports.jsxs(StyledInfoRow, __assign({ noLogo: noLogo }, { children: [jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(CustomButtonComponent, { type: "ghost", text: leftText, color: "grey", disabled: true }) }), !noLogo && (jsxRuntime.exports.jsx("a", __assign({ href: "https://xelcode.com/", target: "_blank" }, { children: jsxRuntime.exports.jsx(Logo, { logoName: "logo_xelcode" }) }))), jsxRuntime.exports.jsx("div", { children: jsxRuntime.exports.jsx(CustomButtonComponent, { type: "ghost", text: rightText, color: "red", onClick: function (e) { return onRightTextClick && typeof onRightTextClick === "function" ? onRightTextClick(e) : null; } }) })] })) }));
 };
 
 /**
@@ -36232,7 +36228,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
   value: propTypes.exports.any
 } : void 0;
 
-var StyledFormControlLabel = styled(function (props) { return jsxRuntime.exports.jsx(FormControlLabel, __assign({ ref: props.forwardedRef }, props)); })(function (_a) { return ({
+var StyledFormControlLabel = styled(FormControlLabel)(function (_a) { return ({
     boxSizing: 'border-box',
     marginBottom: '30px',
     marginLeft: 0,
@@ -36341,7 +36337,7 @@ var StyledCheckbox = styled(Checkbox)(function () {
     });
 });
 var CheckboxComponent = function (_a) {
-    var disabled = _a.disabled, label = _a.label, checked = _a.checked, onChange = _a.onChange, indeterminate = _a.indeterminate, _b = _a.forwardedRef, forwardedRef = _b === void 0 ? null : _b, props = __rest(_a, ["disabled", "label", "checked", "onChange", "indeterminate", "forwardedRef"]);
+    var disabled = _a.disabled, label = _a.label, checked = _a.checked, onChange = _a.onChange, indeterminate = _a.indeterminate, forwardedRef = _a.forwardedRef, props = __rest(_a, ["disabled", "label", "checked", "onChange", "indeterminate", "forwardedRef"]);
     return (jsxRuntime.exports.jsx(FormGroup, { children: jsxRuntime.exports.jsx(StyledFormControlLabel, __assign({}, props, { ref: forwardedRef, classes: { disabled: 'disabled' }, control: jsxRuntime.exports.jsx(StyledCheckbox, { indeterminate: indeterminate, checked: checked, onChange: onChange, disabled: disabled, classes: { disabled: 'disabled' }, icon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_default", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), checkedIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_checked", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), indeterminateIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_checkbox_indeterminate", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }) }), label: label })) }));
 };
 
@@ -42044,7 +42040,7 @@ const styledRootConfig = {
 const StyledInput = styled(Input, styledRootConfig)('');
 const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
 const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
-const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
+const Select$1 = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const props = useThemeProps({
     name: 'MuiSelect',
     props: inProps
@@ -42134,7 +42130,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     }, other))
   });
 });
-process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Select$1.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -42281,7 +42277,7 @@ process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */
    */
   variant: propTypes.exports.oneOf(['filled', 'outlined', 'standard'])
 } : void 0;
-Select.muiName = 'Select';
+Select$1.muiName = 'Select';
 
 function getTextFieldUtilityClass(slot) {
   return generateUtilityClass('MuiTextField', slot);
@@ -42453,7 +42449,7 @@ const TextField$1 = /*#__PURE__*/React.forwardRef(function TextField(inProps, re
       id: inputLabelId
     }, InputLabelProps, {
       children: label
-    })), select ? /*#__PURE__*/jsxRuntime.exports.jsx(Select, _extends$1b({
+    })), select ? /*#__PURE__*/jsxRuntime.exports.jsx(Select$1, _extends$1b({
       "aria-describedby": helperTextId,
       id: id,
       labelId: inputLabelId,
@@ -72206,7 +72202,7 @@ const TablePaginationSelectLabel = styled('p', {
 }) => _extends$1b({}, theme.typography.body2, {
   flexShrink: 0
 }));
-const TablePaginationSelect = styled(Select, {
+const TablePaginationSelect = styled(Select$1, {
   name: 'MuiTablePagination',
   slot: 'Select',
   overridesResolver: (props, styles) => _extends$1b({
@@ -81100,7 +81096,9 @@ process.env.NODE_ENV !== "production" ? DatePicker$1.propTypes = {
   views: propTypes.exports.arrayOf(propTypes.exports.oneOf(['day', 'month', 'year']).isRequired)
 } : void 0;
 
-var StyledDatePicker = styled(DatePicker$1)(function (_a) {
+var StyledDatePicker = styled(DatePicker$1, {
+    shouldForwardProp: function (prop) { return prop !== "fluid"; }
+})(function (_a) {
     var fluid = _a.fluid;
     return ({
         width: fluid ? '100%' : 'min(100%, 368px)',
@@ -81177,7 +81175,7 @@ var StyledDatePicker = styled(DatePicker$1)(function (_a) {
         },
     });
 });
-var pickerStyles = function (theme) { return ({
+var pickerStyles = function () { return ({
     '&.MuiPaper-root, .MuiPaper-root': {
         borderRadius: 2,
         boxShadow: '0 3px 6px #252A674D',
@@ -81279,7 +81277,11 @@ var pickerStyles = function (theme) { return ({
         },
     },
 }); };
-var PickerIcon = React.forwardRef(function (props, ref) { return jsxRuntime.exports.jsx(Icon$1, __assign({}, props, { iconName: "icon_wf_calendar", color: props.disabled ? 'disabled' : 'red-navy', forwardedRef: ref, style: { display: 'flex' } })); });
+var PickerIcon = React.forwardRef(function (props, ref) {
+    return jsxRuntime.exports.jsx(Icon$1, __assign({}, props, { iconName: "icon_wf_calendar", 
+        // color={props.disabled ? 'disabled' : 'red-navy'}
+        forwardedRef: ref, style: { display: 'flex' } }));
+});
 var DatePicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, _b = _a.label, label = _b === void 0 ? 'Date Picker' : _b, _c = _a.fluid, fluid = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, forwardedRef = _a.forwardedRef, props = __rest(_a, ["value", "onChange", "label", "fluid", "disabled", "forwardedRef"]);
     return (jsxRuntime.exports.jsx(LocalizationProvider, __assign({ dateAdapter: AdapterDateFns }, { children: jsxRuntime.exports.jsx(StyledDatePicker, { label: label, value: value, desktopModeMediaQuery: '@media (min-width: 1020px)', disabled: disabled, inputProps: props, inputRef: forwardedRef, fluid: fluid, 
@@ -81289,14 +81291,15 @@ var DatePicker = function (_a) {
                 SwitchViewButton: undefined,
                 SwitchViewIcon: undefined,
             }, PaperProps: {
-                sx: pickerStyles(theme)
+                sx: pickerStyles()
             }, DialogProps: {
-                sx: pickerStyles(theme)
+                sx: pickerStyles()
             }, renderInput: function (params) { return jsxRuntime.exports.jsx(TextField$1, __assign({}, params)); } }) })));
 };
 
-// @ts-ignore
-var StyledTextField = styled(TextField$1)(function (_a) {
+var StyledTextField = styled(TextField$1, {
+    shouldForwardProp: function (prop) { return prop !== "fluid" && prop !== "small"; }
+})(function (_a) {
     var fluid = _a.fluid, small = _a.small;
     return ({
         width: fluid ? '100%' : 'min(100%, 368px)',
@@ -81419,15 +81422,200 @@ var StyledTextField = styled(TextField$1)(function (_a) {
 });
 var TextField = function (_a) {
     var _b = _a.label, label = _b === void 0 ? 'TextField' : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.icon, icon = _d === void 0 ? 'icon_wf_keyboard' : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fluid, fluid = _f === void 0 ? false : _f, _g = _a.type, type = _g === void 0 ? 'text' : _g, _h = _a.min, min = _h === void 0 ? '' : _h, _j = _a.max, max = _j === void 0 ? '' : _j, _k = _a.small, small = _k === void 0 ? false : _k, _l = _a.helperText, helperText = _l === void 0 ? '' : _l, _m = _a.value, value = _m === void 0 ? '' : _m, onChange = _a.onChange, onBlur = _a.onBlur, forwardedRef = _a.forwardedRef, _o = _a.endAdornment, endAdornment = _o === void 0 ? '' : _o, props = __rest(_a, ["label", "error", "icon", "disabled", "fluid", "type", "min", "max", "small", "helperText", "value", "onChange", "onBlur", "forwardedRef", "endAdornment"]);
-    // @ts-ignore
     return (jsxRuntime.exports.jsx(StyledTextField, __assign({}, props, { value: value, onChange: onChange, label: label, type: type, variant: "outlined", error: error, onBlur: onBlur, disabled: disabled, helperText: error ? helperText : '', fluid: fluid, ref: forwardedRef, small: small, InputProps: {
             inputProps: {
                 min: min,
                 max: max,
             },
-            endAdornment: jsxRuntime.exports.jsx(InputAdornment, __assign({ position: "end" }, { children: endAdornment ? endAdornment : jsxRuntime.exports.jsx(Icon$1, { iconName: icon, color: disabled ? 'disabled' : error ? 'red' : 'red-navy', style: { display: 'flex', alignItems: 'center' }, size: "responsive" }) }))
+            endAdornment: jsxRuntime.exports.jsx(InputAdornment, __assign({ position: "end" }, { children: endAdornment ? endAdornment : jsxRuntime.exports.jsx(Icon$1, { iconName: icon, color: disabled ? 'disabled' : error ? 'red' : 'red-navy', style: { display: 'flex', alignItems: 'center' } }) }))
         } })));
 };
 
-export { AppTileComponent as AppTile, BottomBarComponent as BottomBar, BottomInfoBar, CustomButtonComponent as Button, CheckboxComponent as Checkbox, DatePicker, Icon$1 as Icon, IconButtonComponent as IconButton, Illustration, Logo, TextField, TypographyComponent as Typography };
+var StyledAutocomplete = styled(Autocomplete)(function (_a) {
+    return ({
+        width: '100%',
+        '& label': {
+            zIndex: 0,
+            color: theme.mainPallete.primary.placeholderText,
+            transform: 'translate(20px,15px) scale(1)',
+            '&.Mui-focused, &[data-shrink="true"]': {
+                color: theme.mainPallete.primary.blue,
+                transform: 'translate(15px,-10px) scale(0.75)',
+            },
+            '&.Mui-disabled': {
+                color: theme.mainPallete.primary.placeholderText,
+            },
+        },
+        '& label, .MuiOutlinedInput-root': {
+            fontSize: 21,
+            fontWeight: theme.fontWeight.regular,
+            fontFamily: theme.fontFamily,
+        },
+        '.MuiOutlinedInput-root': {
+            color: theme.mainPallete.primary.blue,
+            padding: '7.5px 75px 7.5px 20px !important',
+            borderRadius: 7,
+            '&.Mui-focused': {
+                '.MuiOutlinedInput-notchedOutline': {
+                    borderColor: theme.mainPallete.primary.blue,
+                },
+            },
+            '.MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.mainPallete.primary.blue,
+            },
+            '&.Mui-disabled fieldset': {
+                borderColor: theme.mainPallete.primary.placeholderText,
+            },
+            '&.MuiInputBase-adornedStart': {
+                paddingTop: 13,
+                paddingBottom: 13
+            },
+        },
+        'div.MuiAutocomplete-endAdornment': {
+            top: 'calc(50% - 17px)',
+            right: '20px !important',
+            'button': {
+                padding: 0,
+                transition: 'transform 0.15s linear',
+                '&[aria-label="Close"]': {
+                    transform: 'rotateX(180deg)'
+                }
+            },
+            '.MuiAutocomplete-clearIndicator': {
+                marginRight: '4px !important',
+                color: theme.mainPallete.primary.blue
+            },
+            'svg': {
+                width: 26,
+                height: 26,
+            }
+        },
+        '@media(min-width: 720px)': {
+            '& label': {
+                transform: 'translate(20px,17px) scale(1)',
+                '&.Mui-focused, &[data-shrink="true"]': {
+                    transform: 'translate(14px,-14px) scale(0.75)',
+                },
+            },
+            '& label, .MuiOutlinedInput-root': {
+                fontSize: 26,
+            },
+            '.MuiOutlinedInput-root': {
+                padding: '11.5px 75px 11.5px 20px !important',
+            },
+            'div.MuiAutocomplete-endAdornment': {
+                top: 'calc(50% - 22px)',
+                '.MuiAutocomplete-clearIndicator': {
+                    marginRight: '8px !important',
+                },
+                'svg': {
+                    width: 30,
+                    height: 30,
+                }
+            },
+        },
+        '@media(min-width: 1024px)': {
+            '& label': {
+                transform: 'translate(20px,11px) scale(1)',
+                '&.Mui-focused, &[data-shrink="true"]': {
+                    transform: 'translate(15px,-9px) scale(0.75)'
+                },
+            },
+            '& label, .MuiOutlinedInput-root': {
+                fontSize: 16,
+            },
+            '.MuiOutlinedInput-root': {
+                padding: '3.5px 65px 3.5px 20px !important',
+            },
+            'div.MuiAutocomplete-endAdornment': {
+                top: 'calc(50% - 13px)',
+                '.MuiAutocomplete-clearIndicator': {
+                    marginRight: '2px !important',
+                },
+                'svg': {
+                    width: 22,
+                    height: 22,
+                }
+            },
+        },
+    });
+});
+var StyledWrapper = styled('div', {
+    shouldForwardProp: function (prop) { return prop !== "fluid"; }
+})(function (_a) {
+    var fluid = _a.fluid;
+    return ({
+        display: 'flex',
+        alignItems: 'center',
+        width: fluid === true ? '100%' : 'min(100%, 368px)',
+        '@media (min-width: 720px) and (max-width: 1023px)': {
+            width: fluid === true ? '100%' : 'min(100%, 468px)',
+        },
+        '@media (min-width: 1024px)': {
+            width: fluid === true ? '100%' : 'min(100%, 268px)',
+        },
+    });
+});
+var StyledPaper = styled(Paper)(function (_a) { return ({
+    border: '2px solid #293072',
+    borderRadius: '7px !important',
+    translate: '0 -1.5px',
+    '.MuiAutocomplete-listbox': {
+        fontSize: 21,
+        margin: '16px 8px !important',
+        fontWeight: theme.fontWeight.regular,
+        fontFamily: theme.fontFamily,
+        color: theme.mainPallete.primary.blue,
+        padding: '0 !important',
+        '&::-webkit-scrollbar': __assign({}, theme.scrollbar),
+        '@media(min-width: 720px)': {
+            fontSize: 26,
+        },
+        '@media(min-width: 1024px)': {
+            fontSize: 16,
+        }
+    },
+    '.MuiAutocomplete-option': {
+        padding: '6px 14px !important',
+        '@media(min-width: 720px)': {
+            padding: '9px 14px !important',
+        },
+        '@media(min-width: 1024px)': {
+            padding: '3px 14px !important',
+        }
+    },
+    '.MuiAutocomplete-noOptions': {
+        fontWeight: theme.fontWeight.regular,
+        fontFamily: theme.fontFamily,
+        color: theme.mainPallete.primary.placeholderText + '!important',
+    },
+}); });
+var Select = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.label, label = _c === void 0 ? 'Select' : _c, _d = _a.withRefresh, withRefresh = _d === void 0 ? false : _d, _e = _a.fluid, fluid = _e === void 0 ? false : _e, _f = _a.placeholder, placeholder = _f === void 0 ? '' : _f; _a.onRefreshClick; var _h = _a.options, options = _h === void 0 ? [] : _h, _j = _a.value, value = _j === void 0 ? null : _j, _k = _a.onChange, onChange = _k === void 0 ? null : _k, _l = _a.forwardedRef, forwardedRef = _l === void 0 ? null : _l, _m = _a.noOptionsText, noOptionsText = _m === void 0 ? "" : _m, props = __rest(_a, ["disabled", "label", "withRefresh", "fluid", "placeholder", "onRefreshClick", "options", "value", "onChange", "forwardedRef", "noOptionsText"]);
+    var _o = React.useState(360), deg = _o[0], SetDeg = _o[1];
+    var flag = false;
+    var onRefresh = function (target) {
+        if (flag)
+            return;
+        if (!target)
+            return;
+        var targetAsHTMLElement = target;
+        targetAsHTMLElement.style.transform = "rotate(".concat(deg, "deg)");
+        SetDeg(deg + 360);
+        flag = true;
+        setTimeout(function () {
+            flag = false;
+        }, 300);
+    };
+    return (jsxRuntime.exports.jsxs(StyledWrapper, __assign({ fluid: fluid, ref: forwardedRef }, { children: [jsxRuntime.exports.jsx(StyledAutocomplete, __assign({}, props, { disabled: disabled, options: options, value: value, 
+                // @ts-ignore
+                onChange: onChange, popupIcon: jsxRuntime.exports.jsx(Icon$1, { iconName: "icon_ui_chevron_down", color: disabled ? 'disabled' : 'red-navy', style: { display: 'flex' } }), PaperComponent: StyledPaper, renderInput: function (params) { return jsxRuntime.exports.jsx(TextField$1, __assign({}, params, { label: label, placeholder: placeholder })); }, noOptionsText: noOptionsText })), withRefresh ? jsxRuntime.exports.jsx(Icon$1, { iconName: 'icon_wf_refresh', style: { display: 'flex' }, onClick: function (e) {
+                    var target = e.target;
+                    if (onRefresh) {
+                        onRefresh(target.parentNode);
+                    }
+                } }) : null] })));
+};
+
+export { AppTileComponent as AppTile, BottomBarComponent as BottomBar, BottomInfoBar, CustomButtonComponent as Button, CheckboxComponent as Checkbox, DatePicker, Icon$1 as Icon, IconButtonComponent as IconButton, Illustration, Logo, Select, TextField, TypographyComponent as Typography };
 //# sourceMappingURL=index.js.map