@vodafone_de/brix-components 3.1.7 → 3.1.9

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

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

package/dist/components/Container/index.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { j as colorBorderSubtle } from "../../BorderColor-BummoQ1-.js";
+import { e as borderWidthDivider } from "../../BorderWidth-eg_mz82k.js";
+import { e as spacingXl, a as spacingMd } from "../../Spacing-B-7SYaM_.js";
+import { a as colorTextNeutral } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { e as colorBackgroundBrand, d as colorBackgroundBrandGradient, f as colorBackgroundSubtle, c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+const ContainerAppearanceColor = {
+  primary: colorBackgroundNeutral,
+  secondary: colorBackgroundSubtle,
+  tertiary: colorBackgroundBrandGradient,
+  alternative: colorBackgroundBrand
+};
+const ContainerBackgroundStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ContainerBackgroundStyled",
+  componentId: "sc-a9r652-0"
+})({
+  color: getTextColor(colorTextNeutral)
+}, ({
+  padding = spacingXl
+}) => ({
+  paddingTop: getSpacing(padding),
+  paddingBottom: getSpacing(padding)
+}), ({
+  appearance = "primary"
+}) => {
+  return {
+    background: getBackgroundColor(ContainerAppearanceColor[appearance])
+  };
+}, ({
+  border = false
+}) => {
+  if (!border) {
+    return {};
+  }
+  return {
+    borderBottom: `${getBorderWidth(borderWidthDivider)} solid ${getBorderColor(colorBorderSubtle)}`
+  };
+});
+const maxWidthBreakpoint = "1280px";
+const maxWidthViewport = (stylesInViewport) => {
+  return {
+    [`@media screen and (min-width: ${maxWidthBreakpoint})`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const ContainerCenterStyled = styled.div.withConfig({
+  displayName: "ContainerCenterStyled",
+  componentId: "sc-a9r652-1"
+})({
+  marginLeft: getSpacing(spacingMd),
+  marginRight: getSpacing(spacingMd)
+}, maxWidthViewport({
+  maxWidth: `1240px`,
+  marginLeft: "auto",
+  marginRight: "auto"
+}));
+const Container = ({
+  className,
+  children,
+  appearance = "primary",
+  ...props
+}) => /* @__PURE__ */ jsx(ContainerBackgroundStyled, { className: `${className ? className : ""} ${["tertiary", "alternative"].indexOf(appearance) > -1 ? "Dark" : props.theme}`, appearance, ...props, children: /* @__PURE__ */ jsx(ContainerCenterStyled, { children }) });
+export {
+  ContainerAppearanceColor,
+  Container as default
+};

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

@@ -0,0 +1,27 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BackgroundColor } from '../../foundations/token/types/BackgroundColor';
+import { spacing5Xl, spacingNone, spacingXl } from '../../foundations/token/types/Spacing';
+import { Theme } from '../../foundations/types/Theme';
+export type Padding = typeof spacingNone | typeof spacingXl | typeof spacing5Xl;
+export type ContainerAppearance = 'primary' | 'secondary' | 'tertiary' | 'alternative';
+export declare const ContainerAppearanceColor: Record<ContainerAppearance, BackgroundColor>;
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Container';
+    /**
+     * Containers have an optional bottom border that can be enabled to visually separate sections.
+     */
+    border?: boolean;
+    /**
+     * Container supports four distinct appearances to customise the background colour.
+     */
+    appearance?: ContainerAppearance;
+    /**
+     * There are three padding options for equal top and bottom spacing, allowing control over the vertical space within the container.
+     */
+    padding?: Padding;
+    theme?: Theme;
+}

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

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

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

@@ -0,0 +1,4 @@
+import { DateInputProps } from './props';
+declare const DateInput: import('react').ForwardRefExoticComponent<DateInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default DateInput;
+export * from './props';

package/dist/components/DateInput/index.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { aW as CalendarMonthIcon, iv as iconSizeSm } from "../../index-Cbojl4_Q.js";
+import { forwardRef, useRef, useImperativeHandle } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
+import { a as inputStateError } from "../../props-DDpgcryb.js";
+import { a as InputStyled, I as InputWrapperStyled } from "../../styled-G3ZpnzDF.js";
+import { a as spacingMd, b as spacingXs } from "../../Spacing-B-7SYaM_.js";
+import styled from "styled-components";
+const CalendarMonthIconStyled = styled(CalendarMonthIcon).withConfig({
+  displayName: "CalendarMonthIconStyled",
+  componentId: "sc-12ai2q6-0"
+})(() => {
+  return {
+    "@-moz-document url-prefix()": {
+      "&": {
+        display: "none",
+        opacity: 0
+      }
+    }
+  };
+});
+const DateInputStyled = styled(InputStyled).withConfig({
+  displayName: "DateInputStyled",
+  componentId: "sc-12ai2q6-1"
+})({
+  "&::-webkit-calendar-picker-indicator": {
+    opacity: 0,
+    display: "none"
+  }
+});
+const DateInput = forwardRef(({
+  uid,
+  status,
+  errorMessage,
+  helperText,
+  label,
+  onUpdate,
+  bottomSpacing = spacingMd,
+  ...props
+}, outerRef) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(outerRef, () => innerRef.current, []);
+  const messageId = `text-${uid}`;
+  const inputProps = {
+    ...props,
+    id: uid,
+    "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : void 0,
+    "aria-invalid": inputStateError === status ? true : void 0
+  };
+  const handleCalendarClick = () => {
+    if (null === innerRef || null === innerRef.current) {
+      return;
+    }
+    innerRef.current.showPicker();
+    setTimeout(() => {
+      if (null === innerRef || null === innerRef.current) {
+        return;
+      }
+      innerRef.current.focus();
+    }, 1);
+  };
+  return /* @__PURE__ */ jsxs(FormElement, { className: props.className, bottomSpacing, disabled: props.disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(InputWrapperStyled, { status, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(DateInputStyled, { ...inputProps, ref: innerRef, type: "date", onBlur: (event) => {
+        if (props.onBlur) {
+          props.onBlur(event);
+        }
+        if (!onUpdate) {
+          return;
+        }
+        onUpdate(event.target.value);
+      } }),
+      /* @__PURE__ */ jsx(FormHelperStatusIcon, { status }),
+      /* @__PURE__ */ jsx(CalendarMonthIconStyled, { size: iconSizeSm, onClick: handleCalendarClick })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
+  ] });
+});
+export {
+  DateInput as default
+};

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

@@ -0,0 +1,13 @@
+import { InputHTMLAttributes } from 'react';
+import { InputSharedProps } from '../Input/props';
+export interface DateInputProps extends InputSharedProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * function that is called on every update. While input[type=date] is special,
+     * this os fired on blur
+     */
+    onUpdate?: (a: string) => void;
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'DateInput';
+}

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

@@ -0,0 +1,4 @@
+import { InlineIconProps } from '@vfde-react/inline-icon-library';
+import { InputHTMLAttributes } from 'react';
+export declare const CalendarMonthIconStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<InlineIconProps, InlineIconProps>> & string & Omit<import('react').FC<InlineIconProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DateInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, InputHTMLAttributes<HTMLInputElement>>> & string;

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

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

package/dist/components/DemoBox/index.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import IconSnippet from "../IconSnippet/index.js";
+import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { g as getUid } from "../../index-DPQJSCi7.js";
+import { D as DemoBoxStyled } from "../../styled-Bq7qee_E.js";
+const heading = {
+  component: "Heading",
+  children: "Child component",
+  size: textHeadingXs,
+  uid: getUid()
+};
+const richText = {
+  component: "RichText",
+  html: "<p>This is a placeholder.</p>",
+  uid: getUid()
+};
+const DemoBox = (props) => /* @__PURE__ */ jsx(DemoBoxStyled, { ...props, children: /* @__PURE__ */ jsx(IconSnippet, { size: "small", icon: "Sync", bottomSpacing: "None", contents: [heading, richText] }) });
+export {
+  DemoBox as default
+};

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface DemoBoxProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    component?: 'DemoBox';
+}

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

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

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

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

package/dist/components/Dialog/index.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { a as textHeadingMd } from "../../HeadingSize-CfCRn3Lh.js";
+import { a as spacingMd, c as spacingNone } from "../../Spacing-B-7SYaM_.js";
+import Heading from "../Heading/index.js";
+import styled from "styled-components";
+import ButtonGroup from "../ButtonGroup/index.js";
+import Card from "../Card/index.js";
+import IconButton from "../IconButton/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { b as colorBackgroundOverlayStatic } from "../../BackgroundColor-JObp_2xA.js";
+import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import Flex from "../Flex/index.js";
+const DialogOverlayStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DialogOverlayStyled",
+  componentId: "sc-z6nqyy-0"
+})({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  padding: `0 ${getSpacing(spacingMd)}`,
+  flexDirection: "column",
+  justifyContent: "center",
+  background: getBackgroundColor(colorBackgroundOverlayStatic),
+  height: "100%",
+  width: "100%",
+  zIndex: "22"
+}, ({
+  open
+}) => ({
+  display: open ? "flex" : "none"
+}));
+const DialogCardStyled = styled(Card).withConfig({
+  displayName: "DialogCardStyled",
+  componentId: "sc-z6nqyy-1"
+})({
+  height: "auto",
+  maxHeight: `calc(100% - 2*${getSpacing(spacingMd)})`,
+  maxWidth: "1240px",
+  alignSelf: "center",
+  padding: `${getSpacing(spacingMd)} calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const DialogIconButtonStyled = styled(IconButton).withConfig({
+  displayName: "DialogIconButtonStyled",
+  componentId: "sc-z6nqyy-2"
+})({
+  flex: "0 0 auto"
+});
+const DialogButtonGroupStyled = styled(ButtonGroup).withConfig({
+  displayName: "DialogButtonGroupStyled",
+  componentId: "sc-z6nqyy-3"
+})({
+  justifyContent: "flex-end",
+  padding: `0 ${getBorderWidth(borderWidthFocus)}`
+});
+const DialogChildrenContainerStyled = styled("div").withConfig({
+  displayName: "DialogChildrenContainerStyled",
+  componentId: "sc-z6nqyy-4"
+})({
+  padding: `${getBorderWidth(borderWidthFocus)} ${getBorderWidth(borderWidthFocus)} 0`,
+  marginBottom: getSpacing(spacingMd),
+  overflowY: "auto"
+});
+const DialogHeadingContainerStyled = styled(Flex).withConfig({
+  displayName: "DialogHeadingContainerStyled",
+  componentId: "sc-z6nqyy-5"
+})({
+  padding: `0 ${getBorderWidth(borderWidthFocus)}`,
+  marginBottom: `calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const Dialog = ({
+  heading,
+  children,
+  uid,
+  focusElementOnOpen,
+  focusElementOnClose,
+  buttons,
+  dismissable = true,
+  // This default is set as the 'wrapper' element is currently containing the majority of the content of pages from our CMS.
+  contentElements = ".wrapper",
+  ...props
+}) => {
+  const [open, setOpen] = useState(props.open === true);
+  const invokingElement = useRef(null);
+  const headingId = `${uid}-dialog-heading`;
+  const headingProps = {
+    ...heading,
+    size: textHeadingMd,
+    weight: fontWeightBold,
+    uid: headingId,
+    bottomSpacing: spacingNone
+  };
+  const closeWithEscape = (event) => {
+    if (event.key !== "Escape") return;
+    closeDialog();
+  };
+  const updateAttributes = (element, open2) => {
+    if (open2) {
+      element.setAttribute("aria-hidden", "true");
+    } else {
+      element.removeAttribute("aria-hidden");
+    }
+    element.toggleAttribute("inert", open2);
+  };
+  const updateElements = (open2) => {
+    const content = document.querySelectorAll(contentElements);
+    for (const element of content) {
+      updateAttributes(element, open2);
+    }
+    document.body.classList.toggle("HideOverflowY", open2);
+  };
+  const openDialog = (event) => {
+    if (invokingElement) invokingElement.current = event.target;
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    var _a;
+    (_a = props.onToggle) == null ? void 0 : _a.call(props, false);
+    setOpen(false);
+  };
+  useEffect(() => {
+    setOpen(true === props.open);
+  }, [props.open]);
+  useEffect(() => {
+    const openingElements = document.querySelectorAll(`[data-action='dialog-${uid}']`);
+    for (const openingElement of openingElements) {
+      openingElement.addEventListener("click", openDialog);
+    }
+    return () => {
+      for (const openingElement of openingElements) {
+        openingElement.removeEventListener("click", openDialog);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (open) {
+      updateElements(true);
+      focusElementOnOpen && ((_a = document.getElementById(focusElementOnOpen)) == null ? void 0 : _a.focus());
+      dismissable && document.addEventListener("keydown", closeWithEscape);
+    }
+    return () => {
+      var _a2, _b;
+      updateElements(false);
+      focusElementOnClose ? (_a2 = document.getElementById(focusElementOnClose)) == null ? void 0 : _a2.focus() : (_b = invokingElement.current) == null ? void 0 : _b.focus();
+      dismissable && document.removeEventListener("keydown", closeWithEscape);
+    };
+  }, [open]);
+  const onCloseIconButtonClick = (event) => {
+    event.preventDefault();
+    closeDialog();
+  };
+  const dialog = /* @__PURE__ */ jsx(DialogOverlayStyled, { open, id: `dialog-${uid}`, className: props.className, children: /* @__PURE__ */ jsxs(DialogCardStyled, { role: "dialog", "aria-modal": "true", "aria-describedby": headingId, children: [
+    /* @__PURE__ */ jsxs(DialogHeadingContainerStyled, { justify: "between", bottomSpacing: spacingNone, children: [
+      /* @__PURE__ */ jsx(Heading, { ...headingProps }),
+      dismissable && /* @__PURE__ */ jsx(DialogIconButtonStyled, { label: "Schließen", iconName: "Close", appearance: "tertiary", bottomSpacing: spacingNone, onClick: onCloseIconButtonClick })
+    ] }),
+    /* @__PURE__ */ jsx(DialogChildrenContainerStyled, { children }),
+    /* @__PURE__ */ jsx(DialogButtonGroupStyled, { ...buttons, orientation: "horizontal", justifyHorizontal: "end", isReversed: true })
+  ] }) });
+  return open ? createPortal(dialog, document.body) : null;
+};
+export {
+  Dialog as default
+};

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

@@ -0,0 +1,47 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonGroupProps } from '../ButtonGroup/props';
+import { HeadingProps } from '../Heading/props';
+import { PatternProps } from '../../foundations/PatternProps';
+export interface DialogProps extends PatternProps, Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'Dialog';
+    /**
+     * Dialog item content
+     */
+    children: ReactNode;
+    /**
+     * Heading
+     */
+    heading: Omit<HeadingProps, 'size' | 'bottomSpacing' | 'weight' | 'align'>;
+    /**
+     * Element to be focused when Dialog is open
+     */
+    focusElementOnOpen?: string;
+    /**
+     * Element to be focused when Dialog is closed
+     */
+    focusElementOnClose?: string;
+    /**
+     * is Dialog Open
+     */
+    open?: boolean;
+    /**
+     * Dismissable
+     */
+    dismissable?: boolean;
+    /**
+     * Button in the Dialog
+     */
+    buttons: Omit<ButtonGroupProps, 'orientation'>;
+    /**
+     * Code to be executed when the Tray is opened/closed
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * Defines a query to get the element(s) that hold the content of the page. It is used to set the content to aria-hidden and inert while
+     * they are hidden beneath the overlay of the Tray.
+     */
+    contentElements?: string;
+}

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

@@ -0,0 +1,9 @@
+import { DialogProps } from './props';
+export declare const DialogOverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<DialogProps, "buttons" | "heading"> & {
+    open: boolean;
+}>> & string;
+export declare const DialogCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Card').CardProps, never>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DialogIconButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../IconButton').IconButtonProps, never>> & string & Omit<import('react').FC<import('../IconButton').IconButtonProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DialogButtonGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../ButtonGroup').ButtonGroupProps, never>> & string & Omit<import('react').FC<import('../ButtonGroup').ButtonGroupProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DialogChildrenContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never>> & string;
+export declare const DialogHeadingContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Flex').FlexProps, never>> & string & Omit<import('react').FC<import('../Flex').FlexProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/DiscoveryCard/components/DiscoveryCardLinkedImage.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { DiscoveryCardProps } from '../props';
+declare const DiscoveryCardLinkedImage: FC<Pick<DiscoveryCardProps, 'uid' | 'image' | 'link' | 'orientation' | 'bottomSpacing'>>;
+export default DiscoveryCardLinkedImage;

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

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

package/dist/components/DiscoveryCard/index.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { R as RichText } from "../../index-DPQJSCi7.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
+import { a as spacingMd, c as spacingNone, b as spacingXs, s as spacingSm } from "../../Spacing-B-7SYaM_.js";
+import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
+import { b as BadgeStyled, B as Badge } from "../../index-DE9iZx_0.js";
+import Body, { bodyAlignLeft, bodyAlignCenter } from "../Body/index.js";
+import Heading from "../Heading/index.js";
+import Link from "../Link/index.js";
+import { P as Price, b as priceSizeSm, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-DH6pW0wc.js";
+import Image, { aspectRatio16_9, aspectRatio1_1 } from "../Image/index.js";
+import { a as cornerRounded } from "../../CornerStyle-JEbGNArR.js";
+import styled from "styled-components";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import Card from "../Card/index.js";
+import { a as LinkStyled } from "../../index-DauKVKW_.js";
+const discoveryCardOrientationVertical = "vertical";
+const discoveryCardOrientationHorizontal = "horizontal";
+const DiscoveryCardStyled = styled(Card).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DiscoveryCardStyled",
+  componentId: "sc-6ng9yt-0"
+})(({
+  orientation
+}) => {
+  const isVertical = orientation === discoveryCardOrientationVertical;
+  return {
+    ...isVertical ? {
+      [`& ${BadgeStyled}`]: {
+        marginLeft: "auto",
+        marginRight: "auto"
+      },
+      [`& ${LinkStyled}`]: {
+        marginLeft: "auto",
+        marginRight: "auto"
+      }
+    } : {
+      display: "flex",
+      flexDirection: "row-reverse",
+      gap: getSpacing(spacingMd),
+      alignItems: "center",
+      textAlign: "center"
+    }
+  };
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const DiscoveryCardContentyled = styled.div.withConfig({
+  displayName: "DiscoveryCardContentyled",
+  componentId: "sc-6ng9yt-1"
+})({
+  flex: 1,
+  display: "flex",
+  flexDirection: "column"
+});
+const DiscoveryCardImageLinkStyled = styled.a.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "DiscoveryCardImageLinkStyled",
+  componentId: "sc-6ng9yt-2"
+})(({
+  orientation
+}) => {
+  if (orientation === discoveryCardOrientationVertical) {
+    return {
+      width: "100%"
+    };
+  }
+  return {
+    flex: 1,
+    maxWidth: "320px"
+  };
+}, ({
+  bottomSpacing = spacingNone
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+styled(Image).withConfig({
+  displayName: "DiscoveryCardImageStyled",
+  componentId: "sc-6ng9yt-3"
+})({
+  width: "100%",
+  height: "100%"
+});
+const DiscoveryCardLinkedImage = ({
+  uid,
+  image,
+  link: {
+    icon: _icon,
+    component: _component,
+    ...linkProps
+  },
+  orientation = discoveryCardOrientationVertical,
+  bottomSpacing
+}) => /* @__PURE__ */ jsx(DiscoveryCardImageLinkStyled, { ...linkProps, tabIndex: -1, "aria-describedby": `headingId-${uid}`, orientation, bottomSpacing, children: /* @__PURE__ */ jsx(Image, { ...image, aspectRatio: orientation === discoveryCardOrientationVertical ? aspectRatio16_9 : aspectRatio1_1, corners: cornerRounded }) });
+const DiscoveryCard = ({
+  orientation = discoveryCardOrientationVertical,
+  uid,
+  image,
+  heading,
+  link,
+  badge,
+  body,
+  price,
+  ...props
+}) => {
+  const ContentWrapper = orientation === discoveryCardOrientationHorizontal ? DiscoveryCardContentyled : Fragment;
+  return /* @__PURE__ */ jsxs(DiscoveryCardStyled, { ...props, orientation, children: [
+    /* @__PURE__ */ jsx(DiscoveryCardLinkedImage, { uid, orientation, link, image, bottomSpacing: discoveryCardOrientationHorizontal === orientation ? spacingNone : spacingMd }),
+    /* @__PURE__ */ jsxs(ContentWrapper, { children: [
+      badge && /* @__PURE__ */ jsx(Badge, { ...badge, size: smallSize, bottomSpacing: spacingXs }),
+      /* @__PURE__ */ jsx(Heading, { ...heading, size: textHeadingSm, weight: fontWeightBold, align: discoveryCardOrientationHorizontal === orientation ? bodyAlignLeft : bodyAlignCenter, id: `headingId-${uid}`, bottomSpacing: !body && !price ? spacingSm : spacingXs, children: heading.children }),
+      body && body.component === "Body" && /* @__PURE__ */ jsx(Body, { ...body, align: discoveryCardOrientationHorizontal === orientation ? bodyAlignLeft : bodyAlignCenter, bottomSpacing: !price ? spacingSm : spacingXs, children: body.children }),
+      body && body.component === "RichText" && /* @__PURE__ */ jsx(RichText, { ...body, bottomSpacing: !price ? spacingSm : spacingXs }),
+      price && /* @__PURE__ */ jsx(Price, { ...price, orientation: priceOrientationVertical, align: discoveryCardOrientationHorizontal === orientation ? priceAlignLeft : priceAlignCenter, size: priceSizeSm, bottomSpacing: spacingSm }),
+      /* @__PURE__ */ jsx(Link, { ...link, "aria-describedby": `headingId-${uid}`, bottomSpacing: spacingNone })
+    ] })
+  ] });
+};
+export {
+  DiscoveryCard as default,
+  discoveryCardOrientationHorizontal,
+  discoveryCardOrientationVertical
+};