@povio/ui 3.3.0-rc.3 → 3.3.0

package/README.md

@@ -8,7 +8,21 @@ UI Components that match Povio's Atlas Design System.
 
 ## Versioning
 
-Major and minor version will correspond to the Atlas version (v2.1.0 corresponds Atlas 2.1) and patch versions are fixes/updates within that Atlas version.
+`^2.1` still corresponds to Atlas 2.1. All versions after that currently target Atlas 2.2 and follow semantic versioning — breaking changes bump the major version.
+
+## Publishing
+
+### Stable release
+
+Create a GitHub release with a tag matching `v*.*.*-ui`. This triggers the publish workflow and releases the package to NPM.
+
+Example: `v1.2.3-ui`
+
+### Release candidate
+
+Create and push a git tag matching `v*.*.*-rc.*-ui` (do not use a GitHub release for this). This publishes the package to NPM under the `next` dist-tag.
+
+Example: `v1.2.3-rc.1-ui`
 
 ## Requirements
 

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -5,16 +5,12 @@ import { MenuDesktop } from "../Menu/MenuDesktop.js";
 import { Typography } from "../text/Typography/Typography.js";
 import { Tooltip as Tooltip$1 } from "../overlays/Tooltip/Tooltip.js";
 import { LinkContext } from "../../config/link.context.js";
-import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Breadcrumb, Breadcrumbs, Button, Link } from "react-aria-components";
 //#region src/components/Breadcrumbs/Breadcrumbs.tsx
-var Breadcrumbs$1 = (t0) => {
-	const $ = c(58);
-	const { items, className, onAction, iconOnly: t1 } = t0;
-	const iconOnly = t1 === void 0 ? false : t1;
+var Breadcrumbs$1 = ({ items, className, onAction, iconOnly: iconOnly_0 = false }) => {
 	const breadcrumbsCva = UIOverrides.useCva("breadcrumbs.cva", breadcrumbsDefinition);
 	const breadcrumbItem = UIOverrides.useCva("breadcrumbs.itemCva", breadcrumbItemDefinition);
 	const breadcrumbSegmentCva = UIOverrides.useCva("breadcrumbs.segmentCva", breadcrumbSegmentDefinition);
@@ -22,61 +18,45 @@ var Breadcrumbs$1 = (t0) => {
 	const breadcrumbIconCva = UIOverrides.useCva("breadcrumbs.iconCva", breadcrumbIconDefinition);
 	const containerRef = useRef(null);
 	const [isOverflowing, setIsOverflowing] = useState(items.length <= 2 ? false : null);
-	let t2;
-	if ($[0] !== items.length) {
-		t2 = () => {
-			if (items.length <= 2) {
-				setIsOverflowing(false);
-				return;
-			}
-			const container = containerRef.current;
-			if (!container) return;
-			const resizeObserver = new ResizeObserver(() => {
-				setIsOverflowing(container.scrollWidth > container.clientWidth);
-			});
-			resizeObserver.observe(container);
-			return () => resizeObserver.disconnect();
-		};
-		$[0] = items.length;
-		$[1] = t2;
-	} else t2 = $[1];
-	let t3;
-	if ($[2] !== items) {
-		t3 = [items];
-		$[2] = items;
-		$[3] = t3;
-	} else t3 = $[3];
-	useLayoutEffect(t2, t3);
+	useLayoutEffect(() => {
+		if (items.length <= 2) {
+			setIsOverflowing(false);
+			return;
+		}
+		const container = containerRef.current;
+		if (!container) return;
+		const resizeObserver = new ResizeObserver(() => {
+			setIsOverflowing(container.scrollWidth > container.clientWidth);
+		});
+		resizeObserver.observe(container);
+		return () => resizeObserver.disconnect();
+	}, [items]);
 	const isReady = isOverflowing !== null;
 	const hiddenItems = items.length > 2 ? items.slice(1, -1) : [];
 	const firstItem = items[0];
 	const lastItem = items[items.length - 1];
 	const LinkComponent = LinkContext.useLinkContext()?.LinkComponent ?? Link;
-	let t4;
-	if ($[4] !== LinkComponent || $[5] !== breadcrumbIconCva || $[6] !== breadcrumbItem) {
-		t4 = (item, isCurrent, iconOnly_0) => /* @__PURE__ */ jsxs(LinkComponent, {
-			...item.link,
-			className: breadcrumbItem({ isCurrent }),
-			children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
-				className: breadcrumbIconCva({}),
-				"aria-label": item.label
-			}), !iconOnly_0 && /* @__PURE__ */ jsx(Typography, {
-				variant: "default",
-				size: "label-3",
-				children: item.label
-			})]
-		});
-		$[4] = LinkComponent;
-		$[5] = breadcrumbIconCva;
-		$[6] = breadcrumbItem;
-		$[7] = t4;
-	} else t4 = $[7];
-	const renderBreadcrumbLink = t4;
+	const renderBreadcrumbLink = (item, isCurrent, iconOnly) => /* @__PURE__ */ jsxs(LinkComponent, {
+		...item.link,
+		className: breadcrumbItem({ isCurrent }),
+		children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
+			className: breadcrumbIconCva({}),
+			"aria-label": item.label
+		}), !iconOnly && /* @__PURE__ */ jsx(Typography, {
+			variant: "default",
+			size: "label-3",
+			children: item.label
+		})]
+	});
 	if (isOverflowing === true && items.length > 2) {
-		const menuItems = hiddenItems.map(_temp);
+		const menuItems = hiddenItems.map((item_0) => ({
+			id: item_0.id,
+			label: item_0.label,
+			link: item_0.link
+		}));
 		const renderEllipsis = () => /* @__PURE__ */ jsx(MenuDesktop, {
 			trigger: /* @__PURE__ */ jsx(Tooltip$1, {
-				text: hiddenItems.map(_temp2).join(", "),
+				text: hiddenItems.map((i) => i.label).join(", "),
 				children: /* @__PURE__ */ jsx(Button, {
 					"aria-label": "Show hidden breadcrumbs",
 					className: breadcrumbItem({
@@ -93,171 +73,40 @@ var Breadcrumbs$1 = (t0) => {
 			items: menuItems,
 			onAction: onAction ? (key) => onAction(key) : void 0
 		});
-		let t5;
-		if ($[8] !== breadcrumbsCva || $[9] !== className) {
-			t5 = clsx(breadcrumbsCva({}), className);
-			$[8] = breadcrumbsCva;
-			$[9] = className;
-			$[10] = t5;
-		} else t5 = $[10];
-		const t6 = firstItem.id;
-		let t7;
-		if ($[11] !== breadcrumbSegmentCva) {
-			t7 = breadcrumbSegmentCva({});
-			$[11] = breadcrumbSegmentCva;
-			$[12] = t7;
-		} else t7 = $[12];
-		let t8;
-		if ($[13] !== firstItem || $[14] !== iconOnly || $[15] !== renderBreadcrumbLink) {
-			t8 = renderBreadcrumbLink(firstItem, false, iconOnly);
-			$[13] = firstItem;
-			$[14] = iconOnly;
-			$[15] = renderBreadcrumbLink;
-			$[16] = t8;
-		} else t8 = $[16];
-		let t9;
-		if ($[17] !== breadcrumbChevronCva) {
-			t9 = breadcrumbChevronCva({});
-			$[17] = breadcrumbChevronCva;
-			$[18] = t9;
-		} else t9 = $[18];
-		let t10;
-		if ($[19] !== t9) {
-			t10 = /* @__PURE__ */ jsx(ChevronRightIcon, { className: t9 });
-			$[19] = t9;
-			$[20] = t10;
-		} else t10 = $[20];
-		let t11;
-		if ($[21] !== firstItem.id || $[22] !== t10 || $[23] !== t7 || $[24] !== t8) {
-			t11 = /* @__PURE__ */ jsxs(Breadcrumb, {
-				id: t6,
-				className: t7,
-				children: [t8, t10]
-			});
-			$[21] = firstItem.id;
-			$[22] = t10;
-			$[23] = t7;
-			$[24] = t8;
-			$[25] = t11;
-		} else t11 = $[25];
-		let t12;
-		if ($[26] !== breadcrumbSegmentCva) {
-			t12 = breadcrumbSegmentCva({});
-			$[26] = breadcrumbSegmentCva;
-			$[27] = t12;
-		} else t12 = $[27];
-		const t13 = renderEllipsis();
-		let t14;
-		if ($[28] !== breadcrumbChevronCva) {
-			t14 = breadcrumbChevronCva({});
-			$[28] = breadcrumbChevronCva;
-			$[29] = t14;
-		} else t14 = $[29];
-		let t15;
-		if ($[30] !== t14) {
-			t15 = /* @__PURE__ */ jsx(ChevronRightIcon, { className: t14 });
-			$[30] = t14;
-			$[31] = t15;
-		} else t15 = $[31];
-		const t16 = lastItem.id;
-		let t17;
-		if ($[32] !== breadcrumbSegmentCva) {
-			t17 = breadcrumbSegmentCva({});
-			$[32] = breadcrumbSegmentCva;
-			$[33] = t17;
-		} else t17 = $[33];
-		let t18;
-		if ($[34] !== lastItem || $[35] !== renderBreadcrumbLink) {
-			t18 = renderBreadcrumbLink(lastItem, true);
-			$[34] = lastItem;
-			$[35] = renderBreadcrumbLink;
-			$[36] = t18;
-		} else t18 = $[36];
-		let t19;
-		if ($[37] !== lastItem.id || $[38] !== t17 || $[39] !== t18) {
-			t19 = /* @__PURE__ */ jsx(Breadcrumb, {
-				id: t16,
-				className: t17,
-				children: t18
-			});
-			$[37] = lastItem.id;
-			$[38] = t17;
-			$[39] = t18;
-			$[40] = t19;
-		} else t19 = $[40];
 		return /* @__PURE__ */ jsxs(Breadcrumbs, {
 			onAction,
-			className: t5,
+			className: clsx(breadcrumbsCva({}), className),
 			children: [
-				t11,
+				/* @__PURE__ */ jsxs(Breadcrumb, {
+					id: firstItem.id,
+					className: breadcrumbSegmentCva({}),
+					children: [renderBreadcrumbLink(firstItem, false, iconOnly_0), /* @__PURE__ */ jsx(ChevronRightIcon, { className: breadcrumbChevronCva({}) })]
+				}),
 				/* @__PURE__ */ jsxs(Breadcrumb, {
 					id: "ellipsis",
-					className: t12,
-					children: [t13, t15]
+					className: breadcrumbSegmentCva({}),
+					children: [renderEllipsis(), /* @__PURE__ */ jsx(ChevronRightIcon, { className: breadcrumbChevronCva({}) })]
 				}),
-				t19
+				/* @__PURE__ */ jsx(Breadcrumb, {
+					id: lastItem.id,
+					className: breadcrumbSegmentCva({}),
+					children: renderBreadcrumbLink(lastItem, true)
+				})
 			]
 		});
 	}
-	let t5;
-	if ($[41] !== breadcrumbsCva || $[42] !== className) {
-		t5 = clsx(breadcrumbsCva({}), className);
-		$[41] = breadcrumbsCva;
-		$[42] = className;
-		$[43] = t5;
-	} else t5 = $[43];
-	const t6 = isReady ? "visible" : "hidden";
-	let t7;
-	if ($[44] !== t6) {
-		t7 = { visibility: t6 };
-		$[44] = t6;
-		$[45] = t7;
-	} else t7 = $[45];
-	let t8;
-	if ($[46] !== breadcrumbChevronCva || $[47] !== breadcrumbSegmentCva || $[48] !== iconOnly || $[49] !== items[0] || $[50] !== renderBreadcrumbLink) {
-		t8 = (item_1) => /* @__PURE__ */ jsx(Breadcrumb, {
+	return /* @__PURE__ */ jsx(Breadcrumbs, {
+		ref: containerRef,
+		items,
+		onAction,
+		className: clsx(breadcrumbsCva({}), className),
+		style: { visibility: isReady ? "visible" : "hidden" },
+		children: (item_1) => /* @__PURE__ */ jsx(Breadcrumb, {
 			id: item_1.id,
 			className: breadcrumbSegmentCva({}),
-			children: (t9) => {
-				const { isCurrent: isCurrent_0 } = t9;
-				return /* @__PURE__ */ jsxs(Fragment, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: breadcrumbChevronCva({}) })] });
-			}
-		});
-		$[46] = breadcrumbChevronCva;
-		$[47] = breadcrumbSegmentCva;
-		$[48] = iconOnly;
-		$[49] = items[0];
-		$[50] = renderBreadcrumbLink;
-		$[51] = t8;
-	} else t8 = $[51];
-	let t9;
-	if ($[52] !== items || $[53] !== onAction || $[54] !== t5 || $[55] !== t7 || $[56] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Breadcrumbs, {
-			ref: containerRef,
-			items,
-			onAction,
-			className: t5,
-			style: t7,
-			children: t8
-		});
-		$[52] = items;
-		$[53] = onAction;
-		$[54] = t5;
-		$[55] = t7;
-		$[56] = t8;
-		$[57] = t9;
-	} else t9 = $[57];
-	return t9;
+			children: ({ isCurrent: isCurrent_0 }) => /* @__PURE__ */ jsxs(Fragment, { children: [renderBreadcrumbLink(item_1, isCurrent_0, iconOnly_0 && item_1 === items[0]), !isCurrent_0 && /* @__PURE__ */ jsx(ChevronRightIcon, { className: breadcrumbChevronCva({}) })] })
+		})
+	});
 };
-function _temp(item_0) {
-	return {
-		id: item_0.id,
-		label: item_0.label,
-		link: item_0.link
-	};
-}
-function _temp2(i) {
-	return i.label;
-}
 //#endregion
 export { Breadcrumbs$1 as Breadcrumbs };

package/dist/components/buttons/Button/button.cva.d.ts

@@ -92,7 +92,7 @@ export declare const buttonIconSizeDefinition: {
 export type ButtonIconSizeConfig = NonNullable<typeof buttonIconSizeDefinition.config>;
 export declare const buttonTypography: (props: {
     readonly width?: "fill" | "hug" | null | undefined;
-    readonly size?: "none" | "s" | "xs" | "m" | "l" | null | undefined;
+    readonly size?: "none" | "xs" | "s" | "m" | "l" | null | undefined;
     readonly color?: "error" | "primary" | "dual" | "secondary" | "success" | "warning" | null | undefined;
     readonly variant?: "text" | "contained" | "outlined" | "subtle" | "ghost" | null | undefined;
     readonly inverted?: boolean | null | undefined;

package/dist/components/buttons/InlineIconButton/InlineIconButton.js

@@ -1,40 +1,15 @@
 import { Button } from "../Button/Button.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/InlineIconButton/InlineIconButton.tsx
-var InlineIconButton = (t0) => {
-	const $ = c(8);
-	let label;
-	let props;
-	let t1;
-	if ($[0] !== t0) {
-		({label, size: t1, ...props} = t0);
-		$[0] = t0;
-		$[1] = label;
-		$[2] = props;
-		$[3] = t1;
-	} else {
-		label = $[1];
-		props = $[2];
-		t1 = $[3];
-	}
-	const size = t1 === void 0 ? "none" : t1;
-	let t2;
-	if ($[4] !== label || $[5] !== props || $[6] !== size) {
-		t2 = /* @__PURE__ */ jsx(Button, {
-			...props,
-			iconOnly: true,
-			variant: "text",
-			size,
-			width: "hug",
-			children: label
-		});
-		$[4] = label;
-		$[5] = props;
-		$[6] = size;
-		$[7] = t2;
-	} else t2 = $[7];
-	return t2;
+var InlineIconButton = ({ label, size = "none", ...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		iconOnly: true,
+		variant: "text",
+		size,
+		width: "hug",
+		children: label
+	});
 };
 //#endregion
 export { InlineIconButton };

package/dist/components/buttons/shared/ButtonContent.js

@@ -2,94 +2,36 @@ import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { typographyDefinition } from "../../text/Typography/typography.cva.js";
 import { buttonContentLabel } from "./buttonContent.cva.js";
 import { Loader } from "../../status/Loader/Loader.js";
-import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
 //#region src/components/buttons/shared/ButtonContent.tsx
-var ButtonContent = (t0) => {
-	const $ = c(21);
-	const { ref, content, isLoading, icon: Icon, iconClassName, hideText, iconPosition: t1, typography: typographyOverrides } = t0;
-	const iconPosition = t1 === void 0 ? "left" : t1;
+var ButtonContent = ({ ref, content, isLoading, icon: Icon, iconClassName, hideText, iconPosition = "left", typography: typographyOverrides }) => {
 	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
 	let iconOrLoader = null;
-	if (isLoading) {
-		let t2;
-		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-			t2 = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
-			$[0] = t2;
-		} else t2 = $[0];
-		iconOrLoader = t2;
-	} else if (Icon) if (isValidElement(Icon)) iconOrLoader = Icon;
-	else {
-		let t2;
-		if ($[1] !== iconClassName) {
-			t2 = clsx("shrink-0", iconClassName);
-			$[1] = iconClassName;
-			$[2] = t2;
-		} else t2 = $[2];
-		let t3;
-		if ($[3] !== Icon || $[4] !== t2) {
-			t3 = /* @__PURE__ */ jsx(Icon, { className: t2 });
-			$[3] = Icon;
-			$[4] = t2;
-			$[5] = t3;
-		} else t3 = $[5];
-		iconOrLoader = t3;
-	}
-	let t2;
-	let t3;
-	if ($[6] !== hideText || $[7] !== iconOrLoader || $[8] !== iconPosition || $[9] !== typographyCva || $[10] !== typographyOverrides) {
-		const resolvedTypography = {
-			size: "label-2",
-			variant: "prominent-1",
-			...typographyOverrides
-		};
-		t3 = iconOrLoader && iconPosition === "left" && iconOrLoader;
-		t2 = clsx(typographyCva({
-			...resolvedTypography,
-			sizeMobile: resolvedTypography.sizeMobile ?? resolvedTypography.size
-		}), buttonContentLabel({
-			iconPosition: iconOrLoader ? iconPosition : "none",
-			hideText: !!hideText
-		}));
-		$[6] = hideText;
-		$[7] = iconOrLoader;
-		$[8] = iconPosition;
-		$[9] = typographyCva;
-		$[10] = typographyOverrides;
-		$[11] = t2;
-		$[12] = t3;
-	} else {
-		t2 = $[11];
-		t3 = $[12];
-	}
-	let t4;
-	if ($[13] !== content || $[14] !== ref || $[15] !== t2) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			className: t2,
+	if (isLoading) iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
+	else if (Icon) if (isValidElement(Icon)) iconOrLoader = Icon;
+	else iconOrLoader = /* @__PURE__ */ jsx(Icon, { className: clsx("shrink-0", iconClassName) });
+	const resolvedTypography = {
+		size: "label-2",
+		variant: "prominent-1",
+		...typographyOverrides
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		iconOrLoader && iconPosition === "left" && iconOrLoader,
+		/* @__PURE__ */ jsx("span", {
+			className: clsx(typographyCva({
+				...resolvedTypography,
+				sizeMobile: resolvedTypography.sizeMobile ?? resolvedTypography.size
+			}), buttonContentLabel({
+				iconPosition: iconOrLoader ? iconPosition : "none",
+				hideText: !!hideText
+			})),
 			ref,
 			children: content
-		});
-		$[13] = content;
-		$[14] = ref;
-		$[15] = t2;
-		$[16] = t4;
-	} else t4 = $[16];
-	const t5 = iconOrLoader && iconPosition === "right" && iconOrLoader;
-	let t6;
-	if ($[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t3,
-			t4,
-			t5
-		] });
-		$[17] = t3;
-		$[18] = t4;
-		$[19] = t5;
-		$[20] = t6;
-	} else t6 = $[20];
-	return t6;
+		}),
+		iconOrLoader && iconPosition === "right" && iconOrLoader
+	] });
 };
 //#endregion
 export { ButtonContent };

package/dist/components/inputs/Checkbox/CheckboxCheckmark.js

@@ -2,38 +2,24 @@ import { CheckboxCheckmarkIcon } from "../../../assets/icons/CheckboxCheckmark.j
 import { CheckboxIndeterminateIcon } from "../../../assets/icons/CheckboxIndeterminate.js";
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { checkboxDefinition, checkboxIconDefinition } from "./checkbox.cva.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/Checkbox/CheckboxCheckmark.tsx
-var CheckboxCheckmark = (t0) => {
-	const $ = c(3);
-	const { variant, className, selectedIcon: t1, indeterminateIcon: t2, ...props } = t0;
-	const SelectedIcon = t1 === void 0 ? CheckboxCheckmarkIcon : t1;
-	const IndeterminateIcon = t2 === void 0 ? CheckboxIndeterminateIcon : t2;
+var CheckboxCheckmark = ({ variant, className, selectedIcon: SelectedIcon = CheckboxCheckmarkIcon, indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon, ...props }) => {
 	const checkboxCva = UIOverrides.useCva("checkbox.cva", checkboxDefinition);
 	const checkboxIconCva = UIOverrides.useCva("checkbox.iconCva", checkboxIconDefinition);
-	const t3 = checkboxCva({
-		variant,
-		...props,
-		className
-	});
-	const t4 = checkboxIconCva({
-		...props,
-		iconVariant: "indeterminate"
-	});
-	let t5;
-	if ($[0] !== IndeterminateIcon || $[1] !== t4) {
-		t5 = /* @__PURE__ */ jsx(IndeterminateIcon, { className: t4 });
-		$[0] = IndeterminateIcon;
-		$[1] = t4;
-		$[2] = t5;
-	} else t5 = $[2];
 	return /* @__PURE__ */ jsxs("div", {
-		className: t3,
+		className: checkboxCva({
+			variant,
+			...props,
+			className
+		}),
 		children: [/* @__PURE__ */ jsx(SelectedIcon, { className: checkboxIconCva({
 			...props,
 			iconVariant: "selected"
-		}) }), t5]
+		}) }), /* @__PURE__ */ jsx(IndeterminateIcon, { className: checkboxIconCva({
+			...props,
+			iconVariant: "indeterminate"
+		}) })]
 	});
 };
 //#endregion

package/dist/components/inputs/Checkbox/CheckboxGroup.d.ts

@@ -5,12 +5,16 @@ import { CheckboxVariantProps } from './checkbox.cva';
 import { FormFieldProps } from '../FormField/FormField';
 import { ControlProps } from '../shared/form.types';
 import { InputVariantProps } from '../shared/input.cva';
-interface CheckboxGroupBaseProps extends Omit<FormFieldProps, "variant">, CheckboxVariantProps, Omit<InputVariantProps, "variant">, Omit<AriaCheckboxGroupProps, "children" | "className" | "label"> {
+interface CheckboxGroupBaseProps extends Omit<FormFieldProps, "variant">, CheckboxVariantProps, Omit<InputVariantProps, "variant">, Omit<AriaCheckboxGroupProps, "children" | "className" | "defaultValue" | "label" | "onChange" | "value"> {
     ref?: Ref<HTMLDivElement>;
     options: {
         label: string | ReactElement;
         value: string;
     }[];
+    allValue?: string[] | null;
+    value?: string[] | null;
+    defaultValue?: string[] | null;
+    onChange?: (value: string[] | null) => void;
     isDirty?: boolean;
     inputClassName?: string;
     labelClassName?: string;