@xelto.npm/xc2-lib 0.0.44 → 0.0.46

package/dist/cjs/index.js

@@ -19979,7 +19979,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',
@@ -20206,13 +20208,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 })));
 };
@@ -21686,11 +21686,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',
@@ -21883,9 +21885,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' : ''
@@ -21894,7 +21895,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); }
@@ -34870,7 +34871,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, {})] })));
 };
 
@@ -34897,7 +34898,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) {
@@ -34908,7 +34908,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 }));
         }) })));
 };
 
@@ -34920,7 +34920,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',
@@ -34943,13 +34945,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; } }) })] })) }));
 };
 
 /**
@@ -36252,7 +36248,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,
@@ -36361,7 +36357,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 })) }));
 };
 
@@ -81120,10 +81116,12 @@ 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 === 'true' ? '100%' : 'min(100%, 368px)',
+        width: fluid ? '100%' : 'min(100%, 368px)',
         color: theme.mainPallete.primary.blue,
         label: {
             zIndex: 0,
@@ -81162,7 +81160,7 @@ var StyledDatePicker = styled(DatePicker$1)(function (_a) {
             },
         },
         '@media(min-width: 720px)': {
-            width: fluid === 'true' ? '100%' : 'min(100%, 468px)',
+            width: fluid ? '100%' : 'min(100%, 468px)',
             '& label': {
                 transform: 'translate(20px,17px) scale(1)',
                 '&.Mui-focused, &.MuiFormLabel-filled': {
@@ -81179,7 +81177,7 @@ var StyledDatePicker = styled(DatePicker$1)(function (_a) {
             },
         },
         '@media(min-width: 1020px)': {
-            width: fluid === 'true' ? '100%' : 'min(100%, 268px)',
+            width: fluid ? '100%' : 'min(100%, 268px)',
             '& label': {
                 transform: 'translate(20px,10px) scale(1)',
                 '&.Mui-focused, &.MuiFormLabel-filled': {
@@ -81197,7 +81195,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',
@@ -81299,28 +81297,32 @@ var pickerStyles = function (theme) { return ({
         },
     },
 }); };
-var PickerIcon = React__namespace.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__namespace.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; _a.fluid; var _d = _a.disabled, disabled = _d === void 0 ? false : _d, forwardedRef = _a.forwardedRef, props = __rest(_a, ["value", "onChange", "label", "fluid", "disabled", "forwardedRef"]);
-    // @ts-ignore
-    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 === true ? 'true' : 'false'}
+    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, 
+            // @ts-ignore
             onChange: onChange, components: {
                 OpenPickerIcon: function (props) { return jsxRuntime.exports.jsx(PickerIcon, __assign({}, props, { disabled: disabled })); },
                 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 === 'true' ? '100%' : 'min(100%, 368px)',
+        width: fluid ? '100%' : 'min(100%, 368px)',
         '& .MuiOutlinedInput-root': {
             color: theme.mainPallete.primary.blue,
             borderRadius: 7,
@@ -81399,7 +81401,7 @@ var StyledTextField = styled(TextField$1)(function (_a) {
             fontSize: 14,
         },
         '@media(min-width: 720px)': {
-            width: fluid === 'true' ? '100%' : 'min(100%, 468px)',
+            width: fluid ? '100%' : 'min(100%, 468px)',
             '& label': {
                 transform: small ? 'translate(20px,6px) scale(1)' : 'translate(20px,17px) scale(1)',
                 '&.Mui-focused, &.MuiFormLabel-filled': {
@@ -81418,7 +81420,7 @@ var StyledTextField = styled(TextField$1)(function (_a) {
             },
         },
         '@media(min-width: 1024px)': {
-            width: fluid === 'true' ? '100%' : 'min(100%, 268px)',
+            width: fluid ? '100%' : 'min(100%, 268px)',
             '& label': {
                 transform: small ? 'translate(20px,6px) scale(1)' : 'translate(20px,10px) scale(1)',
                 '&.Mui-focused, &.MuiFormLabel-filled': {
@@ -81440,13 +81442,12 @@ 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 === true ? 'true' : 'false', ref: forwardedRef, small: small, InputProps: {
+    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' } }) }))
         } })));
 };