odaptos_design_system 2.0.325 → 2.0.326

package/dist/index.cjs

@@ -63,8 +63,6 @@ let __mui_x_date_pickers = require("@mui/x-date-pickers");
 __mui_x_date_pickers = __toESM(__mui_x_date_pickers);
 let __mui_x_date_pickers_DatePicker = require("@mui/x-date-pickers/DatePicker");
 __mui_x_date_pickers_DatePicker = __toESM(__mui_x_date_pickers_DatePicker);
-let date_fns = require("date-fns");
-date_fns = __toESM(date_fns);
 let __mui_x_date_pickers_DesktopDateTimePicker = require("@mui/x-date-pickers/DesktopDateTimePicker");
 __mui_x_date_pickers_DesktopDateTimePicker = __toESM(__mui_x_date_pickers_DesktopDateTimePicker);
 let __mui_material_Modal = require("@mui/material/Modal");
@@ -15681,13 +15679,13 @@ const CssTextField$11 = (0, __mui_material_styles.styled)(__mui_material.TextFie
 		}
 	}
 });
-const NumberInput = ({ className, inputCode, inputNumber, isValid: isValid$1, userValue, setUserValue, setIsValid, maxElement, placeholder,...props$1 }) => {
+const NumberInput = ({ className, inputCode, inputNumber, isValid, userValue, setUserValue, setIsValid, maxElement, placeholder,...props$1 }) => {
 	const [value, setValue] = (0, react.useState)("");
 	return /* @__PURE__ */ react.default.createElement(CssTextField$11, {
 		value,
 		onKeyDown: (event) => {
 			if (event.key === "Backspace") {
-				let newValidity = [...isValid$1];
+				let newValidity = [...isValid];
 				setValue("");
 				let newUserValue = [...userValue];
 				newUserValue[inputNumber] = "";
@@ -15695,7 +15693,7 @@ const NumberInput = ({ className, inputCode, inputNumber, isValid: isValid$1, us
 				setIsValid([...newValidity]);
 			}
 			if (Number(event.key) || Number(event.key) === 0) {
-				let newValidity = [...isValid$1];
+				let newValidity = [...isValid];
 				setValue(event.key);
 				newValidity[inputNumber] = event.key === inputCode;
 				let newUserValue = [...userValue];
@@ -15715,13 +15713,13 @@ const NumberInput = ({ className, inputCode, inputNumber, isValid: isValid$1, us
 	});
 };
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=131-253&mode=dev */
-const NumbersCode = ({ className, code, userValue, setUserValue, isValid: isValid$1, setIsValid, containerClassname, placeholder = "_", number = 6 }) => {
+const NumbersCode = ({ className, code, userValue, setUserValue, isValid, setIsValid, containerClassname, placeholder = "_", number = 6 }) => {
 	const children = [];
 	for (let i = 0; i < number; i += 1) children.push(/* @__PURE__ */ react.default.createElement(NumberInput, {
 		userValue,
 		setUserValue,
 		setIsValid,
-		isValid: isValid$1,
+		isValid,
 		inputCode: code ? code.charAt(i) : "",
 		className,
 		inputNumber: i,
@@ -73108,142 +73106,12 @@ style_inject_es_default(css_248z$19);
 
 //#endregion
 //#region src/Organisms/DatePicker/DatePicker.tsx
-const DatePicker = ({ className, label, topLabel, topLabelWeight, topLabelSize, value, format = "dd/MM/yyyy", disabled, disableFuture, disablePast, loading, locale = "enUS", maxDate, minDate, required, error, errorText, helperText, views = [
+const DatePicker = ({ className, label, topLabel, topLabelWeight, topLabelSize, value, openTo = "day", format, disabled, disableFuture, disablePast, loading, locale = "enUS", maxDate, minDate, required, error, errorText, helperText, views = [
 	"day",
 	"month",
 	"year"
 ], renderLoading, onChange, onBlur, isMobile }) => {
-	const [inputValue, setInputValue] = react.default.useState(() => {
-		if (value && value instanceof Date && (0, date_fns.isValid)(value)) return (0, date_fns.format)(value, format);
-		return "";
-	});
-	const formatInputValue = (value$1, dateFormat) => {
-		const limitedNumbers = value$1.replace(/\D/g, "").slice(0, 8);
-		const separator = (dateFormat.match(/[^dMy]/g) || [])[0] || "/";
-		const formatParts = dateFormat.split(/[^dMy]/);
-		const positions = [];
-		let currentPos = 0;
-		for (let i = 0; i < formatParts.length - 1; i++) {
-			currentPos += formatParts[i].length;
-			positions.push(currentPos);
-		}
-		let formatted = limitedNumbers;
-		for (let i = positions.length - 1; i >= 0; i--) {
-			const pos = positions[i];
-			if (limitedNumbers.length > pos) formatted = limitedNumbers.slice(0, pos) + separator + limitedNumbers.slice(pos);
-		}
-		return formatted;
-	};
-	const handleInputChange = (event) => {
-		const rawValue = event.target.value;
-		const formattedValue = formatInputValue(rawValue, format);
-		setInputValue(formattedValue);
-		try {
-			const parsedDate = (0, date_fns.parse)(formattedValue, format, /* @__PURE__ */ new Date());
-			if ((0, date_fns.isValid)(parsedDate)) onChange?.(parsedDate);
-			else if (formattedValue === "") onChange?.(null);
-		} catch (error$1) {}
-	};
-	react.default.useEffect(() => {
-		if (value && value instanceof Date && (0, date_fns.isValid)(value)) setInputValue((0, date_fns.format)(value, format));
-		else setInputValue("");
-	}, [value, format]);
-	return /* @__PURE__ */ react.default.createElement("div", { style: { width: "100%" } }, isMobile ? /* @__PURE__ */ react.default.createElement("div", { className: `${DatePicker_modules_default.date_picker} ${className ? className : void 0}` }, topLabel && /* @__PURE__ */ react.default.createElement(Text, {
-		text: `${topLabel ? topLabel : ""}`,
-		weight: topLabelWeight || "bold",
-		size: topLabelSize || "base",
-		className: DatePicker_modules_default.input_top_label,
-		required
-	}), /* @__PURE__ */ react.default.createElement(__mui_material.TextField, {
-		label: topLabel === void 0 ? label : "",
-		value: inputValue,
-		onChange: handleInputChange,
-		onBlur,
-		disabled,
-		required,
-		error,
-		fullWidth: true,
-		placeholder: format?.toUpperCase(),
-		inputProps: {
-			autoComplete: "off",
-			inputMode: "text"
-		},
-		InputLabelProps: {
-			required,
-			sx: { "& .MuiFormLabel-asterisk": { color: "#F54C4C" } }
-		},
-		sx: {
-			width: "100%",
-			"& .MuiFormControl-root": { width: "100%" },
-			"& .MuiTextField-root": { width: "100%" },
-			"& .MuiInputBase-root": { width: "100%" },
-			"& .MuiInputBase-input": {
-				color: "#26292E",
-				fontFamily: "Open Sans !important",
-				fontSize: "1rem"
-			},
-			"& .MuiInputBase-input.Mui-disabled": {
-				color: "#26292E",
-				fontFamily: "Open Sans !important",
-				fontSize: "1rem"
-			},
-			"& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: colors.neutral_600 },
-			"& .Mui-error": { color: "#26292E" },
-			"& .MuiFormHelperText-root": { color: "#F54C4C" },
-			"& .MuiFormLabel-asterisk": { color: "#F54C4C" },
-			"& .MuiOutlinedInput-root.Mui-disabled": {
-				cursor: "not-allowed",
-				color: "#26292E",
-				"& fieldset": { borderColor: "#BCBDBE" },
-				"&:hover fieldset": { borderColor: "#BCBDBE" }
-			},
-			"& label": {
-				color: "#26292E",
-				fontFamily: "Open Sans !important",
-				fontSize: "1rem",
-				transform: inputValue ? "translate(14px, -9px) scale(0.75)" : "translate(14px, 10px) scale(1)",
-				transformOrigin: "top left",
-				transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
-			},
-			"& label.Mui-disabled.Mui-error": {
-				color: "#26292E",
-				opacity: .5,
-				fontFamily: "Open Sans !important",
-				fontSize: "1rem"
-			},
-			"& label.Mui-focused": {
-				color: "#26292E",
-				fontFamily: "Open Sans",
-				fontSize: "1rem",
-				backgroundColor: "transparent",
-				marginRight: 5,
-				paddingRight: 5,
-				transform: "translate(14px, -9px) scale(0.75)",
-				transformOrigin: "top left"
-			},
-			"& .MuiOutlinedInput-root": {
-				fontFamily: "Open Sans",
-				"& fieldset": { borderColor: "#96989A" },
-				"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": { display: "none" },
-				"& input[type=number]": { MozAppearance: "textfield" },
-				"&:hover fieldset": { borderColor: "#0077FF" },
-				"&.Mui-focused fieldset": { borderColor: "#0077FF" },
-				"&.Mui-error fieldset": { borderColor: "#F54C4C" },
-				"&.Mui-disabled .Mui-focused fieldset": { borderColor: "rgba(0, 119, 255, 0.5)" }
-			}
-		}
-	}), error && errorText && /* @__PURE__ */ react.default.createElement(Text, {
-		size: "xs",
-		color: "#F54C4C",
-		italic: true,
-		text: errorText,
-		className: DatePicker_modules_default.text_below
-	}), helperText && /* @__PURE__ */ react.default.createElement(Text, {
-		size: "xs",
-		italic: true,
-		text: helperText,
-		className: DatePicker_modules_default.text_below
-	})) : /* @__PURE__ */ react.default.createElement(__mui_x_date_pickers.LocalizationProvider, {
+	return /* @__PURE__ */ react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ react.default.createElement(__mui_x_date_pickers.LocalizationProvider, {
 		dateAdapter: __mui_x_date_pickers_AdapterDateFnsV3.AdapterDateFns,
 		adapterLocale: locale === "enUS" ? date_fns_locale_en_US.enUS : locale === "fr" ? date_fns_locale_fr.fr : locale === "it" ? date_fns_locale_it.it : locale === "de" ? date_fns_locale_de.de : locale === "es" ? date_fns_locale_es.es : date_fns_locale_en_US.enUS
 	}, /* @__PURE__ */ react.default.createElement("div", { className: `${DatePicker_modules_default.date_picker} ${className ? className : void 0}` }, topLabel && /* @__PURE__ */ react.default.createElement(Text, {
@@ -73257,13 +73125,17 @@ const DatePicker = ({ className, label, topLabel, topLabelWeight, topLabelSize,
 		value,
 		views,
 		format,
-		slots: { clearIcon: () => null },
+		openTo,
+		slots: {
+			openPickerIcon: isMobile ? () => /* @__PURE__ */ react.default.createElement(AgendaIcon, { fill: disabled ? colors.neutral_500 : colors.black }) : () => null,
+			clearIcon: isMobile ? () => /* @__PURE__ */ react.default.createElement(RemoveCircledIcon, { fill: disabled ? colors.neutral_500 : colors.black }) : () => null
+		},
 		slotProps: { textField: {
 			label: topLabel === void 0 ? label : "",
 			required,
 			onBlur,
 			fullWidth: true,
-			InputProps: { endAdornment: null },
+			...!isMobile ? { InputProps: { endAdornment: void 0 } } : {},
 			InputLabelProps: {
 				required,
 				sx: { "& .MuiFormLabel-asterisk": { color: "#F54C4C" } }