@vodafone_de/brix-components 3.0.1 → 3.0.3

package/dist/BackgroundColor-JObp_2xA.js

@@ -0,0 +1,14 @@
+const colorBackgroundBrand = "colorBackgroundBrand";
+const colorBackgroundBrandGradient = "colorBackgroundBrandGradient";
+const colorBackgroundNeutral = "colorBackgroundNeutral";
+const colorBackgroundSubtle = "colorBackgroundSubtle";
+const colorBackgroundOverlay = "colorBackgroundOverlay";
+const colorBackgroundOverlayStatic = "colorBackgroundOverlayStatic";
+export {
+  colorBackgroundOverlay as a,
+  colorBackgroundOverlayStatic as b,
+  colorBackgroundNeutral as c,
+  colorBackgroundBrandGradient as d,
+  colorBackgroundBrand as e,
+  colorBackgroundSubtle as f
+};

package/dist/BorderColor-BummoQ1-.js

@@ -0,0 +1,24 @@
+const colorBorderBrand = "colorBorderBrand";
+const colorBorderNeutral = "colorBorderNeutral";
+const colorBorderSubtle = "colorBorderSubtle";
+const colorBorderInverse = "colorBorderInverse";
+const colorBorderSuccess = "colorBorderSuccess";
+const colorBorderCritical = "colorBorderCritical";
+const colorBorderWarning = "colorBorderWarning";
+const colorBorderInformation = "colorBorderInformation";
+const colorBorderUnselected = "colorBorderUnselected";
+const colorBorderSelected = "colorBorderSelected";
+const colorBorderFocus = "colorBorderFocus";
+export {
+  colorBorderNeutral as a,
+  colorBorderUnselected as b,
+  colorBorderFocus as c,
+  colorBorderSuccess as d,
+  colorBorderCritical as e,
+  colorBorderWarning as f,
+  colorBorderBrand as g,
+  colorBorderInverse as h,
+  colorBorderSelected as i,
+  colorBorderSubtle as j,
+  colorBorderInformation as k
+};

package/dist/BorderRadius-ClUShVLu.js

@@ -0,0 +1,10 @@
+const borderRadiusNone = "borderRadiusNone";
+const borderRadiusSm = "borderRadiusSm";
+const borderRadiusMd = "borderRadiusMd";
+const borderRadiusFull = "borderRadiusFull";
+export {
+  borderRadiusNone as a,
+  borderRadiusMd as b,
+  borderRadiusFull as c,
+  borderRadiusSm as d
+};

package/dist/BorderWidth-DfOlyKK7.js

@@ -0,0 +1,16 @@
+const borderWidthNone = "None";
+const borderWidthDivider = "Divider";
+const borderWidthUnselected = "Unselected";
+const borderWidthSelected = "Selected";
+const borderWidthFocus = "Focus";
+const borderWidthSm = "Sm";
+const borderWidthMd = "Md";
+export {
+  borderWidthFocus as a,
+  borderWidthUnselected as b,
+  borderWidthSm as c,
+  borderWidthSelected as d,
+  borderWidthDivider as e,
+  borderWidthNone as f,
+  borderWidthMd as g
+};

package/dist/CornerStyle-JEbGNArR.js

@@ -0,0 +1,6 @@
+const cornerStraight = "straight";
+const cornerRounded = "rounded";
+export {
+  cornerRounded as a,
+  cornerStraight as c
+};

package/dist/FontWeight-CR22KTex.js

@@ -0,0 +1,8 @@
+const fontWeightLight = "light";
+const fontWeightRegular = "regular";
+const fontWeightBold = "bold";
+export {
+  fontWeightLight as a,
+  fontWeightRegular as b,
+  fontWeightBold as f
+};

package/dist/HeadingSize-CfCRn3Lh.js

@@ -0,0 +1,12 @@
+const textHeadingXl = "xl";
+const textHeadingLg = "lg";
+const textHeadingMd = "md";
+const textHeadingSm = "sm";
+const textHeadingXs = "xs";
+export {
+  textHeadingMd as a,
+  textHeadingSm as b,
+  textHeadingLg as c,
+  textHeadingXl as d,
+  textHeadingXs as t
+};

package/dist/IconColor-CtC9WUgr.js

@@ -0,0 +1,10 @@
+const colorIconBrand = "colorIconBrand";
+const colorIconInverse = "colorIconInverse";
+const colorIconSuccess = "colorIconSuccess";
+const colorIconCritical = "colorIconCritical";
+export {
+  colorIconCritical as a,
+  colorIconBrand as b,
+  colorIconSuccess as c,
+  colorIconInverse as d
+};

package/dist/ObjectColor-BZDBuV8H.js

@@ -0,0 +1,22 @@
+const colorObjectBrand = "colorObjectBrand";
+const colorObjectNeutral = "colorObjectNeutral";
+const colorObjectInverse = "colorObjectInverse";
+const colorObjectAccent = "colorObjectAccent";
+const colorObjectSuccess = "colorObjectSuccess";
+const colorObjectCritical = "colorObjectCritical";
+const colorObjectWarning = "colorObjectWarning";
+const colorObjectInformation = "colorObjectInformation";
+const colorObjectSelected = "colorObjectSelected";
+const colorObjectUnselected = "colorObjectUnselected";
+export {
+  colorObjectInverse as a,
+  colorObjectSelected as b,
+  colorObjectBrand as c,
+  colorObjectUnselected as d,
+  colorObjectSuccess as e,
+  colorObjectNeutral as f,
+  colorObjectAccent as g,
+  colorObjectCritical as h,
+  colorObjectWarning as i,
+  colorObjectInformation as j
+};

package/dist/Opacity-smkGiwsf.js

@@ -0,0 +1,6 @@
+const opacityOverlay = "Overlay";
+const opacityDisabled = "Disabled";
+export {
+  opacityDisabled as a,
+  opacityOverlay as o
+};

package/dist/SizeTypes-Ck_RdzIf.js

@@ -0,0 +1,8 @@
+const smallSize = "sm";
+const largeSize = "lg";
+const mediumSize = "md";
+export {
+  largeSize as l,
+  mediumSize as m,
+  smallSize as s
+};

package/dist/Spacing-D0HQH9YJ.js

@@ -0,0 +1,16 @@
+const spacingNone = "None";
+const spacing2Xs = "2Xs";
+const spacingXs = "Xs";
+const spacingSm = "Sm";
+const spacingMd = "Md";
+const spacingLg = "Lg";
+const spacingXl = "Xl";
+export {
+  spacingXs as a,
+  spacingNone as b,
+  spacingSm as c,
+  spacingXl as d,
+  spacing2Xs as e,
+  spacingLg as f,
+  spacingMd as s
+};

package/dist/TextBodySize-BcZR9mh2.js

@@ -0,0 +1,6 @@
+const textBodyMd = "md";
+const textBodySm = "sm";
+export {
+  textBodySm as a,
+  textBodyMd as t
+};

package/dist/TextColor-BXiR5Uq9.js

@@ -0,0 +1,16 @@
+const colorTextBrand = "colorTextBrand";
+const colorTextNeutral = "colorTextNeutral";
+const colorTextNeutralStatic = "colorTextNeutralStatic";
+const colorTextInverse = "colorTextInverse";
+const colorTextInverseStatic = "colorTextInverseStatic";
+const colorTextCritical = "colorTextCritical";
+const colorTextPlaceholder = "colorTextPlaceholder";
+export {
+  colorTextNeutral as a,
+  colorTextNeutralStatic as b,
+  colorTextInverseStatic as c,
+  colorTextInverse as d,
+  colorTextPlaceholder as e,
+  colorTextBrand as f,
+  colorTextCritical as g
+};

package/dist/colorUtils-uLZF5UIN.js

@@ -0,0 +1,94 @@
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { c as colorTextInverseStatic, a as colorTextNeutral, b as colorTextNeutralStatic, d as colorTextInverse } from "./TextColor-BXiR5Uq9.js";
+const backgroundForegroundColorMapping = {
+  colorBackgroundBrand: getTextColor(colorTextInverseStatic),
+  colorBackgroundNeutral: getTextColor(colorTextNeutral),
+  colorBackgroundSubtle: getTextColor(colorTextNeutral),
+  colorObjectAccent: getTextColor(colorTextNeutralStatic),
+  colorObjectBrand: getTextColor(colorTextInverseStatic),
+  colorObjectCritical: getTextColor(colorTextInverse),
+  colorObjectInformation: getTextColor(colorTextInverse),
+  colorObjectInverse: getTextColor(colorTextNeutral),
+  colorObjectNeutral: getTextColor(colorTextInverse),
+  colorObjectSelected: getTextColor(colorTextInverse),
+  colorObjectUnselected: getTextColor(colorTextNeutralStatic),
+  colorObjectSubtle: getTextColor(colorTextNeutralStatic),
+  colorObjectSuccess: getTextColor(colorTextInverse),
+  colorObjectWarning: getTextColor(colorTextNeutralStatic),
+  colorBackgroundOverlay: getTextColor(colorTextNeutral),
+  colorBackgroundBrandGradient: getTextColor(colorTextInverseStatic),
+  colorBackgroundOverlayStatic: getTextColor(colorTextInverseStatic)
+};
+const getForegroundColor = (backgroundColor) => backgroundForegroundColorMapping[backgroundColor];
+const hexToRgb = (hex) => {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((char) => char + char).join("");
+  }
+  const bigint = parseInt(hex, 16);
+  const r = bigint >> 16 & 255;
+  const g = bigint >> 8 & 255;
+  const b = bigint & 255;
+  return {
+    r,
+    g,
+    b
+  };
+};
+const parseColorToRgbObject = (color) => {
+  if (color.startsWith("#")) {
+    return hexToRgb(color);
+  } else if (color.startsWith("rgb")) {
+    return parseRgbColorToRgbObject(color);
+  }
+  return {
+    r: 255,
+    g: 255,
+    b: 255
+  };
+};
+const parseRgbColorToRgbObject = (color) => {
+  const rgbValues = color.match(/\d+/g).map(Number);
+  return {
+    r: rgbValues[0],
+    g: rgbValues[1],
+    b: rgbValues[2]
+  };
+};
+const getComputedBackgroundColor = (element) => {
+  const computedStyle = window.getComputedStyle(element);
+  const backgroundColor = computedStyle.backgroundColor;
+  if (backgroundColor !== "rgba(0, 0, 0, 0)") {
+    return parseRgbColorToRgbObject(backgroundColor);
+  }
+  if (element.parentElement) return getComputedBackgroundColor(element.parentElement);
+  return {
+    r: 255,
+    g: 255,
+    b: 255
+  };
+};
+const getRelativeLuminance = ({
+  r,
+  g,
+  b
+}) => {
+  const [red, green, blue] = [r, g, b].map((channel) => {
+    const c = channel / 255;
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+};
+const getContrastRatio = (color1, color2) => {
+  const luminance1 = getRelativeLuminance(color1);
+  const luminance2 = getRelativeLuminance(color2);
+  const lighter = Math.max(luminance1, luminance2);
+  const darker = Math.min(luminance1, luminance2);
+  return (lighter + 0.05) / (darker + 0.05);
+};
+export {
+  getComputedBackgroundColor as a,
+  getContrastRatio as b,
+  getForegroundColor as g,
+  parseColorToRgbObject as p
+};

package/dist/components/Accordion/index.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { bf as ChevronDownIcon, df as IconLoader, iu as iconSizeMd } from "../../index-Cbojl4_Q.js";
+import { useRef, useState, useEffect } from "react";
+import Collapsible from "../Collapsible/index.js";
+import styled from "styled-components";
+import Heading from "../Heading/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { noReducedMotion } from "../../foundations/media-query/reducedMotion/index.js";
+import { a as ease_in_out_sine } from "../../easing-Dm-pO8SY.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { j as colorBorderSubtle, c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
+import { f as borderWidthNone, b as borderWidthUnselected, a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { s as spacingMd, b as spacingNone, a as spacingXs } from "../../Spacing-D0HQH9YJ.js";
+import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const accordionToggleExpanded = "expanded";
+const accordionToggleCollapsing = "collapsing";
+const accordionToggleCollapsed = "collapsed";
+const openCloseDuration = "0.5s";
+const AccordionStyled = styled.details.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "AccordionStyled",
+  componentId: "sc-1t5leix-0"
+})({
+  display: "flex",
+  flexDirection: "column"
+}, {
+  borderStyle: "solid",
+  borderColor: getBorderColor(colorBorderSubtle),
+  borderWidth: getBorderWidth(borderWidthNone),
+  borderTopWidth: getBorderWidth(borderWidthUnselected),
+  borderBottomWidth: getBorderWidth(borderWidthUnselected),
+  "& + &": {
+    borderTopWidth: getBorderWidth(borderWidthNone)
+  }
+}, ({
+  verticalScrollOffset = 0
+}) => ({
+  scrollMarginTop: `${verticalScrollOffset}px`
+}), getBottomSpacing);
+const AccordionSummaryStyled = styled.summary.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "AccordionSummaryStyled",
+  componentId: "sc-1t5leix-1"
+})({
+  display: "flex",
+  alignItems: "center",
+  cursor: "pointer",
+  gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+  padding: `${getSpacing(spacingMd)} ${getSpacing(spacingNone)}`,
+  listStyleType: "none",
+  overflow: "hidden",
+  transition: `color ${openCloseDuration} ease-out`,
+  color: getTextColor(colorTextNeutral)
+}, {
+  "&:hover": {
+    color: getTextColor(colorTextBrand)
+  }
+}, () => {
+  const focusColor = getBorderColor(colorBorderFocus);
+  return {
+    "&:focus-visible": {
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      }),
+      outline: "none",
+      boxShadow: `${focusColor} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`
+    }
+  };
+}, {
+  "&::-webkit-details-marker": {
+    display: "none"
+  }
+});
+const AccordionHeadingStyled = styled(Heading).withConfig({
+  displayName: "AccordionHeadingStyled",
+  componentId: "sc-1t5leix-2"
+})({
+  flex: 1,
+  margin: getSpacing(spacingNone),
+  color: "currentcolor"
+}, {
+  fontWeight: getFontWeight(fontWeightRegular),
+  "details[open] &": {
+    fontWeight: getFontWeight(fontWeightBold)
+  },
+  ...noReducedMotion({
+    "details[open] &, details[open].collapsing &": {
+      transition: `font-weight ${openCloseDuration} ease-out`
+    },
+    "details[open].collapsing &": {
+      fontWeight: getFontWeight(fontWeightRegular)
+    }
+  })
+});
+const AccordionOpenIndicatorStyled = styled(ChevronDownIcon).withConfig({
+  displayName: "AccordionOpenIndicatorStyled",
+  componentId: "sc-1t5leix-3"
+})({
+  transformOrigin: "center",
+  color: getTextColor(colorTextBrand)
+}, {
+  transform: "rotate(0deg)",
+  "details[open] &": {
+    transform: "rotate(180deg)"
+  },
+  ...noReducedMotion({
+    "details[open] &, details[open].collapsing &": {
+      transition: `transform ${openCloseDuration} ${ease_in_out_sine}`
+    }
+  }),
+  "details[open].collapsing &": {
+    transform: "rotate(0deg)"
+  }
+});
+const Accordion = ({
+  uid,
+  children,
+  iconName,
+  heading,
+  headingProps,
+  expanded = true,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const [toggle, setToggle] = useState(expanded ? accordionToggleExpanded : accordionToggleCollapsed);
+  const [animated, setAnimated] = useState(true);
+  useEffect(() => {
+    const target = ref.current;
+    const observer = new MutationObserver(() => {
+      if (target == null ? void 0 : target.open) {
+        setAnimated(false);
+        setToggle(accordionToggleExpanded);
+      }
+    });
+    if (target) {
+      observer.observe(target, {
+        attributes: true,
+        attributeFilter: ["open"]
+      });
+    }
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    if (expanded && accordionToggleExpanded === toggle) {
+      return;
+    }
+    if (!expanded && accordionToggleCollapsed === toggle) {
+      return;
+    }
+    if (expanded) {
+      setToggle(accordionToggleExpanded);
+    } else if (toggle === accordionToggleExpanded) {
+      setToggle(accordionToggleCollapsing);
+    }
+  }, [expanded]);
+  const handleToggle = (event) => {
+    event.preventDefault();
+    const current = toggle;
+    setToggle(accordionToggleExpanded === current ? accordionToggleCollapsing : accordionToggleExpanded);
+    if (props.handleOnToggle) {
+      props.handleOnToggle(uid, accordionToggleExpanded !== current);
+    }
+  };
+  const onTransition = (open) => {
+    if (open && animated) {
+      setAnimated(true);
+    }
+    if (!open) {
+      setToggle(accordionToggleCollapsed);
+    }
+  };
+  const className = `${props.className ? props.className : ""} ${accordionToggleCollapsing === toggle ? "collapsing" : ""} `;
+  return /* @__PURE__ */ jsxs(AccordionStyled, { ref, className, open: accordionToggleCollapsed !== toggle, children: [
+    /* @__PURE__ */ jsxs(AccordionSummaryStyled, { onClick: handleToggle, role: "button", children: [
+      iconName && /* @__PURE__ */ jsx(IconLoader, { name: iconName, size: iconSizeMd }),
+      /* @__PURE__ */ jsx(AccordionHeadingStyled, { ...headingProps, size: "xs", children: heading }),
+      /* @__PURE__ */ jsx(AccordionOpenIndicatorStyled, { size: iconSizeMd })
+    ] }),
+    /* @__PURE__ */ jsx(Collapsible, { expanded: accordionToggleExpanded === toggle, animated, onTransition, children })
+  ] });
+};
+export {
+  accordionToggleCollapsed,
+  accordionToggleCollapsing,
+  accordionToggleExpanded,
+  Accordion as default
+};

package/dist/components/AccordionGroup/index.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import Accordion from "../Accordion/index.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { useState } from "react";
+import styled from "styled-components";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const AccordionGroupSingleExpand = ({
+  bottomSpacing = spacingMd,
+  ...props
+}) => {
+  const getAccordionsExpanded = () => {
+    const accordionItemsOpenState = {};
+    props.items.forEach((accordionItem) => {
+      accordionItemsOpenState[accordionItem.uid] = true === accordionItem.expanded;
+    });
+    return accordionItemsOpenState;
+  };
+  const [accordionExpanded, setAccordionExpanded] = useState(getAccordionsExpanded);
+  const handleOnToggle = (uid, expanded) => {
+    const nextState = {
+      ...accordionExpanded
+    };
+    for (const key in nextState) {
+      nextState[key] = false;
+    }
+    nextState[uid] = expanded;
+    setAccordionExpanded(nextState);
+    if (props.handleOnToggle) {
+      props.handleOnToggle(uid, expanded);
+    }
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: props.items.map((accordion, index) => {
+    const spacing = index + 1 === props.items.length ? bottomSpacing : spacingNone;
+    return /* @__PURE__ */ jsx(Accordion, { ...accordion, expanded: accordionExpanded[accordion.uid], handleOnToggle, bottomSpacing: spacing, verticalScrollOffset: props.verticalScrollOffset, children: accordion.children }, accordion.uid);
+  }) });
+};
+const AccordionGroupStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "AccordionGroupStyled",
+  componentId: "sc-17dfswd-0"
+})(getBottomSpacing);
+const AccordionGroup = ({
+  singleExpand = false,
+  bottomSpacing = spacingMd,
+  ...props
+}) => {
+  if (singleExpand) {
+    return /* @__PURE__ */ jsx(AccordionGroupStyled, { className: props.className, bottomSpacing, children: /* @__PURE__ */ jsx(AccordionGroupSingleExpand, { ...props, bottomSpacing }) });
+  }
+  return /* @__PURE__ */ jsx(AccordionGroupStyled, { bottomSpacing, children: props.items.map((accordion, index) => {
+    const spacing = index + 1 === props.items.length ? bottomSpacing : spacingNone;
+    return /* @__PURE__ */ jsx(Accordion, { ...accordion, bottomSpacing: spacing, handleOnToggle: accordion.handleOnToggle || props.handleOnToggle, children: accordion.children }, accordion.uid);
+  }) });
+};
+export {
+  AccordionGroup as default
+};

package/dist/components/Badge/index.js

@@ -0,0 +1,11 @@
+"use client";
+import "react/jsx-runtime";
+import "../../index-Cbojl4_Q.js";
+import "../../Spacing-D0HQH9YJ.js";
+import "../../SizeTypes-Ck_RdzIf.js";
+import "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import { b, B } from "../../index-C0N671c1.js";
+export {
+  b as BadgeAppearanceColor,
+  B as default
+};

package/dist/components/Body/index.js

@@ -1,9 +1,75 @@
 "use client";
-import "react/jsx-runtime";
-import { c, b, d, B } from "../../index-BaPlSfS3.js";
+import { jsx } from "react/jsx-runtime";
+import { c as spacingSm, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { t as textBodyMd, a as textBodySm } from "../../TextBodySize-BcZR9mh2.js";
+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 { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const BodyStyled = styled.p.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "BodyStyled",
+  componentId: "sc-1n7n7pv-0"
+})({
+  outline: "none",
+  color: "inherit",
+  verticalAlign: "baseline"
+}, ({
+  size = textBodyMd
+}) => getBodySize(size), ({
+  weight,
+  tag
+}) => {
+  if ("strong" === tag) {
+    return {
+      fontWeight: getFontWeight(fontWeightBold)
+    };
+  }
+  if (!weight) {
+    return {};
+  }
+  return {
+    fontWeight: getFontWeight(weight)
+  };
+}, ({
+  tag
+}) => {
+  if ("sup" === tag) {
+    return {
+      verticalAlign: "super",
+      fontSize: "smaller"
+    };
+  }
+  if ("span" === tag) {
+    return {
+      display: "inline-block"
+    };
+  }
+  return {};
+}, ({
+  align
+}) => ({
+  textAlign: align
+}), getBottomSpacing);
+const bodyAlignLeft = "left";
+const bodyAlignCenter = "center";
+const bodyAlignRight = "right";
+const Body = ({
+  tag = "p",
+  bottomSpacing,
+  ...props
+}) => {
+  if (!bottomSpacing) {
+    bottomSpacing = textBodySm === props.size ? spacingSm : spacingMd;
+  }
+  return /* @__PURE__ */ jsx(BodyStyled, { ...props, bottomSpacing, as: tag, tag, children: renderInlineRichTextFromOpenText(props.children) });
+};
 export {
-  c as bodyAlignCenter,
-  b as bodyAlignLeft,
-  d as bodyAlignRight,
-  B as default
+  bodyAlignCenter,
+  bodyAlignLeft,
+  bodyAlignRight,
+  Body as default
 };