@vodafone_de/brix-components 3.1.7 → 3.1.8

package/components/DiscoveryCard/props.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+import { BadgeProps } from '../Badge/props';
+import { ImageProps } from '../Image/props';
+import { LinkProps } from '../Link/props';
+import { PriceProps } from '../Price/props';
+import { PatternProps } from '../../foundations/PatternProps';
+import { BodyProps } from '../Body';
+import { HeadingProps } from '../Heading';
+import { RichTextProps } from '../RichText';
+export declare const discoveryCardOrientationVertical = "vertical";
+export declare const discoveryCardOrientationHorizontal = "horizontal";
+export type DiscoveryCardOrientation = typeof discoveryCardOrientationVertical | typeof discoveryCardOrientationHorizontal;
+export interface DiscoveryCardProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    component?: 'DiscoveryCard';
+    /**
+     * discovery card can be orientated either vertical or horizontal.
+     */
+    orientation?: DiscoveryCardOrientation;
+    /**
+     * ImageProps are mandatory and it always get rounded corners.
+     * The aspect ratio is 16 to 1 for vertical orientation 9, otherwise 1 to.
+     * This must be taken into account when selecting the asset.
+     */
+    image: Omit<ImageProps, 'corners' | 'aspectRatio'>;
+    /**
+     * optional BadgeProps that is always rendered in small size
+     */
+    badge?: Omit<BadgeProps, 'size' | 'bottomSpacing'>;
+    /**
+     * mandatory HeadingProps. size, weight, align, id, and bottomSpacing should be omitted
+     */
+    heading: Omit<HeadingProps, 'size' | 'weight' | 'align' | 'id' | 'bottomSpacing'>;
+    /**
+     * optional BodyProps. align and bottomSpacing should be omitted. Can also be RichText but with omitted bottomSpacing
+     */
+    body?: Omit<BodyProps, 'align' | 'bottomSpacing'> | Omit<RichTextProps, 'bottomSpacing'>;
+    /**
+     * optional PriceProps. orientation, size, align and bottomSpacing should be omitted
+     */
+    price?: Omit<PriceProps, 'orientation' | 'align' | 'size' | 'bottomSpacing'>;
+    /**
+     * mandatory LinkProps. aria-describedby and bottomSpacing should be omitted
+     */
+    link: Omit<LinkProps, 'bottomSpacing' | 'aria-describedby'>;
+}

package/components/DiscoveryCard/styled.d.ts

@@ -0,0 +1,6 @@
+import { AnchorHTMLAttributes } from 'react';
+import { DiscoveryCardProps } from './props';
+export declare const DiscoveryCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Card').CardProps, Omit<DiscoveryCardProps, "badge" | "heading" | "price" | "uid" | "body" | "link" | "image">>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DiscoveryCardContentyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DiscoveryCardImageLinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, Pick<DiscoveryCardProps, "bottomSpacing" | "orientation"> & AnchorHTMLAttributes<HTMLAnchorElement>>> & string;
+export declare const DiscoveryCardImageStyled: 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/DiscoveryCardGroup/index.d.ts

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

package/components/DiscoveryCardGroup/index.js

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styled = require("styled-components");
+const components_DiscoveryCard = require("../DiscoveryCard/index.js");
+const components_Grid = require("../Grid/index.js");
+const components_GridItem = require("../GridItem/index.js");
+const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const components_LinkAsButton = require("../../index-BMP9PDyg.cjs");
+const DiscoveryCardGroupGridStyled = styled(components_Grid).withConfig({
+  displayName: "DiscoveryCardGroupGridStyled",
+  componentId: "sc-6axszn-0"
+})({
+  alignItems: "stretch"
+});
+const DiscoveryCardGroupGridItemStyled = styled(components_GridItem).withConfig({
+  displayName: "DiscoveryCardGroupGridItemStyled",
+  componentId: "sc-6axszn-1"
+})({
+  gap: foundations_token_getSpacing.getSpacing(Spacing.spacingMd)
+});
+const DiscoveryCardStyled = styled(components_DiscoveryCard.default).withConfig({
+  displayName: "DiscoveryCardStyled",
+  componentId: "sc-6axszn-2"
+})({
+  flex: 1,
+  marginBottom: 0
+}, ({
+  orientation
+}) => {
+  const css = {};
+  if (orientation === components_DiscoveryCard.discoveryCardOrientationVertical) {
+    const buttonSelector = `& ${components_LinkAsButton.LinkStyled.toString()}`;
+    css[buttonSelector] = {
+      marginTop: "auto"
+    };
+  }
+  return css;
+});
+const DiscoveryCardGroup = ({
+  component: _component,
+  discoveryCardsList,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(DiscoveryCardGroupGridStyled, { ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DiscoveryCardGroupGridItemStyled, { sm: 12, md: 6, children: /* @__PURE__ */ jsxRuntime.jsx(DiscoveryCardStyled, { ...discoveryCardsList[0] }) }),
+  /* @__PURE__ */ jsxRuntime.jsxs(DiscoveryCardGroupGridItemStyled, { sm: 12, md: 6, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DiscoveryCardStyled, { ...discoveryCardsList[1] }),
+    /* @__PURE__ */ jsxRuntime.jsx(DiscoveryCardStyled, { ...discoveryCardsList[2] })
+  ] })
+] });
+module.exports = DiscoveryCardGroup;

package/components/DiscoveryCardGroup/props.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'react';
+import { discoveryCardOrientationHorizontal, discoveryCardOrientationVertical, DiscoveryCardProps } from '../DiscoveryCard/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface VerticalDiscoveryCardProps extends DiscoveryCardProps {
+    orientation: typeof discoveryCardOrientationVertical;
+}
+export interface HorizontalDiscoveryCardProps extends DiscoveryCardProps {
+    orientation: typeof discoveryCardOrientationHorizontal;
+}
+export type DiscoveryCardsInGroup = [
+    VerticalDiscoveryCardProps,
+    HorizontalDiscoveryCardProps,
+    HorizontalDiscoveryCardProps
+];
+export interface DiscoveryCardGroupProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    component?: 'DiscoveryCardGroup';
+    /**
+     * Takes exactly three DiscoveryCardProps. The first must be vertical and the others horizontal.
+     */
+    discoveryCardsList: DiscoveryCardProps[];
+}

package/components/DiscoveryCardGroup/styled.d.ts

@@ -0,0 +1,6 @@
+import { DiscoveryCardProps } from '../DiscoveryCard/props';
+import { GridProps } from '../Grid/props';
+import { GridItemProps } from '../GridItem/props';
+export declare const DiscoveryCardGroupGridStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<GridProps, GridProps>> & string & Omit<import('react').FC<GridProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DiscoveryCardGroupGridItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<GridItemProps, GridItemProps>> & string & Omit<import('react').FC<GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DiscoveryCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<DiscoveryCardProps, DiscoveryCardProps>> & string & Omit<import('react').FC<DiscoveryCardProps>, keyof import('react').Component<any, {}, any>>;

package/components/Divider/index.d.ts

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

package/components/Divider/index.js

@@ -0,0 +1,29 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styled = require("styled-components");
+const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
+const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
+const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
+const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
+const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const DividerLineStyled = styled.hr.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "DividerLineStyled",
+  componentId: "sc-1lpd5g7-0"
+})({
+  ...foundations_mediaQuery_forcedColors.default({
+    border: `${foundations_token_getBorderWidth.getBorderWidth("Divider")} solid CanvasText`
+  }),
+  border: `${foundations_token_getBorderWidth.getBorderWidth("Divider")} solid ${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSubtle)}`,
+  borderBottom: "none",
+  width: "100%"
+}, ({
+  bottomSpacing = Spacing.spacingMd
+}) => foundations_token_getBottomSpacing.getBottomSpacing({
+  bottomSpacing
+}));
+const Divider = (props) => /* @__PURE__ */ jsxRuntime.jsx(DividerLineStyled, { ...props });
+module.exports = Divider;

package/components/Divider/props.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface DividerProps extends PatternProps, HTMLAttributes<HTMLHRElement> {
+    component?: 'Divider';
+}

package/components/Divider/styled.d.ts

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

package/components/Fieldset/index.d.ts

@@ -0,0 +1,4 @@
+import { FieldsetProps } from './props';
+declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export default Fieldset;
+export * from './props';

package/components/Fieldset/index.js

@@ -0,0 +1,40 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../index-_A9hEpl9.cjs");
+const react = require("react");
+const components_FormHelperMessage = require("../FormHelperMessage/index.js");
+const props = require("../../props-DJ2g0nfk.cjs");
+const components_Legend = require("../Legend/index.js");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const styled = require("styled-components");
+const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const FieldsetStyled = styled.fieldset.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "FieldsetStyled",
+  componentId: "sc-1838z8i-0"
+})(
+  // Chrome gives a fieldset a min-width equal to its content, so we need to reset it here
+  {
+    minWidth: "0px"
+  },
+  foundations_token_getBottomSpacing.getBottomSpacing
+);
+const Fieldset = react.forwardRef(({
+  uid,
+  legend,
+  errorMessage,
+  helperText,
+  bottomSpacing = Spacing.spacingMd,
+  children,
+  status,
+  ...props$1
+}, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(FieldsetStyled, { ...props$1, uid, "aria-labelledby": props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? `fieldset-legend-${uid} fieldset-message-${uid}` : props$1["aria-labelledby"], bottomSpacing, ref, children: [
+    legend && /* @__PURE__ */ jsxRuntime.jsx(components_Legend, { ...legend, id: props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? `fieldset-legend-${uid}` : props$1["id"] }),
+    children,
+    props.inputStateError !== status && helperText || props.inputStateError === status && errorMessage ? /* @__PURE__ */ jsxRuntime.jsx(components_FormHelperMessage, { id: `fieldset-message-${uid}`, message: props.inputStateError === status ? errorMessage : helperText, status, children: status === props.inputStateError && /* @__PURE__ */ jsxRuntime.jsx(index.NotificationErrorIcon, { size: "iconSizeXs" }) }) : null
+  ] });
+});
+module.exports = Fieldset;

package/components/Fieldset/props.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+import { InputStatus } from '../Input/props';
+import { LegendProps } from '../Legend/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface FieldsetSharedProps extends PatternProps, HTMLAttributes<HTMLFieldSetElement> {
+    /**
+     * A unique id is mandatory
+     */
+    uid: string;
+    /**
+     * A legend is recommended.
+     * Alternatively, a description of the fieldset can also be provided using the aria attribute.
+     */
+    legend?: LegendProps;
+    /**
+     * Message that appears below the input in error state.
+     */
+    errorMessage?: string;
+    /**
+     * Message that appears below the input in default and success state.
+     */
+    helperText?: string;
+    /**
+     * Indicate if the fieldset is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * There are two statii success and error.
+     * Leave status undefined for default input field
+     */
+    status?: InputStatus;
+}
+export interface FieldsetProps extends FieldsetSharedProps {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Fieldset';
+}

package/components/Fieldset/styled.d.ts

@@ -0,0 +1,2 @@
+import { FieldsetProps } from './props';
+export declare const FieldsetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, Omit<FieldsetProps, "legend">>> & string;

package/components/FilterGroup/index.d.ts

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

package/components/FilterGroup/index.js

@@ -0,0 +1,147 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../index-_A9hEpl9.cjs");
+const react = require("react");
+const components_Fieldset = require("../Fieldset/index.js");
+const styled = require("styled-components");
+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_getBodySize = require("../../foundations/token/getBodySize/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_getHoverColor = require("../../foundations/token/getHoverColor/index.js");
+const foundations_token_getObjectColor = require("../../foundations/token/getObjectColor/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 BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
+const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
+const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
+const ObjectColor = require("../../ObjectColor-BrtIOUrJ.cjs");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const TextBodySize = require("../../TextBodySize-DeP5RE2m.cjs");
+const TextColor = require("../../TextColor-BZDXH1wP.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const FilterGroupStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "FilterGroupStyled",
+  componentId: "sc-170zpd1-0"
+})({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral)
+}, {
+  gap: foundations_token_getSpacing.getSpacing(Spacing.spacingXs)
+});
+const FilterStyled = styled.label.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "FilterStyled",
+  componentId: "sc-170zpd1-1"
+})({
+  textDecoration: "none",
+  whiteSpace: "nowrap",
+  userSelect: "none",
+  marginBottom: 0,
+  display: "flex",
+  alignItems: "center",
+  outline: "none",
+  cursor: "pointer",
+  padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingSm)}`,
+  borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusFull),
+  borderStyle: "solid",
+  borderWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthUnselected),
+  gap: `${foundations_token_getSpacing.getSpacing(Spacing.spacingNone)} ${foundations_token_getSpacing.getSpacing(Spacing.spacing2Xs)}`
+}, foundations_token_getBodySize.getBodySize(TextBodySize.textBodyMd), ({
+  checked = false
+}) => {
+  if (!checked) {
+    return {
+      background: foundations_token_getBackgroundColor.getBackgroundColor(BackgroundColor.colorBackgroundNeutral),
+      color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral),
+      borderColor: foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderUnselected),
+      "&:hover, &:focus-within": {
+        background: foundations_token_getHoverColor.getHoverColor(BackgroundColor.colorBackgroundNeutral)
+      },
+      ...foundations_mediaQuery_forcedColors.default({
+        color: "CanvasText",
+        background: "Canvas"
+      })
+    };
+  }
+  return {
+    background: foundations_token_getObjectColor.getObjectColor(ObjectColor.colorObjectSelected),
+    color: foundations_token_getTextColor.getTextColor(TextColor.colorTextInverseStatic),
+    borderColor: foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSelected),
+    "&:hover, &:focus-within": {
+      background: foundations_token_getHoverColor.getHoverColor(ObjectColor.colorObjectSelected)
+    },
+    ...foundations_mediaQuery_forcedColors.default({
+      color: "SelectedItemText",
+      background: "SelectedItem",
+      "&:hover, &:focus-within": {
+        background: "SelectedItem"
+      }
+    })
+  };
+}, {
+  "&:has(:focus-visible)": {
+    ...foundations_mediaQuery_forcedColors.default({
+      outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
+    }),
+    boxShadow: `${foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus)} 0px 0px 0px ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)}`,
+    outline: "none"
+  }
+});
+const FilterIconStyled = styled(index.IconLoader).withConfig({
+  displayName: "FilterIconStyled",
+  componentId: "sc-170zpd1-2"
+})({
+  pointerEvents: "none"
+});
+const FilterInputStyled = styled.input.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "FilterInputStyled",
+  componentId: "sc-170zpd1-3"
+})(components_ScreenreaderOnly.screenreaderOnly);
+const FilterGroup = ({
+  component: _component,
+  uid,
+  elements,
+  onUpdate,
+  ...props
+}) => {
+  const getValuesFromCheckedItems = () => {
+    return elements.reduce((valuesArr, element) => {
+      if (element.checked) {
+        valuesArr.push(element.value);
+      }
+      return valuesArr;
+    }, []);
+  };
+  const [checkedValues, setCheckedValues] = react.useState(getValuesFromCheckedItems());
+  const handleChange = (evt) => {
+    const value = evt.target.value;
+    const index2 = checkedValues.indexOf(value);
+    const updateChecked = [...checkedValues];
+    index2 === -1 ? updateChecked.push(value) : updateChecked.splice(index2, 1);
+    setCheckedValues(updateChecked);
+    onUpdate(updateChecked);
+  };
+  const getFilters = elements.map(({
+    children,
+    ...element
+  }) => {
+    const isChecked = element.value ? checkedValues.includes(element.value) : false;
+    return /* @__PURE__ */ jsxRuntime.jsxs(FilterStyled, { ...element.optionalLabelProps, checked: isChecked, children: [
+      element.iconName ? /* @__PURE__ */ jsxRuntime.jsx(FilterIconStyled, { name: element.iconName, size: index.iconSizeSm }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(FilterInputStyled, { ...element, type: "checkbox", defaultChecked: isChecked, onChange: handleChange }),
+      children
+    ] }, element.value);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(components_Fieldset, { ...props, uid: `fieldset-${uid}`, children: /* @__PURE__ */ jsxRuntime.jsx(FilterGroupStyled, { children: getFilters }) });
+};
+module.exports = FilterGroup;

package/components/FilterGroup/props.d.ts

@@ -0,0 +1,29 @@
+import { IconName } from '@vfde-react/inline-icon-library';
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { FieldsetSharedProps } from '../Fieldset/props';
+export interface FilterProps extends InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * Specify a system icon to be displayed to the left of content.
+     */
+    iconName?: IconName;
+    /**
+     * Content of pill
+     */
+    children: ReactNode;
+    value: string;
+    optionalLabelProps?: HTMLAttributes<HTMLLabelElement>;
+}
+export interface FilterGroupProps extends FieldsetSharedProps {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'FilterGroup';
+    /**
+     * Array of PillProps
+     */
+    elements: FilterProps[];
+    /**
+     * function that is called on every update. The only parameter of this function is an array with the value of each selected pill.
+     */
+    onUpdate: (a: string[]) => void;
+}

package/components/FilterGroup/styled.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export declare const FilterGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, HTMLAttributes<HTMLLabelElement> & {
+    checked?: boolean;
+}>> & string;
+export declare const FilterIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@vfde-react/inline-icon-library').IconLoaderProps, never>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
+export declare const FilterInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/components/Flex/index.d.ts

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

package/components/Flex/index.js

@@ -0,0 +1,16 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const styled = require("../../styled-CL1J-PFC.cjs");
+const Flex = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(styled.FlexStyled, { ...props, children });
+exports.flexJustifyBetween = styled.flexJustifyBetween;
+exports.flexJustifyCenter = styled.flexJustifyCenter;
+exports.flexJustifyEnd = styled.flexJustifyEnd;
+exports.flexJustifyStart = styled.flexJustifyStart;
+exports.flexOrientationHorizontal = styled.flexOrientationHorizontal;
+exports.flexOrientationVertical = styled.flexOrientationVertical;
+exports.default = Flex;

package/components/Flex/props.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { Spacing } from '../../foundations/token/types/Spacing';
+export declare const flexOrientationHorizontal = "horizontal";
+export declare const flexOrientationVertical = "vertical";
+export type FlexOrientation = typeof flexOrientationHorizontal | typeof flexOrientationVertical;
+export declare const flexJustifyStart = "start";
+export declare const flexJustifyEnd = "end";
+export declare const flexJustifyCenter = "center";
+export declare const flexJustifyBetween = "between";
+export type FlexJustifyBehavior = typeof flexJustifyStart | typeof flexJustifyEnd | typeof flexJustifyCenter | typeof flexJustifyBetween;
+export interface FlexProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /**
+     * Orientation in Flex defines the primary axis for laying out children elements:
+     */
+    orientation?: FlexOrientation;
+    /**
+     * Justify controls how the elements are distributed within the container.
+     */
+    justify?: FlexJustifyBehavior;
+    /**
+     * Spacing between items inside of the flex container.
+     */
+    gapSpacing?: Spacing;
+    /**
+     * Whether items are forced onto one line or can wrap onto multiple lines
+     */
+    wrap?: boolean;
+    as?: 'ul' | 'div';
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Flex';
+}

package/components/Flex/stories/autoAndFullItemArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const autoAndFullItemArgs: FlexProps;

package/components/Flex/stories/autoAndFullItemVerticalArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const autoAndFullItemVerticalArgs: FlexProps;

package/components/Flex/stories/fullAndAutoItemArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const fullAndAutoItemArgs: FlexProps;

package/components/Flex/stories/fullAndAutoItemVerticalArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const fullAndAutoItemVerticalArgs: FlexProps;

package/components/Flex/stories/justifyBetweenArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyBetweenArgs: FlexProps;

package/components/Flex/stories/justifyBetweenVerticalArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyBetweenVerticalArgs: FlexProps;

package/components/Flex/stories/justifyCenterArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyCenterArgs: FlexProps;

package/components/Flex/stories/justifyCenterVerticalArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyCenterVerticalArgs: FlexProps;

package/components/Flex/stories/justifyEndArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyEndArgs: FlexProps;

package/components/Flex/stories/justifyEndVerticalArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyEndVerticalArgs: FlexProps;

package/components/Flex/stories/justifyStartArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyStartArgs: FlexProps;

package/components/Flex/stories/justifyStartVerticalArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const justifyStartVerticalArgs: FlexProps;

package/components/Flex/stories/twoFullItemsArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const twoFullItemsArgs: FlexProps;

package/components/Flex/stories/twoFullItemsVerticalArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const twoFullItemsVerticalArgs: FlexProps;

package/components/Flex/stories/xlGapSpacingArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const xlGapSpacingArgs: FlexProps;

package/components/Flex/styled.d.ts

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

package/components/FlexItem/index.d.ts

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