@inseefr/lunatic 3.4.4 → 3.4.5-rc.0

package/src/components/shared/ComponentWrapper.tsx

@@ -0,0 +1,66 @@
+import { type PropsWithChildren } from 'react';
+import type { LunaticBaseProps } from '../type';
+import { Missing } from './Missing/Missing';
+import classnames from 'classnames';
+import { Declarations } from './Declarations/Declarations';
+import { voidFunction } from '../../utils/function';
+import type { LunaticChangesHandler } from '../../use-lunatic/type';
+
+type Props = PropsWithChildren<{
+	componentType?: string;
+	paginatedLoop?: boolean;
+	handleChanges?: LunaticChangesHandler;
+}> &
+	Pick<
+		LunaticBaseProps,
+		| 'declarations'
+		| 'management'
+		| 'id'
+		| 'label'
+		| 'missingResponse'
+		| 'preferences'
+		| 'value'
+		| 'missing'
+		| 'disabled'
+	>;
+
+/**
+ * Wrapper around Lunatic components, handle Declarations and missing buttons
+ *
+ * ## The structure :
+ *
+ * |--------------------------|
+ * |    DeclarationBefore     |
+ * |__________________________|
+ * |--------------------------|
+ * |        Component         |
+ * |__________________________|
+ * |--------------------------|
+ * |     Missing Buttons      |
+ * |__________________________|
+ */
+export function ComponentWrapper(props: Props) {
+	const { id, declarations, children, management, handleChanges } = props;
+	return (
+		<>
+			<Declarations
+				type="BEFORE_QUESTION_TEXT"
+				declarations={declarations}
+				id={id}
+			/>
+			<div className="field-container">
+				<div
+					className={classnames({
+						'field-with-tooltip': management,
+						field: !management,
+					})}
+				>
+					{children}
+				</div>
+				{management && <div className="tooltip" />}
+			</div>
+			<Declarations type="DETACHABLE" declarations={declarations} id={id} />
+			<Missing {...props} handleChanges={handleChanges ?? voidFunction} />
+		</>
+	);
+}

package/src/components/shared/Declarations/Declarations.spec.tsx

@@ -0,0 +1,101 @@
+import { Declarations } from './Declarations';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import type { LunaticBaseProps } from '../../type';
+
+const declarations = [
+	{
+		id: '1',
+		label: 'Declaration 1',
+		declarationType: 'COMMENT',
+		position: 'AFTER_QUESTION_TEXT',
+	},
+	{
+		id: '2',
+		label: 'Declaration 2',
+		declarationType: 'COMMENT',
+		position: 'BEFORE_QUESTION_TEXT',
+	},
+	{
+		id: '3',
+		label: 'Declaration 3',
+		declarationType: 'COMMENT',
+		position: 'DETACHABLE',
+	},
+] satisfies LunaticBaseProps['declarations'];
+
+describe('Declarations component', () => {
+	it('renders correctly with filtered Declarations', () => {
+		const { getByTestId, getByText } = render(
+			<div>
+				<div data-testid={`declarations-1-AFTER_QUESTION_TEXT`} />
+				<Declarations
+					id="1"
+					type="AFTER_QUESTION_TEXT"
+					declarations={declarations}
+				/>
+			</div>
+		);
+		const declarationsElement = getByTestId(
+			'declarations-1-AFTER_QUESTION_TEXT'
+		);
+		expect(declarationsElement.nextElementSibling).toHaveClass(
+			'declarations-lunatic'
+		);
+		const declarationElement = getByText('Declaration 1');
+		expect(declarationElement).toBeInTheDocument();
+		expect(declarationElement).toHaveClass('declaration-lunatic');
+		expect(declarationElement).toHaveClass('declaration-comment');
+	});
+
+	it('renders nothing with unfiltered Declarations', () => {
+		const declarationstest = [
+			{
+				id: '3',
+				label: 'Declaration 3',
+				declarationType: 'COMMENT' as const,
+				position: 'DETACHABLE',
+			},
+		];
+		const { queryByTestId } = render(
+			<div>
+				<div data-testid={`declarations-1-BEFORE_QUESTION_TEXT`} />
+				<Declarations
+					id="1"
+					type="BEFORE_QUESTION_TEXT"
+					declarations={declarationstest}
+				/>
+			</div>
+		);
+		const declarationsElement = queryByTestId(
+			'declarations-1-BEFORE_QUESTION_TEXT'
+		)!;
+		expect(declarationsElement.nextElementSibling).toBeNull();
+	});
+
+	it('renders nothing with empty Declarations array', () => {
+		const { queryByTestId } = render(
+			<div>
+				<div data-testid={`declarations-1-DETACHABLE`} />
+				<Declarations id="1" type="DETACHABLE" declarations={[]} />
+			</div>
+		);
+		const declarationsElement = queryByTestId('declarations-1-DETACHABLE')!;
+		expect(declarationsElement.nextElementSibling).toBeNull();
+	});
+
+	it('renders null with empty Declaration', () => {
+		const declarationstest = [
+			{
+				id: '3',
+				label: '',
+				declarationType: 'COMMENT' as const,
+				position: 'DETACHABLE',
+			},
+		];
+		const { container } = render(
+			<Declarations id="1" type="DETACHABLE" declarations={declarationstest} />
+		);
+		expect(container).toMatchInlineSnapshot(`<div />`);
+	});
+});

package/src/components/shared/Declarations/Declarations.tsx

@@ -0,0 +1,70 @@
+import { slottableComponent } from '../HOC/slottableComponent';
+import { type PropsWithChildren, type ReactNode } from 'react';
+import classnames from 'classnames';
+
+export const Declaration = slottableComponent<
+	PropsWithChildren<{
+		declarationType:
+			| 'INSTRUCTION'
+			| 'COMMENT'
+			| 'HELP'
+			| 'CODECARD'
+			| 'WARNING'
+			| 'STATEMENT';
+	}>
+>('Declaration', ({ children, declarationType }) => (
+	<div
+		data-testid="declaration"
+		className={classnames(
+			'declaration-lunatic',
+			`declaration-${declarationType.toLowerCase()}`
+		)}
+	>
+		{children}
+	</div>
+));
+
+type Props = {
+	id?: string;
+	type?: 'AFTER_QUESTION_TEXT' | 'BEFORE_QUESTION_TEXT' | 'DETACHABLE';
+	declarations?: {
+		id: string;
+		declarationType:
+			| 'INSTRUCTION'
+			| 'COMMENT'
+			| 'HELP'
+			| 'CODECARD'
+			| 'WARNING'
+			| 'STATEMENT';
+		position: string;
+		label: ReactNode;
+	}[];
+};
+
+function LunaticDeclarations({
+	id,
+	type = 'AFTER_QUESTION_TEXT',
+	declarations,
+}: Props) {
+	const filtered =
+		declarations?.filter((d) => d.position === type && d.label) ?? [];
+
+	if (filtered.length === 0) {
+		return null;
+	}
+
+	return (
+		<div id={`declarations-${id}-${type}`} className="declarations-lunatic">
+			{filtered.map(({ id, label, declarationType }) => (
+				<Declaration key={id} declarationType={declarationType}>
+					{label}
+				</Declaration>
+			))}
+		</div>
+	);
+}
+
+export const Declarations = slottableComponent(
+	'Declarations',
+	LunaticDeclarations
+);

package/src/components/shared/Fieldset/Fieldset.spec.tsx

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react';
+import { Fieldset } from './Fieldset';
+import { describe, it, expect } from 'vitest';
+describe('Fieldset', () => {
+	it('renders the legend text', () => {
+		const legendText = 'Example Legend';
+		const { getByText } = render(<Fieldset legend={legendText} />);
+		const legendElement = getByText(legendText);
+		expect(legendElement).toBeInTheDocument();
+	});
+
+	it('renders the children', () => {
+		const childText = 'Example child text';
+		const { getByText } = render(
+			<Fieldset>
+				<div>{childText}</div>
+			</Fieldset>
+		);
+		const childElement = getByText(childText);
+		expect(childElement).toBeInTheDocument();
+	});
+	it('applies the className', () => {
+		const className = 'custom-class';
+		const { container } = render(<Fieldset className={className} />);
+		const fieldsetElement = container.querySelector('fieldset');
+		expect(fieldsetElement).toHaveClass(className);
+	});
+});

package/src/components/shared/Fieldset/Fieldset.tsx

@@ -0,0 +1,47 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+import { LabelDescription } from '../LabelDescription';
+import type { LunaticBaseProps } from '../../type';
+import { isElement } from '../../../utils/is-element';
+
+type Props = PropsWithChildren<{
+	legend?: ReactNode;
+	description?: LunaticBaseProps['description'];
+	className?: string;
+}>;
+
+function LunaticFieldset({ children, legend, description, className }: Props) {
+	return (
+		<fieldset className={classnames(className)}>
+			<legend>
+				{labelToReactNode(legend)}
+				<LabelDescription value={description} />
+			</legend>
+			{children}
+		</fieldset>
+	);
+}
+
+function labelToReactNode(label: unknown): ReactNode {
+	if (!label) {
+		return '';
+	}
+	if (
+		typeof label === 'string' ||
+		typeof label === 'boolean' ||
+		typeof label === 'number'
+	) {
+		return label;
+	}
+	if (typeof label === 'object') {
+		if (isElement(label)) return label;
+		if ('value' in label && typeof label.value === 'string') {
+			return label.value;
+		}
+	}
+
+	return ``;
+}
+
+export const Fieldset = slottableComponent('Fieldset', LunaticFieldset);

package/src/components/shared/HOC/slottableComponent.tsx

@@ -0,0 +1,155 @@
+import {
+	type ComponentType,
+	createContext,
+	type FunctionComponent,
+	type PropsWithChildren,
+	useContext,
+} from 'react';
+import type { Subsequence } from '../../Subsequence/Subsequence';
+import type { CustomInput } from '../../Input/Input';
+import type { Declaration, Declarations } from '../Declarations/Declarations';
+import type { Label } from '../Label/Label';
+import type { Table, Tbody, Td, Th, Thead, Tr } from '../Table';
+import type { CustomTextarea } from '../../Textarea/Textarea';
+import type { RadioGroup } from '../Radio/RadioGroup';
+import type { CustomRoundabout } from '../../Roundabout/CustomRoundabout';
+import type { Button } from '../Button/Button';
+import type { CustomCheckboxBoolean } from '../../CheckboxBoolean/CheckboxBoolean';
+import type { CheckboxOption } from '../Checkbox/CheckboxOption';
+import type { CustomDatepicker } from '../../Datepicker/Datepicker';
+import type { CustomDuration } from '../../Duration/Duration';
+import type { Fieldset } from '../Fieldset/Fieldset';
+import type { CustomInputNumber } from '../../InputNumber/InputNumber';
+import type { CustomQuestion } from '../../Question/Question';
+import type { RadioOption } from '../Radio/RadioOption';
+import type { Sequence } from '../../Sequence/Sequence';
+import type { CustomSwitch } from '../../Switch/Switch';
+import type { CustomLoop } from '../../Loop/Loop';
+import type { CustomDropdown } from '../../Dropdown/Dropdown';
+import type { Combobox } from '../Combobox/Combobox';
+import type { ComboboxContainer } from '../Combobox/ComboboxContainer';
+import type { ComboboxContentBox } from '../Combobox/ComboboxContentBox';
+import type { ComboboxOption } from '../Combobox/Panel/ComboboxOption';
+import type { ComboboxPanelContainer } from '../Combobox/Panel/ComboboxPanelContainer';
+import type { ComboboxClearButton } from '../Combobox/Selection/ComboboxClearButton';
+import type { ComboboxLabelSelection } from '../Combobox/Selection/ComboboxLabelSelection';
+import type { SuggesterNotification } from '../../Suggester/SuggesterNotification';
+import type { Radio } from '../../Radio/Radio';
+import type { ComboboxInput } from '../Combobox/Selection/ComboboxInput';
+import type { CustomSuggester } from '../../Suggester/CustomSuggester';
+import type { CustomCheckboxGroup } from '../../CheckboxGroup/CustomCheckboxGroup';
+import type { RouterLink } from '../MDLabel/RouterLink';
+import type { SummaryResponses, SummaryTitle } from '../../Summary/Summary';
+import type { LunaticComponentProps } from '../../type';
+import type { MarkdownLink } from '../MDLabel/MarkdownLink';
+import type { Accordion } from '../../Accordion/Accordion';
+
+/**
+ * Contains the type of every customizable component
+ */
+export type LunaticSlotComponents = {
+	// Components
+	Input: typeof CustomInput;
+	InputNumber: typeof CustomInputNumber;
+	Sequence: typeof Sequence;
+	Switch: typeof CustomSwitch;
+	Subsequence: typeof Subsequence;
+	Textarea: typeof CustomTextarea;
+	Datepicker: typeof CustomDatepicker;
+	Duration: typeof CustomDuration;
+	Question: typeof CustomQuestion;
+	Loop: typeof CustomLoop;
+	Dropdown: typeof CustomDropdown;
+	Radio: typeof Radio;
+	Suggester: typeof CustomSuggester;
+
+	// Checkbox
+	CheckboxBoolean: typeof CustomCheckboxBoolean;
+	CheckboxGroup: typeof CustomCheckboxGroup;
+	CheckboxOption: typeof CheckboxOption;
+	RadioGroup: typeof RadioGroup;
+	RadioOption: typeof RadioOption;
+
+	// ComboBox
+	Combobox: typeof Combobox;
+	ComboboxContainer: typeof ComboboxContainer; // Top level wrapper
+	ComboboxContentBox: typeof ComboboxContentBox; // Wrapper around the field
+	ComboboxPanelContainer: typeof ComboboxPanelContainer; // ul element
+	ComboboxOption: typeof ComboboxOption; // option (inside the li)
+	ComboboxInput: typeof ComboboxInput; // option (inside the li)
+	ComboboxClearButton: typeof ComboboxClearButton;
+	ComboboxLabelSelection: typeof ComboboxLabelSelection;
+
+	// Roundabout
+	Roundabout: typeof CustomRoundabout;
+
+	// Suggester
+	SuggesterNotification: typeof SuggesterNotification;
+
+	// Summary
+	SummaryTitle: typeof SummaryTitle;
+	SummaryResponses: typeof SummaryResponses;
+
+	// Shared
+	Button: typeof Button;
+	Label: typeof Label;
+	Declarations: typeof Declarations;
+	Declaration: typeof Declaration;
+	Tr: typeof Tr;
+	Td: typeof Td;
+	Th: typeof Th;
+	Tbody: typeof Tbody;
+	Table: typeof Table;
+	Thead: typeof Thead;
+	Fieldset: typeof Fieldset;
+	Notification: typeof Notification;
+	RouterLink: typeof RouterLink;
+	ComponentWrapper: ComponentType<
+		PropsWithChildren<LunaticComponentProps & { index: number }>
+	>;
+	MarkdownLink: typeof MarkdownLink;
+	Accordion: typeof Accordion;
+};
+
+const empty = {} as Partial<LunaticSlotComponents> | undefined;
+
+const SlotsContext = createContext(empty);
+
+export const SlotsProvider = ({
+	slots,
+	children,
+}: PropsWithChildren<{ slots?: Partial<LunaticSlotComponents> }>) => {
+	if (!slots) {
+		return <>{children}</>;
+	}
+	return (
+		<SlotsContext.Provider value={slots ?? empty}>
+			{children}
+		</SlotsContext.Provider>
+	);
+};
+
+/**
+ * Create a replaceable version of a component
+ *
+ * The component can be replaced using the "slots" props on <LunaticComponents>
+ */
+export function slottableComponent<T>(
+	name: keyof LunaticSlotComponents,
+	OriginalComponent: FunctionComponent<T>
+): ComponentType<T> {
+	const DecoratedComponent = (props: T) => {
+		const custom = useContext(SlotsContext) ?? empty;
+
+		if (custom && name in custom) {
+			const SlotComponent = custom[name] as ComponentType<T>;
+			// @ts-expect-error This is too dynamic
+			return <SlotComponent {...props} />;
+		}
+
+		// @ts-expect-error This is too dynamic
+		return <OriginalComponent {...props} />;
+	};
+	DecoratedComponent.displayName = name;
+	return DecoratedComponent;
+}

package/src/components/shared/Icons/checkbox-checked-icon.tsx

@@ -0,0 +1,27 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function CheckboxCheckedIcon({
+	className,
+	width = 32,
+	height = 32,
+}: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M0 0h24v24H0z" fill="none" />
+				<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/checkbox-disabled-icon.tsx

@@ -0,0 +1,27 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function CheckboxCheckedIcon({
+	className,
+	width = 32,
+	height = 32,
+}: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M0 0h24v24H0z" fill="none" />
+				<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/checkbox-unchecked-icon.tsx

@@ -0,0 +1,27 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function CheckboxUncheckedIcon({
+	className,
+	width = 32,
+	height = 32,
+}: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
+				<path d="M0 0h24v24H0z" fill="none" />
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/closed-icon.tsx

@@ -0,0 +1,22 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function ClosedIcon({ className, width = 32, height = 32 }: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 25.628748,11.329813 C 25.38152,11.109877 25.088459,11 24.749838,11 H 7.2500941 C 6.9113359,11 6.6184798,11.109877 6.3710468,11.329813 6.1236139,11.549992 6,11.810303 6,12.111233 c 0,0.300869 0.1236139,0.56118 0.3710468,0.781177 l 8.7499062,7.777534 C 15.368659,20.88988 15.661516,21 16,21 c 0.338484,0 0.631614,-0.11012 0.878842,-0.330056 l 8.749906,-7.777595 C 25.875907,12.672413 26,12.412102 26,12.111172 c 0,-0.300869 -0.124093,-0.56118 -0.371252,-0.781359 z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/cross-icon.tsx

@@ -0,0 +1,22 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function CrossIcon({ className, width = 32, height = 32 }: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 7.097006,7.0709627 C 6.4710386,7.6950801 6.0348033,8.5167883 6,9.3333333 l 6.666666,6.6666677 -6.6666655,6.666666 C 6.0406655,24.255963 7.7002437,25.930395 9.3333333,26 L 15.999999,19.333334 22.666665,26 C 24.255962,25.95934 25.930393,24.299755 26,22.666667 L 19.333332,16.000001 26,9.3333334 C 25.959335,7.7440359 24.299754,6.069605 22.666665,6 L 15.999999,12.666666 9.3333333,6 C 8.5386853,6.020332 7.7229758,6.4468492 7.097006,7.0709627 Z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/icon-props.ts

@@ -0,0 +1,5 @@
+export type IconProps = {
+	className?: string;
+	width?: number;
+	height?: number;
+};

package/src/components/shared/Icons/index.ts

@@ -0,0 +1,10 @@
+export { CrossIcon } from './cross-icon';
+export { ClosedIcon } from './closed-icon';
+export { OpenedIcon } from './opened-icon';
+export { LoadIcon } from './load-icon';
+export { NetworkIcon } from './network-icon';
+export { OnDragIcon } from './on-drag-icon';
+export { RadioCheckedIcon } from './radio-checked-icon';
+export { RadioUncheckedIcon } from './radio-unchecked-icon';
+export { CheckboxCheckedIcon } from './checkbox-checked-icon';
+export { CheckboxUncheckedIcon } from './checkbox-unchecked-icon';

package/src/components/shared/Icons/load-icon.tsx

@@ -0,0 +1,22 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function LoadIcon({ className, width = 32, height = 32 }: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="m 10.628906,5.8808594 c -0.214987,-0.001 -0.42313,0.066105 -0.621094,0.203125 -0.197929,0.13695 -0.3337126,0.3059125 -0.4082026,0.5078125 -0.07434,0.20177 -0.063157,0.3725087 0.033203,0.5117187 L 10.667969,8.5996094 C 7.7654347,10.429719 6.000564,13.619938 6,17.054688 c 0,5.522849 4.477153,10 10,10 5.522847,0 10,-4.477151 10,-10 C 26.000084,13.846958 24.464581,10.867019 21.925781,9 l -2.167969,4.773438 c 0.779895,0.889532 1.238599,2.0462 1.242188,3.28125 0,2.76142 -2.238576,5 -5,5 -2.761424,0 -5,-2.238581 -5,-5 0.0042,-1.793391 0.969178,-3.443679 2.523438,-4.330079 l 1.089843,1.574219 c 0.09638,0.13927 0.25171,0.209318 0.466797,0.210938 0.215229,10e-4 0.421172,-0.06601 0.619141,-0.203125 0.19792,-0.13696 0.333879,-0.305933 0.408203,-0.507813 l 2.626953,-7.1386718 c 0.07422,-0.2019799 0.06311,-0.3725587 -0.0332,-0.5117187 -0.0963,-0.13917 -0.251768,-0.2093975 -0.4668,-0.2109375 z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/lunatic-icon.tsx

@@ -0,0 +1,9 @@
+import classnames from 'classnames';
+import { type PropsWithChildren } from 'react';
+
+export function LunaticIcon({
+	className,
+	children,
+}: PropsWithChildren<{ className?: string }>) {
+	return <i className={classnames('lunatic-icon', className)}>{children}</i>;
+}

package/src/components/shared/Icons/network-icon.tsx

@@ -0,0 +1,22 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function NetworkIcon({ className, width = 32, height = 32 }: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 16.211514,6 C 11.574486,6.008 7.1494292,7.94279 4,11.34621 c 0.067313,0.60594 0.3511557,1.08182 1.0781965,1.29181 2.8398143,-3.15866 6.8857655,-4.96513 11.1333175,-4.9708 4.246875,0.008 8.291469,1.81516 11.12987,4.9742 0.42856,-0.18331 0.899659,-0.21808 1.074753,-1.28833 C 25.269539,7.94895 20.847185,6.00922 16.211514,6 Z m 0,3.33452 c -3.859338,0.004 -7.5270269,1.68269 -10.055121,4.59867 0.082129,0.59595 0.3347147,1.09028 1.0747495,1.2918 2.214919,-2.67556 5.5069425,-4.22502 8.9803715,-4.22664 3.472148,0.004 6.761427,1.5572 8.973481,4.23352 0.574616,-0.21997 1.032388,-0.55661 1.081639,-1.30212 -2.528736,-2.91477 -6.196335,-4.59084 -10.05512,-4.59523 z m -0.0034,3.33101 c -3.084894,0.002 -5.995941,1.42878 -7.8883982,3.86498 0.015118,0.87625 0.5660293,1.08257 1.095416,1.31584 1.5613712,-2.20255 4.0931392,-3.51208 6.7929792,-3.51359 2.700508,0.004 5.231123,1.31845 6.789531,3.52395 0.886465,-0.21657 1.135403,-0.70692 1.098867,-1.31932 -1.891063,-2.43881 -4.802322,-3.8677 -7.888395,-3.87186 z m 0,3.33449 c -2.316849,0.002 -4.46631,1.20748 -5.676888,3.18293 L 16.211554,26 21.884999,19.18982 c -1.2089,-1.97805 -3.358668,-3.18598 -5.676885,-3.1898 z" />
+			</svg>
+		</LunaticIcon>
+	);
+}