@ultraviolet/ui 3.21.0 → 3.21.2

package/dist/components/SelectInput/index.js

@@ -14,102 +14,105 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SelectInput/index.tsx
 var SelectInput;
-var init_SelectInput = __esmMin(() => {
-	init_hasHelperText();
-	init_Description();
-	init_Label();
-	init_Stack();
-	init_Dropdown();
-	init_SelectBar();
-	init_SelectInputProvider();
-	init_styles_css();
-	SelectInput = ({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size = "large", emptyState, descriptionDirection = "column", success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch = "Search in list", placeholder = "Select item", disabled = false, readOnly = false, clearable = false, multiselect = false, required = false, labelDescription, autofocus, loadMore, optionalInfoPlacement = "right", isLoading, selectAll, selectAllGroup = false, dropdownAlign, portalTarget, onOpen, groupEmptyState, groupError, style, addOption, "aria-describedby": ariaDescribedBy }) => {
-		const localId = useId();
-		const finalId = id !== null && id !== void 0 ? id : localId;
-		const helperId = useId();
-		const dropdownId = useId();
-		const ref = useRef(null);
-		const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.length, 0);
-		const numberOfDisabledOptions = Array.isArray(options) ? options.filter((option) => option.disabled).length : Object.values(options).reduce((acc, current) => acc + current.filter((option) => option.disabled).length, 0);
-		const finalDataTestId = dataTestId !== null && dataTestId !== void 0 ? dataTestId : `select-input-${name !== null && name !== void 0 ? name : "name"}`;
-		return /* @__PURE__ */ jsx(SelectInputProvider, {
-			multiselect,
-			numberOfDisabledOptions,
-			numberOfOptions,
-			onChange,
-			onOpen,
-			options,
-			refSelect: ref,
-			selectAll,
-			selectAllGroup,
-			size,
-			value,
-			children: /* @__PURE__ */ jsxs("div", {
-				"aria-label": name,
-				className: cn(className, selectInputStyle.container),
-				onBlur,
-				onFocus,
-				style,
-				children: [/* @__PURE__ */ jsx(Dropdown, {
-					addOption,
-					disabled,
-					descriptionDirection,
-					dropdownAlign,
-					emptyState,
-					footer,
-					groupEmptyState,
-					groupError,
-					id: dropdownId,
-					isLoading,
-					loadMore,
-					optionalInfoPlacement,
-					placeholder: placeholderSearch,
-					portalTarget,
-					refSelect: ref,
-					searchable: numberOfOptions >= 6 || !!addOption,
-					size,
-					children: /* @__PURE__ */ jsxs(Stack, {
-						"aria-label": ariaLabel,
-						gap: .5,
-						children: [label || labelDescription ? /* @__PURE__ */ jsx(Label, {
-							htmlFor: finalId,
-							labelDescription,
-							required,
-							size,
-							children: label
-						}) : null, /* @__PURE__ */ jsx(SelectBar, {
-							"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
-							autoFocus: autofocus,
-							clearable,
-							"data-testid": finalDataTestId,
-							disabled,
-							dropdownId,
-							error,
-							id: finalId,
-							innerRef: ref,
-							label,
-							placeholder,
-							readOnly,
-							size,
-							success,
-							tooltip,
-							helperId,
-							helper
-						})]
-					})
-				}), /* @__PURE__ */ jsx(Description, {
-					error,
-					success,
-					helper,
-					disabled,
-					id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId,
-					className: selectInputStyle.helper
-				})]
-			})
-		});
-	};
-	SelectInput.displayName = "SelectInput";
-});
+function init_SelectInput() {
+	return (init_SelectInput = __esmMin(() => {
+		init_hasHelperText();
+		init_Description();
+		init_Label();
+		init_Stack();
+		init_Dropdown();
+		init_SelectBar();
+		init_SelectInputProvider();
+		init_styles_css();
+		SelectInput = ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-testid": dataTestId, addOption, autofocus, className, clearable = false, descriptionDirection = "column", disabled = false, dropdownAlign, emptyState, error, footer, groupEmptyState, groupError, helper, id, isLoading, label, labelDescription, loadMore, multiselect = false, name, onBlur, onChange, onFocus, onOpen, optionalInfoPlacement = "right", options, placeholder = "Select item", placeholderSearch = "Search in list", portalTarget, readOnly = false, required = false, selectAll, selectAllGroup = false, size = "large", style, success, tooltip, value }) => {
+			const localId = useId();
+			const finalId = id !== null && id !== void 0 ? id : localId;
+			const helperId = useId();
+			const dropdownId = useId();
+			const ref = useRef(null);
+			const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.length, 0);
+			const numberOfDisabledOptions = Array.isArray(options) ? options.filter((option) => option.disabled).length : Object.values(options).reduce((acc, current) => acc + current.filter((option) => option.disabled).length, 0);
+			const finalDataTestId = dataTestId !== null && dataTestId !== void 0 ? dataTestId : `select-input-${name !== null && name !== void 0 ? name : "name"}`;
+			return /* @__PURE__ */ jsx(SelectInputProvider, {
+				multiselect,
+				numberOfDisabledOptions,
+				numberOfOptions,
+				onChange,
+				onOpen,
+				options,
+				refSelect: ref,
+				selectAll,
+				selectAllGroup,
+				size,
+				value,
+				children: /* @__PURE__ */ jsxs("div", {
+					"aria-label": name,
+					className: cn(className, selectInputStyle.container),
+					onBlur,
+					onFocus,
+					style,
+					children: [/* @__PURE__ */ jsx(Dropdown, {
+						addOption,
+						disabled,
+						descriptionDirection,
+						dropdownAlign,
+						emptyState,
+						footer,
+						groupEmptyState,
+						groupError,
+						id: dropdownId,
+						isLoading,
+						loadMore,
+						optionalInfoPlacement,
+						placeholder: placeholderSearch,
+						portalTarget,
+						refSelect: ref,
+						searchable: numberOfOptions >= 6 || !!addOption,
+						size,
+						children: /* @__PURE__ */ jsxs(Stack, {
+							"aria-label": ariaLabel,
+							gap: .5,
+							children: [label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+								htmlFor: finalId,
+								labelDescription,
+								required,
+								size,
+								children: label
+							}) : null, /* @__PURE__ */ jsx(SelectBar, {
+								"aria-describedby": ariaDescribedBy || (hasHelperText(helper, error, success) ? helperId : void 0),
+								"aria-labelledby": ariaLabelledby,
+								autoFocus: autofocus,
+								clearable,
+								"data-testid": finalDataTestId,
+								disabled,
+								dropdownId,
+								error,
+								id: finalId,
+								innerRef: ref,
+								label,
+								placeholder,
+								readOnly,
+								size,
+								success,
+								tooltip,
+								helperId,
+								helper
+							})]
+						})
+					}), /* @__PURE__ */ jsx(Description, {
+						error,
+						success,
+						helper,
+						disabled,
+						id: ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : helperId,
+						className: selectInputStyle.helper
+					})]
+				})
+			});
+		};
+		SelectInput.displayName = "SelectInput";
+	}))();
+}
 
 //#endregion
 init_SelectInput();

package/dist/components/SelectInput/reducerFunctions.js

@@ -2,64 +2,66 @@ import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/SelectInput/reducerFunctions.tsx
 var selectAllAction, selectGroupAction, selectOptionAction, clearAllAction, updateAction, resetAction;
-var init_reducerFunctions = __esmMin(() => {
-	selectAllAction = (state, allGroups, allValues, numberOfOptions, numberOfDisabledOptions) => {
-		if (state.selectedValues.length === numberOfOptions - numberOfDisabledOptions) return {
-			selectedGroups: [],
-			selectedValues: []
-		};
-		return {
-			selectedGroups: allGroups,
-			selectedValues: allValues.map((option) => option.value)
-		};
-	};
-	selectGroupAction = (state, selectedGroupAction, options) => {
-		if (!Array.isArray(options)) {
-			if (state.selectedGroups.includes(selectedGroupAction)) return {
-				selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== selectedGroupAction),
-				selectedValues: [...state.selectedValues].filter((selectedValue) => !options[selectedGroupAction].find((option) => option.value === selectedValue))
+function init_reducerFunctions() {
+	return (init_reducerFunctions = __esmMin(() => {
+		selectAllAction = (state, allGroups, allValues, numberOfOptions, numberOfDisabledOptions) => {
+			if (state.selectedValues.length === numberOfOptions - numberOfDisabledOptions) return {
+				selectedGroups: [],
+				selectedValues: []
 			};
-			const newSelectedValues = [...state.selectedValues];
-			options[selectedGroupAction].map((option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
 			return {
-				selectedGroups: [...state.selectedGroups, selectedGroupAction],
-				selectedValues: newSelectedValues
-			};
-		}
-		return state;
-	};
-	selectOptionAction = (state, options, multiselect, clickedOption, group) => {
-		if (multiselect) {
-			if (state.selectedValues.includes(clickedOption.value)) return {
-				selectedGroups: group && state.selectedGroups.includes(group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== group) : [],
-				selectedValues: state.selectedValues.filter((val) => val !== clickedOption.value)
+				selectedGroups: allGroups,
+				selectedValues: allValues.map((option) => option.value)
 			};
+		};
+		selectGroupAction = (state, selectedGroupAction, options) => {
+			if (!Array.isArray(options)) {
+				if (state.selectedGroups.includes(selectedGroupAction)) return {
+					selectedGroups: state.selectedGroups.filter((selectedGroup) => selectedGroup !== selectedGroupAction),
+					selectedValues: [...state.selectedValues].filter((selectedValue) => !options[selectedGroupAction].find((option) => option.value === selectedValue))
+				};
+				const newSelectedValues = [...state.selectedValues];
+				options[selectedGroupAction].map((option) => newSelectedValues.find((aValue) => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+				return {
+					selectedGroups: [...state.selectedGroups, selectedGroupAction],
+					selectedValues: newSelectedValues
+				};
+			}
+			return state;
+		};
+		selectOptionAction = (state, options, multiselect, clickedOption, group) => {
+			if (multiselect) {
+				if (state.selectedValues.includes(clickedOption.value)) return {
+					selectedGroups: group && state.selectedGroups.includes(group) ? state.selectedGroups.filter((selectedGroup) => selectedGroup !== group) : [],
+					selectedValues: state.selectedValues.filter((val) => val !== clickedOption.value)
+				};
+				return {
+					selectedGroups: !Array.isArray(options) && group && options[group].every((option) => [...state.selectedValues, clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, group] : state.selectedGroups,
+					selectedValues: [...state.selectedValues, clickedOption.value]
+				};
+			}
 			return {
-				selectedGroups: !Array.isArray(options) && group && options[group].every((option) => [...state.selectedValues, clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, group] : state.selectedGroups,
-				selectedValues: [...state.selectedValues, clickedOption.value]
+				selectedGroups: state.selectedGroups,
+				selectedValues: [clickedOption.value]
 			};
-		}
-		return {
-			selectedGroups: state.selectedGroups,
-			selectedValues: [clickedOption.value]
 		};
-	};
-	clearAllAction = () => ({
-		selectedGroups: [],
-		selectedValues: []
-	});
-	updateAction = (state, options) => ({
-		selectedGroups: state.selectedGroups,
-		selectedValues: state.selectedValues.filter((selectedValue) => {
-			if (!Array.isArray(options)) return Object.keys(options).some((group) => options[group].some((option) => option.value === selectedValue && !option.disabled));
-			return options.some((option) => option.value === selectedValue && !option.disabled);
-		})
-	});
-	resetAction = (selectedGroups, selectedValues) => ({
-		selectedGroups,
-		selectedValues
-	});
-});
+		clearAllAction = () => ({
+			selectedGroups: [],
+			selectedValues: []
+		});
+		updateAction = (state, options) => ({
+			selectedGroups: state.selectedGroups,
+			selectedValues: state.selectedValues.filter((selectedValue) => {
+				if (!Array.isArray(options)) return Object.keys(options).some((group) => options[group].some((option) => option.value === selectedValue && !option.disabled));
+				return options.some((option) => option.value === selectedValue && !option.disabled);
+			})
+		});
+		resetAction = (selectedGroups, selectedValues) => ({
+			selectedGroups,
+			selectedValues
+		});
+	}))();
+}
 
 //#endregion
 init_reducerFunctions();

package/dist/components/SelectInput/styles.css.js

@@ -8,115 +8,117 @@ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/SelectInput/styles.css.ts
 var selectInputStyle;
-var init_styles_css = __esmMin(() => {
-	init_dropdown_css_ts_vanilla();
-	init_styles_css_ts_vanilla();
-	init_styles_css_ts_vanilla$1();
-	init_selectBar_css_ts_vanilla();
-	init_styles_css_ts_vanilla$2();
-	selectInputStyle = {
-		container: "uv_uf6pag0",
-		helper: "uv_uf6pag1",
-		dropdown: "uv_igqisu1",
-		dropdownContainer: "uv_igqisu2",
-		dropdownGroup: "uv_igqisu3",
-		dropdownGroupSelectable: createRuntimeFn({
-			defaultClassName: "uv_igqisu4",
-			variantClassNames: { size: {
-				small: "uv_igqisu5",
-				large: "uv_igqisu6",
-				medium: "uv_igqisu7"
-			} },
-			defaultVariants: { size: "large" },
-			compoundVariants: []
-		}),
-		dropdownGroupWrapper: "uv_igqisu9",
-		dropdownSection: "uv_igqisu8",
-		emptyStateGroupStyle: "uv_igqisua",
-		dropdownItem: createRuntimeFn({
-			defaultClassName: "uv_igqisuc uv_igqisub uv_igqisua",
-			variantClassNames: {
-				selected: { true: "uv_igqisud" },
-				size: {
-					large: "uv_igqisue",
-					medium: "uv_igqisuf",
-					small: "uv_igqisug"
+function init_styles_css() {
+	return (init_styles_css = __esmMin(() => {
+		/* @__PURE__ */ init_dropdown_css_ts_vanilla();
+		/* @__PURE__ */ init_styles_css_ts_vanilla();
+		/* @__PURE__ */ init_styles_css_ts_vanilla$1();
+		/* @__PURE__ */ init_selectBar_css_ts_vanilla();
+		/* @__PURE__ */ init_styles_css_ts_vanilla$2();
+		selectInputStyle = {
+			container: "uv_uf6pag0",
+			helper: "uv_uf6pag1",
+			dropdown: "uv_igqisu1",
+			dropdownContainer: "uv_igqisu2",
+			dropdownGroup: "uv_igqisu3",
+			dropdownGroupSelectable: createRuntimeFn({
+				defaultClassName: "uv_igqisu4",
+				variantClassNames: { size: {
+					small: "uv_igqisu5",
+					large: "uv_igqisu6",
+					medium: "uv_igqisu7"
+				} },
+				defaultVariants: { size: "large" },
+				compoundVariants: []
+			}),
+			dropdownGroupWrapper: "uv_igqisu9",
+			dropdownSection: "uv_igqisu8",
+			emptyStateGroupStyle: "uv_igqisua",
+			dropdownItem: createRuntimeFn({
+				defaultClassName: "uv_igqisuc uv_igqisub uv_igqisua",
+				variantClassNames: {
+					selected: { true: "uv_igqisud" },
+					size: {
+						large: "uv_igqisue",
+						medium: "uv_igqisuf",
+						small: "uv_igqisug"
+					},
+					disabled: { true: "uv_igqisuh" }
 				},
-				disabled: { true: "uv_igqisuh" }
-			},
-			defaultVariants: {
-				disabled: false,
-				selected: false,
-				size: "large"
-			},
-			compoundVariants: []
-		}),
-		dropdownItemBase: "uv_igqisub uv_igqisua",
-		footer: "uv_igqisui",
-		dropdownCheckbox: "uv_igqisuk uv_igqisuj",
-		dropdownCheckboxGroup: "uv_igqisul uv_igqisuj",
-		dropdownEmptyState: "uv_igqisum",
-		dropdownLoadMore: "uv_igqisun",
-		dropdownInfo: "uv_igqisuo",
-		dropdownInfoContainer: "uv_igqisuq",
-		dropdownInfoTextItem: "uv_igqisup",
-		comboboxCreate: "uv_igqisus uv_igqisub uv_igqisua",
-		selectbarState: {
-			large: "uv_r8qe42",
-			small: "uv_r8qe43"
-		},
-		placeholder: "uv_r8qe44",
-		selectBarBase: "uv_r8qe45",
-		selectBar: createRuntimeFn({
-			defaultClassName: "uv_r8qe46 uv_r8qe45",
-			variantClassNames: {
-				disabled: { true: "uv_r8qe47" },
-				dropdownVisible: { true: "uv_r8qe48" },
-				readOnly: { true: "uv_r8qe49" },
-				size: {
-					large: "uv_r8qe4a",
-					medium: "uv_r8qe4b",
-					small: "uv_r8qe4c"
+				defaultVariants: {
+					disabled: false,
+					selected: false,
+					size: "large"
 				},
-				state: {
-					danger: "uv_r8qe4d",
-					neutral: "uv_r8qe4e",
-					success: "uv_r8qe4f"
-				}
-			},
-			defaultVariants: {
-				disabled: false,
-				dropdownVisible: false,
-				readOnly: false,
-				size: "large",
-				state: "neutral"
+				compoundVariants: []
+			}),
+			dropdownItemBase: "uv_igqisub uv_igqisua",
+			footer: "uv_igqisui",
+			dropdownCheckbox: "uv_igqisuk uv_igqisuj",
+			dropdownCheckboxGroup: "uv_igqisul uv_igqisuj",
+			dropdownEmptyState: "uv_igqisum",
+			dropdownLoadMore: "uv_igqisun",
+			dropdownInfo: "uv_igqisuo",
+			dropdownInfoContainer: "uv_igqisuq",
+			dropdownInfoTextItem: "uv_igqisup",
+			comboboxCreate: "uv_igqisus uv_igqisub uv_igqisua",
+			selectbarState: {
+				large: "uv_r8qe42",
+				small: "uv_r8qe43"
 			},
-			compoundVariants: [
-				[{
-					dropdownVisible: true,
+			placeholder: "uv_r8qe44",
+			selectBarBase: "uv_r8qe45",
+			selectBar: createRuntimeFn({
+				defaultClassName: "uv_r8qe46 uv_r8qe45",
+				variantClassNames: {
+					disabled: { true: "uv_r8qe47" },
+					dropdownVisible: { true: "uv_r8qe48" },
+					readOnly: { true: "uv_r8qe49" },
+					size: {
+						large: "uv_r8qe4a",
+						medium: "uv_r8qe4b",
+						small: "uv_r8qe4c"
+					},
+					state: {
+						danger: "uv_r8qe4d",
+						neutral: "uv_r8qe4e",
+						success: "uv_r8qe4f"
+					}
+				},
+				defaultVariants: {
+					disabled: false,
+					dropdownVisible: false,
+					readOnly: false,
+					size: "large",
 					state: "neutral"
-				}, "uv_r8qe4g"],
-				[{
-					dropdownVisible: true,
-					state: "success"
-				}, "uv_r8qe4h"],
-				[{
-					dropdownVisible: true,
-					state: "danger"
-				}, "uv_r8qe4i"]
-			]
-		}),
-		selectBarTags: {
-			hidden: "uv_r8qe4k uv_r8qe4j",
-			visible: "uv_r8qe4l uv_r8qe4j"
-		},
-		selectedValues: "uv_r8qe4m",
-		plusTag: "uv_r8qe4n",
-		multiselectStack: "uv_r8qe4o",
-		searchBar: "uv_igqisur",
-		optionalInfoPadding: "uv_igqisut"
-	};
-});
+				},
+				compoundVariants: [
+					[{
+						dropdownVisible: true,
+						state: "neutral"
+					}, "uv_r8qe4g"],
+					[{
+						dropdownVisible: true,
+						state: "success"
+					}, "uv_r8qe4h"],
+					[{
+						dropdownVisible: true,
+						state: "danger"
+					}, "uv_r8qe4i"]
+				]
+			}),
+			selectBarTags: {
+				hidden: "uv_r8qe4k uv_r8qe4j",
+				visible: "uv_r8qe4l uv_r8qe4j"
+			},
+			selectedValues: "uv_r8qe4m",
+			plusTag: "uv_r8qe4n",
+			multiselectStack: "uv_r8qe4o",
+			searchBar: "uv_igqisur",
+			optionalInfoPadding: "uv_igqisut"
+		};
+	}))();
+}
 
 //#endregion
 init_styles_css();

package/dist/components/SelectInput/styles.css.ts.vanilla.js

@@ -1,7 +1,9 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
 
 //#region src/components/SelectInput/styles.css.ts.vanilla.css
-var init_styles_css_ts_vanilla = __esmMin(() => {});
+function init_styles_css_ts_vanilla() {
+	return (init_styles_css_ts_vanilla = __esmMin(() => {}))();
+}
 
 //#endregion
 init_styles_css_ts_vanilla();

package/dist/components/SelectableCard/IllustrationContainer.js

@@ -7,43 +7,45 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SelectableCard/IllustrationContainer.tsx
 var IllustrationContainer;
-var init_IllustrationContainer = __esmMin(() => {
-	init_Stack();
-	init_styles_css();
-	IllustrationContainer = ({ children: subChildren, productIcon, illustration }) => {
-		if (productIcon || illustration) {
-			const computedIllustration = isValidElement(illustration) ? cloneElement(illustration, { style: {
-				height: "220px",
-				width: "220px"
-			} }) : null;
-			return /* @__PURE__ */ jsxs(Stack, {
-				alignItems: "stretch",
-				direction: "row",
-				flex: 1,
-				justifyContent: "space-between",
-				width: "100%",
-				children: [
-					/* @__PURE__ */ jsx(Stack, {
-						className: selectableCardStyle.illustration,
-						children: subChildren
-					}),
-					/* @__PURE__ */ jsx(Stack, {
-						justifyContent: "center",
-						children: productIcon ? productIcon : null
-					}),
-					illustration ? /* @__PURE__ */ jsx("div", {
-						className: selectableCardStyle.div,
-						children: illustration ? /* @__PURE__ */ jsx("div", {
-							className: selectableCardStyle.image,
-							children: computedIllustration
+function init_IllustrationContainer() {
+	return (init_IllustrationContainer = __esmMin(() => {
+		init_Stack();
+		init_styles_css();
+		IllustrationContainer = ({ children: subChildren, productIcon, illustration }) => {
+			if (productIcon || illustration) {
+				const computedIllustration = isValidElement(illustration) ? cloneElement(illustration, { style: {
+					height: "220px",
+					width: "220px"
+				} }) : null;
+				return /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "stretch",
+					direction: "row",
+					flex: 1,
+					justifyContent: "space-between",
+					width: "100%",
+					children: [
+						/* @__PURE__ */ jsx(Stack, {
+							className: selectableCardStyle.illustration,
+							children: subChildren
+						}),
+						/* @__PURE__ */ jsx(Stack, {
+							justifyContent: "center",
+							children: productIcon ? productIcon : null
+						}),
+						illustration ? /* @__PURE__ */ jsx("div", {
+							className: selectableCardStyle.div,
+							children: illustration ? /* @__PURE__ */ jsx("div", {
+								className: selectableCardStyle.image,
+								children: computedIllustration
+							}) : null
 						}) : null
-					}) : null
-				]
-			});
-		}
-		return subChildren;
-	};
-});
+					]
+				});
+			}
+			return subChildren;
+		};
+	}))();
+}
 
 //#endregion
 init_IllustrationContainer();