@mailstep/design-system 0.10.5 → 0.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -3,16 +3,22 @@ import { Container, HiddenInput } from "./styles.js";
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/ImageList/components/AddPhoto/index.tsx
+const IMAGE_MIME_PREFIX = "image/";
 const AddPhoto = ({ onImageUpload, isDisabled, hasRemove }) => {
 	const handleImageUpload = useCallback((event) => {
-		if (!event.target?.files?.[0]) return;
+		const input = event.target;
+		const file = input?.files?.[0];
+		if (!file?.type.startsWith(IMAGE_MIME_PREFIX)) {
+			input.value = "";
+			return;
+		}
 		const reader = new FileReader();
-		reader.readAsDataURL(event.target.files[0]);
+		reader.readAsDataURL(file);
 		reader.onload = async () => {
 			await onImageUpload?.({
 				base64image: reader.result?.split(",").pop(),
 				base64WithDataDeclaration: reader.result,
-				file: event.target.files?.[0]
+				file
 			});
 		};
 	}, [onImageUpload]);

package/ui/Blocks/LoginPage/LoginPage.js

@@ -9,7 +9,7 @@ import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/LoginPage/LoginPage.tsx
-const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, brandVariant, isSubmitting, isSubmitDisabled, withDistributionCenterSelect, distributionCenterOptions, selectedDistributionCenter, onChangeDistributionCenter, languageItems, version, backgroundImage, admin, hasSupport = true, hasSocialLinks = true, withPassword = true, withLogin = true, loginLabel, passwordLabel }) => {
+const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, brandVariant, isSubmitting, isSubmitDisabled, withDistributionCenterSelect, distributionCenterOptions, selectedDistributionCenter, onChangeDistributionCenter, languageItems, version, backgroundImage, admin, hasSupport = true, hasSocialLinks = true, withPassword = true, withLogin = true, loginLabel, passwordLabel, formHeader }) => {
 	return /* @__PURE__ */ jsxs(Wrapper, {
 		backgroundImage,
 		children: [
@@ -50,7 +50,8 @@ const Login = ({ onSubmit, activeLanguage, onLanguageChange, children, brand, br
 					withPassword,
 					withLogin,
 					loginLabel,
-					passwordLabel
+					passwordLabel,
+					formHeader
 				})
 			] }),
 			children,

package/ui/Blocks/LoginPage/components/LoginForm.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { Option } from '../../../Elements/Select/types';
-import { LoginData } from '../types';
+import { type FC, type ReactNode } from 'react';
+import { type Option } from '../../../Elements/Select/types';
+import { type LoginData } from '../types';
 type Props = {
     onSubmit: (loginData: LoginData) => Promise<void>;
     isSubmitting?: boolean;
@@ -13,6 +13,7 @@ type Props = {
     loginLabel?: string;
     passwordLabel?: string;
     withLogin?: boolean;
+    formHeader?: ReactNode;
 };
 export declare const LoginForm: FC<Props>;
 export {};

package/ui/Blocks/LoginPage/components/LoginForm.js

@@ -16,7 +16,7 @@ const Container = styled$1.div`
     display: none;
   }
   @media (min-width: 1024px) {
-    height: 300px;
+    min-height: 300px;
     min-width: 300px;
     margin-bottom: 50px;
     & > div > H4 {
@@ -33,7 +33,7 @@ const ButtonsContainer = styled$1.div`
     margin-top: 40px;
   }
 `;
-const LoginForm = ({ onSubmit, isSubmitting, isSubmitDisabled, distributionCenterOptions, withDistributionCenterSelect, onChangeDistributionCenter, selectedDistributionCenter, withPassword, withLogin, loginLabel, passwordLabel }) => {
+const LoginForm = ({ onSubmit, isSubmitting, isSubmitDisabled, distributionCenterOptions, withDistributionCenterSelect, onChangeDistributionCenter, selectedDistributionCenter, withPassword, withLogin, loginLabel, passwordLabel, formHeader }) => {
 	const [login, setLogin] = useState("");
 	const [password, setPassword] = useState("");
 	const [submitError, setSubmitError] = useState("");
@@ -76,7 +76,7 @@ const LoginForm = ({ onSubmit, isSubmitting, isSubmitDisabled, distributionCente
 			login,
 			password
 		}).catch((error) => {
-			error && setSubmitError(String(error));
+			error && setSubmitError(error instanceof Error ? error.message : String(error));
 		}).finally(() => {
 			setPassword("");
 		});
@@ -92,6 +92,10 @@ const LoginForm = ({ onSubmit, isSubmitting, isSubmitDisabled, distributionCente
 		onChangeDistributionCenter?.(e.target.value);
 	}, [onChangeDistributionCenter]);
 	return /* @__PURE__ */ jsxs(Container, { children: [
+		formHeader && /* @__PURE__ */ jsx(x.div, {
+			mt: "24px",
+			children: formHeader
+		}),
 		withLogin && /* @__PURE__ */ jsx(x.div, {
 			mt: "24px",
 			children: /* @__PURE__ */ jsx(Input, {

package/ui/Blocks/LoginPage/types.d.ts

@@ -31,4 +31,5 @@ export type LoginPageProps = {
     loginLabel?: string;
     passwordLabel?: string;
     admin?: boolean;
+    formHeader?: ReactNode;
 };