@vodafone_de/brix-components 3.0.1 → 3.0.2

package/dist/components/BottomBar/index.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import Container from "../Container/index.js";
+import styled from "styled-components";
+import { C as CardStyled } from "../../styled-BpvuD699.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const bottomBarExtraPadding = 100;
+const BottomBarStyled = styled(CardStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "BottomBarStyled",
+  componentId: "sc-oqw46b-0"
+})({
+  paddingLeft: getSpacing(spacingNone),
+  paddingRight: getSpacing(spacingNone),
+  paddingBottom: `calc(${getSpacing(spacingMd)} + ${bottomBarExtraPadding}px)`,
+  position: "fixed",
+  bottom: 0,
+  width: "100%",
+  height: "auto",
+  borderBottomLeftRadius: getBorderRadius(borderRadiusNone),
+  borderBottomRightRadius: getBorderRadius(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 = useRef(null);
+  const [bottomBarHeight, setBottomBarHeight] = useState(0);
+  const [visible, setVisible] = useState(props.visible === true);
+  const [screenSize, setScreenSize] = useState(null);
+  useEffect(() => {
+    setVisible(true === props.visible);
+  }, [props.visible]);
+  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);
+    };
+  }, []);
+  useEffect(() => {
+    if (screenSize) {
+      if (bottomBarHeight * 5 > screenSize.height) {
+        visible && setVisible(false);
+      } else if (props.visible) {
+        setVisible(props.visible);
+      }
+    }
+  }, [screenSize]);
+  useEffect(() => {
+    document.documentElement.classList.toggle("HasObscuringBottomBar", visible);
+    document.documentElement.style.setProperty("--bottomBarHeight", `${bottomBarHeight}px`);
+  }, [bottomBarHeight, props.children]);
+  return /* @__PURE__ */ jsx(BottomBarStyled, { "aria-hidden": true, className: `${theme} ${props.className}`, ref: bottomBarRef, ...props, visible, children: /* @__PURE__ */ jsx(Container, { padding: spacingNone, children: props.children }) });
+};
+export {
+  BottomBar as default
+};

package/dist/components/Button/index.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import { B as ButtonAsLink, g as getButtonIcon } from "../../index-C4XnzWFL.js";
+import { B as ButtonStyled } from "../../styled-FNJyDkPV.js";
+const buttonFullWidth = "full";
+const buttonAutoWidth = "auto";
+const isButtonAsLinkProp = (props) => {
+  return props.href !== void 0;
+};
+const Button = (props) => {
+  if (isButtonAsLinkProp(props)) {
+    return /* @__PURE__ */ jsx(ButtonAsLink, { ...props });
+  }
+  return /* @__PURE__ */ jsxs(ButtonStyled, { ...props, children: [
+    renderInlineRichTextFromOpenText(props.children),
+    getButtonIcon(props == null ? void 0 : props.icon)
+  ] });
+};
+export {
+  buttonAutoWidth,
+  buttonFullWidth,
+  Button as default
+};

package/dist/components/ButtonAsLink/index.js

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

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import Button from "../Button/index.js";
+import Flex from "../Flex/index.js";
+import { f as flexOrientationHorizontal, a as flexJustifyStart } from "../../styled-CpoX5USb.js";
+import FlexItem from "../FlexItem/index.js";
+import { c as spacingSm, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { useViewport } from "../../hooks/useViewport/index.js";
+const renderButtons = (buttons, isMobile, isReversed = false) => {
+  if (!isMobile && isReversed) {
+    buttons = buttons.slice().reverse();
+  }
+  return buttons.map((button) => {
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(FlexItem, { as: "li", grow: isMobile ? "auto" : void 0, bottomSpacing: "None", children: /* @__PURE__ */ jsx(Button, { ...button, bottomSpacing: "None", width: isMobile ? "full" : button.width, children: button.children }, button.uid) }, button.uid) });
+  });
+};
+const ButtonGroup = ({
+  isReversed,
+  buttons,
+  orientation = flexOrientationHorizontal,
+  justifyHorizontal = flexJustifyStart,
+  bottomSpacing = spacingMd,
+  ...props
+}) => {
+  const viewport = useViewport();
+  let justify = "start";
+  if ("sm" !== viewport) {
+    justify = "horizontal" === orientation ? justifyHorizontal : "start";
+  }
+  return /* @__PURE__ */ jsx(Flex, { className: props.className, bottomSpacing, gapSpacing: spacingSm, justify, orientation: "sm" === viewport ? "vertical" : orientation, as: "ul", children: renderButtons(buttons, "sm" === viewport, isReversed) });
+};
+export {
+  ButtonGroup as default
+};

package/dist/components/Card/index.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { d as divTagName } from "../../tags-DI6H1biK.js";
+import { C as CardStyled } from "../../styled-BpvuD699.js";
+import { a } from "../../styled-BpvuD699.js";
+const Card = ({
+  children,
+  className,
+  theme,
+  tag = divTagName,
+  isMobileDark = false,
+  appearance,
+  ...props
+}) => /* @__PURE__ */ jsx(CardStyled, { ...props, className: (className ? className : "") + (isMobileDark ? " DarkMobile" : "") + ("Dark" === theme || "secondary" === appearance ? " Dark" : ""), appearance, as: tag, children });
+export {
+  a as CardAppearanceColor,
+  Card as default
+};

package/dist/components/Carousel/index.js

@@ -0,0 +1,497 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "@af-utils/scrollend-polyfill";
+import { createContext, useRef, useState, useEffect, useContext, createElement } from "react";
+import { useFocusWithin } from "../../hooks/useFocusWithin/index.js";
+import { l as liTagName, u as ulTagName } from "../../tags-DI6H1biK.js";
+import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import styled from "styled-components";
+import { C as CardStyled } from "../../styled-BpvuD699.js";
+import { G as GridStyled } from "../../styled-ZpQohvyx.js";
+import { G as GridItemStyled } from "../../styled-Wlt68LfQ.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
+import { c as colorObjectBrand, d as colorObjectUnselected } from "../../ObjectColor-BZDBuV8H.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import IconButton from "../IconButton/index.js";
+import { S as ScreenreaderOnly } from "../../index-DQhtQZ85.js";
+const getItems = (items, loop) => {
+  const normalizedItems = [...items].map((item, index) => ({
+    ...item,
+    index,
+    ghost: false,
+    interactive: true
+  }));
+  for (const index in normalizedItems) {
+    normalizedItems[index].index = parseInt(index, 10);
+    normalizedItems[index].ghost = false;
+  }
+  if (!loop) {
+    return normalizedItems;
+  }
+  const front = [...normalizedItems].map((item) => {
+    const ghost = {
+      ...item
+    };
+    ghost.uid = `front-ghost${ghost.uid}`;
+    ghost.ghost = true;
+    return ghost;
+  });
+  const back = [...normalizedItems].map((item) => {
+    const ghost = {
+      ...item
+    };
+    ghost.uid = `back-ghost${ghost.uid}`;
+    ghost.ghost = true;
+    return ghost;
+  });
+  return front.concat(normalizedItems).concat(back);
+};
+const getItemByScroll = (scroll, itemWidth, items) => {
+  if (0 > scroll) {
+    scroll = 0;
+  }
+  if (scroll > itemWidth * items.length) {
+    scroll = itemWidth * items.length;
+  }
+  let visibleItem = Math.ceil(scroll / itemWidth);
+  if (!visibleItem) {
+    visibleItem = 0;
+  }
+  if (visibleItem >= items.length) {
+    visibleItem = items.length - 1;
+  }
+  if (!items[visibleItem]) {
+    return 0;
+  }
+  return visibleItem;
+};
+const scrollTo = (element, left, behavior = "smooth") => {
+  element.scrollTo({
+    left,
+    behavior
+  });
+};
+const initialState = {
+  ref: void 0,
+  visibleItems: 1,
+  interactive: [0],
+  goPrev: false,
+  goNext: false,
+  numberOfIndicators: 0,
+  activeIndicator: 0
+};
+const CarouselContext = createContext({
+  state: initialState
+});
+const CarouselProvider = ({
+  children,
+  loop,
+  ...props
+}) => {
+  const ref = useRef(null);
+  const focus = useFocusWithin(ref);
+  const [activeIndex, setActiveIndex] = useState(props.activeIndex);
+  const [scrollSpyIndex, setScrollSpyIndex] = useState(void 0);
+  const [interactive, setInteractive] = useState([]);
+  const [needsFirstPosition, setNeedsFirstPosition] = useState(activeIndex !== 0);
+  const [itemWidth, setItemWidth] = useState(0);
+  const [visibleItems, setVisibleItems] = useState(1);
+  const [goPrev, setGoPrev] = useState(false);
+  const [goNext, setGoNext] = useState(false);
+  const [numberOfIndicators, setNumberOfIndicators] = useState(0);
+  const [activeIndicator, setActiveIndicator] = useState(props.items[props.activeIndex].index);
+  useEffect(() => {
+    if (loop) {
+      const update = props.items.filter((item) => !item.ghost).length;
+      setNumberOfIndicators(update);
+    } else {
+      const update = props.items.filter((item) => !item.ghost).length - visibleItems + 1;
+      setNumberOfIndicators(update);
+    }
+  }, [loop, visibleItems, props.items]);
+  useEffect(() => {
+    if (!(ref == null ? void 0 : ref.current)) {
+      return;
+    }
+    if (!itemWidth) {
+      return;
+    }
+    const track = ref == null ? void 0 : ref.current.offsetWidth;
+    setVisibleItems(Math.floor(track / itemWidth));
+  }, [itemWidth]);
+  useEffect(() => {
+    let updateInteractive = [...Array(visibleItems).keys()].map((i) => activeIndex + i);
+    if (focus) {
+      updateInteractive = [...Array(props.items.length).keys()];
+    }
+    setInteractive(updateInteractive);
+  }, [focus, activeIndex, visibleItems, props.items]);
+  useEffect(() => {
+    if (!(ref == null ? void 0 : ref.current)) {
+      return;
+    }
+    const handleResize = () => {
+      if (!window) {
+        return;
+      }
+      if (!(ref == null ? void 0 : ref.current)) {
+        return;
+      }
+      const itemWidth2 = ref.current.querySelector("[data-carousel-item]").offsetWidth;
+      setItemWidth(itemWidth2);
+    };
+    window.addEventListener("resize", handleResize);
+    handleResize();
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [ref.current]);
+  useEffect(() => {
+    var _a, _b;
+    if (!(ref == null ? void 0 : ref.current)) {
+      return;
+    }
+    if (!itemWidth) {
+      return;
+    }
+    const handleScroll = (event) => {
+      const left = event.target.scrollLeft;
+      const ucurrent = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
+      setScrollSpyIndex(ucurrent);
+    };
+    const handleScrollend = (event) => {
+      const left = event.target.scrollLeft;
+      let updateActiveIndex = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
+      if (loop) {
+        const ghosts = [];
+        for (let i = 0, x = visibleItems; i < x; i += 1) {
+          ghosts.push(props.items[i + updateActiveIndex].ghost);
+        }
+        if (!ghosts.includes(false)) {
+          updateActiveIndex = props.items.findIndex((item) => item.index === props.items[updateActiveIndex].index && !item.ghost);
+          const left2 = updateActiveIndex * itemWidth;
+          const behavior = "instant";
+          scrollTo(ref.current, left2, behavior);
+        }
+      }
+      if (needsFirstPosition) {
+        setNeedsFirstPosition(false);
+      }
+      setActiveIndex(updateActiveIndex);
+      setScrollSpyIndex(void 0);
+    };
+    (_a = ref.current) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
+    (_b = ref.current) == null ? void 0 : _b.addEventListener("scrollend", handleScrollend);
+    return () => {
+      var _a2, _b2;
+      (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("scroll", handleScroll);
+      (_b2 = ref.current) == null ? void 0 : _b2.removeEventListener("scrollend", handleScrollend);
+    };
+  }, [ref.current, itemWidth, visibleItems, props.items]);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (scrollSpyIndex) {
+      return;
+    }
+    if (activeIndex === scrollSpyIndex) {
+      return;
+    }
+    const left = activeIndex * itemWidth;
+    const behavior = needsFirstPosition ? "instant" : "smooth";
+    scrollTo(ref.current, left, behavior);
+  }, [activeIndex, scrollSpyIndex, ref.current, itemWidth]);
+  useEffect(() => {
+    if (!props.onUpdate) {
+      return;
+    }
+    const visibleIndexes = [];
+    for (let i = 0, x = visibleItems; i < x; i += 1) {
+      visibleIndexes.push(props.items[i + activeIndex].index);
+    }
+    props.onUpdate(visibleIndexes);
+  }, [activeIndex]);
+  const movePrev = () => {
+    const prev = activeIndex > 0 ? activeIndex - 1 : props.items.length - 1;
+    setActiveIndex(prev);
+  };
+  const moveNext = () => {
+    const next = activeIndex < props.items.length ? activeIndex + 1 : 0;
+    setActiveIndex(next);
+  };
+  useEffect(() => {
+    if (loop) {
+      setGoPrev(() => movePrev);
+      setGoNext(() => moveNext);
+    } else {
+      setGoPrev(activeIndex === 0 ? false : () => movePrev);
+      setGoNext(activeIndex + 1 >= numberOfIndicators ? false : () => moveNext);
+    }
+  }, [loop, activeIndex, numberOfIndicators]);
+  useEffect(() => {
+    const index = scrollSpyIndex || activeIndex;
+    setActiveIndicator(props.items[index].index);
+  }, [activeIndex, scrollSpyIndex]);
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: {
+    state: {
+      ref,
+      visibleItems,
+      interactive,
+      goPrev,
+      goNext,
+      numberOfIndicators,
+      activeIndicator
+    }
+  }, children });
+};
+const offsetHorizontal = 8;
+const offsetVertical = 8;
+const CarouselStyled = styled.section.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselStyled",
+  componentId: "sc-14nqzsr-0"
+})({
+  paddingBottom: "44px"
+}, getBottomSpacing);
+const CarouselViewportStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselViewportStyled",
+  componentId: "sc-14nqzsr-1"
+})({
+  overflowX: "scroll",
+  scrollBehavior: "smooth",
+  scrollSnapType: "x mandatory",
+  scrollbarWidth: "none",
+  width: `calc(100% + ${2 * offsetHorizontal}px)`,
+  "&::-webkit-scrollbar": {
+    width: 0,
+    height: 0
+  }
+}, () => {
+  const nestedStyles = {};
+  const cardSelector = `&:has(${CardStyled.toString()})`;
+  nestedStyles[cardSelector] = {
+    paddingLeft: `${offsetHorizontal}px`,
+    paddingRight: `${offsetHorizontal}px`,
+    marginLeft: `${-1 * offsetHorizontal}px`,
+    paddingTop: `${offsetVertical}px`,
+    paddingBottom: `${offsetVertical}px`,
+    width: `calc(100% + ${2 * offsetHorizontal}px)`,
+    scrollPaddingLeft: `calc(${getSpacing(spacingMd)} - 6px)`,
+    ...viewport.md({
+      scrollPaddingLeft: `calc(${getSpacing(spacingMd)} - 12px)`
+    })
+  };
+  return nestedStyles;
+});
+const CarouselTrackStyled = styled(GridStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselTrackStyled",
+  componentId: "sc-14nqzsr-2"
+})({
+  flexWrap: "nowrap",
+  paddingBottom: getSpacing(spacingMd)
+}, () => {
+  const nestedStyles = {};
+  const cardSelector = `&:has(${CardStyled.toString()})`;
+  nestedStyles[cardSelector] = {
+    paddingBottom: `calc(${getSpacing(spacingMd)} - ${offsetVertical}px)`
+  };
+  return nestedStyles;
+});
+const CarouselItemStyled = styled(GridItemStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselItemStyled",
+  componentId: "sc-14nqzsr-3"
+})({});
+const CarouselTrackEndStyled = styled(GridItemStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselTrackEndStyled",
+  componentId: "sc-14nqzsr-4"
+})({
+  flexBasis: `${getSpacing(spacingMd)}px`
+});
+const CarouselSnapperStyled = styled.div.withConfig({
+  displayName: "CarouselSnapperStyled",
+  componentId: "sc-14nqzsr-5"
+})({
+  scrollSnapAlign: "start",
+  height: "100%"
+});
+const CarouselControlStyled = styled.aside.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselControlStyled",
+  componentId: "sc-14nqzsr-6"
+})({
+  position: "relative"
+});
+const CarouselNavigationPrevButtonStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselNavigationPrevButtonStyled",
+  componentId: "sc-14nqzsr-7"
+})({
+  position: "absolute",
+  top: "0px",
+  left: "0px"
+});
+const CarouselNavigationNextButtonStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselNavigationNextButtonStyled",
+  componentId: "sc-14nqzsr-8"
+})({
+  position: "absolute",
+  top: "0px",
+  right: "0px"
+});
+const CarouselIndicatorsStyled = styled.ol.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselIndicatorsStyled",
+  componentId: "sc-14nqzsr-9"
+})({
+  position: "absolute",
+  right: "0",
+  left: "0",
+  textAlign: "center",
+  height: "24px",
+  paddingTop: "10px",
+  display: "inline-block"
+});
+const CarouselIndicatorItemStyled = styled.li.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselIndicatorItemStyled",
+  componentId: "sc-14nqzsr-10"
+})({
+  display: "inline-block",
+  width: "24px",
+  height: "24px",
+  position: "relative"
+}, {
+  "& div": {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translateY(-50%) translateX(-50%)"
+  }
+});
+const CarouselIndicatorStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "CarouselIndicatorStyled",
+  componentId: "sc-14nqzsr-11"
+})({
+  display: "inline-block",
+  borderRadius: getBorderRadius(borderRadiusFull),
+  transition: "background-color 0.6s ease , width 0.6s ease,height 0.6s ease"
+}, ({
+  isActive = false
+}) => {
+  return {
+    backgroundColor: isActive ? getObjectColor(colorObjectBrand) : getObjectColor(colorObjectUnselected),
+    width: isActive ? "16px" : "10px",
+    height: isActive ? "16px" : "10px"
+  };
+});
+const CarouselIndicator = () => {
+  const {
+    state: {
+      numberOfIndicators,
+      activeIndicator
+    }
+  } = useContext(CarouselContext);
+  if (!numberOfIndicators) {
+    return null;
+  }
+  const indicators = [...Array(numberOfIndicators).keys()];
+  return /* @__PURE__ */ jsx(CarouselIndicatorsStyled, { children: indicators.map((indicator) => /* @__PURE__ */ jsx(CarouselIndicatorItemStyled, { isActive: indicator === activeIndicator, children: /* @__PURE__ */ jsx(CarouselIndicatorStyled, { isActive: indicator === activeIndicator }) }, indicator)) });
+};
+const CarouselItem = ({
+  uid,
+  gridConfig,
+  interactive = true,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ createElement(CarouselItemStyled, { ...props, component: "GridItem", key: uid, uid, ...gridConfig, as: liTagName, ...{
+    inert: !interactive ? true : void 0
+  } }, children);
+};
+const CarouselNavigation = ({
+  uid,
+  screenReaderInstruction,
+  prevAriaLabel,
+  nextAriaLabel
+}) => {
+  const {
+    state: {
+      goPrev,
+      goNext
+    }
+  } = useContext(CarouselContext);
+  const getPrevButton = () => {
+    if (false === goPrev) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(CarouselNavigationPrevButtonStyled, { children: /* @__PURE__ */ jsx(IconButton, { label: prevAriaLabel, iconName: "ChevronLeft", appearance: "tertiary", tabIndex: -1, "aria-disabled": "true", "aria-describedby": `${uid}-carousel-instruction`, onClick: goPrev }) });
+  };
+  const getNextButton = () => {
+    if (false === goNext) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(CarouselNavigationNextButtonStyled, { children: /* @__PURE__ */ jsx(IconButton, { label: nextAriaLabel, iconName: "ChevronRight", appearance: "tertiary", tabIndex: -1, "aria-disabled": "true", "aria-describedby": `${uid}-carousel-instruction`, onClick: goNext }) });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ScreenreaderOnly, { id: `${uid}-carousel-instruction`, children: screenReaderInstruction }),
+    getPrevButton(),
+    getNextButton()
+  ] });
+};
+const CarouselInner = ({
+  gridConfig,
+  items,
+  ...props
+}) => {
+  const {
+    state: {
+      ref,
+      interactive
+    }
+  } = useContext(CarouselContext);
+  return /* @__PURE__ */ jsxs(CarouselStyled, { ...props, bottomSpacing: spacingMd, children: [
+    /* @__PURE__ */ jsx(CarouselViewportStyled, { ref, children: /* @__PURE__ */ jsxs(CarouselTrackStyled, { as: ulTagName, stretch: true, children: [
+      items.map(({
+        uid,
+        ...item
+      }, index) => /* @__PURE__ */ jsx(CarouselItem, { uid, gridConfig, interactive: interactive.includes(index), "data-carousel-item": item.index, "data-carousel-ghost": true === item.ghost, children: /* @__PURE__ */ jsx(CarouselSnapperStyled, { children: item.children }) }, uid)),
+      /* @__PURE__ */ jsx(CarouselTrackEndStyled, { ...gridConfig, as: liTagName })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CarouselControlStyled, { children: [
+      /* @__PURE__ */ jsx(CarouselIndicator, {}),
+      /* @__PURE__ */ jsx(CarouselNavigation, { uid: props.uid, screenReaderInstruction: props.screenReaderInstruction, prevAriaLabel: props.prevAriaLabel, nextAriaLabel: props.nextAriaLabel })
+    ] })
+  ] });
+};
+const carouselDefaultGridConfig = {
+  sm: 12,
+  md: 6,
+  lg: 4
+};
+const Carousel = ({
+  items,
+  activeIndex,
+  loop = false,
+  gridConfig = carouselDefaultGridConfig,
+  ...props
+}) => {
+  activeIndex = activeIndex ? activeIndex : 0;
+  activeIndex = loop ? activeIndex + items.length : activeIndex;
+  const loopableItems = getItems(items, loop);
+  return /* @__PURE__ */ jsx(CarouselProvider, { ...props, loop, gridConfig, items: loopableItems, activeIndex, children: /* @__PURE__ */ jsx(CarouselInner, { ...props, loop, gridConfig, items: loopableItems, activeIndex }) });
+};
+export {
+  Carousel as default
+};