@vodafone_de/brix-components 9.0.4 → 10.0.0

package/dist/components/ConsentMessage/index.js

@@ -3,9 +3,9 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import Body, { bodyAlignCenter } from "../Body/index.js";
 import Button from "../Button/index.js";
-import { a as buttonAutoWidth } from "../../validate-Dlzxlfzp.js";
+import { a as buttonAutoWidth } from "../../validate-CLBUbscx.js";
 import styled from "styled-components";
-import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-7vJ7mrAA.js";
+import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-BKH3egch.js";
 import viewport from "../../foundations/media-query/viewport/index.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";

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

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { ContainerProps } from './props';
+export declare const ContainerContext: import('react').Context<boolean>;
 declare const Container: FC<ContainerProps>;
 export default Container;
 export * from './props';

package/dist/components/Container/index.js

@@ -1,108 +1,13 @@
 "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 { f as borderWidthDivider } from "../../BorderWidth-BjXpOdM5.js";
-import { e as spacingXl, s as spacingMd, c as spacingNone, h as spacing5Xl } from "../../Spacing-8v6hcO2x.js";
-import { a as colorTextNeutral } from "../../TextColor-BXVMXUVE.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
-import { f as colorBackgroundBrand, e as colorBackgroundBrandGradient, a as colorBackgroundSubtle, c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.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 containerAppearances = ["primary", "secondary", "tertiary", "alternative"];
-const containerPaddings = [spacingNone, spacingXl, spacing5Xl];
-const validateContainerProps = (props) => {
-  if (!props || typeof props !== "object") {
-    return false;
-  }
-  const containerProps = props;
-  if (!containerProps.component || containerProps.component !== "Container") {
-    return false;
-  }
-  if (containerProps.appearance !== void 0 && !containerAppearances.includes(containerProps.appearance)) {
-    return false;
-  }
-  if (containerProps.border !== void 0 && typeof containerProps.border !== "boolean") {
-    return false;
-  }
-  if (containerProps.padding !== void 0 && !containerPaddings.includes(containerProps.padding)) {
-    return false;
-  }
-  if (containerProps.children === void 0) {
-    return false;
-  }
-  return true;
-};
-const isContainerProps = (props) => {
-  return validateContainerProps(props);
-};
-const Container = ({
-  className,
-  children,
-  appearance = "primary",
-  tag = "div",
-  ...props
-}) => /* @__PURE__ */ jsx(ContainerBackgroundStyled, { className: `${className ? className : ""} ${["tertiary", "alternative"].indexOf(appearance) > -1 ? "Dark" : props.theme}`, appearance, as: tag, ...props, children: /* @__PURE__ */ jsx(ContainerCenterStyled, { children }) });
+import "react/jsx-runtime";
+import "react";
+import { b, a, c, d, C, i, v } from "../../index-DbG0QL9D.js";
 export {
-  ContainerAppearanceColor,
-  containerAppearances,
-  containerPaddings,
-  Container as default,
-  isContainerProps,
-  validateContainerProps
+  b as ContainerAppearanceColor,
+  a as ContainerContext,
+  c as containerAppearances,
+  d as containerPaddings,
+  C as default,
+  i as isContainerProps,
+  v as validateContainerProps
 };

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

@@ -1,3 +1,5 @@
 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 maxWidthBreakpoint = 1280;
+export declare const containerMaxWidth = 1240;
 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.js

@@ -6,7 +6,7 @@ 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-xKyZg4q9.js";
+import { a as InputStyled, I as InputWrapperStyled } from "../../styled-DmMk0W0J.js";
 import { i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { s as spacingMd, a as spacingXs } from "../../Spacing-8v6hcO2x.js";
 import { aW as CalendarMonthIcon } from "../../_5gPlusIcon-CnxmOo1u.js";

package/dist/components/DemoBox/index.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import IconSnippet from "../IconSnippet/index.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
-import { D as DemoBoxStyled } from "../../styled-Dw5c-xwf.js";
+import { D as DemoBoxStyled } from "../../styled-BIcsESkS.js";
 const DemoBox = ({
   children,
   ...props

package/dist/components/Dialog/index.js

@@ -16,7 +16,7 @@ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js"
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { d as colorBackgroundOverlayStatic } from "../../BackgroundColor-e0N9tdDR.js";
 import { a as borderWidthFocus } from "../../BorderWidth-BjXpOdM5.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const DialogOverlayStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "DialogOverlayStyled",

package/dist/components/DiscoveryCard/index.js

@@ -1,32 +1,35 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
-import { e as BadgeStyled, i as isBadgeProps, B as Badge } from "../../index-j22agtAk.js";
+import { e as BadgeStyled, i as isBadgeProps, B as Badge } from "../../index-DwGcrvTh.js";
 import Body, { isBodyProps, bodyAlignLeft, bodyAlignCenter } from "../Body/index.js";
 import Heading, { isHeadingProps } from "../Heading/index.js";
 import Link, { isLinkProps } from "../Link/index.js";
-import { k as isPriceProps, b as priceSizeSm, P as Price, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-TL0X3rXH.js";
-import { R as RichText } from "../../index-C4eCcl02.js";
+import { k as isPriceProps, b as priceSizeSm, P as Price, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-DCXRnuHz.js";
+import { R as RichText } from "../../index-DP6Nlg-a.js";
 import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { s as spacingMd, c as spacingNone, a as spacingXs, b as spacingSm } from "../../Spacing-8v6hcO2x.js";
-import "../../index-DCE5HNIR.js";
-import "../../index-BJHhIBYl.js";
-import "html-react-parser";
-import "../../styled-7vJ7mrAA.js";
-import { a as LinkStyled } from "../../index-CEotMXpL.js";
+import "../../index-C2E3JrhF.js";
+import "../../index-BsykXBqC.js";
+import "../../styled-BKH3egch.js";
+import { a as LinkStyled } from "../../index-Dd-A7i9Y.js";
 import "../../hooks/useLinkComponent/index.js";
+import "html-react-parser";
 import "../InlineLink/index.js";
 import "../../TableWrapper-Do9KCTGV.js";
 import styled from "styled-components";
 import Card from "../Card/index.js";
-import Image from "../Image/index.js";
+import Image, { aspectRatio16_9, aspectRatio1_1, isImageProps } from "../Image/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
-import { p as aspectRatio16_9, m as aspectRatio1_1, z as isImageProps } from "../../validate-DYmFz2FF.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 import { a as cornerRounded } from "../../CornerStyle-JEbGNArR.js";
+import "../../index-DbG0QL9D.js";
+import "../../index-Bu-7sSif.js";
+import "../UtilityLink/index.js";
+import "../../hooks/useImageComponent/index.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 const discoveryCardOrientationVertical = "vertical";
 const discoveryCardOrientationHorizontal = "horizontal";

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

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes } from 'react';
 import { DiscoveryCardProps } from './props';
-export declare const DiscoveryCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Card').CardProps, Omit<DiscoveryCardProps, "badge" | "heading" | "link" | "price" | "uid" | "body" | "image">>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;
+export declare const DiscoveryCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('../Card').CardProps, Omit<DiscoveryCardProps, "badge" | "heading" | "image" | "link" | "price" | "uid" | "body">>> & string & Omit<import('react').FC<import('../Card').CardProps>, keyof import('react').Component<any, {}, any>>;
 export declare const DiscoveryCardContentyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DiscoveryCardImageLinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, Pick<DiscoveryCardProps, "bottomSpacing" | "orientation"> & AnchorHTMLAttributes<HTMLAnchorElement>>> & string;
 export declare const DiscoveryCardImageStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Image').ImageProps, never>> & string & Omit<import('react').FC<import('../Image').ImageProps>, keyof import('react').Component<any, {}, any>>;

package/dist/components/DiscoveryCardGroup/index.js

@@ -2,25 +2,27 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import DiscoveryCard, { discoveryCardOrientationVertical, validateDiscoveryCardProps, discoveryCardOrientationHorizontal } from "../DiscoveryCard/index.js";
-import Grid from "../Grid/index.js";
-import GridItem from "../GridItem/index.js";
-import { a as LinkStyled } from "../../index-CEotMXpL.js";
+import { a as Grid, G as GridItem } from "../../index-Bu-7sSif.js";
+import { a as LinkStyled } from "../../index-Dd-A7i9Y.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
 import "react";
-import "../../index-DCE5HNIR.js";
-import "../../index-BJHhIBYl.js";
-import "html-react-parser";
-import "../../index-j22agtAk.js";
+import "../../index-C2E3JrhF.js";
+import "../../index-BsykXBqC.js";
+import "../../index-DwGcrvTh.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 import "../Body/index.js";
 import "../Heading/index.js";
-import "../../styled-7vJ7mrAA.js";
+import "../../styled-BKH3egch.js";
 import "../../hooks/useLinkComponent/index.js";
-import "../../index-TL0X3rXH.js";
+import "../../index-DCXRnuHz.js";
+import "html-react-parser";
 import "../InlineLink/index.js";
 import "../../TableWrapper-Do9KCTGV.js";
-import "../../index-C4eCcl02.js";
+import "../../index-DP6Nlg-a.js";
+import "../../index-DbG0QL9D.js";
+import "../UtilityLink/index.js";
+import "../../hooks/useImageComponent/index.js";
 import "../Image/index.js";
 const DiscoveryCardGroupGridStyled = styled(Grid).withConfig({
   displayName: "DiscoveryCardGroupGridStyled",

package/dist/components/Divider/index.js

@@ -7,7 +7,7 @@ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js"
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { j as colorBorderSubtle } from "../../BorderColor-BummoQ1-.js";
 import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const DividerLineStyled = styled.hr.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "DividerLineStyled",

package/dist/components/EnergySnippet/index.js

@@ -3,8 +3,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import Link from "../Link/index.js";
 import styled from "styled-components";
 import viewport from "../../foundations/media-query/viewport/index.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
-import { F as FlexStyled } from "../../styled-BxkvYuWW.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
+import { F as FlexStyled } from "../../styled-CUp4EbPh.js";
 import UtilityLink from "../UtilityLink/index.js";
 const letterPathMapping = {
   A: "M46.99,29.398c0.118,0.365 0.186,0.649 0.22,0.86c0.025,0.211 -0.009,0.365 -0.118,0.47c-0.11,0.106 -0.296,0.171 -0.566,0.195c-0.269,0.024 -0.64,0.04 -1.113,0.04c-0.472,0 -0.877,0 -1.147,-0.024c-0.27,-0.024 -0.489,-0.049 -0.633,-0.089c-0.143,-0.049 -0.244,-0.106 -0.303,-0.187c-0.059,-0.081 -0.11,-0.186 -0.143,-0.316l-1.257,-3.916l-7.035,-0l-1.189,3.811c-0.042,0.138 -0.092,0.259 -0.151,0.357c-0.06,0.097 -0.161,0.17 -0.304,0.227c-0.143,0.056 -0.337,0.089 -0.591,0.113c-0.253,0.016 -0.59,0.033 -1.003,0.033c-0.447,-0 -0.793,-0.017 -1.046,-0.049c-0.253,-0.033 -0.422,-0.106 -0.523,-0.219c-0.093,-0.114 -0.126,-0.276 -0.101,-0.487c0.025,-0.21 0.101,-0.494 0.219,-0.843l5.778,-17.28c0.059,-0.17 0.126,-0.308 0.202,-0.413c0.076,-0.105 0.202,-0.186 0.371,-0.243c0.169,-0.057 0.405,-0.089 0.7,-0.106c0.295,-0.016 0.692,-0.024 1.189,-0.024c0.566,0 1.021,0 1.358,0.024c0.338,0.025 0.599,0.049 0.793,0.106c0.194,0.057 0.321,0.138 0.405,0.251c0.084,0.114 0.152,0.26 0.211,0.454l5.786,17.272l-0.009,-0.017Zm-8.594,-14.287l-0.017,-0l-2.648,8.279l5.313,-0l-2.648,-8.279Z",

package/dist/components/Fieldset/index.js

@@ -8,7 +8,7 @@ import Legend from "../Legend/index.js";
 import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
 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";
 const fieldsetCssObject = {
   // Chrome gives a fieldset a min-width equal to its content, so we need to reset it here
   minWidth: "0px"

package/dist/components/FilterGroup/index.js

@@ -5,7 +5,7 @@ import Fieldset from "../Fieldset/index.js";
 import { i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import styled from "styled-components";
 import { I as IconLoader } from "../../index--RjkzZm0.js";
-import { s as screenreaderOnly } from "../../index-DCE5HNIR.js";
+import { s as screenreaderOnly } from "../../index-C2E3JrhF.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";
@@ -18,13 +18,13 @@ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
 import { b as colorBorderUnselected, i as colorBorderSelected, c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
-import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderRadiusFull } from "../../BorderRadius-2LdggXbQ.js";
 import { b as borderWidthUnselected, a as borderWidthFocus } from "../../BorderWidth-BjXpOdM5.js";
 import { d as colorObjectSelected } from "../../ObjectColor-DxgEnOBM.js";
 import { a as spacingXs, c as spacingNone, f as spacing2Xs, b as spacingSm } from "../../Spacing-8v6hcO2x.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
 import { a as colorTextNeutral, b as colorTextInverseStatic } from "../../TextColor-BXVMXUVE.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const FilterGroupStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FilterGroupStyled",

package/dist/components/Flex/index.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { F as FlexStyled } from "../../styled-BxkvYuWW.js";
-import { e, d, c, b, f, a } from "../../styled-BxkvYuWW.js";
+import { F as FlexStyled } from "../../styled-CUp4EbPh.js";
+import { i, h, g, e, d, c, b, f, a } from "../../styled-CUp4EbPh.js";
 const Flex = ({
   children,
   ...props
 }) => /* @__PURE__ */ jsx(FlexStyled, { ...props, children });
 export {
   Flex as default,
+  i as flexAlignCenter,
+  h as flexAlignEnd,
+  g as flexAlignStart,
   e as flexJustifyBetween,
   d as flexJustifyCenter,
   c as flexJustifyEnd,

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

@@ -8,7 +8,11 @@ export declare const flexJustifyStart = "start";
 export declare const flexJustifyEnd = "end";
 export declare const flexJustifyCenter = "center";
 export declare const flexJustifyBetween = "between";
-export type FlexJustifyBehavior = typeof flexJustifyStart | typeof flexJustifyEnd | typeof flexJustifyCenter | typeof flexJustifyBetween;
+export type FlexJustifyBehaviour = typeof flexJustifyStart | typeof flexJustifyEnd | typeof flexJustifyCenter | typeof flexJustifyBetween;
+export declare const flexAlignStart = "start";
+export declare const flexAlignEnd = "end";
+export declare const flexAlignCenter = "center";
+export type FlexAlignBehaviour = typeof flexAlignStart | typeof flexAlignEnd | typeof flexAlignCenter;
 export interface FlexProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     /**
@@ -16,9 +20,13 @@ export interface FlexProps extends PatternProps, HTMLAttributes<HTMLDivElement>
      */
     orientation?: FlexOrientation;
     /**
-     * Justify controls how the elements are distributed within the container.
+     * Justify controls how the elements are distributed along the primary axis (e.g. justify-content).
      */
-    justify?: FlexJustifyBehavior;
+    justify?: FlexJustifyBehaviour;
+    /**
+     * Controls how the elements are distributed along the secondary axis (e.g. align-items).
+     */
+    alignItems?: FlexAlignBehaviour;
     /**
      * Spacing between items inside of the flex container.
      */

package/dist/components/Flex/stories/alignCenterArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const alignCenterArgs: FlexProps;

package/dist/components/Flex/stories/alignEndArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const alignEndArgs: FlexProps;

package/dist/components/Flex/stories/alignStartArgs.d.ts

@@ -0,0 +1,2 @@
+import { FlexProps } from '../props';
+export declare const alignStartArgs: FlexProps;

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

@@ -1,3 +1,4 @@
-import { FlexJustifyBehavior, FlexProps } from './props';
-export declare const translateToJustifyContent: (justify: FlexJustifyBehavior | undefined) => string | undefined;
+import { FlexAlignBehaviour, FlexJustifyBehaviour, FlexProps } from './props';
+export declare const translateToJustifyContent: (justify: FlexJustifyBehaviour | undefined) => string | undefined;
+export declare const translateToAlignItems: (alignItems: FlexAlignBehaviour | undefined) => string | undefined;
 export declare const FlexStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FlexProps>> & string;

package/dist/components/FlexItem/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import { c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 import styled from "styled-components";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const flexItemFullGrow = "full";
 const flexItemAutoGrow = "auto";
 const FlexItemStyled = styled.div.withConfig({

package/dist/components/FootnoteContent/index.js

@@ -7,7 +7,7 @@ import { getBorderColor } from "../../foundations/token/getBorderColor/index.js"
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
 import { a as borderWidthFocus } from "../../BorderWidth-BjXpOdM5.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const rotate = keyframes(["0%{box-shadow:transparent 0px 0px 0px 0px;}50%{box-shadow:", " 0px 0px 2px ", ";}100%{box-shadow:transparent 0px 0px 0px 0px;}}"], getBorderColor(colorBorderFocus), getBorderWidth(borderWidthFocus));
 const FootnoteContentStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/FootnoteLink/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
-import "../../index-DCE5HNIR.js";
-import { F } from "../../index-BJHhIBYl.js";
+import "../../index-C2E3JrhF.js";
+import { F } from "../../index-BsykXBqC.js";
 export {
   F as default
 };

package/dist/components/Form/index.js

@@ -4,11 +4,11 @@ import Body from "../Body/index.js";
 import ButtonGroup from "../ButtonGroup/index.js";
 import Heading from "../Heading/index.js";
 import IconSnippet from "../IconSnippet/index.js";
-import { R as RichText } from "../../index-C4eCcl02.js";
+import { R as RichText } from "../../index-DP6Nlg-a.js";
 import { c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 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";
 const FormStyled = styled.form.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FormStyled",

package/dist/components/FormElement/index.js

@@ -5,7 +5,7 @@ import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getOpacity } from "../../foundations/token/getOpacity/index.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const FormElementStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FormElementStyled",

package/dist/components/GoogleMap/index.js

@@ -12,10 +12,10 @@ import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.j
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { j as colorBorderSubtle } from "../../BorderColor-BummoQ1-.js";
-import { b as borderRadiusMd, a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
+import { b as borderRadiusMd, c as borderRadiusNone } from "../../BorderRadius-2LdggXbQ.js";
 import { d as borderWidthSm } from "../../BorderWidth-BjXpOdM5.js";
 import { c as cornerStraight } from "../../CornerStyle-JEbGNArR.js";
-import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
+import { a as filterProps } from "../../filterProps-CxkibNnG.js";
 const MapInner = ({
   setMap,
   children

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

@@ -1,11 +1,13 @@
 import { FC } from 'react';
+import { NestedGridConfig } from '../../utils/calculateNestedGridConfig';
 import { GridConfig, GridProps, GridSpacing, GridTag } from './props';
 type GridContextType = {
     tag: GridTag;
     spacing: GridSpacing;
     autoLayout?: GridConfig;
+    nestedGridConfig?: NestedGridConfig;
 };
-export declare const GridContext: import('react').Context<GridContextType>;
+export declare const GridContext: import('react').Context<GridContextType | undefined>;
 declare const Grid: FC<GridProps>;
 export default Grid;
 export * from './props';

package/dist/components/Grid/index.js

@@ -1,94 +1,19 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { createContext } from "react";
-import { d as divTagName, u as ulTagName, o as olTagName, n as navTagName, m as mainTagName, s as sectionTagName, a as asideTagName, b as articleTagName } from "../../tags-D7CRQqc1.js";
-import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
-import { G as GridStyled } from "../../styled-BiCOjvNq.js";
-import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
-import { i as isBottomSpacing } from "../../isBottomSpacing-BxfreCZU.js";
-const gridTags = [divTagName, ulTagName, olTagName, navTagName, mainTagName, sectionTagName, asideTagName, articleTagName];
-const gridAligns = ["left", "center", "right"];
-const gridSpacings = ["None", "Md"];
-const gridColSpan = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const validateGridColSpan = (colSpan) => {
-  if (!Number.isInteger(colSpan)) {
-    return false;
-  }
-  if (!gridColSpan.includes(colSpan)) {
-    return false;
-  }
-  return true;
-};
-const validateGridConfig = (config) => {
-  if (!isObject(config)) {
-    return false;
-  }
-  const gridConfig = config;
-  if (!gridConfig.sm || false === validateGridColSpan(gridConfig.sm)) {
-    return false;
-  }
-  if (gridConfig.md && false === validateGridColSpan(gridConfig.md)) {
-    return false;
-  }
-  if (gridConfig.lg && false === validateGridColSpan(gridConfig.lg)) {
-    return false;
-  }
-  return true;
-};
-const isGridConfig = (config) => validateGridConfig(config);
-const validateGridProps = (props) => {
-  if (!isObject(props)) {
-    return false;
-  }
-  const gridProps = props;
-  if (!hasMatchingComponentName(gridProps.component, "Grid")) {
-    return false;
-  }
-  if (gridProps.align !== void 0 && !gridAligns.includes(gridProps.align)) {
-    return false;
-  }
-  if (gridProps.tag !== void 0 && !gridTags.includes(gridProps.tag)) {
-    return false;
-  }
-  if (gridProps.spacing !== void 0 && !gridSpacings.includes(gridProps.spacing)) {
-    return false;
-  }
-  if (gridProps.bottomSpacing && !isBottomSpacing(gridProps.bottomSpacing)) {
-    return false;
-  }
-  return true;
-};
-const isGridProps = (props) => {
-  return validateGridProps(props);
-};
-const GridContext = createContext({
-  tag: divTagName,
-  spacing: spacingMd,
-  autoLayout: {
-    sm: 12
-  }
-});
-const Grid = ({
-  tag = divTagName,
-  spacing = spacingMd,
-  autoLayout,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(GridContext, { value: {
-    tag,
-    spacing,
-    autoLayout
-  }, children: /* @__PURE__ */ jsx(GridStyled, { ...props, as: tag, spacing, children: props.children }) });
-};
+import "react/jsx-runtime";
+import "react";
+import "../../tags-Cwgg3Gx2.js";
+import "../../Spacing-8v6hcO2x.js";
+import { d, a, f, h, e, l, n, j, k, m } from "../../index-Bu-7sSif.js";
+import "../../styled-DdeOXNN9.js";
 export {
-  GridContext,
-  Grid as default,
-  gridAligns,
-  gridSpacings,
-  gridTags,
-  isGridConfig,
-  isGridProps,
-  validateGridColSpan,
-  validateGridConfig,
-  validateGridProps
+  d as GridContext,
+  a as default,
+  f as gridAligns,
+  h as gridSpacings,
+  e as gridTags,
+  l as isGridConfig,
+  n as isGridProps,
+  j as validateGridColSpan,
+  k as validateGridConfig,
+  m as validateGridProps
 };

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

@@ -1,5 +1,12 @@
 import { FC } from 'react';
+import { NestedGridConfig } from '../../utils/calculateNestedGridConfig';
+import { GridConfig } from '../Grid';
 import { GridItemProps } from './props';
+type GridItemContextType = {
+    gridConfig: GridConfig;
+    nestedGridConfig?: NestedGridConfig;
+};
+export declare const GridItemContext: import('react').Context<GridItemContextType>;
 declare const GridItem: FC<GridItemProps>;
 export default GridItem;
 export * from './props';