@vodafone_de/brix-components 3.1.7 → 3.1.9

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 { a as inputStateError } from "../../props-DDpgcryb.js";
+import { d as spacing2Xs, a as spacingMd, s as spacingSm, c as spacingNone } from "../../Spacing-B-7SYaM_.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-DE9iZx_0.js";
+import ColorSwatch from "../ColorSwatch/index.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.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, c as borderWidthSelected } from "../../BorderWidth-eg_mz82k.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 { a as textBodyMd } from "../../TextBodySize-ovWXXu9n.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/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/dist/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/dist/components/Price/index.js

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

package/dist/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/dist/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/dist/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/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 { a as spacingMd, c as spacingNone } from "../../Spacing-B-7SYaM_.js";
+import { B as Badge } from "../../index-DE9iZx_0.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, d as priceSizeMd, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-DH6pW0wc.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
+};

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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/dist/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';