allaw-ui 1.0.1 → 1.0.4

package/dist/components/molecules/caseCard/index.js

@@ -0,0 +1 @@
+export { default as CaseCard } from "./CaseCard";

package/dist/components/molecules/caseLinkCard/CaseLinkCard.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./CaseLinkCard.css";
+export type CaseLinkCardProps = {
+    proName: string;
+    caseName: string;
+    createdDate: Date;
+    isLoading?: boolean;
+    onCaseCardClick?: () => any;
+};
+declare function CaseLinkCard({ proName, caseName, createdDate, onCaseCardClick, isLoading }: CaseLinkCardProps): React.JSX.Element;
+export default CaseLinkCard;

package/dist/components/molecules/caseLinkCard/CaseLinkCard.js

@@ -0,0 +1,30 @@
+import React from "react";
+import "./CaseLinkCard.css";
+import { Paragraph, SmallTitle } from "../../atoms/typography";
+import LoadingBox from "../loadingBox/LoadingBox";
+function CaseLinkCard(_a) {
+    var proName = _a.proName, caseName = _a.caseName, createdDate = _a.createdDate, onCaseCardClick = _a.onCaseCardClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b;
+    var formatDate = function (date) {
+        return date.toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "2-digit",
+            year: "2-digit",
+        });
+    };
+    var formatProName = function (name) {
+        return "Ma\u00EEtre ".concat(name).toUpperCase();
+    };
+    return !isLoading ? React.createElement("div", { className: "case-card-link", onClick: function () { return onCaseCardClick && onCaseCardClick(); }, style: { cursor: onCaseCardClick ? "pointer" : "default" } },
+        React.createElement("div", { className: "case-card-link-folder-icon" },
+            React.createElement("i", { className: "allaw-icon-folder", style: { fontSize: "20px" } })),
+        React.createElement("div", { className: "case-card-link-right" },
+            React.createElement("div", { className: "case-card-link-info-row" },
+                React.createElement(SmallTitle, { text: "DOSSIER", variant: "semiBold12", color: "dark-grey" }),
+                React.createElement(SmallTitle, { text: "Cr\u00E9\u00E9 le ".concat(formatDate(createdDate)), variant: "semiBold12", color: "dark-grey" })),
+            React.createElement("div", { className: "case-card-link-info-row-bottom" },
+                React.createElement("div", { className: "case-card-link-info-col" },
+                    React.createElement(Paragraph, { variant: "bold", size: "default", text: caseName, maxLines: 1 }),
+                    React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: formatProName(proName) })),
+                React.createElement("i", { className: "allaw-icon-arrow-right" })))) : React.createElement(LoadingBox, { boxHeigth: "100px", boxRadius: "8px", boxWidth: "100%" });
+}
+export default CaseLinkCard;

package/dist/components/molecules/caseLinkCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CaseCardLink } from "./CaseLinkCard";
+export type { CaseLinkCardProps } from "./CaseLinkCard";

package/dist/components/molecules/caseLinkCard/index.js

@@ -0,0 +1 @@
+export { default as CaseCardLink } from "./CaseLinkCard";

package/dist/components/molecules/checkboxForm/CheckboxForm.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { ParagraphProps } from "../../atoms/typography/Paragraph";
+import "./CheckboxForm.css";
+export interface CheckboxFormProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    color?: ParagraphProps["color"];
+    label?: React.ReactNode;
+    isRequired?: boolean;
+    linkText?: string;
+    linkUrl?: string;
+    size?: "default" | "small";
+    style?: "default" | "light";
+    markType?: "cross" | "check";
+}
+declare const CheckboxForm: React.FC<CheckboxFormProps>;
+export default CheckboxForm;

package/dist/components/molecules/checkboxForm/CheckboxForm.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Checkbox from "../../atoms/checkboxes/Checkbox";
+import Paragraph from "../../atoms/typography/Paragraph";
+import "./CheckboxForm.css";
+var CheckboxForm = function (_a) {
+    var _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.color, color = _c === void 0 ? "noir" : _c, label = _a.label, _d = _a.isRequired, isRequired = _d === void 0 ? false : _d, linkText = _a.linkText, linkUrl = _a.linkUrl, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.style, style = _f === void 0 ? "default" : _f, _g = _a.markType, markType = _g === void 0 ? "cross" : _g;
+    var checkboxId = "checkbox-".concat(Math.random().toString(36).substr(2, 9));
+    var handleCheckboxChange = function (checked) {
+        if (onChange) {
+            onChange(checked);
+        }
+    };
+    var checkboxColor = style === "light" ? "light" : color;
+    return (React.createElement("div", { className: "checkbox-form checkbox-form-".concat(checkboxColor, " ").concat(size === "small" ? "checkbox-form-small" : "") },
+        React.createElement(Checkbox, { id: checkboxId, checked: checked, onChange: handleCheckboxChange, color: checkboxColor, size: size, style: style, markType: markType }),
+        label && (React.createElement("label", { htmlFor: checkboxId, className: "checkbox-form-label-container" },
+            React.createElement(Paragraph, { variant: "semiBold", color: color, text: React.createElement(React.Fragment, null,
+                    React.createElement("span", null, label),
+                    linkText && linkUrl && (React.createElement("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", className: "checkbox-form-link", onClick: function (e) { return e.stopPropagation(); } }, linkText))), size: size }),
+            isRequired && (React.createElement("span", { className: "checkbox-form-required" },
+                "\u00A0",
+                "*"))))));
+};
+export default CheckboxForm;

package/dist/components/molecules/checkboxForm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CheckboxForm } from "./CheckboxForm";
+export type { CheckboxFormProps } from "./CheckboxForm";

package/dist/components/molecules/checkboxForm/index.js

@@ -0,0 +1 @@
+export { default as CheckboxForm } from "./CheckboxForm";

package/dist/components/molecules/clientLinkCard/ClientLinkCard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./ClientLinkCard.css";
+import "../../../styles/icons.css";
+export type ClientLinkCardProps = {
+    clientFirstName: string;
+    clientName: string;
+    clientMail: string;
+    isLoading?: boolean;
+    company?: string;
+    onClientCardClick?: () => any;
+};
+declare function ClientLinkCard({ clientFirstName, isLoading, clientName, clientMail, company, onClientCardClick }: ClientLinkCardProps): React.JSX.Element;
+export default ClientLinkCard;

package/dist/components/molecules/clientLinkCard/ClientLinkCard.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Paragraph, SmallTitle } from "../../atoms/typography";
+import "./ClientLinkCard.css";
+import "../../../styles/icons.css";
+import LoadingBox from "../loadingBox/LoadingBox";
+function ClientLinkCard(_a) {
+    var clientFirstName = _a.clientFirstName, isLoading = _a.isLoading, clientName = _a.clientName, clientMail = _a.clientMail, company = _a.company, onClientCardClick = _a.onClientCardClick;
+    return !isLoading ? React.createElement("div", { className: "client-link-card", style: { cursor: onClientCardClick ? "pointer" : "default" }, onClick: function () { return onClientCardClick && onClientCardClick(); } },
+        React.createElement("div", { className: "client-link-card-left" },
+            React.createElement(Paragraph, { variant: "semiBold", text: "".concat(clientFirstName, " ").concat(clientName === null || clientName === void 0 ? void 0 : clientName.toUpperCase()), size: "default", maxLines: 1, color: "noir" }),
+            React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: clientMail === null || clientMail === void 0 ? void 0 : clientMail.toLowerCase() })),
+        React.createElement("div", { className: "client-link-card-right" },
+            company && React.createElement("span", { className: "client-link-card-office-tag" }, company),
+            React.createElement("i", { className: "allaw-icon-arrow-right" }))) : React.createElement(LoadingBox, { boxHeigth: "91px", boxRadius: "16px", boxWidth: "100%" });
+}
+export default ClientLinkCard;

package/dist/components/molecules/clientLinkCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ClientLinkCard } from "./ClientLinkCard";
+export type { ClientLinkCardProps } from "./ClientLinkCard";

package/dist/components/molecules/clientLinkCard/index.js

@@ -0,0 +1 @@
+export { default as ClientLinkCard } from "./ClientLinkCard";

package/dist/components/molecules/contactCard/ContactCard.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./ContactCard.css";
+export interface ContactCardProps {
+    size: "small" | "medium" | "large" | "editable";
+    name: string;
+    birthDate: string;
+    avatarUrl: string;
+    status: string;
+    address: string;
+    phone: string;
+    email: string;
+    isEditable: boolean;
+    onEdit: () => void;
+    gender: "male" | "female";
+}
+declare const ContactCard: React.FC<ContactCardProps>;
+export default ContactCard;

package/dist/components/molecules/contactCard/ContactCard.js

@@ -0,0 +1,80 @@
+import React from "react";
+import "./ContactCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import IconButton from "../../atoms/buttons/IconButton";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var ContactCard = function (_a) {
+    var size = _a.size, name = _a.name, birthDate = _a.birthDate, avatarUrl = _a.avatarUrl, status = _a.status, address = _a.address, phone = _a.phone, email = _a.email, onEdit = _a.onEdit, gender = _a.gender;
+    var renderContent = function () {
+        switch (size) {
+            case "small":
+                return (React.createElement("div", { className: "contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 64, height: 64, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate)))));
+            case "medium":
+                return (React.createElement("div", { className: "contact-card-content" },
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 72, height: 72, className: "avatar" })),
+                    React.createElement("div", { className: "contact-info" },
+                        React.createElement("h3", { className: "contact-name" }, name),
+                        React.createElement("p", { className: "contact-details" },
+                            React.createElement("span", null, gender === "male" ? "M" : "F"),
+                            React.createElement("span", { className: "gender-separator" }),
+                            React.createElement("span", null, birthDate))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+            case "large":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "profile-picture-container" },
+                        React.createElement(Image, { src: avatarUrl || NoPhoto, alt: name, width: 94, height: 94, className: "avatar" })),
+                    React.createElement("div", { className: "content-container" },
+                        React.createElement("div", null,
+                            React.createElement("h3", { className: "contact-name" }, name),
+                            React.createElement("p", { className: "contact-details" },
+                                React.createElement("span", null, gender === "male" ? "M" : "F"),
+                                React.createElement("span", { className: "gender-separator" }),
+                                React.createElement("span", null, birthDate))),
+                        React.createElement("div", { className: "contact-additional-info" },
+                            React.createElement("div", { className: "contact-address-container" },
+                                React.createElement("p", { className: "info-label" }, "ADRESSE"),
+                                React.createElement("p", { className: "info-value" }, address)),
+                            React.createElement("div", { className: "contact-telephone-email-container" },
+                                React.createElement("p", { className: "info-label" }, "CONTACT"),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone" }, phone)),
+                                React.createElement("p", { className: "info-value" },
+                                    React.createElement("span", { className: "contact-phone" }, email))))),
+                    React.createElement("div", { className: "status-container" },
+                        React.createElement(OtherStatusTag, { label: status, type: "readonly" }))));
+            case "editable":
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", { className: "content-container" },
+                        React.createElement("div", { className: "name-tag-container" },
+                            React.createElement("h3", { className: "contact-name" }, name),
+                            React.createElement(OtherStatusTag, { label: status, type: "readonly" })),
+                        React.createElement("div", { className: "info-container" },
+                            React.createElement("div", { className: "info-item" },
+                                React.createElement("i", { className: "allaw-icon-user info-icon" }),
+                                React.createElement("span", { className: "info-text" },
+                                    gender === "male" ? "Client" : "Cliente",
+                                    " de l'\u00E9tude")),
+                            React.createElement("div", { className: "telephone-email-items" },
+                                React.createElement("div", { className: "info-item" },
+                                    React.createElement("i", { className: "allaw-icon-phone info-icon" }),
+                                    React.createElement("span", { className: "info-text contact" }, phone)),
+                                React.createElement("div", { className: "info-item" },
+                                    React.createElement("i", { className: "allaw-icon-mail info-icon" }),
+                                    React.createElement("span", { className: "info-text contact" }, email))))),
+                    React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit })));
+        }
+    };
+    return React.createElement("div", { className: "contact-card ".concat(size) }, renderContent());
+};
+export default ContactCard;

package/dist/components/molecules/contactCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContactCard } from "./ContactCard";
+export type { ContactCardProps } from "./ContactCard";

package/dist/components/molecules/contactCard/index.js

@@ -0,0 +1 @@
+export { default as ContactCard } from "./ContactCard";

package/dist/components/molecules/documentCard/DocumentCard.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./DocumentCard.css";
+export interface DocumentCardProps {
+    type: "document" | "note" | "invoice" | "waiting";
+    title: string;
+    date: Date;
+    status: "sent" | "received" | "internal";
+    documents?: {
+        [key: string]: boolean;
+    };
+    onCardClick?: () => any;
+    documentCount?: string;
+}
+declare const DocumentCard: React.FC<DocumentCardProps>;
+export default DocumentCard;

package/dist/components/molecules/documentCard/DocumentCard.js

@@ -0,0 +1,72 @@
+import React from "react";
+import "./DocumentCard.css";
+import IconButton from "../../atoms/buttons/IconButton";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import { Paragraph } from "../../atoms/typography";
+var DocumentCard = function (_a) {
+    var type = _a.type, title = _a.title, date = _a.date, onCardClick = _a.onCardClick, status = _a.status, _b = _a.documents, documents = _b === void 0 ? {} : _b, _c = _a.documentCount, documentCount = _c === void 0 ? "" : _c;
+    var getIconName = function () {
+        switch (type) {
+            case "document":
+                return "allaw-icon-edit-2";
+            case "note":
+                return "allaw-icon-document";
+            case "invoice":
+                return "allaw-icon-file";
+            case "waiting":
+                return "allaw-icon-clock";
+            default:
+                return "allaw-icon-document";
+        }
+    };
+    var getStatusName = function () {
+        switch (status) {
+            case "internal":
+                return "INTERNE";
+            case "received":
+                return "REÇU";
+            case "sent":
+                return "ENVOYÉ";
+            default:
+                return "INTERNE";
+        }
+    };
+    var getDisplayType = function (type) {
+        if (type === "invoice") {
+            return "FACTURE";
+        }
+        return type.toUpperCase();
+    };
+    var formatDate = function (date) {
+        return date.toLocaleDateString("fr-FR", {
+            day: "2-digit",
+            month: "2-digit",
+            year: "2-digit",
+        });
+    };
+    if (type === "waiting") {
+        var documentList = Object.keys(documents);
+        return (React.createElement("div", { className: "document-card waiting", style: { cursor: onCardClick ? "pointer" : "default" }, onClick: function () { return onCardClick && onCardClick(); } },
+            React.createElement("div", { className: "document-card-left" },
+                React.createElement(OtherStatusTag, { type: "information", label: "Documents demand\u00E9s pour ce rendez-vous" }),
+                React.createElement("h3", { className: "document-card-title" }, title),
+                React.createElement("div", { className: "document-list" },
+                    React.createElement("ul", null, documentList.map(function (doc, index) { return (React.createElement("li", { key: index, className: "document-label" },
+                        React.createElement("span", { className: "document-bullet" }),
+                        " ",
+                        doc)); })))),
+            React.createElement("div", { className: "document-card-right" },
+                React.createElement(IconButton, { style: "smallFilled", iconName: "allaw-icon-document" }),
+                React.createElement("span", { className: "document-count" }, documentCount))));
+    }
+    return (React.createElement("div", { className: "document-card", onClick: function () { return onCardClick && onCardClick(); }, style: { cursor: onCardClick ? "pointer" : "default" } },
+        React.createElement("div", { className: "document-card-left" },
+            React.createElement(IconButton, { style: "largeFilled", iconName: getIconName() }),
+            React.createElement("div", { className: "document-card-info" },
+                React.createElement("span", { className: "document-card-type" }, getDisplayType(type)),
+                React.createElement(Paragraph, { text: title, variant: "semiBold", size: "default", maxLines: 1, color: "noir" }),
+                React.createElement("span", { className: "document-card-date" }, formatDate(date)))),
+        React.createElement("div", { className: "document-card-right" },
+            React.createElement(OtherStatusTag, { type: "information", label: getStatusName() }))));
+};
+export default DocumentCard;

package/dist/components/molecules/documentCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DocumentCard } from "./DocumentCard";
+export type { DocumentCardProps } from "./DocumentCard";

package/dist/components/molecules/documentCard/index.js

@@ -0,0 +1 @@
+export { default as DocumentCard } from "./DocumentCard";

package/dist/components/molecules/employeeCard/EmployeeCard.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./EmployeeCard.css";
+export interface EmployeeCardProps {
+    name: string;
+    role: string;
+    contactNumber: string;
+    email1: string;
+    email2: string;
+    profileImage: string;
+    isVerified: boolean;
+    size: "small" | "large";
+    onEdit: () => void;
+}
+declare const EmployeeCard: React.FC<EmployeeCardProps>;
+export default EmployeeCard;

package/dist/components/molecules/employeeCard/EmployeeCard.js

@@ -0,0 +1,34 @@
+import React from "react";
+import "./EmployeeCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import IconButton from "../../atoms/buttons/IconButton";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var EmployeeCard = function (_a) {
+    var name = _a.name, role = _a.role, contactNumber = _a.contactNumber, email1 = _a.email1, email2 = _a.email2, profileImage = _a.profileImage, isVerified = _a.isVerified, size = _a.size, onEdit = _a.onEdit;
+    var renderProfileImage = function () { return (React.createElement("div", { className: "profile-image-container" },
+        React.createElement(Image, { src: profileImage || NoPhoto, alt: name, width: size === "small" ? 64 : 94, height: size === "small" ? 64 : 94, className: "profile-image" }),
+        isVerified && (React.createElement("span", { className: "verified-icon allaw-icon-verified" })))); };
+    var renderNameAndRole = function () { return (React.createElement("div", { className: "name-tag-container" },
+        React.createElement("h3", { className: "name" }, name),
+        React.createElement("div", { className: "role-container" },
+            React.createElement(OtherStatusTag, { label: role, type: "information" })))); };
+    var renderContactInfo = function () { return (React.createElement("div", { className: "contact-container" },
+        React.createElement("span", { className: "contact-label" }, "CONTACT"),
+        React.createElement("div", { className: "phone-email-container" },
+            React.createElement("span", { className: "phone-number" }, contactNumber),
+            React.createElement("span", { className: "email" }, email1),
+            React.createElement("span", { className: "email" }, email2)))); };
+    var renderSmallCard = function () { return (React.createElement("div", { className: "content" },
+        renderProfileImage(),
+        renderNameAndRole())); };
+    var renderLargeCard = function () { return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "content" },
+            renderProfileImage(),
+            React.createElement("div", { className: "content-main-container" },
+                renderNameAndRole(),
+                React.createElement("div", { className: "content-container" }, renderContactInfo()))),
+        React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-edit-2", onClick: onEdit }))); };
+    return (React.createElement("div", { className: "employee-card ".concat(size) }, size === "small" ? renderSmallCard() : renderLargeCard()));
+};
+export default EmployeeCard;

package/dist/components/molecules/employeeCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EmployeeCard } from "./EmployeeCard";
+export type { EmployeeCardProps } from "./EmployeeCard";

package/dist/components/molecules/employeeCard/index.js

@@ -0,0 +1 @@
+export { default as EmployeeCard } from "./EmployeeCard";

package/dist/components/molecules/loadingBox/LoadingBox.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./LoadingBox.css";
+export type LoadingBoxProps = {
+    boxHeigth: string;
+    boxWidth: string;
+    boxRadius: string;
+};
+declare function LoadingBox({ boxHeigth, boxWidth, boxRadius }: LoadingBoxProps): React.JSX.Element;
+export default LoadingBox;

package/dist/components/molecules/loadingBox/LoadingBox.js

@@ -0,0 +1,7 @@
+import React from "react";
+import "./LoadingBox.css";
+function LoadingBox(_a) {
+    var boxHeigth = _a.boxHeigth, boxWidth = _a.boxWidth, boxRadius = _a.boxRadius;
+    return React.createElement("div", { className: "loading-box", style: { minHeight: boxHeigth, minWidth: boxWidth, borderRadius: boxRadius } });
+}
+export default LoadingBox;

package/dist/components/molecules/loadingBox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LoadingBox } from "./LoadingBox";
+export type { LoadingBoxProps } from "./LoadingBox";

package/dist/components/molecules/loadingBox/index.js

@@ -0,0 +1 @@
+export { default as LoadingBox } from "./LoadingBox";

package/dist/components/molecules/proCard/ProCard.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "./ProCard.css";
+export interface ProCardProps {
+    imageUrl?: string;
+    job: string;
+    firstName: string;
+    lastName: string;
+    address: string;
+    profileUrl: string;
+    isPro?: boolean;
+}
+declare const ProCard: React.FC<ProCardProps>;
+export default ProCard;

package/dist/components/molecules/proCard/ProCard.js

@@ -0,0 +1,25 @@
+import React from "react";
+import "./ProCard.css";
+import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
+import Image from "next/image";
+var NoPhoto = "/assets/NoPhoto.png";
+var ProCard = function (_a) {
+    var imageUrl = _a.imageUrl, job = _a.job, firstName = _a.firstName, lastName = _a.lastName, address = _a.address, profileUrl = _a.profileUrl, _b = _a.isPro, isPro = _b === void 0 ? false : _b;
+    var uppercaseJob = job.toUpperCase();
+    return (React.createElement("div", { className: "pro-card" },
+        React.createElement("div", { className: "pro-card-content" },
+            React.createElement("div", { className: "pro-card-top" },
+                React.createElement("div", { className: "pro-card-image-container" },
+                    React.createElement(Image, { src: imageUrl || NoPhoto, alt: "".concat(firstName, " ").concat(lastName), width: 74, height: 74, className: "pro-card-avatar" }),
+                    isPro && (React.createElement("div", { className: "pro-card-verified-icon-container" },
+                        React.createElement("div", { className: "pro-card-verified-icon-background" }),
+                        React.createElement("i", { className: "icon allaw-icon-verified pro-card-verified-icon" })))),
+                React.createElement("div", { className: "pro-card-job-name" },
+                    React.createElement(OtherStatusTag, { label: uppercaseJob, type: "information" }),
+                    React.createElement("h3", { className: "pro-card-name" },
+                        React.createElement("a", { href: profileUrl }, "".concat(firstName, " ").concat(lastName))))),
+            address && /[a-zA-Z0-9]/.test(address) && (React.createElement("div", { className: "pro-card-address" },
+                React.createElement("i", { className: "icon allaw-icon-map-pin" }),
+                React.createElement("span", null, address))))));
+};
+export default ProCard;

package/dist/components/molecules/proCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProCard } from "./ProCard";
+export type { ProCardProps } from "./ProCard";

package/dist/components/molecules/proCard/index.js

@@ -0,0 +1 @@
+export { default as ProCard } from "./ProCard";

package/dist/components/molecules/radioForm/RadioForm.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./RadioForm.css";
+import "../../../styles/global.css";
+export interface RadioFormProps {
+    label: string;
+    isRequired: boolean;
+    options: string[];
+    defaultSelected?: string;
+    onChange?: (selectedOption: string | null) => void;
+}
+declare const RadioForm: React.FC<RadioFormProps>;
+export default RadioForm;

package/dist/components/molecules/radioForm/RadioForm.js

@@ -0,0 +1,27 @@
+import React, { useState, useEffect } from "react";
+import "./RadioForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import RadioButton from "../../atoms/radios/RadioButton";
+var RadioForm = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, defaultSelected = _a.defaultSelected, onChange = _a.onChange;
+    var _b = useState(defaultSelected || null), selectedOption = _b[0], setSelectedOption = _b[1];
+    useEffect(function () {
+        if (defaultSelected) {
+            setSelectedOption(defaultSelected);
+        }
+    }, [defaultSelected]);
+    var handleOptionChange = function (option) {
+        setSelectedOption(option);
+        if (onChange) {
+            onChange(option);
+        }
+    };
+    return (React.createElement("div", { className: "radio-form" },
+        React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+                label,
+                " ",
+                isRequired && React.createElement("span", { className: "radio-form-required" }, "*")), size: "default" }),
+        React.createElement("div", { className: "radio-form-options" }, options.map(function (option, index) { return (React.createElement(RadioButton, { key: index, label: option, style: "hybride", isActive: selectedOption === option, onClick: function () { return handleOptionChange(option); } })); }))));
+};
+export default RadioForm;

package/dist/components/molecules/radioForm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioForm } from "./RadioForm";
+export type { RadioFormProps } from "./RadioForm";

package/dist/components/molecules/radioForm/index.js

@@ -0,0 +1 @@
+export { default as RadioForm } from "./RadioForm";

package/dist/components/molecules/selectForm/SelectForm.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import { SelectItem } from "../../atoms/selects/Select";
+export interface SelectFormProps {
+    label: string;
+    isRequired: boolean;
+    options: SelectItem[];
+    isMultiple: boolean;
+    width?: number;
+    selectedItem?: string | string[];
+    onChange?: (selected: string | string[]) => void;
+}
+declare const SelectForm: React.FC<SelectFormProps>;
+export default SelectForm;

package/dist/components/molecules/selectForm/SelectForm.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./SelectForm.css";
+import "../../../styles/global.css";
+import Paragraph from "../../atoms/typography/Paragraph";
+import Select from "../../atoms/selects/Select";
+var SelectForm = function (_a) {
+    var label = _a.label, isRequired = _a.isRequired, options = _a.options, isMultiple = _a.isMultiple, _b = _a.width, width = _b === void 0 ? 100 : _b, selectedItem = _a.selectedItem, onChange = _a.onChange;
+    return (React.createElement("div", { className: "select-form" },
+        React.createElement(Paragraph, { variant: "medium", color: "noir", text: React.createElement(React.Fragment, null,
+                label,
+                " ",
+                isRequired && React.createElement("span", { className: "select-form-required" }, "*")), size: "default" }),
+        React.createElement(Select, { items: options, multiple: isMultiple, isRequired: isRequired, width: width, selectedItem: selectedItem, onChange: onChange })));
+};
+export default SelectForm;

package/dist/components/molecules/selectForm/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SelectForm } from "./SelectForm";
+export type { SelectFormProps } from "./SelectForm";

package/dist/components/molecules/selectForm/index.js

@@ -0,0 +1 @@
+export { default as SelectForm } from "./SelectForm";

package/dist/components/molecules/stepper/Stepper.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+import "./Stepper.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+export interface StepperProps {
+    steps: number;
+    currentStep: number;
+    startIcon?: boolean[];
+    endIcon?: boolean;
+    children: React.ReactNode[];
+    secondaryButton?: {
+        show: boolean;
+        label: string;
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        startIconName?: string;
+        endIconName?: string;
+        onSecondaryButtonClick?: (step: number) => void;
+    }[];
+    primaryButton?: {
+        show: boolean;
+        label: string;
+        startIcon?: React.ReactNode;
+        endIcon?: React.ReactNode;
+        startIconName?: string;
+        endIconName?: string;
+        onPrimaryButtonClick?: (step: number) => void;
+    }[];
+    showProgressBar?: boolean[];
+    onClose?: () => void;
+    validateStep?: (step: number) => boolean | Promise<boolean>;
+}
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;