@vodafone_de/brix-components 3.1.7 → 3.1.8

package/components/Carousel/index.js

@@ -0,0 +1,496 @@
+"use client";
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+require("@af-utils/scrollend-polyfill");
+const react = require("react");
+const hooks_useFocusWithin = require("../../hooks/useFocusWithin/index.js");
+const tags = require("../../tags-CTaUxoCi.cjs");
+const Spacing = require("../../Spacing-Cu_j2b83.cjs");
+const styled = require("styled-components");
+const styled$1 = require("../../styled-D36Jj6J7.cjs");
+const styled$2 = require("../../styled-C83gSQcc.cjs");
+const styled$3 = require("../../styled-B_Yb1i3j.cjs");
+const foundations_mediaQuery_viewport = require("../../index-DuE6C2cO.cjs");
+const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
+const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
+const foundations_token_getObjectColor = require("../../foundations/token/getObjectColor/index.js");
+const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
+const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
+const ObjectColor = require("../../ObjectColor-BrtIOUrJ.cjs");
+const filterProps = require("../../filterProps-D3K8rtOg.cjs");
+const components_IconButton = require("../IconButton/index.js");
+const components_ScreenreaderOnly = require("../../index-DVXE2AnG.cjs");
+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 = react.createContext({
+  state: initialState
+});
+const CarouselProvider = ({
+  children,
+  loop,
+  ...props
+}) => {
+  const ref = react.useRef(null);
+  const focus = hooks_useFocusWithin.useFocusWithin(ref);
+  const [activeIndex, setActiveIndex] = react.useState(props.activeIndex);
+  const [scrollSpyIndex, setScrollSpyIndex] = react.useState(void 0);
+  const [interactive, setInteractive] = react.useState([]);
+  const [needsFirstPosition, setNeedsFirstPosition] = react.useState(activeIndex !== 0);
+  const [itemWidth, setItemWidth] = react.useState(0);
+  const [visibleItems, setVisibleItems] = react.useState(1);
+  const [goPrev, setGoPrev] = react.useState(false);
+  const [goNext, setGoNext] = react.useState(false);
+  const [numberOfIndicators, setNumberOfIndicators] = react.useState(0);
+  const [activeIndicator, setActiveIndicator] = react.useState(props.items[props.activeIndex].index);
+  react.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]);
+  react.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]);
+  react.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]);
+  react.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]);
+  react.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]);
+  react.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]);
+  react.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);
+  };
+  react.useEffect(() => {
+    if (loop) {
+      setGoPrev(() => movePrev);
+      setGoNext(() => moveNext);
+    } else {
+      setGoPrev(activeIndex === 0 ? false : () => movePrev);
+      setGoNext(activeIndex + 1 >= numberOfIndicators ? false : () => moveNext);
+    }
+  }, [loop, activeIndex, numberOfIndicators]);
+  react.useEffect(() => {
+    const index = scrollSpyIndex || activeIndex;
+    setActiveIndicator(props.items[index].index);
+  }, [activeIndex, scrollSpyIndex]);
+  return /* @__PURE__ */ jsxRuntime.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.filterProps(),
+  displayName: "CarouselStyled",
+  componentId: "sc-14nqzsr-0"
+})({
+  paddingBottom: "44px"
+}, foundations_token_getBottomSpacing.getBottomSpacing);
+const CarouselViewportStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps.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(${styled$1.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(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} - 6px)`,
+    ...foundations_mediaQuery_viewport.viewport.md({
+      scrollPaddingLeft: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} - 12px)`
+    })
+  };
+  return nestedStyles;
+});
+const CarouselTrackStyled = styled(styled$2.GridStyled).withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "CarouselTrackStyled",
+  componentId: "sc-14nqzsr-2"
+})({
+  flexWrap: "nowrap",
+  paddingBottom: foundations_token_getSpacing.getSpacing(Spacing.spacingMd)
+}, () => {
+  const nestedStyles = {};
+  const cardSelector = `&:has(${styled$1.CardStyled.toString()})`;
+  nestedStyles[cardSelector] = {
+    paddingBottom: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} - ${offsetVertical}px)`
+  };
+  return nestedStyles;
+});
+const CarouselItemStyled = styled(styled$3.GridItemStyled).withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "CarouselItemStyled",
+  componentId: "sc-14nqzsr-3"
+})({});
+const CarouselTrackEndStyled = styled(styled$3.GridItemStyled).withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "CarouselTrackEndStyled",
+  componentId: "sc-14nqzsr-4"
+})({
+  flexBasis: `${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)}px`
+});
+const CarouselSnapperStyled = styled.div.withConfig({
+  displayName: "CarouselSnapperStyled",
+  componentId: "sc-14nqzsr-5"
+})({
+  scrollSnapAlign: "start",
+  height: "100%"
+});
+const CarouselControlStyled = styled.aside.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "CarouselControlStyled",
+  componentId: "sc-14nqzsr-6"
+})({
+  position: "relative"
+});
+const CarouselNavigationPrevButtonStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "CarouselNavigationPrevButtonStyled",
+  componentId: "sc-14nqzsr-7"
+})({
+  position: "absolute",
+  top: "0px",
+  left: "0px"
+});
+const CarouselNavigationNextButtonStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps.filterProps(),
+  displayName: "CarouselNavigationNextButtonStyled",
+  componentId: "sc-14nqzsr-8"
+})({
+  position: "absolute",
+  top: "0px",
+  right: "0px"
+});
+const CarouselIndicatorsStyled = styled.ol.withConfig({
+  shouldForwardProp: filterProps.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.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.filterProps(),
+  displayName: "CarouselIndicatorStyled",
+  componentId: "sc-14nqzsr-11"
+})({
+  display: "inline-block",
+  borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusFull),
+  transition: "background-color 0.6s ease , width 0.6s ease,height 0.6s ease"
+}, ({
+  isActive = false
+}) => {
+  return {
+    backgroundColor: isActive ? foundations_token_getObjectColor.getObjectColor(ObjectColor.colorObjectBrand) : foundations_token_getObjectColor.getObjectColor(ObjectColor.colorObjectUnselected),
+    width: isActive ? "16px" : "10px",
+    height: isActive ? "16px" : "10px"
+  };
+});
+const CarouselIndicator = () => {
+  const {
+    state: {
+      numberOfIndicators,
+      activeIndicator
+    }
+  } = react.useContext(CarouselContext);
+  if (!numberOfIndicators) {
+    return null;
+  }
+  const indicators = [...Array(numberOfIndicators).keys()];
+  return /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicatorsStyled, { children: indicators.map((indicator) => /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicatorItemStyled, { isActive: indicator === activeIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicatorStyled, { isActive: indicator === activeIndicator }) }, indicator)) });
+};
+const CarouselItem = ({
+  uid,
+  gridConfig,
+  interactive = true,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ react.createElement(CarouselItemStyled, { ...props, component: "GridItem", key: uid, uid, ...gridConfig, as: tags.liTagName, ...{
+    inert: !interactive ? true : void 0
+  } }, children);
+};
+const CarouselNavigation = ({
+  uid,
+  screenReaderInstruction,
+  prevAriaLabel,
+  nextAriaLabel
+}) => {
+  const {
+    state: {
+      goPrev,
+      goNext
+    }
+  } = react.useContext(CarouselContext);
+  const getPrevButton = () => {
+    if (false === goPrev) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(CarouselNavigationPrevButtonStyled, { children: /* @__PURE__ */ jsxRuntime.jsx(components_IconButton.default, { 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__ */ jsxRuntime.jsx(CarouselNavigationNextButtonStyled, { children: /* @__PURE__ */ jsxRuntime.jsx(components_IconButton.default, { label: nextAriaLabel, iconName: "ChevronRight", appearance: "tertiary", tabIndex: -1, "aria-disabled": "true", "aria-describedby": `${uid}-carousel-instruction`, onClick: goNext }) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components_ScreenreaderOnly.ScreenreaderOnly, { id: `${uid}-carousel-instruction`, children: screenReaderInstruction }),
+    getPrevButton(),
+    getNextButton()
+  ] });
+};
+const CarouselInner = ({
+  gridConfig,
+  items,
+  ...props
+}) => {
+  const {
+    state: {
+      ref,
+      interactive
+    }
+  } = react.useContext(CarouselContext);
+  return /* @__PURE__ */ jsxRuntime.jsxs(CarouselStyled, { ...props, bottomSpacing: Spacing.spacingMd, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CarouselViewportStyled, { ref, children: /* @__PURE__ */ jsxRuntime.jsxs(CarouselTrackStyled, { as: tags.ulTagName, stretch: true, children: [
+      items.map(({
+        uid,
+        ...item
+      }, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { uid, gridConfig, interactive: interactive.includes(index), "data-carousel-item": item.index, "data-carousel-ghost": true === item.ghost, children: /* @__PURE__ */ jsxRuntime.jsx(CarouselSnapperStyled, { children: item.children }) }, uid)),
+      /* @__PURE__ */ jsxRuntime.jsx(CarouselTrackEndStyled, { ...gridConfig, as: tags.liTagName })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(CarouselControlStyled, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicator, {}),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CarouselProvider, { ...props, loop, gridConfig, items: loopableItems, activeIndex, children: /* @__PURE__ */ jsxRuntime.jsx(CarouselInner, { ...props, loop, gridConfig, items: loopableItems, activeIndex }) });
+};
+module.exports = Carousel;

package/components/Carousel/props.d.ts

@@ -0,0 +1,88 @@
+import { HTMLAttributes } from 'react';
+import { GridConfig } from '../Grid/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface CarouselItemProps extends PatternProps, HTMLAttributes<HTMLLIElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'CarouselItem';
+    /**
+     * unique id
+     */
+    uid: string;
+}
+export interface CarouselItemRuntimeProps extends CarouselItemProps {
+    /**
+     * indicate if en item should be interactive or inhert
+     */
+    interactive: boolean;
+    /**
+     * gridConfig passed by Carousel
+     */
+    gridConfig?: GridConfig;
+    /**
+     * When looping the copies of original items are used fake infinite scrolling
+     * these copies are marked by ghost=true
+     */
+    ghost: boolean;
+    /**
+     * store index of original item when looping
+     */
+    index: number;
+}
+export interface CarouselProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Carousel';
+    /**
+     * unique id
+     */
+    uid: string;
+    /**
+     * Items to be displayed in the carousel.
+     * Make sure you include more items here than would fit into the viewport as defined in gridConfig.
+     */
+    items: CarouselItemProps[];
+    /**
+     * Add a configuration for the layout in which the carousel elements are to be displayed.
+     * Default is -> { sm: 12, md: 6, lg: 4 }
+     */
+    gridConfig?: GridConfig;
+    /**
+     * which item should be the first visible item
+     * default is the very first item from items
+     */
+    activeIndex?: number;
+    /**
+     * If the carousel loop is infinite
+     * default is false
+     */
+    loop?: boolean;
+    /**
+     * Instruction that is read to screenreader users
+     */
+    screenReaderInstruction: string;
+    /**
+     * AriaLabel for the prev button
+     */
+    prevAriaLabel: string;
+    /**
+     * AriaLabel for the next button
+     */
+    nextAriaLabel: string;
+    /**
+     * Subscribe to changes and be notified with the indexes of currently visible items
+     */
+    onUpdate?: (visibleElements: number[]) => void;
+}
+/**
+ * Split runtime props and 'static' to make transparent what is maintainable from cms
+ * just make some optional mandatory and use CarouselItemRuntimeProps instead of CarouselItemProps
+ */
+export interface CarouselRuntimeProps extends Omit<CarouselProps, 'items'> {
+    activeIndex: number;
+    loop: boolean;
+    items: CarouselItemRuntimeProps[];
+    gridConfig: GridConfig;
+}

package/components/Carousel/stories/productCards.d.ts

@@ -0,0 +1,6 @@
+export declare const iPhone16Carousel: import("react/jsx-runtime").JSX.Element;
+export declare const iPhone16ProCarousel: import("react/jsx-runtime").JSX.Element;
+export declare const iPhone16ProMaxCarousel: import("react/jsx-runtime").JSX.Element;
+export declare const iPhone16PlusCarousel: import("react/jsx-runtime").JSX.Element;
+export declare const iPhone15Carousel: import("react/jsx-runtime").JSX.Element;
+export declare const onyxCarousel: import("react/jsx-runtime").JSX.Element;

package/components/Carousel/styled.d.ts

@@ -0,0 +1,19 @@
+import { GridProps } from '../Grid/props';
+import { GridItemProps } from '../GridItem/props';
+import { CarouselProps } from './props';
+export declare const CarouselStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, Omit<CarouselProps, "items">>> & string;
+export declare const CarouselViewportStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CarouselTrackStyled: 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 GridProps> & GridProps, GridProps>> & string;
+export declare const CarouselItemStyled: 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 GridItemProps> & GridItemProps, GridItemProps>> & string;
+export declare const CarouselTrackEndStyled: 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 GridItemProps> & GridItemProps, GridItemProps>> & string;
+export declare const CarouselSnapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CarouselControlStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+export declare const CarouselNavigationPrevButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CarouselNavigationNextButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CarouselIndicatorsStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
+export declare const CarouselIndicatorItemStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+    isActive: boolean;
+}>> & string;
+export declare const CarouselIndicatorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isActive: boolean;
+}>> & string;

package/components/Carousel/utils/carouselDefaultGridConfig.d.ts

@@ -0,0 +1,2 @@
+import { GridConfig } from '../../Grid/props';
+export declare const carouselDefaultGridConfig: GridConfig;

package/components/Carousel/utils/getItemByScroll.d.ts

@@ -0,0 +1,2 @@
+import { CarouselItemRuntimeProps } from '../props';
+export declare const getItemByScroll: (scroll: number, itemWidth: number, items: CarouselItemRuntimeProps[]) => number;

package/components/Carousel/utils/getItems.d.ts

@@ -0,0 +1,2 @@
+import { CarouselItemProps, CarouselItemRuntimeProps } from '../props';
+export declare const getItems: (items: CarouselItemProps[], loop: boolean) => CarouselItemRuntimeProps[];

package/components/Carousel/utils/scrollTo.d.ts

@@ -0,0 +1 @@
+export declare const scrollTo: (element: HTMLElement, left: number, behavior?: ScrollBehavior) => void;

package/components/Carousel/utils/useScrollSpy.d.ts

@@ -0,0 +1,2 @@
+import { CarouselState } from '../components/CarouselContext';
+export declare const useScrollSpy: (carouselState: CarouselState) => number;

package/components/Checkbox/assets/CheckedBox.d.ts

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

package/components/Checkbox/assets/UncheckedBox.d.ts

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

package/components/Checkbox/index.d.ts

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