@vodafone_de/brix-components 7.0.8 → 7.0.9

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

@@ -0,0 +1,23 @@
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
+import { SVGAttributes } from 'react';
+import { IconSize } from '../InlineIcon';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface IconLoaderProps extends PatternProps, SVGAttributes<SVGElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'IconLoader';
+    /**
+     * Icon name
+     */
+    name: IconName;
+    /**
+     * size defines the height and width of the icon
+     */
+    size: IconSize;
+    /**
+     * Icons are generally assumed to be decorative and not content-bearing.
+     * If an icon transports content, then alt text must be used to store a text for screen readers
+     */
+    alt?: string;
+}

package/dist/components/IconSnippet/index.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { df as IconLoader, it as iconSizeLg, iq as iconSize3xl, iv as iconSizeSm } from "../../index-Cbojl4_Q.js";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
+import { d as iconSizeLg, g as iconSize3xl, b as iconSizeSm } from "../../styled-DPHfwWsx.js";
 import InlineLink from "../InlineLink/index.js";
-import { R as RichText } from "../../index-BeSd-V81.js";
-import { d as divTagName } from "../../tags-DI6H1biK.js";
-import { a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
 import Link from "../Link/index.js";
+import { R as RichText } from "../../index-9io8adeQ.js";
+import { d as divTagName } from "../../tags-D0ExIPLD.js";
+import { c as spacingSm, s as spacingMd, b as spacingNone, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
+import IconLoader from "../IconLoader/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const iconSnippetSizeSmall = "sm";
 const iconSnippetSizeLarge = "lg";
 const iconSnippetSize3Xl = "3xl";
@@ -24,12 +25,9 @@ const IconSnippetStyled = styled.div.withConfig({
   displayName: "IconSnippetStyled",
   componentId: "sc-uw0x7w-0"
 })({
-  display: "flex"
+  display: "flex",
+  gap: getSpacing(spacingSm)
 }, ({
-  iconPosition
-}) => ({
-  gap: getSpacing("center" === iconPosition ? spacingXs : spacingMd)
-}), ({
   iconAlign
 }) => ({
   alignItems: "top" === iconAlign ? "start" : iconAlign
@@ -95,10 +93,11 @@ const IconSnippet = ({
   iconPosition = iconSnippetPositionLeft,
   iconAlign = iconSnippetAlignTop,
   tag = divTagName,
+  icon,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(IconSnippetStyled, { ...props, iconPosition, iconAlign, as: tag, children: [
-    /* @__PURE__ */ jsx(IconLoaderStyled, { size: size === iconSnippetSizeLarge ? iconSizeLg : size === iconSnippetSize3Xl ? iconSize3xl : iconSizeSm, name: props.icon }),
+    /* @__PURE__ */ jsx(IconLoaderStyled, { ...icon, bottomSpacing: spacingNone, size: size === iconSnippetSizeLarge ? iconSizeLg : size === iconSnippetSize3Xl ? iconSize3xl : iconSizeSm }),
     /* @__PURE__ */ jsx(IconSnippetContentStyled, { as: tag, iconPosition, children: getContents(contents) })
   ] });
 };

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

@@ -1,7 +1,7 @@
-import { IconName } from '@vfde-react/inline-icon-library';
 import { HTMLAttributes } from 'react';
 import { BodyProps } from '../Body';
 import { HeadingProps } from '../Heading';
+import { IconLoaderProps } from '../IconLoader';
 import { InlineLinkProps } from '../InlineLink';
 import { LinkProps } from '../Link';
 import { LinkAsButtonProps } from '../LinkAsButton';
@@ -28,7 +28,7 @@ export interface IconSnippetProps extends PatternProps, HTMLAttributes<HTMLDivEl
     /**
      * Icon
      */
-    icon: IconName;
+    icon: Omit<IconLoaderProps, 'size' | 'bottomSpacing'>;
     /**
      * contents must be an array containing any combination of HeadingProps, BodyProps, RichTextProps and/or InlineLinkProps;
      */

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

@@ -1,6 +1,6 @@
 import { IconSnippetPosition, IconSnippetProps } from './props';
-export declare const IconSnippetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<IconSnippetProps, "size" | "contents" | "icon">>> & string;
-export declare const IconLoaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@vfde-react/inline-icon-library').IconLoaderProps, never>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
+export declare const IconSnippetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<IconSnippetProps, "size" | "icon" | "contents">>> & string;
+export declare const IconLoaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../IconLoader').IconLoaderProps, never>> & string & Omit<import('react').FC<import('../IconLoader').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
 export declare const IconSnippetContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     iconPosition: IconSnippetPosition;
 }>> & string;

package/dist/components/IconSnippetList/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
 import IconSnippet from "../IconSnippet/index.js";
-import { u as ulTagName, l as liTagName } from "../../tags-DI6H1biK.js";
+import { u as ulTagName, l as liTagName } from "../../tags-D0ExIPLD.js";
 import { b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 const IconSnippetList = ({
   component: _component,

package/dist/components/Image/index.js

@@ -5,7 +5,7 @@ import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.j
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
 import { c as cornerStraight } from "../../CornerStyle-JEbGNArR.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const objectFitContain = "contain";
 const objectFitCover = "cover";
 const objectFitNone = "none";

package/dist/components/ImageHeader/index.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Body from "../Body/index.js";
-import { a as fontWeightLight } from "../../FontWeight-CR22KTex.js";
-import { s as spacingMd, c as spacingSm, d as spacingXl, a as spacingXs, e as spacing2Xs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
-import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { g as getUid, R as RichText } from "../../index-BeSd-V81.js";
 import Button from "../Button/index.js";
 import Container from "../Container/index.js";
 import Heading, { headingAlignCenter } from "../Heading/index.js";
-import { P as Price, b as priceSizeSm } from "../../index-aUJfXBUI.js";
+import { P as Price, b as priceSizeSm } from "../../index-TImInHXt.js";
+import { g as getUid, R as RichText } from "../../index-9io8adeQ.js";
+import { b as fontWeightLight } from "../../FontWeight-DEBGHbtO.js";
+import { s as spacingMd, c as spacingSm, d as spacingXl, a as spacingXs, e as spacing2Xs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
 import styled from "styled-components";
-import { B as Badge } from "../../index-ZHkR70j3.js";
+import { B as Badge } from "../../index-BdPmdY9v.js";
 import ButtonGroup from "../ButtonGroup/index.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
@@ -21,7 +21,7 @@ import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { b as colorBackgroundOverlay } from "../../BackgroundColor-e0N9tdDR.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
-import { a as flexOrientationVertical } from "../../styled-B0YKfXTz.js";
+import { a as flexOrientationVertical } from "../../styled-CPUu8mvT.js";
 const imageHeaderVariantFull = "full";
 const imageHeaderVariantSplit = "split";
 const imageHeaderPositionRight = "right";

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

@@ -1,16 +1,16 @@
 import { HTMLAttributes } from 'react';
 import { BadgeProps } from '../Badge/props';
-import { HeadingProps } from '../Heading/props';
-import { PatternProps } from '../../foundations/PatternProps';
-import { Theme } from '../../foundations/types/Theme';
 import { BodyProps } from '../Body/props';
 import { ButtonProps } from '../Button/props';
 import { ButtonAsLinkProps } from '../ButtonAsLink/props';
 import { ButtonGroupProps } from '../ButtonGroup/props';
 import { GridColSpan } from '../Grid/props';
+import { HeadingProps } from '../Heading/props';
 import { PriceProps } from '../Price/props';
 import { ResponsiveImageProps } from '../ResponsiveImage/props';
 import { RichTextProps } from '../RichText/props';
+import { PatternProps } from '../../foundations/PatternProps';
+import { Theme } from '../../foundations/types/Theme';
 export declare const imageHeaderVariantFull = "full";
 export declare const imageHeaderVariantSplit = "split";
 export declare const imageHeaderPositionRight = "right";

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

@@ -1,9 +1,9 @@
 import { ImageHeaderProps } from './props';
 export declare const getBadgeTopPosition: () => string;
-export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "variant" | "position" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderBadgeStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Badge').BadgeProps, never>> & string & Omit<import('react').FC<import('../Badge').BadgeProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderHeadingStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Heading').HeadingProps, never>> & string & Omit<import('react').FC<import('../Heading').HeadingProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderButtonGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../ButtonGroup').ButtonGroupProps, never>> & string & Omit<import('react').FC<import('../ButtonGroup').ButtonGroupProps>, keyof import('react').Component<any, {}, any>>;

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { InlineIconProps } from './props.ts';
+declare const InlineIcon: FC<InlineIconProps>;
+export default InlineIcon;
+export * from './props.ts';
+export * from './styled.tsx';

package/dist/components/InlineIcon/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { m as InlineIconStyled, l as inlineIconModeStroke } from "../../styled-DPHfwWsx.js";
+import { I, f, i, g, h, j, d, c, b, e, a, k } from "../../styled-DPHfwWsx.js";
+const InlineIcon = ({
+  className,
+  alt = "",
+  coloringMode = inlineIconModeStroke,
+  viewBox = "0 0 192 192",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(InlineIconStyled, { ...props, className, $coloringMode: coloringMode, version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox, xmlSpace: "preserve", ..."" === alt ? {
+    "aria-hidden": true
+  } : {}, children: [
+    "" !== alt && /* @__PURE__ */ jsx("title", { children: alt }),
+    props.children
+  ] });
+};
+export {
+  I as IconWithAccent,
+  InlineIconStyled,
+  InlineIcon as default,
+  f as iconSize2xl,
+  i as iconSize2xs,
+  g as iconSize3xl,
+  h as iconSize4xl,
+  j as iconSize5xl,
+  d as iconSizeLg,
+  c as iconSizeMd,
+  b as iconSizeSm,
+  e as iconSizeXl,
+  a as iconSizeXs,
+  k as inlineIconModeFill,
+  inlineIconModeStroke
+};

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

@@ -0,0 +1,42 @@
+import { SVGAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const iconSize2xs = "iconSize2xs";
+export declare const iconSizeXs = "iconSizeXs";
+export declare const iconSizeSm = "iconSizeSm";
+export declare const iconSizeMd = "iconSizeMd";
+export declare const iconSizeLg = "iconSizeLg";
+export declare const iconSizeXl = "iconSizeXl";
+export declare const iconSize2xl = "iconSize2xl";
+export declare const iconSize3xl = "iconSize3xl";
+export declare const iconSize4xl = "iconSize4xl";
+export declare const iconSize5xl = "iconSize5xl";
+export type IconSize = typeof iconSize2xs | typeof iconSizeXs | typeof iconSizeSm | typeof iconSizeMd | typeof iconSizeLg | typeof iconSizeXl | typeof iconSize2xl | typeof iconSize3xl | typeof iconSize4xl | typeof iconSize5xl;
+export declare const IconWithAccent: string[];
+export declare const inlineIconModeFill = "fill";
+export declare const inlineIconModeStroke = "stroke";
+export type InlineIconMode = typeof inlineIconModeFill | typeof inlineIconModeStroke;
+export interface InlineIconProps extends PatternProps, SVGAttributes<SVGElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'InlineIcon';
+    /**
+     * Icons are generally assumed to be decorative and not content-bearing.
+     * If an icon transports content, then alt text must be used to store a text for screen readers
+     */
+    alt?: string;
+    /**
+     * This props is an workaround for the inconsistent svg
+     * Some need coloring mode fill,
+     */
+    coloringMode?: InlineIconMode;
+    /**
+     * This props is an workaround for the inconsistent svg
+     * Some icons have a different viewbox the '0 0 192 192'
+     */
+    viewBox?: string;
+    /**
+     * size defines the height and width of the icon
+     */
+    size: IconSize;
+}

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

@@ -0,0 +1,4 @@
+import { InlineIconMode, InlineIconProps } from './props';
+export declare const InlineIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, Omit<InlineIconProps, "coloringMode"> & {
+    $coloringMode: InlineIconMode;
+}>> & string;

package/dist/components/InlineLink/index.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
+import { a as filterProps, f as filterPropsForUnstyledComponent } from "../../filterProps-CBnuV0LI.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";
@@ -8,14 +10,13 @@ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js"
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
 import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
-import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-DsntmDNw.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { f as colorTextBrand, a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
 const hover = {
   textDecoration: "none",
   color: getTextColor(colorTextBrand)
 };
-const InlineLinkStyled = styled.a.withConfig({
-  shouldForwardProp: filterProps(),
+const InlineLinkStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(["href"]),
   displayName: "InlineLinkStyled",
   componentId: "sc-ztdjf-0"
 })({
@@ -24,7 +25,7 @@ const InlineLinkStyled = styled.a.withConfig({
   textDecoration: "underline",
   transition: `color 0.2s ${ease_in_sine}`,
   verticalAlign: "baseline",
-  "&:focus-visible": {
+  "&:focus-within": {
     ...forcedColors({
       outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
     }),
@@ -35,9 +36,20 @@ const InlineLinkStyled = styled.a.withConfig({
   "&:visited": {
     color: getTextColor(colorTextNeutral)
   },
-  "&:hover": hover
+  "&:hover": hover,
+  "& a": {
+    color: "inherit"
+  },
+  "& a:focus-visible": {
+    outline: "none"
+  }
 });
-const InlineLink = (props) => /* @__PURE__ */ jsx(InlineLinkStyled, { ...props, children: props.children });
+const InlineLink = (props) => {
+  const {
+    LinkComponent
+  } = useLinkComponent();
+  return /* @__PURE__ */ jsx(InlineLinkStyled, { ...props, children: /* @__PURE__ */ jsx(LinkComponent, { ...filterPropsForUnstyledComponent(props), children: props.children }) });
+};
 export {
   InlineLink as default
 };

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

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

package/dist/components/Input/index.js

@@ -9,7 +9,7 @@ import { s as spacingMd, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
 import { i } from "../../props-DDpgcryb.js";
-import { I as InputWrapperStyled, a as InputStyled } from "../../styled-03irSJOQ.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-Cep52hpR.js";
 const Input = forwardRef(({
   uid,
   status,

package/dist/components/Label/index.js

@@ -4,7 +4,7 @@ import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTex
 import styled from "styled-components";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
 const LabelStyled = styled.label.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "LabelStyled",

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-BeSd-V81.js";
+import { R as RichText } from "../../index-9io8adeQ.js";
 import styled from "styled-components";
 const LegendStyled = styled.legend.withConfig({
   displayName: "LegendStyled",

package/dist/components/Link/index.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { L as LinkAsButton, a as LinkStyled, g as getLinkIcon } from "../../index-C5GzK6_0.js";
+import { L as LinkAsButton, a as LinkStyled, g as getLinkIcon } from "../../index-Cqh8IRpl.js";
+import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
+import { f as filterPropsForUnstyledComponent } from "../../filterProps-CBnuV0LI.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 const isLinkAsButtonProp = (props) => {
   return props.href === void 0;
@@ -9,10 +11,13 @@ const Link = (props) => {
   if (isLinkAsButtonProp(props)) {
     return /* @__PURE__ */ jsx(LinkAsButton, { ...props, children: props.children });
   }
-  return /* @__PURE__ */ jsxs(LinkStyled, { ...props, children: [
+  const {
+    LinkComponent
+  } = useLinkComponent();
+  return /* @__PURE__ */ jsx(LinkStyled, { ...props, children: /* @__PURE__ */ jsxs(LinkComponent, { ...filterPropsForUnstyledComponent(props), children: [
     renderInlineRichTextFromOpenText(props.children),
     getLinkIcon(props.icon)
-  ] });
+  ] }) });
 };
 export {
   Link as default

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

@@ -1,4 +1,4 @@
 import { CSSObject } from 'styled-components';
 import { LinkProps } from './props';
 export declare const linkBaseCssObject: CSSObject;
-export declare const LinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, LinkProps>> & string;
+export declare const LinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LinkProps>> & string;

package/dist/components/LinkAsButton/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { L } from "../../index-C5GzK6_0.js";
+import { L } from "../../index-Cqh8IRpl.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {
   L as default

package/dist/components/LinkList/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { u as ulTagName, l as liTagName } from "../../tags-DI6H1biK.js";
-import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import LinkListItem, { linkListItemVariantVertical, linkListItemVariantHorizontal } from "../LinkListItem/index.js";
+import { u as ulTagName, l as liTagName } from "../../tags-D0ExIPLD.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import styled from "styled-components";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
@@ -53,9 +53,9 @@ const LinkList = ({
   },
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(LinkListStyled, { bottomSpacing: props.bottomSpacing, variant, tag: ulTagName, autoLayout: gridConfig, elevation: props.elevation, stretch: true, children: items.map((item, index) => {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], children: /* @__PURE__ */ jsx(LinkListStyled, { bottomSpacing: props.bottomSpacing, variant, tag: ulTagName, autoLayout: gridConfig, elevation: props.elevation, stretch: true, children: items.map((item, index) => {
     return /* @__PURE__ */ jsx(LinkListLiStyled, { tag: liTagName, variant, children: /* @__PURE__ */ jsx(LinkListItem, { ...item, orientation: variant === linkListVariantRow ? linkListItemVariantVertical : linkListItemVariantHorizontal, elevation: props.elevation, bottomSpacing: spacingNone, isLastItemInList: index === items.length - 1 }) }, item.uid);
-  }) });
+  }) }) });
 };
 export {
   LinkList as default,

package/dist/components/LinkListItem/index.js

@@ -1,11 +1,17 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { iu as iconSizeMd, df as IconLoader } from "../../index-Cbojl4_Q.js";
-import { s as spanTagName } from "../../tags-DI6H1biK.js";
+import { B as Badge } from "../../index-BdPmdY9v.js";
+import IconLoader from "../IconLoader/index.js";
+import { c as iconSizeMd } from "../../styled-DPHfwWsx.js";
+import { s as spanTagName } from "../../tags-D0ExIPLD.js";
 import { s as spacingMd, a as spacingXs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
-import { B as Badge } from "../../index-ZHkR70j3.js";
+import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
+import { a as filterProps, f as filterPropsForUnstyledComponent } from "../../filterProps-CBnuV0LI.js";
 import styled from "styled-components";
+import Body from "../Body/index.js";
+import Card from "../Card/index.js";
+import Icon from "../Icon/index.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { e as ease_in_sine } from "../../easing-Dm-pO8SY.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
@@ -23,11 +29,7 @@ import { a as borderWidthFocus, c as borderWidthSm } from "../../BorderWidth-DfO
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
 import { b as colorIconBrand } from "../../IconColor-CtC9WUgr.js";
 import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-DsntmDNw.js";
-import { f as filterProps } from "../../filterProps-Cewck8OH.js";
-import Body from "../Body/index.js";
-import Card from "../Card/index.js";
-import Icon from "../Icon/index.js";
-import { C as CardAppearanceColor } from "../../styled-CYugcGtx.js";
+import { C as CardAppearanceColor } from "../../styled-DINwm57V.js";
 const linkListItemVariantVertical = "vertical";
 const linkListItemVariantHorizontal = "horizontal";
 const focusStyles = {
@@ -81,21 +83,24 @@ const LinkListItemButtonStyled = styled.button.withConfig({
   }
 });
 const buttonParent = `${LinkListItemButtonStyled.toString()} &`;
-const LinkListItemAnchorStyled = styled.a.withConfig({
-  shouldForwardProp: filterProps(),
+const LinkListItemAnchorStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(["href"]),
   displayName: "LinkListItemAnchorStyled",
   componentId: "sc-1dmfu9f-1"
 })({
-  textDecoration: "none",
-  display: "block",
   height: "100%",
-  color: getTextColor(colorTextNeutral),
-  "&:focus-visible": focusStyles,
-  "&:hover, &:focus": {
-    textDecoration: "none"
-  },
-  "&:visited": {
-    color: getTextColor(colorTextNeutral)
+  "& > a": {
+    textDecoration: "none",
+    display: "block",
+    height: "100%",
+    color: getTextColor(colorTextNeutral),
+    "&:focus-visible": focusStyles,
+    "&:hover, &:focus": {
+      textDecoration: "none"
+    },
+    "&:visited": {
+      color: getTextColor(colorTextNeutral)
+    }
   }
 }, ({
   elevation = true,
@@ -103,17 +108,21 @@ const LinkListItemAnchorStyled = styled.a.withConfig({
 }) => {
   if (!elevation && orientation === linkListItemVariantHorizontal) {
     return {
-      borderRadius: getBorderRadius(borderRadiusNone),
-      transitionProperty: "color",
-      transitionDuration: "0.2s",
-      transitionTimingFunction: ease_in_sine,
-      "&:hover, &:focus-visible": {
-        color: getTextColor(colorTextBrand)
+      "& > a": {
+        borderRadius: getBorderRadius(borderRadiusNone),
+        transitionProperty: "color",
+        transitionDuration: "0.2s",
+        transitionTimingFunction: ease_in_sine,
+        "&:hover, &:focus-visible": {
+          color: getTextColor(colorTextBrand)
+        }
       }
     };
   }
   return {
-    borderRadius: getBorderRadius(borderRadiusMd)
+    "& > a": {
+      borderRadius: getBorderRadius(borderRadiusMd)
+    }
   };
 });
 const parentHasFocusSelector = `${LinkListItemAnchorStyled.toString()}:focus-within &, ${LinkListItemButtonStyled.toString()}:focus-within &`;
@@ -314,11 +323,14 @@ const LinkListItem = (props) => {
     ] }),
     LinkListBadge
   ] }) });
-  const Item = elevation ? /* @__PURE__ */ jsx(LinkListItemElevatedStyled, { ...props, tag: "span", children: Content }) : /* @__PURE__ */ jsx(LinkListItemStyled, { orientation, bottomSpacing: props.bottomSpacing, isLastItemInList, children: Content });
+  const Item = elevation ? /* @__PURE__ */ jsx(LinkListItemElevatedStyled, { tag: "span", children: Content }) : /* @__PURE__ */ jsx(LinkListItemStyled, { orientation, bottomSpacing: props.bottomSpacing, isLastItemInList, children: Content });
   if (isLinkListItemAsButtonProp(props)) {
     return /* @__PURE__ */ jsx(LinkListItemButtonStyled, { ...props, children: Item });
   }
-  return /* @__PURE__ */ jsx(LinkListItemAnchorStyled, { ...props, elevation, orientation, children: Item });
+  const {
+    LinkComponent
+  } = useLinkComponent();
+  return /* @__PURE__ */ jsx(LinkListItemAnchorStyled, { elevation, orientation, children: /* @__PURE__ */ jsx(LinkComponent, { ...filterPropsForUnstyledComponent(props), children: Item }) });
 };
 export {
   LinkListItem as default,

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

@@ -1,7 +1,7 @@
-import { IconName } from '@vfde-react/inline-icon-library';
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
 import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
-import { PatternProps } from '../../foundations/PatternProps';
 import { BadgeProps } from '../Badge';
+import { PatternProps } from '../../foundations/PatternProps';
 export declare const linkListItemVariantVertical = "vertical";
 export declare const linkListItemVariantHorizontal = "horizontal";
 export type LinkListItemOrientation = typeof linkListItemVariantVertical | typeof linkListItemVariantHorizontal;