@vodafone_de/brix-components 3.1.8 → 3.1.9

package/components/Accordion/index.js

@@ -1,195 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const index = require("../../index-_A9hEpl9.cjs");
-const react = require("react");
-const components_Collapsible = require("../Collapsible/index.js");
-const styled = require("styled-components");
-const components_Heading = require("../Heading/index.js");
-const foundations_mediaQuery_forcedColors = require("../../foundations/media-query/forcedColors/index.js");
-const foundations_mediaQuery_reducedMotion = require("../../foundations/media-query/reducedMotion/index.js");
-const easing = require("../../easing-CWOuUocw.cjs");
-const foundations_token_getBorderColor = require("../../foundations/token/getBorderColor/index.js");
-const foundations_token_getBorderWidth = require("../../foundations/token/getBorderWidth/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const foundations_token_getFontWeight = require("../../foundations/token/getFontWeight/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const foundations_token_getTextColor = require("../../foundations/token/getTextColor/index.js");
-const BorderColor = require("../../BorderColor-Bl18ZGTj.cjs");
-const BorderWidth = require("../../BorderWidth-BLS_JGlE.cjs");
-const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const TextColor = require("../../TextColor-BZDXH1wP.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const accordionToggleExpanded = "expanded";
-const accordionToggleCollapsing = "collapsing";
-const accordionToggleCollapsed = "collapsed";
-const openCloseDuration = "0.5s";
-const AccordionStyled = styled.details.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "AccordionStyled",
-  componentId: "sc-1t5leix-0"
-})({
-  display: "flex",
-  flexDirection: "column"
-}, {
-  borderStyle: "solid",
-  borderColor: foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderSubtle),
-  borderWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthNone),
-  borderTopWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthUnselected),
-  borderBottomWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthUnselected),
-  "& + &": {
-    borderTopWidth: foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthNone)
-  }
-}, ({
-  verticalScrollOffset = 0
-}) => ({
-  scrollMarginTop: `${verticalScrollOffset}px`
-}), foundations_token_getBottomSpacing.getBottomSpacing);
-const AccordionSummaryStyled = styled.summary.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "AccordionSummaryStyled",
-  componentId: "sc-1t5leix-1"
-})({
-  display: "flex",
-  alignItems: "center",
-  cursor: "pointer",
-  gap: `${foundations_token_getSpacing.getSpacing(Spacing.spacingNone)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingXs)}`,
-  padding: `${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} ${foundations_token_getSpacing.getSpacing(Spacing.spacingNone)}`,
-  listStyleType: "none",
-  overflow: "hidden",
-  transition: `color ${openCloseDuration} ease-out`,
-  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextNeutral)
-}, {
-  "&:hover": {
-    color: foundations_token_getTextColor.getTextColor(TextColor.colorTextBrand)
-  }
-}, () => {
-  const focusColor = foundations_token_getBorderColor.getBorderColor(BorderColor.colorBorderFocus);
-  return {
-    "&:focus-visible": {
-      ...foundations_mediaQuery_forcedColors.default({
-        outline: `${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)} solid CanvasText`
-      }),
-      outline: "none",
-      boxShadow: `${focusColor} 0px 0px 0px ${foundations_token_getBorderWidth.getBorderWidth(BorderWidth.borderWidthFocus)}`
-    }
-  };
-}, {
-  "&::-webkit-details-marker": {
-    display: "none"
-  }
-});
-const AccordionHeadingStyled = styled(components_Heading.default).withConfig({
-  displayName: "AccordionHeadingStyled",
-  componentId: "sc-1t5leix-2"
-})({
-  flex: 1,
-  margin: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
-  color: "currentcolor"
-}, {
-  fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightRegular),
-  "details[open] &": {
-    fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightBold)
-  },
-  ...foundations_mediaQuery_reducedMotion.noReducedMotion({
-    "details[open] &, details[open].collapsing &": {
-      transition: `font-weight ${openCloseDuration} ease-out`
-    },
-    "details[open].collapsing &": {
-      fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightRegular)
-    }
-  })
-});
-const AccordionOpenIndicatorStyled = styled(index.ChevronDownIcon).withConfig({
-  displayName: "AccordionOpenIndicatorStyled",
-  componentId: "sc-1t5leix-3"
-})({
-  transformOrigin: "center",
-  color: foundations_token_getTextColor.getTextColor(TextColor.colorTextBrand)
-}, {
-  transform: "rotate(0deg)",
-  "details[open] &": {
-    transform: "rotate(180deg)"
-  },
-  ...foundations_mediaQuery_reducedMotion.noReducedMotion({
-    "details[open] &, details[open].collapsing &": {
-      transition: `transform ${openCloseDuration} ${easing.ease_in_out_sine}`
-    }
-  }),
-  "details[open].collapsing &": {
-    transform: "rotate(0deg)"
-  }
-});
-const Accordion = ({
-  uid,
-  children,
-  iconName,
-  heading,
-  headingProps,
-  expanded = true,
-  ...props
-}) => {
-  const ref = react.useRef(null);
-  const [toggle, setToggle] = react.useState(expanded ? accordionToggleExpanded : accordionToggleCollapsed);
-  const [animated, setAnimated] = react.useState(true);
-  react.useEffect(() => {
-    const target = ref.current;
-    const observer = new MutationObserver(() => {
-      if (target == null ? void 0 : target.open) {
-        setAnimated(false);
-        setToggle(accordionToggleExpanded);
-      }
-    });
-    if (target) {
-      observer.observe(target, {
-        attributes: true,
-        attributeFilter: ["open"]
-      });
-    }
-    return () => observer.disconnect();
-  }, []);
-  react.useEffect(() => {
-    if (expanded && accordionToggleExpanded === toggle) {
-      return;
-    }
-    if (!expanded && accordionToggleCollapsed === toggle) {
-      return;
-    }
-    if (expanded) {
-      setToggle(accordionToggleExpanded);
-    } else if (toggle === accordionToggleExpanded) {
-      setToggle(accordionToggleCollapsing);
-    }
-  }, [expanded]);
-  const handleToggle = (event) => {
-    event.preventDefault();
-    const current = toggle;
-    setToggle(accordionToggleExpanded === current ? accordionToggleCollapsing : accordionToggleExpanded);
-    if (props.handleOnToggle) {
-      props.handleOnToggle(uid, accordionToggleExpanded !== current);
-    }
-  };
-  const onTransition = (open) => {
-    if (open && animated) {
-      setAnimated(true);
-    }
-    if (!open) {
-      setToggle(accordionToggleCollapsed);
-    }
-  };
-  const className = `${props.className ? props.className : ""} ${accordionToggleCollapsing === toggle ? "collapsing" : ""} `;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AccordionStyled, { ref, className, open: accordionToggleCollapsed !== toggle, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionSummaryStyled, { onClick: handleToggle, role: "button", children: [
-      iconName && /* @__PURE__ */ jsxRuntime.jsx(index.IconLoader, { name: iconName, size: index.iconSizeMd }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionHeadingStyled, { ...headingProps, size: "xs", children: heading }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionOpenIndicatorStyled, { size: index.iconSizeMd })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(components_Collapsible, { expanded: accordionToggleExpanded === toggle, animated, onTransition, children })
-  ] });
-};
-exports.accordionToggleCollapsed = accordionToggleCollapsed;
-exports.accordionToggleCollapsing = accordionToggleCollapsing;
-exports.accordionToggleExpanded = accordionToggleExpanded;
-exports.default = Accordion;

package/components/AccordionGroup/index.js

@@ -1,58 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const components_Accordion = require("../Accordion/index.js");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const react = require("react");
-const styled = require("styled-components");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const AccordionGroupSingleExpand = ({
-  bottomSpacing = Spacing.spacingMd,
-  ...props
-}) => {
-  const getAccordionsExpanded = () => {
-    const accordionItemsOpenState = {};
-    props.items.forEach((accordionItem) => {
-      accordionItemsOpenState[accordionItem.uid] = true === accordionItem.expanded;
-    });
-    return accordionItemsOpenState;
-  };
-  const [accordionExpanded, setAccordionExpanded] = react.useState(getAccordionsExpanded);
-  const handleOnToggle = (uid, expanded) => {
-    const nextState = {
-      ...accordionExpanded
-    };
-    for (const key in nextState) {
-      nextState[key] = false;
-    }
-    nextState[uid] = expanded;
-    setAccordionExpanded(nextState);
-    if (props.handleOnToggle) {
-      props.handleOnToggle(uid, expanded);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.items.map((accordion, index) => {
-    const spacing = index + 1 === props.items.length ? bottomSpacing : Spacing.spacingNone;
-    return /* @__PURE__ */ jsxRuntime.jsx(components_Accordion.default, { ...accordion, expanded: accordionExpanded[accordion.uid], handleOnToggle, bottomSpacing: spacing, verticalScrollOffset: props.verticalScrollOffset, children: accordion.children }, accordion.uid);
-  }) });
-};
-const AccordionGroupStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "AccordionGroupStyled",
-  componentId: "sc-17dfswd-0"
-})(foundations_token_getBottomSpacing.getBottomSpacing);
-const AccordionGroup = ({
-  singleExpand = false,
-  bottomSpacing = Spacing.spacingMd,
-  ...props
-}) => {
-  if (singleExpand) {
-    return /* @__PURE__ */ jsxRuntime.jsx(AccordionGroupStyled, { className: props.className, bottomSpacing, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionGroupSingleExpand, { ...props, bottomSpacing }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionGroupStyled, { bottomSpacing, children: props.items.map((accordion, index) => {
-    const spacing = index + 1 === props.items.length ? bottomSpacing : Spacing.spacingNone;
-    return /* @__PURE__ */ jsxRuntime.jsx(components_Accordion.default, { ...accordion, bottomSpacing: spacing, handleOnToggle: accordion.handleOnToggle || props.handleOnToggle, children: accordion.children }, accordion.uid);
-  }) });
-};
-module.exports = AccordionGroup;

package/components/Badge/index.js

@@ -1,11 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-require("react/jsx-runtime");
-require("../../index-_A9hEpl9.cjs");
-require("../../Spacing-Cu_j2b83.cjs");
-require("../../SizeTypes-CoZ2p2qq.cjs");
-require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-const components_Badge = require("../../index-CnLaY-bi.cjs");
-exports.BadgeAppearanceColor = components_Badge.BadgeAppearanceColor;
-exports.default = components_Badge.Badge;

package/components/Body/index.js

@@ -1,75 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const TextBodySize = require("../../TextBodySize-DeP5RE2m.cjs");
-const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-const styled = require("styled-components");
-const foundations_token_getBodySize = require("../../foundations/token/getBodySize/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const foundations_token_getFontWeight = require("../../foundations/token/getFontWeight/index.js");
-const FontWeight = require("../../FontWeight-D3-RZpaX.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const BodyStyled = styled.p.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "BodyStyled",
-  componentId: "sc-1n7n7pv-0"
-})({
-  outline: "none",
-  color: "inherit",
-  verticalAlign: "baseline"
-}, ({
-  size = TextBodySize.textBodyMd
-}) => foundations_token_getBodySize.getBodySize(size), ({
-  weight,
-  tag
-}) => {
-  if ("strong" === tag) {
-    return {
-      fontWeight: foundations_token_getFontWeight.getFontWeight(FontWeight.fontWeightBold)
-    };
-  }
-  if (!weight) {
-    return {};
-  }
-  return {
-    fontWeight: foundations_token_getFontWeight.getFontWeight(weight)
-  };
-}, ({
-  tag
-}) => {
-  if ("sup" === tag) {
-    return {
-      verticalAlign: "super",
-      fontSize: "smaller"
-    };
-  }
-  if ("span" === tag) {
-    return {
-      display: "inline-block"
-    };
-  }
-  return {};
-}, ({
-  align
-}) => ({
-  textAlign: align
-}), foundations_token_getBottomSpacing.getBottomSpacing);
-const bodyAlignLeft = "left";
-const bodyAlignCenter = "center";
-const bodyAlignRight = "right";
-const Body = ({
-  tag = "p",
-  bottomSpacing,
-  ...props
-}) => {
-  if (!bottomSpacing) {
-    bottomSpacing = TextBodySize.textBodySm === props.size ? Spacing.spacingSm : Spacing.spacingMd;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(BodyStyled, { ...props, bottomSpacing, as: tag, tag, children: renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(props.children) });
-};
-exports.bodyAlignCenter = bodyAlignCenter;
-exports.bodyAlignLeft = bodyAlignLeft;
-exports.bodyAlignRight = bodyAlignRight;
-exports.default = Body;

package/components/BottomBar/index.js

@@ -1,78 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const components_Container = require("../Container/index.js");
-const styled = require("styled-components");
-const styled$1 = require("../../styled-D36Jj6J7.cjs");
-const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const bottomBarExtraPadding = 100;
-const BottomBarStyled = styled(styled$1.CardStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "BottomBarStyled",
-  componentId: "sc-oqw46b-0"
-})({
-  paddingLeft: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
-  paddingRight: foundations_token_getSpacing.getSpacing(Spacing.spacingNone),
-  paddingBottom: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} + ${bottomBarExtraPadding}px)`,
-  position: "fixed",
-  bottom: 0,
-  width: "100%",
-  height: "auto",
-  borderBottomLeftRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusNone),
-  borderBottomRightRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.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 = react.useRef(null);
-  const [bottomBarHeight, setBottomBarHeight] = react.useState(0);
-  const [visible, setVisible] = react.useState(props.visible === true);
-  const [screenSize, setScreenSize] = react.useState(null);
-  react.useEffect(() => {
-    setVisible(true === props.visible);
-  }, [props.visible]);
-  react.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);
-    };
-  }, []);
-  react.useEffect(() => {
-    if (screenSize) {
-      if (bottomBarHeight * 5 > screenSize.height) {
-        visible && setVisible(false);
-      } else if (props.visible) {
-        setVisible(props.visible);
-      }
-    }
-  }, [screenSize]);
-  react.useEffect(() => {
-    document.documentElement.classList.toggle("HasObscuringBottomBar", visible);
-    document.documentElement.style.setProperty("--bottomBarHeight", `${bottomBarHeight}px`);
-  }, [bottomBarHeight, props.children]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BottomBarStyled, { "aria-hidden": true, className: `${theme} ${props.className}`, ref: bottomBarRef, ...props, visible, children: /* @__PURE__ */ jsxRuntime.jsx(components_Container.default, { padding: Spacing.spacingNone, children: props.children }) });
-};
-module.exports = BottomBar;

package/components/Button/index.js

@@ -1,24 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const renderInlineRichTextFromOpenText = require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-const components_ButtonAsLink = require("../../index-B5BTmO2E.cjs");
-const styled = require("../../styled-nCWTwQUZ.cjs");
-const buttonFullWidth = "full";
-const buttonAutoWidth = "auto";
-const isButtonAsLinkProp = (props) => {
-  return props.href !== void 0;
-};
-const Button = (props) => {
-  if (isButtonAsLinkProp(props)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(components_ButtonAsLink.ButtonAsLink, { ...props });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(styled.ButtonStyled, { ...props, children: [
-    renderInlineRichTextFromOpenText.renderInlineRichTextFromOpenText(props.children),
-    components_ButtonAsLink.getButtonIcon(props == null ? void 0 : props.icon)
-  ] });
-};
-exports.buttonAutoWidth = buttonAutoWidth;
-exports.buttonFullWidth = buttonFullWidth;
-exports.default = Button;

package/components/ButtonAsLink/index.js

@@ -1,6 +0,0 @@
-"use client";
-"use strict";
-require("react/jsx-runtime");
-const components_ButtonAsLink = require("../../index-B5BTmO2E.cjs");
-require("../../renderInlineRichTextFromOpenText-CfOFMQ1v.cjs");
-module.exports = components_ButtonAsLink.ButtonAsLink;

package/components/ButtonGroup/index.js

@@ -1,33 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const components_Button = require("../Button/index.js");
-const components_Flex = require("../Flex/index.js");
-const styled = require("../../styled-CL1J-PFC.cjs");
-const components_FlexItem = require("../FlexItem/index.js");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const hooks_useViewport = require("../../hooks/useViewport/index.js");
-const renderButtons = (buttons, isMobile, isReversed = false) => {
-  if (!isMobile && isReversed) {
-    buttons = buttons.slice().reverse();
-  }
-  return buttons.map((button) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(components_FlexItem.default, { as: "li", grow: isMobile ? "auto" : void 0, bottomSpacing: "None", children: /* @__PURE__ */ jsxRuntime.jsx(components_Button.default, { ...button, bottomSpacing: "None", width: isMobile ? "full" : button.width, children: button.children }, button.uid) }, button.uid) });
-  });
-};
-const ButtonGroup = ({
-  isReversed,
-  buttons,
-  orientation = styled.flexOrientationHorizontal,
-  justifyHorizontal = styled.flexJustifyStart,
-  bottomSpacing = Spacing.spacingMd,
-  ...props
-}) => {
-  const viewport = hooks_useViewport.useViewport();
-  let justify = "start";
-  if ("sm" !== viewport) {
-    justify = "horizontal" === orientation ? justifyHorizontal : "start";
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(components_Flex.default, { className: props.className, bottomSpacing, gapSpacing: Spacing.spacingSm, justify, orientation: "sm" === viewport ? "vertical" : orientation, as: "ul", children: renderButtons(buttons, "sm" === viewport, isReversed) });
-};
-module.exports = ButtonGroup;

package/components/Card/index.js

@@ -1,17 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("react/jsx-runtime");
-const tags = require("../../tags-CTaUxoCi.cjs");
-const styled = require("../../styled-D36Jj6J7.cjs");
-const Card = ({
-  children,
-  className,
-  theme,
-  tag = tags.divTagName,
-  isMobileDark = false,
-  appearance,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(styled.CardStyled, { ...props, className: (className ? className : "") + (isMobileDark ? " DarkMobile" : "") + ("Dark" === theme || "secondary" === appearance ? " Dark" : ""), appearance, as: tag, children });
-exports.CardAppearanceColor = styled.CardAppearanceColor;
-exports.default = Card;