@publicplan/kern-react-kit 1.3.1 → 1.3.3

package/dist/index.cjs

@@ -131,9 +131,9 @@ function _objectSpread2(e) {
 
 //#endregion
 //#region src/components/Accordion/Content.tsx
-const _excluded$95 = ["children", "className"];
+const _excluded$94 = ["children", "className"];
 const AccordionContent = (_ref) => {
-	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$95);
+	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$94);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-accordion__body", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -146,7 +146,7 @@ AccordionContent.displayName = "Accordion.Content";
 
 //#endregion
 //#region src/components/Accordion/Root.tsx
-const _excluded$94 = [
+const _excluded$93 = [
 	"className",
 	"children",
 	"isOpened",
@@ -154,7 +154,7 @@ const _excluded$94 = [
 	"totalItems"
 ];
 const AccordionRoot = (_ref) => {
-	let { className, children, isOpened, position = 0, totalItems = 0 } = _ref, rest = _objectWithoutProperties(_ref, _excluded$94);
+	let { className, children, isOpened, position = 0, totalItems = 0 } = _ref, rest = _objectWithoutProperties(_ref, _excluded$93);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", _objectSpread2(_objectSpread2(_objectSpread2({}, rest), {}, { className: cn("kern-accordion", className) }, isOpened ? { open: true } : {}), {}, { children: [position > 0 && totalItems > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "kern-sr-only",
 		children: `Item ${position} of ${totalItems}`
@@ -164,7 +164,7 @@ AccordionRoot.displayName = "Accordion.Root";
 
 //#endregion
 //#region src/components/Title/Title.tsx
-const _excluded$93 = [
+const _excluded$92 = [
 	"variant",
 	"textWrapper",
 	"title",
@@ -172,7 +172,7 @@ const _excluded$93 = [
 	"className"
 ];
 const Title = (_ref) => {
-	let { variant = "default", textWrapper = "h2", title, children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$93);
+	let { variant = "default", textWrapper = "h2", title, children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$92);
 	const Wrapper = textWrapper;
 	const titleClass = cn("kern-title", `kern-title--${variant}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, _objectSpread2(_objectSpread2({}, rest), {}, {
@@ -183,14 +183,14 @@ const Title = (_ref) => {
 
 //#endregion
 //#region src/components/Accordion/Group.tsx
-const _excluded$92 = [
+const _excluded$91 = [
 	"aria-label",
 	"className",
 	"title",
 	"children"
 ];
 const AccordionGroup = (_ref) => {
-	let { "aria-label": ariaLabel, className, title, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$92);
+	let { "aria-label": ariaLabel, className, title, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$91);
 	const totalItems = react.default.Children.count(children);
 	const isAccordionItem = (child) => {
 		if (!react.default.isValidElement(child)) return false;
@@ -210,9 +210,9 @@ AccordionGroup.displayName = "Accordion.Group";
 
 //#endregion
 //#region src/components/Accordion/Summary.tsx
-const _excluded$91 = ["title", "className"];
+const _excluded$90 = ["title", "className"];
 const AccordionSummary = (_ref) => {
-	let { title, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$91);
+	let { title, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$90);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-accordion__header", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title, _objectSpread2({}, title))
@@ -231,9 +231,9 @@ var Accordion_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/Alert/Body.tsx
-const _excluded$90 = ["children", "className"];
+const _excluded$89 = ["children", "className"];
 const AlertBody = (_ref) => {
-	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$90);
+	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$89);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-alert__body", className),
 		children
@@ -243,7 +243,7 @@ AlertBody.displayName = "Alert.Body";
 
 //#endregion
 //#region src/components/Icon/Icon.tsx
-const _excluded$89 = [
+const _excluded$88 = [
 	"name",
 	"aria-hidden",
 	"size",
@@ -251,7 +251,7 @@ const _excluded$89 = [
 	"className"
 ];
 const Icon = (_ref) => {
-	let { name = "home", "aria-hidden": ariaHidden = true, size = "default", role, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$89);
+	let { name = "home", "aria-hidden": ariaHidden = true, size = "default", role, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$88);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-icon", `kern-icon--${name}`, `kern-icon--${size}`, className),
 		"aria-hidden": ariaHidden,
@@ -268,14 +268,14 @@ function useAlertVariant() {
 
 //#endregion
 //#region src/components/Alert/Header.tsx
-const _excluded$88 = [
+const _excluded$87 = [
 	"hasIcon",
 	"icon",
 	"title",
 	"className"
 ];
 const AlertHeader = (_ref) => {
-	let { hasIcon = true, icon, title, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$88);
+	let { hasIcon = true, icon, title, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$87);
 	const variant = useAlertVariant();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-alert__header", className),
@@ -289,7 +289,7 @@ AlertHeader.displayName = "Alert.Header";
 
 //#endregion
 //#region src/components/Link/Link.tsx
-const _excluded$87 = [
+const _excluded$86 = [
 	"variant",
 	"icon",
 	"iconLeft",
@@ -299,21 +299,21 @@ const _excluded$87 = [
 	"isStretched",
 	"className"
 ];
-const getIcon$1 = (iconProps) => iconProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+const getIcon = (iconProps) => iconProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
 	name: iconProps.name,
 	size: iconProps.size
 }) : null;
 const Link = (_ref) => {
-	let { variant = "default", icon, iconLeft, title, target = "_self", children, isStretched, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$87);
+	let { variant = "default", icon, iconLeft, title, target = "_self", children, isStretched, className } = _ref, props = _objectWithoutProperties(_ref, _excluded$86);
 	const linkText = title !== null && title !== void 0 ? title : children;
 	const linkClass = cn(isStretched ? "kern-link--stretched" : "kern-link", variant === "small" && "kern-link--small", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", _objectSpread2(_objectSpread2({}, props), {}, {
 		className: linkClass,
 		target: (icon === null || icon === void 0 ? void 0 : icon.name) === "open-in-new" ? "_blank" : target,
 		children: [
-			iconLeft && getIcon$1(icon),
+			iconLeft && getIcon(icon),
 			linkText,
-			!iconLeft && getIcon$1(icon)
+			!iconLeft && getIcon(icon)
 		]
 	}));
 };
@@ -328,13 +328,13 @@ AlertLink.displayName = "Alert.Link";
 
 //#endregion
 //#region src/components/Alert/Root.tsx
-const _excluded$86 = [
+const _excluded$85 = [
 	"children",
 	"variant",
 	"className"
 ];
 const AlertRoot = (_ref) => {
-	let { children = null, variant, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$86);
+	let { children = null, variant, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$85);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertVariantContext.Provider, {
 		value: variant,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
@@ -357,9 +357,9 @@ var Alert_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/Card/Body.tsx
-const _excluded$85 = ["className", "children"];
+const _excluded$84 = ["className", "children"];
 const CardBody = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$85);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$84);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", _objectSpread2(_objectSpread2({ className: cn("kern-card__body", className) }, rest), {}, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		className: "kern-body",
 		children
@@ -369,9 +369,9 @@ CardBody.displayName = "Card.Body";
 
 //#endregion
 //#region src/components/Card/Container.tsx
-const _excluded$84 = ["className", "children"];
+const _excluded$83 = ["className", "children"];
 const CardContainer = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$84);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$83);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-card__container", className),
 		children
@@ -381,9 +381,9 @@ CardContainer.displayName = "Card.Container";
 
 //#endregion
 //#region src/components/Card/Footer.tsx
-const _excluded$83 = ["className", "children"];
+const _excluded$82 = ["className", "children"];
 const CardFooter = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$83);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$82);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-card__footer", className),
 		children
@@ -393,9 +393,9 @@ CardFooter.displayName = "Card.Footer";
 
 //#endregion
 //#region src/components/Card/Header.tsx
-const _excluded$82 = ["className", "children"];
+const _excluded$81 = ["className", "children"];
 const CardHeader = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$82);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$81);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-card__header", className),
 		children
@@ -405,7 +405,7 @@ CardHeader.displayName = "Card.Header";
 
 //#endregion
 //#region src/components/Card/Media.tsx
-const _excluded$81 = [
+const _excluded$80 = [
 	"src",
 	"alt",
 	"width",
@@ -413,7 +413,7 @@ const _excluded$81 = [
 	"className"
 ];
 const CardMedia = (_ref) => {
-	let { src, alt, width, height, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$81);
+	let { src, alt, width, height, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$80);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-card__media", className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
@@ -428,9 +428,9 @@ CardMedia.displayName = "Card.Media";
 
 //#endregion
 //#region src/components/Card/Preline.tsx
-const _excluded$80 = ["className", "children"];
+const _excluded$79 = ["className", "children"];
 const CardPreline = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$80);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$79);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-preline", className),
 		children
@@ -440,7 +440,7 @@ CardPreline.displayName = "Card.Preline";
 
 //#endregion
 //#region src/components/Card/Root.tsx
-const _excluded$79 = [
+const _excluded$78 = [
 	"className",
 	"style",
 	"children",
@@ -449,7 +449,7 @@ const _excluded$79 = [
 	"isCardHug"
 ];
 const CardRoot = (_ref) => {
-	let { className, style, children, active = false, size = "medium", isCardHug = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$79);
+	let { className, style, children, active = false, size = "medium", isCardHug = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$78);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("article", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-card", active && "kern-card--active", size && `kern-card--${size}`, isCardHug && ` kern-card--hug`, className),
 		style,
@@ -460,9 +460,9 @@ CardRoot.displayName = "Card.Root";
 
 //#endregion
 //#region src/components/Card/Subline.tsx
-const _excluded$78 = ["className", "children"];
+const _excluded$77 = ["className", "children"];
 const CardSubline = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$78);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$77);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-subline", className),
 		children
@@ -472,13 +472,13 @@ CardSubline.displayName = "Card.Subline";
 
 //#endregion
 //#region src/components/Card/Title.tsx
-const _excluded$77 = [
+const _excluded$76 = [
 	"className",
 	"children",
 	"textWrapper"
 ];
 const CardTitle = (_ref) => {
-	let { className, children, textWrapper = "h2" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$77);
+	let { className, children, textWrapper = "h2" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$76);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(textWrapper, _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-title", className),
 		children
@@ -502,13 +502,13 @@ var Card_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/DescriptionList/Heading.tsx
-const _excluded$76 = [
+const _excluded$75 = [
 	"title",
 	"children",
 	"className"
 ];
 const DescriptionListHeading = (_ref) => {
-	let { title, children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$76);
+	let { title, children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$75);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-description-list__heading", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Title, _objectSpread2({}, title)), children]
@@ -518,9 +518,9 @@ DescriptionListHeading.displayName = "DescriptionList.Heading";
 
 //#endregion
 //#region src/components/DescriptionList/Item.tsx
-const _excluded$75 = ["children", "className"];
+const _excluded$74 = ["children", "className"];
 const DescriptionListItem = (_ref) => {
-	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$75);
+	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$74);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn(`kern-description-list-item`, className),
 		children
@@ -530,9 +530,9 @@ DescriptionListItem.displayName = "DescriptionList.Item";
 
 //#endregion
 //#region src/components/DescriptionList/Key.tsx
-const _excluded$74 = ["children", "className"];
+const _excluded$73 = ["children", "className"];
 const DescriptionListKey = (_ref) => {
-	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$74);
+	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$73);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-description-list-item__key", className),
 		children
@@ -542,13 +542,13 @@ DescriptionListKey.displayName = "DescriptionList.Key";
 
 //#endregion
 //#region src/components/DescriptionList/Root.tsx
-const _excluded$73 = [
+const _excluded$72 = [
 	"variant",
 	"children",
 	"className"
 ];
 const DescriptionListRoot = (_ref) => {
-	let { variant = "row", children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$73);
+	let { variant = "row", children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$72);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-description-list", variant === "column" && "kern-description-list--col", className),
 		children
@@ -558,9 +558,9 @@ DescriptionListRoot.displayName = "DescriptionList.Root";
 
 //#endregion
 //#region src/components/DescriptionList/Value.tsx
-const _excluded$72 = ["children", "className"];
+const _excluded$71 = ["children", "className"];
 const DescriptionListValue = (_ref) => {
-	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$72);
+	let { children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$71);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-description-list-item__value", className),
 		children
@@ -580,20 +580,22 @@ var DescriptionList_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/Button/Button.tsx
-const _excluded$71 = [
+const _excluded$70 = [
 	"variant",
 	"isBlock",
 	"icon",
+	"iconSize",
 	"iconOnly",
 	"iconLeft",
 	"text",
 	"children",
 	"className"
+], _excluded2 = [
+	"href",
+	"target",
+	"disabled"
 ];
-const getIcon = (iconProps) => iconProps ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
-	name: iconProps.name,
-	size: iconProps.size
-}) : null;
+const isIconProps = (icon) => typeof icon === "object" && icon !== null && "name" in icon && !react.default.isValidElement(icon);
 const IconOnlyLabel = ({ labelText }) => {
 	if (!labelText) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -601,26 +603,80 @@ const IconOnlyLabel = ({ labelText }) => {
 		children: labelText.replace(/^./, (c) => c.toUpperCase())
 	});
 };
-const Button = (_ref) => {
-	let { variant = "primary", isBlock, icon, iconOnly, iconLeft, text, children, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$71);
+const Button = react.default.forwardRef((props, ref) => {
+	const { variant = "primary", isBlock, icon, iconSize = "default", iconOnly, iconLeft, text, children, className } = props, rest = _objectWithoutProperties(props, _excluded$70);
 	const classes = cn("kern-btn", isBlock && "kern-btn--block", `kern-btn--${variant}`, className);
-	const iconElement = getIcon(icon);
-	if (iconOnly) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({}, rest), {}, {
-		className: classes,
-		children: [iconElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyLabel, { labelText: text || (icon === null || icon === void 0 ? void 0 : icon.name) })]
-	}));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({}, rest), {}, {
-		className: classes,
-		children: [
+	let iconElement = null;
+	if (icon && (typeof icon === "object" && "name" in icon && icon.name.length > 0 || react.default.isValidElement(icon))) {
+		if (isIconProps(icon)) iconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+			name: icon.name,
+			size: icon.size
+		});
+		else if (react.default.isValidElement(icon)) iconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: cn("kern-icon", `kern-icon--${iconSize}`),
+			style: {
+				mask: "none",
+				WebkitMask: "none",
+				background: "none",
+				display: "inline-flex"
+			},
+			"aria-hidden": true,
+			children: icon
+		});
+	}
+	if ("as" in props && props.as === "a" && props.href) {
+		const _ref = rest, { href, target, disabled } = _ref, anchorRest = _objectWithoutProperties(_ref, _excluded2);
+		if (iconOnly) {
+			const labelText = text || (isIconProps(icon) ? icon.name : void 0);
+			const ariaDisabled = disabled ? {
+				"aria-disabled": true,
+				tabIndex: -1,
+				onClick: (e) => e.preventDefault(),
+				href: void 0
+			} : {};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", _objectSpread2(_objectSpread2(_objectSpread2({
+				ref,
+				href,
+				target,
+				className: classes
+			}, anchorRest), ariaDisabled), {}, { children: [iconElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyLabel, { labelText })] }));
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", _objectSpread2(_objectSpread2({
+			ref,
+			href,
+			target,
+			className: classes
+		}, anchorRest), {}, { children: [
 			iconLeft && iconElement,
-			text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "kern-label",
 				children: children || text
 			}),
 			!iconLeft && iconElement
-		]
-	}));
-};
+		] }));
+	}
+	const buttonRest = rest;
+	if (iconOnly) {
+		const labelText = text || (isIconProps(icon) ? icon.name : void 0);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({
+			ref,
+			type: "button",
+			className: classes
+		}, buttonRest), {}, { children: [iconElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconOnlyLabel, { labelText })] }));
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", _objectSpread2(_objectSpread2({
+		ref,
+		type: "button",
+		className: classes
+	}, buttonRest), {}, { children: [
+		iconLeft && iconElement,
+		text && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "kern-label",
+			children: children || text
+		}),
+		!iconLeft && iconElement
+	] }));
+});
 Button.isInteractive = true;
 
 //#endregion
@@ -634,9 +690,9 @@ const useDialogContext = () => {
 
 //#endregion
 //#region src/components/Dialog/Button.tsx
-const _excluded$70 = ["onClick", "title"];
+const _excluded$69 = ["onClick", "title"];
 const DialogButton = (_ref) => {
-	let { onClick, title } = _ref, props = _objectWithoutProperties(_ref, _excluded$70);
+	let { onClick, title } = _ref, props = _objectWithoutProperties(_ref, _excluded$69);
 	const { closeDialog } = useDialogContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, _objectSpread2(_objectSpread2({}, props), {}, {
 		text: title,
@@ -650,9 +706,9 @@ DialogButton.displayName = "Dialog.Button";
 
 //#endregion
 //#region src/components/Dialog/Content.tsx
-const _excluded$69 = ["className", "children"];
+const _excluded$68 = ["className", "children"];
 const DialogContent = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$69);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$68);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", _objectSpread2(_objectSpread2({ className: cn("kern-dialog__body", className) }, rest), {}, { children: typeof children === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 		className: "kern-body",
 		children
@@ -662,9 +718,9 @@ DialogContent.displayName = "Dialog.Content";
 
 //#endregion
 //#region src/components/Dialog/Footer.tsx
-const _excluded$68 = ["className", "children"];
+const _excluded$67 = ["className", "children"];
 const DialogFooter = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$68);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$67);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-dialog__footer", className),
 		children
@@ -674,14 +730,14 @@ DialogFooter.displayName = "Dialog.Footer";
 
 //#endregion
 //#region src/components/Dialog/Header.tsx
-const _excluded$67 = [
+const _excluded$66 = [
 	"dialogTitle",
 	"hasCloseButton",
 	"aria-label",
 	"className"
 ];
 const DialogHeader = (_ref) => {
-	let { dialogTitle, hasCloseButton = true, "aria-label": ariaLabel = "Schließen", className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$67);
+	let { dialogTitle, hasCloseButton = true, "aria-label": ariaLabel = "Schließen", className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$66);
 	const { closeDialog, id } = useDialogContext();
 	const headerClass = cn("kern-dialog__header", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
@@ -709,9 +765,9 @@ DialogHeader.displayName = "Dialog.Header";
 
 //#endregion
 //#region src/components/Dialog/Modal.tsx
-const _excluded$66 = ["className", "children"];
+const _excluded$65 = ["className", "children"];
 const DialogModal = (_ref) => {
-	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$66);
+	let { className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$65);
 	const { dialogRef, closeDialog, isOpen, disableOverlayClose, id } = useDialogContext();
 	const handleOverlayClick = (e) => {
 		if (disableOverlayClose && e.target === dialogRef.current) e.preventDefault();
@@ -764,13 +820,13 @@ DialogModal.displayName = "Dialog.Modal";
 
 //#endregion
 //#region src/components/Dialog/Root.tsx
-const _excluded$65 = [
+const _excluded$64 = [
 	"disableOverlayClose",
 	"children",
 	"id"
 ];
 const DialogRoot = (_ref) => {
-	let { disableOverlayClose = false, children, id } = _ref, rest = _objectWithoutProperties(_ref, _excluded$65);
+	let { disableOverlayClose = false, children, id } = _ref, rest = _objectWithoutProperties(_ref, _excluded$64);
 	const [isOpen, setIsOpen] = (0, react.useState)(false);
 	const dialogRef = (0, react.useRef)(null);
 	const openDialog = () => {
@@ -857,13 +913,13 @@ FieldsetContent.displayName = "Fieldset.Content";
 
 //#endregion
 //#region src/components/Fieldset/Error.tsx
-const _excluded$64 = [
+const _excluded$63 = [
 	"children",
 	"className",
 	"id"
 ];
 const FieldsetError = (_ref) => {
-	let { children, className, id } = _ref, rest = _objectWithoutProperties(_ref, _excluded$64);
+	let { children, className, id } = _ref, rest = _objectWithoutProperties(_ref, _excluded$63);
 	const errorId = id || `error-${Math.random().toString(36).substr(2, 9)}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn(`kern-error`, className),
@@ -882,13 +938,13 @@ FieldsetError.displayName = "Fieldset.Error";
 
 //#endregion
 //#region src/components/Fieldset/Hint.tsx
-const _excluded$63 = [
+const _excluded$62 = [
 	"children",
 	"className",
 	"id"
 ];
 const FieldsetHint = (_ref) => {
-	let { children, className, id } = _ref, rest = _objectWithoutProperties(_ref, _excluded$63);
+	let { children, className, id } = _ref, rest = _objectWithoutProperties(_ref, _excluded$62);
 	const hintId = id || `hint-${Math.random().toString(36).substr(2, 9)}`;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn(`kern-hint`, className),
@@ -900,9 +956,9 @@ FieldsetHint.displayName = "Fieldset.Hint";
 
 //#endregion
 //#region src/components/Fieldset/Legend.tsx
-const _excluded$62 = ["children", "hasOptionalLabel"];
+const _excluded$61 = ["children", "hasOptionalLabel"];
 const FieldsetLegend = (_ref) => {
-	let { children, hasOptionalLabel } = _ref, rest = _objectWithoutProperties(_ref, _excluded$62);
+	let { children, hasOptionalLabel } = _ref, rest = _objectWithoutProperties(_ref, _excluded$61);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("legend", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn(`kern-label`, rest.className),
 		children: [children, hasOptionalLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -915,9 +971,9 @@ FieldsetLegend.displayName = "Fieldset.Legend";
 
 //#endregion
 //#region src/components/Input/Primitives/Checkbox/CheckboxInput.tsx
-const _excluded$61 = ["erroneous", "required"];
+const _excluded$60 = ["erroneous", "required"];
 const CheckboxInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$61);
+	let { erroneous = false, required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$60);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		type: "checkbox",
@@ -928,13 +984,13 @@ const CheckboxInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Email/EmailInput.tsx
-const _excluded$60 = [
+const _excluded$59 = [
 	"erroneous",
 	"autoComplete",
 	"required"
 ];
 const EmailInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, autoComplete = "email", required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$60);
+	let { erroneous = false, autoComplete = "email", required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$59);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		required,
@@ -946,9 +1002,9 @@ const EmailInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Error.tsx
-const _excluded$59 = ["className", "message"];
+const _excluded$58 = ["className", "message"];
 const InputError = (_ref) => {
-	let { className, message } = _ref, props = _objectWithoutProperties(_ref, _excluded$59);
+	let { className, message } = _ref, props = _objectWithoutProperties(_ref, _excluded$58);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", _objectSpread2(_objectSpread2({
 		className: cn("kern-error", className),
 		role: "alert"
@@ -960,14 +1016,14 @@ const InputError = (_ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/File/FileInput.tsx
-const _excluded$58 = [
+const _excluded$57 = [
 	"supportedFormats",
 	"erroneous",
 	"required"
 ];
 const FileInput$1 = (0, react.forwardRef)((_ref, ref) => {
 	var _rest$accept;
-	let { supportedFormats = [], erroneous = false, required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$58);
+	let { supportedFormats = [], erroneous = false, required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$57);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		type: "file",
@@ -979,15 +1035,15 @@ const FileInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Hint.tsx
-const _excluded$57 = ["className", "children"];
+const _excluded$56 = ["className", "children"];
 const Hint = (_ref) => {
-	let { className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$57);
+	let { className, children } = _ref, props = _objectWithoutProperties(_ref, _excluded$56);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({ className: cn("kern-hint", className) }, props), {}, { children }));
 };
 
 //#endregion
 //#region src/components/Label/Label.tsx
-const _excluded$56 = [
+const _excluded$55 = [
 	"variant",
 	"textWrapper",
 	"className",
@@ -995,7 +1051,7 @@ const _excluded$56 = [
 	"text"
 ];
 const Label = (_ref) => {
-	let { variant = "default", textWrapper = "label", className, children, text } = _ref, rest = _objectWithoutProperties(_ref, _excluded$56);
+	let { variant = "default", textWrapper = "label", className, children, text } = _ref, rest = _objectWithoutProperties(_ref, _excluded$55);
 	const Wrapper = textWrapper;
 	const labelClass = cn("kern-label", variant ? `kern-label--${variant}` : "", className, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, _objectSpread2(_objectSpread2({ className: labelClass }, rest), {}, { children: text || children }));
@@ -1003,9 +1059,9 @@ const Label = (_ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Label.tsx
-const _excluded$55 = ["children", "isOptional"];
+const _excluded$54 = ["children", "isOptional"];
 const Label$1 = (_ref) => {
-	let { children, isOptional } = _ref, props = _objectWithoutProperties(_ref, _excluded$55);
+	let { children, isOptional } = _ref, props = _objectWithoutProperties(_ref, _excluded$54);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Label, _objectSpread2(_objectSpread2({ textWrapper: "label" }, props), {}, { children: [children, isOptional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: "kern-label__optional",
 		children: "– Optional"
@@ -1014,13 +1070,13 @@ const Label$1 = (_ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Password/PasswordInput.tsx
-const _excluded$54 = [
+const _excluded$53 = [
 	"erroneous",
 	"required",
 	"autoComplete"
 ];
 const PasswordInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required, autoComplete = "password" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$54);
+	let { erroneous = false, required, autoComplete = "password" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$53);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		type: "password",
@@ -1032,13 +1088,13 @@ const PasswordInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Radio/RadioInput.tsx
-const _excluded$53 = [
+const _excluded$52 = [
 	"erroneous",
 	"required",
 	"autoComplete"
 ];
 const RadioInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required, autoComplete } = _ref, rest = _objectWithoutProperties(_ref, _excluded$53);
+	let { erroneous = false, required, autoComplete } = _ref, rest = _objectWithoutProperties(_ref, _excluded$52);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		type: "radio",
@@ -1050,22 +1106,22 @@ const RadioInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Root.tsx
-const _excluded$52 = ["className", "erroneous"];
+const _excluded$51 = ["className", "erroneous"];
 const Root = (_ref) => {
-	let { className, erroneous } = _ref, props = _objectWithoutProperties(_ref, _excluded$52);
+	let { className, erroneous } = _ref, props = _objectWithoutProperties(_ref, _excluded$51);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2({ className: cn("kern-form-input", erroneous && "kern-form-input--error", className) }, props));
 };
 
 //#endregion
 //#region src/components/Input/Primitives/Select/SelectInput.tsx
-const _excluded$51 = [
+const _excluded$50 = [
 	"erroneous",
 	"required",
 	"autoComplete",
 	"options"
 ];
 const SelectInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required, autoComplete = "", options = [] } = _ref, rest = _objectWithoutProperties(_ref, _excluded$51);
+	let { erroneous = false, required, autoComplete = "", options = [] } = _ref, rest = _objectWithoutProperties(_ref, _excluded$50);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "kern-form-input__select-wrapper",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", _objectSpread2(_objectSpread2({}, rest), {}, {
@@ -1083,9 +1139,9 @@ const SelectInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Tel/TelInput.tsx
-const _excluded$50 = ["erroneous", "required"];
+const _excluded$49 = ["erroneous", "required"];
 const TelInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$50);
+	let { erroneous = false, required } = _ref, rest = _objectWithoutProperties(_ref, _excluded$49);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		required,
@@ -1098,13 +1154,13 @@ const TelInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Text/TextInput.tsx
-const _excluded$49 = [
+const _excluded$48 = [
 	"erroneous",
 	"required",
 	"autoComplete"
 ];
 const TextInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required, autoComplete } = _ref, rest = _objectWithoutProperties(_ref, _excluded$49);
+	let { erroneous = false, required, autoComplete } = _ref, rest = _objectWithoutProperties(_ref, _excluded$48);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		type: "text",
@@ -1116,13 +1172,13 @@ const TextInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Textarea/TextareaInput.tsx
-const _excluded$48 = [
+const _excluded$47 = [
 	"erroneous",
 	"required",
 	"autoComplete"
 ];
 const TextareaInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required, autoComplete } = _ref, rest = _objectWithoutProperties(_ref, _excluded$48);
+	let { erroneous = false, required, autoComplete } = _ref, rest = _objectWithoutProperties(_ref, _excluded$47);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", _objectSpread2(_objectSpread2({}, rest), {}, {
 		ref,
 		required,
@@ -1133,13 +1189,13 @@ const TextareaInput$1 = (0, react.forwardRef)((_ref, ref) => {
 
 //#endregion
 //#region src/components/Input/Primitives/Url/UrlInput.tsx
-const _excluded$47 = [
+const _excluded$46 = [
 	"erroneous",
 	"required",
 	"autoComplete"
 ];
 const UrlInput$1 = (0, react.forwardRef)((_ref, ref) => {
-	let { erroneous = false, required, autoComplete = "url" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$47);
+	let { erroneous = false, required, autoComplete = "url" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$46);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", _objectSpread2(_objectSpread2({}, rest), {}, {
 		required,
 		autoComplete,
@@ -1171,7 +1227,7 @@ var Primitives_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/Input/Checkbox/index.tsx
-const _excluded$46 = [
+const _excluded$45 = [
 	"id",
 	"error",
 	"disabled",
@@ -1181,7 +1237,7 @@ const _excluded$46 = [
 	"style"
 ];
 const CheckboxInput = (_ref) => {
-	let { id, error = false, disabled = false, hasOptionalLabel = false, label, className, style } = _ref, rest = _objectWithoutProperties(_ref, _excluded$46);
+	let { id, error = false, disabled = false, hasOptionalLabel = false, label, className, style } = _ref, rest = _objectWithoutProperties(_ref, _excluded$45);
 	const isErrorString = typeof error === "string";
 	const errorId = `${id}-error`;
 	const describedBy = rest["aria-describedby"] ? [rest["aria-describedby"]] : [];
@@ -1228,7 +1284,6 @@ const FieldsetRoot = ({ children, id, className, style, error = false }) => {
 		className: cn(`kern-fieldset`, error && "kern-fieldset--error", className),
 		style,
 		id,
-		role: "group",
 		"aria-describedby": hintText,
 		children
 	});
@@ -1247,7 +1302,7 @@ var Fieldset_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/Grid/Column.tsx
-const _excluded$45 = [
+const _excluded$44 = [
 	"children",
 	"breakpoint",
 	"width",
@@ -1257,7 +1312,7 @@ const _excluded$45 = [
 	"className"
 ];
 const GridColumn = (_ref) => {
-	let { children, breakpoint, width, isOffset, offsetWidth, alignItem, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$45);
+	let { children, breakpoint, width, isOffset, offsetWidth, alignItem, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$44);
 	const classes = cn(...[
 		isOffset && offsetWidth && breakpoint && width ? `kern-col-${width + offsetWidth} kern-col-${breakpoint}-${width} kern-col-${breakpoint}-offset-${offsetWidth}` : breakpoint && width ? `kern-col-${breakpoint}-${width}` : width ? `kern-col-${width}` : "kern-col",
 		alignItem ? `kern-align-self-${alignItem}` : "",
@@ -1272,13 +1327,13 @@ GridColumn.displayName = "Grid.Column";
 
 //#endregion
 //#region src/components/Grid/Root.tsx
-const _excluded$44 = [
+const _excluded$43 = [
 	"type",
 	"className",
 	"children"
 ];
 const GridRoot = (_ref) => {
-	let { type, className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$44);
+	let { type, className, children } = _ref, rest = _objectWithoutProperties(_ref, _excluded$43);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn(type ? `kern-container-${type}` : "kern-container", className),
 		children
@@ -1288,14 +1343,14 @@ GridRoot.displayName = "Grid.Root";
 
 //#endregion
 //#region src/components/Grid/Row.tsx
-const _excluded$43 = [
+const _excluded$42 = [
 	"children",
 	"alignItems",
 	"horizontalAlignment",
 	"className"
 ];
 const GridRow = (_ref) => {
-	let { children, alignItems, horizontalAlignment, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$43);
+	let { children, alignItems, horizontalAlignment, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$42);
 	const rowClasses = cn("kern-row", alignItems && `kern-align-items-${alignItems}`, horizontalAlignment && `kern-justify-content-${horizontalAlignment}`, className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: rowClasses,
@@ -1314,16 +1369,17 @@ var Grid_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/Lists/Root.tsx
-const _excluded$42 = [
+const _excluded$41 = [
 	"children",
 	"className",
 	"size",
-	"type"
+	"type",
+	"horizontal"
 ];
 const ListsRoot = (_ref) => {
-	let { children, className, size = "default", type = "bullet" } = _ref, rest = _objectWithoutProperties(_ref, _excluded$42);
+	let { children, className, size = "default", type = "bullet", horizontal = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$41);
 	const Component = type === "number" ? "ol" : "ul";
-	const listClasses = cn("kern-list", size !== "default" && `kern-list--${size}`, type && `kern-list--${type}`, className);
+	const listClasses = cn("kern-list", size !== "default" && `kern-list--${size}`, type && `kern-list--${type}`, horizontal && "kern-list--horizontal", className);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: listClasses,
 		children
@@ -1342,13 +1398,13 @@ ListsItem.displayName = "Lists.Item";
 
 //#endregion
 //#region src/components/Lists/Bullet.tsx
-const _excluded$41 = [
+const _excluded$40 = [
 	"title",
 	"items",
 	"className"
 ];
 const ListsBullet = (_ref) => {
-	let { title, items, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$41);
+	let { title, items, className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$40);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn(className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1364,14 +1420,14 @@ ListsBullet.displayName = "Lists.Bullet";
 
 //#endregion
 //#region src/components/Lists/Number.tsx
-const _excluded$40 = [
+const _excluded$39 = [
 	"children",
 	"className",
 	"size",
 	"type"
 ];
 const ListsNumber = (_ref) => {
-	let { children, className, size = "default", type } = _ref, rest = _objectWithoutProperties(_ref, _excluded$40);
+	let { children, className, size = "default", type } = _ref, rest = _objectWithoutProperties(_ref, _excluded$39);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", _objectSpread2(_objectSpread2({}, rest), {}, {
 		className: cn("kern-list", size && `kern-list--${size}`, type && `kern-list--${type}`, className),
 		children
@@ -1390,7 +1446,7 @@ var Lists_exports = /* @__PURE__ */ __export({
 
 //#endregion
 //#region src/components/Progress/Root.tsx
-const _excluded$39 = [
+const _excluded$38 = [
 	"value",
 	"max",
 	"className",
@@ -1404,7 +1460,7 @@ const useProgressContext = () => {
 	return context;
 };
 const ProgressRoot = (_ref) => {
-	let { value = 0, max = 100, className, children, progressId: propProgressId } = _ref, rest = _objectWithoutProperties(_ref, _excluded$39);
+	let { value = 0, max = 100, className, children, progressId: propProgressId } = _ref, rest = _objectWithoutProperties(_ref, _excluded$38);
 	const percentage = Math.round(value / max * 100);
 	const progressId = react.default.useMemo(() => propProgressId || `progress-${Math.random().toString(36).slice(2, 11)}`, [propProgressId]);
 	const contextValue = {
@@ -1425,39 +1481,19 @@ ProgressRoot.displayName = "Progress.Root";
 
 //#endregion
 //#region src/components/Progress/Bar.tsx
-const _excluded$38 = ["className", "aria-label"];
+const _excluded$37 = ["className"];
 const ProgressBar = (_ref) => {
-	let { className, "aria-label": ariaLabel } = _ref, rest = _objectWithoutProperties(_ref, _excluded$38);
+	let { className } = _ref, rest = _objectWithoutProperties(_ref, _excluded$37);
 	const { value, max, progressId } = useProgressContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("progress", _objectSpread2(_objectSpread2({}, rest), {}, {
 		id: progressId,
+		className,
 		value,
-		"aria-label": ariaLabel || `Progress: ${value.toString()}%`,
-		max,
-		className
+		max
 	}));
 };
 ProgressBar.displayName = "Progress.Bar";
 
-//#endregion
-//#region src/components/Progress/Cancel.tsx
-const _excluded$37 = ["children", "onCancel"];
-const ProgressCancel = (_ref) => {
-	let { children = "Abbrechen", onCancel } = _ref, rest = _objectWithoutProperties(_ref, _excluded$37);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, _objectSpread2(_objectSpread2({}, rest), {}, {
-		variant: "tertiary",
-		text: typeof children === "string" ? children : void 0,
-		icon: {
-			name: "close",
-			size: "small"
-		},
-		iconLeft: true,
-		onClick: onCancel,
-		children: typeof children !== "string" ? children : void 0
-	}));
-};
-ProgressCancel.displayName = "Progress.Cancel";
-
 //#endregion
 //#region src/components/Progress/Header.tsx
 const ProgressHeader = ({ className, style, children }) => {
@@ -1488,27 +1524,12 @@ const ProgressLabel = (_ref) => {
 };
 ProgressLabel.displayName = "Progress.Label";
 
-//#endregion
-//#region src/components/Progress/Percentage.tsx
-const ProgressPercentage = ({ className, style, formatter }) => {
-	const { percentage } = useProgressContext();
-	const displayText = formatter ? formatter(percentage) : `${percentage}%`;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: cn("kern-body--small", className),
-		style: _objectSpread2({ color: "var(--kern-color-layout-text-muted, #404565)" }, style),
-		children: displayText
-	});
-};
-ProgressPercentage.displayName = "Progress.Percentage";
-
 //#endregion
 //#region src/components/Progress/index.ts
 var Progress_exports = /* @__PURE__ */ __export({
 	Bar: () => ProgressBar,
-	Cancel: () => ProgressCancel,
 	Header: () => ProgressHeader,
 	Label: () => ProgressLabel,
-	Percentage: () => ProgressPercentage,
 	Root: () => ProgressRoot
 });
 
@@ -1942,23 +1963,39 @@ const _excluded$18 = [
 	"variant",
 	"className",
 	"icon",
+	"iconSize",
 	"showIcon"
 ];
 const Badge = (_ref) => {
-	let { title, variant, className, icon, showIcon = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$18);
+	let { title, variant, className, icon, iconSize = "default", showIcon = false } = _ref, rest = _objectWithoutProperties(_ref, _excluded$18);
+	const customIconElement = icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: cn("kern-icon", `kern-icon--${iconSize}`),
+		style: {
+			mask: "none",
+			WebkitMask: "none",
+			background: "none",
+			display: "inline-flex"
+		},
+		"aria-hidden": true,
+		children: icon
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", _objectSpread2(_objectSpread2({}, rest), {}, {
 		role: "status",
 		className: cn(`kern-badge kern-badge--${variant}`, className),
-		children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, _objectSpread2(_objectSpread2({}, icon), {}, {
-			"aria-hidden": true,
-			name: variant
-		})), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "kern-label kern-label-small",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "kern-label kern-sr-only",
-				children: variant.replace(/^./, (c) => c.toUpperCase())
-			}), title]
-		})]
+		children: [
+			customIconElement,
+			!icon && showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				"aria-hidden": true,
+				name: variant
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "kern-label kern-label-small",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "kern-label kern-sr-only",
+					children: variant.replace(/^./, (c) => c.toUpperCase())
+				}), title]
+			})
+		]
 	}));
 };
 
@@ -2509,6 +2546,16 @@ const Kopfzeile = (_ref) => {
 	})), customStyle] });
 };
 
+//#endregion
+//#region src/components/LinkButton/LinkButton.tsx
+const LinkButton = (props) => {
+	if (!props.href) {
+		console.error("href ist für LinkButton erforderlich");
+		return null;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, _objectSpread2({ as: "a" }, props));
+};
+
 //#endregion
 //#region src/components/Loader/Loader.tsx
 const _excluded$3 = [
@@ -2675,6 +2722,7 @@ exports.InputPrimitive = InputPrimitive;
 exports.Kopfzeile = Kopfzeile;
 exports.Label = Label;
 exports.Link = Link;
+exports.LinkButton = LinkButton;
 exports.Lists = Lists;
 exports.Loader = Loader;
 exports.NumberInput = NumberInput;