@vodafone_de/brix-components 7.1.9 → 7.1.10

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

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

package/dist/{HeadingSize-CfCRn3Lh.js → HeadingSize-CqqUYZWV.js}

@@ -4,9 +4,9 @@ const textHeadingMd = "md";
 const textHeadingSm = "sm";
 const textHeadingXs = "xs";
 export {
-  textHeadingMd as a,
+  textHeadingXs as a,
   textHeadingSm as b,
   textHeadingLg as c,
   textHeadingXl as d,
-  textHeadingXs as t
+  textHeadingMd as t
 };

package/dist/{TableHead-Cfn2iQRg.js → TableHead-C2zQ4jce.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import styled from "styled-components";
-import viewport from "./foundations/media-query/viewport/index.js";
+import { v as viewport } from "./index-Ck2bCrhT.js";
 import { getBorderColor } from "./foundations/token/getBorderColor/index.js";
 import { getFontWeight } from "./foundations/token/getFontWeight/index.js";
 import { getSpacing } from "./foundations/token/getSpacing/index.js";
@@ -20,6 +20,9 @@ const TableStyled = styled.table.withConfig({
   displayName: "TableStyled",
   componentId: "sc-wxnzfr-1"
 })({
+  all: "unset",
+  // Reset all inherited styles
+  display: "table",
   width: "100%",
   overflow: "auto"
 });
@@ -27,13 +30,33 @@ const cellAlign = {
   left: "left",
   right: "right"
 };
+const TableHeadStyled = styled.thead.withConfig({
+  displayName: "TableHeadStyled",
+  componentId: "sc-wxnzfr-2"
+})({
+  all: "unset",
+  // Reset all inherited styles for thead
+  display: "table-header-group"
+});
+const TableRowStyled = styled.tr.withConfig({
+  displayName: "TableRowStyled",
+  componentId: "sc-wxnzfr-3"
+})({
+  all: "unset",
+  // Reset all inherited styles for tr
+  display: "table-row"
+});
 const TableCellStyled = styled.td.withConfig({
   displayName: "TableCellStyled",
-  componentId: "sc-wxnzfr-2"
+  componentId: "sc-wxnzfr-4"
 })(({
   align,
   as
 }) => ({
+  all: "unset",
+  // Reset all inherited styles for cell
+  display: "table-cell",
+  boxSizing: "border-box",
   padding: `${getSpacing(spacingSm)}`,
   textAlign: cellAlign[align],
   color: getTextColor(colorTextNeutral),
@@ -76,7 +99,7 @@ const TableBody = ({
   const {
     columns
   } = useContext(TableContext);
-  return /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx("tr", { children: row.cells.map((cell, i) => {
+  return /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsx(TableRowStyled, { children: row.cells.map((cell, i) => {
     var _a;
     const align = ((_a = columns == null ? void 0 : columns[i]) == null ? void 0 : _a.align) || "left";
     if (sideHeader && i === 0) {
@@ -88,13 +111,13 @@ const TableBody = ({
 TableBody.displayName = "TableBody";
 const TableFoot = ({
   cells
-}) => /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: cells.map((cell, i) => /* @__PURE__ */ jsx(TableCell, { ...cell, as: "td", children: cell.children }, "foot-" + i)) }) });
+}) => /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx(TableRowStyled, { children: cells.map((cell, i) => /* @__PURE__ */ jsx(TableCell, { ...cell, as: "td", children: cell.children }, "foot-" + i)) }) });
 TableFoot.displayName = "TableFoot";
 const TableHead = ({
   columns
 }) => {
   if (!columns) return null;
-  return /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { align: col.align, as: "th", scope: "col", children: col.label }, col.key)) }) });
+  return /* @__PURE__ */ jsx(TableHeadStyled, { children: /* @__PURE__ */ jsx(TableRowStyled, { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { align: col.align, as: "th", scope: "col", children: col.label }, col.key)) }) });
 };
 TableHead.displayName = "TableHead";
 export {

package/dist/{TableWrapper-BrnjxwJz.js → TableWrapper-C8SpplcL.js}

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { Children, isValidElement } from "react";
-import { e as TableProvider, f as TableWrapperDiv, g as TableStyled } from "./TableHead-Cfn2iQRg.js";
+import { e as TableProvider, f as TableWrapperDiv, g as TableStyled } from "./TableHead-C2zQ4jce.js";
 const allowedTypes = ["TableHead", "TableBody", "TableFoot"];
 const TableWrapper = ({
   children,

package/dist/components/Accordion/index.js

@@ -4,7 +4,7 @@ import { useRef, useState, useEffect } from "react";
 import Collapsible from "../Collapsible/index.js";
 import { I as IconLoader } from "../../index-C3dW-7e_.js";
 import { c as iconSizeMd } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import { bf as ChevronDownIcon } from "../../_5gPlusIcon-CnxmOo1u.js";
 import styled from "styled-components";
 import Heading from "../Heading/index.js";
@@ -22,7 +22,7 @@ import { f as borderWidthNone, b as borderWidthUnselected, a as borderWidthFocus
 import { f as fontWeightRegular, a as fontWeightBold } from "../../FontWeight-C2pGs7aR.js";
 import { a as spacingMd, s as spacingNone, b as spacingXs } from "../../Spacing-BMQelJYr.js";
 import { a as colorTextNeutral, f as colorTextBrand } from "../../TextColor-DsntmDNw.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const accordionToggleExpanded = "expanded";
 const accordionToggleCollapsing = "collapsing";
 const accordionToggleCollapsed = "collapsed";

package/dist/components/AccordionGroup/index.js

@@ -5,7 +5,7 @@ import { a as spacingMd, s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import { useState } from "react";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const AccordionGroupSingleExpand = ({
   bottomSpacing = spacingMd,
   ...props

package/dist/components/Badge/index.js

@@ -2,12 +2,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { b as iconNames, I as IconLoader } from "../../index-C3dW-7e_.js";
 import { a as iconSizeXs, b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import { s as smallSize, m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { p as primaryBadgeAppearance, s as secondaryBadgeAppearance, t as tertiaryBadgeAppearance, a as successBadgeAppearance, b as BadgeStyled } from "../../styled-13a_Vk0D.js";
-import { B } from "../../styled-13a_Vk0D.js";
+import { p as primaryBadgeAppearance, s as secondaryBadgeAppearance, t as tertiaryBadgeAppearance, a as successBadgeAppearance, b as BadgeStyled } from "../../styled-BBO2jrba.js";
+import { B } from "../../styled-BBO2jrba.js";
 const badgeAppearances = [primaryBadgeAppearance, secondaryBadgeAppearance, tertiaryBadgeAppearance, successBadgeAppearance];
 const badgeSizes = [smallSize, mediumSize];
 const validateBadgeProps = (props) => {

package/dist/components/Body/index.js

@@ -11,7 +11,7 @@ import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { a as fontWeightBold, b as fontWeightLight, f as fontWeightRegular } from "../../FontWeight-C2pGs7aR.js";
 import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import { p as pTagName, d as divTagName, s as spanTagName, q as strongTagName, r as supTagName } from "../../tags-38kBhOn6.js";
 const BodyStyled = styled.p.withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/BottomBar/index.js

@@ -4,11 +4,11 @@ import { useRef, useState, useEffect } from "react";
 import Container from "../Container/index.js";
 import { a as spacingMd, s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
-import { a as CardStyled } from "../../styled-CQLDmqmZ.js";
+import { a as CardStyled } from "../../styled-CE_Y6O4R.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { c as borderRadiusNone } from "../../BorderRadius-2LdggXbQ.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as borderRadiusNone } from "../../BorderRadius-ClUShVLu.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const bottomBarExtraPadding = 100;
 const BottomBarStyled = styled(CardStyled).withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/Button/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { B as ButtonAsLink, g as getButtonIcon } from "../../index-BPweURE-.js";
+import { B as ButtonAsLink, g as getButtonIcon } from "../../index-CHzok6W_.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
-import { B as ButtonStyled } from "../../styled-Dk6VS_Sg.js";
+import { B as ButtonStyled } from "../../styled-Dgv3RBlg.js";
 const buttonFullWidth = "full";
 const buttonAutoWidth = "auto";
 const isButtonAsLinkProp = (props) => {

package/dist/components/ButtonAsLink/index.js

@@ -1,8 +1,8 @@
 "use client";
 import "react/jsx-runtime";
-import { B } from "../../index-BPweURE-.js";
+import { B } from "../../index-CHzok6W_.js";
 import "../../hooks/useLinkComponent/index.js";
-import "../../filterProps-CPul3CC8.js";
+import "../../filterProps-BWnAPYBL.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import "../../sanitizeLinkProps-D2Kkovy1.js";
 export {

package/dist/components/ButtonGroup/index.js

@@ -2,10 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 import Button from "../Button/index.js";
 import Flex from "../Flex/index.js";
-import { f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-DG6HSLPJ.js";
+import { f as flexOrientationHorizontal, b as flexJustifyStart } from "../../styled-O5mL4jlL.js";
 import FlexItem from "../FlexItem/index.js";
 import { c as spacingSm, a as spacingMd } from "../../Spacing-BMQelJYr.js";
-import { u as useViewport } from "../../index-DKCzYjXw.js";
+import { u as useViewport } from "../../index-G2mpsxF7.js";
 const renderButtons = (buttons, isMobile, isReversed = false) => {
   if (!isMobile && isReversed) {
     buttons = buttons.slice().reverse();

package/dist/components/Card/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { d as divTagName } from "../../tags-38kBhOn6.js";
-import { a as CardStyled } from "../../styled-CQLDmqmZ.js";
-import { C } from "../../styled-CQLDmqmZ.js";
+import { a as CardStyled } from "../../styled-CE_Y6O4R.js";
+import { C } from "../../styled-CE_Y6O4R.js";
 const Card = ({
   children,
   className,

package/dist/components/Carousel/index.js

@@ -6,17 +6,17 @@ import { useFocusWithin } from "../../hooks/useFocusWithin/index.js";
 import { l as liTagName, u as ulTagName } from "../../tags-38kBhOn6.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
-import { a as CardStyled } from "../../styled-CQLDmqmZ.js";
-import { G as GridStyled } from "../../styled-BKmRVjNA.js";
-import { G as GridItemStyled } from "../../styled-D57p2ktn.js";
-import viewport from "../../foundations/media-query/viewport/index.js";
+import { a as CardStyled } from "../../styled-CE_Y6O4R.js";
+import { G as GridStyled } from "../../styled-DGMsuBML.js";
+import { G as GridItemStyled } from "../../styled-Cz2kpbgE.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { a as borderRadiusFull } from "../../BorderRadius-2LdggXbQ.js";
+import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
 import { a as colorObjectBrand, g as colorObjectUnselected } from "../../ObjectColor-0RAzLGI5.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import IconButton from "../IconButton/index.js";
 import ScreenreaderOnly from "../ScreenreaderOnly/index.js";
 const getItems = (items, loop) => {

package/dist/components/Checkbox/index.js

@@ -4,7 +4,7 @@ import { N as NotificationErrorIcon } from "../../NotificationErrorIcon-DMnAJgPN
 import { useState, useEffect } from "react";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
 import styled from "styled-components";
 import Label from "../Label/index.js";
@@ -19,11 +19,11 @@ import { getObjectColor } from "../../foundations/token/getObjectColor/index.js"
 import { getOpacity } from "../../foundations/token/getOpacity/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { c as colorBorderFocus } from "../../BorderColor-CYdSW9dg.js";
-import { d as borderRadiusSm } from "../../BorderRadius-2LdggXbQ.js";
+import { d as borderRadiusSm } from "../../BorderRadius-ClUShVLu.js";
 import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
 import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const CheckboxLabelStyled = styled(Label).withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/CheckboxGroup/index.js

@@ -5,10 +5,10 @@ import Checkbox from "../Checkbox/index.js";
 import Fieldset from "../Fieldset/index.js";
 import { g as spacingLg, a as spacingMd, s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
-import { F as FlexStyled } from "../../styled-DG6HSLPJ.js";
+import { F as FlexStyled } from "../../styled-O5mL4jlL.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const CheckboxGroupStyled = styled(FlexStyled).withConfig({
   shouldForwardProp: filterProps(),
   displayName: "CheckboxGroupStyled",

package/dist/components/Collapsible/index.js

@@ -8,7 +8,7 @@ import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js"
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const CollapsibleStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "CollapsibleStyled",

package/dist/components/ColorSwatch/index.js

@@ -4,13 +4,13 @@ import { useState, useRef, useEffect } from "react";
 import { a as getComputedBackgroundColor, p as parseColorToRgbObject, b as getContrastRatio } from "../../colorUtils-lb0oJttx.js";
 import styled from "styled-components";
 import { c as iconSizeMd } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { a as colorBorderNeutral } from "../../BorderColor-CYdSW9dg.js";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const colorSwatchSizeSmall = "sm";
 const colorSwatchSizeMedium = "md";

package/dist/components/ColorSwatchGroup/index.js

@@ -3,11 +3,11 @@ import { jsx } from "react/jsx-runtime";
 import ColorSwatch, { colorSwatchSizeSmall } from "../ColorSwatch/index.js";
 import { a as spacingMd, e as spacing2Xs } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
-import { F as FlexStyled } from "../../styled-DG6HSLPJ.js";
+import { F as FlexStyled } from "../../styled-O5mL4jlL.js";
 import { c as iconSizeMd } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
 const ColorSwatchListStyled = styled(FlexStyled).withConfig({
   shouldForwardProp: filterProps(),

package/dist/components/ConsentMessage/index.js

@@ -4,15 +4,15 @@ import { useState, useEffect } from "react";
 import Body, { bodyAlignCenter } from "../Body/index.js";
 import Button, { buttonAutoWidth } from "../Button/index.js";
 import styled from "styled-components";
-import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-Dk6VS_Sg.js";
-import viewport from "../../foundations/media-query/viewport/index.js";
+import { B as ButtonStyled, t as tertiaryAppearance } from "../../styled-Dgv3RBlg.js";
+import { v as viewport } from "../../index-Ck2bCrhT.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { b as colorBackgroundOverlay } from "../../BackgroundColor-DSOSZvNi.js";
 import { a as spacingMd, b as spacingXs, s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import Heading from "../Heading/index.js";
-import { a as headingAlignCenter } from "../../styled-Csv7V9ez.js";
-import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { a as headingAlignCenter } from "../../styled-Dmb8-99g.js";
+import { a as textHeadingXs } from "../../HeadingSize-CqqUYZWV.js";
 const ConsentMessageBackgroundStyled = styled.div.withConfig({
   displayName: "ConsentMessageBackgroundStyled",
   componentId: "sc-gbn604-0"

package/dist/components/Container/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { a as ContainerBackgroundStyled, b as ContainerCenterStyled } from "../../styled-C6Wms75x.js";
-import { C } from "../../styled-C6Wms75x.js";
+import { a as ContainerBackgroundStyled, b as ContainerCenterStyled } from "../../styled-BXtzJJFu.js";
+import { C } from "../../styled-BXtzJJFu.js";
 import { s as spacingNone, d as spacingXl, f as spacing5Xl } from "../../Spacing-BMQelJYr.js";
 const containerAppearances = ["primary", "secondary", "tertiary", "alternative"];
 const containerPaddings = [spacingNone, spacingXl, spacing5Xl];

package/dist/components/DateInput/index.js

@@ -6,9 +6,9 @@ import FormHelperLabel from "../FormHelperLabel/index.js";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import { a as inputStateError } from "../../props-DDpgcryb.js";
-import { a as InputStyled, I as InputWrapperStyled } from "../../styled-CWusLu5R.js";
+import { a as InputStyled, I as InputWrapperStyled } from "../../styled-BQGCfF-s.js";
 import { a as spacingMd, b as spacingXs } from "../../Spacing-BMQelJYr.js";
 import { aW as CalendarMonthIcon } from "../../_5gPlusIcon-CnxmOo1u.js";
 import styled from "styled-components";

package/dist/components/DemoBox/index.js

@@ -1,14 +1,20 @@
 "use client";
 import { 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-DCLv3G2j.js";
+import { a as textHeadingXs } from "../../HeadingSize-CqqUYZWV.js";
+import { v4 } from "uuid";
+import { D as DemoBoxStyled } from "../../styled-Dr-tPBqx.js";
+const getUid = () => {
+  return v4();
+};
 const heading = {
+  uid: getUid(),
   component: "Heading",
   children: "Child component",
   size: textHeadingXs
 };
 const richText = {
+  uid: getUid(),
   component: "RichText",
   html: "<p>This is a placeholder.</p>"
 };

package/dist/components/Dialog/index.js

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import Heading from "../Heading/index.js";
 import { a as fontWeightBold } from "../../FontWeight-C2pGs7aR.js";
-import { a as textHeadingMd } from "../../HeadingSize-CfCRn3Lh.js";
+import { t as textHeadingMd } from "../../HeadingSize-CqqUYZWV.js";
 import { a as spacingMd, s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
 import ButtonGroup from "../ButtonGroup/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-DSOSZvNi.js";
 import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const DialogOverlayStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "DialogOverlayStyled",

package/dist/components/DiscoveryCard/index.js

@@ -5,31 +5,31 @@ import Badge from "../Badge/index.js";
 import Body, { bodyAlignLeft, bodyAlignCenter } from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import Link from "../Link/index.js";
-import { P as Price, b as priceSizeSm, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-Vub90geg.js";
-import { R as RichText } from "../../index-rbdl_kyF.js";
+import { P as Price, b as priceSizeSm, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-DLvMM1Dq.js";
+import { R as RichText } from "../../index-CifS-Z_9.js";
 import { a as fontWeightBold } from "../../FontWeight-C2pGs7aR.js";
-import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
+import { b as textHeadingSm } from "../../HeadingSize-CqqUYZWV.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { a as spacingMd, s as spacingNone, b as spacingXs, c as spacingSm } from "../../Spacing-BMQelJYr.js";
 import "../../NotificationErrorIcon-DMnAJgPN.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import "html-react-parser";
-import { b as BadgeStyled } from "../../styled-13a_Vk0D.js";
+import { b as BadgeStyled } from "../../styled-BBO2jrba.js";
 import "../ScreenreaderOnly/index.js";
 import "../FootnoteLink/index.js";
-import "../../styled-Csv7V9ez.js";
-import "../../styled-Dk6VS_Sg.js";
-import { a as LinkStyled } from "../../index-tpq3BGwZ.js";
+import "../../styled-Dmb8-99g.js";
+import "../../styled-Dgv3RBlg.js";
+import { a as LinkStyled } from "../../index-ByPSWRQ0.js";
 import "../../hooks/useLinkComponent/index.js";
 import "../InlineLink/index.js";
-import "../../TableHead-Cfn2iQRg.js";
-import "../../styled-DoOOutJj.js";
+import "../../TableHead-C2zQ4jce.js";
+import "../../styled-BYYivuzh.js";
 import styled from "styled-components";
 import Card from "../Card/index.js";
 import Image, { aspectRatio16_9, aspectRatio1_1 } 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-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 import { a as cornerRounded } from "../../CornerStyle-JEbGNArR.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" | "image" | "price" | "uid" | "body" | "link">>> & 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" | "price" | "uid" | "body" | "link" | "image">>> & 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

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import DiscoveryCard, { discoveryCardOrientationVertical } from "../DiscoveryCard/index.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
-import { a as LinkStyled } from "../../index-tpq3BGwZ.js";
+import { a as LinkStyled } from "../../index-ByPSWRQ0.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 const DiscoveryCardGroupGridStyled = styled(Grid).withConfig({

package/dist/components/Divider/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { D as DividerLineStyled } from "../../styled-B_ihuvyB.js";
+import { D as DividerLineStyled } from "../../styled-BKWEE3dx.js";
 const Divider = (props) => /* @__PURE__ */ jsx(DividerLineStyled, { ...props });
 export {
   Divider as default

package/dist/components/Fieldset/index.js

@@ -8,7 +8,7 @@ import Legend from "../Legend/index.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.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

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import Fieldset from "../Fieldset/index.js";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import styled from "styled-components";
 import { I as IconLoader } from "../../index-C3dW-7e_.js";
 import { s as screenreaderOnly } from "../../screenreaderOnly-Dv2v6MAr.js";
@@ -19,13 +19,13 @@ import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBackgroundNeutral } from "../../BackgroundColor-DSOSZvNi.js";
 import { b as colorBorderUnselected, j as colorBorderSelected, c as colorBorderFocus } from "../../BorderColor-CYdSW9dg.js";
-import { a as borderRadiusFull } from "../../BorderRadius-2LdggXbQ.js";
+import { c as borderRadiusFull } from "../../BorderRadius-ClUShVLu.js";
 import { b as borderWidthUnselected, a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
 import { d as colorObjectSelected } from "../../ObjectColor-0RAzLGI5.js";
 import { b as spacingXs, s as spacingNone, e as spacing2Xs, c as spacingSm } from "../../Spacing-BMQelJYr.js";
 import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
 import { a as colorTextNeutral, b as colorTextInverseStatic } from "../../TextColor-DsntmDNw.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const FilterGroupStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FilterGroupStyled",

package/dist/components/Flex/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { F as FlexStyled } from "../../styled-DG6HSLPJ.js";
-import { e, d, c, b, f, a } from "../../styled-DG6HSLPJ.js";
+import { F as FlexStyled } from "../../styled-O5mL4jlL.js";
+import { e, d, c, b, f, a } from "../../styled-O5mL4jlL.js";
 const Flex = ({
   children,
   ...props

package/dist/components/FlexItem/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.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-CYdSW9dg.js";
 import { a as borderWidthFocus } from "../../BorderWidth-eg_mz82k.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.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/Form/index.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { a as filterProps } from "../../filterProps-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.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-CPul3CC8.js";
+import { a as filterProps } from "../../filterProps-BWnAPYBL.js";
 const FormElementStyled = styled.div.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "FormElementStyled",

package/dist/components/FormHelperStatusIcon/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { b as iconSizeSm } from "../../props-7dcsjRUx.js";
-import "../../styled-DUsRG1Xh.js";
+import "../../styled-B1bxWqtW.js";
 import styled from "styled-components";
 import { I as IconLoader } from "../../index-C3dW-7e_.js";
 import forcedColors from "../../foundations/media-query/forcedColors/index.js";