@vodafone_de/brix-components 17.1.2 → 18.0.0

package/dist/{index-B7QEcUdq.js → index-BXTweg2t.js}

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { useId, Fragment } from "react";
 import styled from "styled-components";
 import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
@@ -12,7 +12,8 @@ import { a as fontWeightBold, f as fontWeightRegular } from "./FontWeight-C8c-Un
 import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-Dj-qX3Z5.js";
 import { g as colorTextCritical, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
 import { a as shouldForwardPropExcluding, s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
-import { d as priceOrientationVertical, a as priceAlignLeft } from "./props-P3bM0HEk.js";
+import { S as ScreenreaderOnly } from "./index-Dgu9iIhb.js";
+import "./props-n71pckjd.js";
 const textDecorationStrikethrough = "Strikethrough";
 const PriceOuterWrapperStyled = styled.div.attrs({
   role: "group"
@@ -86,46 +87,6 @@ const PriceSuffixStyled = styled.div.withConfig({
 })(getHeadingSize("xs"), {
   color: getTextColor(colorTextNeutral)
 });
-const isTabularPriceProp = (props) => {
-  return props.component === "TabularPrice";
-};
-const createScreenReaderText = (price, strikePrice, suffix) => {
-  if (!strikePrice) {
-    return `${price} ${suffix}`;
-  }
-  return `Standardpreis ${strikePrice} - Angebotspreis ${price} ${suffix}`;
-};
-const Price = (props) => {
-  if (isTabularPriceProp(props)) {
-    return /* @__PURE__ */ jsx(TabularPrice, { ...props });
-  }
-  const {
-    orientation = priceOrientationVertical,
-    align = priceAlignLeft,
-    prefix,
-    price,
-    productName,
-    ...priceProps
-  } = props;
-  const priceToRender = prefix ? `${prefix} ${price}` : price;
-  return /* @__PURE__ */ jsxs(PriceOuterWrapperStyled, { className: props.className, ...{
-    "aria-live": props["aria-live"]
-  }, ...{
-    "aria-label": createScreenReaderText(props.price, props.strikePrice, props.suffix)
-  }, children: [
-    productName && /* @__PURE__ */ jsx("meta", { itemProp: "name", content: productName }),
-    /* @__PURE__ */ jsxs(PriceInnerWrapperStyled, { ...priceProps, price, orientation, align, ...{
-      "aria-hidden": true
-    }, itemProp: productName ? "offers" : void 0, itemType: productName ? "https://schema.org/Offer" : void 0, itemScope: productName ? true : void 0, children: [
-      productName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
-      props.strikePrice ? /* @__PURE__ */ jsx(StrikePriceStyled, { children: priceProps.strikePrice }) : null,
-      /* @__PURE__ */ jsxs(PriceOrientationStyled, { orientation, align, itemProp: productName ? "price" : void 0, content: productName ? price : void 0, children: [
-        /* @__PURE__ */ jsx(PriceStyled, { size: priceProps.size, children: priceToRender }),
-        /* @__PURE__ */ jsx(PriceSuffixStyled, { children: priceProps.suffix })
-      ] })
-    ] })
-  ] });
-};
 const TabularPriceInnerWrapperStyled = styled.div.withConfig({
   shouldForwardProp: shouldForwardPropExcluding(["aria-live"]),
   displayName: "TabularPriceInnerWrapperStyled",
@@ -174,28 +135,41 @@ const TabularPrice = ({
   productName,
   ...props
 }) => {
+  const priceIdBase = useId();
   const prefixLines = props.prefix.split("\n");
+  const prefixTextId = `${priceIdBase}-visible-prefix`;
+  const priceTextId = `${priceIdBase}-price`;
+  const strikePriceTextId = `${priceIdBase}-strike`;
+  const standardPriceTextId = `${priceIdBase}-standard-label`;
+  const offerPriceTextId = `${priceIdBase}-offer-label`;
+  const ariaLabelledBy = props.strikePrice ? `${prefixTextId} ${standardPriceTextId} ${strikePriceTextId} ${offerPriceTextId} ${priceTextId}` : `${prefixTextId} ${priceTextId}`;
   return /* @__PURE__ */ jsxs(PriceOuterWrapperStyled, { className: props.className, ...{
     "aria-live": props["aria-live"]
   }, ...{
-    "aria-label": createScreenReaderText(props.price, props.strikePrice, props.prefix)
+    "aria-labelledby": ariaLabelledBy
   }, children: [
     productName && /* @__PURE__ */ jsx("meta", { itemProp: "name", content: productName }),
-    /* @__PURE__ */ jsxs(TabularPriceInnerWrapperStyled, { ...props, ...{
-      "aria-hidden": true
-    }, itemProp: productName ? "offers" : void 0, itemType: productName ? "https://schema.org/Offer" : void 0, itemScope: productName ? true : void 0, children: [
+    /* @__PURE__ */ jsxs(TabularPriceInnerWrapperStyled, { ...props, itemProp: productName ? "offers" : void 0, itemType: productName ? "https://schema.org/Offer" : void 0, itemScope: productName ? true : void 0, children: [
       productName && /* @__PURE__ */ jsx("meta", { itemProp: "priceCurrency", content: "EUR" }),
-      /* @__PURE__ */ jsx(TabularPricePrefixStyled, { prefixWeight, children: prefixLines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(TabularPricePrefixStyled, { id: prefixTextId, prefixWeight, children: prefixLines.map((line, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
         line,
         index < prefixLines.length - 1 && /* @__PURE__ */ jsx("br", {})
       ] }, index)) }),
-      props.strikePrice ? /* @__PURE__ */ jsx(TabularPriceStrikePriceStyled, { children: props.strikePrice }) : null,
-      /* @__PURE__ */ jsx(TabularPricePriceStyled, { size: props.size, itemProp: productName ? "price" : void 0, content: productName ? props.price : void 0, children: props.price })
+      props.strikePrice ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        /* @__PURE__ */ jsx(ScreenreaderOnly, { id: standardPriceTextId, children: "Standardpreis" }),
+        /* @__PURE__ */ jsx(TabularPriceStrikePriceStyled, { id: strikePriceTextId, children: props.strikePrice }),
+        /* @__PURE__ */ jsx(ScreenreaderOnly, { id: offerPriceTextId, children: "Angebotspreis" })
+      ] }) : null,
+      /* @__PURE__ */ jsx(TabularPricePriceStyled, { id: priceTextId, size: props.size, itemProp: productName ? "price" : void 0, content: productName ? props.price : void 0, children: props.price })
     ] })
   ] });
 };
 export {
-  Price as P,
+  PriceOuterWrapperStyled as P,
+  StrikePriceStyled as S,
   TabularPrice as T,
-  createScreenReaderText as c
+  PriceInnerWrapperStyled as a,
+  PriceOrientationStyled as b,
+  PriceStyled as c,
+  PriceSuffixStyled as d
 };

package/dist/{index-BR6u6rvI.js → index-CW-UuGll.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a as ButtonIconStyled } from "./styled-DRNdxc1V.js";
+import { a as ButtonIconStyled } from "./styled-BJ9cE7xy.js";
 import { i as iconSizeSm } from "./IconSize-Da9zhR76.js";
 import styled from "styled-components";
 import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
@@ -12,7 +12,7 @@ import { g as getSpacing } from "./index-l-i-mIeP.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { p as primaryAppearance } from "./Appearance-CIB-YW3f.js";
 import { c as colorBorderFocus } from "./BorderColor-BACbvI20.js";
-import { a as borderWidthFocus } from "./BorderWidth-OZWeXaq_.js";
+import { b as borderWidthFocus } from "./BorderWidth-CwrNKc0Q.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-Dj-qX3Z5.js";
 import { t as textBodyMd } from "./TextBodySize-CP9q4gRv.js";
 import { f as colorTextBrand, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";

package/dist/{index-iCvdBgcJ.js → index-C_6tWuWh.js}

@@ -9,7 +9,7 @@ import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
 import { g as getSpacing } from "./index-l-i-mIeP.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { f as colorBorderSubtle } from "./BorderColor-BACbvI20.js";
-import { e as borderWidthDivider } from "./BorderWidth-OZWeXaq_.js";
+import { e as borderWidthDivider } from "./BorderWidth-CwrNKc0Q.js";
 import { d as spacingXl, s as spacingMd } from "./Spacing-Dj-qX3Z5.js";
 import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
 import { s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";

package/dist/{index-C9M-9a7m.js → index-Cms5ie2I.js}

@@ -5,8 +5,8 @@ import { useFocusWithin } from "./hooks/useFocusWithin/index.js";
 import { l as liTagName, u as ulTagName } from "./tags-BeNegJAK.js";
 import { s as spacingMd, b as spacingNone } from "./Spacing-Dj-qX3Z5.js";
 import styled from "styled-components";
-import { C as CardStyled } from "./styled-bzTYGIm_.js";
-import { a as GridStyled, G as GridItemStyled } from "./styled-DhKlciPC.js";
+import { C as CardStyled } from "./styled-DDY0xAl_.js";
+import { a as GridStyled, G as GridItemStyled } from "./styled-Dfbxuq_p.js";
 import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
 import forcedColors from "./foundations/media-query/forcedColors/index.js";
 import { v as viewport } from "./index-CG4uiVbZ.js";
@@ -15,8 +15,8 @@ import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
 import { g as getSpacing } from "./index-l-i-mIeP.js";
-import { d as borderRadiusFull } from "./BorderRadius-Co-IV3fn.js";
-import { d as borderWidthSm } from "./BorderWidth-OZWeXaq_.js";
+import { d as borderRadiusFull } from "./BorderRadius-0jhn76gB.js";
+import { d as borderWidthSm } from "./BorderWidth-CwrNKc0Q.js";
 import { d as colorObjectBrand, g as colorObjectUnselected } from "./ObjectColor-CSHEae46.js";
 import { s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
 import IconButton from "./components/IconButton/index.js";

package/dist/{index-DQ_p1dIc.js → index-CpuHeI4h.js}

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import AccordionGroup from "./components/AccordionGroup/index.js";
-import { C as Container } from "./index-iCvdBgcJ.js";
+import { C as Container } from "./index-C_6tWuWh.js";
 import FootnoteContent from "./components/FootnoteContent/index.js";
 import Heading from "./components/Heading/index.js";
-import { R as RichText } from "./index-XoIBkRyI.js";
+import { R as RichText } from "./index-BLp5wi_X.js";
 import { a as textHeadingSm, c as textHeadingLg } from "./HeadingSize-O__w72MO.js";
 import parse from "html-react-parser";
 const getFootnoteContent = (content, footnoteContentBacklinkText) => {

package/dist/{index-BIa9NKUU.js → index-DqdKVD9N.js}

@@ -1,12 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { i as iconSizeSm } from "./IconSize-Da9zhR76.js";
 import { l as leftPosition } from "./PositionType-BIdZQO2H.js";
-import { a as ButtonIconStyled, b as buttonHeight } from "./styled-DRNdxc1V.js";
+import { a as ButtonIconStyled, b as buttonHeight } from "./styled-BJ9cE7xy.js";
 import { useLinkComponent } from "./hooks/useLinkComponent/index.js";
 import { s as sanitizeLinkProps } from "./sanitizeLinkProps-D2Kkovy1.js";
 import { a as shouldForwardPropExcluding, p as pickDomProps } from "./shouldForwardProp-CONMmlMa.js";
 import styled from "styled-components";
-import { g as getButtonAppearance } from "./ButtonAppearanceHelper-BQUk7S3X.js";
+import { g as getButtonAppearance } from "./ButtonAppearanceHelper-3qIbHGWJ.js";
 import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
 import { v as viewport } from "./index-CG4uiVbZ.js";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
@@ -14,7 +14,7 @@ import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { g as getSpacing } from "./index-l-i-mIeP.js";
-import { b as borderRadiusMd } from "./BorderRadius-Co-IV3fn.js";
+import { b as borderRadiusMd } from "./BorderRadius-0jhn76gB.js";
 import { p as primaryAppearance } from "./ButtonAppearances-BEMZJMeh.js";
 import { f as fontWeightRegular } from "./FontWeight-C8c-UnWu.js";
 import { s as spacingMd, b as spacingNone, a as spacingXs, d as spacingXl } from "./Spacing-Dj-qX3Z5.js";

package/dist/{index-B0jIyAgf.js → index-E0RMtc9X.js}

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { l as liTagName, d as divTagName, u as ulTagName, r as olTagName } from "./tags-BeNegJAK.js";
 import { s as spacingMd } from "./Spacing-Dj-qX3Z5.js";
-import { G as GridItemStyled, a as GridStyled } from "./styled-DhKlciPC.js";
+import { G as GridItemStyled, a as GridStyled } from "./styled-Dfbxuq_p.js";
 import "./props-B4dAdfyc.js";
 const resolveBreakpoints = (config) => {
   const sm = config.sm ?? 12;

package/dist/{index-CWByESA7.js → index-h88pZ6zH.js}

@@ -13,10 +13,10 @@ import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js"
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
 import { g as getSpacing } from "./index-l-i-mIeP.js";
-import { d as borderRadiusFull } from "./BorderRadius-Co-IV3fn.js";
+import { d as borderRadiusFull } from "./BorderRadius-0jhn76gB.js";
 import { a as fontWeightBold } from "./FontWeight-C8c-UnWu.js";
 import { a as textBodySm, t as textBodyMd } from "./TextBodySize-CP9q4gRv.js";
-import { g as getForegroundColor } from "./colorUtils-CfSj2Iqa.js";
+import { g as getForegroundColor } from "./colorUtils-c9PiZEci.js";
 import { s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
 import { B as BadgeAppearanceColor } from "./props-Dt5kqR3j.js";
 const BadgeStyled = styled.span.withConfig({

package/dist/{index-Dn3We7oE.js → index-p9ZTAIzJ.js}

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
-import { B as Badge } from "./index-CWByESA7.js";
+import { B as Badge } from "./index-h88pZ6zH.js";
 import ColorSwatch from "./components/ColorSwatch/index.js";
 import styled from "styled-components";
 import IconLoader from "./components/IconLoader/index.js";
@@ -26,8 +26,8 @@ import { getOpacity } from "./foundations/token/getOpacity/index.js";
 import { g as getSpacing } from "./index-l-i-mIeP.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { a as colorBackgroundNeutral } from "./BackgroundColor-Ba4D10TC.js";
-import { b as borderRadiusMd } from "./BorderRadius-Co-IV3fn.js";
-import { a as borderWidthFocus, c as borderWidthSelected } from "./BorderWidth-OZWeXaq_.js";
+import { b as borderRadiusMd } from "./BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus, c as borderWidthSelected } from "./BorderWidth-CwrNKc0Q.js";
 import { f as fontWeightRegular, a as fontWeightBold } from "./FontWeight-C8c-UnWu.js";
 import { o as opacityOverlay } from "./Opacity-smkGiwsf.js";
 import { a as colorTextNeutral } from "./TextColor-DsntmDNw.js";

package/dist/index-xzvddlgp.js

@@ -0,0 +1,345 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { B as Badge } from "./index-h88pZ6zH.js";
+import IconLoader from "./components/IconLoader/index.js";
+import { c as spanTagName } from "./tags-BeNegJAK.js";
+import { h as iconSizeMd } from "./IconSize-Da9zhR76.js";
+import { s as smallSize } from "./SizeTypes-Ck_RdzIf.js";
+import { s as spacingMd, a as spacingXs, b as spacingNone } from "./Spacing-Dj-qX3Z5.js";
+import { useLinkComponent } from "./hooks/useLinkComponent/index.js";
+import { s as sanitizeLinkProps } from "./sanitizeLinkProps-D2Kkovy1.js";
+import { s as shouldForwardProp, a as shouldForwardPropExcluding, p as pickDomProps } from "./shouldForwardProp-CONMmlMa.js";
+import { a as linkListItemVariantHorizontal, b as linkListItemVariantVertical } from "./props-KyOo_gFu.js";
+import styled from "styled-components";
+import Body from "./components/Body/index.js";
+import Card from "./components/Card/index.js";
+import Icon from "./components/Icon/index.js";
+import { translateLayoutPropsToCss } from "./foundations/layout/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";
+import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getHeadingSize } from "./foundations/token/getHeadingSize/index.js";
+import { getHoverColor } from "./foundations/token/getHoverColor/index.js";
+import { getIconColor } from "./foundations/token/getIconColor/index.js";
+import { g as getSpacing } from "./index-l-i-mIeP.js";
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { c as colorBorderFocus, f as colorBorderSubtle } from "./BorderColor-BACbvI20.js";
+import { b as borderRadiusMd, a as borderRadiusNone } from "./BorderRadius-0jhn76gB.js";
+import { b as borderWidthFocus, d as borderWidthSm } from "./BorderWidth-CwrNKc0Q.js";
+import { t as textHeadingXs } from "./HeadingSize-O__w72MO.js";
+import { b as colorIconBrand } from "./IconColor-CtC9WUgr.js";
+import { a as colorTextNeutral, f as colorTextBrand } from "./TextColor-DsntmDNw.js";
+import { C as CardAppearanceColor } from "./props-DDJfToj8.js";
+const focusStyles = {
+  ...forcedColors({
+    outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+  }),
+  boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+  outline: "none"
+};
+const hoverBackgroundColor = getHoverColor(CardAppearanceColor["primary"]);
+const hoverStylesChangingBackground = {
+  transitionProperty: "background, color, box-shadow",
+  transitionDuration: "0.2s",
+  transitionTimingFunction: ease_in_sine,
+  "&:hover, &:focus-visible": {
+    background: hoverBackgroundColor
+  }
+};
+const LinkListItemButtonStyled = styled.button.withConfig({
+  shouldForwardProp,
+  displayName: "LinkListItemButtonStyled",
+  componentId: "sc-1dmfu9f-0"
+})({
+  width: "100%",
+  height: "100%",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: getTextColor(colorTextNeutral),
+  borderRadius: getBorderRadius(borderRadiusMd),
+  "&:focus-visible": focusStyles,
+  ...forcedColors({
+    border: `${getBorderWidth(borderWidthSm)} solid ButtonBorder`,
+    background: "ButtonFace",
+    color: "ButtonText"
+  })
+}, ({
+  elevation = true,
+  orientation
+}) => {
+  if (!elevation && orientation === linkListItemVariantHorizontal) {
+    return {
+      borderRadius: getBorderRadius(borderRadiusNone),
+      transitionProperty: "color",
+      transitionDuration: "0.2s",
+      transitionTimingFunction: ease_in_sine,
+      "&:hover, &:focus-visible": {
+        color: getTextColor(colorTextBrand)
+      }
+    };
+  }
+});
+const buttonParent = `${LinkListItemButtonStyled.toString()} &`;
+const LinkListItemAnchorStyled = styled.span.withConfig({
+  shouldForwardProp: shouldForwardPropExcluding(["href"]),
+  displayName: "LinkListItemAnchorStyled",
+  componentId: "sc-1dmfu9f-1"
+})({
+  height: "100%",
+  "& > a": {
+    textDecoration: "none",
+    display: "block",
+    height: "100%",
+    color: getTextColor(colorTextNeutral),
+    "&:focus-visible": focusStyles,
+    "&:hover, &:focus": {
+      textDecoration: "none"
+    },
+    "&:visited": {
+      color: getTextColor(colorTextNeutral)
+    }
+  }
+}, ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout), ({
+  elevation = true,
+  orientation
+}) => {
+  if (!elevation && orientation === linkListItemVariantHorizontal) {
+    return {
+      "& > a": {
+        borderRadius: getBorderRadius(borderRadiusNone),
+        transitionProperty: "color",
+        transitionDuration: "0.2s",
+        transitionTimingFunction: ease_in_sine,
+        "&:hover, &:focus-visible": {
+          color: getTextColor(colorTextBrand)
+        }
+      }
+    };
+  }
+  return {
+    "& > a": {
+      borderRadius: getBorderRadius(borderRadiusMd)
+    }
+  };
+});
+const parentHasFocusSelector = `${LinkListItemAnchorStyled.toString()}:focus-within &, ${LinkListItemButtonStyled.toString()}:focus-within &`;
+const LinkListItemStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "LinkListItemStyled",
+  componentId: "sc-1dmfu9f-2"
+})({
+  display: "block",
+  height: "100%",
+  padding: `${getSpacing(spacingMd)} 0`,
+  borderBottom: `${getBorderWidth(borderWidthSm)} solid ${getBorderColor(colorBorderSubtle)}`,
+  borderTop: `${getBorderWidth(borderWidthSm)} solid ${getBorderColor(colorBorderSubtle)}`,
+  ...forcedColors({
+    borderBottom: `${getBorderWidth(borderWidthSm)} solid CanvasText`,
+    borderTop: `${getBorderWidth(borderWidthSm)} solid CanvasText`,
+    [buttonParent]: {
+      borderBottom: "none"
+    }
+  })
+}, ({
+  orientation
+}) => {
+  if (orientation === linkListItemVariantVertical) {
+    return {
+      ...hoverStylesChangingBackground,
+      borderRadius: getBorderRadius(borderRadiusMd),
+      border: `${getBorderWidth(borderWidthSm)} solid ${getBorderColor(colorBorderSubtle)}`,
+      padding: getSpacing(spacingMd),
+      [parentHasFocusSelector]: {
+        background: hoverBackgroundColor
+      },
+      ...forcedColors({
+        border: `${getBorderWidth(borderWidthSm)} solid CanvasText`,
+        [buttonParent]: {
+          border: `${getBorderWidth(borderWidthSm)} solid ButtonBorder`
+        },
+        "&:hover, &:focus-visible": {
+          background: "inherit"
+        },
+        [parentHasFocusSelector]: {
+          background: "inherit"
+        }
+      })
+    };
+  }
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const LinkListItemElevatedStyled = styled(Card).withConfig({
+  displayName: "LinkListItemElevatedStyled",
+  componentId: "sc-1dmfu9f-3"
+})({
+  ...hoverStylesChangingBackground,
+  ...forcedColors({
+    [buttonParent]: {
+      border: `${getBorderWidth(borderWidthSm)} solid ButtonBorder`,
+      background: "ButtonFace",
+      color: "ButtonText"
+    }
+  }),
+  height: "100%"
+}, () => {
+  return {
+    [parentHasFocusSelector]: {
+      background: hoverBackgroundColor
+    },
+    ...forcedColors({
+      [parentHasFocusSelector]: {
+        background: "inherit"
+      }
+    })
+  };
+});
+const LinkListItemContentWrapperStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "LinkListItemContentWrapperStyled",
+  componentId: "sc-1dmfu9f-4"
+})({
+  display: "flex"
+}, ({
+  orientation = linkListItemVariantHorizontal
+}) => {
+  return {
+    alignItems: orientation === linkListItemVariantVertical ? "flex-start" : "center",
+    flexDirection: orientation === linkListItemVariantVertical ? "column" : "row",
+    gap: orientation === linkListItemVariantVertical ? getSpacing(spacingXs) : getSpacing(spacingNone)
+  };
+});
+const LinkListItemContentStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "LinkListItemContentStyled",
+  componentId: "sc-1dmfu9f-5"
+})({
+  flexGrow: 1,
+  display: "flex",
+  gap: getSpacing(spacingXs),
+  flexDirection: "row",
+  width: "100%",
+  "& > *": {
+    flexShrink: 0
+  }
+}, ({
+  orientation = linkListItemVariantHorizontal
+}) => {
+  return {
+    alignItems: orientation === linkListItemVariantVertical ? "flex-start" : "center",
+    paddingRight: orientation === linkListItemVariantVertical ? getSpacing(spacingNone) : getSpacing(spacingXs)
+  };
+});
+const LinkListItemVerticalContentStyled = styled.span.withConfig({
+  displayName: "LinkListItemVerticalContentStyled",
+  componentId: "sc-1dmfu9f-6"
+})({
+  flexGrow: 1,
+  gap: getSpacing(spacingXs),
+  display: "flex",
+  flexDirection: "column",
+  flexShrink: 1,
+  minWidth: 0
+});
+const LinkListItemLabelWrapperStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "LinkListItemLabelWrapperStyled",
+  componentId: "sc-1dmfu9f-7"
+})({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  alignItems: "flex-start",
+  flexShrink: 1
+});
+const LinkListLabelStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "LinkListLabelStyled",
+  componentId: "sc-1dmfu9f-8"
+})(getHeadingSize(textHeadingXs), {
+  textAlign: "left",
+  overflowWrap: "break-word",
+  hyphens: "auto",
+  maxWidth: "100%"
+});
+const LinkListSuffixStyled = styled(Body).withConfig({
+  displayName: "LinkListSuffixStyled",
+  componentId: "sc-1dmfu9f-9"
+})({
+  color: "inherit"
+});
+const LinkListItemChevronStyled = styled(Icon).withConfig({
+  displayName: "LinkListItemChevronStyled",
+  componentId: "sc-1dmfu9f-10"
+})({
+  flexGrow: 0,
+  flexShrink: 0,
+  color: getIconColor(colorIconBrand)
+});
+const isLinkListItemAsButtonProp = (props) => {
+  return props.href === void 0;
+};
+const LinkListItemVisualContent = ({
+  icon,
+  label,
+  suffix,
+  badge,
+  orientation
+}) => {
+  const LinkListIcon = icon ? /* @__PURE__ */ jsx(IconLoader, { name: icon, size: iconSizeMd }) : void 0;
+  const LinkListLabel = /* @__PURE__ */ jsx(LinkListLabelStyled, { children: label });
+  const LinkListSuffix = suffix ? /* @__PURE__ */ jsx(LinkListSuffixStyled, { tag: spanTagName, bottomSpacing: spacingNone, children: suffix }) : void 0;
+  const LinkListBadge = badge ? /* @__PURE__ */ jsx(Badge, { ...badge, size: smallSize, bottomSpacing: spacingNone }) : void 0;
+  const LinkListChevron = /* @__PURE__ */ jsx(LinkListItemChevronStyled, { name: "ChevronRight", size: iconSizeMd });
+  return /* @__PURE__ */ jsx(LinkListItemContentWrapperStyled, { orientation, children: orientation === linkListItemVariantHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(LinkListItemContentStyled, { orientation, children: [
+      LinkListIcon,
+      /* @__PURE__ */ jsxs(LinkListItemLabelWrapperStyled, { children: [
+        LinkListLabel,
+        LinkListSuffix
+      ] }),
+      LinkListBadge
+    ] }),
+    LinkListChevron
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(LinkListItemContentStyled, { orientation, children: [
+      /* @__PURE__ */ jsxs(LinkListItemVerticalContentStyled, { children: [
+        LinkListIcon,
+        /* @__PURE__ */ jsxs(LinkListItemLabelWrapperStyled, { children: [
+          LinkListLabel,
+          LinkListSuffix
+        ] })
+      ] }),
+      LinkListChevron
+    ] }),
+    LinkListBadge
+  ] }) });
+};
+const LinkListItem = (props) => {
+  const {
+    icon,
+    label,
+    suffix,
+    badge,
+    orientation,
+    elevation
+  } = props;
+  const Content = /* @__PURE__ */ jsx(LinkListItemVisualContent, { icon, label, suffix, badge, orientation });
+  const Item = elevation ? /* @__PURE__ */ jsx(LinkListItemElevatedStyled, { tag: "span", children: Content }) : /* @__PURE__ */ jsx(LinkListItemStyled, { orientation, bottomSpacing: props.bottomSpacing, children: Content });
+  if (isLinkListItemAsButtonProp(props)) {
+    return /* @__PURE__ */ jsx(LinkListItemButtonStyled, { ...props, children: Item });
+  }
+  const LinkComponent = useLinkComponent();
+  return /* @__PURE__ */ jsx(LinkListItemAnchorStyled, { elevation, orientation, layout: props.layout, children: /* @__PURE__ */ jsx(LinkComponent, { ...sanitizeLinkProps(pickDomProps(props)), children: Item }) });
+};
+export {
+  LinkListItem as L,
+  LinkListItemStyled as a
+};

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export * from './components/YouTubeVideo';
 export { default as YouTubeVideo } from './components/YouTubeVideo';
+export * from './components/Video';
+export { default as Video } from './components/Video';
 export * from './components/UtilityLink';
 export { default as UtilityLink } from './components/UtilityLink';
 export * from './components/Tray';