@vodafone_de/brix-components 3.1.7 → 3.1.9

package/dist/components/LinkListItem/styled.d.ts

@@ -0,0 +1,11 @@
+import { LinkListItemAsButtonProps, LinkListItemProps } from './props';
+export declare const LinkListItemButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, LinkListItemAsButtonProps>> & string;
+export declare const LinkListItemAnchorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, LinkListItemProps>> & string;
+export declare const LinkListItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<LinkListItemProps, "bottomSpacing" | "orientation" | "elevation" | "isLastItemInList">>> & string;
+export declare const LinkListItemElevatedStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Card').CardProps, never>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;
+export declare const LinkListItemContentWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<LinkListItemProps, "orientation">>> & string;
+export declare const LinkListItemContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<LinkListItemProps, "orientation">>> & string;
+export declare const LinkListItemVerticalContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LinkListItemLabelWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LinkListLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const LinkListItemChevronStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | import('../Icon').IconProps, import('styled-components/dist/types').BaseObject>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps | import('../HifiIcon').HifiIconProps | import('../Icon').IconProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/LoadingSpinner/LoadingSpinnerSVG.d.ts

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

package/dist/components/LoadingSpinner/index.d.ts

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

package/dist/components/LoadingSpinner/index.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { S as ScreenreaderOnly } from "../../index-DQhtQZ85.js";
+import { L as LoadingSpinnerSVGStyled, a as LoadingSpinnerPathXsStyled, b as LoadingSpinnerPathOuter3Styled, c as LoadingSpinnerPathOuter2Styled, d as LoadingSpinnerPathOuter1Styled, e as LoadingSpinnerPathCenterStyled, f as LoadingSpinnerContainerStyled, g as LoadingSpinnerContentStyled, h as LoadingSpinnerLabelStyled, i as LoadingSpinnerChildrenStyled } from "../../styled-CN4Pw2Cl.js";
+const LoadingSpinnerSVG = ({
+  size = "lg",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(LoadingSpinnerSVGStyled, { viewBox: `0 0 300 300`, ...props, size, children: [
+    /* @__PURE__ */ jsx(LoadingSpinnerPathOuter3Styled, { ...props, d: "M185.65,40.86l-0.22,0c-28.22,0.33-57.74,11.7-78.99,30.42C79.44,93.61,62,129.95,62,163.92\n                c0,26.73,9.87,51.28,27.8,69.13c16.65,16.58,39.06,26.1,61.49,26.1c53.56,0,86.71-44.64,86.71-85.99c0-17.3-4.21-32.61-12.5-45.52\n                c-8.83-13.74-22.04-24.27-39.3-31.38c1.2-3.82,2.98-7.05,5.32-9.65c1.6-1.77,3.69-3.45,4.35-3.9" }),
+    /* @__PURE__ */ jsx(LoadingSpinnerPathOuter2Styled, { ...props, d: "M185.65,47.97l-0.13,0c-26.62,0.31-54.44,11.04-74.45,28.72c-25.49,21.03-41.95,55.25-41.95,87.22\n                c0,24.82,9.13,47.58,25.7,64.09c15.33,15.27,35.91,24.02,56.47,24.02c49.16,0,79.6-40.94,79.6-78.88c0-15.91-3.83-29.93-11.37-41.67\n                c-8.95-13.93-22.94-24.26-41.62-30.77c1.2-7.72,3.99-14.05,8.34-18.87c2.31-2.56,5.35-4.94,6.25-5.4" }),
+    /* @__PURE__ */ jsx(LoadingSpinnerPathOuter1Styled, { ...props, d: "M185.71,55.09l-0.11,0c-25.01,0.29-51.13,10.39-69.92,27.02c-23.97,19.73-39.45,51.82-39.45,81.81\n                c0,22.91,8.38,43.88,23.61,59.05c14,13.95,32.76,21.95,51.45,21.95c44.77,0,72.48-37.25,72.48-71.76c0-23.89-9.47-54.49-53.55-67.42\n                c0.42-7.31,2.21-19.2,10.73-28.65c2.57-2.85,6.31-5.98,8.37-7" }),
+    /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(LoadingSpinnerPathCenterStyled, { ...props, d: "M169.82,69.89c-12.5,15.07-12.76,33.09-12.86,40.02c-0.01,0.41-0.01,0.77-0.02,1.08l-0.12,4.83l4.7,1.14\n                    c32.6,7.94,49.13,26.84,49.13,56.18c0,14.26-5.74,28.76-15.74,39.76c-7.83,8.62-21.76,18.89-43.62,18.89\n                    c-15.25,0-30.62-6.61-42.19-18.13c-12.74-12.68-19.75-30.35-19.75-49.75c0-26.26,13.65-54.43,34.77-71.76l0.09-0.07l0.09-0.08\n                    C136.61,81.07,153.13,73.18,169.82,69.89 M185.71,62.2c-0.01,0-0.02,0-0.03,0c-21.67,0.25-46.87,8.88-65.38,25.32\n                    c-20.87,17.13-36.96,46.26-36.96,76.4c0,45.51,34.73,73.88,67.94,73.88c41.01,0,65.37-34.05,65.37-64.65\n                    c0-30.78-16.84-53.02-53.71-62.01c0.01-0.33,0.01-0.71,0.02-1.15c0.09-6.47,0.34-23.99,12.7-37.68c2.7-2.99,7.17-6.97,10.48-8.61\n                    C187.23,63.17,187.06,62.2,185.71,62.2L185.71,62.2z" }) })
+  ] });
+};
+const LoadingSpinnerXsSVG = ({
+  size = "xs",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(LoadingSpinnerSVGStyled, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", ...props, size, children: /* @__PURE__ */ jsx(LoadingSpinnerPathXsStyled, { d: "M16.5433 9.04214C15.3747 8.41164 14.7394 8.31265 13.241 8.05992C13.241 5.27996 14.9891 2.5 14.9891 2.5C14.9891 2.5 12.2755 2.9686 10.2506 4.26907C8.86921 5.15627 7.57249 6.50626 6.75444 7.8072C5.20219 10.0571 4.92139 12.3496 5.01657 14.2428C5.12333 18.6859 8.78367 22 12.7811 22C16.7785 22 20 18.8298 20 14.7587C20 11.8889 18.6795 10.2393 16.6901 9.12291", ...props }) });
+};
+const LoadingSpinner = ({
+  size = "lg",
+  label,
+  hasOverlay = false,
+  children,
+  bottomSpacing,
+  isActive = false,
+  coversFullPage,
+  screenReaderLabel,
+  screenReaderLabelCompleted,
+  //This default is set as the 'wrapper' element is currently containing the majority of the content of pages from our CMS.
+  getContentElements = () => document.getElementsByClassName("wrapper"),
+  ...props
+}) => {
+  const loadingSpinner = /* @__PURE__ */ jsxs(LoadingSpinnerContainerStyled, { className: props.className, role: isActive ? "progressbar" : void 0, "aria-busy": isActive && !screenReaderLabel ? true : void 0, "aria-live": "polite", "aria-label": isActive ? screenReaderLabel : void 0, coversFullPage, bottomSpacing, children: [
+    isActive && /* @__PURE__ */ jsxs(LoadingSpinnerContentStyled, { size, hasOverlay: coversFullPage ? true : hasOverlay, coversFullPage, children: [
+      size === "xs" ? /* @__PURE__ */ jsx(LoadingSpinnerXsSVG, { ...props, size }) : /* @__PURE__ */ jsx(LoadingSpinnerSVG, { ...props, size }),
+      label && /* @__PURE__ */ jsx(LoadingSpinnerLabelStyled, { size, children: label })
+    ] }),
+    /* @__PURE__ */ jsx(ScreenreaderOnly, { children: isActive ? screenReaderLabel : screenReaderLabelCompleted }),
+    children && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(LoadingSpinnerChildrenStyled, { size, label, bottomSpacing, isActive, ...{
+      inert: isActive ? true : void 0
+    }, children }) })
+  ] });
+  useEffect(() => {
+    if (coversFullPage) {
+      document.body.classList.toggle("HideOverflowY", isActive);
+      const contentElements = getContentElements();
+      for (const element of contentElements) {
+        element.setAttribute("aria-hidden", isActive ? "true" : "false");
+        element.toggleAttribute("inert", isActive);
+      }
+    }
+    return () => {
+      document.body.classList.remove("HideOverflowY");
+      const contentElements = getContentElements();
+      for (const element of contentElements) {
+        element.removeAttribute("aria-hidden");
+        element.removeAttribute("inert");
+      }
+    };
+  }, [isActive, coversFullPage]);
+  return coversFullPage ? createPortal(loadingSpinner, document.body) : loadingSpinner;
+};
+export {
+  LoadingSpinner as default
+};

package/dist/components/LoadingSpinner/props.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode, SVGAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export type LoadingSpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface LoadingSpinnerProps extends PatternProps, SVGAttributes<SVGElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'LoadingSpinner';
+    /**
+     * Card item content
+     */
+    children?: ReactNode;
+    /**
+     * Defines whether the LoadingSpinner has a semi-transparent overlay
+     */
+    hasOverlay?: boolean;
+    /**
+     * Sets a label that is shown underneath the LoadingSpinner
+     */
+    label?: string;
+    /**
+     * Sets a label that is read to screenreader users navigating to the LoadingSpinner while it is still loading.
+     */
+    screenReaderLabel?: string;
+    /**
+     * Sets a label that is read to screenreader users when loading is completed.
+     */
+    screenReaderLabelCompleted?: string;
+    /**
+     * (large | medium | small) - If not provided, the LoadingSpinner size is going to be 'large'
+     */
+    size?: LoadingSpinnerSize;
+    /**
+     * Sets the LoadingSpinner to active and visible on true and hides it on false
+     */
+    isActive?: boolean;
+    /**
+     * Sets the LoadingSpinner to cover the full page. The spinner will also be appended to the body directly via React portal if set.
+     */
+    coversFullPage?: boolean;
+    /**
+     * ONLY FOR FULLSCREEN LOADINGSPINNERS! Defines a function to get the element(s) that hold the content of the page. It is used to set the content to aria-hidden and inert while
+     * they are hidden beneath the overlay of the LoadingSpinner.
+     */
+    getContentElements?: () => HTMLCollectionOf<Element>;
+}

package/dist/components/LoadingSpinner/styled.d.ts

@@ -0,0 +1,20 @@
+import { Spacing } from '../../foundations/token/types/Spacing';
+import { Theme } from '../../foundations/types/Theme';
+import { LoadingSpinnerProps, LoadingSpinnerSize } from './props';
+export declare const loadingSpinnerOverlays: Record<Theme, string>;
+export declare const loadingSpinnerOverlayCssVar = "loadingSpinnerOverlay";
+export declare const calculateSpinnerHeight: (size: LoadingSpinnerSize, bottomSpacing: Spacing, label?: string) => string;
+export declare const spinnerSvgSizes: {
+    [key in LoadingSpinnerSize]: string;
+};
+export declare const LoadingSpinnerContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LoadingSpinnerProps>> & string;
+export declare const LoadingSpinnerContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LoadingSpinnerProps>> & string;
+export declare const LoadingSpinnerChildrenStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, LoadingSpinnerProps>> & string;
+export declare const LoadingSpinnerSVGStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, LoadingSpinnerProps>> & string;
+export declare const LoadingSpinnerPathStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>> & string;
+export declare const LoadingSpinnerPathOuter3Styled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>, never>> & string;
+export declare const LoadingSpinnerPathOuter2Styled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>, never>> & string;
+export declare const LoadingSpinnerPathOuter1Styled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>, never>> & string;
+export declare const LoadingSpinnerPathCenterStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>> & string;
+export declare const LoadingSpinnerPathXsStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGPathElement>, never>> & string;
+export declare const LoadingSpinnerLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Body').BodyProps, LoadingSpinnerProps>> & string & Omit<import('react').FC<import('../Body').BodyProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/Notification/index.d.ts

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

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-DPQJSCi7.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-eg_mz82k.js";
+import { d as colorIconInverse } from "../../IconColor-CtC9WUgr.js";
+import { a as spacingMd, s as spacingSm } from "../../Spacing-B-7SYaM_.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/Notification/notificationStatusVariants.d.ts

@@ -0,0 +1,12 @@
+import { IconName } from '@vfde-react/inline-icon-library';
+import { NotificationStatus } from './props';
+type NotificationStatusVariant = {
+    borderColor: string;
+    background: string;
+    icon: IconName;
+};
+type NotificationStatusVariants = {
+    [key in NotificationStatus]: NotificationStatusVariant;
+};
+export declare const notificationStatusVariants: NotificationStatusVariants;
+export {};

package/dist/components/Notification/props.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import { BodyProps } from '../Body/props';
+import { ButtonProps } from '../Button/props';
+import { ButtonAsLinkProps } from '../ButtonAsLink/props';
+import { ButtonGroupProps } from '../ButtonGroup/props';
+import { FlexProps } from '../Flex/props';
+import { HeadingProps } from '../Heading/props';
+import { LinkProps } from '../Link/props';
+import { RichTextProps } from '../RichText/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const notificationStatusInfo = "info";
+export declare const notificationStatusSuccess = "success";
+export declare const notificationStatusWarning = "warning";
+export declare const notificationStatusError = "error";
+export type NotificationStatus = typeof notificationStatusInfo | typeof notificationStatusSuccess | typeof notificationStatusWarning | typeof notificationStatusError;
+export type NotificationContent = HeadingProps | BodyProps | RichTextProps | ButtonProps | ButtonAsLinkProps | LinkProps | ButtonGroupProps | FlexProps;
+export interface NotificationProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Notification';
+    /**
+     * Notification state 'info' | 'success' | 'warning' | 'error'
+     */
+    status?: NotificationStatus;
+    /**
+     * contents must be an array containing any combination of HeadingProps, BodyProps, RichTextProps ButtonProps and/or LinkProps;
+     */
+    contents: NotificationContent[];
+}

package/dist/components/Notification/styled.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { NotificationStatus } from './props';
+export declare const NotificationStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HTMLAttributes<HTMLDivElement> & PatternProps & {
+    status: NotificationStatus;
+}>> & string;
+export declare const NotificationSidebarStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    status: NotificationStatus;
+}>> & string;
+export declare const NotificationWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Overlay/index.d.ts

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

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/Overlay/props.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const overlayAppearancePrimary = "primary";
+export declare const overlayAppearanceSecondary = "secondary";
+type OverlayAppearance = typeof overlayAppearancePrimary | typeof overlayAppearanceSecondary;
+export interface OverlayProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    appearance?: OverlayAppearance;
+}
+export {};

package/dist/components/Overlay/styled.d.ts

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

package/dist/components/PickerGroup/Pickers.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { PickerGroupProps } from './props';
+export interface PickersProps extends Omit<PickerGroupProps, 'legend' | 'message'> {
+}
+/**
+ * Split PickerGroup and Pickers into two components
+ * to make sure that state and legend are decoupled.
+ */
+export declare const Pickers: FC<PickersProps>;

package/dist/components/PickerGroup/components/Picker/index.d.ts

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

package/dist/components/PickerGroup/components/Picker/props.d.ts

@@ -0,0 +1,75 @@
+import { IconName } from '@vfde-react/inline-icon-library';
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { BadgeProps } from '../../../Badge/props';
+import { PatternProps } from '../../../../foundations/PatternProps';
+import { Theme } from '../../../../foundations/types/Theme';
+/**
+ * @TODO a better split of props between label, input, card etc would be great
+ * For now I just add additional label and input props to be able to add these from an app
+ */
+export interface PickerProps extends Omit<PatternProps, 'bottomSpacing'>, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Value of picker`s input element
+     */
+    value: string;
+    /**
+     * Name of picker`s input element
+     */
+    name?: string;
+    /**
+     * Is picker checked
+     */
+    isChecked?: boolean;
+    /**
+     * Is Picker disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Main text
+     */
+    label: string;
+    /**
+     * Additional text
+     */
+    suffix?: string;
+    /**
+     * Path to an immage asset
+     */
+    imagePath?: string;
+    /**
+     * Name of an systemIcon
+     */
+    inlineIconName?: IconName;
+    /**
+     * Background colour of the colour circle
+     */
+    colorValue?: string;
+    /**
+     * Add a badge to picker
+     */
+    badge?: Omit<BadgeProps, 'bottomSpacing'>;
+    /**
+     *
+     */
+    handleChange?: (a: string) => void;
+    /**
+     * if there are any optional input props needed to pass down to input component
+     * all props that are passed by the PickerComponent are omitted
+     */
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'name' | 'value' | 'checked' | 'disabled'>;
+    /**
+     * if there are any optional input props needed to pass down to input component
+     */
+    labelProps?: Omit<InputHTMLAttributes<HTMLLabelElement>, 'children'>;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Picker';
+}
+export interface PickerLabelElementProps extends HTMLAttributes<HTMLLabelElement> {
+    children: ReactNode;
+    isChecked: boolean;
+    isDisabled: boolean;
+    badge?: BadgeProps;
+    theme: Theme;
+}

package/dist/components/PickerGroup/components/Picker/styled.d.ts

@@ -0,0 +1,5 @@
+import { PickerLabelElementProps } from './props';
+export declare const PickerGridItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../../../GridItem').GridItemProps, never>> & string & Omit<import('react').FC<import('../../../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const PickerLabelElementStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, PickerLabelElementProps>> & string;
+export declare const PickerCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, PickerLabelElementProps>> & string;
+export declare const PickerInputElementStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/components/PickerGroup/components/PickerElementIcon/index.d.ts

@@ -0,0 +1,4 @@
+import { IconLoaderProps } from '@vfde-react/inline-icon-library';
+import { FC } from 'react';
+export declare const PickerElementSystemIcon: FC<IconLoaderProps>;
+export default PickerElementSystemIcon;

package/dist/components/PickerGroup/components/PickerElementIcon/styled.d.ts

@@ -0,0 +1 @@
+export declare const PickerElementIconStyled: 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>>;

package/dist/components/PickerGroup/components/PickerElementImage/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ImageProps } from '../../../Image/props';
+export declare const PickerElementImage: FC<Omit<ImageProps, 'aspectRatio' | 'horizontalAlignment'>>;
+export default PickerElementImage;

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