@vodafone_de/brix-components 3.1.7 → 3.1.9

package/dist/components/AccordionGroup/styled.d.ts

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

package/dist/components/Badge/index.d.ts

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

package/dist/components/Badge/index.js

@@ -0,0 +1,11 @@
+"use client";
+import "react/jsx-runtime";
+import "../../index-Cbojl4_Q.js";
+import "../../Spacing-B-7SYaM_.js";
+import "../../SizeTypes-Ck_RdzIf.js";
+import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import { a, B } from "../../index-DE9iZx_0.js";
+export {
+  a as BadgeAppearanceColor,
+  B as default
+};

package/dist/components/Badge/props.d.ts

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

package/dist/components/Badge/styled.d.ts

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

package/dist/components/Body/index.d.ts

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

package/dist/components/Body/index.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { s as spacingSm, a as spacingMd } from "../../Spacing-B-7SYaM_.js";
+import { a as textBodyMd, t as textBodySm } from "../../TextBodySize-ovWXXu9n.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import styled from "styled-components";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const BodyStyled = styled.p.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "BodyStyled",
+  componentId: "sc-1n7n7pv-0"
+})({
+  outline: "none",
+  color: "inherit",
+  verticalAlign: "baseline"
+}, ({
+  size = textBodyMd
+}) => getBodySize(size), ({
+  weight,
+  tag
+}) => {
+  if ("strong" === tag) {
+    return {
+      fontWeight: getFontWeight(fontWeightBold)
+    };
+  }
+  if (!weight) {
+    return {};
+  }
+  return {
+    fontWeight: getFontWeight(weight)
+  };
+}, ({
+  tag
+}) => {
+  if ("sup" === tag) {
+    return {
+      verticalAlign: "super",
+      fontSize: "smaller"
+    };
+  }
+  if ("span" === tag) {
+    return {
+      display: "inline-block"
+    };
+  }
+  return {};
+}, ({
+  align
+}) => ({
+  textAlign: align
+}), getBottomSpacing);
+const bodyAlignLeft = "left";
+const bodyAlignCenter = "center";
+const bodyAlignRight = "right";
+const Body = ({
+  tag = "p",
+  bottomSpacing,
+  ...props
+}) => {
+  if (!bottomSpacing) {
+    bottomSpacing = textBodySm === props.size ? spacingSm : spacingMd;
+  }
+  return /* @__PURE__ */ jsx(BodyStyled, { ...props, bottomSpacing, as: tag, tag, children: renderInlineRichTextFromOpenText(props.children) });
+};
+export {
+  bodyAlignCenter,
+  bodyAlignLeft,
+  bodyAlignRight,
+  Body as default
+};

package/dist/components/Body/props.d.ts

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

package/dist/components/Body/styled.d.ts

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

package/dist/components/BottomBar/index.d.ts

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

package/dist/components/BottomBar/index.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { a as spacingMd, c as spacingNone } from "../../Spacing-B-7SYaM_.js";
+import Container from "../Container/index.js";
+import styled from "styled-components";
+import { a as CardStyled } from "../../styled-D4n7rxyh.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/BottomBar/props.d.ts

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

package/dist/components/BottomBar/styled.d.ts

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

package/dist/components/Button/ButtonAppearanceHelper.d.ts

@@ -0,0 +1,5 @@
+import { CSSObject } from 'styled-components';
+import { ObjectColor } from '../../foundations/token/types/ObjectColor';
+import { ButtonAppearances } from '../../foundations/types/ButtonAppearances';
+export declare const ButtonAppearanceColor: Record<ButtonAppearances, ObjectColor>;
+export declare const getButtonAppearance: (appearance: ButtonAppearances) => CSSObject;

package/dist/components/Button/getButtonIcon.d.ts

@@ -0,0 +1,2 @@
+import { default as PositionedIconInterface } from '../../foundations/types/PositionedIconInterface';
+export declare const getButtonIcon: (icon: PositionedIconInterface | undefined) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ButtonProps } from './props';
+import { ButtonAsLinkProps } from '../ButtonAsLink/props';
+declare const Button: FC<ButtonProps | ButtonAsLinkProps>;
+export default Button;
+export * from './props';

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-RvOG3QbI.js";
+import { B as ButtonAsLink, g as getButtonIcon } from "../../index-DRQqmPiC.js";
+import { B as ButtonStyled } from "../../styled-DBibvE8t.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/Button/props.d.ts

@@ -0,0 +1,40 @@
+import { ButtonHTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { ButtonAppearances } from '../../foundations/types/ButtonAppearances';
+import { default as PositionedIconInterface } from '../../foundations/types/PositionedIconInterface';
+import { Theme } from '../../foundations/types/Theme';
+export declare const buttonFullWidth = "full";
+export declare const buttonAutoWidth = "auto";
+export type ButtonWidthBehavior = typeof buttonFullWidth | typeof buttonAutoWidth;
+export interface ButtonSharedProps {
+    /**
+     * Supports different button appearances
+     */
+    appearance?: ButtonAppearances;
+    /**
+     * Can be used on darker backgrounds by setting to 'dark'
+     */
+    theme?: Theme;
+    /**
+     * Supports different width behaviors
+     */
+    width?: ButtonWidthBehavior;
+    /**
+     * icon object contain name and position, object is optional and name and position is mandatory.
+     */
+    icon?: PositionedIconInterface;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Button' | 'ButtonAsLink';
+}
+export interface ButtonProps extends ButtonSharedProps, PatternProps, ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Button';
+    /**
+     * If `true`, the button is disabled. If set for a ButtonAsLink disabled will be discarded
+     */
+    disabled?: boolean;
+}

package/dist/components/Button/styled.d.ts

@@ -0,0 +1,10 @@
+import { SvgInlineIconFactoryPropsWithPosition } from '../../foundations/types/SystemIconWithPosition';
+import { ButtonProps } from './props';
+/**
+ * Button height was a token with different variants: Small, medium and large
+ * We only need one and to keep it simple, we aligned with DEV & UX to not move it into the new
+ * base & alias tokens for now, but just keep it here
+ */
+export declare const buttonHeight = "44px";
+export declare const ButtonIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('@vfde-react/inline-icon-library').IconLoaderProps, SvgInlineIconFactoryPropsWithPosition>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonProps>> & string;

package/dist/components/ButtonAsLink/index.d.ts

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

package/dist/components/ButtonAsLink/index.js

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

package/dist/components/ButtonAsLink/props.d.ts

@@ -0,0 +1,14 @@
+import { AnchorHTMLAttributes } from 'react';
+import { ButtonSharedProps } from '../Button/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface ButtonAsLinkProps extends ButtonSharedProps, PatternProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'ButtonAsLink';
+    /**
+     * As long as no href is given, this pattern is rendered as a button and
+     * if it is passed, then a link is rendered
+     */
+    href: string;
+}

package/dist/components/ButtonAsLink/styled.d.ts

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

package/dist/components/ButtonGroup/index.d.ts

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

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, b as flexJustifyStart } from "../../styled-BWxYFp57.js";
+import FlexItem from "../FlexItem/index.js";
+import { s as spacingSm, a as spacingMd } from "../../Spacing-B-7SYaM_.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/ButtonGroup/props.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes } from 'react';
+import { ButtonProps } from '../Button/props';
+import { ButtonAsLinkProps } from '../ButtonAsLink/props';
+import { FlexJustifyBehavior, FlexOrientation } from '../Flex/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface ButtonGroupProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'ButtonGroup';
+    /**
+     * if orientation is vertical
+     * passed to flex as justify if viewport is tablet or larger
+     * mobile is always rendered with justify-start
+     */
+    justifyHorizontal?: FlexJustifyBehavior;
+    /**
+     * Accepts Buttons and ButtonsAsLinks as children to render in the group
+     */
+    buttons: (ButtonProps | ButtonAsLinkProps)[];
+    /**
+     * Buttons can be placed next to each other horizontally or stacked vertically. In vertical orientation, buttons always extend to full width.
+     */
+    orientation?: FlexOrientation;
+    /**
+     * The isReversed property changes the order of the buttons. This feature only takes effect on tablet and desktop.
+     * It enables the creation of progress flows where users can navigate forward and backward using the buttons.
+     */
+    isReversed?: boolean;
+}

package/dist/components/Card/index.d.ts

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

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 { a as CardStyled } from "../../styled-D4n7rxyh.js";
+import { C } from "../../styled-D4n7rxyh.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 {
+  C as CardAppearanceColor,
+  Card as default
+};

package/dist/components/Card/props.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+import { articleTagName, asideTagName, divTagName, sectionTagName, spanTagName } from '../../foundations/tags';
+import { BackgroundColor } from '../../foundations/token/types/BackgroundColor';
+import { Theme } from '../../foundations/types/Theme';
+export type CardAppearance = 'primary' | 'secondary';
+export declare const CardAppearanceColor: Record<CardAppearance, BackgroundColor>;
+export type CardTag = typeof divTagName | typeof sectionTagName | typeof articleTagName | typeof asideTagName | typeof spanTagName;
+export interface CardProps extends PatternProps, HTMLAttributes<HTMLElement> {
+    /**
+     * Card item content
+     */
+    children: ReactNode;
+    /**
+     * There are two variants to communicate different emphasis.
+     */
+    appearance?: CardAppearance;
+    /**
+     * Turns card dark when in mobile to emphasize card while scrolling.
+     */
+    isMobileDark?: boolean;
+    theme?: Theme;
+    /**
+     * use a different html tag to render card
+     * ```div``` is default
+     */
+    tag?: CardTag;
+}

package/dist/components/Card/styled.d.ts

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

package/dist/components/Carousel/components/CarouselContext.d.ts

@@ -0,0 +1,20 @@
+import { FC, MutableRefObject } from 'react';
+import { CarouselRuntimeProps } from '../props';
+/**
+ * Can either be false to indicate that no button should be rendered
+ * or take the actual function to move
+ */
+export type CarouselButton = (() => void) | false;
+export type CarouselState = {
+    ref: MutableRefObject<HTMLDivElement> | undefined;
+    visibleItems: number;
+    interactive: number[];
+    goPrev: CarouselButton;
+    goNext: CarouselButton;
+    numberOfIndicators: number;
+    activeIndicator: number;
+};
+export declare const CarouselContext: import('react').Context<{
+    state: CarouselState;
+}>;
+export declare const CarouselProvider: FC<CarouselRuntimeProps>;

package/dist/components/Carousel/components/CarouselIndicator.d.ts

@@ -0,0 +1,2 @@
+declare const CarouselIndicator: () => import("react/jsx-runtime").JSX.Element | null;
+export default CarouselIndicator;

package/dist/components/Carousel/components/CarouselInner.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CarouselRuntimeProps } from '../props';
+declare const CarouselInner: FC<CarouselRuntimeProps>;
+export default CarouselInner;

package/dist/components/Carousel/components/CarouselItem.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { CarouselItemRuntimeProps } from '../props';
+export declare const CarouselItem: FC<Omit<CarouselItemRuntimeProps, 'ghost' | 'index'>>;

package/dist/components/Carousel/components/CarouselNavigation.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { CarouselProps } from '../props';
+type CarouselNavigationProps = Pick<CarouselProps, 'uid' | 'screenReaderInstruction' | 'prevAriaLabel' | 'nextAriaLabel'>;
+declare const CarouselNavigation: FC<CarouselNavigationProps>;
+export default CarouselNavigation;
+export * from '../props';
+export * from '../styled';

package/dist/components/Carousel/index.d.ts

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