@vodafone_de/brix-components 9.0.3 → 9.0.5

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/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-KWWOgO_h.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 { 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;

package/dist/components/Calendar/index.js

@@ -759,7 +759,7 @@ const match$1 = {
     defaultParseWidth: "any"
   })
 };
-const enUS = {
+const enUS$1 = {
   code: "en-US",
   formatDistance: formatDistance$1,
   formatLong: formatLong$1,
@@ -1606,7 +1606,7 @@ const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
 function format(date, formatStr, options) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const defaultOptions2 = getDefaultOptions();
-  const locale = (options == null ? void 0 : options.locale) ?? defaultOptions2.locale ?? enUS;
+  const locale = (options == null ? void 0 : options.locale) ?? defaultOptions2.locale ?? enUS$1;
   const firstWeekContainsDate = (options == null ? void 0 : options.firstWeekContainsDate) ?? ((_b = (_a = options == null ? void 0 : options.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? defaultOptions2.firstWeekContainsDate ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.firstWeekContainsDate) ?? 1;
   const weekStartsOn = (options == null ? void 0 : options.weekStartsOn) ?? ((_f = (_e = options == null ? void 0 : options.locale) == null ? void 0 : _e.options) == null ? void 0 : _f.weekStartsOn) ?? defaultOptions2.weekStartsOn ?? ((_h = (_g = defaultOptions2.locale) == null ? void 0 : _g.options) == null ? void 0 : _h.weekStartsOn) ?? 0;
   const originalDate = toDate(date, options == null ? void 0 : options.in);
@@ -2477,6 +2477,63 @@ function endOfBroadcastWeek(date, dateLib) {
   const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
   return endDate;
 }
+const enUS = {
+  ...enUS$1,
+  labels: {
+    labelDayButton: (date, modifiers, options, dateLib) => {
+      let formatDate;
+      if (dateLib && typeof dateLib.format === "function") {
+        formatDate = dateLib.format.bind(dateLib);
+      } else {
+        formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+      }
+      let label = formatDate(date, "PPPP");
+      if (modifiers.today)
+        label = `Today, ${label}`;
+      if (modifiers.selected)
+        label = `${label}, selected`;
+      return label;
+    },
+    labelMonthDropdown: "Choose the Month",
+    labelNext: "Go to the Next Month",
+    labelPrevious: "Go to the Previous Month",
+    labelWeekNumber: (weekNumber) => `Week ${weekNumber}`,
+    labelYearDropdown: "Choose the Year",
+    labelGrid: (date, options, dateLib) => {
+      let formatDate;
+      if (dateLib && typeof dateLib.format === "function") {
+        formatDate = dateLib.format.bind(dateLib);
+      } else {
+        formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+      }
+      return formatDate(date, "LLLL yyyy");
+    },
+    labelGridcell: (date, modifiers, options, dateLib) => {
+      let formatDate;
+      if (dateLib && typeof dateLib.format === "function") {
+        formatDate = dateLib.format.bind(dateLib);
+      } else {
+        formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+      }
+      let label = formatDate(date, "PPPP");
+      if (modifiers == null ? void 0 : modifiers.today) {
+        label = `Today, ${label}`;
+      }
+      return label;
+    },
+    labelNav: "Navigation bar",
+    labelWeekNumberHeader: "Week Number",
+    labelWeekday: (date, options, dateLib) => {
+      let formatDate;
+      if (dateLib && typeof dateLib.format === "function") {
+        formatDate = dateLib.format.bind(dateLib);
+      } else {
+        formatDate = (d, pattern) => format(d, pattern, { locale: enUS$1, ...options });
+      }
+      return formatDate(date, "cccc");
+    }
+  }
+};
 class DateLib {
   /**
    * Creates an instance of `DateLib`.
@@ -3073,7 +3130,7 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
       return isSameDay2(date, matcher);
     }
     if (isDatesArray(matcher, dateLib)) {
-      return matcher.includes(date);
+      return matcher.some((matcherDate) => isSameDay2(date, matcherDate));
     }
     if (isDateRange$1(matcher)) {
       return rangeIncludesDate(matcher, date, false, dateLib);
@@ -3277,60 +3334,6 @@ function getFormatters(customFormatters) {
     ...customFormatters
   };
 }
-function getMonthOptions(displayMonth, navStart, navEnd, formatters2, dateLib) {
-  const { startOfMonth: startOfMonth2, startOfYear: startOfYear2, endOfYear: endOfYear2, eachMonthOfInterval: eachMonthOfInterval2, getMonth: getMonth2 } = dateLib;
-  const months = eachMonthOfInterval2({
-    start: startOfYear2(displayMonth),
-    end: endOfYear2(displayMonth)
-  });
-  const options = months.map((month) => {
-    const label = formatters2.formatMonthDropdown(month, dateLib);
-    const value = getMonth2(month);
-    const disabled = navStart && month < startOfMonth2(navStart) || navEnd && month > startOfMonth2(navEnd) || false;
-    return { value, label, disabled };
-  });
-  return options;
-}
-function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
-  let style = { ...styles == null ? void 0 : styles[UI.Day] };
-  Object.entries(dayModifiers).filter(([, active]) => active === true).forEach(([modifier]) => {
-    style = {
-      ...style,
-      ...modifiersStyles == null ? void 0 : modifiersStyles[modifier]
-    };
-  });
-  return style;
-}
-function getWeekdays(dateLib, ISOWeek, broadcastCalendar, today) {
-  const referenceToday = today ?? dateLib.today();
-  const start = broadcastCalendar ? dateLib.startOfBroadcastWeek(referenceToday, dateLib) : ISOWeek ? dateLib.startOfISOWeek(referenceToday) : dateLib.startOfWeek(referenceToday);
-  const days = [];
-  for (let i = 0; i < 7; i++) {
-    const day = dateLib.addDays(start, i);
-    days.push(day);
-  }
-  return days;
-}
-function getYearOptions(navStart, navEnd, formatters2, dateLib, reverse = false) {
-  if (!navStart)
-    return void 0;
-  if (!navEnd)
-    return void 0;
-  const { startOfYear: startOfYear2, endOfYear: endOfYear2, eachYearOfInterval: eachYearOfInterval2, getYear: getYear2 } = dateLib;
-  const firstNavYear = startOfYear2(navStart);
-  const lastNavYear = endOfYear2(navEnd);
-  const years = eachYearOfInterval2({ start: firstNavYear, end: lastNavYear });
-  if (reverse)
-    years.reverse();
-  return years.map((year) => {
-    const label = formatters2.formatYearDropdown(year, dateLib);
-    return {
-      value: getYear2(year),
-      label,
-      disabled: false
-    };
-  });
-}
 function labelDayButton(date, modifiers, options, dateLib) {
   let label = (dateLib ?? new DateLib(options)).format(date, "PPPP");
   if (modifiers.today)
@@ -3358,8 +3361,9 @@ function labelMonthDropdown(_options) {
 function labelNav() {
   return "";
 }
-function labelNext(_month) {
-  return "Go to the Next Month";
+const defaultLabel = "Go to the Next Month";
+function labelNext(_month, _options) {
+  return defaultLabel;
 }
 function labelPrevious(_month) {
   return "Go to the Previous Month";
@@ -3392,6 +3396,225 @@ const defaultLabels = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defin
   labelWeekday,
   labelYearDropdown
 }, Symbol.toStringTag, { value: "Module" }));
+const resolveLabel = (defaultLabel2, customLabel, localeLabel) => {
+  if (customLabel)
+    return customLabel;
+  if (localeLabel) {
+    return typeof localeLabel === "function" ? localeLabel : (..._args) => localeLabel;
+  }
+  return defaultLabel2;
+};
+function getLabels(customLabels, options) {
+  var _a;
+  const localeLabels = ((_a = options.locale) == null ? void 0 : _a.labels) ?? {};
+  return {
+    ...defaultLabels,
+    ...customLabels ?? {},
+    labelDayButton: resolveLabel(labelDayButton, customLabels == null ? void 0 : customLabels.labelDayButton, localeLabels.labelDayButton),
+    labelMonthDropdown: resolveLabel(labelMonthDropdown, customLabels == null ? void 0 : customLabels.labelMonthDropdown, localeLabels.labelMonthDropdown),
+    labelNext: resolveLabel(labelNext, customLabels == null ? void 0 : customLabels.labelNext, localeLabels.labelNext),
+    labelPrevious: resolveLabel(labelPrevious, customLabels == null ? void 0 : customLabels.labelPrevious, localeLabels.labelPrevious),
+    labelWeekNumber: resolveLabel(labelWeekNumber, customLabels == null ? void 0 : customLabels.labelWeekNumber, localeLabels.labelWeekNumber),
+    labelYearDropdown: resolveLabel(labelYearDropdown, customLabels == null ? void 0 : customLabels.labelYearDropdown, localeLabels.labelYearDropdown),
+    labelGrid: resolveLabel(labelGrid, customLabels == null ? void 0 : customLabels.labelGrid, localeLabels.labelGrid),
+    labelGridcell: resolveLabel(labelGridcell, customLabels == null ? void 0 : customLabels.labelGridcell, localeLabels.labelGridcell),
+    labelNav: resolveLabel(labelNav, customLabels == null ? void 0 : customLabels.labelNav, localeLabels.labelNav),
+    labelWeekNumberHeader: resolveLabel(labelWeekNumberHeader, customLabels == null ? void 0 : customLabels.labelWeekNumberHeader, localeLabels.labelWeekNumberHeader),
+    labelWeekday: resolveLabel(labelWeekday, customLabels == null ? void 0 : customLabels.labelWeekday, localeLabels.labelWeekday)
+  };
+}
+function getMonthOptions(displayMonth, navStart, navEnd, formatters2, dateLib) {
+  const { startOfMonth: startOfMonth2, startOfYear: startOfYear2, endOfYear: endOfYear2, eachMonthOfInterval: eachMonthOfInterval2, getMonth: getMonth2 } = dateLib;
+  const months = eachMonthOfInterval2({
+    start: startOfYear2(displayMonth),
+    end: endOfYear2(displayMonth)
+  });
+  const options = months.map((month) => {
+    const label = formatters2.formatMonthDropdown(month, dateLib);
+    const value = getMonth2(month);
+    const disabled = navStart && month < startOfMonth2(navStart) || navEnd && month > startOfMonth2(navEnd) || false;
+    return { value, label, disabled };
+  });
+  return options;
+}
+function getStyleForModifiers(dayModifiers, styles = {}, modifiersStyles = {}) {
+  let style = { ...styles == null ? void 0 : styles[UI.Day] };
+  Object.entries(dayModifiers).filter(([, active]) => active === true).forEach(([modifier]) => {
+    style = {
+      ...style,
+      ...modifiersStyles == null ? void 0 : modifiersStyles[modifier]
+    };
+  });
+  return style;
+}
+function getWeekdays(dateLib, ISOWeek, broadcastCalendar, today) {
+  const referenceToday = today ?? dateLib.today();
+  const start = broadcastCalendar ? dateLib.startOfBroadcastWeek(referenceToday, dateLib) : ISOWeek ? dateLib.startOfISOWeek(referenceToday) : dateLib.startOfWeek(referenceToday);
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = dateLib.addDays(start, i);
+    days.push(day);
+  }
+  return days;
+}
+function getYearOptions(navStart, navEnd, formatters2, dateLib, reverse = false) {
+  if (!navStart)
+    return void 0;
+  if (!navEnd)
+    return void 0;
+  const { startOfYear: startOfYear2, endOfYear: endOfYear2, eachYearOfInterval: eachYearOfInterval2, getYear: getYear2 } = dateLib;
+  const firstNavYear = startOfYear2(navStart);
+  const lastNavYear = endOfYear2(navEnd);
+  const years = eachYearOfInterval2({ start: firstNavYear, end: lastNavYear });
+  if (reverse)
+    years.reverse();
+  return years.map((year) => {
+    const label = formatters2.formatYearDropdown(year, dateLib);
+    return {
+      value: getYear2(year),
+      label,
+      disabled: false
+    };
+  });
+}
+function createNoonOverrides(timeZone, options = {}) {
+  var _a;
+  const { weekStartsOn, locale } = options;
+  const fallbackWeekStartsOn = weekStartsOn ?? ((_a = locale == null ? void 0 : locale.options) == null ? void 0 : _a.weekStartsOn) ?? 0;
+  const toNoonTZDate = (date) => {
+    const normalizedDate = typeof date === "number" || typeof date === "string" ? new Date(date) : date;
+    return new TZDate(normalizedDate.getFullYear(), normalizedDate.getMonth(), normalizedDate.getDate(), 12, 0, 0, timeZone);
+  };
+  const toCalendarDate = (date) => {
+    const zoned = toNoonTZDate(date);
+    return new Date(zoned.getFullYear(), zoned.getMonth(), zoned.getDate(), 0, 0, 0, 0);
+  };
+  return {
+    today: () => {
+      return toNoonTZDate(TZDate.tz(timeZone));
+    },
+    newDate: (year, monthIndex, date) => {
+      return new TZDate(year, monthIndex, date, 12, 0, 0, timeZone);
+    },
+    startOfDay: (date) => {
+      return toNoonTZDate(date);
+    },
+    startOfWeek: (date, options2) => {
+      const base = toNoonTZDate(date);
+      const weekStartsOnValue = (options2 == null ? void 0 : options2.weekStartsOn) ?? fallbackWeekStartsOn;
+      const diff = (base.getDay() - weekStartsOnValue + 7) % 7;
+      base.setDate(base.getDate() - diff);
+      return base;
+    },
+    startOfISOWeek: (date) => {
+      const base = toNoonTZDate(date);
+      const diff = (base.getDay() - 1 + 7) % 7;
+      base.setDate(base.getDate() - diff);
+      return base;
+    },
+    startOfMonth: (date) => {
+      const base = toNoonTZDate(date);
+      base.setDate(1);
+      return base;
+    },
+    startOfYear: (date) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(0, 1);
+      return base;
+    },
+    endOfWeek: (date, options2) => {
+      const base = toNoonTZDate(date);
+      const weekStartsOnValue = (options2 == null ? void 0 : options2.weekStartsOn) ?? fallbackWeekStartsOn;
+      const endDow = (weekStartsOnValue + 6) % 7;
+      const diff = (endDow - base.getDay() + 7) % 7;
+      base.setDate(base.getDate() + diff);
+      return base;
+    },
+    endOfISOWeek: (date) => {
+      const base = toNoonTZDate(date);
+      const diff = (7 - base.getDay()) % 7;
+      base.setDate(base.getDate() + diff);
+      return base;
+    },
+    endOfMonth: (date) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(base.getMonth() + 1, 0);
+      return base;
+    },
+    endOfYear: (date) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(11, 31);
+      return base;
+    },
+    eachMonthOfInterval: (interval) => {
+      const start = toNoonTZDate(interval.start);
+      const end = toNoonTZDate(interval.end);
+      const result = [];
+      const cursor = new TZDate(start.getFullYear(), start.getMonth(), 1, 12, 0, 0, timeZone);
+      const endKey = end.getFullYear() * 12 + end.getMonth();
+      while (cursor.getFullYear() * 12 + cursor.getMonth() <= endKey) {
+        result.push(new TZDate(cursor, timeZone));
+        cursor.setMonth(cursor.getMonth() + 1, 1);
+      }
+      return result;
+    },
+    // Normalize to noon once before arithmetic (avoid DST/midnight edge cases),
+    // mutate the same TZDate, and return it.
+    addDays: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setDate(base.getDate() + amount);
+      return base;
+    },
+    addWeeks: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setDate(base.getDate() + amount * 7);
+      return base;
+    },
+    addMonths: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setMonth(base.getMonth() + amount);
+      return base;
+    },
+    addYears: (date, amount) => {
+      const base = toNoonTZDate(date);
+      base.setFullYear(base.getFullYear() + amount);
+      return base;
+    },
+    eachYearOfInterval: (interval) => {
+      const start = toNoonTZDate(interval.start);
+      const end = toNoonTZDate(interval.end);
+      const years = [];
+      const cursor = new TZDate(start.getFullYear(), 0, 1, 12, 0, 0, timeZone);
+      while (cursor.getFullYear() <= end.getFullYear()) {
+        years.push(new TZDate(cursor, timeZone));
+        cursor.setFullYear(cursor.getFullYear() + 1, 0, 1);
+      }
+      return years;
+    },
+    getWeek: (date, options2) => {
+      var _a2;
+      const base = toCalendarDate(date);
+      return getWeek(base, {
+        weekStartsOn: (options2 == null ? void 0 : options2.weekStartsOn) ?? fallbackWeekStartsOn,
+        firstWeekContainsDate: (options2 == null ? void 0 : options2.firstWeekContainsDate) ?? ((_a2 = locale == null ? void 0 : locale.options) == null ? void 0 : _a2.firstWeekContainsDate) ?? 1
+      });
+    },
+    getISOWeek: (date) => {
+      const base = toCalendarDate(date);
+      return getISOWeek(base);
+    },
+    differenceInCalendarDays: (dateLeft, dateRight) => {
+      const left = toCalendarDate(dateLeft);
+      const right = toCalendarDate(dateRight);
+      return differenceInCalendarDays(left, right);
+    },
+    differenceInCalendarMonths: (dateLeft, dateRight) => {
+      const left = toCalendarDate(dateLeft);
+      const right = toCalendarDate(dateRight);
+      return differenceInCalendarMonths(left, right);
+    }
+  };
+}
 const asHtmlElement = (element) => {
   if (element instanceof HTMLElement)
     return element;
@@ -4119,15 +4342,18 @@ function toTimeZone(date, timeZone) {
   }
   return new TZDate(date, timeZone);
 }
-function convertMatcher(matcher, timeZone) {
+function toZoneNoon(date, timeZone, noonSafe) {
+  return toTimeZone(date, timeZone);
+}
+function convertMatcher(matcher, timeZone, noonSafe) {
   if (typeof matcher === "boolean" || typeof matcher === "function") {
     return matcher;
   }
   if (matcher instanceof Date) {
-    return toTimeZone(matcher, timeZone);
+    return toZoneNoon(matcher, timeZone);
   }
   if (Array.isArray(matcher)) {
-    return matcher.map((value) => value instanceof Date ? toTimeZone(value, timeZone) : value);
+    return matcher.map((value) => value instanceof Date ? toZoneNoon(value, timeZone) : value);
   }
   if (isDateRange$1(matcher)) {
     return {
@@ -4138,23 +4364,23 @@ function convertMatcher(matcher, timeZone) {
   }
   if (isDateInterval(matcher)) {
     return {
-      before: toTimeZone(matcher.before, timeZone),
-      after: toTimeZone(matcher.after, timeZone)
+      before: toZoneNoon(matcher.before, timeZone),
+      after: toZoneNoon(matcher.after, timeZone)
     };
   }
   if (isDateAfterType(matcher)) {
     return {
-      after: toTimeZone(matcher.after, timeZone)
+      after: toZoneNoon(matcher.after, timeZone)
     };
   }
   if (isDateBeforeType(matcher)) {
     return {
-      before: toTimeZone(matcher.before, timeZone)
+      before: toZoneNoon(matcher.before, timeZone)
     };
   }
   return matcher;
 }
-function convertMatchersToTimeZone(matchers, timeZone) {
+function convertMatchersToTimeZone(matchers, timeZone, noonSafe) {
   if (!matchers) {
     return matchers;
   }
@@ -4214,20 +4440,26 @@ function DayPicker(initialProps) {
   }
   const { components: components2, formatters: formatters2, labels, dateLib, locale, classNames } = useMemo(() => {
     const locale2 = { ...enUS, ...props.locale };
+    const weekStartsOn = props.broadcastCalendar ? 1 : props.weekStartsOn;
+    const noonOverrides = props.noonSafe && props.timeZone ? createNoonOverrides(props.timeZone, {
+      weekStartsOn,
+      locale: locale2
+    }) : void 0;
+    const overrides = props.dateLib && noonOverrides ? { ...noonOverrides, ...props.dateLib } : props.dateLib ?? noonOverrides;
     const dateLib2 = new DateLib({
       locale: locale2,
-      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+      weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens,
       timeZone: props.timeZone,
       numerals: props.numerals
-    }, props.dateLib);
+    }, overrides);
     return {
       dateLib: dateLib2,
       components: getComponents(props.components),
       formatters: getFormatters(props.formatters),
-      labels: { ...defaultLabels, ...props.labels },
+      labels: getLabels(props.labels, dateLib2.options),
       locale: locale2,
       classNames: { ...getDefaultClassNames(), ...props.classNames }
     };
@@ -4241,6 +4473,7 @@ function DayPicker(initialProps) {
     props.timeZone,
     props.numerals,
     props.dateLib,
+    props.noonSafe,
     props.components,
     props.formatters,
     props.labels,

package/dist/components/CheckboxGroup/index.js

@@ -5,7 +5,7 @@ import Checkbox from "../Checkbox/index.js";
 import Fieldset from "../Fieldset/index.js";
 import { g as spacingLg, s as spacingMd, c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 import styled from "styled-components";
-import { F as FlexStyled } from "../../styled-BxkvYuWW.js";
+import { F as FlexStyled } from "../../styled-KWWOgO_h.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";

package/dist/components/Collapsible/index.js

@@ -47,9 +47,23 @@ const CollapsibleContentStyled = styled.div.withConfig({
   displayName: "CollapsibleContentStyled",
   componentId: "sc-12wf2lg-1"
 })({
-  overflow: "hidden",
-  padding: `${getSpacing(spacingNone)} ${getBorderWidth(borderWidthFocus)}`,
-  marginLeft: `calc(${getBorderWidth(borderWidthFocus)} * -1)`
+  overflow: "hidden"
+}, ({
+  innerTopSpacing = spacingNone
+}) => {
+  return {
+    marginTop: getSpacing(innerTopSpacing)
+  };
+}, ({
+  expanded,
+  innerTopSpacing = spacingNone
+}) => {
+  return expanded ? {
+    padding: `${getBorderWidth(borderWidthFocus)}`,
+    marginLeft: `calc(${getBorderWidth(borderWidthFocus)} * -1)`,
+    marginBottom: `calc(${getBorderWidth(borderWidthFocus)} * -1)`,
+    marginTop: `calc(${getBorderWidth(borderWidthFocus)} * -1 + ${getSpacing(innerTopSpacing)})`
+  } : {};
 });
 const Collapsible = ({
   expanded,
@@ -78,7 +92,7 @@ const Collapsible = ({
       element.removeEventListener("transitionend", transitionEndHandler);
     };
   }, [ref]);
-  return /* @__PURE__ */ jsx(CollapsibleStyled, { ref, ...props, expanded, animated, children: /* @__PURE__ */ jsx(CollapsibleContentStyled, { children }) });
+  return /* @__PURE__ */ jsx(CollapsibleStyled, { ref, ...props, expanded, animated, children: /* @__PURE__ */ jsx(CollapsibleContentStyled, { expanded, innerTopSpacing: props.innerTopSpacing, children }) });
 };
 export {
   Collapsible as default

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

@@ -1,10 +1,15 @@
 import { HTMLAttributes } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
+import { Spacing } from '../../foundations/types/Spacing';
 export interface CollapsibleProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
     /**
      * indicate if it's expaned or not
      */
     expanded?: boolean;
+    /**
+     * Defines a margin at the top of the content of the Collapsible
+     */
+    innerTopSpacing?: Spacing;
     /**
      * set to false if no animation should be used
      */

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

@@ -1,3 +1,3 @@
 import { CollapsibleProps } from './props';
 export declare const CollapsibleStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CollapsibleProps>> & string;
-export declare const CollapsibleContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CollapsibleContentStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<CollapsibleProps, "expanded" | "innerTopSpacing">>> & string;

package/dist/components/ColorSwatchGroup/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import ColorSwatch, { colorSwatchSizeSmall, colorSwatchSizes } from "../ColorSwatch/index.js";
 import { s as spacingMd, f as spacing2Xs } from "../../Spacing-8v6hcO2x.js";
 import styled from "styled-components";
-import { F as FlexStyled } from "../../styled-BxkvYuWW.js";
+import { F as FlexStyled } from "../../styled-KWWOgO_h.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { c as iconSizeMd } from "../../IconSize-AJp7xdJi.js";
 import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";

package/dist/components/EnergySnippet/index.js

@@ -4,7 +4,7 @@ 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 { F as FlexStyled } from "../../styled-KWWOgO_h.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/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-KWWOgO_h.js";
+import { i, h, g, e, d, c, b, f, a } from "../../styled-KWWOgO_h.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/ImageHeader/index.js

@@ -12,7 +12,7 @@ import { s as spacingMd, b as spacingSm, e as spacingXl, a as spacingXs, f as sp
 import styled from "styled-components";
 import { B as Badge } from "../../index-j22agtAk.js";
 import ButtonGroup from "../ButtonGroup/index.js";
-import { a as flexOrientationVertical } from "../../styled-BxkvYuWW.js";
+import { a as flexOrientationVertical } from "../../styled-KWWOgO_h.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
 import ResponsiveImage from "../ResponsiveImage/index.js";

package/dist/components/MediaText/index.js

@@ -14,8 +14,8 @@ import "../../FontWeight-DEBGHbtO.js";
 import "../../HeadingSize-CfCRn3Lh.js";
 import "../../Spacing-8v6hcO2x.js";
 import "../../hooks/useViewport/index.js";
-import { M, i, a, b, m, c, v } from "../../index-ClAH0TNC.js";
-import "../../styled-BxkvYuWW.js";
+import { M, i, a, b, m, c, v } from "../../index-C0tryPFA.js";
+import "../../styled-KWWOgO_h.js";
 import "../../validate-DYmFz2FF.js";
 export {
   M as default,

package/dist/components/SuggestInput/index.js

@@ -365,11 +365,14 @@ const SuggestInput = forwardRef(({
       /* @__PURE__ */ jsx(InputStyled, { ...inputProps, ref: inputRef, onChange: (e) => handleChange(e.target.value), onClick: () => {
         if (disabled) return;
         setShowList(true);
-      }, onBlur: () => setShowList(false), role: "combobox", value: ((_a = listItems == null ? void 0 : listItems.find((listItem) => listItem.value === value)) == null ? void 0 : _a.label) || value, ...{
+      }, onBlur: (e) => {
+        var _a2;
+        (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, e);
+        setShowList(false);
+      }, role: "combobox", value: ((_a = listItems == null ? void 0 : listItems.find((listItem) => listItem.value === value)) == null ? void 0 : _a.label) || value, ...{
         "aria-expanded": showList,
         "aria-controls": "listbox",
         "aria-activedescendant": selectedOption > -1 ? `${uid}-item-${selectedOption}` : void 0,
-        "aria-live": isLoading !== void 0 ? "polite" : void 0,
         "aria-busy": isLoading ? isLoading : void 0,
         "aria-autocomplete": "list"
       }, disabled, placeholder: renderInlineRichTextFromOpenText(placeholder), id: inputId }),

package/dist/components/Tray/index.js

@@ -19,7 +19,7 @@ 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 { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
-import { a as flexOrientationVertical } from "../../styled-BxkvYuWW.js";
+import { a as flexOrientationVertical } from "../../styled-KWWOgO_h.js";
 const TrayOverlayStyled = styled("div").withConfig({
   displayName: "TrayOverlayStyled",
   componentId: "sc-os3mq3-0"

package/dist/contentful/live-preview-inspector/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import { L } from "../../mapContentToComponents-C_O2rRrX.js";
+import { L } from "../../mapContentToComponents-CL3WF8Js.js";
 export {
   L as LivePreviewInspector
 };

package/dist/contentful/live-preview-renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useContentfulLiveUpdates, ContentfulLivePreviewProvider } from "@contentful/live-preview/react";
-import { m as mapContentToComponents } from "../../mapContentToComponents-C_O2rRrX.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-CL3WF8Js.js";
 const BrixLiveRendererComponents = ({
   data
 }) => {

package/dist/contentful/renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import LivePreviewRenderer from "../live-preview-renderer/index.js";
-import { m as mapContentToComponents } from "../../mapContentToComponents-C_O2rRrX.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-CL3WF8Js.js";
 const Renderer = ({
   content,
   isDraftMode

package/dist/{index-ClAH0TNC.js → index-C0tryPFA.js}

@@ -27,7 +27,7 @@ import "./styled-7vJ7mrAA.js";
 import "./index-CEotMXpL.js";
 import { i as isObject, h as hasMatchingComponentName } from "./isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "./isBottomSpacing-BxfreCZU.js";
-import { a as flexOrientationVertical, f as flexOrientationHorizontal, b as flexJustifyStart } from "./styled-BxkvYuWW.js";
+import { a as flexOrientationVertical, f as flexOrientationHorizontal, b as flexJustifyStart } from "./styled-KWWOgO_h.js";
 const mediaTextPositionTop = "top";
 const mediaTextPositionLeft = "left";
 const mediaTextPositionRight = "right";

package/dist/index.js

@@ -26,7 +26,7 @@ import { default as default22 } from "./components/PickerGroup/index.js";
 import { default as default23, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
 import { default as default24 } from "./components/OpenTextFootnoteAdapter/index.js";
 import { default as default25, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
-import { M, i as i2, a as a4, b as b3, m, c as c3, v as v2 } from "./index-ClAH0TNC.js";
+import { M, i as i2, a as a4, b as b3, m, c as c3, v as v2 } from "./index-C0tryPFA.js";
 import { default as default26 } from "./components/LocalStyle/index.js";
 import { default as default27 } from "./components/LoadingSpinner/index.js";
 import { default as default28, linkListItemVariantHorizontal, linkListItemVariantVertical } from "./components/LinkListItem/index.js";
@@ -79,7 +79,7 @@ import { default as default71 } from "./components/Checkbox/index.js";
 import { default as default72 } from "./components/Carousel/index.js";
 import { default as default73, cardAppearances, cardTags, isCardProps, validateCardProps } from "./components/Card/index.js";
 import { default as default74 } from "./components/Calendar/index.js";
-import { default as default75, flexJustifyBehaviors, flexOrientations, isButtonGroupProps, validateButtonGroupProps } from "./components/ButtonGroup/index.js";
+import { default as default75, flexJustifyBehaviours, flexOrientations, isButtonGroupProps, validateButtonGroupProps } from "./components/ButtonGroup/index.js";
 import { B, c as c4, a as a6, b as b4, d as d3, i as i5, f as f3, v as v5, e as e3 } from "./validate-Dlzxlfzp.js";
 import { default as default76 } from "./components/Button/index.js";
 import { default as default77 } from "./components/BottomBar/index.js";
@@ -116,10 +116,10 @@ import { useForcedColors } from "./hooks/useForcedColors/index.js";
 import { useFocusWithin } from "./hooks/useFocusWithin/index.js";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import { L as L2 } from "./mapContentToComponents-C_O2rRrX.js";
+import { L as L2 } from "./mapContentToComponents-CL3WF8Js.js";
 import { a as a8, i as i7 } from "./props-DDpgcryb.js";
 import { p as p3, m as m2, q, r, s as s2, n, t as t2, x, d as d5, h as h2, c as c6, w, z, o, a as a9, b as b6, u, e as e4, i as i8, g as g2, f as f4, l, k as k2, j as j2, v as v7, y } from "./validate-DYmFz2FF.js";
-import { e as e5, d as d6, c as c7, b as b7, f as f5, a as a10 } from "./styled-BxkvYuWW.js";
+import { i as i9, h as h3, g as g3, e as e5, d as d6, c as c7, b as b7, f as f5, a as a10 } from "./styled-KWWOgO_h.js";
 import { C } from "./styled-Dq0NuP5r.js";
 export {
   default80 as Accordion,
@@ -284,9 +284,12 @@ export {
   cssReset,
   discoveryCardOrientationHorizontal,
   discoveryCardOrientationVertical,
+  i9 as flexAlignCenter,
+  h3 as flexAlignEnd,
+  g3 as flexAlignStart,
   flexItemAutoGrow,
   flexItemFullGrow,
-  flexJustifyBehaviors,
+  flexJustifyBehaviours,
   e5 as flexJustifyBetween,
   d6 as flexJustifyCenter,
   c7 as flexJustifyEnd,

package/dist/{mapContentToComponents-C_O2rRrX.js → mapContentToComponents-CL3WF8Js.js}

@@ -23,7 +23,7 @@ import ImageHeader, { isImageHeaderProps } from "./components/ImageHeader/index.
 import Link, { isLinkProps } from "./components/Link/index.js";
 import { i as isLinkAsButtonProps, L as LinkAsButton } from "./index-CEotMXpL.js";
 import LinkList, { linkListVariantRow, linkListVariantColumn } from "./components/LinkList/index.js";
-import { d as isConsentMessageProps, e as isRichTextContentfulProps, f as isYoutubeVideoProps, i as isMediaTextProps, M as MediaText } from "./index-ClAH0TNC.js";
+import { d as isConsentMessageProps, e as isRichTextContentfulProps, f as isYoutubeVideoProps, i as isMediaTextProps, M as MediaText } from "./index-C0tryPFA.js";
 import { k as isPriceProps, P as Price } from "./index-TL0X3rXH.js";
 import ResponsiveImage, { isResponsiveImageProps } from "./components/ResponsiveImage/index.js";
 import RichTextContentful from "./components/RichtTextContentful/index.js";
@@ -42,7 +42,7 @@ import "./index-BJHhIBYl.js";
 import "./NotificationErrorIcon-DMnAJgPN.js";
 import "react";
 import "./components/Collapsible/index.js";
-import "./styled-BxkvYuWW.js";
+import "./styled-KWWOgO_h.js";
 import "./components/FlexItem/index.js";
 import "./styled-Dq0NuP5r.js";
 import "./components/InlineLink/index.js";

package/dist/{styled-BxkvYuWW.js → styled-KWWOgO_h.js}

@@ -9,6 +9,9 @@ const flexJustifyStart = "start";
 const flexJustifyEnd = "end";
 const flexJustifyCenter = "center";
 const flexJustifyBetween = "between";
+const flexAlignStart = "start";
+const flexAlignEnd = "end";
+const flexAlignCenter = "center";
 const translateToJustifyContent = (justify) => {
   if (!justify) {
     return;
@@ -21,6 +24,17 @@ const translateToJustifyContent = (justify) => {
   };
   return justifyValues[justify];
 };
+const translateToAlignItems = (alignItems) => {
+  if (!alignItems) {
+    return;
+  }
+  const alignValues = {
+    [flexAlignEnd]: "flex-end",
+    [flexAlignCenter]: "center",
+    [flexAlignStart]: "flex-start"
+  };
+  return alignValues[alignItems];
+};
 const FlexStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FlexStyled",
@@ -47,6 +61,10 @@ const FlexStyled = styled.div.withConfig({
   justify = flexJustifyStart
 }) => ({
   justifyContent: translateToJustifyContent(justify)
+}), ({
+  alignItems = flexAlignStart
+}) => ({
+  alignItems: translateToAlignItems(alignItems)
 }), ({
   gapSpacing = spacingMd
 }) => {
@@ -67,5 +85,8 @@ export {
   flexJustifyEnd as c,
   flexJustifyCenter as d,
   flexJustifyBetween as e,
-  flexOrientationHorizontal as f
+  flexOrientationHorizontal as f,
+  flexAlignStart as g,
+  flexAlignEnd as h,
+  flexAlignCenter as i
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "9.0.3",
+  "version": "9.0.5",
   "exports": {
     "./package.json": "./package.json",
     ".": {