@axa-fr/design-system-apollo-react 1.0.5-alpha.286 → 1.0.5-alpha.290

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss";
+import { type CardCheckboxProps } from "./CardCheckboxCommon";
+export declare const CardCheckbox: {
+    (props: CardCheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/Checkbox/{CheckboxCard/CheckboxCardApollo.js → CardCheckbox/CardCheckboxApollo.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxApollo.scss";
 import { Icon } from "../../../Icon/IconApollo";
 import { ItemMessage } from "../../ItemMessage/ItemMessageApollo";
 import { Checkbox } from "../Checkbox/CheckboxApollo";
-import { CheckboxCardCommon } from "./CheckboxCardCommon";
-export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
-CheckboxCard.displayName = "CheckboxCard";
+import { CardCheckboxCommon, } from "./CardCheckboxCommon";
+export const CardCheckbox = (props) => (_jsx(CardCheckboxCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
+CardCheckbox.displayName = "CardCheckbox";

package/dist/Form/Checkbox/{CheckboxCard/CheckboxCardCommon.d.ts → CardCheckbox/CardCheckboxCommon.d.ts}

@@ -1,21 +1,21 @@
 import React, { ComponentPropsWithRef, type ComponentProps, type ComponentType } from "react";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
-import { type TCheckboxCardItem } from "./CheckboxCardItem";
+import { type TCardCheckboxItem } from "./CardCheckboxItem";
 import type { CheckboxComponent, IconComponent } from "./types";
-export type CheckboxCardProps = ComponentPropsWithRef<"input"> & {
+export type CardCheckboxProps = ComponentPropsWithRef<"input"> & {
     type: "vertical" | "horizontal";
     labelGroup?: string;
     descriptionGroup?: string;
     isRequired?: boolean;
-    options: TCheckboxCardItem[];
+    options: TCardCheckboxItem[];
     onChange?: React.ChangeEventHandler;
     error?: string;
 };
-type CheckboxCardCommonProps = CheckboxCardProps & CheckboxComponent & IconComponent & {
+type CardCheckboxCommonProps = CardCheckboxProps & CheckboxComponent & IconComponent & {
     ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
 };
-export declare const CheckboxCardCommon: {
-    ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type, error, ItemMessageComponent, }: CheckboxCardCommonProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardCheckboxCommon: {
+    ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type, error, ItemMessageComponent, }: CardCheckboxCommonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxCommon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { BREAKPOINT } from "../../../utilities/constants";
+import { getComponentClassName } from "../../../utilities/getComponentClassName";
+import { useIsSmallScreen } from "../../../utilities/hook/useIsSmallScreen";
+import { CardCheckboxItem } from "./CardCheckboxItem";
+export const CardCheckboxCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", error, ItemMessageComponent, }) => {
+    const componentClassName = getComponentClassName("af-card-checkbox__container", className);
+    const checkboxGroupClassName = getComponentClassName("af-card-checkbox-group", className, type);
+    const errorId = useId();
+    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
+    const size = isMobile ? "M" : "L";
+    return (_jsxs("fieldset", { className: componentClassName, children: [labelGroup && (_jsxs("legend", { className: "af-card-checkbox__legend", children: [_jsxs("p", { children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" })] }), descriptionGroup && (_jsx("p", { className: "af-card-checkbox__description", children: descriptionGroup }))] })), _jsxs("div", { className: "af-card-checkbox__choices", children: [_jsx("ul", { className: checkboxGroupClassName, children: options.map(({ hasError, ...inputProps }) => (_jsx("li", { children: _jsx(CardCheckboxItem, { size: size, errorId: errorId, onChange: onChange, CheckboxComponent: CheckboxComponent, IconComponent: IconComponent, hasError: Boolean(error) || hasError, ...inputProps }) }, crypto.randomUUID()))) }), _jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" })] })] }));
+};
+CardCheckboxCommon.displayName = "CardCheckboxCommon";

package/dist/Form/Checkbox/{CheckboxCard/CheckboxCardItem.d.ts → CardCheckbox/CardCheckboxItem.d.ts}

@@ -1,15 +1,15 @@
 import { type ReactNode } from "react";
 import type { CheckboxComponent, IconComponent } from "./types";
-export type TCheckboxCardItem = {
+export type TCardCheckboxItem = {
     label: ReactNode;
     subtitle?: ReactNode;
     description?: ReactNode;
     hasError?: boolean;
     icon?: string;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "size">;
-type CheckboxCardItemProps = {
+type CardCheckboxItemProps = {
     size: "M" | "L";
     errorId: string;
-} & TCheckboxCardItem & CheckboxComponent & IconComponent;
-export declare const CheckboxCardItem: ({ CheckboxComponent, IconComponent, id, label, description, subtitle, icon, errorId, hasError, size, ...inputProps }: CheckboxCardItemProps) => import("react/jsx-runtime").JSX.Element;
+} & TCardCheckboxItem & CheckboxComponent & IconComponent;
+export declare const CardCheckboxItem: ({ CheckboxComponent, IconComponent, id, label, description, subtitle, icon, errorId, hasError, size, ...inputProps }: CardCheckboxItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Form/Checkbox/{CheckboxCard/CheckboxCardItem.js → CardCheckbox/CardCheckboxItem.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-export const CheckboxCardItem = ({ CheckboxComponent, IconComponent, id, label, description, subtitle, icon, errorId, hasError, size, ...inputProps }) => {
+export const CardCheckboxItem = ({ CheckboxComponent, IconComponent, id, label, description, subtitle, icon, errorId, hasError, size, ...inputProps }) => {
     let inputId = useId();
     inputId = id ?? inputId;
-    return (_jsxs("label", { htmlFor: inputId, className: "af-checkbox-card-label", "aria-invalid": hasError, children: [_jsx(CheckboxComponent, { id: inputId, errorId: errorId, hasError: hasError, ...inputProps }), _jsxs("div", { className: "af-checkbox-card-content", children: [icon && _jsx(IconComponent, { src: icon, size: size }), _jsxs("div", { className: "af-checkbox-card-content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }));
+    return (_jsxs("label", { htmlFor: inputId, className: "af-card-checkbox-label", "aria-invalid": hasError, children: [_jsx(CheckboxComponent, { id: inputId, errorId: errorId, hasError: hasError, ...inputProps }), _jsxs("div", { className: "af-card-checkbox-content", children: [icon && _jsx(IconComponent, { src: icon, size: size }), _jsxs("div", { className: "af-card-checkbox-content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }));
 };

package/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.d.ts

@@ -0,0 +1,6 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss";
+import { type CardCheckboxProps } from "./CardCheckboxCommon";
+export declare const CardCheckbox: {
+    (props: CardCheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Form/Checkbox/{CheckboxCard/CheckboxCardLF.js → CardCheckbox/CardCheckboxLF.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss";
+import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CardCheckbox/CardCheckboxLF.scss";
 import { Icon } from "../../../Icon/IconLF";
 import { ItemMessage } from "../../ItemMessage/ItemMessageLF";
 import { Checkbox } from "../Checkbox/CheckboxLF";
-import { CheckboxCardCommon } from "./CheckboxCardCommon";
-export const CheckboxCard = (props) => (_jsx(CheckboxCardCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
-CheckboxCard.displayName = "CheckboxCard";
+import { CardCheckboxCommon, } from "./CardCheckboxCommon";
+export const CardCheckbox = (props) => (_jsx(CardCheckboxCommon, { ...props, IconComponent: Icon, CheckboxComponent: Checkbox, ItemMessageComponent: ItemMessage }));
+CardCheckbox.displayName = "CardCheckbox";

package/dist/Form/Checkbox/Checkbox/CheckboxApollo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxApollo.scss";
-import checkBoxIcon from "@material-symbols/svg-400/outlined/check_small.svg";
+import checkBoxIcon from "@material-symbols/svg-400/rounded/check_small.svg";
 import { CheckboxCommon } from "./CheckboxCommon";
 export const Checkbox = (props) => (_jsx(CheckboxCommon, { ...props, checkBoxIcon: checkBoxIcon }));
 Checkbox.displayName = "Checkbox";

package/dist/Form/Checkbox/Checkbox/CheckboxCommon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Svg } from "../../../Svg/Svg";
-const CheckboxCommon = ({ errorId, checkBoxIcon, hasError, ...inputProps }) => (_jsxs("span", { className: "af-checkbox", children: [_jsx("input", { ...inputProps, type: "checkbox", "aria-errormessage": errorId, "aria-invalid": hasError, disabled: false }), _jsx("span", { className: "af-checkbox__icons", children: _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked", "aria-hidden": true }) })] }));
+const CheckboxCommon = ({ errorId, checkBoxIcon, hasError, ...inputProps }) => (_jsxs("span", { className: "af-checkbox", children: [_jsx("input", { ...inputProps, type: "checkbox", "aria-errormessage": errorId, "aria-invalid": hasError, disabled: false }), _jsx(Svg, { src: checkBoxIcon, "aria-hidden": true })] }));
 CheckboxCommon.displayName = "CheckboxCommon";
 export { CheckboxCommon };

package/dist/Form/Checkbox/Checkbox/CheckboxLF.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/Checkbox/CheckboxLF.scss";
-import checkBoxIcon from "@material-symbols/svg-400/outlined/check.svg";
+import checkBoxIcon from "@material-symbols/svg-400/rounded/check.svg";
 import { CheckboxCommon } from "./CheckboxCommon";
 export const Checkbox = (props) => (_jsx(CheckboxCommon, { ...props, checkBoxIcon: checkBoxIcon }));
 Checkbox.displayName = "Checkbox";

package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, type ComponentProps, type ComponentType } from "react";
+import React, { type ReactNode, type ComponentProps, type ComponentType } from "react";
 import { ItemMessage } from "../../ItemMessage/ItemMessageCommon";
 import { CheckboxProps } from "../Checkbox/CheckboxCommon";
 type CheckboxComponent = {

package/dist/Form/Checkbox/CheckboxText/CheckboxTextCommon.js

@@ -4,7 +4,7 @@ const CheckboxTextCommon = ({ label, errorMessage, CheckboxComponent, ItemMessag
     const errorId = useId();
     let inputId = useId();
     inputId = inputProps.id || inputId;
-    return (_jsxs("div", { className: "af-checkbox-text", children: [_jsxs("label", { htmlFor: inputId, children: [_jsx(CheckboxComponent, { id: inputId, errorId: errorId, hasError: Boolean(errorMessage), ...inputProps }), _jsx("span", { children: label })] }, inputProps.name), _jsx("div", { className: "af-checkbox-text__error", children: _jsx(ItemMessageComponent, { message: errorMessage }) })] }));
+    return (_jsxs("div", { className: "af-checkbox-text", children: [_jsx(CheckboxComponent, { id: inputId, errorId: errorId, hasError: Boolean(errorMessage), ...inputProps }), _jsx("label", { htmlFor: inputId, children: _jsx("span", { children: label }) }, inputProps.name), _jsx(ItemMessageComponent, { message: errorMessage })] }));
 };
 CheckboxTextCommon.displayName = "CheckboxTextCommon";
 export { CheckboxTextCommon };

package/dist/Grid/DebugGridApollo.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Grid/DebugGrid.scss";
 import { useState } from "react";
-import { CheckboxCard } from "../Form/Checkbox/CheckboxCard/CheckboxCardApollo";
+import { CardCheckbox } from "../Form/Checkbox/CardCheckbox/CardCheckboxApollo";
 import { DebugGridCommon } from "./DebugGridCommon";
 export const DebugGrid = ({ cols = 12, isCheckedByDefault = false, }) => {
     const [checked, setChecked] = useState(isCheckedByDefault);
     const handleChecked = () => setChecked(!checked);
-    return (_jsxs(_Fragment, { children: [_jsx(CheckboxCard, { type: "horizontal", options: [
+    return (_jsxs(_Fragment, { children: [_jsx(CardCheckbox, { type: "horizontal", options: [
                     {
                         name: "debuggrid",
                         label: "Grid",

package/dist/Grid/DebugGridLF.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-apollo-css/dist/Grid/DebugGrid.scss";
 import { useState } from "react";
-import { CheckboxCard } from "../Form/Checkbox/CheckboxCard/CheckboxCardLF";
+import { CardCheckbox } from "../Form/Checkbox/CardCheckbox/CardCheckboxLF";
 import { DebugGridCommon } from "./DebugGridCommon";
 export const DebugGrid = ({ cols = 12, isCheckedByDefault = false, }) => {
     const [checked, setChecked] = useState(isCheckedByDefault);
     const handleChecked = () => setChecked(!checked);
-    return (_jsxs(_Fragment, { children: [_jsx(CheckboxCard, { type: "horizontal", options: [
+    return (_jsxs(_Fragment, { children: [_jsx(CardCheckbox, { type: "horizontal", options: [
                     {
                         name: "debuggrid",
                         label: "Grid",

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconApollo";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoApollo";
 export { Divider } from "./Divider/DividerApollo";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxApollo";
-export { CheckboxCard } from "./Form/Checkbox/CheckboxCard/CheckboxCardApollo";
+export { CardCheckbox, CardCheckbox as CheckboxCard, } from "./Form/Checkbox/CardCheckbox/CardCheckboxApollo";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextApollo";
 export { InputDate } from "./Form/InputDate/InputDateApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";

package/dist/index.js

@@ -9,7 +9,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconApollo";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoApollo";
 export { Divider } from "./Divider/DividerApollo";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxApollo";
-export { CheckboxCard } from "./Form/Checkbox/CheckboxCard/CheckboxCardApollo";
+export { CardCheckbox, CardCheckbox as CheckboxCard, } from "./Form/Checkbox/CardCheckbox/CardCheckboxApollo";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextApollo";
 export { InputDate } from "./Form/InputDate/InputDateApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";

package/dist/indexLF.d.ts

@@ -8,7 +8,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconLF";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoLF";
 export { Divider } from "./Divider/DividerLF";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxLF";
-export { CheckboxCard } from "./Form/Checkbox/CheckboxCard/CheckboxCardLF";
+export { CardCheckbox, CardCheckbox as CheckboxCard, } from "./Form/Checkbox/CardCheckbox/CardCheckboxLF";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextLF";
 export { InputDate, InputDate as DateInput, } from "./Form/InputDate/InputDateLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";

package/dist/indexLF.js

@@ -8,7 +8,7 @@ export { ClickIcon } from "./ClickIcon/ClickIconLF";
 export { ContentItemMono } from "./ContentItemMono/ContentItemMonoLF";
 export { Divider } from "./Divider/DividerLF";
 export { Checkbox } from "./Form/Checkbox/Checkbox/CheckboxLF";
-export { CheckboxCard } from "./Form/Checkbox/CheckboxCard/CheckboxCardLF";
+export { CardCheckbox, CardCheckbox as CheckboxCard, } from "./Form/Checkbox/CardCheckbox/CardCheckboxLF";
 export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextLF";
 export { InputDate, InputDate as DateInput, } from "./Form/InputDate/InputDateLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-apollo-react",
-  "version": "1.0.5-alpha.286",
+  "version": "1.0.5-alpha.290",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.286",
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.286",
+    "@axa-fr/design-system-apollo-css": "1.0.5-alpha.290",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.290",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.d.ts

@@ -1,6 +0,0 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardApollo.scss";
-import { CheckboxCardProps } from "./CheckboxCardCommon";
-export declare const CheckboxCard: {
-    (props: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardCommon.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, } from "react";
-import { BREAKPOINT } from "../../../utilities/constants";
-import { getComponentClassName } from "../../../utilities/getComponentClassName";
-import { useIsSmallScreen } from "../../../utilities/hook/useIsSmallScreen";
-import { CheckboxCardItem } from "./CheckboxCardItem";
-export const CheckboxCardCommon = ({ className, labelGroup, descriptionGroup, CheckboxComponent, IconComponent, isRequired, options, onChange, type = "vertical", error, ItemMessageComponent, }) => {
-    const componentClassName = getComponentClassName("af-checkbox-card__container", className);
-    const checkboxGroupClassName = getComponentClassName("af-checkbox-card-group", className, type);
-    const errorId = useId();
-    const isMobile = useIsSmallScreen(BREAKPOINT.SM);
-    const size = isMobile ? "M" : "L";
-    return (_jsxs("fieldset", { className: componentClassName, children: [_jsx("div", { className: "af-checkbox-card__label-container", children: labelGroup && (_jsxs("legend", { className: "af-checkbox-card__legend", children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": true, children: "\u00A0*" }), descriptionGroup && (_jsx("p", { className: "af-checkbox-card__description", children: descriptionGroup }))] })) }), _jsxs("div", { className: "af-checkbox-card__choices", children: [_jsx("ul", { className: checkboxGroupClassName, children: options.map(({ hasError, ...inputProps }) => (_jsx("li", { children: _jsx(CheckboxCardItem, { size: size, errorId: errorId, onChange: onChange, CheckboxComponent: CheckboxComponent, IconComponent: IconComponent, hasError: Boolean(error) || hasError, ...inputProps }) }, crypto.randomUUID()))) }), error && (_jsx(ItemMessageComponent, { id: errorId, message: error, messageType: "error" }))] })] }));
-};
-CheckboxCardCommon.displayName = "CheckboxCardCommon";

package/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.d.ts

@@ -1,6 +0,0 @@
-import "@axa-fr/design-system-apollo-css/dist/Form/Checkbox/CheckboxCard/CheckboxCardLF.scss";
-import { CheckboxCardProps } from "./CheckboxCardCommon";
-export declare const CheckboxCard: {
-    (props: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};