@vodafone_de/brix-components 17.1.2 → 18.0.0

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

@@ -83,6 +83,7 @@ export declare const iconSnippetSchema: z.ZodObject<{
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -637,7 +638,6 @@ export declare const iconSnippetSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";
@@ -1124,6 +1124,7 @@ export declare const iconSnippetSchema: z.ZodObject<{
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -1678,7 +1679,6 @@ export declare const iconSnippetSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";
@@ -1732,6 +1732,7 @@ export declare const iconSnippetSchema: z.ZodObject<{
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -2286,7 +2287,6 @@ export declare const iconSnippetSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";

package/dist/components/IconSnippetList/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { G as Grid, b as GridItem } from "../../index-B0jIyAgf.js";
+import { G as Grid, b as GridItem } from "../../index-E0RMtc9X.js";
 import IconSnippet from "../IconSnippet/index.js";
 import { u as ulTagName, l as liTagName } from "../../tags-BeNegJAK.js";
 import { b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";

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

@@ -151,6 +151,7 @@ export declare const iconSnippetListSchema: z.ZodObject<{
                 Filter: "Filter";
                 Grid: "Grid";
                 Notification: "Notification";
+                Video: "Video";
                 Focus: "Focus";
                 AbTest: "AbTest";
                 Above28: "Above28";
@@ -705,7 +706,6 @@ export declare const iconSnippetListSchema: z.ZodObject<{
                 VfHappyHelpful: "VfHappyHelpful";
                 VfHappy: "VfHappy";
                 VideoFrame: "VideoFrame";
-                Video: "Video";
                 Virtuoso: "Virtuoso";
                 VirusProtection: "VirusProtection";
                 VocSensor: "VocSensor";
@@ -1192,6 +1192,7 @@ export declare const iconSnippetListSchema: z.ZodObject<{
                 Filter: "Filter";
                 Grid: "Grid";
                 Notification: "Notification";
+                Video: "Video";
                 Focus: "Focus";
                 AbTest: "AbTest";
                 Above28: "Above28";
@@ -1746,7 +1747,6 @@ export declare const iconSnippetListSchema: z.ZodObject<{
                 VfHappyHelpful: "VfHappyHelpful";
                 VfHappy: "VfHappy";
                 VideoFrame: "VideoFrame";
-                Video: "Video";
                 Virtuoso: "Virtuoso";
                 VirusProtection: "VirusProtection";
                 VocSensor: "VocSensor";
@@ -1800,6 +1800,7 @@ export declare const iconSnippetListSchema: z.ZodObject<{
                 Filter: "Filter";
                 Grid: "Grid";
                 Notification: "Notification";
+                Video: "Video";
                 Focus: "Focus";
                 AbTest: "AbTest";
                 Above28: "Above28";
@@ -2354,7 +2355,6 @@ export declare const iconSnippetListSchema: z.ZodObject<{
                 VfHappyHelpful: "VfHappyHelpful";
                 VfHappy: "VfHappy";
                 VideoFrame: "VideoFrame";
-                Video: "Video";
                 Virtuoso: "Virtuoso";
                 VirusProtection: "VirusProtection";
                 VocSensor: "VocSensor";

package/dist/components/Image/index.js

@@ -1,61 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { a as ContainerContext } from "../../index-iCvdBgcJ.js";
-import { a as GridContext, c as GridItemContext } from "../../index-B0jIyAgf.js";
+import { a as ContainerContext } from "../../index-C_6tWuWh.js";
+import { a as GridContext, c as GridItemContext } from "../../index-E0RMtc9X.js";
 import UtilityLink from "../UtilityLink/index.js";
 import { useImageComponent, filterImagePropsToImageComponentProps } from "../../hooks/useImageComponent/index.js";
-import { g as getSizesFromGridConfig } from "../../getSizesFromGridConfig-BqDW79mt.js";
-import styled from "styled-components";
-import { translateLayoutPropsToCss } from "../../foundations/layout/index.js";
-import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
-import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
-import { b as borderRadiusMd, c as borderRadiusNone } from "../../BorderRadius-Co-IV3fn.js";
-import { s as spacingMd } from "../../Spacing-Dj-qX3Z5.js";
-import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+import { g as getSizesFromGridConfig } from "../../getSizesFromGridConfig-C-GBct4J.js";
+import { I as ImageContainerStyled } from "../../styled-BrSdmb0C.js";
 import { a, b, c, d, e, f, g, h, i, j, k, l, m, o, n, p, q, r, s, t, u, v } from "../../props-CLadRD1u.js";
-const ImageContainerStyled = styled.div.withConfig({
-  shouldForwardProp,
-  displayName: "ImageContainerStyled",
-  componentId: "sc-z3qszb-0"
-})({
-  overflow: "hidden",
-  position: "relative"
-}, ({
-  aspectRatio
-}) => ({
-  aspectRatio
-}), ({
-  roundedCorners
-}) => ({
-  borderRadius: roundedCorners ? getBorderRadius(borderRadiusMd) : getBorderRadius(borderRadiusNone)
-}), ({
-  objectFit = "cover"
-}) => ({
-  "& img": {
-    objectFit
-  }
-}), ({
-  width,
-  height,
-  aspectRatio
-}) => ({
-  width: width ? width : height ? "auto" : "100%",
-  height: height ? height : width ? "auto" : aspectRatio ? "auto" : "100%",
-  "& img": {
-    position: !width && !height && !aspectRatio ? "relative" : "absolute",
-    top: 0,
-    left: 0,
-    height: "100%",
-    width: "100%"
-  }
-}), ({
-  bottomSpacing = spacingMd
-}) => getBottomSpacing({
-  bottomSpacing
-}), ({
-  layout
-}) => layout && translateLayoutPropsToCss(layout));
 const Image = ({
   link,
   aspectRatio,

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

@@ -68,15 +68,6 @@ export declare const imageSchema: z.ZodObject<{
         contain: "contain";
         cover: "cover";
     }>>;
-    objectPosition: z.ZodOptional<z.ZodEnum<{
-        center: "center";
-        "top left": "top left";
-        "center left": "center left";
-        "bottom left": "bottom left";
-        "top right": "top right";
-        "center right": "center right";
-        "bottom right": "bottom right";
-    }>>;
     roundedCorners: z.ZodOptional<z.ZodBoolean>;
     src: z.ZodString;
     alt: z.ZodOptional<z.ZodString>;

package/dist/components/ImageHeader/index.js

@@ -3,15 +3,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import { b as bodyComponentName } from "../../componentName-BoJP6JLf.js";
 import Button from "../Button/index.js";
-import { C as Container } from "../../index-iCvdBgcJ.js";
 import "../../index-Dgu9iIhb.js";
 import "../../index-DcEZ9vor.js";
 import { f as spacing2Xs, b as spacingNone, s as spacingMd, c as spacingSm, d as spacingXl, a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
 import Heading from "../Heading/index.js";
 import { h as headingAlignCenter } from "../../props-GrMT6XLD.js";
 import { h as headingComponentName } from "../../componentName-C1oXAOj7.js";
-import { P as Price } from "../../index-B7QEcUdq.js";
-import { a as RichTextContentful, R as RichText } from "../../index-XoIBkRyI.js";
+import Price from "../Price/index.js";
+import { a as RichTextContentful, R as RichText } from "../../index-BLp5wi_X.js";
 import { r as richTextContentfulComponentName, a as richTextComponentName } from "../../props-B5OwQmNC.js";
 import { v as viewport, a as breakpoint_large } from "../../index-CG4uiVbZ.js";
 import { b as fontWeightLight } from "../../FontWeight-C8c-UnWu.js";
@@ -21,24 +20,31 @@ import { c as imageHeaderVariantFull, a as imageHeaderPositionRight, d as imageH
 import { b, e } from "../../props-BT2CkRl1.js";
 import styled from "styled-components";
 import ArtDirectedImage from "../ArtDirectedImage/index.js";
-import { B as Badge } from "../../index-CWByESA7.js";
+import { B as Badge } from "../../index-h88pZ6zH.js";
 import ButtonGroup from "../ButtonGroup/index.js";
+import { C as Container } from "../../index-C_6tWuWh.js";
 import { k as flexOrientationVertical } from "../../props-BhXFN7yR.js";
-import { G as Grid, b as GridItem } from "../../index-B0jIyAgf.js";
+import { G as Grid, b as GridItem } from "../../index-E0RMtc9X.js";
 import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBodySize } from "../../foundations/token/getBodySize/index.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
 import { e as colorBackgroundOverlay } from "../../BackgroundColor-Ba4D10TC.js";
 import { t as textBodyMd } from "../../TextBodySize-CP9q4gRv.js";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
-import { h as priceSizeSm } from "../../props-P3bM0HEk.js";
+import { h as priceSizeSm } from "../../props-E4PNCuS6.js";
 const imageHeaderHeight = 450;
+const ImageHeaderContainerStyled = styled(Container).withConfig({
+  displayName: "ImageHeaderContainerStyled",
+  componentId: "sc-7ig3h-0"
+})({
+  containerType: "inline-size"
+});
 const getBadgeTopPosition = () => {
   return `calc(-0.5 * (${getSpacing(spacing2Xs)} * 2 + ${getBodySize(textBodyMd).fontSize} * ${getBodySize(textBodyMd).lineHeight}))`;
 };
 const ImageHeaderStyled = styled(Grid).withConfig({
   displayName: "ImageHeaderStyled",
-  componentId: "sc-7ig3h-0"
+  componentId: "sc-7ig3h-1"
 })({
   alignItems: "center",
   position: "relative",
@@ -63,7 +69,7 @@ const ImageHeaderStyled = styled(Grid).withConfig({
 }));
 const ImageHeaderImagesContainerStyled = styled(GridItem).withConfig({
   displayName: "ImageHeaderImagesContainerStyled",
-  componentId: "sc-7ig3h-1"
+  componentId: "sc-7ig3h-2"
 })({
   ...viewport.lg({
     flexGrow: "1",
@@ -77,7 +83,7 @@ const ImageHeaderImagesContainerStyled = styled(GridItem).withConfig({
     const marginSide = contentPosition === imageHeaderPositionRight ? "marginLeft" : "marginRight";
     return {
       ...viewport.lg({
-        [marginSide]: "calc(-1*(100vw - 100%) / 2)"
+        [marginSide]: "calc(-1*(100cqw - 100%) / 2)"
       })
     };
   }
@@ -89,15 +95,15 @@ const ImageHeaderImagesContainerStyled = styled(GridItem).withConfig({
       ...viewport.lg({
         flexBasis: "100%",
         alignItems: "center",
-        marginRight: "calc(-1 * (100vw - 100%) / 2)",
-        marginLeft: "calc(-1 * (100vw - 100%) / 2)"
+        marginRight: "calc(-1 * (100cqw - 100%) / 2)",
+        marginLeft: "calc(-1 * (100cqw - 100%) / 2)"
       })
     };
   }
 });
 const ImageHeaderArtDirectedImageStyled = styled(ArtDirectedImage).withConfig({
   displayName: "ImageHeaderArtDirectedImageStyled",
-  componentId: "sc-7ig3h-2"
+  componentId: "sc-7ig3h-3"
 })({
   width: "100%",
   ...viewport.lg({
@@ -130,7 +136,7 @@ const ImageHeaderArtDirectedImageStyled = styled(ArtDirectedImage).withConfig({
 });
 const ImageHeaderContentStyled = styled(GridItem).withConfig({
   displayName: "ImageHeaderContentStyled",
-  componentId: "sc-7ig3h-3"
+  componentId: "sc-7ig3h-4"
 })({
   padding: `${getSpacing(spacingXl)} ${getSpacing(spacingMd)}`,
   gap: getSpacing(spacingSm),
@@ -170,7 +176,7 @@ const ImageHeaderContentStyled = styled(GridItem).withConfig({
 });
 const ImageHeaderBadgeStyled = styled(Badge).withConfig({
   displayName: "ImageHeaderBadgeStyled",
-  componentId: "sc-7ig3h-4"
+  componentId: "sc-7ig3h-5"
 })({
   position: "absolute",
   top: getBadgeTopPosition(),
@@ -181,7 +187,7 @@ const ImageHeaderBadgeStyled = styled(Badge).withConfig({
 });
 const ImageHeaderHeadingStyled = styled(Heading).withConfig({
   displayName: "ImageHeaderHeadingStyled",
-  componentId: "sc-7ig3h-5"
+  componentId: "sc-7ig3h-6"
 })({
   ...viewport.lg({
     textAlign: "left"
@@ -190,7 +196,7 @@ const ImageHeaderHeadingStyled = styled(Heading).withConfig({
 const ImageHeaderSublineWrapperStyled = styled.div.withConfig({
   shouldForwardProp,
   displayName: "ImageHeaderSublineWrapperStyled",
-  componentId: "sc-7ig3h-6"
+  componentId: "sc-7ig3h-7"
 })({
   textAlign: "center",
   ...viewport.lg({
@@ -199,7 +205,7 @@ const ImageHeaderSublineWrapperStyled = styled.div.withConfig({
 });
 const ImageHeaderSublineHeadingStyled = styled(Heading).withConfig({
   displayName: "ImageHeaderSublineHeadingStyled",
-  componentId: "sc-7ig3h-7"
+  componentId: "sc-7ig3h-8"
 })({
   textAlign: "center",
   ...viewport.lg({
@@ -208,7 +214,7 @@ const ImageHeaderSublineHeadingStyled = styled(Heading).withConfig({
 });
 const ImageHeaderButtonGroupStyled = styled(ButtonGroup).withConfig({
   displayName: "ImageHeaderButtonGroupStyled",
-  componentId: "sc-7ig3h-8"
+  componentId: "sc-7ig3h-9"
 })({
   marginTop: getSpacing(spacingXs),
   width: "100%",
@@ -266,7 +272,7 @@ const ImageHeader = ({
     ...source,
     sizes: variant === imageHeaderVariantFull ? `(min-width: 1025px) and (max-width: 1920px) ${imageHeaderHeight * (48 / 9)}px, 100vw` : `(max-width: ${breakpoint_large}) 100vw, (min-width: 1025px) and (max-width: 1920px) ${imageHeaderHeight * (32 / 9)}px, 50vw`
   }]));
-  return /* @__PURE__ */ jsx(Container, { padding: spacingNone, className: props.className, theme, children: /* @__PURE__ */ jsxs(ImageHeaderStyled, { ...props, contentPosition, variant, gap: spacingNone, component: "Grid", children: [
+  return /* @__PURE__ */ jsx(ImageHeaderContainerStyled, { padding: spacingNone, className: props.className, theme, children: /* @__PURE__ */ jsxs(ImageHeaderStyled, { ...props, contentPosition, variant, gap: spacingNone, component: "Grid", children: [
     /* @__PURE__ */ jsx(ImageHeaderImagesContainerStyled, { align: "center", variant, contentPosition, lg: 12 - contentColumns, children: /* @__PURE__ */ jsx(ImageHeaderArtDirectedImageStyled, { sources, image: {
       ...artDirectedImage.image,
       loading: "eager",

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

@@ -1,5 +1,22 @@
 import { ImageHeaderProps } from './props';
 export declare const imageHeaderHeight = 450;
+/**
+ * Establishes an inline-size query container so the full-bleed offsets below can
+ * use `cqw` instead of `vw`.
+ *
+ * `100vw` includes the vertical scrollbar's width, while the space actually
+ * available is `documentElement.clientWidth`. Wherever the scrollbar takes up
+ * layout space (Firefox/Safari, and any OS set to "always show scrollbars"),
+ * `calc(-1 * (100vw - 100%) / 2)` therefore overshoots by half the scrollbar
+ * width and pushes the header past the viewport - producing a horizontal
+ * scrollbar. `100cqw` resolves against this container's content box, which
+ * excludes the scrollbar, so the offset is exact in every engine.
+ *
+ * Scoped to ImageHeader on purpose: `container-type` creates a new containing
+ * block, so applying it to the shared Container would affect every consumer.
+ * See SQDE-1109.
+ */
+export declare const ImageHeaderContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Container').ContainerProps, never> & Partial<Pick<import('../Container').ContainerProps, never>>> & string & Omit<({ className, children, appearance, tag, ...props }: import('../Container').ContainerProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const getBadgeTopPosition: () => string;
 export declare const ImageHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('../Grid').GridProps, "variant" | "contentPosition"> & Pick<ImageHeaderProps, "variant" | "contentPosition">, never> & Partial<Pick<import('styled-components').FastOmit<import('../Grid').GridProps, "variant" | "contentPosition"> & Pick<ImageHeaderProps, "variant" | "contentPosition">, never>>> & string & Omit<({ tag, gap, autoLayout, ...props }: import('../Grid').GridProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const ImageHeaderImagesContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('../GridItem').GridItemProps, "variant" | "contentPosition"> & Pick<ImageHeaderProps, "variant" | "contentPosition">, never> & Partial<Pick<import('styled-components').FastOmit<import('../GridItem').GridItemProps, "variant" | "contentPosition"> & Pick<ImageHeaderProps, "variant" | "contentPosition">, never>>> & string & Omit<({ sm, tag, ...props }: import('../GridItem').GridItemProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;

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

@@ -194,15 +194,6 @@ export declare const imageHeaderSchema: z.ZodObject<{
                 contain: "contain";
                 cover: "cover";
             }>>;
-            objectPosition: z.ZodOptional<z.ZodEnum<{
-                center: "center";
-                "top left": "top left";
-                "center left": "center left";
-                "bottom left": "bottom left";
-                "top right": "top right";
-                "center right": "center right";
-                "bottom right": "bottom right";
-            }>>;
             roundedCorners: z.ZodOptional<z.ZodBoolean>;
             src: z.ZodString;
             alt: z.ZodOptional<z.ZodString>;
@@ -269,6 +260,7 @@ export declare const imageHeaderSchema: z.ZodObject<{
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -823,7 +815,6 @@ export declare const imageHeaderSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";
@@ -1450,6 +1441,7 @@ export declare const imageHeaderSchema: z.ZodObject<{
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -2004,7 +1996,6 @@ export declare const imageHeaderSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";
@@ -2228,6 +2219,7 @@ export declare const imageHeaderSchema: z.ZodObject<{
                 Filter: "Filter";
                 Grid: "Grid";
                 Notification: "Notification";
+                Video: "Video";
                 Focus: "Focus";
                 AbTest: "AbTest";
                 Above28: "Above28";
@@ -2782,7 +2774,6 @@ export declare const imageHeaderSchema: z.ZodObject<{
                 VfHappyHelpful: "VfHappyHelpful";
                 VfHappy: "VfHappy";
                 VideoFrame: "VideoFrame";
-                Video: "Video";
                 Virtuoso: "Virtuoso";
                 VirusProtection: "VirusProtection";
                 VocSensor: "VocSensor";

package/dist/components/InfoBanner/index.js

@@ -16,7 +16,7 @@ import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/i
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { g as getSpacing } from "../../index-l-i-mIeP.js";
 import { d as colorBackgroundSubtle, b as colorBackgroundBrand } from "../../BackgroundColor-Ba4D10TC.js";
-import { g as getForegroundColor } from "../../colorUtils-CfSj2Iqa.js";
+import { g as getForegroundColor } from "../../colorUtils-c9PiZEci.js";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
 import { i, a, b } from "../../props-CyJ_9lYu.js";
 import { a as headingAlignLeft } from "../../props-GrMT6XLD.js";

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

@@ -74,6 +74,7 @@ export declare const infoBannerSchema: z.ZodObject<{
         Filter: "Filter";
         Grid: "Grid";
         Notification: "Notification";
+        Video: "Video";
         Focus: "Focus";
         AbTest: "AbTest";
         Above28: "Above28";
@@ -628,7 +629,6 @@ export declare const infoBannerSchema: z.ZodObject<{
         VfHappyHelpful: "VfHappyHelpful";
         VfHappy: "VfHappy";
         VideoFrame: "VideoFrame";
-        Video: "Video";
         Virtuoso: "Virtuoso";
         VirusProtection: "VirusProtection";
         VocSensor: "VocSensor";
@@ -766,6 +766,7 @@ export declare const infoBannerSchema: z.ZodObject<{
             Filter: "Filter";
             Grid: "Grid";
             Notification: "Notification";
+            Video: "Video";
             Focus: "Focus";
             AbTest: "AbTest";
             Above28: "Above28";
@@ -1320,7 +1321,6 @@ export declare const infoBannerSchema: z.ZodObject<{
             VfHappyHelpful: "VfHappyHelpful";
             VfHappy: "VfHappy";
             VideoFrame: "VideoFrame";
-            Video: "Video";
             Virtuoso: "Virtuoso";
             VirusProtection: "VirusProtection";
             VocSensor: "VocSensor";

package/dist/components/InlineLink/index.js

@@ -10,7 +10,7 @@ import { getBorderColor } from "../../foundations/token/getBorderColor/index.js"
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
 import { c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
-import { a as borderWidthFocus } from "../../BorderWidth-OZWeXaq_.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
 import { f as colorTextBrand, a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
 const hover = {
   textDecoration: "none",

package/dist/components/Input/index.js

@@ -5,7 +5,7 @@ import FormHelperLabel from "../FormHelperLabel/index.js";
 import FormHelperMessage from "../FormHelperMessage/index.js";
 import { s as spacingMd, a as spacingXs } from "../../Spacing-Dj-qX3Z5.js";
 import { i as inputStateError, a as inputStateSuccess } from "../../props-Czq9XX2J.js";
-import { I as InputWrapperStyled, a as InputStyled } from "../../styled-DYgC4qQm.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-ldBsCamo.js";
 const Input = ({
   uid,
   status,

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

@@ -113,6 +113,7 @@ export declare const inputSharedPropsSchema: z.ZodObject<{
         ToggleButtonProvider: "ToggleButtonProvider";
         Tray: "Tray";
         UtilityLink: "UtilityLink";
+        Video: "Video";
         YouTubeVideo: "YouTubeVideo";
     }>;
     sysId: z.ZodString;

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

@@ -1,4 +1,4 @@
 import { LegendProps } from './props';
-declare const Legend: ({ contents, ...props }: LegendProps) => import("react/jsx-runtime").JSX.Element;
+declare const Legend: ({ contents, ...props }: LegendProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Legend;
 export * from './props';

package/dist/components/Legend/index.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import IconSnippet from "../IconSnippet/index.js";
 import { i as iconSnippetAlignCenter } from "../../props-BCMLpYc6.js";
-import { R as RichText, a as RichTextContentful } from "../../index-XoIBkRyI.js";
-import { a as richTextComponentName, r as richTextContentfulComponentName } from "../../props-B5OwQmNC.js";
+import { a as RichTextContentful, R as RichText } from "../../index-BLp5wi_X.js";
+import { r as richTextContentfulComponentName, a as richTextComponentName } from "../../props-B5OwQmNC.js";
 import styled from "styled-components";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
 const LegendStyled = styled.legend.withConfig({
@@ -21,75 +21,61 @@ const LegendStyled = styled.legend.withConfig({
   display: "-webkit-flex",
   flexDirection: "column"
 });
+const forceSpanRichTextTagProps = {
+  p: {
+    tag: "span"
+  }
+};
+const forceSpanRichTextContentfulTagProps = {
+  root: {
+    tag: "span"
+  },
+  p: {
+    tag: "span"
+  }
+};
+const patchNestedContent = (content) => {
+  if ("RichText" === content.component) {
+    return {
+      ...content,
+      tagProps: forceSpanRichTextTagProps
+    };
+  }
+  if (richTextContentfulComponentName === content.component) {
+    return {
+      ...content,
+      tagProps: forceSpanRichTextContentfulTagProps
+    };
+  }
+  return content;
+};
+const legendRenderers = {
+  Heading: (content) => /* @__PURE__ */ jsx(Heading, { ...content, children: content.children }, content.uid),
+  Body: (content) => /* @__PURE__ */ jsx(Body, { ...content, tag: "span", children: content.children }, content.uid),
+  [richTextComponentName]: (content) => /* @__PURE__ */ jsx(RichText, { ...content, tagProps: forceSpanRichTextTagProps, html: content.children }, content.uid),
+  [richTextContentfulComponentName]: (content) => /* @__PURE__ */ jsx(RichTextContentful, { ...content, tagProps: forceSpanRichTextContentfulTagProps }, content.uid),
+  IconSnippet: (content) => {
+    var _a;
+    const iconSnippet = content;
+    const updatedContent = {
+      ...iconSnippet,
+      contents: (_a = iconSnippet.contents) == null ? void 0 : _a.map(patchNestedContent)
+    };
+    return /* @__PURE__ */ jsx(IconSnippet, { ...updatedContent, tag: "span", iconAlign: iconSnippetAlignCenter }, content.uid);
+  }
+};
+const renderLegendContent = (content) => {
+  const renderer = legendRenderers[content.component ?? ""];
+  return renderer ? renderer(content) : null;
+};
 const Legend = ({
   contents,
   ...props
 }) => {
-  const getLegend = () => {
-    if (!contents || 0 === contents.length) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(LegendStyled, { ...props, children: contents.map((legend) => {
-      var _a;
-      if ("Heading" === legend.component) {
-        return /* @__PURE__ */ jsx(Heading, { ...legend, children: legend.children }, legend.uid);
-      }
-      if ("Body" === legend.component) {
-        return /* @__PURE__ */ jsx(Body, { ...legend, tag: "span", children: legend.children }, legend.uid);
-      }
-      if (richTextComponentName === legend.component) {
-        return /* @__PURE__ */ jsx(RichText, { ...legend, tagProps: {
-          p: {
-            tag: "span"
-          }
-        }, html: legend.children }, legend.uid);
-      }
-      if (richTextContentfulComponentName === legend.component) {
-        return /* @__PURE__ */ jsx(RichTextContentful, { ...legend, tagProps: {
-          root: {
-            tag: "span"
-          },
-          p: {
-            tag: "span"
-          }
-        } }, legend.uid);
-      }
-      if ("IconSnippet" === legend.component) {
-        const updatedLegend = {
-          ...legend,
-          contents: (_a = legend.contents) == null ? void 0 : _a.map((content) => {
-            if ("RichText" === content.component) {
-              return {
-                ...content,
-                tagProps: {
-                  p: {
-                    tag: "span"
-                  }
-                }
-              };
-            }
-            if (richTextContentfulComponentName === content.component) {
-              return {
-                ...content,
-                tagProps: {
-                  root: {
-                    tag: "span"
-                  },
-                  p: {
-                    tag: "span"
-                  }
-                }
-              };
-            }
-            return content;
-          })
-        };
-        return /* @__PURE__ */ jsx(IconSnippet, { ...updatedLegend, tag: "span", iconAlign: iconSnippetAlignCenter }, legend.uid);
-      }
-      return null;
-    }) });
-  };
-  return /* @__PURE__ */ jsx(Fragment, { children: getLegend() });
+  if (!contents || 0 === contents.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(LegendStyled, { ...props, children: contents.map(renderLegendContent) });
 };
 export {
   Legend as default