@vodafone_de/brix-components 3.0.1 → 3.0.3

package/dist/components/Input/index.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
+import { s as spacingMd, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { a } from "../../props-Czq9XX2J.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-CDWclYAa.js";
+const Input = forwardRef(({
+  uid,
+  status,
+  helperText,
+  errorMessage,
+  label,
+  onUpdate,
+  type = "text",
+  bottomSpacing = spacingMd,
+  placeholder,
+  ...props
+}, ref) => {
+  const messageId = `text-${uid}`;
+  const inputProps = {
+    ...props,
+    id: uid,
+    type,
+    "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : props["aria-describedby"],
+    "aria-invalid": inputStateError === status ? true : void 0
+  };
+  const onChange = (event) => {
+    if (props.onChange) {
+      props.onChange(event);
+    }
+    if (!onUpdate) {
+      return;
+    }
+    onUpdate(event.target.value);
+  };
+  return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled: props.disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(InputWrapperStyled, { status, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(InputStyled, { ...inputProps, placeholder: renderInlineRichTextFromOpenText(placeholder), ref, onChange }),
+      /* @__PURE__ */ jsx(FormHelperStatusIcon, { status })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
+  ] });
+});
+export {
+  Input as default,
+  inputStateError,
+  a as inputStateSuccess
+};

package/dist/components/Label/index.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import styled from "styled-components";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const LabelStyled = styled.label.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LabelStyled",
+  componentId: "sc-1w6iej7-0"
+})({
+  outline: "none",
+  display: "inline-block"
+}, getBodySize("md"), getBottomSpacing);
+const Label = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(LabelStyled, { ...props, children: renderInlineRichTextFromOpenText(children) });
+export {
+  Label as default
+};

package/dist/components/Legend/index.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import Body from "../Body/index.js";
+import Heading from "../Heading/index.js";
+import IconSnippet, { iconSnippetAlignCenter } from "../IconSnippet/index.js";
+import { R as RichText } from "../../index-D6hvbziL.js";
+import styled from "styled-components";
+const LegendStyled = styled.legend.withConfig({
+  displayName: "LegendStyled",
+  componentId: "sc-1vyrzt5-0"
+})({
+  /**
+   * minimal hack to disable the wired position of a legend in a fieldset
+   */
+  all: "unset",
+  width: "100%"
+});
+const Legend = ({
+  contents,
+  ...props
+}) => {
+  const getLegend = () => {
+    if (!contents || 0 === contents.length) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(LegendStyled, { ...props, children: contents.map((legend) => {
+      if ("Heading" === legend.component) {
+        return /* @__PURE__ */ jsx(Heading, { ...legend, children: legend.children }, legend.key);
+      }
+      if ("Body" === legend.component) {
+        return /* @__PURE__ */ jsx(Body, { ...legend, tag: "span", children: legend.children }, legend.key);
+      }
+      if ("RichText" === legend.component) {
+        return /* @__PURE__ */ jsx(RichText, { ...legend, tagProps: {
+          p: {
+            tag: "span"
+          }
+        }, html: legend.children }, legend.key);
+      }
+      if ("IconSnippet" === legend.component) {
+        legend.contents = legend.contents.map((content) => {
+          if ("RichText" === content.component) {
+            content.tagProps = {
+              p: {
+                tag: "span"
+              }
+            };
+          }
+          return content;
+        });
+        return /* @__PURE__ */ jsx(IconSnippet, { ...legend, tag: "span", iconAlign: iconSnippetAlignCenter }, legend.key);
+      }
+      return null;
+    }) });
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: getLegend() });
+};
+export {
+  Legend as default
+};

package/dist/components/Link/index.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { L as LinkAsButton, a as LinkStyled, g as getLinkIcon } from "../../index-B5AxA0A-.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+const isLinkAsButtonProp = (props) => {
+  return props.href === void 0;
+};
+const Link = (props) => {
+  if (isLinkAsButtonProp(props)) {
+    return /* @__PURE__ */ jsx(LinkAsButton, { ...props, children: props.children });
+  }
+  return /* @__PURE__ */ jsxs(LinkStyled, { ...props, children: [
+    renderInlineRichTextFromOpenText(props.children),
+    getLinkIcon(props.icon)
+  ] });
+};
+export {
+  Link as default
+};

package/dist/components/LinkAsButton/index.js

@@ -0,0 +1,7 @@
+"use client";
+import "react/jsx-runtime";
+import { L } from "../../index-B5AxA0A-.js";
+import "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+export {
+  L as default
+};

package/dist/components/LinkList/index.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { u as ulTagName, l as liTagName } from "../../tags-DI6H1biK.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import LinkListItem, { linkListItemVariantVertical, linkListItemVariantHorizontal } from "../LinkListItem/index.js";
+import styled from "styled-components";
+import Grid from "../Grid/index.js";
+import GridItem from "../GridItem/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+const linkListVariantRow = "row";
+const linkListVariantColumn = "column";
+const LinkListStyled = styled(Grid).withConfig({
+  displayName: "LinkListStyled",
+  componentId: "sc-15vheq9-0"
+})({
+  display: "flex",
+  flexWrap: "wrap"
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  variant,
+  elevation
+}) => {
+  return {
+    flexDirection: variant === linkListVariantRow ? "row" : "column",
+    gap: !elevation && variant === linkListVariantColumn ? getSpacing(spacingNone) : getSpacing(spacingMd),
+    ...forcedColors({
+      gap: getSpacing(spacingMd)
+    })
+  };
+});
+const LinkListLiStyled = styled(GridItem).withConfig({
+  displayName: "LinkListLiStyled",
+  componentId: "sc-15vheq9-1"
+})(({
+  variant
+}) => {
+  return {
+    width: variant === linkListVariantColumn ? "100%" : "auto"
+  };
+});
+const LinkList = ({
+  items,
+  variant,
+  gridConfig = {
+    sm: 12,
+    md: 3,
+    lg: 2
+  },
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(LinkListStyled, { bottomSpacing: props.bottomSpacing, variant, tag: ulTagName, autoLayout: gridConfig, elevation: props.elevation, stretch: true, children: items.map((item, index) => {
+    return /* @__PURE__ */ jsx(LinkListLiStyled, { tag: liTagName, variant, children: /* @__PURE__ */ jsx(LinkListItem, { ...item, orientation: variant === linkListVariantRow ? linkListItemVariantVertical : linkListItemVariantHorizontal, elevation: props.elevation, bottomSpacing: spacingNone, isLastItemInList: index === items.length - 1 }) }, item.uid);
+  }) });
+};
+export {
+  LinkList as default,
+  linkListVariantColumn,
+  linkListVariantRow
+};

package/dist/components/LinkListItem/index.js

@@ -0,0 +1,316 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { iu as iconSizeMd, df as IconLoader } from "../../index-Cbojl4_Q.js";
+import { s as spanTagName } from "../../tags-DI6H1biK.js";
+import { s as spacingMd, a as spacingXs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
+import { B as Badge } from "../../index-C0N671c1.js";
+import Body from "../Body/index.js";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { e as ease_in_sine } from "../../easing-Dm-pO8SY.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 { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
+import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
+import { getIconColor } from "../../foundations/token/getIconColor/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { c as colorBorderFocus, j as colorBorderSubtle } from "../../BorderColor-BummoQ1-.js";
+import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderWidthFocus, c as borderWidthSm } from "../../BorderWidth-DfOlyKK7.js";
+import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { b as colorIconBrand } from "../../IconColor-CtC9WUgr.js";
+import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import Card from "../Card/index.js";
+import Icon from "../Icon/index.js";
+import { a as CardAppearanceColor } from "../../styled-BpvuD699.js";
+const linkListItemVariantVertical = "vertical";
+const linkListItemVariantHorizontal = "horizontal";
+const focusStyles = {
+  ...forcedColors({
+    outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+  }),
+  boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+  outline: "none"
+};
+const hoverBackgroundColor = getHoverColor(CardAppearanceColor["primary"]);
+const hoverStylesChangingBackground = {
+  transitionProperty: "background, color, box-shadow",
+  transitionDuration: "0.2s",
+  transitionTimingFunction: ease_in_sine,
+  "&:hover, &:focus-visible": {
+    background: hoverBackgroundColor
+  }
+};
+const LinkListItemButtonStyled = styled.button.withConfig({
+  shouldForwardProp: filterProps(["label"]),
+  displayName: "LinkListItemButtonStyled",
+  componentId: "sc-1dmfu9f-0"
+})({
+  width: "100%",
+  height: "100%",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: getTextColor(colorTextNeutral),
+  borderRadius: getBorderRadius(borderRadiusMd),
+  "&:focus-visible": focusStyles,
+  ...forcedColors({
+    border: `${getBorderWidth(borderWidthSm)} solid ButtonBorder`,
+    background: "ButtonFace",
+    color: "ButtonText"
+  })
+}, ({
+  elevation = true,
+  orientation
+}) => {
+  if (!elevation && orientation === linkListItemVariantHorizontal) {
+    return {
+      borderRadius: getBorderRadius(borderRadiusNone),
+      transitionProperty: "color",
+      transitionDuration: "0.2s",
+      transitionTimingFunction: ease_in_sine,
+      "&:hover, &:focus-visible": {
+        color: getTextColor(colorTextBrand)
+      }
+    };
+  }
+});
+const buttonParent = `${LinkListItemButtonStyled.toString()} &`;
+const LinkListItemAnchorStyled = styled.a.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LinkListItemAnchorStyled",
+  componentId: "sc-1dmfu9f-1"
+})({
+  textDecoration: "none",
+  display: "block",
+  height: "100%",
+  color: getTextColor(colorTextNeutral),
+  "&:focus-visible": focusStyles,
+  "&:hover, &:focus": {
+    textDecoration: "none"
+  },
+  "&:visited": {
+    color: getTextColor(colorTextNeutral)
+  }
+}, ({
+  elevation = true,
+  orientation
+}) => {
+  if (!elevation && orientation === linkListItemVariantHorizontal) {
+    return {
+      borderRadius: getBorderRadius(borderRadiusNone),
+      transitionProperty: "color",
+      transitionDuration: "0.2s",
+      transitionTimingFunction: ease_in_sine,
+      "&:hover, &:focus-visible": {
+        color: getTextColor(colorTextBrand)
+      }
+    };
+  }
+  return {
+    borderRadius: getBorderRadius(borderRadiusMd)
+  };
+});
+const parentHasFocusSelector = `${LinkListItemAnchorStyled.toString()}:focus-within &, ${LinkListItemButtonStyled.toString()}:focus-within &`;
+const LinkListItemStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LinkListItemStyled",
+  componentId: "sc-1dmfu9f-2"
+})({
+  display: "block",
+  height: "100%",
+  padding: `${getSpacing(spacingMd)} 0`
+}, ({
+  orientation,
+  isLastItemInList = false
+}) => {
+  if (orientation === linkListItemVariantVertical) {
+    return {
+      ...hoverStylesChangingBackground,
+      borderRadius: getBorderRadius(borderRadiusMd),
+      border: `${getBorderWidth(borderWidthSm)} solid ${getBorderColor(colorBorderSubtle)}`,
+      padding: getSpacing(spacingMd),
+      [parentHasFocusSelector]: {
+        background: hoverBackgroundColor
+      },
+      ...forcedColors({
+        border: `${getBorderWidth(borderWidthSm)} solid CanvasText`,
+        [buttonParent]: {
+          border: `${getBorderWidth(borderWidthSm)} solid ButtonBorder`
+        },
+        "&:hover, &:focus-visible": {
+          background: "inherit"
+        },
+        [parentHasFocusSelector]: {
+          background: "inherit"
+        }
+      })
+    };
+  }
+  if (!isLastItemInList) {
+    return {
+      borderBottom: `${getBorderWidth(borderWidthSm)} solid ${getBorderColor(colorBorderSubtle)}`,
+      ...forcedColors({
+        borderBottom: `${getBorderWidth(borderWidthSm)} solid CanvasText}`
+      }),
+      ...forcedColors({
+        [buttonParent]: {
+          borderBottom: "none"
+        }
+      })
+    };
+  }
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const LinkListItemElevatedStyled = styled(Card).withConfig({
+  displayName: "LinkListItemElevatedStyled",
+  componentId: "sc-1dmfu9f-3"
+})({
+  ...hoverStylesChangingBackground,
+  ...forcedColors({
+    [buttonParent]: {
+      border: `${getBorderWidth(borderWidthSm)} solid ButtonBorder`,
+      background: "ButtonFace",
+      color: "ButtonText"
+    }
+  }),
+  height: "100%"
+}, () => {
+  return {
+    [parentHasFocusSelector]: {
+      background: hoverBackgroundColor
+    },
+    ...forcedColors({
+      [parentHasFocusSelector]: {
+        background: "inherit"
+      }
+    })
+  };
+});
+const LinkListItemContentWrapperStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LinkListItemContentWrapperStyled",
+  componentId: "sc-1dmfu9f-4"
+})({
+  display: "flex"
+}, ({
+  orientation = linkListItemVariantHorizontal
+}) => {
+  return {
+    alignItems: orientation === linkListItemVariantVertical ? "flex-start" : "center",
+    flexDirection: orientation === linkListItemVariantVertical ? "column" : "row",
+    gap: orientation === linkListItemVariantVertical ? getSpacing(spacingXs) : getSpacing(spacingNone)
+  };
+});
+const LinkListItemContentStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LinkListItemContentStyled",
+  componentId: "sc-1dmfu9f-5"
+})({
+  flexGrow: 1,
+  display: "flex",
+  gap: getSpacing(spacingXs),
+  flexDirection: "row",
+  width: "100%"
+}, ({
+  orientation = linkListItemVariantHorizontal
+}) => {
+  return {
+    alignItems: orientation === linkListItemVariantVertical ? "flex-start" : "center",
+    paddingRight: orientation === linkListItemVariantVertical ? getSpacing(spacingNone) : getSpacing(spacingXs)
+  };
+});
+const LinkListItemVerticalContentStyled = styled.span.withConfig({
+  displayName: "LinkListItemVerticalContentStyled",
+  componentId: "sc-1dmfu9f-6"
+})({
+  flexGrow: 1,
+  gap: getSpacing(spacingXs),
+  display: "flex",
+  flexDirection: "column"
+});
+const LinkListItemLabelWrapperStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LinkListItemLabelWrapperStyled",
+  componentId: "sc-1dmfu9f-7"
+})({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  alignItems: "flex-start"
+});
+const LinkListLabelStyled = styled.span.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "LinkListLabelStyled",
+  componentId: "sc-1dmfu9f-8"
+})(getHeadingSize(textHeadingXs), {
+  textAlign: "left"
+});
+const LinkListItemChevronStyled = styled(Icon).withConfig({
+  displayName: "LinkListItemChevronStyled",
+  componentId: "sc-1dmfu9f-9"
+})({
+  flexGrow: 0,
+  flexShrink: 0,
+  color: getIconColor(colorIconBrand)
+});
+const isLinkListItemAsButtonProp = (props) => {
+  return props.href === void 0;
+};
+const LinkListItem = (props) => {
+  const {
+    icon,
+    label,
+    suffix,
+    badge,
+    orientation,
+    elevation,
+    isLastItemInList
+  } = props;
+  const LinkListIcon = icon ? /* @__PURE__ */ jsx(IconLoader, { name: icon, size: iconSizeMd }) : void 0;
+  const LinkListLabel = /* @__PURE__ */ jsx(LinkListLabelStyled, { children: label });
+  const LinkListSuffix = suffix ? /* @__PURE__ */ jsx(Body, { tag: spanTagName, bottomSpacing: spacingNone, children: suffix }) : void 0;
+  const LinkListBadge = badge ? /* @__PURE__ */ jsx(Badge, { ...badge, size: smallSize, bottomSpacing: spacingNone }) : void 0;
+  const LinkListChevron = /* @__PURE__ */ jsx(LinkListItemChevronStyled, { name: "ChevronRight", size: iconSizeMd });
+  const Content = /* @__PURE__ */ jsx(LinkListItemContentWrapperStyled, { orientation, children: orientation === linkListItemVariantHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(LinkListItemContentStyled, { orientation, children: [
+      LinkListIcon,
+      /* @__PURE__ */ jsxs(LinkListItemLabelWrapperStyled, { children: [
+        LinkListLabel,
+        LinkListSuffix
+      ] }),
+      LinkListBadge
+    ] }),
+    LinkListChevron
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(LinkListItemContentStyled, { orientation, children: [
+      /* @__PURE__ */ jsxs(LinkListItemVerticalContentStyled, { children: [
+        LinkListIcon,
+        /* @__PURE__ */ jsxs(LinkListItemLabelWrapperStyled, { children: [
+          LinkListLabel,
+          LinkListSuffix
+        ] })
+      ] }),
+      LinkListChevron
+    ] }),
+    LinkListBadge
+  ] }) });
+  const Item = elevation ? /* @__PURE__ */ jsx(LinkListItemElevatedStyled, { ...props, tag: "span", children: Content }) : /* @__PURE__ */ jsx(LinkListItemStyled, { orientation, bottomSpacing: props.bottomSpacing, isLastItemInList, children: Content });
+  if (isLinkListItemAsButtonProp(props)) {
+    return /* @__PURE__ */ jsx(LinkListItemButtonStyled, { ...props, children: Item });
+  }
+  return /* @__PURE__ */ jsx(LinkListItemAnchorStyled, { ...props, elevation, orientation, children: Item });
+};
+export {
+  LinkListItem as default,
+  linkListItemVariantHorizontal,
+  linkListItemVariantVertical
+};

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-DZo6MwrF.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
+};