@vodafone_de/brix-components 3.1.6 → 3.1.8

package/components/PickerGroup/components/PickerElementImage/styled.d.ts

@@ -0,0 +1 @@
+export declare const PickerElementImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../../../Image').ImageProps, never>> & string & Omit<import('react').FC<import('../../../Image').ImageProps>, keyof import('react').Component<any, {}, any>>;

package/components/PickerGroup/components/PickerElementLabel/styled.d.ts

@@ -0,0 +1 @@
+export declare const PickerElementLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/components/PickerGroup/components/PickerElementSuffix/styled.d.ts

@@ -0,0 +1 @@
+export declare const PickerElementSuffixStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/components/PickerGroup/index.d.ts

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

package/components/PickerGroup/index.js

@@ -0,0 +1,281 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const components_Fieldset = require("../Fieldset/index.js");
+const props = require("../../props-DJ2g0nfk.cjs");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const react = require("react");
+const components_Grid = require("../Grid/index.js");
+const index = require("../../index-_A9hEpl9.cjs");
+const components_Badge = require("../../index-CnLaY-bi.cjs");
+const components_ColorSwatch = require("../ColorSwatch/index.js");
+const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
+const styled = require("styled-components");
+const components_Image = require("../Image/index.js");
+const foundations_mediaQuery_viewport = require("../../index-DuE6C2cO.cjs");
+const components_GridItem = require("../GridItem/index.js");
+const components_ScreenreaderOnly = require("../../index-DVXE2AnG.cjs");
+const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
+const foundations_token_getBackgroundColor = require("../../foundations/token/getBackgroundColor/index.js");
+const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
+const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
+const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
+const foundations_token_getFontWeight = require("../../foundations/token/getFontWeight/index.js");
+const foundations_token_getHoverColor = require("../../foundations/token/getHoverColor/index.js");
+const foundations_token_getOpacity = require("../../foundations/token/getOpacity/index.js");
+const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
+const foundations_token_getTextColor = require("../../foundations/token/getTextColor/index.js");
+const BackgroundColor = require("../../BackgroundColor-C3dayRDw.cjs");
+const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
+const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
+const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
+const Opacity = require("../../Opacity-gfDZhzig.cjs");
+const TextColor = require("../../TextColor-BZDXH1wP.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const foundations_token_getHeadingSize = require("../../foundations/token/getHeadingSize/index.js");
+const HeadingSize = require("../../HeadingSize-cjNplkhN.cjs");
+const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
+const TextBodySize = require("../../TextBodySize-DeP5RE2m.cjs");
+const PickerElementIconStyled = styled(index.IconLoader).withConfig({
+  displayName: "PickerElementIconStyled",
+  componentId: "sc-sucu78-0"
+})({
+  marginLeft: "auto",
+  marginRight: "auto",
+  display: "block"
+});
+const PickerElementSystemIcon = (props2) => /* @__PURE__ */ jsxRuntime.jsx(PickerElementIconStyled, { ...props2 });
+const PickerElementImageStyled = styled(components_Image.default).withConfig({
+  displayName: "PickerElementImageStyled",
+  componentId: "sc-9xmld2-0"
+})({
+  width: "96px",
+  height: "96px"
+}, foundations_mediaQuery_viewport.viewport.md({
+  width: "120px",
+  height: "120px"
+}));
+const PickerElementImage = (props2) => /* @__PURE__ */ jsxRuntime.jsx(PickerElementImageStyled, { ...props2, horizontalAlignment: "center", aspectRatio: components_Image.aspectRatio1_1 });
+const PickerGridItemStyled = styled(components_GridItem).withConfig({
+  displayName: "PickerGridItemStyled",
+  componentId: "sc-1lwsao6-0"
+})({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "stretch"
+});
+const PickerLabelElementStyled = styled.label.withConfig({
+  shouldForwardProp: filterProps.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.filterProps(),
+  displayName: "PickerCardStyled",
+  componentId: "sc-1lwsao6-2"
+})(
+  {
+    height: "100%",
+    flexDirection: "column",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)}`,
+    gap: foundations_token_getSpacing.getSpacing(Spacing.spacing2Xs),
+    fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightRegular),
+    transition: `font-weight 0.3s ease-out`,
+    borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusMd)
+  },
+  () => {
+    const backgroundColor = foundations_token_getBackgroundColor.getBackgroundColor(BackgroundColor.colorBackgroundNeutral);
+    const color = foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral);
+    return {
+      ...foundations_mediaQuery_forcedColors.default({
+        border: "1px solid CanvasText"
+      }),
+      backgroundColor,
+      color
+    };
+  },
+  // everything related to "borders"
+  ({
+    isChecked
+  }) => {
+    const focusColor = foundations_token_getBorderColor.getBorderColor("colorBorderFocus");
+    const selectedBorderColor = foundations_token_getBorderColor.getBorderColor("colorBorderSelected");
+    const unselectedBorderColor = foundations_token_getBorderColor.getBorderColor("colorBorderUnselected");
+    const hoverBorderColor = foundations_token_getBorderColor.getBorderColor("colorBorderNeutral");
+    if (isChecked) {
+      return {
+        boxShadow: `inset ${selectedBorderColor} 0px 0px 0px ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthSelected)}`,
+        "&:focus-within": {
+          ...foundations_mediaQuery_forcedColors.default({
+            outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
+          }),
+          boxShadow: `${focusColor} 0px 0px 0px ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)}, inset ${selectedBorderColor} 0px 0px 0px ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthSelected)}`
+        },
+        "&:hover": {
+          ...foundations_mediaQuery_forcedColors.default({
+            background: "SelectedItem"
+          }),
+          background: foundations_token_getHoverColor.getHoverColor(BackgroundColor.colorBackgroundNeutral)
+        }
+      };
+    }
+    return {
+      boxShadow: `inset ${unselectedBorderColor} 0px 0px 0px 1px`,
+      "&:hover": {
+        background: foundations_token_getHoverColor.getHoverColor(BackgroundColor.colorBackgroundNeutral),
+        boxShadow: `inset ${hoverBorderColor} 0px 0px 0px 1px`
+      },
+      "&:focus-within": {
+        ...foundations_mediaQuery_forcedColors.default({
+          outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
+        }),
+        boxShadow: `${focusColor} 0px 0px 0px 4px, inset ${unselectedBorderColor} 0px 0px 0px 1px`
+      }
+    };
+  },
+  ({
+    isChecked
+  }) => {
+    if (!isChecked) {
+      return {};
+    }
+    return {
+      ...foundations_mediaQuery_forcedColors.default({
+        background: "SelectedItem",
+        color: "SelectedItemText"
+      }),
+      outline: "none",
+      fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightBold)
+    };
+  },
+  ({
+    isDisabled
+  }) => {
+    if (!isDisabled) {
+      return {};
+    }
+    return {
+      opacity: foundations_token_getOpacity.getOpacity(Opacity.opacityOverlay)
+    };
+  }
+);
+const PickerInputElementStyled = styled.input.withConfig({
+  displayName: "PickerInputElementStyled",
+  componentId: "sc-1lwsao6-3"
+})(components_ScreenreaderOnly.screenreaderOnly);
+const PickerElementLabelStyled = styled.span.withConfig({
+  displayName: "PickerElementLabelStyled",
+  componentId: "sc-a082l8-0"
+})({
+  display: "block"
+}, foundations_token_getHeadingSize.getHeadingSize(HeadingSize.textHeadingXs));
+const PickerElementSuffixStyled = styled.span.withConfig({
+  displayName: "PickerElementSuffixStyled",
+  componentId: "sc-juaaw0-0"
+})({
+  display: "block"
+}, foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd));
+const createChildren = ({
+  value,
+  ...props2
+}) => {
+  const children = [];
+  if (props2.imagePath) {
+    children.push(/* @__PURE__ */ jsxRuntime.jsx(PickerElementImage, { src: props2.imagePath, alt: props2.label }, `${value}-image`));
+  }
+  if (props2.colorValue) {
+    children.push(/* @__PURE__ */ jsxRuntime.jsx(components_ColorSwatch.default, { color: props2.colorValue, size: "md" }, `${value}-color`));
+  }
+  if (props2.inlineIconName) {
+    children.push(/* @__PURE__ */ jsxRuntime.jsx(PickerElementSystemIcon, { size: index.iconSizeMd, name: props2.inlineIconName }, `${value}-icon`));
+  }
+  children.push(/* @__PURE__ */ jsxRuntime.jsx(PickerElementLabelStyled, { children: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(props2.label) }, `${value}-label`));
+  if (props2.suffix) {
+    children.push(/* @__PURE__ */ jsxRuntime.jsx(PickerElementSuffixStyled, { children: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(props2.suffix) }, `${value}-subline`));
+  }
+  if (props2.badge) {
+    children.push(/* @__PURE__ */ jsxRuntime.jsx(components_Badge.Badge, { ...props2.badge, bottomSpacing: Spacing.spacingNone }));
+  }
+  return children;
+};
+const Picker = ({
+  labelProps = {},
+  inputProps = {},
+  ...props2
+}) => {
+  const children = createChildren(props2);
+  const onChange = (event) => {
+    if (inputProps.onChange) {
+      inputProps.onChange(event);
+    }
+    if (props2.handleChange) {
+      props2.handleChange(props2.value);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(PickerLabelElementStyled, { ...labelProps, isChecked: props2.isChecked === true, isDisabled: props2.isDisabled === true, children: /* @__PURE__ */ jsxRuntime.jsxs(PickerCardStyled, { isChecked: props2.isChecked === true, isDisabled: props2.isDisabled === true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(PickerInputElementStyled, { ...inputProps, type: "radio", name: props2.name, value: props2.value, checked: props2.isChecked, disabled: props2.isDisabled, onChange }),
+    children
+  ] }) });
+};
+const Pickers = ({
+  gridConfig = {
+    sm: 12,
+    md: 6,
+    lg: 3
+  },
+  ...props2
+}) => {
+  const [checked, setChecked] = react.useState(props2.checkedValue);
+  const handleChange = (value) => {
+    setChecked(value);
+    props2.onUpdate(value);
+  };
+  react.useEffect(() => {
+    if (checked === props2.checkedValue) {
+      return;
+    }
+    setChecked(props2.checkedValue);
+  }, [props2.checkedValue]);
+  const pickers = props2.pickers.map(({
+    key,
+    ...picker
+  }) => {
+    const isChecked = checked === picker.value;
+    key = key ? key : picker.value;
+    return /* @__PURE__ */ jsxRuntime.jsx(PickerGridItemStyled, { ...gridConfig, children: /* @__PURE__ */ jsxRuntime.jsx(Picker, { ...picker, name: props2.name, isChecked, isDisabled: props2.disabled, handleChange, children: picker.children }) }, key);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(components_Grid, { stretch: true, bottomSpacing: props2.bottomSpacing, children: pickers });
+};
+const PickerGroup = ({
+  component: _component,
+  uid,
+  name,
+  checkedValue,
+  pickers,
+  onUpdate,
+  gridConfig,
+  status,
+  disabled,
+  ...props$1
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(components_Fieldset, { ...props$1, status, uid: `fieldset-${uid}`, children: /* @__PURE__ */ jsxRuntime.jsx(Pickers, { uid, name, checkedValue, pickers, onUpdate, gridConfig, bottomSpacing: props$1.helperText || status === props.inputStateError && props$1.errorMessage ? Spacing.spacingMd : Spacing.spacingNone, disabled }) });
+};
+module.exports = PickerGroup;

package/components/PickerGroup/props.d.ts

@@ -0,0 +1,29 @@
+import { FieldsetSharedProps } from '../Fieldset/props';
+import { GridConfig } from '../Grid/props';
+import { PickerProps } from './components/Picker/props';
+export interface PickerGroupProps extends FieldsetSharedProps {
+    /**
+     * Will be passed down to picker as input name
+     */
+    name: string;
+    /**
+     * Value of Picker that is checked
+     */
+    checkedValue: string;
+    /**
+     * Array of PickerProps
+     */
+    pickers: PickerProps[];
+    /**
+     * function that is called on every update. The only parameter of this function is the currently checked value.
+     */
+    onUpdate: (a: string) => void;
+    /**
+     * Config of grid to align pickers
+     */
+    gridConfig?: GridConfig;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'PickerGroup';
+}

package/components/Price/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { PriceProps } from './props';
+import { TabularPriceProps } from '../TabularPrice/props';
+export declare const createScreenReaderText: (price: PriceProps["price"], strikePrice: PriceProps["strikePrice"], suffix: PriceProps["suffix"]) => string;
+declare const Price: FC<PriceProps | TabularPriceProps>;
+export default Price;
+export * from './props';

package/components/Price/index.js

@@ -0,0 +1,18 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("react/jsx-runtime");
+require("../../index-DVXE2AnG.cjs");
+require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
+const components_Price = require("../../index-BxxkHUxs.cjs");
+exports.createScreenReaderText = components_Price.createScreenReaderText;
+exports.default = components_Price.Price;
+exports.internalizePriceProps = components_Price.internalizePriceProps;
+exports.priceAlignCenter = components_Price.priceAlignCenter;
+exports.priceAlignLeft = components_Price.priceAlignLeft;
+exports.priceDefaultProps = components_Price.priceDefaultProps;
+exports.priceOrientationHorizontal = components_Price.priceOrientationHorizontal;
+exports.priceOrientationVertical = components_Price.priceOrientationVertical;
+exports.priceSizeLg = components_Price.priceSizeLg;
+exports.priceSizeMd = components_Price.priceSizeMd;
+exports.priceSizeSm = components_Price.priceSizeSm;

package/components/Price/props.d.ts

@@ -0,0 +1,65 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { Spacing } from '../../foundations/token/types/Spacing';
+export declare const priceOrientationHorizontal = "horizontal";
+export declare const priceOrientationVertical = "vertical";
+export type PriceOrientation = typeof priceOrientationHorizontal | typeof priceOrientationVertical;
+export declare const priceSizeSm = "sm";
+export declare const priceSizeMd = "md";
+export declare const priceSizeLg = "lg";
+export type PriceSize = typeof priceSizeSm | typeof priceSizeMd | typeof priceSizeLg;
+export declare const priceAlignLeft = "left";
+export declare const priceAlignCenter = "center";
+export type PriceAlign = typeof priceAlignLeft | typeof priceAlignCenter;
+export interface PriceSharedProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Price' | 'TabularPrice';
+    /**
+     * Changes font size of main price
+     */
+    size: PriceSize;
+    /**
+     * Striked through price
+     */
+    strikePrice?: string;
+    /**
+     * Main price
+     */
+    price?: string;
+    /**
+     * Product name that renders microdata attributes needed for SEO if set
+     */
+    offerProductName?: string;
+}
+export interface PriceProps extends PriceSharedProps {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Price';
+    /**
+     * Orientation of price contents
+     */
+    orientation?: PriceOrientation;
+    /**
+     * Suffix after price
+     */
+    suffix: string;
+    /**
+     * Text to be shown before price
+     */
+    prefix?: string;
+    /**
+     * Horizontal alignment of whole price component
+     * has no effect on tabular orientation
+     */
+    align?: PriceAlign;
+}
+export declare const priceDefaultProps: Partial<PriceProps>;
+export interface PriceInternalProps extends Omit<PriceProps, 'orientation'> {
+    $orientation: PriceOrientation;
+    bottomSpacing: Spacing;
+    align: PriceAlign;
+}
+export declare const internalizePriceProps: (props: PriceProps) => PriceInternalProps;

package/components/Price/styled.d.ts

@@ -0,0 +1,7 @@
+import { PriceProps, PriceSharedProps } from './props';
+export declare const PriceOuterWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PriceInnerWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PriceProps>> & string;
+export declare const StrikePriceStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PriceOrientationStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<PriceProps, "align" | "orientation">>> & string;
+export declare const PriceStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<PriceSharedProps, "size">>> & string;
+export declare const PriceSuffixStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/components/ProductCard/index.d.ts

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

package/components/ProductCard/index.js

@@ -0,0 +1,80 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../index-_A9hEpl9.cjs");
+const components_Image = require("../Image/index.js");
+const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
+const HeadingSize = require("../../HeadingSize-cjNplkhN.cjs");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const components_Badge = require("../../index-CnLaY-bi.cjs");
+const components_Body = require("../Body/index.js");
+const components_ColorSwatchGroup = require("../ColorSwatchGroup/index.js");
+const components_Heading = require("../Heading/index.js");
+const components_Link = require("../Link/index.js");
+const components_Price = require("../../index-BxxkHUxs.cjs");
+const styled = require("styled-components");
+const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
+const components_Card = require("../Card/index.js");
+const components_Icon = require("../Icon/index.js");
+const ProductCardStyled = styled(components_Card.default).withConfig({
+  displayName: "ProductCardStyled",
+  componentId: "sc-1ps8gys-0"
+})({
+  gap: foundations_token_getSpacing.getSpacing(Spacing.spacingMd),
+  alignItems: "center",
+  position: "relative",
+  justifyContent: "space-between"
+});
+const ProductCardIconStyled = styled(components_Icon.default).withConfig({
+  displayName: "ProductCardIconStyled",
+  componentId: "sc-1ps8gys-1"
+})({
+  position: "absolute",
+  right: foundations_token_getSpacing.getSpacing(Spacing.spacingNone)
+});
+const ProductCardUpperContentStyled = styled("div").withConfig({
+  displayName: "ProductCardUpperContentStyled",
+  componentId: "sc-1ps8gys-2"
+})({
+  gap: foundations_token_getSpacing.getSpacing(Spacing.spacingMd),
+  alignItems: "center",
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+});
+const ProductCardImageStyled = styled(components_Image.default).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__ */ jsxRuntime.jsxs(ProductCardStyled, { ...props, id: `ProductCard-${productId}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ProductCardUpperContentStyled, { children: [
+      image && /* @__PURE__ */ jsxRuntime.jsx("a", { href: link.href, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(ProductCardImageStyled, { ...image, aspectRatio: components_Image.aspectRatio1_1 }) }),
+      icon && /* @__PURE__ */ jsxRuntime.jsx(ProductCardIconStyled, { ...icon, size: index.iconSizeLg }),
+      /* @__PURE__ */ jsxRuntime.jsx(components_Heading.default, { ...heading, size: HeadingSize.textHeadingMd, weight: FontWeight.fontWeightBold, bottomSpacing: Spacing.spacingNone, id: headingId, align: "center" }),
+      colorSwatchGroup && /* @__PURE__ */ jsxRuntime.jsx(components_ColorSwatchGroup, { ...colorSwatchGroup, bottomSpacing: Spacing.spacingNone }),
+      badges && badges.length > 0 && badges.map((badge) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(components_Badge.Badge, { ...badge, bottomSpacing: Spacing.spacingNone }, badge.children);
+      }),
+      price && /* @__PURE__ */ jsxRuntime.jsx(components_Price.Price, { ...price, orientation: components_Price.priceOrientationVertical, align: components_Price.priceAlignCenter, size: components_Price.priceSizeMd, bottomSpacing: Spacing.spacingNone }),
+      body && /* @__PURE__ */ jsxRuntime.jsx(components_Body.default, { ...body, bottomSpacing: Spacing.spacingNone, align: "center" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_Link, { ...link, bottomSpacing: Spacing.spacingNone, "aria-describedby": headingId })
+  ] });
+};
+module.exports = ProductCard;

package/components/ProductCard/props.d.ts

@@ -0,0 +1,33 @@
+import { HTMLAttributes } from 'react';
+import { BadgeProps } from '../Badge/props';
+import { BodyProps } from '../Body/props';
+import { ColorSwatchGroupProps } from '../ColorSwatchGroup/props';
+import { HeadingProps } from '../Heading/props';
+import { IconProps } from '../Icon/props';
+import { ImageProps } from '../Image/props';
+import { LinkProps } from '../Link/props';
+import { PriceProps } from '../Price/props';
+export interface ProductCardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'ProductCard';
+    /** URL of page that opens when the card is clicked */
+    link: LinkProps;
+    /** Heading*/
+    heading: Omit<HeadingProps, 'size' | 'bottomSpacing' | 'weight' | 'align'>;
+    /** URL of product image*/
+    image?: Omit<ImageProps, 'aspectRatio'>;
+    /** unique product id*/
+    productId: string;
+    /** Icon in top right corner */
+    icon?: IconProps;
+    /** Body text */
+    body?: Omit<BodyProps, 'bottomSpacing' | 'align'>;
+    /** Color swatch  */
+    colorSwatchGroup?: ColorSwatchGroupProps;
+    /** Array of badges   */
+    badges?: BadgeProps[];
+    /** Price of the product */
+    price: Omit<PriceProps, 'orientation' | 'align' | 'size' | 'bottomSpacing'>;
+}

package/components/ProductCard/styled.d.ts

@@ -0,0 +1,6 @@
+import { CardProps } from '../Card/props';
+import { IconProps } from '../Icon/props';
+export declare const ProductCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<CardProps, CardProps>> & string & Omit<import('react').FC<CardProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ProductCardIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | IconProps, IconProps>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | IconProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ProductCardUpperContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never>> & string;
+export declare const ProductCardImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Image').ImageProps, never>> & string & Omit<import('react').FC<import('../Image').ImageProps>, keyof import('react').Component<any, {}, any>>;

package/components/RadioGroup/components/Radio/assets/RadioSVG.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { RadioProps } from '../props';
+export declare const RadioSVG: FC<Pick<RadioProps, 'checked' | 'status'>>;

package/components/RadioGroup/components/Radio/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { RadioProps } from './props';
+declare const Radio: FC<RadioProps>;
+export default Radio;

package/components/RadioGroup/components/Radio/props.d.ts

@@ -0,0 +1,15 @@
+import { InputHTMLAttributes } from 'react';
+import { InputSharedProps, InputStatus } from '../../../Input/props';
+export interface RadioProps extends Omit<InputSharedProps, 'message'>, InputHTMLAttributes<HTMLInputElement> {
+    value: string;
+    label: string;
+    status?: InputStatus;
+    /**
+     * function that is called on every update.
+     */
+    onUpdate?: (value: string, checked: boolean) => void;
+    /**
+     *
+     */
+    component?: 'Radio';
+}

package/components/RadioGroup/components/Radio/styled.d.ts

@@ -0,0 +1,8 @@
+import { RadioProps } from './props';
+export declare const RadioContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../../../Flex').FlexProps, Pick<RadioProps, "disabled">>> & string & Omit<import('react').FC<import('../../../Flex').FlexProps>, keyof import('react').Component<any, {}, any>>;
+export declare const RadioStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RadioInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Pick<RadioProps, "status" | "checked">>> & string;
+export declare const RadioLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../../../Label').LabelProps, never>> & string & Omit<import('react').FC<import('../../../Label').LabelProps>, keyof import('react').Component<any, {}, any>>;
+export declare const RadioSVGStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGSVGElement>, never>> & string;
+export declare const RadioFillingCircleStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGCircleElement>, never>> & string;
+export declare const RadioBorderPathStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGCircleElement>, Pick<RadioProps, "status" | "checked">>> & string;

package/components/RadioGroup/index.d.ts

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