@vodafone_de/brix-components 9.0.4 → 10.0.0

package/dist/{BorderRadius-ClUShVLu.js → BorderRadius-2LdggXbQ.js}

@@ -3,8 +3,8 @@ const borderRadiusSm = "borderRadiusSm";
 const borderRadiusMd = "borderRadiusMd";
 const borderRadiusFull = "borderRadiusFull";
 export {
-  borderRadiusNone as a,
+  borderRadiusFull as a,
   borderRadiusMd as b,
-  borderRadiusFull as c,
+  borderRadiusNone as c,
   borderRadiusSm as d
 };

package/dist/components/Accordion/index.js

@@ -21,7 +21,7 @@ import { g as borderWidthNone, b as borderWidthUnselected, a as borderWidthFocus
 import { a as fontWeightRegular, f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { s as spacingMd, c as spacingNone, a as spacingXs } from "../../Spacing-8v6hcO2x.js";
 import { a as colorTextNeutral, g as colorTextBrand } from "../../TextColor-BXVMXUVE.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "../../isBottomSpacing-BxfreCZU.js";
 const accordionToggleExpanded = "expanded";

package/dist/components/AccordionGroup/index.js

@@ -5,7 +5,7 @@ import { s as spacingMd, c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 import { useState } from "react";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "../../isBottomSpacing-BxfreCZU.js";
 const AccordionGroupSingleExpand = ({

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

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

package/dist/components/ArtDirectedImage/index.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { a as ContainerContext } from "../../index-DbG0QL9D.js";
+import { d as GridContext, b as GridItemContext } from "../../index-Bu-7sSif.js";
+import { b as breakpoint_medium, a as breakpoint_large, c as breakpoint_medium_number } from "../../breakpoint-CzBSbbY7.js";
+import { usePictureComponent, filterAspectRatioFromSources, filterImagePropsToPictureComponentImageProps } from "../../hooks/usePictureComponent/index.js";
+import { g as getSizesFromGridConfig } from "../../getSizesFromGridConfig-DKOLupyb.js";
+import styled from "styled-components";
+import viewport from "../../foundations/media-query/viewport/index.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
+const ArtDirectedImageContainerStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "ArtDirectedImageContainerStyled",
+  componentId: "sc-1iidohy-0"
+})({
+  position: "relative",
+  "& picture > img": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: "100%",
+    objectFit: "cover",
+    width: "100%"
+  }
+}, ({
+  sources
+}) => {
+  var _a, _b, _c;
+  return {
+    aspectRatio: (_a = sources.sm) == null ? void 0 : _a.aspectRatio,
+    ...viewport.md({
+      aspectRatio: (_b = sources.md) == null ? void 0 : _b.aspectRatio
+    }),
+    ...viewport.lg({
+      aspectRatio: (_c = sources.lg) == null ? void 0 : _c.aspectRatio
+    })
+  };
+});
+const ArtDirectedImage = ({
+  ...props
+}) => {
+  const PictureComponent = usePictureComponent();
+  const gridContext = useContext(GridContext);
+  const gridItemContext = useContext(GridItemContext);
+  const containerContext = useContext(ContainerContext);
+  const calculatedSizes = (gridContext == null ? void 0 : gridContext.nestedGridConfig) ? getSizesFromGridConfig(gridContext.nestedGridConfig, containerContext) : gridItemContext.nestedGridConfig ? getSizesFromGridConfig(gridItemContext.nestedGridConfig, containerContext) : getSizesFromGridConfig({
+    sm: 12
+  }, containerContext);
+  const mediaMap = {
+    lg: `(min-width: ${breakpoint_large})`,
+    md: `(min-width: ${breakpoint_medium})`,
+    sm: `(max-width: ${breakpoint_medium_number - 1}px)`
+  };
+  const order = ["lg", "md", "sm"];
+  console.log(props.sources);
+  const sources = Object.entries(props.sources).sort(([a], [b]) => order.indexOf(a) - order.indexOf(b)).map(([viewport2, source]) => ({
+    ...filterAspectRatioFromSources(source),
+    media: mediaMap[viewport2],
+    sizes: source.sizes || calculatedSizes
+  }));
+  const image = {
+    ...filterImagePropsToPictureComponentImageProps(props.image),
+    // fallback value is needed because alt is optional in ImageProps but required in PictureComponentProps
+    alt: props.image.alt || ""
+  };
+  const pictureComponentProps = {
+    sources,
+    image
+  };
+  return /* @__PURE__ */ jsx(ArtDirectedImageContainerStyled, { ...props, children: /* @__PURE__ */ jsx(PictureComponent, { ...pictureComponentProps }) });
+};
+export {
+  ArtDirectedImage as default
+};

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes, JSX } from 'react';
+import { AspectRatio, ImageProps } from '../Image';
+import { PatternProps } from '../../foundations/PatternProps';
+import { ViewportName } from '../../foundations/types/Viewport';
+export type ArtDirectedImageSourceType = JSX.IntrinsicElements['source'] & {
+    srcSet: string;
+    aspectRatio: AspectRatio;
+};
+export type ArtDirectedImageSourcesType = {
+    [key in ViewportName]?: ArtDirectedImageSourceType;
+};
+export interface ArtDirectedImageProps extends PatternProps, HTMLAttributes<HTMLPictureElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'ArtDirectedImage';
+    sources: ArtDirectedImageSourcesType;
+    image: ImageProps & {
+        /**
+         * aspectRatio is mandatory for image because it is mandatory for the sources that can't take width & height
+         */
+        aspectRatio: AspectRatio;
+    };
+}

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

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

package/dist/components/ArtDirectedImage/validate.d.ts

@@ -0,0 +1,3 @@
+import { ArtDirectedImageProps } from './props';
+export declare const validateArtDirectedImageProps: (props: unknown) => props is ArtDirectedImageProps;
+export declare const isArtDirectedImageProps: (props: unknown) => props is ArtDirectedImageProps;

package/dist/components/Badge/index.js

@@ -1,11 +1,10 @@
 "use client";
 import "react/jsx-runtime";
-import "../../index-BJHhIBYl.js";
+import "../../index-BsykXBqC.js";
 import "../../IconSize-AJp7xdJi.js";
 import "../../SizeTypes-Ck_RdzIf.js";
 import "../../Spacing-8v6hcO2x.js";
-import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { b, c, d, B, i, p, s, a, t, v } from "../../index-j22agtAk.js";
+import { b, c, d, B, i, p, s, a, t, v } from "../../index-DwGcrvTh.js";
 export {
   b as BadgeAppearanceColor,
   c as badgeAppearances,

package/dist/components/Body/index.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { F as FootnoteLink } from "../../index-BJHhIBYl.js";
+import { F as FootnoteLink } from "../../index-BsykXBqC.js";
 import { b as spacingSm, s as spacingMd } from "../../Spacing-8v6hcO2x.js";
 import { t as textBodyMd, a as textBodySm } from "../../TextBodySize-BcZR9mh2.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";
@@ -11,8 +10,8 @@ import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { f as fontWeightBold, b as fontWeightLight, a as fontWeightRegular } from "../../FontWeight-DEBGHbtO.js";
 import { a as colorTextNeutral } from "../../TextColor-BXVMXUVE.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
-import { r as pTagName, d as divTagName, c as spanTagName, f as strongTagName, g as supTagName } from "../../tags-D7CRQqc1.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
+import { p as pTagName, d as divTagName, c as spanTagName, f as strongTagName, g as supTagName } from "../../tags-Cwgg3Gx2.js";
 const BodyStyled = styled.p.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "BodyStyled",
@@ -103,7 +102,7 @@ const Body = ({
     bottomSpacing = textBodySm === props.size ? spacingSm : spacingMd;
   }
   return /* @__PURE__ */ jsxs(BodyStyled, { ...props, bottomSpacing, as: tag, tag, children: [
-    renderInlineRichTextFromOpenText(props.children),
+    props.children,
     footnoteLink && /* @__PURE__ */ jsx(FootnoteLink, { ...footnoteLink })
   ] });
 };

package/dist/components/BottomBar/index.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
-import Container from "../Container/index.js";
+import { C as Container } from "../../index-DbG0QL9D.js";
 import { s as spacingMd, c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 import styled from "styled-components";
-import { a as CardStyled } from "../../styled-Dq0NuP5r.js";
+import { a as CardStyled } from "../../styled-rsUoUFyl.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 { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { c as borderRadiusNone } from "../../BorderRadius-2LdggXbQ.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const bottomBarExtraPadding = 100;
 const BottomBarStyled = styled(CardStyled).withConfig({
   shouldForwardProp: filterProps(),

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { Theme } from 'storybook/internal/theming';
+import { Theme } from 'storybook/theming';
 import { PatternProps } from '../../foundations/PatternProps';
 export interface BottomBarProps extends Omit<PatternProps, 'bottomSpacing'>, HTMLAttributes<HTMLDivElement> {
     /**

package/dist/components/Button/index.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { B as ButtonAsLink, g as getButtonIcon } from "../../validate-Dlzxlfzp.js";
-import { c, a, b, d, f, e } from "../../validate-Dlzxlfzp.js";
-import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { B as ButtonStyled } from "../../styled-7vJ7mrAA.js";
+import { B as ButtonAsLink, g as getButtonIcon } from "../../validate-CLBUbscx.js";
+import { c, a, b, d, f, e } from "../../validate-CLBUbscx.js";
+import { B as ButtonStyled } from "../../styled-BKH3egch.js";
 const isButtonAsLinkProp = (props) => {
   return props.href !== void 0;
 };
@@ -12,7 +11,7 @@ const Button = (props) => {
     return /* @__PURE__ */ jsx(ButtonAsLink, { ...props });
   }
   return /* @__PURE__ */ jsxs(ButtonStyled, { ...props, children: [
-    renderInlineRichTextFromOpenText(props.children),
+    props.children,
     getButtonIcon(props.icon, props.iconPosition)
   ] });
 };

package/dist/components/ButtonAsLink/index.js

@@ -1,9 +1,8 @@
 "use client";
 import "react/jsx-runtime";
-import { B, i, v } from "../../validate-Dlzxlfzp.js";
+import { B, i, v } from "../../validate-CLBUbscx.js";
 import "../../hooks/useLinkComponent/index.js";
-import "../../filterProps-BJ5SpbnA.js";
-import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
+import "../../filterProps-CxkibNnG.js";
 import "../../sanitizeLinkProps-D2Kkovy1.js";
 export {
   B as default,

package/dist/components/ButtonGroup/index.js

@@ -2,14 +2,14 @@
 import { jsx } from "react/jsx-runtime";
 import Button from "../Button/index.js";
 import Flex from "../Flex/index.js";
-import { b as flexJustifyStart, c as flexJustifyEnd, d as flexJustifyCenter, e as flexJustifyBetween, f as flexOrientationHorizontal, a as flexOrientationVertical } from "../../styled-BxkvYuWW.js";
+import { b as flexJustifyStart, c as flexJustifyEnd, d as flexJustifyCenter, e as flexJustifyBetween, f as flexOrientationHorizontal, a as flexOrientationVertical } from "../../styled-CUp4EbPh.js";
 import FlexItem from "../FlexItem/index.js";
 import { b as spacingSm, s as spacingMd } from "../../Spacing-8v6hcO2x.js";
-import { useViewport } from "../../hooks/useViewport/index.js";
-import { e as validateButtonProps, v as validateButtonAsLinkProps } from "../../validate-Dlzxlfzp.js";
+import { u as useViewport } from "../../index-DKCzYjXw.js";
+import { e as validateButtonProps, v as validateButtonAsLinkProps } from "../../validate-CLBUbscx.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "../../isBottomSpacing-BxfreCZU.js";
-const flexJustifyBehaviors = [flexJustifyStart, flexJustifyEnd, flexJustifyCenter, flexJustifyBetween];
+const flexJustifyBehaviours = [flexJustifyStart, flexJustifyEnd, flexJustifyCenter, flexJustifyBetween];
 const flexOrientations = [flexOrientationHorizontal, flexOrientationVertical];
 const validateButtonGroupProps = (props) => {
   if (!isObject(props)) {
@@ -29,7 +29,7 @@ const validateButtonGroupProps = (props) => {
       return false;
     }
   }
-  if (buttonGroupProps.justifyHorizontal !== void 0 && !flexJustifyBehaviors.includes(buttonGroupProps.justifyHorizontal)) {
+  if (buttonGroupProps.justifyHorizontal !== void 0 && !flexJustifyBehaviours.includes(buttonGroupProps.justifyHorizontal)) {
     return false;
   }
   if (buttonGroupProps.orientation !== void 0 && !flexOrientations.includes(buttonGroupProps.orientation)) {
@@ -71,7 +71,7 @@ const ButtonGroup = ({
 };
 export {
   ButtonGroup as default,
-  flexJustifyBehaviors,
+  flexJustifyBehaviours,
   flexOrientations,
   isButtonGroupProps,
   validateButtonGroupProps

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { ButtonProps } from '../Button/props';
 import { ButtonAsLinkProps } from '../ButtonAsLink/props';
-import { FlexJustifyBehavior, FlexOrientation } from '../Flex/props';
+import { FlexJustifyBehaviour, FlexOrientation } from '../Flex/props';
 import { PatternProps } from '../../foundations/PatternProps';
 export interface ButtonGroupProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
     /**
@@ -13,7 +13,7 @@ export interface ButtonGroupProps extends PatternProps, HTMLAttributes<HTMLDivEl
      * passed to flex as justify if viewport is tablet or larger
      * mobile is always rendered with justify-start
      */
-    justifyHorizontal?: FlexJustifyBehavior;
+    justifyHorizontal?: FlexJustifyBehaviour;
     /**
      * Accepts Buttons and ButtonsAsLinks as children to render in the group
      */

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

@@ -1,6 +1,6 @@
-import { FlexJustifyBehavior, FlexOrientation } from '../Flex/props';
+import { FlexJustifyBehaviour, FlexOrientation } from '../Flex/props';
 import { ButtonGroupProps } from './props';
-export declare const flexJustifyBehaviors: FlexJustifyBehavior[];
+export declare const flexJustifyBehaviours: FlexJustifyBehaviour[];
 export declare const flexOrientations: FlexOrientation[];
 export declare const validateButtonGroupProps: (props: unknown) => props is ButtonGroupProps;
 export declare const isButtonGroupProps: (props: unknown) => props is ButtonGroupProps;