@vodafone_de/brix-components 7.0.10 → 7.0.11

package/dist/components/IconLoader/index.js

@@ -648,6 +648,7 @@ const IconLoader = ({
   ...props
 }) => {
   const MappedIcon = mapNameToInlineIcons[name];
+  if (!MappedIcon) return null;
   return /* @__PURE__ */ jsx(MappedIcon, { ...props, className });
 };
 export {

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { TabGroupProps } from './props';
+declare const TabGroup: FC<TabGroupProps>;
+export default TabGroup;
+export * from './props';
+export * from './styled';

package/dist/components/TabGroup/index.js

@@ -0,0 +1,314 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import IconLoader from "../IconLoader/index.js";
+import { b as iconSizeSm } from "../../styled-DPHfwWsx.js";
+import styled from "styled-components";
+import Container from "../Container/index.js";
+import Flex from "../Flex/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
+import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-e0N9tdDR.js";
+import { j as colorBorderSubtle, c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
+import { d as borderRadiusSm } from "../../BorderRadius-ClUShVLu.js";
+import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
+import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
+import { c as colorObjectBrand } from "../../ObjectColor-BZDBuV8H.js";
+import { c as spacingSm, a as spacingXs, e as spacing2Xs } from "../../Spacing-D0HQH9YJ.js";
+import { a as filterProps } from "../../filterProps-CBnuV0LI.js";
+import { d as flexJustifyCenter } from "../../styled-CPUu8mvT.js";
+const tabOrientationHorizontal = "horizontal";
+const tabOrientationVertical = "vertical";
+const tabGroupWidthFull = "full";
+const tabGroupWidthAuto = "auto";
+const TabGroupTabsScrollableContainerStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "TabGroupTabsScrollableContainerStyled",
+  componentId: "sc-qawwg-0"
+})(({
+  width
+}) => ({
+  width: width || "100%",
+  position: "relative",
+  ...width === "auto" && {
+    overflowX: "auto",
+    /* Firefox */
+    scrollbarWidth: "none",
+    /* IE and Edge */
+    msOverflowStyle: "none",
+    /* Webkit (Chrome, Safari, Opera) */
+    "::-webkit-scrollbar": {
+      display: "none"
+    }
+  }
+}));
+const TabGroupTabsStyled = styled(Flex).withConfig({
+  displayName: "TabGroupTabsStyled",
+  componentId: "sc-qawwg-1"
+})({
+  display: "flex",
+  gap: 0,
+  width: "fit-content",
+  borderBottom: `${getBorderWidth("Divider")} solid ${getBorderColor(colorBorderSubtle)}`,
+  ...forcedColors({
+    borderBottom: `${getBorderWidth("Divider")} solid CanvasText`
+  })
+});
+const TabStyled = styled.button.withConfig({
+  shouldForwardProp: filterProps(["tabOrientation", "width"]),
+  displayName: "TabStyled",
+  componentId: "sc-qawwg-2"
+})({
+  background: "none",
+  border: "none",
+  color: "inherit",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  whiteSpace: "nowrap",
+  padding: getSpacing(spacingSm),
+  borderRadius: getBorderRadius(borderRadiusSm),
+  justifyContent: flexJustifyCenter,
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: `inset 0px 0px 0px 4px ${getBorderColor(colorBorderFocus)} `,
+    borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`,
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid ${getBorderColor(colorBorderFocus)}`,
+      outlineOffset: "-6px",
+      borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`
+    })
+  },
+  "&:hover": {
+    background: getHoverColor(colorBackgroundNeutral),
+    ...forcedColors({
+      background: "transparent"
+    })
+  }
+}, ({
+  tabOrientation
+}) => ({
+  flexDirection: tabOrientation === tabOrientationVertical ? "column" : "row",
+  gap: tabOrientation === tabOrientationVertical ? getSpacing(spacingXs) : getSpacing(spacing2Xs)
+}), ({
+  width
+}) => ({
+  ...width === "full" && {
+    flex: 1
+  }
+}));
+const TabLabelStyled = styled.span.withConfig({
+  displayName: "TabLabelStyled",
+  componentId: "sc-qawwg-3"
+})({
+  '[aria-selected="true"] &': {
+    fontWeight: getFontWeight(fontWeightBold)
+  }
+});
+const TabGroupIndicatorStyled = styled.div.withConfig({
+  displayName: "TabGroupIndicatorStyled",
+  componentId: "sc-qawwg-4"
+})({
+  position: "absolute",
+  bottom: "1px",
+  width: "50px",
+  height: "4px",
+  borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`,
+  background: getObjectColor(colorObjectBrand),
+  transition: "all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+  ...forcedColors({
+    background: "SelectedItem"
+  })
+});
+const PanelStyled = styled(Container).withConfig({
+  displayName: "PanelStyled",
+  componentId: "sc-qawwg-5"
+})({
+  "&:focus-visible": {
+    outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
+    borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`,
+    ...forcedColors({
+      outline: "4px solid CanvasText"
+    })
+  }
+});
+const TabGroup = ({
+  tabs,
+  tabOrientation = tabOrientationHorizontal,
+  value,
+  width = tabGroupWidthFull,
+  "aria-label": ariaLabel,
+  onTabChange
+}) => {
+  if (!(tabs == null ? void 0 : tabs.length)) return null;
+  const getValueFromUrl = () => {
+    if (typeof window === "undefined") return null;
+    const hash = window.location.hash;
+    if (!hash.startsWith("#tab-")) return null;
+    const tabValueFromHash = hash.replace("#tab-", "");
+    return tabs.some((tab) => tab.value === tabValueFromHash) ? tabValueFromHash : null;
+  };
+  const [activeTab, setActiveTab] = useState(() => {
+    return value || tabs[0].value || "";
+  });
+  const [indicatorStyle, setIndicatorStyle] = useState({
+    left: 0,
+    width: 0
+  });
+  const tabRefs = useRef({});
+  const tabsContainerRef = useRef(null);
+  useEffect(() => {
+    const handleHashChange = () => {
+      const valueFromUrl = getValueFromUrl();
+      if (valueFromUrl) {
+        setActiveTab(valueFromUrl);
+        onTabChange == null ? void 0 : onTabChange(valueFromUrl);
+      }
+    };
+    window.addEventListener("hashchange", handleHashChange);
+    handleHashChange();
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [tabs]);
+  useEffect(() => {
+    const valueFromUrl = getValueFromUrl();
+    if (value !== void 0 && value !== activeTab && !valueFromUrl) {
+      setActiveTab(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    const valueFromUrl = getValueFromUrl();
+    if (valueFromUrl) {
+      setActiveTab(valueFromUrl);
+      onTabChange == null ? void 0 : onTabChange(valueFromUrl);
+    }
+  }, []);
+  useEffect(() => {
+    const activeEl = tabRefs.current[activeTab];
+    if (!activeEl) return;
+    const updateIndicator = () => {
+      setIndicatorStyle({
+        left: activeEl.offsetLeft,
+        width: activeEl.offsetWidth
+      });
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      updateIndicator();
+    });
+    resizeObserver.observe(activeEl);
+    requestAnimationFrame(() => {
+      updateIndicator();
+    });
+    window.addEventListener("resize", updateIndicator);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateIndicator);
+    };
+  }, [activeTab, tabs]);
+  useEffect(() => {
+    if (width !== "auto") return;
+    const activeEl = tabRefs.current[activeTab];
+    if (activeEl) {
+      requestAnimationFrame(() => {
+        scrollTabIntoView(activeEl);
+      });
+    }
+  }, [activeTab, width]);
+  const scrollTabIntoView = (tabEl) => {
+    if (width !== "auto") return;
+    const containerEl = tabsContainerRef.current;
+    if (!containerEl) return;
+    const tabLeft = tabEl.offsetLeft;
+    const tabRight = tabLeft + tabEl.offsetWidth;
+    const containerScrollLeft = containerEl.scrollLeft;
+    const containerWidth = containerEl.offsetWidth;
+    if (tabLeft < containerScrollLeft) {
+      containerEl.scrollTo({
+        left: tabLeft,
+        behavior: "smooth"
+      });
+    } else if (tabRight > containerScrollLeft + containerWidth) {
+      containerEl.scrollTo({
+        left: tabRight - containerWidth,
+        behavior: "smooth"
+      });
+    }
+  };
+  const clearHash = () => {
+    if (typeof window === "undefined") return;
+    const currentHash = window.location.hash.replace("#", "");
+    if (currentHash.startsWith("tab-")) {
+      history.replaceState(null, "", window.location.pathname + window.location.search);
+    }
+  };
+  const handleTabClick = (newValue) => {
+    if (newValue !== activeTab) {
+      setActiveTab(newValue);
+      onTabChange == null ? void 0 : onTabChange(newValue);
+    }
+    clearHash();
+    const tabEl = tabRefs.current[newValue];
+    if (tabEl) scrollTabIntoView(tabEl);
+  };
+  const handleKeyDown = (e, index) => {
+    const lastIndex = tabs.length - 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      const isRight = e.key === "ArrowRight";
+      const newIndex = isRight ? index === lastIndex ? 0 : index + 1 : index === 0 ? lastIndex : index - 1;
+      const newTabValue = tabs[newIndex].value;
+      e.preventDefault();
+      const newTabEl = tabRefs.current[newTabValue];
+      if (newTabEl) {
+        newTabEl.focus();
+        scrollTabIntoView(newTabEl);
+      }
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const newTabValue = tabs[index].value;
+      setActiveTab(newTabValue);
+      onTabChange == null ? void 0 : onTabChange(newTabValue);
+      clearHash();
+    }
+  };
+  const getTabs = tabs.map((tab, tabIndex) => {
+    const tabValue = tab.value;
+    const isActive = tabValue === activeTab;
+    return /* @__PURE__ */ jsxs(TabStyled, { tabOrientation, width, type: "button", ref: (el) => {
+      tabRefs.current[tabValue] = el;
+    }, onClick: () => handleTabClick(tabValue), "aria-selected": isActive, tabIndex: isActive ? 0 : -1, role: "tab", id: `tab-${tabValue}`, "aria-controls": `tabpanel-${tabValue}`, onKeyDown: (e) => handleKeyDown(e, tabIndex), children: [
+      tab.icon ? /* @__PURE__ */ jsx(IconLoader, { name: tab.icon, size: iconSizeSm }) : null,
+      /* @__PURE__ */ jsx(TabLabelStyled, { children: tab.label })
+    ] }, `tab-${tabIndex}`);
+  });
+  const getPanels = tabs.map((tab, tabIndex) => {
+    const tabValue = tab.value;
+    const isActive = tabValue === activeTab;
+    return /* @__PURE__ */ jsx(PanelStyled, { role: "tabpanel", id: `tabpanel-${tabValue}`, "aria-labelledby": `tab-${tabValue}`, hidden: !isActive, tabIndex: 0, children: tab.panelContent }, `tabpanel-${tabIndex}`);
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(TabGroupTabsScrollableContainerStyled, { width, ref: tabsContainerRef, children: [
+      /* @__PURE__ */ jsx(TabGroupTabsStyled, { "aria-label": ariaLabel, role: "tablist", children: getTabs }),
+      /* @__PURE__ */ jsx(TabGroupIndicatorStyled, { style: indicatorStyle })
+    ] }),
+    getPanels
+  ] });
+};
+export {
+  PanelStyled,
+  TabGroupIndicatorStyled,
+  TabGroupTabsScrollableContainerStyled,
+  TabGroupTabsStyled,
+  TabLabelStyled,
+  TabStyled,
+  TabGroup as default,
+  tabGroupWidthAuto,
+  tabGroupWidthFull,
+  tabOrientationHorizontal,
+  tabOrientationVertical
+};

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

@@ -0,0 +1,53 @@
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { PatternProps } from '../../foundations/PatternProps';
+export declare const tabOrientationHorizontal = "horizontal";
+export declare const tabOrientationVertical = "vertical";
+export declare const tabGroupWidthFull = "full";
+export declare const tabGroupWidthAuto = "auto";
+export type TabOrientation = typeof tabOrientationHorizontal | typeof tabOrientationVertical;
+export type TabGroupWidth = typeof tabGroupWidthFull | typeof tabGroupWidthAuto;
+export interface TabProps extends ButtonHTMLAttributes<HTMLInputElement> {
+    /**
+     * Specify a system icon to be displayed to the left of the label.
+     */
+    icon?: IconName;
+    /**
+     * Label for the tab
+     */
+    label: string;
+    /**
+     * Unique tab value
+     */
+    value?: string;
+    /**
+     * Content of the tab
+     */
+    panelContent: ReactNode;
+}
+export interface TabGroupProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Pin component's name from string to the concrete name
+     */
+    component?: 'TabGroup';
+    /**
+     * List of tabs
+     */
+    tabs: TabProps[];
+    /**
+     * TabGroup tabs orientation, can be horizontal or vertical
+     */
+    tabOrientation?: TabOrientation;
+    /**
+     * TabGroup width, when it's Auto, the TabGroup is scrollable horizontally
+     */
+    width?: TabGroupWidth;
+    /**
+     * Controlled value of the selected tab
+     */
+    value: string;
+    /**
+     * Callback when a tab is selected
+     */
+    onTabChange?: (value: string) => void;
+}

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

@@ -0,0 +1,7 @@
+import { TabGroupProps } from './props';
+export declare const TabGroupTabsScrollableContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<TabGroupProps, "width">>> & string;
+export declare const TabGroupTabsStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Flex').FlexProps, never>> & string & Omit<import('react').FC<import('../Flex').FlexProps>, keyof import('react').Component<any, {}, any>>;
+export declare const TabStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<TabGroupProps, "width" | "tabOrientation">>> & string;
+export declare const TabLabelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TabGroupIndicatorStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PanelStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Container').ContainerProps, never>> & string & Omit<import('react').FC<import('../Container').ContainerProps>, keyof import('react').Component<any, {}, any>>;

package/dist/index.d.ts

@@ -10,6 +10,8 @@ export * from './components/TextList';
 export { default as TextList } from './components/TextList';
 export * from './components/TabularPrice';
 export { default as TabularPrice } from './components/TabularPrice';
+export * from './components/TabGroup';
+export { default as TabGroup } from './components/TabGroup';
 export * from './components/Switch';
 export { default as Switch } from './components/Switch';
 export * from './components/SuggestInput';

package/dist/index.js

@@ -4,76 +4,77 @@ import { default as default4 } from "./components/TimeInput/index.js";
 import { default as default5 } from "./components/Textarea/index.js";
 import { R, T, a } from "./index-9io8adeQ.js";
 import { P, T as T2, c, g, f, p, a as a2, e, d, b } from "./index-TImInHXt.js";
-import { default as default6 } from "./components/Switch/index.js";
-import { default as default7 } from "./components/SuggestInput/index.js";
-import { default as default8 } from "./components/Stepper/index.js";
-import { default as default9 } from "./components/SelectInput/index.js";
-import { default as default10 } from "./components/SearchInput/index.js";
+import { PanelStyled, default as default6, TabGroupIndicatorStyled, TabGroupTabsScrollableContainerStyled, TabGroupTabsStyled, TabLabelStyled, TabStyled, tabGroupWidthAuto, tabGroupWidthFull, tabOrientationHorizontal, tabOrientationVertical } from "./components/TabGroup/index.js";
+import { default as default7 } from "./components/Switch/index.js";
+import { default as default8 } from "./components/SuggestInput/index.js";
+import { default as default9 } from "./components/Stepper/index.js";
+import { default as default10 } from "./components/SelectInput/index.js";
+import { default as default11 } from "./components/SearchInput/index.js";
 import { S } from "./index-GwyCjtti.js";
-import { default as default11 } from "./components/ResponsiveImage/index.js";
-import { HiddenRadioStyled, default as default12, StarLabelStyled, StarsWrapperStyled } from "./components/Rating/index.js";
-import { default as default13 } from "./components/RadioGroup/index.js";
-import { default as default14 } from "./components/ProductCard/index.js";
-import { default as default15 } from "./components/PickerGroup/index.js";
-import { default as default16, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
-import { default as default17, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
-import { default as default18, mediaTextPositionLeft, mediaTextPositionRight, mediaTextPositionTop } from "./components/MediaText/index.js";
-import { default as default19 } from "./components/LoadingSpinner/index.js";
-import { default as default20, linkListItemVariantHorizontal, linkListItemVariantVertical } from "./components/LinkListItem/index.js";
-import { default as default21, linkListVariantColumn, linkListVariantRow } from "./components/LinkList/index.js";
+import { default as default12 } from "./components/ResponsiveImage/index.js";
+import { HiddenRadioStyled, default as default13, StarLabelStyled, StarsWrapperStyled } from "./components/Rating/index.js";
+import { default as default14 } from "./components/RadioGroup/index.js";
+import { default as default15 } from "./components/ProductCard/index.js";
+import { default as default16 } from "./components/PickerGroup/index.js";
+import { default as default17, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
+import { default as default18, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
+import { default as default19, mediaTextPositionLeft, mediaTextPositionRight, mediaTextPositionTop } from "./components/MediaText/index.js";
+import { default as default20 } from "./components/LoadingSpinner/index.js";
+import { default as default21, linkListItemVariantHorizontal, linkListItemVariantVertical } from "./components/LinkListItem/index.js";
+import { default as default22, linkListVariantColumn, linkListVariantRow } from "./components/LinkList/index.js";
 import { L } from "./index-Cqh8IRpl.js";
-import { default as default22 } from "./components/Link/index.js";
-import { default as default23 } from "./components/Legend/index.js";
-import { default as default24 } from "./components/Label/index.js";
-import { default as default25 } from "./components/Input/index.js";
-import { default as default26 } from "./components/InlineLink/index.js";
-import { default as default27 } from "./components/InlineIcon/index.js";
-import { default as default28, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
-import { default as default29, aspectRatio16_9, aspectRatio1_1, aspectRatio21_9, aspectRatio32_9, aspectRatio3_4, aspectRatio48_9, horizontalAlignmentCenter, horizontalAlignmentLeft, horizontalAlignmentRight, objectFitContain, objectFitCover, objectFitNone, objectPositionCenter, objectPositionLeftBottom, objectPositionLeftCenter, objectPositionLeftTop, objectPositionRightBottom, objectPositionRightCenter, objectPositionRightTop } from "./components/Image/index.js";
-import { default as default30 } from "./components/IconSnippetList/index.js";
-import { default as default31, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
-import { default as default32 } from "./components/IconLoader/index.js";
-import { default as default33, iconButtonShapeCircle, iconButtonShapeSquare } from "./components/IconButton/index.js";
-import { default as default34, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from "./components/Icon/index.js";
-import { default as default35 } from "./components/HifiIcon/index.js";
-import { default as default36, headingAlignCenter, headingAlignLeft } from "./components/Heading/index.js";
-import { default as default37 } from "./components/GridItem/index.js";
-import { default as default38 } from "./components/Grid/index.js";
-import { default as default39 } from "./components/GoogleMap/index.js";
-import { default as default40, inputStatusIcons } from "./components/FormHelperStatusIcon/index.js";
-import { default as default41 } from "./components/FormHelperMessage/index.js";
-import { default as default42 } from "./components/FormHelperLabel/index.js";
-import { default as default43 } from "./components/FormElement/index.js";
-import { default as default44 } from "./components/Form/index.js";
-import { default as default45 } from "./components/FootnoteLink/index.js";
-import { default as default46 } from "./components/FootnoteContent/index.js";
-import { default as default47, flexItemAutoGrow, flexItemFullGrow } from "./components/FlexItem/index.js";
-import { default as default48 } from "./components/Flex/index.js";
-import { default as default49 } from "./components/FilterGroup/index.js";
-import { default as default50 } from "./components/Fieldset/index.js";
-import { default as default51 } from "./components/Divider/index.js";
-import { default as default52 } from "./components/DiscoveryCardGroup/index.js";
-import { default as default53, discoveryCardOrientationHorizontal, discoveryCardOrientationVertical } from "./components/DiscoveryCard/index.js";
-import { default as default54 } from "./components/Dialog/index.js";
-import { default as default55 } from "./components/DemoBox/index.js";
-import { default as default56 } from "./components/DateInput/index.js";
-import { default as default57, ContainerAppearanceColor } from "./components/Container/index.js";
-import { default as default58 } from "./components/ConsentMessage/index.js";
-import { default as default59 } from "./components/ColorSwatchGroup/index.js";
-import { default as default60, colorSwatchSizeMedium, colorSwatchSizeSmall } from "./components/ColorSwatch/index.js";
-import { default as default61 } from "./components/Collapsible/index.js";
-import { default as default62 } from "./components/CheckboxGroup/index.js";
-import { default as default63 } from "./components/Checkbox/index.js";
-import { default as default64 } from "./components/Carousel/index.js";
-import { default as default65 } from "./components/Card/index.js";
-import { default as default66 } from "./components/ButtonGroup/index.js";
+import { default as default23 } from "./components/Link/index.js";
+import { default as default24 } from "./components/Legend/index.js";
+import { default as default25 } from "./components/Label/index.js";
+import { default as default26 } from "./components/Input/index.js";
+import { default as default27 } from "./components/InlineLink/index.js";
+import { default as default28 } from "./components/InlineIcon/index.js";
+import { default as default29, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
+import { default as default30, aspectRatio16_9, aspectRatio1_1, aspectRatio21_9, aspectRatio32_9, aspectRatio3_4, aspectRatio48_9, horizontalAlignmentCenter, horizontalAlignmentLeft, horizontalAlignmentRight, objectFitContain, objectFitCover, objectFitNone, objectPositionCenter, objectPositionLeftBottom, objectPositionLeftCenter, objectPositionLeftTop, objectPositionRightBottom, objectPositionRightCenter, objectPositionRightTop } from "./components/Image/index.js";
+import { default as default31 } from "./components/IconSnippetList/index.js";
+import { default as default32, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
+import { default as default33 } from "./components/IconLoader/index.js";
+import { default as default34, iconButtonShapeCircle, iconButtonShapeSquare } from "./components/IconButton/index.js";
+import { default as default35, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from "./components/Icon/index.js";
+import { default as default36 } from "./components/HifiIcon/index.js";
+import { default as default37, headingAlignCenter, headingAlignLeft } from "./components/Heading/index.js";
+import { default as default38 } from "./components/GridItem/index.js";
+import { default as default39 } from "./components/Grid/index.js";
+import { default as default40 } from "./components/GoogleMap/index.js";
+import { default as default41, inputStatusIcons } from "./components/FormHelperStatusIcon/index.js";
+import { default as default42 } from "./components/FormHelperMessage/index.js";
+import { default as default43 } from "./components/FormHelperLabel/index.js";
+import { default as default44 } from "./components/FormElement/index.js";
+import { default as default45 } from "./components/Form/index.js";
+import { default as default46 } from "./components/FootnoteLink/index.js";
+import { default as default47 } from "./components/FootnoteContent/index.js";
+import { default as default48, flexItemAutoGrow, flexItemFullGrow } from "./components/FlexItem/index.js";
+import { default as default49 } from "./components/Flex/index.js";
+import { default as default50 } from "./components/FilterGroup/index.js";
+import { default as default51 } from "./components/Fieldset/index.js";
+import { default as default52 } from "./components/Divider/index.js";
+import { default as default53 } from "./components/DiscoveryCardGroup/index.js";
+import { default as default54, discoveryCardOrientationHorizontal, discoveryCardOrientationVertical } from "./components/DiscoveryCard/index.js";
+import { default as default55 } from "./components/Dialog/index.js";
+import { default as default56 } from "./components/DemoBox/index.js";
+import { default as default57 } from "./components/DateInput/index.js";
+import { default as default58, ContainerAppearanceColor } from "./components/Container/index.js";
+import { default as default59 } from "./components/ConsentMessage/index.js";
+import { default as default60 } from "./components/ColorSwatchGroup/index.js";
+import { default as default61, colorSwatchSizeMedium, colorSwatchSizeSmall } from "./components/ColorSwatch/index.js";
+import { default as default62 } from "./components/Collapsible/index.js";
+import { default as default63 } from "./components/CheckboxGroup/index.js";
+import { default as default64 } from "./components/Checkbox/index.js";
+import { default as default65 } from "./components/Carousel/index.js";
+import { default as default66 } from "./components/Card/index.js";
+import { default as default67 } from "./components/ButtonGroup/index.js";
 import { B } from "./index-hNV7tcRV.js";
-import { default as default67, buttonAutoWidth, buttonFullWidth } from "./components/Button/index.js";
-import { default as default68 } from "./components/BottomBar/index.js";
-import { default as default69, bodyAlignCenter, bodyAlignLeft, bodyAlignRight } from "./components/Body/index.js";
+import { default as default68, buttonAutoWidth, buttonFullWidth } from "./components/Button/index.js";
+import { default as default69 } from "./components/BottomBar/index.js";
+import { default as default70, bodyAlignCenter, bodyAlignLeft, bodyAlignRight } from "./components/Body/index.js";
 import { B as B2, a as a3 } from "./index-BdPmdY9v.js";
-import { default as default70 } from "./components/AccordionGroup/index.js";
-import { default as default71, accordionToggleCollapsed, accordionToggleCollapsing, accordionToggleExpanded } from "./components/Accordion/index.js";
+import { default as default71 } from "./components/AccordionGroup/index.js";
+import { default as default72, accordionToggleCollapsed, accordionToggleCollapsing, accordionToggleExpanded } from "./components/Accordion/index.js";
 import { getTextDecoration } from "./foundations/token/getTextDecoration/index.js";
 import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
@@ -106,89 +107,96 @@ import { I, m as m2, f as f2, i as i2, g as g2, h, j, d as d2, c as c2, b as b2,
 import { e as e3, d as d3, c as c3, b as b3, f as f3, a as a6 } from "./styled-CPUu8mvT.js";
 import { C } from "./styled-DINwm57V.js";
 export {
-  default71 as Accordion,
-  default70 as AccordionGroup,
+  default72 as Accordion,
+  default71 as AccordionGroup,
   B2 as Badge,
   a3 as BadgeAppearanceColor,
-  default69 as Body,
-  default68 as BottomBar,
-  default67 as Button,
+  default70 as Body,
+  default69 as BottomBar,
+  default68 as Button,
   B as ButtonAsLink,
-  default66 as ButtonGroup,
-  default65 as Card,
+  default67 as ButtonGroup,
+  default66 as Card,
   C as CardAppearanceColor,
-  default64 as Carousel,
-  default63 as Checkbox,
-  default62 as CheckboxGroup,
-  default61 as Collapsible,
-  default60 as ColorSwatch,
-  default59 as ColorSwatchGroup,
-  default58 as ConsentMessage,
-  default57 as Container,
+  default65 as Carousel,
+  default64 as Checkbox,
+  default63 as CheckboxGroup,
+  default62 as Collapsible,
+  default61 as ColorSwatch,
+  default60 as ColorSwatchGroup,
+  default59 as ConsentMessage,
+  default58 as Container,
   ContainerAppearanceColor,
-  default56 as DateInput,
+  default57 as DateInput,
   DefaultLinkComponent,
-  default55 as DemoBox,
-  default54 as Dialog,
-  default53 as DiscoveryCard,
-  default52 as DiscoveryCardGroup,
-  default51 as Divider,
-  default50 as Fieldset,
-  default49 as FilterGroup,
-  default48 as Flex,
-  default47 as FlexItem,
-  default46 as FootnoteContent,
-  default45 as FootnoteLink,
-  default44 as Form,
-  default43 as FormElement,
-  default42 as FormHelperLabel,
-  default41 as FormHelperMessage,
-  default40 as FormHelperStatusIcon,
+  default56 as DemoBox,
+  default55 as Dialog,
+  default54 as DiscoveryCard,
+  default53 as DiscoveryCardGroup,
+  default52 as Divider,
+  default51 as Fieldset,
+  default50 as FilterGroup,
+  default49 as Flex,
+  default48 as FlexItem,
+  default47 as FootnoteContent,
+  default46 as FootnoteLink,
+  default45 as Form,
+  default44 as FormElement,
+  default43 as FormHelperLabel,
+  default42 as FormHelperMessage,
+  default41 as FormHelperStatusIcon,
   GlobalStyle,
-  default39 as GoogleMap,
-  default38 as Grid,
-  default37 as GridItem,
-  default36 as Heading,
+  default40 as GoogleMap,
+  default39 as Grid,
+  default38 as GridItem,
+  default37 as Heading,
   HiddenRadioStyled,
-  default35 as HifiIcon,
-  default34 as Icon,
-  default33 as IconButton,
-  default32 as IconLoader,
-  default31 as IconSnippet,
-  default30 as IconSnippetList,
+  default36 as HifiIcon,
+  default35 as Icon,
+  default34 as IconButton,
+  default33 as IconLoader,
+  default32 as IconSnippet,
+  default31 as IconSnippetList,
   I as IconWithAccent,
-  default29 as Image,
-  default28 as ImageHeader,
-  default27 as InlineIcon,
+  default30 as Image,
+  default29 as ImageHeader,
+  default28 as InlineIcon,
   m2 as InlineIconStyled,
-  default26 as InlineLink,
-  default25 as Input,
-  default24 as Label,
-  default23 as Legend,
-  default22 as Link,
+  default27 as InlineLink,
+  default26 as Input,
+  default25 as Label,
+  default24 as Legend,
+  default23 as Link,
   L as LinkAsButton,
   LinkContext,
-  default21 as LinkList,
-  default20 as LinkListItem,
-  default19 as LoadingSpinner,
-  default18 as MediaText,
-  default17 as Notification,
-  default16 as Overlay,
-  default15 as PickerGroup,
+  default22 as LinkList,
+  default21 as LinkListItem,
+  default20 as LoadingSpinner,
+  default19 as MediaText,
+  default18 as Notification,
+  default17 as Overlay,
+  PanelStyled,
+  default16 as PickerGroup,
   P as Price,
-  default14 as ProductCard,
-  default13 as RadioGroup,
-  default12 as Rating,
-  default11 as ResponsiveImage,
+  default15 as ProductCard,
+  default14 as RadioGroup,
+  default13 as Rating,
+  default12 as ResponsiveImage,
   R as RichText,
   S as ScreenreaderOnly,
-  default10 as SearchInput,
-  default9 as SelectInput,
+  default11 as SearchInput,
+  default10 as SelectInput,
   StarLabelStyled,
   StarsWrapperStyled,
-  default8 as Stepper,
-  default7 as SuggestInput,
-  default6 as Switch,
+  default9 as Stepper,
+  default8 as SuggestInput,
+  default7 as Switch,
+  default6 as TabGroup,
+  TabGroupIndicatorStyled,
+  TabGroupTabsScrollableContainerStyled,
+  TabGroupTabsStyled,
+  TabLabelStyled,
+  TabStyled,
   T2 as TabularPrice,
   T as TextList,
   a as TextListItem,
@@ -317,6 +325,10 @@ export {
   d as priceSizeMd,
   b as priceSizeSm,
   reducedMotionQuery,
+  tabGroupWidthAuto,
+  tabGroupWidthFull,
+  tabOrientationHorizontal,
+  tabOrientationVertical,
   useFocusWithin,
   useForcedColors,
   useLinkComponent,

package/package.json

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