@vodafone_de/brix-components 3.0.1 → 3.0.2

package/dist/components/IconButton/index.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { IconLoader, iconSizeSm } from "@vfde-react/inline-icon-library";
+import styled from "styled-components";
+import { s as shadow28 } from "../../shadow-u158mzuN.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getOpacity } from "../../foundations/token/getOpacity/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { b as borderRadiusMd, c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
+import { d as borderWidthSelected } from "../../BorderWidth-DfOlyKK7.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { b as buttonHeight, g as getButtonAppearance, p as primaryAppearance, a as ButtonAppearanceColor } from "../../styled-FNJyDkPV.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
+const iconButtonShapeSquare = "square";
+const iconButtonShapeCircle = "circle";
+const IconButtonStyled = styled.button.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "IconButtonStyled",
+  componentId: "sc-1ntcgv2-0"
+})({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  width: buttonHeight,
+  height: buttonHeight,
+  padding: getSpacing(spacingXs)
+}, ({
+  $shape
+}) => ({
+  borderRadius: getBorderRadius(iconButtonShapeSquare === $shape ? borderRadiusMd : borderRadiusFull)
+}), ({
+  appearance = primaryAppearance
+}) => getButtonAppearance(appearance), ({
+  floating = false,
+  appearance = primaryAppearance
+}) => {
+  if (!floating) {
+    return {};
+  }
+  if (appearance === "tertiary") {
+    const background = getObjectColor(ButtonAppearanceColor[appearance]);
+    return {
+      boxShadow: `inset ${background} 0px 0px 0px ${getBorderWidth(borderWidthSelected)}, ${getCssVar(shadow28)}`
+    };
+  }
+  return {
+    boxShadow: getCssVar(shadow28)
+  };
+}, () => ({
+  "&:hover": {
+    boxShadow: getCssVar(shadow28)
+  }
+}), ({
+  disabled
+}) => {
+  if (disabled) {
+    return {
+      pointerEvents: "none",
+      opacity: getOpacity(opacityDisabled)
+    };
+  }
+  return {};
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const IconButton = ({
+  label,
+  shape = iconButtonShapeCircle,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(IconButtonStyled, { ...props, "aria-label": label, $shape: shape, children: /* @__PURE__ */ jsx(IconLoader, { name: props.iconName, size: iconSizeSm, "aria-hidden": true, focusable: false }) });
+};
+export {
+  IconButton as default,
+  iconButtonShapeCircle,
+  iconButtonShapeSquare
+};

package/dist/components/IconSnippet/index.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconLoader, iconSizeMd, iconSize2xl } from "@vfde-react/inline-icon-library";
+import Body from "../Body/index.js";
+import Heading from "../Heading/index.js";
+import InlineLink from "../InlineLink/index.js";
+import { R as RichText } from "../../index-D6hvbziL.js";
+import { d as divTagName } from "../../tags-DI6H1biK.js";
+import { a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import Link from "../Link/index.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";
+const iconSnippetSizeSmall = "small";
+const iconSnippetSizeLarge = "large";
+const iconSnippetPositionLeft = "left";
+const iconSnippetPositionCenter = "center";
+const iconSnippetAlignTop = "top";
+const iconSnippetAlignCenter = "center";
+const IconSnippetStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "IconSnippetStyled",
+  componentId: "sc-uw0x7w-0"
+})({
+  display: "flex"
+}, ({
+  iconPosition
+}) => ({
+  gap: getSpacing("center" === iconPosition ? spacingXs : spacingMd)
+}), ({
+  iconAlign
+}) => ({
+  alignItems: "top" === iconAlign ? "start" : iconAlign
+}), ({
+  iconPosition
+}) => {
+  if ("left" === iconPosition) {
+    return {};
+  }
+  return {
+    flexDirection: "column",
+    alignItems: "center"
+  };
+}, ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const IconLoaderStyled = styled(IconLoader).withConfig({
+  displayName: "IconLoaderStyled",
+  componentId: "sc-uw0x7w-1"
+})({
+  flexShrink: 0
+});
+const IconSnippetContentStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "IconSnippetContentStyled",
+  componentId: "sc-uw0x7w-2"
+})({
+  display: "flex",
+  flexDirection: "column",
+  "& > :last-child": {
+    marginBottom: 0
+  }
+}, ({
+  iconPosition
+}) => ({
+  alignItems: "center" === iconPosition ? "center" : "flex-start"
+}));
+const getContents = (contents) => {
+  return contents.map((content) => {
+    if ("Heading" === content.component) {
+      return /* @__PURE__ */ jsx(Heading, { ...content, bottomSpacing: spacingXs, children: content.children }, content.uid);
+    }
+    if ("Body" === content.component) {
+      return /* @__PURE__ */ jsx(Body, { ...content, bottomSpacing: spacingXs, children: content.children }, content.uid);
+    }
+    if ("RichText" === content.component) {
+      return /* @__PURE__ */ jsx(RichText, { paragraphSpacing: spacingXs, ...content }, content.uid);
+    }
+    if ("InlineLink" === content.component) {
+      return /* @__PURE__ */ jsx(Body, { bottomSpacing: spacingXs, children: /* @__PURE__ */ jsx(InlineLink, { ...content, children: content.children }) }, content.uid);
+    }
+    if ("Link" === content.component) {
+      return /* @__PURE__ */ jsx(Link, { ...content, children: content.children }, content.uid);
+    }
+    return null;
+  });
+};
+const IconSnippet = ({
+  contents,
+  size = iconSnippetSizeSmall,
+  iconPosition = iconSnippetPositionLeft,
+  iconAlign = iconSnippetAlignTop,
+  tag = divTagName,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs(IconSnippetStyled, { ...props, iconPosition, iconAlign, as: tag, children: [
+    /* @__PURE__ */ jsx(IconLoaderStyled, { size: size === iconSnippetSizeSmall ? iconSizeMd : iconSize2xl, name: props.icon }),
+    /* @__PURE__ */ jsx(IconSnippetContentStyled, { as: tag, iconPosition, children: getContents(contents) })
+  ] });
+};
+export {
+  IconSnippet as default,
+  iconSnippetAlignCenter,
+  iconSnippetAlignTop,
+  iconSnippetPositionCenter,
+  iconSnippetPositionLeft,
+  iconSnippetSizeLarge,
+  iconSnippetSizeSmall
+};

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

@@ -1,5 +1,5 @@
 import { IconSnippetPosition, IconSnippetProps } from './props';
-export declare const IconSnippetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<IconSnippetProps, "size" | "icon" | "contents">>> & string;
+export declare const IconSnippetStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<IconSnippetProps, "size" | "contents" | "icon">>> & string;
 export declare const IconLoaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@vfde-react/inline-icon-library').IconLoaderProps, never>> & string & Omit<import('react').FC<import('@vfde-react/inline-icon-library').IconLoaderProps>, keyof import('react').Component<any, {}, any>>;
 export declare const IconSnippetContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     iconPosition: IconSnippetPosition;

package/dist/components/IconSnippetList/index.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Grid from "../Grid/index.js";
+import GridItem from "../GridItem/index.js";
+import IconSnippet from "../IconSnippet/index.js";
+import { u as ulTagName, l as liTagName } from "../../tags-DI6H1biK.js";
+import { b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+const IconSnippetList = ({
+  component: _component,
+  items,
+  gridConfig = {
+    sm: 6,
+    md: 4,
+    lg: 2
+  },
+  bottomSpacing = spacingNone,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Grid, { ...props, tag: ulTagName, bottomSpacing, children: items.map((item) => {
+    return /* @__PURE__ */ jsx(GridItem, { tag: liTagName, ...gridConfig, children: /* @__PURE__ */ jsx(IconSnippet, { ...item }) }, item.uid);
+  }) });
+};
+export {
+  IconSnippetList as default
+};

package/dist/components/Image/index.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
+import { c as cornerStraight } from "../../CornerStyle-JEbGNArR.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const objectFitContain = "contain";
+const objectFitCover = "cover";
+const objectFitNone = "none";
+const horizontalAlignmentLeft = "left";
+const horizontalAlignmentRight = "right";
+const horizontalAlignmentCenter = "center";
+const objectPositionCenter = "center";
+const objectPositionLeftTop = "top left";
+const objectPositionLeftCenter = "center left";
+const objectPositionLeftBottom = "bottom left";
+const objectPositionRightTop = "top right";
+const objectPositionRightCenter = "center right";
+const objectPositionRightBottom = "bottom right";
+const aspectRatio1_1 = "1/1";
+const aspectRatio3_4 = "3/4";
+const aspectRatio16_9 = "16/9";
+const aspectRatio21_9 = "21/9";
+const aspectRatio32_9 = "32/9";
+const aspectRatio48_9 = "48/9";
+const ImageStyled = styled.img.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ImageStyled",
+  componentId: "sc-z3qszb-0"
+})({
+  display: "block",
+  width: "100%"
+}, ({
+  objectFit = "contain"
+}) => ({
+  objectFit
+}), ({
+  objectPosition
+}) => ({
+  objectPosition
+}), ({
+  horizontalAlignment = "left"
+}) => ({
+  marginLeft: horizontalAlignment === "left" ? 0 : "auto",
+  marginRight: horizontalAlignment === "right" ? 0 : "auto"
+}), ({
+  corners = cornerStraight
+}) => ({
+  borderRadius: corners === "rounded" ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
+}), ({
+  aspectRatio
+}) => ({
+  aspectRatio
+}), getBottomSpacing);
+const Image = ({
+  alt = "",
+  ...props
+}) => /* @__PURE__ */ jsx(ImageStyled, { ..."" === alt ? {
+  "aria-hidden": true
+} : {}, ...props, alt });
+export {
+  aspectRatio16_9,
+  aspectRatio1_1,
+  aspectRatio21_9,
+  aspectRatio32_9,
+  aspectRatio3_4,
+  aspectRatio48_9,
+  Image as default,
+  horizontalAlignmentCenter,
+  horizontalAlignmentLeft,
+  horizontalAlignmentRight,
+  objectFitContain,
+  objectFitCover,
+  objectFitNone,
+  objectPositionCenter,
+  objectPositionLeftBottom,
+  objectPositionLeftCenter,
+  objectPositionLeftTop,
+  objectPositionRightBottom,
+  objectPositionRightCenter,
+  objectPositionRightTop
+};

package/dist/components/ImageHeader/index.js

@@ -0,0 +1,262 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Body from "../Body/index.js";
+import { a as fontWeightLight } from "../../FontWeight-CR22KTex.js";
+import { s as spacingMd, c as spacingSm, d as spacingXl, a as spacingXs, e as spacing2Xs, b as spacingNone } from "../../Spacing-D0HQH9YJ.js";
+import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
+import { g as getUid, R as RichText } from "../../index-D6hvbziL.js";
+import Button from "../Button/index.js";
+import Container from "../Container/index.js";
+import Heading, { headingAlignCenter } from "../Heading/index.js";
+import { P as Price, c as priceSizeSm } from "../../index-CeJsIf3Z.js";
+import styled from "styled-components";
+import { B as Badge } from "../../index-CzTqNQTT.js";
+import ButtonGroup from "../ButtonGroup/index.js";
+import Grid from "../Grid/index.js";
+import GridItem from "../GridItem/index.js";
+import ResponsiveImage from "../ResponsiveImage/index.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { a as colorBackgroundOverlay } from "../../BackgroundColor-JObp_2xA.js";
+import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
+import { b as flexOrientationVertical } from "../../styled-CpoX5USb.js";
+const imageHeaderVariantFull = "full";
+const imageHeaderVariantSplit = "split";
+const imageHeaderPositionRight = "right";
+const imageHeaderPositionLeft = "left";
+const getBadgeTopPosition = () => {
+  return `calc(-0.5 * (${getSpacing(spacing2Xs)} * 2 + ${getBodySize(textBodyMd).fontSize} * ${getBodySize(textBodyMd).lineHeight}))`;
+};
+const ImageHeaderStyled = styled(Grid).withConfig({
+  displayName: "ImageHeaderStyled",
+  componentId: "sc-7ig3h-0"
+})({
+  alignItems: "center",
+  position: "relative",
+  marginRight: `calc(-1 * ${getSpacing(spacingMd)})`,
+  marginLeft: `calc(-1 * ${getSpacing(spacingMd)})`,
+  ...viewport.lg({
+    width: "100%",
+    margin: "0 auto"
+  })
+}, ({
+  position,
+  variant
+}) => ({
+  ...viewport.lg({
+    flexDirection: position === imageHeaderPositionRight ? "row" : "row-reverse",
+    ...variant === imageHeaderVariantFull && position === imageHeaderPositionRight && {
+      justifyContent: "flex-end"
+    }
+  })
+}));
+const ImageHeaderImagesContainerStyled = styled(GridItem).withConfig({
+  displayName: "ImageHeaderImagesContainerStyled",
+  componentId: "sc-7ig3h-1"
+})({
+  ...viewport.lg({
+    flexGrow: "1",
+    width: "auto"
+  })
+}, ({
+  variant,
+  position
+}) => {
+  if (variant === imageHeaderVariantSplit) {
+    const marginSide = position === imageHeaderPositionRight ? "marginLeft" : "marginRight";
+    return {
+      ...viewport.lg({
+        [marginSide]: "calc(-1*(100vw - 100%) / 2)"
+      })
+    };
+  }
+}, ({
+  variant
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      ...viewport.lg({
+        flexBasis: "100%",
+        alignItems: "center",
+        marginRight: "calc(-1 * (100vw - 100%) / 2)",
+        marginLeft: "calc(-1 * (100vw - 100%) / 2)"
+      })
+    };
+  }
+});
+const ImageHeaderResponsiveImageStyled = styled(ResponsiveImage).withConfig({
+  displayName: "ImageHeaderResponsiveImageStyled",
+  componentId: "sc-7ig3h-2"
+})({
+  ...viewport.lg({
+    width: "100%"
+  }),
+  img: {
+    ...viewport.lg({
+      height: "450px"
+    })
+  }
+}, ({
+  variant
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      img: {
+        minHeight: "450px",
+        ...viewport.lg({
+          minHeight: "unset"
+        })
+      }
+    };
+  }
+}, ({
+  position,
+  variant
+}) => {
+  if (variant === imageHeaderVariantSplit) {
+    return {
+      img: {
+        ...viewport.lg({
+          objectPosition: `${position === imageHeaderPositionLeft ? imageHeaderPositionLeft : imageHeaderPositionRight} center`
+        })
+      }
+    };
+  }
+});
+const ImageHeaderContentStyled = styled(GridItem).withConfig({
+  displayName: "ImageHeaderContentStyled",
+  componentId: "sc-7ig3h-3"
+})({
+  padding: `${getSpacing(spacingXl)} ${getSpacing(spacingMd)}`,
+  gap: getSpacing(spacingSm),
+  alignItems: "center",
+  position: "relative",
+  ...viewport.lg({
+    alignItems: "flex-start",
+    padding: 0
+  })
+}, ({
+  variant,
+  position,
+  contentGridDesktopColumns = 6
+}) => {
+  if (variant === imageHeaderVariantFull) {
+    return {
+      width: "100%",
+      position: "absolute",
+      bottom: 0,
+      background: getBackgroundColor(colorBackgroundOverlay),
+      ...viewport.lg({
+        width: `${100 / (12 / contentGridDesktopColumns)}%`,
+        background: "none",
+        bottom: "auto",
+        justifyContent: "center"
+      })
+    };
+  }
+  if (variant === imageHeaderVariantSplit) {
+    const paddingSide = position === imageHeaderPositionRight ? "paddingLeft" : "paddingRight";
+    return {
+      ...viewport.lg({
+        [paddingSide]: getSpacing(spacingMd)
+      })
+    };
+  }
+});
+const ImageHeaderBadgeStyled = styled(Badge).withConfig({
+  displayName: "ImageHeaderBadgeStyled",
+  componentId: "sc-7ig3h-4"
+})({
+  position: "absolute",
+  top: getBadgeTopPosition(),
+  ...viewport.lg({
+    position: "static",
+    top: 0
+  })
+});
+const ImageHeaderHeadingStyled = styled(Heading).withConfig({
+  displayName: "ImageHeaderHeadingStyled",
+  componentId: "sc-7ig3h-5"
+})({
+  ...viewport.lg({
+    textAlign: "left"
+  })
+});
+const ImageHeaderButtonGroupStyled = styled(ButtonGroup).withConfig({
+  displayName: "ImageHeaderButtonGroupStyled",
+  componentId: "sc-7ig3h-6"
+})({
+  marginTop: getSpacing(spacingXs),
+  width: "100%",
+  justifyContent: "center",
+  ...viewport.lg({
+    justifyContent: "flex-start"
+  })
+}, ({
+  orientation
+}) => flexOrientationVertical === orientation ? viewport.md({
+  width: "auto"
+}) : {});
+const ImageHeader = ({
+  responsiveImage,
+  badge,
+  heading,
+  subline,
+  price,
+  action,
+  variant = imageHeaderVariantSplit,
+  position = imageHeaderPositionLeft,
+  contentGridDesktopColumns = 6,
+  theme,
+  ...props
+}) => {
+  const headingId = `heading-${getUid()}`;
+  const getSubline = (subline2) => {
+    if (!subline2) return null;
+    const commonProps = {
+      key: subline2.uid,
+      bottomSpacing: spacingNone
+    };
+    switch (subline2.component) {
+      case "Heading":
+        return /* @__PURE__ */ jsx(Heading, { ...subline2, ...commonProps, size: "md", tag: "div" });
+      case "RichText":
+        return /* @__PURE__ */ jsx(RichText, { ...subline2, ...commonProps });
+      case "Body":
+        return /* @__PURE__ */ jsx(Body, { ...subline2, ...commonProps, size: "sm" });
+      default:
+        return null;
+    }
+  };
+  const getAction = (action2) => {
+    if (!action2) return null;
+    switch (action2.component) {
+      case "Button":
+      case "ButtonAsLink":
+        return /* @__PURE__ */ jsx(Button, { ...action2, bottomSpacing: spacingNone });
+      case "ButtonGroup":
+        return /* @__PURE__ */ jsx(ImageHeaderButtonGroupStyled, { ...action2, bottomSpacing: spacingNone });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(Container, { padding: "None", className: props.className, children: /* @__PURE__ */ jsxs(ImageHeaderStyled, { ...props, position, variant, spacing: spacingNone, component: "Grid", children: [
+    /* @__PURE__ */ jsx(ImageHeaderImagesContainerStyled, { align: "center", variant, position, lg: 12 - contentGridDesktopColumns, children: /* @__PURE__ */ jsx(ImageHeaderResponsiveImageStyled, { images: responsiveImage.images, variant, position, bottomSpacing: spacingNone }) }),
+    /* @__PURE__ */ jsxs(ImageHeaderContentStyled, { variant, position, contentGridDesktopColumns, lg: contentGridDesktopColumns, className: "Dark" === theme ? " Dark" : "", children: [
+      badge && /* @__PURE__ */ jsx(ImageHeaderBadgeStyled, { ...badge, size: mediumSize, bottomSpacing: spacingNone }),
+      /* @__PURE__ */ jsx(ImageHeaderHeadingStyled, { ...heading, id: headingId, align: headingAlignCenter, weight: fontWeightLight, bottomSpacing: spacingNone }),
+      getSubline(subline),
+      price && /* @__PURE__ */ jsx(Price, { ...price, size: priceSizeSm, bottomSpacing: spacingNone }),
+      getAction(action)
+    ] })
+  ] }) });
+};
+export {
+  ImageHeader as default,
+  imageHeaderPositionLeft,
+  imageHeaderPositionRight,
+  imageHeaderVariantFull,
+  imageHeaderVariantSplit
+};

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

@@ -1,9 +1,9 @@
 import { ImageHeaderProps } from './props';
 export declare const getBadgeTopPosition: () => string;
-export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "variant" | "position">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
-export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "variant" | "position" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Grid').GridProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../Grid').GridProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderResponsiveImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../ResponsiveImage').ResponsiveImageProps, Pick<ImageHeaderProps, "position" | "variant">>> & string & Omit<import('react').FC<import('../ResponsiveImage').ResponsiveImageProps>, keyof import('react').Component<any, {}, any>>;
+export declare const ImageHeaderContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../GridItem').GridItemProps, Pick<ImageHeaderProps, "position" | "variant" | "contentGridDesktopColumns">>> & string & Omit<import('react').FC<import('../GridItem').GridItemProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderBadgeStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Badge').BadgeProps, never>> & string & Omit<import('react').FC<import('../Badge').BadgeProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderHeadingStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Heading').HeadingProps, never>> & string & Omit<import('react').FC<import('../Heading').HeadingProps>, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderButtonGroupStyled: 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>>;

package/dist/components/InlineLink/index.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { e as ease_in_sine } from "../../easing-Dm-pO8SY.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
+import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const hover = {
+  textDecoration: "none",
+  color: getTextColor(colorTextBrand)
+};
+const InlineLinkStyled = styled.a.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "InlineLinkStyled",
+  componentId: "sc-ztdjf-0"
+})({
+  cursor: "pointer",
+  color: getTextColor(colorTextNeutral),
+  textDecoration: "underline",
+  transition: `color 0.2s ${ease_in_sine}`,
+  verticalAlign: "baseline",
+  "&:focus-visible": {
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+    }),
+    boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+    outline: "none",
+    ...hover
+  },
+  "&:visited": {
+    color: getTextColor(colorTextNeutral)
+  },
+  "&:hover": hover
+});
+const InlineLink = (props) => /* @__PURE__ */ jsx(InlineLinkStyled, { ...props, children: props.children });
+export {
+  InlineLink as default
+};