allaw-ui 0.1.1 → 0.1.4

package/dist/components/atoms/inputs/TextArea.css

@@ -0,0 +1,202 @@
+@import "../../../styles/colors.css";
+
+/* Style commun */
+.text-area {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  field-sizing: content;
+}
+
+.text-area-title-container {
+  display: flex;
+  align-items: center;
+}
+
+.text-area-required {
+  color: var(--dark-grey, #456073);
+}
+
+.text-area-placeholder {
+  color: var(--Tags-Mid-grey, rgba(114, 142, 167, 1));
+  font-family: "Open Sans";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  opacity: 0.8;
+  width: 100%;
+  padding-left: 4px;
+  resize: vertical;
+  min-height: 100px;
+}
+
+/* Style default */
+.text-area-default {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 11px;
+  field-sizing: content;
+}
+
+.text-area-default .text-area-container {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.text-area-default .text-area-input {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 8px;
+  border: 3px solid var(--grey-venom, #e6edf5);
+  background: var(--Primary-Blanc, #fff);
+  padding: 10px;
+  field-sizing: content;
+  font-size: 16px;
+}
+
+.text-area-default .text-area-input:hover {
+  border-color: var(--venom-grey-dark, #d1dce8);
+}
+
+.text-area-default .text-area-input:focus-within {
+  border-color: var(--mid-grey, #728ea7);
+}
+
+.text-area-default .text-area-input textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  color: var(--noir, #171e25);
+  field-sizing: content;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 8px;
+}
+
+.text-area-variation {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 11px;
+  field-sizing: content;
+}
+
+.text-area-variation .text-area-container {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text-area-variation .text-area-input {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+  border-radius: 8px;
+  border: 1px solid rgba(114, 142, 167, 1);
+  background: var(--Primary-Blanc, #fff);
+  padding: 10px;
+}
+
+.text-area-variation .text-area-input textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  color: var(--noir);
+}
+
+.text-area-variation .text-area-icon-button {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background: var(--Primary-Light-grey, #f4f7fb);
+  border: none;
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.text-area-variation .text-area-icon-button:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.text-area-variation .text-area-icon-button i {
+  width: 19px;
+  height: 19px;
+  flex-shrink: 0;
+  color: var(--dark-grey, #f4f7fb);
+  font-size: 18px;
+  padding-left: 2px;
+}
+
+/* Style password */
+.text-area-password {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 11px;
+}
+
+.text-area-password .text-area-container {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid rgba(114, 142, 167, 1);
+  background: var(--Primary-Blanc, #fff);
+  padding: 10px;
+}
+
+.text-area-password .text-area-input {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.text-area-password .text-area-input textarea {
+  width: 100%;
+  border: none;
+  outline: none;
+  color: var(--noir);
+}
+
+.text-area-password .text-area-button {
+  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.text-area-error {
+  margin-top: 4px;
+}
+
+.error-message {
+  padding-top: 4px;
+  padding-left: 14px;
+}

package/dist/components/atoms/inputs/TextArea.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "./TextArea.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+import { commonRegex } from "../../../utils/regex";
+export interface TextAreaProps {
+    title: string;
+    style?: "default" | "variation" | "password";
+    placeholder: string;
+    endIcon?: string;
+    isRequired?: boolean;
+    validate?: RegExp | keyof typeof commonRegex;
+    onError?: (error: string) => void;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    value?: string;
+    error?: string;
+}
+export interface TextAreaRef {
+    validate: () => boolean;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
+export default TextArea;

package/dist/components/atoms/inputs/TextArea.js

@@ -0,0 +1,79 @@
+// TextArea.tsx
+import React, { useState, useEffect, useCallback, forwardRef, useImperativeHandle, useRef, } from "react";
+import "./TextArea.css";
+import "../../../styles/global.css";
+import "../../../styles/icons.css";
+import { commonRegex } from "../../../utils/regex";
+import TinyInfo from "../typography/TinyInfo";
+import Paragraph from "../typography/Paragraph";
+var TextArea = forwardRef(function (_a, ref) {
+    var title = _a.title, _b = _a.style, style = _b === void 0 ? "default" : _b, placeholder = _a.placeholder, endIcon = _a.endIcon, _c = _a.isRequired, isRequired = _c === void 0 ? false : _c, validate = _a.validate, onError = _a.onError, onChange = _a.onChange, propValue = _a.value, propError = _a.error;
+    var _d = useState(false), isPasswordVisible = _d[0], setIsPasswordVisible = _d[1];
+    var _e = useState(propValue || ""), value = _e[0], setValue = _e[1];
+    var _f = useState(propError || ""), error = _f[0], setError = _f[1];
+    var _g = useState(false), isTouched = _g[0], setIsTouched = _g[1];
+    var textareaRef = useRef(null);
+    useEffect(function () {
+        setValue(propValue || "");
+    }, [propValue]);
+    useEffect(function () {
+        setError(propError || "");
+    }, [propError]);
+    var validateTextArea = useCallback(function () {
+        var _a;
+        var currentValue = ((_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value) || value;
+        var errorMessage = "";
+        if (isRequired && currentValue.trim() === "") {
+            errorMessage = "Ce champ est requis";
+        }
+        else if (validate && currentValue) {
+            var regex = typeof validate === "string" ? commonRegex[validate] : validate;
+            if (!regex.test(currentValue)) {
+                errorMessage = "Veuillez vérifier votre saisie";
+            }
+        }
+        setError(errorMessage);
+        setIsTouched(true);
+        onError === null || onError === void 0 ? void 0 : onError(errorMessage);
+        return !errorMessage;
+    }, [isRequired, value, validate, onError]);
+    useImperativeHandle(ref, function () { return ({
+        validate: validateTextArea,
+    }); });
+    var handleChange = function (e) {
+        var newValue = e.target.value;
+        setValue(newValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+        if (isTouched) {
+            validateTextArea();
+        }
+    };
+    var handleBlur = function () {
+        setIsTouched(true);
+        validateTextArea();
+    };
+    var renderEndIcon = function () {
+        if (style === "variation" && endIcon) {
+            return (React.createElement("button", { className: "text-area-icon-button" },
+                React.createElement("i", { className: endIcon })));
+        }
+        if (style === "password") {
+            return (React.createElement("button", { className: "text-area-button", onClick: function () { return setIsPasswordVisible(!isPasswordVisible); } }, isPasswordVisible ? "CACHER" : "AFFICHER"));
+        }
+        return null;
+    };
+    return (React.createElement("div", { className: "TextArea text-area-".concat(style) },
+        React.createElement("div", { className: "text-area-title-container" },
+            React.createElement(Paragraph, { variant: "semiBold", color: "noir", text: title }),
+            isRequired && title && (React.createElement("span", { className: "text-area-required" },
+                "\u00A0",
+                "*"))),
+        React.createElement("div", { className: "text-area-container" },
+            React.createElement("div", { className: "text-area-input ".concat(style === "password" ? "text-area-password-input" : "") },
+                React.createElement("textarea", { ref: textareaRef, placeholder: placeholder, className: "text-area-placeholder", value: value, onChange: handleChange, onBlur: handleBlur })),
+            renderEndIcon(),
+            error && isTouched && (React.createElement("div", { className: "error-message" },
+                React.createElement(TinyInfo, { variant: "medium12", color: "actions-error", text: error }))))));
+});
+TextArea.displayName = "TextArea";
+export default TextArea;

package/dist/components/atoms/inputs/index.d.ts

@@ -1,4 +1,6 @@
 export { default as Input } from "./Input";
+export { default as TextArea } from "./TextArea";
 export { default as SearchBar } from "./SearchBar";
 export type { InputProps, InputRef } from "./Input";
 export type { SearchBarProps } from "./SearchBar";
+export type { TextAreaProps, TextAreaRef } from "./TextArea";

package/dist/components/atoms/inputs/index.js

@@ -1,2 +1,3 @@
 export { default as Input } from "./Input";
+export { default as TextArea } from "./TextArea";
 export { default as SearchBar } from "./SearchBar";

package/dist/components/atoms/progressBars/ProgressBar.js

@@ -4,11 +4,12 @@ import "../../../styles/global.css";
 import "../../../styles/icons.css";
 var ProgressBar = function (_a) {
     var steps = _a.steps, currentStep = _a.currentStep, _b = _a.startIcon, startIcon = _b === void 0 ? true : _b, _c = _a.endIcon, endIcon = _c === void 0 ? true : _c, onStartIconClick = _a.onStartIconClick, onEndIconClick = _a.onEndIconClick, _d = _a.showProgressBar, showProgressBar = _d === void 0 ? true : _d;
-    var constrainedCurrentStep = Math.max(1, Math.min(currentStep, steps));
-    var progressWidth = ((constrainedCurrentStep - 1) / (steps - 1)) * 100;
+    var constrainedCurrentStep = Math.max(0, Math.min(currentStep, steps));
+    var progressWidth = constrainedCurrentStep === 0 ? 0 : (constrainedCurrentStep / steps) * 100;
     return (React.createElement("div", { className: "progress-bar-container" },
-        React.createElement("div", { className: "progress-bar-icon-container" }, startIcon && currentStep > 1 && (React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
-            React.createElement("i", { className: "allaw-icon-chevron-left" })))),
+        startIcon && currentStep > 1 && (React.createElement("div", { className: "progress-bar-icon-container" },
+            React.createElement("button", { className: "progress-bar-chevron", onClick: onStartIconClick },
+                React.createElement("i", { className: "allaw-icon-chevron-left" })))),
         React.createElement("div", { className: "progress-bar-background ".concat(showProgressBar ? "" : "hidden-content") },
             React.createElement("div", { className: "progress-bar-fill", style: { width: "".concat(progressWidth, "%") } })),
         endIcon && (React.createElement("button", { className: "progress-bar-close", onClick: onEndIconClick },

package/dist/components/atoms/selects/Select.css

@@ -4,7 +4,6 @@
 
 .select {
   display: flex;
-  width: 100%;
   padding: 8px 16px;
   justify-content: space-between;
   align-items: center;
@@ -14,6 +13,14 @@
   cursor: pointer;
 }
 
+.select:hover {
+  background: var(--grey-venom, #e6edf5);
+}
+
+.select:focus {
+  background: var(--grey-venom, #e6edf5);
+}
+
 .select-text {
   color: var(--Primary-Mid-black, var(--primary-black, #171e25));
   font-family: "Open Sans";
@@ -37,9 +44,8 @@
 }
 
 .select-list {
-  display: none; /* Masquer par défaut */
+  display: none;
   flex-direction: column;
-  width: 480px;
   background: var(--secondary-light-grey, #f4f7fb);
   border-radius: 8px;
   margin-top: 8px;
@@ -56,6 +62,9 @@
   top: 100%;
   left: 0;
   z-index: 1000;
+  border: 1px solid var(--grey-venom, #e6edf5);
+  box-shadow: 0px 4px 8px 0px rgba(9, 30, 66, 0.15);
+  scroll-behavior: auto;
 }
 
 .select-pressed .select-list {
@@ -101,3 +110,7 @@
   padding-top: 4px;
   padding-left: 14px;
 }
+
+.select-item.highlighted {
+  background-color: var(--venom-grey-dark, #d1dce8);
+}

package/dist/components/atoms/selects/Select.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string | string[]> {
     multiple?: boolean;
     isRequired?: boolean;
     showError?: boolean;
+    width?: number;
     onChange?: (selected: T) => void;
     onError?: (error: string) => void;
 }

package/dist/components/atoms/selects/Select.js

@@ -13,14 +13,26 @@ import "../../../styles/global.css";
 import TinyInfo from "../typography/TinyInfo";
 function Select(_a, ref) {
     var _b;
-    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, onChange = _a.onChange, onError = _a.onError;
-    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
-    var _h = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _h[0], setSelected = _h[1];
-    var _j = useState(""), error = _j[0], setError = _j[1];
+    var items = _a.items, selectedItem = _a.selectedItem, _c = _a.placeholder, placeholder = _c === void 0 ? "Select..." : _c, _d = _a.multiple, multiple = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.showError, showError = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, onChange = _a.onChange, onError = _a.onError;
+    var _h = useState(false), isOpen = _h[0], setIsOpen = _h[1];
+    var _j = useState((multiple ? selectedItem || [] : selectedItem || "")), selected = _j[0], setSelected = _j[1];
+    var _k = useState(""), error = _k[0], setError = _k[1];
     var selectRef = useRef(null);
+    var listRef = useRef(null);
     useEffect(function () {
         setSelected((multiple ? selectedItem || [] : selectedItem || ""));
     }, [selectedItem, multiple]);
+    useEffect(function () {
+        if (!multiple && selectedItem && isOpen && listRef.current) {
+            var selectedItemElement = listRef.current.querySelector(".select-item[data-value=\"".concat(selectedItem, "\"]"));
+            if (selectedItemElement instanceof HTMLElement) {
+                var listHeight = listRef.current.offsetHeight;
+                var itemHeight = selectedItemElement.offsetHeight;
+                var scrollTop = selectedItemElement.offsetTop - listHeight / 2 + itemHeight / 2;
+                listRef.current.scrollTop = scrollTop;
+            }
+        }
+    }, [isOpen, multiple, selectedItem]);
     var handleSelect = function (item) {
         var newSelected;
         if (multiple) {
@@ -63,8 +75,8 @@ function Select(_a, ref) {
     useImperativeHandle(ref, function () { return ({
         validate: function () { return validateSelect(selected); },
     }); });
-    return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : "") },
-        React.createElement("button", { className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen },
+    return (React.createElement("div", { ref: selectRef, className: "select-container ".concat(isOpen ? "select-pressed" : ""), style: { width: "".concat(width, "%") } },
+        React.createElement("button", { className: "select ".concat(isOpen ? "select-pressed" : "select-default"), onClick: toggleOpen, style: { width: "100%" } },
             React.createElement("span", { className: "select-text" }, Array.isArray(selected) && selected.length > 0
                 ? selected
                     .map(function (val) { var _a; return (_a = items.find(function (item) { return item.value === val; })) === null || _a === void 0 ? void 0 : _a.label; })
@@ -73,9 +85,9 @@ function Select(_a, ref) {
                     ? (_b = items.find(function (item) { return item.value === selected; })) === null || _b === void 0 ? void 0 : _b.label
                     : placeholder),
             React.createElement("span", { className: "select-icon ".concat(isOpen ? "allaw-icon-chevron-up" : "allaw-icon-chevron-down") })),
-        isOpen && (React.createElement("div", { className: "select-list" }, items.map(function (item) { return (React.createElement("div", { key: item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
+        isOpen && (React.createElement("div", { ref: listRef, className: "select-list", style: { width: "100%" } }, items.map(function (item) { return (React.createElement("div", { key: item.value, "data-value": item.value, className: "select-item ".concat(Array.isArray(selected) && selected.includes(item.value)
                 ? "selected"
-                : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
+                : "", " ").concat(!multiple && item.value === selectedItem ? "highlighted" : "", " ").concat(!multiple ? "single-select" : ""), onClick: function () { return handleSelect(item); } },
             multiple && (React.createElement("span", { className: "select-item-icon allaw-icon-check" })),
             React.createElement("span", { className: "select-item-text" }, item.label))); }))),
         isRequired && showError && error && (React.createElement("div", { className: "error-message" },

package/dist/components/atoms/typography/TinyInfo.css

@@ -54,3 +54,6 @@
 .tiny-info.color-actions-error {
   color: var(--actions-error);
 }
+.tiny-info.color-actions-valid {
+  color: var(--actions-valid);
+}

package/dist/components/atoms/typography/TinyInfo.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import "./TinyInfo.css";
 export interface TinyInfoProps {
     variant: "bold14" | "medium14" | "semiBold12" | "medium12";
-    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error";
+    color?: "bleu-allaw" | "mid-grey" | "dark-grey" | "noir" | "pure-white" | "actions-error" | "actions-valid";
     text: string;
     href?: string;
     className?: string;

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

@@ -0,0 +1,47 @@
+@import "../../../styles/colors.css";
+
+.case-card-link {
+    display: flex;
+    align-items: flex-start;
+    align-self: stretch;
+    border-radius: 8px;
+    background: var(--Primary-Light-grey, #F4F7FB);
+    display: flex;
+    padding: 16px;
+    align-items: center;
+    gap: 16px;
+}
+
+.case-card-link-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    gap: 8px;
+    flex: 1 0 0;
+}
+
+.case-card-link-folder-icon {
+    border-radius: 8px;
+background: rgba(255, 255, 255, 0.90);
+    display: flex;
+    padding: 12px 14px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+}
+
+.case-card-link-info-row {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.case-card-link-info-col {
+    display: flex;
+    gap: 4px;
+    flex-direction:column;
+    justify-content: space-between;
+}

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

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

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

@@ -0,0 +1,27 @@
+import React from "react";
+import "./CaseLinkCard.css";
+import { Paragraph, SmallTitle } from "../../atoms/typography";
+function CaseLinkCard(_a) {
+    var proName = _a.proName, caseName = _a.caseName, createdDate = _a.createdDate, onCaseCardClick = _a.onCaseCardClick;
+    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 React.createElement("div", { className: "case-card-link", onClick: 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-col" },
+                React.createElement(Paragraph, { variant: "bold", size: "default", text: caseName, maxLines: 1 }),
+                React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: formatProName(proName) }))));
+}
+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

@@ -11,6 +11,7 @@ export interface CheckboxFormProps {
     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

@@ -3,7 +3,7 @@ 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;
+    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) {
@@ -12,7 +12,7 @@ var CheckboxForm = function (_a) {
     };
     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 }),
+        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),

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

@@ -307,7 +307,7 @@
 .contact-card.editable {
   display: flex;
   padding: 24px;
-  width: 100%;
+  width: 1214px;
   justify-content: space-between;
   align-items: flex-start;
   align-self: stretch;
@@ -326,7 +326,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: start;
+  align-items: center;
   gap: 16px;
   padding-left: 2px;
 }