@vodafone_de/brix-components 7.0.18 → 7.0.19

package/dist/components/Button/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { B as ButtonAsLink, g as getButtonIcon } from "../../index-Dy21IAhD.js";
+import { B as ButtonAsLink, g as getButtonIcon } from "../../index-DSTYuyEd.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import { B as ButtonStyled } from "../../styled-DtUIJa88.js";
 const buttonFullWidth = "full";

package/dist/components/ButtonAsLink/index.js

@@ -1,9 +1,10 @@
 "use client";
 import "react/jsx-runtime";
-import { B } from "../../index-Dy21IAhD.js";
+import { B } from "../../index-DSTYuyEd.js";
 import "../../hooks/useLinkComponent/index.js";
 import "../../filterProps-CTn92eZw.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import "../../sanitizeLinkProps-D2Kkovy1.js";
 export {
   B as default
 };

package/dist/components/DemoBox/index.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import IconSnippet from "../IconSnippet/index.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
-import { g as getUid } from "../../index-Cy0Uf6Y5.js";
+import { g as getUid } from "../../index-DR3e19BE.js";
 import { D as DemoBoxStyled } from "../../styled-CW4e5Qa3.js";
 const heading = {
   component: "Heading",

package/dist/components/Dialog/index.js

@@ -58,7 +58,8 @@ const DialogButtonGroupStyled = styled(ButtonGroup).withConfig({
   componentId: "sc-z6nqyy-3"
 })({
   justifyContent: "flex-end",
-  padding: `0 ${getBorderWidth(borderWidthFocus)}`
+  padding: `0 ${getBorderWidth(borderWidthFocus)}`,
+  height: "auto"
 });
 const DialogChildrenContainerStyled = styled("div").withConfig({
   displayName: "DialogChildrenContainerStyled",
@@ -163,7 +164,7 @@ const Dialog = ({
       dismissable && /* @__PURE__ */ jsx(DialogIconButtonStyled, { label: "Schließen", iconName: "Close", appearance: "tertiary", bottomSpacing: spacingNone, onClick: onCloseIconButtonClick })
     ] }),
     /* @__PURE__ */ jsx(DialogChildrenContainerStyled, { children }),
-    /* @__PURE__ */ jsx(DialogButtonGroupStyled, { ...buttons, orientation: "horizontal", justifyHorizontal: "end", isReversed: true })
+    /* @__PURE__ */ jsx(DialogButtonGroupStyled, { ...buttons, orientation: "horizontal", justifyHorizontal: "end", isReversed: true, bottomSpacing: spacingNone })
   ] }) });
   return open ? createPortal(dialog, document.body) : null;
 };

package/dist/components/DiscoveryCard/index.js

@@ -6,7 +6,7 @@ import Body, { bodyAlignLeft, bodyAlignCenter } from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import Link from "../Link/index.js";
 import { P as Price, b as priceSizeSm, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-C8lpS44n.js";
-import { R as RichText } from "../../index-Cy0Uf6Y5.js";
+import { R as RichText } from "../../index-CVHmFLr5.js";
 import { a as fontWeightBold } from "../../FontWeight-C2pGs7aR.js";
 import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";

package/dist/components/IconSnippet/index.js

@@ -6,7 +6,7 @@ import { d as iconSizeLg, g as iconSize3xl, b as iconSizeSm } from "../../props-
 import "../../styled-RnVr222F.js";
 import InlineLink from "../InlineLink/index.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-Cy0Uf6Y5.js";
+import { R as RichText } from "../../index-CVHmFLr5.js";
 import { d as divTagName } from "../../tags-38kBhOn6.js";
 import { c as spacingSm, a as spacingMd, s as spacingNone, b as spacingXs } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";

package/dist/components/ImageHeader/index.js

@@ -5,10 +5,11 @@ import Button from "../Button/index.js";
 import Container from "../Container/index.js";
 import Heading from "../Heading/index.js";
 import { P as Price, b as priceSizeSm } from "../../index-C8lpS44n.js";
-import { g as getUid, R as RichText } from "../../index-Cy0Uf6Y5.js";
+import { R as RichText } from "../../index-CVHmFLr5.js";
 import { b as fontWeightLight } from "../../FontWeight-C2pGs7aR.js";
 import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { a as spacingMd, c as spacingSm, d as spacingXl, b as spacingXs, e as spacing2Xs, s as spacingNone } from "../../Spacing-BMQelJYr.js";
+import { g as getUid } from "../../index-DR3e19BE.js";
 import styled from "styled-components";
 import Badge from "../Badge/index.js";
 import ButtonGroup from "../ButtonGroup/index.js";

package/dist/components/InfoBanner/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { InfoBannerProps } from './props';
+declare const InfoBanner: FC<InfoBannerProps>;
+export default InfoBanner;
+export * from './props';

package/dist/components/InfoBanner/index.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Button from "../Button/index.js";
+import Heading from "../Heading/index.js";
+import Icon from "../Icon/index.js";
+import { d as iconSizeLg } from "../../props-7dcsjRUx.js";
+import "../../styled-RnVr222F.js";
+import { f as fontWeightRegular } from "../../FontWeight-C2pGs7aR.js";
+import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { a as spacingMd, s as spacingNone } from "../../Spacing-BMQelJYr.js";
+import { g as getUid } from "../../index-DR3e19BE.js";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { a as colorBackgroundSubtle, e as colorBackgroundBrand } from "../../BackgroundColor-DSOSZvNi.js";
+import { c as colorObjectNeutral } from "../../ObjectColor-0RAzLGI5.js";
+import { g as getForegroundColor } from "../../colorUtils-lb0oJttx.js";
+import { a as filterProps } from "../../filterProps-CTn92eZw.js";
+const InfoBannerContainerStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "InfoBannerContainerStyled",
+  componentId: "sc-1j7zpxr-0"
+})({
+  display: "flex",
+  gap: getSpacing(spacingMd),
+  padding: getSpacing(spacingMd),
+  justifyContent: "center",
+  alignItems: "center"
+}, ({
+  appearance = "primary"
+}) => {
+  let background = getObjectColor(colorObjectNeutral);
+  let color = getForegroundColor(colorObjectNeutral);
+  switch (appearance) {
+    case "secondary":
+      background = getBackgroundColor(colorBackgroundBrand);
+      color = getForegroundColor(colorBackgroundBrand);
+      break;
+    case "tertiary":
+      background = getBackgroundColor(colorBackgroundSubtle);
+      color = getForegroundColor(colorBackgroundSubtle);
+      break;
+  }
+  return {
+    ...forcedColors({
+      background: "CanvasText",
+      color: "Canvas"
+    }),
+    background,
+    color
+  };
+}, ({
+  bottomSpacing = spacingNone
+}) => ({
+  ...getBottomSpacing({
+    bottomSpacing
+  })
+}));
+const infoBannerAppearancePrimary = "primary";
+const infoBannerAppearanceSecondary = "secondary";
+const infoBannerAppearanceTertiary = "tertiary";
+const InfoBanner = ({
+  appearance,
+  icon,
+  heading,
+  button,
+  ...props
+}) => {
+  const headingId = `heading-${getUid()}`;
+  return /* @__PURE__ */ jsxs(InfoBannerContainerStyled, { ...props, appearance, "aria-labelledby": headingId, role: "group", children: [
+    icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSizeLg, "aria-hidden": true }),
+    /* @__PURE__ */ jsx(Heading, { ...heading, id: headingId, size: textHeadingXs, weight: fontWeightRegular, style: {
+      color: "inherit"
+    }, bottomSpacing: spacingNone }),
+    button && /* @__PURE__ */ jsx(Button, { ...button, bottomSpacing: spacingNone, "aria-describedby": headingId })
+  ] });
+};
+export {
+  InfoBanner as default,
+  infoBannerAppearancePrimary,
+  infoBannerAppearanceSecondary,
+  infoBannerAppearanceTertiary
+};

package/dist/components/InfoBanner/props.d.ts

@@ -0,0 +1,32 @@
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
+import { HTMLAttributes } from 'react';
+import { ButtonProps } from '../Button';
+import { HeadingProps } from '../Heading';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const infoBannerAppearancePrimary = "primary";
+export declare const infoBannerAppearanceSecondary = "secondary";
+export declare const infoBannerAppearanceTertiary = "tertiary";
+export type InfoBannerAppearance = typeof infoBannerAppearancePrimary | typeof infoBannerAppearanceSecondary | typeof infoBannerAppearanceTertiary;
+export interface InfoBannerProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'InfoBanner';
+    /**
+     * Info Banner appearance. Can be primary, secondary or tertiary
+     * Based on that, the background color of the banner will change
+     */
+    appearance: InfoBannerAppearance;
+    /**
+     * Icon to display in the banner
+     */
+    icon?: IconName;
+    /**
+     * Heading
+     */
+    heading: Omit<HeadingProps, 'size' | 'weight' | 'bottomSpacing'>;
+    /**
+     * Button
+     */
+    button?: Omit<ButtonProps, 'bottomSpacing'>;
+}

package/dist/components/InfoBanner/styled.d.ts

@@ -0,0 +1,2 @@
+import { InfoBannerProps } from './props';
+export declare const InfoBannerContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<InfoBannerProps, "appearance" | "bottomSpacing">>> & string;

package/dist/components/InlineLink/index.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
 import { f as filterPropsForUnstyledComponent } from "../../filterProps-CTn92eZw.js";
+import { s as sanitizeLinkProps } from "../../sanitizeLinkProps-D2Kkovy1.js";
 import styled from "styled-components";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { e as ease_in_sine } from "../../easing-Dm-pO8SY.js";
@@ -48,7 +49,7 @@ const InlineLink = ({
   ...props
 }) => {
   const LinkComponent = useLinkComponent();
-  return /* @__PURE__ */ jsx(InlineLinkStyled, { className, children: /* @__PURE__ */ jsx(LinkComponent, { ...filterPropsForUnstyledComponent(props), children: props.children }) });
+  return /* @__PURE__ */ jsx(InlineLinkStyled, { className, children: /* @__PURE__ */ jsx(LinkComponent, { ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), children: props.children }) });
 };
 export {
   InlineLink as default

package/dist/components/Legend/index.js

@@ -3,7 +3,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import IconSnippet, { iconSnippetAlignCenter } from "../IconSnippet/index.js";
-import { R as RichText } from "../../index-Cy0Uf6Y5.js";
+import { R as RichText } from "../../index-CVHmFLr5.js";
 import styled from "styled-components";
 const LegendStyled = styled.legend.withConfig({
   displayName: "LegendStyled",

package/dist/components/Link/index.js

@@ -4,6 +4,7 @@ import { L as LinkAsButton, a as LinkStyled, g as getLinkIcon } from "../../inde
 import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
 import { f as filterPropsForUnstyledComponent } from "../../filterProps-CTn92eZw.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import { s as sanitizeLinkProps } from "../../sanitizeLinkProps-D2Kkovy1.js";
 const isLinkAsButtonProp = (props) => {
   return props.href === void 0;
 };
@@ -16,7 +17,7 @@ const Link = ({
     return /* @__PURE__ */ jsx(LinkAsButton, { className, bottomSpacing, ...props, children: props.children });
   }
   const LinkComponent = useLinkComponent();
-  return /* @__PURE__ */ jsx(LinkStyled, { className, bottomSpacing, children: /* @__PURE__ */ jsxs(LinkComponent, { ...filterPropsForUnstyledComponent(props), children: [
+  return /* @__PURE__ */ jsx(LinkStyled, { className, bottomSpacing, children: /* @__PURE__ */ jsxs(LinkComponent, { ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), children: [
     renderInlineRichTextFromOpenText(props.children),
     getLinkIcon(props.icon)
   ] }) });

package/dist/components/LinkListItem/index.js

@@ -9,6 +9,7 @@ import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
 import { f as filterPropsForUnstyledComponent } from "../../filterProps-CTn92eZw.js";
+import { s as sanitizeLinkProps } from "../../sanitizeLinkProps-D2Kkovy1.js";
 import { L as LinkListItemElevatedStyled, b as LinkListItemStyled, c as LinkListItemButtonStyled, d as LinkListItemAnchorStyled, e as LinkListItemContentWrapperStyled, a as linkListItemVariantHorizontal, f as LinkListItemContentStyled, g as LinkListItemLabelWrapperStyled, h as LinkListItemVerticalContentStyled, i as LinkListItemChevronStyled, j as LinkListLabelStyled, k as LinkListSuffixStyled } from "../../styled-BM1Yo9eD.js";
 import { l } from "../../styled-BM1Yo9eD.js";
 const isLinkListItemAsButtonProp = (props) => {
@@ -57,7 +58,7 @@ const LinkListItem = (props) => {
     return /* @__PURE__ */ jsx(LinkListItemButtonStyled, { ...props, children: Item });
   }
   const LinkComponent = useLinkComponent();
-  return /* @__PURE__ */ jsx(LinkListItemAnchorStyled, { elevation, orientation, children: /* @__PURE__ */ jsx(LinkComponent, { ...filterPropsForUnstyledComponent(props), children: Item }) });
+  return /* @__PURE__ */ jsx(LinkListItemAnchorStyled, { elevation, orientation, children: /* @__PURE__ */ jsx(LinkComponent, { ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), children: Item }) });
 };
 export {
   LinkListItem as default,

package/dist/components/LocalStyle/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { LocalStyleProps } from './props';
+/**
+ * Local style is only working on pages that also include older styles
+ * e.g.
+ * https://www.vodafone.de/simplicity/assets/css/core.css"
+ * https://www.vodafone.de/simplicity/pattern-library-ws10/standalone/brix-ws10-bundle.css"
+ *
+ */
+declare const LocalStyle: FC<LocalStyleProps>;
+export default LocalStyle;
+export * from './props';

package/dist/components/LocalStyle/index.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { a as cssVarsString } from "../../cssVars-C3-c3zhv.js";
+import { a as filterProps } from "../../filterProps-CTn92eZw.js";
+const LocalStyleStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LocalStyleStyled",
+  componentId: "sc-1wrnevd-0"
+})({}, () => {
+  const localCssVarsString = cssVarsString.replace(/:root/g, "&");
+  return css(["", ""], localCssVarsString);
+});
+const LocalStyle = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(LocalStyleStyled, { ...props, children });
+export {
+  LocalStyle as default
+};

package/dist/components/LocalStyle/props.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface LocalStyleProps extends Pick<PatternProps, 'component'>, HTMLAttributes<HTMLElement> {
+    component?: 'LocalStyle';
+}

package/dist/components/LocalStyle/styled.d.ts

@@ -0,0 +1,2 @@
+import { LocalStyleProps } from './props';
+export declare const LocalStyleStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LocalStyleProps>> & string;

package/dist/components/MediaText/index.js

@@ -6,13 +6,14 @@ import FlexItem from "../FlexItem/index.js";
 import Heading from "../Heading/index.js";
 import Image, { aspectRatio16_9 } from "../Image/index.js";
 import Link from "../Link/index.js";
-import { g as getUid, R as RichText } from "../../index-Cy0Uf6Y5.js";
+import { R as RichText } from "../../index-CVHmFLr5.js";
 import YoutubeVideo from "../YoutubeVideo/index.js";
 import { p as pTagName, u as ulTagName, d as divTagName, l as liTagName } from "../../tags-38kBhOn6.js";
 import { f as fontWeightRegular } from "../../FontWeight-C2pGs7aR.js";
 import { b as textHeadingSm, t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { a as spacingMd, e as spacing2Xs, c as spacingSm, s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import { u as useViewport } from "../../index-G2mpsxF7.js";
+import { g as getUid } from "../../index-DR3e19BE.js";
 import styled from "styled-components";
 import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";

package/dist/components/Notification/index.js

@@ -9,7 +9,7 @@ import { I as IconLoader } from "../../index-BdUFiKHr.js";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
 import "../../styled-RnVr222F.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-Cy0Uf6Y5.js";
+import { R as RichText } from "../../index-CVHmFLr5.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { e as colorBorderCritical, g as colorBorderWarning, d as colorBorderSuccess, k as colorBorderInformation } from "../../BorderColor-CYdSW9dg.js";

package/dist/components/OpenTextFootnoteAdapter/index.js

@@ -5,7 +5,7 @@ import AccordionGroup from "../AccordionGroup/index.js";
 import Container from "../Container/index.js";
 import FootnoteContent from "../FootnoteContent/index.js";
 import Heading from "../Heading/index.js";
-import { R as RichText } from "../../index-Cy0Uf6Y5.js";
+import { R as RichText } from "../../index-CVHmFLr5.js";
 import { b as textHeadingSm, c as textHeadingLg } from "../../HeadingSize-CfCRn3Lh.js";
 import { h as h3TagName } from "../../tags-38kBhOn6.js";
 const getFootnoteContent = (content, footnoteContentBacklinkText) => {

package/dist/components/QuickLinkList/components/QuickLink/styled.d.ts

@@ -1,3 +1,3 @@
-export declare const QuickLinkAnchorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
+export declare const QuickLinkAnchorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const QuickLinkIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const QuickLinkLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/components/QuickLinkList/index.js

@@ -1,11 +1,14 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
 import { u as useViewport, v as viewportLg } from "../../index-G2mpsxF7.js";
 import Icon from "../Icon/index.js";
 import { d as iconSizeLg } from "../../props-7dcsjRUx.js";
 import "../../styled-RnVr222F.js";
+import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
+import { f as filterPropsForUnstyledComponent } from "../../filterProps-CTn92eZw.js";
+import { s as sanitizeLinkProps } from "../../sanitizeLinkProps-D2Kkovy1.js";
 import styled from "styled-components";
 import { B as ButtonAppearanceColor } from "../../ButtonAppearanceHelper-D2SlSoU8.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
@@ -20,60 +23,63 @@ import { c as colorBorderFocus, a as colorBorderNeutral } from "../../BorderColo
 import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
-const QuickLinkAnchorStyled = styled.a.withConfig({
+const QuickLinkAnchorStyled = styled.span.withConfig({
   displayName: "QuickLinkAnchorStyled",
   componentId: "sc-ejqu78-0"
 })({
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  textAlign: "center",
-  textDecoration: "none !important",
-  color: getTextColor(colorTextNeutral),
-  alignItems: "center",
-  cursor: "pointer",
-  gap: getSpacing("Sm"),
-  padding: getSpacing("Sm"),
   width: "100%",
-  maxWidth: 190,
-  borderRadius: getBorderRadius("borderRadiusMd"),
-  transition: "background 0.2s, outline 0.2s",
-  position: "relative",
-  "&:visited": {
+  "& a": {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    textAlign: "center",
+    textDecoration: "none !important",
     color: getTextColor(colorTextNeutral),
-    textDecoration: "none"
-  },
-  "&::after": {
-    content: '""',
-    position: "absolute",
-    top: 0,
-    left: 0,
+    alignItems: "center",
+    cursor: "pointer",
+    gap: getSpacing("Sm"),
+    padding: getSpacing("Sm"),
     width: "100%",
-    height: "100%",
-    transition: "opacity 0.3s",
-    pointerEvents: "none",
-    zIndex: 1,
-    borderRadius: getBorderRadius("borderRadiusMd")
-  },
-  "&:focus-visible": {
-    outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`
-  },
-  "&:hover > div, &:focus-visible > div": {
-    background: getObjectColor(ButtonAppearanceColor.secondary),
-    color: getObjectColor("colorObjectInverse")
-  },
-  ...forcedColors({
-    background: "ButtonFace",
-    color: "ButtonText",
-    border: `${getBorderWidth("Sm")} solid ButtonBorder`,
+    maxWidth: 190,
+    borderRadius: getBorderRadius("borderRadiusMd"),
+    transition: "background 0.2s, outline 0.2s",
+    position: "relative",
+    "&:visited": {
+      color: getTextColor(colorTextNeutral),
+      textDecoration: "none"
+    },
+    "&::after": {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      transition: "opacity 0.3s",
+      pointerEvents: "none",
+      zIndex: 1,
+      borderRadius: getBorderRadius("borderRadiusMd")
+    },
     "&:focus-visible": {
-      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`
     },
     "&:hover > div, &:focus-visible > div": {
-      background: "Highlight",
-      color: "HighlightText"
-    }
-  })
+      background: getObjectColor(ButtonAppearanceColor.secondary),
+      color: getObjectColor("colorObjectInverse")
+    },
+    ...forcedColors({
+      background: "ButtonFace",
+      color: "ButtonText",
+      border: `${getBorderWidth("Sm")} solid ButtonBorder`,
+      "&:focus-visible": {
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      },
+      "&:hover > div, &:focus-visible > div": {
+        background: "Highlight",
+        color: "HighlightText"
+      }
+    })
+  }
 });
 const QuickLinkIconWrapper = styled.div.withConfig({
   displayName: "QuickLinkIconWrapper",
@@ -108,10 +114,11 @@ const QuickLink = ({
   href,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(QuickLinkAnchorStyled, { href, ...props, children: [
+  const LinkComponent = useLinkComponent();
+  return /* @__PURE__ */ jsx(QuickLinkAnchorStyled, { ...props, children: /* @__PURE__ */ jsxs(LinkComponent, { ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), href, children: [
     /* @__PURE__ */ jsx(QuickLinkIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSizeLg }) }),
     /* @__PURE__ */ jsx(QuickLinkLabel, { children: label })
-  ] });
+  ] }) });
 };
 const QuickLinkList = ({
   quickLinks,

package/dist/components/RadioGroup/index.js

@@ -28,6 +28,7 @@ const RadioContainer = styled(Flex).withConfig({
 })({
   alignItems: "flex-start",
   width: "max-content",
+  maxWidth: "fit-content",
   flexWrap: "nowrap",
   gap: getSpacing(spacingXs)
 }, ({

package/dist/components/RichText/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "react";
-import { R } from "../../index-Cy0Uf6Y5.js";
+import { R } from "../../index-CVHmFLr5.js";
 export {
   R as default
 };

package/dist/components/RichtTextContentful/index.js

@@ -5,7 +5,7 @@ import Body from "../Body/index.js";
 import Divider from "../Divider/index.js";
 import Heading from "../Heading/index.js";
 import InlineLink from "../InlineLink/index.js";
-import { a as TextListItem, T as TextList } from "../../index-Cy0Uf6Y5.js";
+import { a as TextListItem, T as TextList } from "../../index-CVHmFLr5.js";
 const getOptions = (paragraphSpacing = void 0) => {
   const options = {
     renderMark: {

package/dist/components/SuggestInput/index.js

@@ -128,7 +128,7 @@ const SuggestInputList = ({
   useEffect(() => {
     setOptions(listItems);
   }, [listItems]);
-  return /* @__PURE__ */ jsx(SuggestInputListWrapperStyled, { showList, children: /* @__PURE__ */ jsx(SuggestInputListStyled, { role: "listbox", id: "listbox", children: options == null ? void 0 : options.filter((listItem) => filterItems(listItem.label)).sort((a, b) => {
+  return /* @__PURE__ */ jsx(SuggestInputListWrapperStyled, { showList, children: /* @__PURE__ */ jsx(SuggestInputListStyled, { role: "listbox", id: "listbox", tabIndex: -1, children: options == null ? void 0 : options.filter((listItem) => filterItems(listItem.label)).sort((a, b) => {
     return sortItems(query, a.label, b.label);
   }).map((listItem, index) => {
     const isSelected = index === selectedOption;
@@ -231,6 +231,7 @@ const SuggestInput = forwardRef(({
   const [confirmedValue, setConfirmedValue] = useState(initialValueState);
   const [value, setValue] = useState(initialValueState);
   const messageId = `text-${uid}`;
+  const inputId = `suggest-input-${uid}`;
   const inputProps = {
     ...props,
     type: "text",
@@ -355,8 +356,8 @@ const SuggestInput = forwardRef(({
         break;
     }
   };
-  return /* @__PURE__ */ jsxs(SuggestInputFormElement, { tabIndex: 0, ref: formElementRef, bottomSpacing, disabled, children: [
-    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+  return /* @__PURE__ */ jsxs(SuggestInputFormElement, { ref: formElementRef, bottomSpacing, disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid: inputId }),
     /* @__PURE__ */ jsxs(SuggestInputWrapperStyled, { status, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
       /* @__PURE__ */ jsx(InputStyled, { ...inputProps, ref: inputRef, onChange: (e) => handleChange(e.target.value), onClick: () => {
         if (disabled) return;
@@ -368,7 +369,7 @@ const SuggestInput = forwardRef(({
         "aria-live": isLoading !== void 0 ? "polite" : void 0,
         "aria-busy": isLoading ? isLoading : void 0,
         "aria-autocomplete": "list"
-      }, disabled, placeholder: renderInlineRichTextFromOpenText(placeholder) }),
+      }, disabled, placeholder: renderInlineRichTextFromOpenText(placeholder), id: inputId }),
       /* @__PURE__ */ jsxs(SuggestInputIconsBarStyled, { children: [
         /* @__PURE__ */ jsx(FlexItem, { grow: "full", children: /* @__PURE__ */ jsx(SuggestInputLoadingSpinner, { size: "xs", isActive: isLoading }) }),
         status && /* @__PURE__ */ jsx(FlexItem, { grow: "full", children: /* @__PURE__ */ jsx(FormHelperStatusIcon, { status }) }),