@vodafone_de/brix-components 3.1.7 → 3.1.8

package/components/Accordion/index.js

@@ -0,0 +1,195 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../index-_A9hEpl9.cjs");
+const react = require("react");
+const components_Collapsible = require("../Collapsible/index.js");
+const styled = require("styled-components");
+const components_Heading = require("../Heading/index.js");
+const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
+const foundations_mediaQuery_reducedMotion = require("../../foundations/media-query/reducedMotion/index.js");
+const easing = require("../../easing-CWOuUocw.cjs");
+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 foundations_token_getFontWeight = require("../../foundations/token/getFontWeight/index.js");
+const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
+const foundations_token_getTextColor = require("../../foundations/token/getTextColor/index.js");
+const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
+const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
+const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const TextColor = require("../../TextColor-BZDXH1wP.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const accordionToggleExpanded = "expanded";
+const accordionToggleCollapsing = "collapsing";
+const accordionToggleCollapsed = "collapsed";
+const openCloseDuration = "0.5s";
+const AccordionStyled = styled.details.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "AccordionStyled",
+  componentId: "sc-1t5leix-0"
+})({
+  display: "flex",
+  flexDirection: "column"
+}, {
+  borderStyle: "solid",
+  borderColor: foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSubtle),
+  borderWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthNone),
+  borderTopWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthUnselected),
+  borderBottomWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthUnselected),
+  "& + &": {
+    borderTopWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthNone)
+  }
+}, ({
+  verticalScrollOffset = 0
+}) => ({
+  scrollMarginTop: `${verticalScrollOffset}px`
+}), foundations_token_getBottomSpacing.getBottomSpacing);
+const AccordionSummaryStyled = styled.summary.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "AccordionSummaryStyled",
+  componentId: "sc-1t5leix-1"
+})({
+  display: "flex",
+  alignItems: "center",
+  cursor: "pointer",
+  gap: `${foundations_token_getSpacing.getSpacing(Spacing.spacingNone)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)}`,
+  padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingNone)}`,
+  listStyleType: "none",
+  overflow: "hidden",
+  transition: `color ${openCloseDuration} ease-out`,
+  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral)
+}, {
+  "&:hover": {
+    color: foundations_token_getTextColor.getTextColor(TextColor.colorTextBrand)
+  }
+}, () => {
+  const focusColor = foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus);
+  return {
+    "&:focus-visible": {
+      ...foundations_mediaQuery_forcedColors.default({
+        outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
+      }),
+      outline: "none",
+      boxShadow: `${focusColor} 0px 0px 0px ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)}`
+    }
+  };
+}, {
+  "&::-webkit-details-marker": {
+    display: "none"
+  }
+});
+const AccordionHeadingStyled = styled(components_Heading.default).withConfig({
+  displayName: "AccordionHeadingStyled",
+  componentId: "sc-1t5leix-2"
+})({
+  flex: 1,
+  margin: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
+  color: "currentcolor"
+}, {
+  fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightRegular),
+  "details[open] &": {
+    fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightBold)
+  },
+  ...foundations_mediaQuery_reducedMotion.noReducedMotion({
+    "details[open] &, details[open].collapsing &": {
+      transition: `font-weight ${openCloseDuration} ease-out`
+    },
+    "details[open].collapsing &": {
+      fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightRegular)
+    }
+  })
+});
+const AccordionOpenIndicatorStyled = styled(index.ChevronDownIcon).withConfig({
+  displayName: "AccordionOpenIndicatorStyled",
+  componentId: "sc-1t5leix-3"
+})({
+  transformOrigin: "center",
+  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextBrand)
+}, {
+  transform: "rotate(0deg)",
+  "details[open] &": {
+    transform: "rotate(180deg)"
+  },
+  ...foundations_mediaQuery_reducedMotion.noReducedMotion({
+    "details[open] &, details[open].collapsing &": {
+      transition: `transform ${openCloseDuration} ${easing.ease_in_out_sine}`
+    }
+  }),
+  "details[open].collapsing &": {
+    transform: "rotate(0deg)"
+  }
+});
+const Accordion = ({
+  uid,
+  children,
+  iconName,
+  heading,
+  headingProps,
+  expanded = true,
+  ...props
+}) => {
+  const ref = react.useRef(null);
+  const [toggle, setToggle] = react.useState(expanded ? accordionToggleExpanded : accordionToggleCollapsed);
+  const [animated, setAnimated] = react.useState(true);
+  react.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();
+  }, []);
+  react.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__ */ jsxRuntime.jsxs(AccordionStyled, { ref, className, open: accordionToggleCollapsed !== toggle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(AccordionSummaryStyled, { onClick: handleToggle, role: "button", children: [
+      iconName && /* @__PURE__ */ jsxRuntime.jsx(index.IconLoader, { name: iconName, size: index.iconSizeMd }),
+      /* @__PURE__ */ jsxRuntime.jsx(AccordionHeadingStyled, { ...headingProps, size: "xs", children: heading }),
+      /* @__PURE__ */ jsxRuntime.jsx(AccordionOpenIndicatorStyled, { size: index.iconSizeMd })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(components_Collapsible, { expanded: accordionToggleExpanded === toggle, animated, onTransition, children })
+  ] });
+};
+exports.accordionToggleCollapsed = accordionToggleCollapsed;
+exports.accordionToggleCollapsing = accordionToggleCollapsing;
+exports.accordionToggleExpanded = accordionToggleExpanded;
+exports.default = Accordion;

package/components/Accordion/props.d.ts

@@ -0,0 +1,63 @@
+import { IconName } from '@vfde-react/inline-icon-library';
+import { HTMLAttributes, ReactNode } from 'react';
+import { HeadingProps } from '../Heading/props';
+import { PatternProps } from '../../foundations/PatternProps';
+/**
+ * This accordion is implemented using <details> and <summary>. Details' content is wrapped within a <Collapsible>
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
+ *
+ * To see the <Collapsible> animation, we need three states
+ *
+ * 1) expanded -> details[open=true] shows everything, including the animation for opening the flaps
+ * 2) closed -> details[open=false] hides everything except the summary
+ *
+ * So I cannot switch the open attribute directly, as this would also hide the animation when closing.
+ *
+ * 3) closing -> details[open=true].closing, which listens to transitionEnd and then removes the open attribute as soon as the closing animation is finished.
+ *
+ */
+export declare const accordionToggleExpanded = "expanded";
+export declare const accordionToggleCollapsing = "collapsing";
+export declare const accordionToggleCollapsed = "collapsed";
+export type AccordionToggleState = typeof accordionToggleExpanded | typeof accordionToggleCollapsing | typeof accordionToggleCollapsed;
+export interface AccordionSharedProps {
+    /**
+     *  function to handle open/close accordion
+     */
+    handleOnToggle?: (uid: string, expanded: boolean) => void;
+    /**
+     * define a scroll offset e.g. on a page with a fixed navigation
+     */
+    verticalScrollOffset?: number;
+}
+export interface AccordionProps extends AccordionSharedProps, PatternProps, HTMLAttributes<HTMLDetailsElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Accordion';
+    /**
+     * Accordion's uid
+     */
+    uid: string;
+    /**
+     * Accordion's content is represented by any combination of components in children
+     */
+    children: ReactNode;
+    /**
+     * Accordion's heading
+     */
+    heading: string;
+    /**
+     * Optional heading props passed to Accordion's summary
+     * Children and size are omitted. Children are accordion heading and size is always xs
+     */
+    headingProps?: Omit<HeadingProps, 'children' | 'size' | 'bottomSpacing'>;
+    /**
+     * Accordion icon on the left side
+     */
+    iconName?: IconName;
+    /**
+     * Is the accordion expanded or not
+     */
+    expanded?: boolean;
+}

package/components/Accordion/styled.d.ts

@@ -0,0 +1,6 @@
+import { HeadingProps } from '../Heading/props';
+import { AccordionProps } from './props';
+export declare const AccordionStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, Omit<AccordionProps, "heading" | "uid">>> & string;
+export declare const AccordionSummaryStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, Omit<AccordionProps, "heading" | "uid">>> & string;
+export declare const AccordionHeadingStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<HeadingProps, HeadingProps>> & string & Omit<import('react').FC<HeadingProps>, keyof import('react').Component<any, {}, any>>;
+export declare const AccordionOpenIndicatorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@vfde-react/inline-icon-library').InlineIconProps, never>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').InlineIconProps>, keyof import('react').Component<any, {}, any>>;

package/components/AccordionGroup/AccordionGroupSingleExpand.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { AccordionGroupProps } from './props';
+/**
+ * If prop singleExpand was true, we need to manage state to check if more than one accordion in the group is open and then close it.
+ */
+declare const AccordionGroupSingleExpand: FC<Omit<AccordionGroupProps, 'singleExpand'>>;
+export default AccordionGroupSingleExpand;

package/components/AccordionGroup/index.d.ts

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

package/components/AccordionGroup/index.js

@@ -0,0 +1,58 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const components_Accordion = require("../Accordion/index.js");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const react = require("react");
+const styled = require("styled-components");
+const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const AccordionGroupSingleExpand = ({
+  bottomSpacing = Spacing.spacingMd,
+  ...props
+}) => {
+  const getAccordionsExpanded = () => {
+    const accordionItemsOpenState = {};
+    props.items.forEach((accordionItem) => {
+      accordionItemsOpenState[accordionItem.uid] = true === accordionItem.expanded;
+    });
+    return accordionItemsOpenState;
+  };
+  const [accordionExpanded, setAccordionExpanded] = react.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.items.map((accordion, index) => {
+    const spacing = index + 1 === props.items.length ? bottomSpacing : Spacing.spacingNone;
+    return /* @__PURE__ */ jsxRuntime.jsx(components_Accordion.default, { ...accordion, expanded: accordionExpanded[accordion.uid], handleOnToggle, bottomSpacing: spacing, verticalScrollOffset: props.verticalScrollOffset, children: accordion.children }, accordion.uid);
+  }) });
+};
+const AccordionGroupStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "AccordionGroupStyled",
+  componentId: "sc-17dfswd-0"
+})(foundations_token_getBottomSpacing.getBottomSpacing);
+const AccordionGroup = ({
+  singleExpand = false,
+  bottomSpacing = Spacing.spacingMd,
+  ...props
+}) => {
+  if (singleExpand) {
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionGroupStyled, { className: props.className, bottomSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionGroupSingleExpand, { ...props, bottomSpacing }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionGroupStyled, { bottomSpacing, children: props.items.map((accordion, index) => {
+    const spacing = index + 1 === props.items.length ? bottomSpacing : Spacing.spacingNone;
+    return /* @__PURE__ */ jsxRuntime.jsx(components_Accordion.default, { ...accordion, bottomSpacing: spacing, handleOnToggle: accordion.handleOnToggle || props.handleOnToggle, children: accordion.children }, accordion.uid);
+  }) });
+};
+module.exports = AccordionGroup;

package/components/AccordionGroup/props.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+import { AccordionProps, AccordionSharedProps } from '../Accordion/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface AccordionGroupProps extends AccordionSharedProps, PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Accordion content
+     */
+    items: AccordionProps[];
+    /**
+     * Accordions can behave in two ways: single-expand, where expanding one item closes the others or multiple-expand, where several items can be open simultaneously.
+     */
+    singleExpand?: boolean;
+    /** Pin component's name from string to the concrete name */
+    component?: 'AccordionGroup';
+}

package/components/AccordionGroup/stories/scrollToViewFixedHeaderStoryObj.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { AccordionGroupProps } from '../props';
+export declare const LayoutWithFixedHeader: FC<AccordionGroupProps>;

package/components/AccordionGroup/styled.d.ts

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

package/components/Badge/index.d.ts

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

package/components/Badge/index.js

@@ -0,0 +1,11 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("react/jsx-runtime");
+require("../../index-_A9hEpl9.cjs");
+require("../../Spacing-Cu_j2b83.cjs");
+require("../../SizeTypes-CoZ2p2qq.cjs");
+require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
+const components_Badge = require("../../index-CnLaY-bi.cjs");
+exports.BadgeAppearanceColor = components_Badge.BadgeAppearanceColor;
+exports.default = components_Badge.Badge;

package/components/Badge/props.d.ts

@@ -0,0 +1,30 @@
+import { IconName } from '@vfde-react/inline-icon-library';
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { ObjectColor } from '../../foundations/token/types/ObjectColor';
+import { mediumSize, smallSize } from '../../foundations/types/SizeTypes';
+import { Theme } from '../../foundations/types/Theme';
+export type BadgeAppearance = 'primary' | 'secondary' | 'tertiary' | 'success';
+export declare const BadgeAppearanceColor: Record<BadgeAppearance, ObjectColor>;
+export interface BadgeProps extends PatternProps, HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Badge';
+    /**
+     * Can be used on darker backgrounds by setting to `dark`
+     */
+    theme?: Theme;
+    /**
+     * Support for several different appearances with their own background colors
+     */
+    appearance?: BadgeAppearance;
+    /**
+     * Supports two sizes: small and medium
+     */
+    size?: typeof smallSize | typeof mediumSize;
+    /**
+     * Specify a system icon name to be displayed to the left of content. All system icons are listed here: https://www.vodafone.de/simplicity/icons/
+     */
+    icon?: IconName;
+}

package/components/Badge/styled.d.ts

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

package/components/Body/index.d.ts

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

package/components/Body/index.js

@@ -0,0 +1,75 @@
+"use client";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const TextBodySize = require("../../TextBodySize-DeP5RE2m.cjs");
+const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
+const styled = require("styled-components");
+const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
+const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
+const foundations_token_getFontWeight = require("../../foundations/token/getFontWeight/index.js");
+const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const BodyStyled = styled.p.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "BodyStyled",
+  componentId: "sc-1n7n7pv-0"
+})({
+  outline: "none",
+  color: "inherit",
+  verticalAlign: "baseline"
+}, ({
+  size = TextBodySize.textBodyMd
+}) => foundations_token_getBodySize.getBodySize(size), ({
+  weight,
+  tag
+}) => {
+  if ("strong" === tag) {
+    return {
+      fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightBold)
+    };
+  }
+  if (!weight) {
+    return {};
+  }
+  return {
+    fontWeight: foundations_token_getFontWeight.getFontWeight(weight)
+  };
+}, ({
+  tag
+}) => {
+  if ("sup" === tag) {
+    return {
+      verticalAlign: "super",
+      fontSize: "smaller"
+    };
+  }
+  if ("span" === tag) {
+    return {
+      display: "inline-block"
+    };
+  }
+  return {};
+}, ({
+  align
+}) => ({
+  textAlign: align
+}), foundations_token_getBottomSpacing.getBottomSpacing);
+const bodyAlignLeft = "left";
+const bodyAlignCenter = "center";
+const bodyAlignRight = "right";
+const Body = ({
+  tag = "p",
+  bottomSpacing,
+  ...props
+}) => {
+  if (!bottomSpacing) {
+    bottomSpacing = TextBodySize.textBodySm === props.size ? Spacing.spacingSm : Spacing.spacingMd;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(BodyStyled, { ...props, bottomSpacing, as: tag, tag, children: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(props.children) });
+};
+exports.bodyAlignCenter = bodyAlignCenter;
+exports.bodyAlignLeft = bodyAlignLeft;
+exports.bodyAlignRight = bodyAlignRight;
+exports.default = Body;

package/components/Body/props.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { divTagName, pTagName, spanTagName, strongTagName, supTagName } from '../../foundations/tags';
+import { FontWeight } from '../../foundations/token/types/FontWeight';
+import { TextBodySize } from '../../foundations/token/types/TextBodySize';
+import { Theme } from '../../foundations/types/Theme';
+export type BodyTags = typeof pTagName | typeof divTagName | typeof spanTagName | typeof strongTagName | typeof supTagName;
+export declare const bodyAlignLeft = "left";
+export declare const bodyAlignCenter = "center";
+export declare const bodyAlignRight = "right";
+type BodyAlign = typeof bodyAlignLeft | typeof bodyAlignCenter | typeof bodyAlignRight;
+export interface BodyProps extends PatternProps, HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * body text tshirt size can be medium or small
+     */
+    size?: TextBodySize;
+    /**
+     * font weight can be light, regular or bold. if strong is used as a tag, bold is always used
+     */
+    weight?: FontWeight;
+    /**
+     * Align left, center or right
+     */
+    align?: BodyAlign;
+    /**
+     * Text to be rendered in Body
+     */
+    children: ReactNode;
+    /**
+     * Define a html-tag that is used to render Body
+     */
+    tag?: BodyTags;
+    /**
+     * Can be used on darker backgrounds by setting to 'dark'
+     */
+    theme?: Theme;
+    /** Pin component's name from string to the concrete name */
+    component?: 'Body';
+}
+export {};

package/components/Body/styled.d.ts

@@ -0,0 +1,4 @@
+import { BodyProps, BodyTags } from './props';
+export declare const BodyStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, BodyProps & {
+    as?: BodyTags;
+}>> & string;

package/components/BottomBar/index.d.ts

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

package/components/BottomBar/index.js

@@ -0,0 +1,78 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const components_Container = require("../Container/index.js");
+const styled = require("styled-components");
+const styled$1 = require("../../styled-D36Jj6J7.cjs");
+const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
+const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
+const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const bottomBarExtraPadding = 100;
+const BottomBarStyled = styled(styled$1.CardStyled).withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "BottomBarStyled",
+  componentId: "sc-oqw46b-0"
+})({
+  paddingLeft: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
+  paddingRight: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
+  paddingBottom: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} + ${bottomBarExtraPadding}px)`,
+  position: "fixed",
+  bottom: 0,
+  width: "100%",
+  height: "auto",
+  borderBottomLeftRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusNone),
+  borderBottomRightRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusNone),
+  transition: "transform 400ms cubic-bezier(0.7, -0.4, 0.4, 1.4)"
+}, ({
+  visible
+}) => {
+  return {
+    transform: visible ? `translateY(${bottomBarExtraPadding}px)` : "translateY(100%)"
+  };
+});
+const BottomBar = ({
+  theme = "Light",
+  ...props
+}) => {
+  const bottomBarRef = react.useRef(null);
+  const [bottomBarHeight, setBottomBarHeight] = react.useState(0);
+  const [visible, setVisible] = react.useState(props.visible === true);
+  const [screenSize, setScreenSize] = react.useState(null);
+  react.useEffect(() => {
+    setVisible(true === props.visible);
+  }, [props.visible]);
+  react.useEffect(() => {
+    if (bottomBarRef.current) {
+      setBottomBarHeight(bottomBarRef.current.clientHeight - bottomBarExtraPadding);
+    }
+    const updateScreenSize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    updateScreenSize();
+    window.addEventListener("resize", updateScreenSize);
+    return () => {
+      window.removeEventListener("resize", updateScreenSize);
+    };
+  }, []);
+  react.useEffect(() => {
+    if (screenSize) {
+      if (bottomBarHeight * 5 > screenSize.height) {
+        visible && setVisible(false);
+      } else if (props.visible) {
+        setVisible(props.visible);
+      }
+    }
+  }, [screenSize]);
+  react.useEffect(() => {
+    document.documentElement.classList.toggle("HasObscuringBottomBar", visible);
+    document.documentElement.style.setProperty("--bottomBarHeight", `${bottomBarHeight}px`);
+  }, [bottomBarHeight, props.children]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BottomBarStyled, { "aria-hidden": true, className: `${theme} ${props.className}`, ref: bottomBarRef, ...props, visible, children: /* @__PURE__ */ jsxRuntime.jsx(components_Container.default, { padding: Spacing.spacingNone, children: props.children }) });
+};
+module.exports = BottomBar;

package/components/BottomBar/props.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { Theme } from 'storybook/internal/theming';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface BottomBarProps extends Omit<PatternProps, 'bottomSpacing'>, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Bottom bar content
+     */
+    children: ReactNode;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'BottomBar';
+    theme?: Theme;
+    /**
+     * Visibility of BottomBar
+     */
+    visible?: boolean;
+}

package/components/BottomBar/styled.d.ts

@@ -0,0 +1,3 @@
+import { BottomBarProps } from './props';
+export declare const bottomBarExtraPadding = 100;
+export declare const BottomBarStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('../Card').CardProps> & import('../Card').CardProps, BottomBarProps>> & string;