@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/index-Jy4O4KhV.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { a as ButtonIconStyled } from "./styled-Bq2k-APw.js";
+import { i as iconSizeSm } from "./IconSize-Da9zhR76.js";
+import styled from "styled-components";
+import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
+import forcedColors from "./foundations/media-query/forcedColors/index.js";
+import { getBodySize } from "./foundations/token/getBodySize/index.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 { g as getSpacing } from "./index-l-i-mIeP.js";
+import { getTextColor } from "./foundations/token/getTextColor/index.js";
+import { p as primaryAppearance } from "./Appearance-CIB-YW3f.js";
+import { c as colorBorderFocus } from "./BorderColor-BACbvI20.js";
+import { b as borderWidthFocus } from "./BorderWidth-CwrNKc0Q.js";
+import { s as spacingMd, b as spacingNone, a as spacingXs } from "./Spacing-Dj-qX3Z5.js";
+import { t as textBodyMd } from "./TextBodySize-CP9q4gRv.js";
+import { f as colorTextBrand, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
+import { a as shouldForwardPropExcluding } from "./shouldForwardProp-CONMmlMa.js";
+const getLinkIcon = (icon, iconPosition) => /* @__PURE__ */ jsx(ButtonIconStyled, { name: icon, iconPosition, size: iconSizeSm });
+const getLinkStyles = (appearance) => {
+  return {
+    ...forcedColors({
+      color: "LinkText"
+    }),
+    display: "flex",
+    width: "fit-content",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+    ...getBodySize(textBodyMd),
+    "&:focus-within": {
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      }),
+      boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+      outline: "none",
+      textDecoration: "underline"
+    },
+    color: appearance === primaryAppearance ? getTextColor(colorTextBrand) : getTextColor(colorTextNeutral),
+    "&:visited": {
+      ...forcedColors({
+        color: "VisitedText"
+      }),
+      color: appearance === primaryAppearance ? getTextColor(colorTextBrand) : getTextColor(colorTextNeutral)
+    },
+    background: "transparent",
+    textDecoration: "none",
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  };
+};
+const LinkStyled = styled.span.withConfig({
+  shouldForwardProp: shouldForwardPropExcluding(["href"]),
+  displayName: "LinkStyled",
+  componentId: "sc-hzziig-0"
+})(({
+  appearance = primaryAppearance
+}) => getLinkStyles(appearance), {
+  "& a": {
+    color: "inherit",
+    display: "flex",
+    gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+    textDecoration: "none"
+  },
+  "& a:focus-visible": {
+    outline: "none"
+  }
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const LinkAsButtonStyled = styled.button.withConfig({
+  // LinkAsButtonProps extends LinkSharedProps, which is also used by the anchor-rendering
+  // Link component. `target`/`rel`/`download` are anchor-only HTML attributes that are
+  // invalid on a `<button>` and must never reach the DOM here.
+  shouldForwardProp: shouldForwardPropExcluding(["target", "rel", "download"]),
+  displayName: "LinkAsButtonStyled",
+  componentId: "sc-1dce25p-0"
+})({
+  textAlign: "left"
+}, ({
+  appearance = primaryAppearance
+}) => getLinkStyles(appearance), ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}), ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const LinkAsButton = (props) => /* @__PURE__ */ jsxs(LinkAsButtonStyled, { ...props, children: [
+  props.children,
+  getLinkIcon(props.icon, props.iconPosition)
+] });
+export {
+  LinkAsButton as L,
+  LinkStyled as a,
+  getLinkIcon as g
+};

package/dist/index-Vn7o2SoU.js

@@ -0,0 +1,546 @@
+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-BeNegJAK.js";
+import { s as spacingMd, b as spacingNone } from "./Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import { C as CardStyled } from "./styled-bVvX_c0n.js";
+import { a as GridStyled, G as GridItemStyled } from "./styled-Bp9hHt9l.js";
+import { translateLayoutPropsToCss } from "./foundations/layout/index.js";
+import forcedColors from "./foundations/media-query/forcedColors/index.js";
+import { v as viewport } from "./index-CG4uiVbZ.js";
+import { getBorderRadius } from "./foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "./foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "./foundations/token/getBottomSpacing/index.js";
+import { getObjectColor } from "./foundations/token/getObjectColor/index.js";
+import { g as getSpacing } from "./index-l-i-mIeP.js";
+import { d as borderRadiusFull } from "./BorderRadius-0jhn76gB.js";
+import { d as borderWidthSm } from "./BorderWidth-CwrNKc0Q.js";
+import { d as colorObjectBrand, g as colorObjectUnselected } from "./ObjectColor-CSHEae46.js";
+import { s as shouldForwardProp } from "./shouldForwardProp-CONMmlMa.js";
+import IconButton from "./components/IconButton/index.js";
+import { S as ScreenreaderOnly } from "./index-p6eyyJpy.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,
+  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 [carouselLayoutedAttributes, setCarouselLayoutedAttributes] = useState(void 0);
+  const [goPrev, setGoPrev] = useState(false);
+  const [goNext, setGoNext] = useState(false);
+  const [numberOfIndicators, setNumberOfIndicators] = useState(0);
+  const [activeIndicator, setActiveIndicator] = useState(props.items[props.activeIndex].index);
+  const getCarouselLayoutedAttributes = () => {
+    const carouselElement = ref.current;
+    if (!carouselElement) {
+      return;
+    }
+    const itemWidth = carouselElement.querySelector("[data-carousel-item]").offsetWidth;
+    const track = carouselElement.offsetWidth;
+    const numberOfItemsThatFitOnTrack = Math.floor(track / itemWidth);
+    const visibleItems = Math.min(numberOfItemsThatFitOnTrack, props.items.length);
+    if ((carouselLayoutedAttributes == null ? void 0 : carouselLayoutedAttributes.itemWidth) !== itemWidth || (carouselLayoutedAttributes == null ? void 0 : carouselLayoutedAttributes.visibleItems) !== visibleItems) {
+      setCarouselLayoutedAttributes({
+        itemWidth,
+        visibleItems
+      });
+    }
+  };
+  useEffect(() => {
+    if (!carouselLayoutedAttributes) {
+      return;
+    }
+    if (loop) {
+      const update = props.items.filter((item) => !item.ghost).length;
+      setNumberOfIndicators(update);
+    } else {
+      const update = props.items.filter((item) => !item.ghost).length - carouselLayoutedAttributes.visibleItems + 1;
+      setNumberOfIndicators(update);
+    }
+  }, [loop, carouselLayoutedAttributes, props.items]);
+  useEffect(() => {
+    if (!carouselLayoutedAttributes) {
+      return;
+    }
+    let updateInteractive = [...Array(carouselLayoutedAttributes.visibleItems).keys()].map((i) => activeIndex + i);
+    if (focus) {
+      updateInteractive = [...Array(props.items.length).keys()];
+    }
+    setInteractive(updateInteractive);
+  }, [focus, activeIndex, carouselLayoutedAttributes, props.items]);
+  useEffect(() => {
+    if (!(ref == null ? void 0 : ref.current)) {
+      return;
+    }
+    window.addEventListener("resize", getCarouselLayoutedAttributes);
+    getCarouselLayoutedAttributes();
+    return () => {
+      window.removeEventListener("resize", getCarouselLayoutedAttributes);
+    };
+  }, [ref.current]);
+  useEffect(() => {
+    var _a, _b;
+    if (!(ref == null ? void 0 : ref.current)) {
+      return;
+    }
+    if (!carouselLayoutedAttributes) {
+      return;
+    }
+    const handleScroll = (event) => {
+      if (!carouselLayoutedAttributes) {
+        return;
+      }
+      const left = event.target.scrollLeft;
+      const ucurrent = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
+      setScrollSpyIndex(ucurrent);
+    };
+    const handleScrollend = (event) => {
+      if (!carouselLayoutedAttributes) {
+        return;
+      }
+      const left = event.target.scrollLeft;
+      let updateActiveIndex = getItemByScroll(left - carouselLayoutedAttributes.itemWidth / 2, carouselLayoutedAttributes.itemWidth, props.items);
+      if (loop) {
+        const ghosts = [];
+        for (let i = 0, x = carouselLayoutedAttributes.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 * carouselLayoutedAttributes.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, carouselLayoutedAttributes, props.items]);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    if (!carouselLayoutedAttributes) {
+      return;
+    }
+    if (scrollSpyIndex !== void 0) {
+      return;
+    }
+    if (focus) {
+      return;
+    }
+    if (activeIndex === scrollSpyIndex) {
+      return;
+    }
+    const left = activeIndex * carouselLayoutedAttributes.itemWidth;
+    const behavior = needsFirstPosition ? "instant" : "smooth";
+    scrollTo(ref.current, left, behavior);
+  }, [activeIndex, scrollSpyIndex, ref.current, carouselLayoutedAttributes]);
+  useEffect(() => {
+    if (loop || !carouselLayoutedAttributes) {
+      return;
+    }
+    setScrollSpyIndex(void 0);
+    const nonGhostCount = props.items.filter((i) => !i.ghost).length;
+    const maxStart = Math.max(0, nonGhostCount - carouselLayoutedAttributes.visibleItems);
+    setActiveIndex((prev) => prev > maxStart ? maxStart : prev);
+  }, [loop, carouselLayoutedAttributes == null ? void 0 : carouselLayoutedAttributes.visibleItems, props.items]);
+  useEffect(() => {
+    if (!props.onUpdate || !carouselLayoutedAttributes) {
+      return;
+    }
+    const visibleIndexes = [];
+    for (let i = 0, x = carouselLayoutedAttributes.visibleItems; i < x; i += 1) {
+      const item = props.items[i + activeIndex];
+      if (!item) {
+        break;
+      }
+      visibleIndexes.push(item.index);
+    }
+    props.onUpdate(visibleIndexes);
+  }, [activeIndex, carouselLayoutedAttributes]);
+  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;
+    const item = props.items[index];
+    if (!item) {
+      return;
+    }
+    setActiveIndicator(props.items[index].index);
+  }, [activeIndex, scrollSpyIndex]);
+  return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: {
+    state: {
+      ref,
+      interactive,
+      goPrev,
+      goNext,
+      numberOfIndicators,
+      activeIndicator
+    }
+  }, children });
+};
+const offsetHorizontal = 8;
+const offsetVertical = 8;
+const CarouselStyled = styled.section.withConfig({
+  shouldForwardProp,
+  displayName: "CarouselStyled",
+  componentId: "sc-1q79oa8-0"
+})(({
+  needsNavigation
+}) => needsNavigation ? {
+  paddingBottom: "44px"
+} : {}, getBottomSpacing, ({
+  layout
+}) => layout && translateLayoutPropsToCss(layout));
+const CarouselViewportStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "CarouselViewportStyled",
+  componentId: "sc-1q79oa8-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,
+  displayName: "CarouselTrackStyled",
+  componentId: "sc-1q79oa8-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,
+  displayName: "CarouselItemStyled",
+  componentId: "sc-1q79oa8-3"
+})({});
+const CarouselTrackEndStyled = styled(GridItemStyled).withConfig({
+  shouldForwardProp,
+  displayName: "CarouselTrackEndStyled",
+  componentId: "sc-1q79oa8-4"
+})({
+  flexBasis: `${getSpacing(spacingMd)}px`
+});
+const CarouselSnapperStyled = styled.div.withConfig({
+  displayName: "CarouselSnapperStyled",
+  componentId: "sc-1q79oa8-5"
+})({
+  scrollSnapAlign: "start",
+  height: "100%",
+  "> *": {
+    height: "100%"
+  }
+});
+const CarouselControlStyled = styled.aside.withConfig({
+  shouldForwardProp,
+  displayName: "CarouselControlStyled",
+  componentId: "sc-1q79oa8-6"
+})({
+  position: "relative"
+});
+const CarouselNavigationPrevButtonStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "CarouselNavigationPrevButtonStyled",
+  componentId: "sc-1q79oa8-7"
+})({
+  position: "absolute",
+  top: "0px",
+  left: "0px"
+});
+const CarouselNavigationNextButtonStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "CarouselNavigationNextButtonStyled",
+  componentId: "sc-1q79oa8-8"
+})({
+  position: "absolute",
+  top: "0px",
+  right: "0px"
+});
+const CarouselIndicatorsStyled = styled.ol.withConfig({
+  shouldForwardProp,
+  displayName: "CarouselIndicatorsStyled",
+  componentId: "sc-1q79oa8-9"
+})({
+  position: "absolute",
+  right: "0",
+  left: "0",
+  textAlign: "center",
+  height: "24px",
+  paddingTop: "10px",
+  display: "inline-block"
+});
+const CarouselIndicatorItemStyled = styled.li.withConfig({
+  shouldForwardProp,
+  displayName: "CarouselIndicatorItemStyled",
+  componentId: "sc-1q79oa8-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,
+  displayName: "CarouselIndicatorStyled",
+  componentId: "sc-1q79oa8-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",
+    ...forcedColors({
+      backgroundColor: isActive ? "CanvasText" : "Canvas",
+      border: `${getBorderWidth(borderWidthSm)} solid CanvasText`
+    })
+  };
+});
+const CarouselIndicator = () => {
+  const {
+    state: {
+      numberOfIndicators,
+      activeIndicator
+    }
+  } = useContext(CarouselContext);
+  if (!numberOfIndicators || 1 >= 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, { screenReaderLabel: prevAriaLabel, icon: "ChevronLeft", appearance: "tertiary", tabIndex: -1, "aria-disabled": "true", "aria-describedby": `${uid}-carousel-instruction`, bottomSpacing: spacingNone, onClick: goPrev }) });
+  };
+  const getNextButton = () => {
+    if (false === goNext) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(CarouselNavigationNextButtonStyled, { children: /* @__PURE__ */ jsx(IconButton, { screenReaderLabel: nextAriaLabel, icon: "ChevronRight", appearance: "tertiary", tabIndex: -1, "aria-disabled": "true", "aria-describedby": `${uid}-carousel-instruction`, bottomSpacing: spacingNone, onClick: goNext }) });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ScreenreaderOnly, { id: `${uid}-carousel-instruction`, children: screenReaderInstruction }),
+    getPrevButton(),
+    getNextButton()
+  ] });
+};
+const CarouselInner = ({
+  gridConfig,
+  items,
+  bottomSpacing = spacingMd,
+  ...props
+}) => {
+  const {
+    state: {
+      ref,
+      interactive,
+      goPrev,
+      goNext
+    }
+  } = useContext(CarouselContext);
+  const needsNavigation = !!goPrev || !!goNext;
+  return /* @__PURE__ */ jsxs(CarouselStyled, { ...props, bottomSpacing, needsNavigation, 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
+}) => {
+  if (0 === items.length) {
+    return null;
+  }
+  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 C,
+  CarouselItem as a
+};

package/dist/index-l-i-mIeP.js

@@ -0,0 +1,10 @@
+import { g as getCssVar } from "./getCssVar-BP6T9pFM.js";
+const capitalize = (str) => {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+const getSpacing = (spacing) => getCssVar(`spacing${capitalize(spacing)}`);
+export {
+  capitalize as c,
+  getSpacing as g
+};