@vodafone_de/brix-components 3.1.7 → 3.1.9

package/README.md

@@ -1,3 +1,4 @@
 # Highly experimental build
 
 Very likely no one will use this build in production.
+

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-eg_mz82k.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,
+  borderWidthSelected as c,
+  borderWidthSm 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-B-7SYaM_.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 {
+  spacingMd as a,
+  spacingXs as b,
+  spacingNone as c,
+  spacing2Xs as d,
+  spacingXl as e,
+  spacingLg as f,
+  spacingSm as s
+};

package/dist/TextBodySize-ovWXXu9n.js

@@ -0,0 +1,6 @@
+const textBodyMd = "md";
+const textBodySm = "sm";
+export {
+  textBodyMd as a,
+  textBodySm 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.d.ts

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

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-eg_mz82k.js";
+import { b as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { a as spacingMd, c as spacingNone, b as spacingXs } from "../../Spacing-B-7SYaM_.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/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/dist/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/dist/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/dist/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/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 { a as spacingMd, c as spacingNone } from "../../Spacing-B-7SYaM_.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/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/dist/components/AccordionGroup/stories/scrollToViewFixedHeaderStoryObj.d.ts

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