@vodafone_de/brix-components 3.0.1 → 3.0.3

package/dist/components/Notification/index.js

@@ -0,0 +1,181 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { df as IconLoader, iv as iconSizeSm } from "../../index-Cbojl4_Q.js";
+import Body from "../Body/index.js";
+import Button from "../Button/index.js";
+import ButtonGroup from "../ButtonGroup/index.js";
+import Flex from "../Flex/index.js";
+import Heading from "../Heading/index.js";
+import Link from "../Link/index.js";
+import { R as RichText } from "../../index-D6hvbziL.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { e as colorBorderCritical, f as colorBorderWarning, d as colorBorderSuccess, k as colorBorderInformation } from "../../BorderColor-BummoQ1-.js";
+import { h as colorObjectCritical, i as colorObjectWarning, e as colorObjectSuccess, j as colorObjectInformation } from "../../ObjectColor-BZDBuV8H.js";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/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 { getIconColor } from "../../foundations/token/getIconColor/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
+import { g as borderWidthMd } from "../../BorderWidth-DfOlyKK7.js";
+import { d as colorIconInverse } from "../../IconColor-CtC9WUgr.js";
+import { s as spacingMd, c as spacingSm } from "../../Spacing-D0HQH9YJ.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const notificationStatusVariants = {
+  info: {
+    borderColor: getBorderColor(colorBorderInformation),
+    background: getObjectColor(colorObjectInformation),
+    icon: "NotificationInfo"
+  },
+  success: {
+    borderColor: getBorderColor(colorBorderSuccess),
+    background: getObjectColor(colorObjectSuccess),
+    icon: "NotificationTick"
+  },
+  warning: {
+    borderColor: getBorderColor(colorBorderWarning),
+    background: getObjectColor(colorObjectWarning),
+    icon: "NotificationError"
+  },
+  error: {
+    borderColor: getBorderColor(colorBorderCritical),
+    background: getObjectColor(colorObjectCritical),
+    icon: "NotificationError"
+  }
+};
+const notificationStatusInfo = "info";
+const notificationStatusSuccess = "success";
+const notificationStatusWarning = "warning";
+const notificationStatusError = "error";
+const NotificationStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "NotificationStyled",
+  componentId: "sc-17ezdxf-0"
+})({
+  display: "flex",
+  borderWidth: getBorderWidth(borderWidthMd),
+  borderRadius: getBorderRadius(borderRadiusMd),
+  borderStyle: "solid"
+}, ({
+  status
+}) => {
+  const {
+    borderColor
+  } = notificationStatusVariants[status];
+  return {
+    ...forcedColors({
+      borderColor: "CanvasText"
+    }),
+    borderColor
+  };
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const NotificationSidebarStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "NotificationSidebarStyled",
+  componentId: "sc-17ezdxf-1"
+})({
+  ...forcedColors({
+    color: "Canvas"
+  }),
+  color: getIconColor(colorIconInverse),
+  padding: getSpacing(spacingSm),
+  display: "flex",
+  alignItems: "center"
+}, ({
+  status
+}) => {
+  const {
+    background
+  } = notificationStatusVariants[status];
+  return {
+    ...forcedColors({
+      background: "CanvasText"
+    }),
+    background
+  };
+});
+const NotificationWrapperStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "NotificationWrapperStyled",
+  componentId: "sc-17ezdxf-2"
+})({
+  padding: getSpacing(spacingMd),
+  flexGrow: 1,
+  background: getBackgroundColor(colorBackgroundNeutral),
+  borderRadius: getBorderRadius(borderRadiusMd),
+  "& > *:last-child": {
+    marginBottom: "0px"
+  }
+});
+const statusLabels = {
+  [notificationStatusError]: "Fehler",
+  [notificationStatusInfo]: "Information",
+  [notificationStatusWarning]: "Warnung",
+  [notificationStatusSuccess]: "Erfolgreich"
+};
+const getContents = (contents) => {
+  return contents.map((content) => {
+    if ("Heading" === content.component) {
+      return /* @__PURE__ */ jsx(Heading, { ...content, bottomSpacing: "Xs", children: content.children }, content.uid);
+    }
+    if ("Body" === content.component) {
+      return /* @__PURE__ */ jsx(Body, { ...content, bottomSpacing: "Sm", children: content.children }, content.uid);
+    }
+    if ("RichText" === content.component) {
+      return /* @__PURE__ */ jsx(RichText, { ...content, bottomSpacing: "Sm" }, content.uid);
+    }
+    if ("Link" === content.component) {
+      return /* @__PURE__ */ jsx(Link, { ...content, bottomSpacing: "Sm", children: content.children }, content.uid);
+    }
+    if ("Button" === content.component || "ButtonAsLink" === content.component) {
+      return /* @__PURE__ */ jsx(Button, { ...content, bottomSpacing: "Sm", children: content.children }, content.uid);
+    }
+    if ("ButtonGroup" === content.component) {
+      return /* @__PURE__ */ jsx(ButtonGroup, { ...content, bottomSpacing: "Sm" }, content.uid);
+    }
+    if ("Flex" === content.component) {
+      return /* @__PURE__ */ jsx(Flex, { ...content, bottomSpacing: "Sm", children: content.children }, content.uid);
+    }
+    return null;
+  });
+};
+const getNotificationLabel = (status, contents) => {
+  const statusLabel = statusLabels[status];
+  const heading = contents.filter((content) => content.component === "Heading");
+  const body = contents.filter((content) => content.component === "Body");
+  if (heading.length > 0) return `${statusLabel}: ${heading[0].children}`;
+  if (body.length > 0) return `${statusLabel}: ${body[0].children}`;
+  return statusLabel;
+};
+const Notification = ({
+  contents,
+  status = notificationStatusInfo,
+  uid,
+  ...props
+}) => {
+  const {
+    icon
+  } = notificationStatusVariants[status];
+  const label = getNotificationLabel(status, contents);
+  const notificationId = `notification-${uid}`;
+  return /* @__PURE__ */ jsxs(NotificationStyled, { ...props, status, role: "group", "aria-live": [notificationStatusError, notificationStatusWarning].indexOf(status) === -1 ? "polite" : "assertive", "aria-atomic": false, "aria-label": label, id: notificationId, children: [
+    /* @__PURE__ */ jsx(NotificationSidebarStyled, { status, children: /* @__PURE__ */ jsx(IconLoader, { name: icon, size: iconSizeSm }) }),
+    /* @__PURE__ */ jsx(NotificationWrapperStyled, { children: getContents(contents) })
+  ] });
+};
+export {
+  Notification as default,
+  notificationStatusError,
+  notificationStatusInfo,
+  notificationStatusSuccess,
+  notificationStatusWarning
+};

package/dist/components/Overlay/index.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { b as colorBackgroundOverlayStatic } from "../../BackgroundColor-JObp_2xA.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const overlayAppearancePrimary = "primary";
+const overlayAppearanceSecondary = "secondary";
+const OverlayStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "OverlayStyled",
+  componentId: "sc-1fdzrvx-0"
+})({
+  height: "100%",
+  width: "100%"
+}, ({
+  appearance = overlayAppearancePrimary
+}) => {
+  return appearance === overlayAppearanceSecondary ? {
+    background: getBackgroundColor(colorBackgroundOverlayStatic)
+  } : {
+    background: "#0d0d0d99"
+  };
+});
+const Overlay = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(OverlayStyled, { ...props, children });
+export {
+  Overlay as default,
+  overlayAppearancePrimary,
+  overlayAppearanceSecondary
+};

package/dist/components/PickerGroup/index.js

@@ -0,0 +1,282 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Fieldset from "../Fieldset/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { e as spacing2Xs, s as spacingMd, c as spacingSm, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { useState, useEffect } from "react";
+import Grid from "../Grid/index.js";
+import { df as IconLoader, iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
+import { B as Badge } from "../../index-C0N671c1.js";
+import ColorSwatch from "../ColorSwatch/index.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import styled from "styled-components";
+import Image, { aspectRatio1_1 } from "../Image/index.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
+import GridItem from "../GridItem/index.js";
+import { s as screenreaderOnly } from "../../index-DQhtQZ85.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.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 { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
+import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
+import { getOpacity } from "../../foundations/token/getOpacity/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderWidthFocus, d as borderWidthSelected } from "../../BorderWidth-DfOlyKK7.js";
+import { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { o as opacityOverlay } from "../../Opacity-smkGiwsf.js";
+import { a as colorTextNeutral } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
+import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
+const PickerElementIconStyled = styled(IconLoader).withConfig({
+  displayName: "PickerElementIconStyled",
+  componentId: "sc-sucu78-0"
+})({
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "block"
+});
+const PickerElementSystemIcon = (props) => /* @__PURE__ */ jsx(PickerElementIconStyled, { ...props });
+const PickerElementImageStyled = styled(Image).withConfig({
+  displayName: "PickerElementImageStyled",
+  componentId: "sc-9xmld2-0"
+})({
+  width: "96px",
+  height: "96px"
+}, viewport.md({
+  width: "120px",
+  height: "120px"
+}));
+const PickerElementImage = (props) => /* @__PURE__ */ jsx(PickerElementImageStyled, { ...props, horizontalAlignment: "center", aspectRatio: aspectRatio1_1 });
+const PickerGridItemStyled = styled(GridItem).withConfig({
+  displayName: "PickerGridItemStyled",
+  componentId: "sc-1lwsao6-0"
+})({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "stretch"
+});
+const PickerLabelElementStyled = styled.label.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "PickerLabelElementStyled",
+  componentId: "sc-1lwsao6-1"
+})({
+  height: "100%",
+  position: "relative",
+  cursor: "pointer"
+}, ({
+  isDisabled
+}) => {
+  if (!isDisabled) {
+    return {};
+  }
+  return {
+    cursor: "not-allowed",
+    pointerEvents: "none"
+  };
+});
+const PickerCardStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "PickerCardStyled",
+  componentId: "sc-1lwsao6-2"
+})(
+  {
+    height: "100%",
+    flexDirection: "column",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    padding: `${getSpacing(spacingMd)} ${getSpacing(spacingSm)}`,
+    gap: getSpacing(spacing2Xs),
+    fontWeight: getFontWeight(fontWeightRegular),
+    transition: `font-weight 0.3s ease-out`,
+    borderRadius: getBorderRadius(borderRadiusMd)
+  },
+  () => {
+    const backgroundColor = getBackgroundColor(colorBackgroundNeutral);
+    const color = getTextColor(colorTextNeutral);
+    return {
+      ...forcedColors({
+        border: "1px solid CanvasText"
+      }),
+      backgroundColor,
+      color
+    };
+  },
+  // everything related to "borders"
+  ({
+    isChecked
+  }) => {
+    const focusColor = getBorderColor("colorBorderFocus");
+    const selectedBorderColor = getBorderColor("colorBorderSelected");
+    const unselectedBorderColor = getBorderColor("colorBorderUnselected");
+    const hoverBorderColor = getBorderColor("colorBorderNeutral");
+    if (isChecked) {
+      return {
+        boxShadow: `inset ${selectedBorderColor} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`,
+        "&:focus-within": {
+          ...forcedColors({
+            outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+          }),
+          boxShadow: `${focusColor} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}, inset ${selectedBorderColor} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}`
+        },
+        "&:hover": {
+          ...forcedColors({
+            background: "SelectedItem"
+          }),
+          background: getHoverColor(colorBackgroundNeutral)
+        }
+      };
+    }
+    return {
+      boxShadow: `inset ${unselectedBorderColor} 0px 0px 0px 1px`,
+      "&:hover": {
+        background: getHoverColor(colorBackgroundNeutral),
+        boxShadow: `inset ${hoverBorderColor} 0px 0px 0px 1px`
+      },
+      "&:focus-within": {
+        ...forcedColors({
+          outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+        }),
+        boxShadow: `${focusColor} 0px 0px 0px 4px, inset ${unselectedBorderColor} 0px 0px 0px 1px`
+      }
+    };
+  },
+  ({
+    isChecked
+  }) => {
+    if (!isChecked) {
+      return {};
+    }
+    return {
+      ...forcedColors({
+        background: "SelectedItem",
+        color: "SelectedItemText"
+      }),
+      outline: "none",
+      fontWeight: getFontWeight(fontWeightBold)
+    };
+  },
+  ({
+    isDisabled
+  }) => {
+    if (!isDisabled) {
+      return {};
+    }
+    return {
+      opacity: getOpacity(opacityOverlay)
+    };
+  }
+);
+const PickerInputElementStyled = styled.input.withConfig({
+  displayName: "PickerInputElementStyled",
+  componentId: "sc-1lwsao6-3"
+})(screenreaderOnly);
+const PickerElementLabelStyled = styled.span.withConfig({
+  displayName: "PickerElementLabelStyled",
+  componentId: "sc-a082l8-0"
+})({
+  display: "block"
+}, getHeadingSize(textHeadingXs));
+const PickerElementSuffixStyled = styled.span.withConfig({
+  displayName: "PickerElementSuffixStyled",
+  componentId: "sc-juaaw0-0"
+})({
+  display: "block"
+}, getBodySize(textBodyMd));
+const createChildren = ({
+  value,
+  ...props
+}) => {
+  const children = [];
+  if (props.imagePath) {
+    children.push(/* @__PURE__ */ jsx(PickerElementImage, { src: props.imagePath, alt: props.label }, `${value}-image`));
+  }
+  if (props.colorValue) {
+    children.push(/* @__PURE__ */ jsx(ColorSwatch, { color: props.colorValue, size: "md" }, `${value}-color`));
+  }
+  if (props.inlineIconName) {
+    children.push(/* @__PURE__ */ jsx(PickerElementSystemIcon, { size: iconSizeMd, name: props.inlineIconName }, `${value}-icon`));
+  }
+  children.push(/* @__PURE__ */ jsx(PickerElementLabelStyled, { children: renderInlineRichTextFromOpenText(props.label) }, `${value}-label`));
+  if (props.suffix) {
+    children.push(/* @__PURE__ */ jsx(PickerElementSuffixStyled, { children: renderInlineRichTextFromOpenText(props.suffix) }, `${value}-subline`));
+  }
+  if (props.badge) {
+    children.push(/* @__PURE__ */ jsx(Badge, { ...props.badge, bottomSpacing: spacingNone }));
+  }
+  return children;
+};
+const Picker = ({
+  labelProps = {},
+  inputProps = {},
+  ...props
+}) => {
+  const children = createChildren(props);
+  const onChange = (event) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(event);
+    }
+    if (props.handleChange) {
+      props.handleChange(props.value);
+    }
+  };
+  return /* @__PURE__ */ jsx(PickerLabelElementStyled, { ...labelProps, isChecked: props.isChecked === true, isDisabled: props.isDisabled === true, children: /* @__PURE__ */ jsxs(PickerCardStyled, { isChecked: props.isChecked === true, isDisabled: props.isDisabled === true, children: [
+    /* @__PURE__ */ jsx(PickerInputElementStyled, { ...inputProps, type: "radio", name: props.name, value: props.value, checked: props.isChecked, disabled: props.isDisabled, onChange }),
+    children
+  ] }) });
+};
+const Pickers = ({
+  gridConfig = {
+    sm: 12,
+    md: 6,
+    lg: 3
+  },
+  ...props
+}) => {
+  const [checked, setChecked] = useState(props.checkedValue);
+  const handleChange = (value) => {
+    setChecked(value);
+    props.onUpdate(value);
+  };
+  useEffect(() => {
+    if (checked === props.checkedValue) {
+      return;
+    }
+    setChecked(props.checkedValue);
+  }, [props.checkedValue]);
+  const pickers = props.pickers.map(({
+    key,
+    ...picker
+  }) => {
+    const isChecked = checked === picker.value;
+    key = key ? key : picker.value;
+    return /* @__PURE__ */ jsx(PickerGridItemStyled, { ...gridConfig, children: /* @__PURE__ */ jsx(Picker, { ...picker, name: props.name, isChecked, isDisabled: props.disabled, handleChange, children: picker.children }) }, key);
+  });
+  return /* @__PURE__ */ jsx(Grid, { stretch: true, bottomSpacing: props.bottomSpacing, children: pickers });
+};
+const PickerGroup = ({
+  component: _component,
+  uid,
+  name,
+  checkedValue,
+  pickers,
+  onUpdate,
+  gridConfig,
+  status,
+  disabled,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Fieldset, { ...props, status, uid: `fieldset-${uid}`, children: /* @__PURE__ */ jsx(Pickers, { uid, name, checkedValue, pickers, onUpdate, gridConfig, bottomSpacing: props.helperText || status === inputStateError && props.errorMessage ? spacingMd : spacingNone, disabled }) });
+};
+export {
+  PickerGroup as default
+};

package/dist/components/Price/index.js

@@ -0,0 +1,18 @@
+"use client";
+import "react/jsx-runtime";
+import "../../index-DQhtQZ85.js";
+import "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import { e, P, i, a, d, h, f, b, g, p, c } from "../../index-CeJsIf3Z.js";
+export {
+  e as createScreenReaderText,
+  P as default,
+  i as internalizePriceProps,
+  a as priceAlignCenter,
+  d as priceAlignLeft,
+  h as priceDefaultProps,
+  f as priceOrientationHorizontal,
+  b as priceOrientationVertical,
+  g as priceSizeLg,
+  p as priceSizeMd,
+  c as priceSizeSm
+};

package/dist/components/ProductCard/index.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { it as iconSizeLg } from "../../index-Cbojl4_Q.js";
+import Image, { aspectRatio1_1 } from "../Image/index.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { a as textHeadingMd } from "../../HeadingSize-CfCRn3Lh.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { B as Badge } from "../../index-C0N671c1.js";
+import Body from "../Body/index.js";
+import ColorSwatchGroup from "../ColorSwatchGroup/index.js";
+import Heading from "../Heading/index.js";
+import Link from "../Link/index.js";
+import { P as Price, p as priceSizeMd, a as priceAlignCenter, b as priceOrientationVertical } from "../../index-CeJsIf3Z.js";
+import styled from "styled-components";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import Card from "../Card/index.js";
+import Icon from "../Icon/index.js";
+const ProductCardStyled = styled(Card).withConfig({
+  displayName: "ProductCardStyled",
+  componentId: "sc-1ps8gys-0"
+})({
+  gap: getSpacing(spacingMd),
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "space-between"
+});
+const ProductCardIconStyled = styled(Icon).withConfig({
+  displayName: "ProductCardIconStyled",
+  componentId: "sc-1ps8gys-1"
+})({
+  position: "absolute",
+  right: getSpacing(spacingNone)
+});
+const ProductCardUpperContentStyled = styled("div").withConfig({
+  displayName: "ProductCardUpperContentStyled",
+  componentId: "sc-1ps8gys-2"
+})({
+  gap: getSpacing(spacingMd),
+  alignItems: "center",
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+});
+const ProductCardImageStyled = styled(Image).withConfig({
+  displayName: "ProductCardImageStyled",
+  componentId: "sc-1ps8gys-3"
+})({
+  height: "200px"
+});
+const ProductCard = ({
+  heading,
+  image,
+  body,
+  colorSwatchGroup,
+  badges,
+  price,
+  link,
+  icon,
+  productId,
+  ...props
+}) => {
+  const headingId = `heading-${productId}`;
+  return /* @__PURE__ */ jsxs(ProductCardStyled, { ...props, id: `ProductCard-${productId}`, children: [
+    /* @__PURE__ */ jsxs(ProductCardUpperContentStyled, { children: [
+      image && /* @__PURE__ */ jsx("a", { href: link.href, tabIndex: -1, children: /* @__PURE__ */ jsx(ProductCardImageStyled, { ...image, aspectRatio: aspectRatio1_1 }) }),
+      icon && /* @__PURE__ */ jsx(ProductCardIconStyled, { ...icon, size: iconSizeLg }),
+      /* @__PURE__ */ jsx(Heading, { ...heading, size: textHeadingMd, weight: fontWeightBold, bottomSpacing: spacingNone, id: headingId, align: "center" }),
+      colorSwatchGroup && /* @__PURE__ */ jsx(ColorSwatchGroup, { ...colorSwatchGroup, bottomSpacing: spacingNone }),
+      badges && badges.length > 0 && badges.map((badge) => {
+        return /* @__PURE__ */ jsx(Badge, { ...badge, bottomSpacing: spacingNone }, badge.children);
+      }),
+      price && /* @__PURE__ */ jsx(Price, { ...price, orientation: priceOrientationVertical, align: priceAlignCenter, size: priceSizeMd, bottomSpacing: spacingNone }),
+      body && /* @__PURE__ */ jsx(Body, { ...body, bottomSpacing: spacingNone, align: "center" })
+    ] }),
+    /* @__PURE__ */ jsx(Link, { ...link, bottomSpacing: spacingNone, "aria-describedby": headingId })
+  ] });
+};
+export {
+  ProductCard as default
+};