@vodafone_de/brix-components 17.1.2 → 18.0.0

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

@@ -0,0 +1,52 @@
+import { HTMLAttributes } from 'react';
+import { AspectRatio } from '../Image/props';
+import { videoComponentName } from './componentName';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+/**
+ * Video source with URL and MIME type.
+ */
+export interface VideoSource {
+    /**
+     * URL to the video file
+     */
+    src: string;
+    /**
+     * MIME type of the video (e.g. 'video/mp4')
+     */
+    type: string;
+}
+/**
+ * Props for the Video component.
+ * Renders a self-hosted video (MP4, WebM, etc.) using the Plyr player.
+ */
+export interface VideoProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Pin component's name
+     */
+    component?: typeof videoComponentName;
+    /**
+     * Video source with URL and MIME type
+     */
+    video: VideoSource;
+    /**
+     * URL to a poster/preview image shown before playback.
+     * Required: without it the player area stays empty until the video's first
+     * frame has been decoded.
+     */
+    preview: string;
+    /**
+     * Aspect ratio of the player box. The component always fills the available
+     * width; the ratio determines its height, so the layout is stable before the
+     * video has loaded.
+     * @default 16/9
+     */
+    aspectRatio?: AspectRatio;
+    /**
+     * URL to a VTT subtitle file (German)
+     */
+    caption?: string;
+    /**
+     * Display video with rounded corners
+     */
+    roundedCorners?: boolean;
+}

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

@@ -0,0 +1,2 @@
+import { VideoProps } from './props';
+export declare const VideoStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "aspectRatio" | "layout" | "bottomSpacing" | "roundedCorners"> & Pick<VideoProps, "aspectRatio" | "layout" | "bottomSpacing" | "roundedCorners">, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "aspectRatio" | "layout" | "bottomSpacing" | "roundedCorners"> & Pick<VideoProps, "aspectRatio" | "layout" | "bottomSpacing" | "roundedCorners">, never>>> & string;

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

@@ -0,0 +1,84 @@
+import { default as z } from 'zod';
+import { VideoCmsProps } from '../../contentful/props';
+import { ValidationResult } from '../../utils/validation/Validation';
+export declare const videoSchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"Video">;
+    video: z.ZodObject<{
+        src: z.ZodString;
+        type: z.ZodString;
+    }, z.core.$strip>;
+    preview: z.ZodString;
+    aspectRatio: z.ZodOptional<z.ZodEnum<{
+        "1/1": "1/1";
+        "3/4": "3/4";
+        "16/9": "16/9";
+        "21/9": "21/9";
+        "32/9": "32/9";
+        "48/9": "48/9";
+    }>>;
+    caption: z.ZodOptional<z.ZodString>;
+    roundedCorners: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$loose>;
+export declare const validateVideoProps: (props: unknown) => ValidationResult<VideoCmsProps>;
+export declare const isVideoProps: (props: unknown) => props is VideoCmsProps;

package/dist/components/Video/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/YouTubeVideo/index.js

@@ -7,7 +7,7 @@ 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 } from "../../BorderRadius-Co-IV3fn.js";
+import { b as borderRadiusMd } from "../../BorderRadius-0jhn76gB.js";
 import { s as spacingMd } from "../../Spacing-Dj-qX3Z5.js";
 import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
 import { a as consentVariantVideo } from "../../ButtonWidthBehavior-DuO_4JKC.js";

package/dist/contentful/props/index.d.ts

@@ -82,6 +82,7 @@ import { ToggleButtonProps } from '../../components/ToggleButton/props';
 import { ToggleButtonProviderProps } from '../../components/ToggleButtonProvider/props';
 import { TrayProps } from '../../components/Tray/props';
 import { UtilityLinkProps } from '../../components/UtilityLink/props';
+import { VideoProps } from '../../components/Video/props';
 import { YouTubeVideoProps } from '../../components/YouTubeVideo/props';
 import { CmsBrixComponentProps, CmsProps, MinimalCmsProps } from '../../foundations/BrixComponentProps';
 import { GridConfig } from '../../foundations/GridConfig';
@@ -168,6 +169,7 @@ export type ToggleButtonCmsProps = CmsProps<ToggleButtonProps>;
 export type ToggleButtonProviderCmsProps = CmsProps<ToggleButtonProviderProps>;
 export type TrayCmsProps = CmsProps<TrayProps>;
 export type UtilityLinkCmsProps = CmsProps<UtilityLinkProps>;
+export type VideoCmsProps = CmsProps<VideoProps>;
 export type YouTubeVideoCmsProps = CmsProps<YouTubeVideoProps>;
 export type TextListCmsProps = CmsProps<TextListProps>;
 export type TextListItemCmsProps = CmsProps<TextListItemProps>;

package/dist/contentful/registry/ContentFulComponentName.d.ts

@@ -1,2 +1,2 @@
-export declare const contentFulComponentNames: readonly ["Accordion", "AccordionGroup", "ArtDirectedImage", "Badge", "Body", "BottomBar", "Button", "ButtonAsLink", "ButtonGroup", "Calendar", "Card", "Callout", "CarouselItem", "Carousel", "Checkbox", "CheckboxGroup", "ColorSwatch", "ColorSwatchGroup", "Container", "ConsentMessage", "DateInput", "Dialog", "Divider", "DiscoveryCard", "DiscoveryCardGroup", "EnergySnippet", "FeatureCard", "FeatureCardGroup", "Fieldset", "Filter", "FilterGroup", "Flex", "Footnote", "Form", "FootnoteLink", "FootnoteSection", "GoogleMap", "Grid", "GridItem", "Heading", "HifiIcon", "IconButton", "IconLoader", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "InfoBanner", "Input", "InputGroup", "Label", "PasswordInput", "Legend", "Link", "LinkAsButton", "LinkList", "LinkListItem", "LoadingSpinner", "MarTechPlaceholder", "MediaText", "Notification", "QuickLink", "QuickLinkList", "Radio", "RadioGroup", "Rating", "Picker", "PickerGroup", "Price", "ProductCard", "TabularPrice", "Textarea", "TextList", "TextListItem", "TimeInput", "ToggleButton", "ToggleButtonProvider", "RichTextContentful", "SearchInput", "SelectInput", "Stepper", "SuggestInput", "Switch", "TabGroup", "Tray", "UtilityLink", "YouTubeVideo"];
+export declare const contentFulComponentNames: readonly ["Accordion", "AccordionGroup", "ArtDirectedImage", "Badge", "Body", "BottomBar", "Button", "ButtonAsLink", "ButtonGroup", "Calendar", "Card", "Callout", "CarouselItem", "Carousel", "Checkbox", "CheckboxGroup", "ColorSwatch", "ColorSwatchGroup", "Container", "ConsentMessage", "DateInput", "Dialog", "Divider", "DiscoveryCard", "DiscoveryCardGroup", "EnergySnippet", "FeatureCard", "FeatureCardGroup", "Fieldset", "Filter", "FilterGroup", "Flex", "Footnote", "Form", "FootnoteLink", "FootnoteSection", "GoogleMap", "Grid", "GridItem", "Heading", "HifiIcon", "IconButton", "IconLoader", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "InfoBanner", "Input", "InputGroup", "Label", "PasswordInput", "Legend", "Link", "LinkAsButton", "LinkList", "LinkListItem", "LoadingSpinner", "MarTechPlaceholder", "MediaText", "Notification", "QuickLink", "QuickLinkList", "Radio", "RadioGroup", "Rating", "Picker", "PickerGroup", "Price", "ProductCard", "TabularPrice", "Textarea", "TextList", "TextListItem", "TimeInput", "ToggleButton", "ToggleButtonProvider", "RichTextContentful", "SearchInput", "SelectInput", "Stepper", "SuggestInput", "Switch", "TabGroup", "Tray", "UtilityLink", "Video", "YouTubeVideo"];
 export type ContentFulComponentName = (typeof contentFulComponentNames)[number];

package/dist/contentful/registry/SupportedBrixProps.d.ts

@@ -1,2 +1,2 @@
-import { AccordionCmsProps, AccordionGroupCmsProps, ArtDirectedImageCmsProps, BadgeCmsProps, BodyCmsProps, BottomBarCmsProps, ButtonAsLinkCmsProps, ButtonCmsProps, ButtonGroupCmsProps, CalendarCmsProps, CalloutCmsProps, CardCmsProps, CarouselCmsProps, CarouselItemCmsProps, CheckboxCmsProps, CheckboxGroupCmsProps, ColorSwatchCmsProps, ColorSwatchGroupCmsProps, ConsentMessageCmsProps, ContainerCmsProps, DateInputCmsProps, DialogCmsProps, DiscoveryCardCmsProps, DiscoveryCardGroupCmsProps, DividerCmsProps, EnergySnippetCmsProps, FeatureCardCmsProps, FeatureCardGroupCmsProps, FilterCmsProps, FilterGroupCmsProps, FlexCmsProps, FootnoteCmsProps, FootnoteLinkCmsProps, FootnoteSectionCmsProps, FormCmsProps, GoogleMapCmsProps, GridCmsProps, GridItemCmsProps, HeadingCmsProps, HifiIconCmsProps, IconButtonCmsProps, IconLoaderCmsProps, IconSnippetCmsProps, IconSnippetListCmsProps, ImageCmsProps, ImageHeaderCmsProps, InfoBannerCmsProps, InputGroupCmsProps, InputCmsProps, LabelCmsProps, LinkAsButtonCmsProps, LinkCmsProps, LinkListCmsProps, LinkListItemCmsProps, LoadingSpinnerCmsProps, MarTechPlaceholderCmsProps, MediaTextCmsProps, NotificationCmsProps, PriceCmsProps, ProductCardCmsProps, QuickLinkCmsProps, QuickLinkListCmsProps, RadioCmsProps, RadioGroupCmsProps, RatingCmsProps, RichTextContentfulCmsProps, SearchInputCmsProps, SelectInputCmsProps, StepperCmsProps, SuggestInputCmsProps, SwitchCmsProps, TabGroupCmsProps, TabularPriceCmsProps, TextareaCmsProps, TextListCmsProps, TextListItemCmsProps, TimeInputCmsProps, ToggleButtonCmsProps, ToggleButtonProviderCmsProps, TrayCmsProps, UtilityLinkCmsProps, YouTubeVideoCmsProps } from '../props';
-export type SupportedBrixComponentsProps = AccordionGroupCmsProps | AccordionCmsProps | ArtDirectedImageCmsProps | BadgeCmsProps | BodyCmsProps | BottomBarCmsProps | ButtonGroupCmsProps | ButtonCmsProps | ButtonAsLinkCmsProps | CalendarCmsProps | CardCmsProps | CalloutCmsProps | CarouselCmsProps | CarouselItemCmsProps | CheckboxCmsProps | CheckboxGroupCmsProps | ColorSwatchCmsProps | ColorSwatchGroupCmsProps | ConsentMessageCmsProps | ContainerCmsProps | DateInputCmsProps | DialogCmsProps | DiscoveryCardGroupCmsProps | DiscoveryCardCmsProps | DividerCmsProps | EnergySnippetCmsProps | FeatureCardCmsProps | FeatureCardGroupCmsProps | FilterCmsProps | FilterGroupCmsProps | FlexCmsProps | FootnoteCmsProps | FormCmsProps | FootnoteSectionCmsProps | FootnoteLinkCmsProps | GoogleMapCmsProps | GridItemCmsProps | GridCmsProps | HeadingCmsProps | HifiIconCmsProps | IconButtonCmsProps | IconLoaderCmsProps | IconSnippetListCmsProps | IconSnippetCmsProps | ImageCmsProps | ImageHeaderCmsProps | InfoBannerCmsProps | InputGroupCmsProps | InputCmsProps | LabelCmsProps | LinkListItemCmsProps | LinkListCmsProps | LinkCmsProps | LinkAsButtonCmsProps | LoadingSpinnerCmsProps | MarTechPlaceholderCmsProps | MediaTextCmsProps | NotificationCmsProps | PriceCmsProps | ProductCardCmsProps | QuickLinkCmsProps | QuickLinkListCmsProps | RadioCmsProps | RadioGroupCmsProps | RatingCmsProps | RichTextContentfulCmsProps | SearchInputCmsProps | SelectInputCmsProps | StepperCmsProps | SuggestInputCmsProps | SwitchCmsProps | TabGroupCmsProps | TabularPriceCmsProps | TextareaCmsProps | TextListCmsProps | TextListItemCmsProps | TimeInputCmsProps | ToggleButtonCmsProps | ToggleButtonProviderCmsProps | TrayCmsProps | UtilityLinkCmsProps | YouTubeVideoCmsProps;
+import { AccordionCmsProps, AccordionGroupCmsProps, ArtDirectedImageCmsProps, BadgeCmsProps, BodyCmsProps, BottomBarCmsProps, ButtonAsLinkCmsProps, ButtonCmsProps, ButtonGroupCmsProps, CalendarCmsProps, CalloutCmsProps, CardCmsProps, CarouselCmsProps, CarouselItemCmsProps, CheckboxCmsProps, CheckboxGroupCmsProps, ColorSwatchCmsProps, ColorSwatchGroupCmsProps, ConsentMessageCmsProps, ContainerCmsProps, DateInputCmsProps, DialogCmsProps, DiscoveryCardCmsProps, DiscoveryCardGroupCmsProps, DividerCmsProps, EnergySnippetCmsProps, FeatureCardCmsProps, FeatureCardGroupCmsProps, FilterCmsProps, FilterGroupCmsProps, FlexCmsProps, FootnoteCmsProps, FootnoteLinkCmsProps, FootnoteSectionCmsProps, FormCmsProps, GoogleMapCmsProps, GridCmsProps, GridItemCmsProps, HeadingCmsProps, HifiIconCmsProps, IconButtonCmsProps, IconLoaderCmsProps, IconSnippetCmsProps, IconSnippetListCmsProps, ImageCmsProps, ImageHeaderCmsProps, InfoBannerCmsProps, InputGroupCmsProps, InputCmsProps, LabelCmsProps, LinkAsButtonCmsProps, LinkCmsProps, LinkListCmsProps, LinkListItemCmsProps, LoadingSpinnerCmsProps, MarTechPlaceholderCmsProps, MediaTextCmsProps, NotificationCmsProps, PriceCmsProps, ProductCardCmsProps, QuickLinkCmsProps, QuickLinkListCmsProps, RadioCmsProps, RadioGroupCmsProps, RatingCmsProps, RichTextContentfulCmsProps, SearchInputCmsProps, SelectInputCmsProps, StepperCmsProps, SuggestInputCmsProps, SwitchCmsProps, TabGroupCmsProps, TabularPriceCmsProps, TextareaCmsProps, TextListCmsProps, TextListItemCmsProps, TimeInputCmsProps, ToggleButtonCmsProps, ToggleButtonProviderCmsProps, TrayCmsProps, UtilityLinkCmsProps, VideoCmsProps, YouTubeVideoCmsProps } from '../props';
+export type SupportedBrixComponentsProps = AccordionGroupCmsProps | AccordionCmsProps | ArtDirectedImageCmsProps | BadgeCmsProps | BodyCmsProps | BottomBarCmsProps | ButtonGroupCmsProps | ButtonCmsProps | ButtonAsLinkCmsProps | CalendarCmsProps | CardCmsProps | CalloutCmsProps | CarouselCmsProps | CarouselItemCmsProps | CheckboxCmsProps | CheckboxGroupCmsProps | ColorSwatchCmsProps | ColorSwatchGroupCmsProps | ConsentMessageCmsProps | ContainerCmsProps | DateInputCmsProps | DialogCmsProps | DiscoveryCardGroupCmsProps | DiscoveryCardCmsProps | DividerCmsProps | EnergySnippetCmsProps | FeatureCardCmsProps | FeatureCardGroupCmsProps | FilterCmsProps | FilterGroupCmsProps | FlexCmsProps | FootnoteCmsProps | FormCmsProps | FootnoteSectionCmsProps | FootnoteLinkCmsProps | GoogleMapCmsProps | GridItemCmsProps | GridCmsProps | HeadingCmsProps | HifiIconCmsProps | IconButtonCmsProps | IconLoaderCmsProps | IconSnippetListCmsProps | IconSnippetCmsProps | ImageCmsProps | ImageHeaderCmsProps | InfoBannerCmsProps | InputGroupCmsProps | InputCmsProps | LabelCmsProps | LinkListItemCmsProps | LinkListCmsProps | LinkCmsProps | LinkAsButtonCmsProps | LoadingSpinnerCmsProps | MarTechPlaceholderCmsProps | MediaTextCmsProps | NotificationCmsProps | PriceCmsProps | ProductCardCmsProps | QuickLinkCmsProps | QuickLinkListCmsProps | RadioCmsProps | RadioGroupCmsProps | RatingCmsProps | RichTextContentfulCmsProps | SearchInputCmsProps | SelectInputCmsProps | StepperCmsProps | SuggestInputCmsProps | SwitchCmsProps | TabGroupCmsProps | TabularPriceCmsProps | TextareaCmsProps | TextListCmsProps | TextListItemCmsProps | TimeInputCmsProps | ToggleButtonCmsProps | ToggleButtonProviderCmsProps | TrayCmsProps | UtilityLinkCmsProps | VideoCmsProps | YouTubeVideoCmsProps;

package/dist/contentful/registry/index.js

@@ -1,4 +1,4 @@
-const contentFulComponentNames = ["Accordion", "AccordionGroup", "ArtDirectedImage", "Badge", "Body", "BottomBar", "Button", "ButtonAsLink", "ButtonGroup", "Calendar", "Card", "Callout", "CarouselItem", "Carousel", "Checkbox", "CheckboxGroup", "ColorSwatch", "ColorSwatchGroup", "Container", "ConsentMessage", "DateInput", "Dialog", "Divider", "DiscoveryCard", "DiscoveryCardGroup", "EnergySnippet", "FeatureCard", "FeatureCardGroup", "Fieldset", "Filter", "FilterGroup", "Flex", "Footnote", "Form", "FootnoteLink", "FootnoteSection", "GoogleMap", "Grid", "GridItem", "Heading", "HifiIcon", "IconButton", "IconLoader", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "InfoBanner", "Input", "InputGroup", "Label", "PasswordInput", "Legend", "Link", "LinkAsButton", "LinkList", "LinkListItem", "LoadingSpinner", "MarTechPlaceholder", "MediaText", "Notification", "QuickLink", "QuickLinkList", "Radio", "RadioGroup", "Rating", "Picker", "PickerGroup", "Price", "ProductCard", "TabularPrice", "Textarea", "TextList", "TextListItem", "TimeInput", "ToggleButton", "ToggleButtonProvider", "RichTextContentful", "SearchInput", "SelectInput", "Stepper", "SuggestInput", "Switch", "TabGroup", "Tray", "UtilityLink", "YouTubeVideo"];
+const contentFulComponentNames = ["Accordion", "AccordionGroup", "ArtDirectedImage", "Badge", "Body", "BottomBar", "Button", "ButtonAsLink", "ButtonGroup", "Calendar", "Card", "Callout", "CarouselItem", "Carousel", "Checkbox", "CheckboxGroup", "ColorSwatch", "ColorSwatchGroup", "Container", "ConsentMessage", "DateInput", "Dialog", "Divider", "DiscoveryCard", "DiscoveryCardGroup", "EnergySnippet", "FeatureCard", "FeatureCardGroup", "Fieldset", "Filter", "FilterGroup", "Flex", "Footnote", "Form", "FootnoteLink", "FootnoteSection", "GoogleMap", "Grid", "GridItem", "Heading", "HifiIcon", "IconButton", "IconLoader", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "InfoBanner", "Input", "InputGroup", "Label", "PasswordInput", "Legend", "Link", "LinkAsButton", "LinkList", "LinkListItem", "LoadingSpinner", "MarTechPlaceholder", "MediaText", "Notification", "QuickLink", "QuickLinkList", "Radio", "RadioGroup", "Rating", "Picker", "PickerGroup", "Price", "ProductCard", "TabularPrice", "Textarea", "TextList", "TextListItem", "TimeInput", "ToggleButton", "ToggleButtonProvider", "RichTextContentful", "SearchInput", "SelectInput", "Stepper", "SuggestInput", "Switch", "TabGroup", "Tray", "UtilityLink", "Video", "YouTubeVideo"];
 export {
   contentFulComponentNames
 };

package/dist/contentful/validation/index.d.ts

@@ -95,6 +95,7 @@ export { validateToggleButtonProps } from '../../components/ToggleButton/validat
 export { validateToggleButtonProviderProps } from '../../components/ToggleButtonProvider/validate';
 export { validateTrayProps } from '../../components/Tray/validate';
 export { validateUtilityLinkProps } from '../../components/UtilityLink/validate';
+export { validateVideoProps } from '../../components/Video/validate';
 export { validateYouTubeVideoProps } from '../../components/YouTubeVideo/validate';
 export { validateBrixComponentProps, validateMinimalCmsProps } from '../../foundations/BrixComponentProps/validate';
 export { validateGridConfig } from '../../foundations/GridConfig/validate';

package/dist/contentful/validation/index.js

@@ -1,6 +1,6 @@
 import { h as spacings } from "../../Spacing-Dj-qX3Z5.js";
 import { b as bodyComponentName } from "../../componentName-BoJP6JLf.js";
-import { e as buttonComponentName, f as buttonAsLinkComponentName, g as buttonGroupComponentName, h as flexComponentName, d as notificationStatuses } from "../../props-BPxy0GPb.js";
+import { g as buttonComponentName, h as buttonAsLinkComponentName, e as buttonGroupComponentName, f as flexComponentName, d as notificationStatuses } from "../../props-Bod9bL2v.js";
 import { h as headingComponentName } from "../../componentName-C1oXAOj7.js";
 import { i as imageComponentName, y as youTubeVideoComponentName, c as mediaTextPositions } from "../../props-B9bM_KV-.js";
 import { h as inlineLinkComponentName, l as linkAsButtonComponentName, g as iconSnippetTags, b as iconSnippetAligns, f as iconSnippetOrientations, c as iconSnippetIconSizes } from "../../props-BCMLpYc6.js";
@@ -10,7 +10,7 @@ import { a as richTextComponentName, r as richTextContentfulComponentName, B as
 import { c as fontWeights } from "../../FontWeight-C8c-UnWu.js";
 import { e as textHeadingSizes } from "../../HeadingSize-O__w72MO.js";
 import { b as headingAligns, c as headingTags } from "../../props-GrMT6XLD.js";
-import { g as aspectRatios, m as imageObjectPositions, l as imageObjectFits } from "../../props-CLadRD1u.js";
+import { g as aspectRatios, l as imageObjectFits } from "../../props-CLadRD1u.js";
 import { b as badgeAppearances, a as badgeSizes } from "../../props-Dt5kqR3j.js";
 import { b as textBodySize } from "../../TextBodySize-CP9q4gRv.js";
 import { e as bodyTags, d as bodyAligns } from "../../props-DxcKxrWg.js";
@@ -24,11 +24,12 @@ import { a as inputStateSuccess, i as inputStateError } from "../../props-Czq9XX
 import { a as colorSwatchSizeSmall, c as colorSwatchSizeMedium } from "../../props-D2ykLHP1.js";
 import { e as containerAppearances, f as containerPaddings, g as containerTags } from "../../props-A95cwKat.js";
 import { l as linkAppearances } from "../../props-DTToXJmH.js";
-import { i as priceSizes, b as priceAligns, e as priceOrientations, t as tabularPricePrefixWeights } from "../../props-P3bM0HEk.js";
+import { i as priceSizes, b as priceAligns, e as priceOrientations } from "../../props-E4PNCuS6.js";
 import { b as discoveryCardOrientations, a as discoveryCardOrientationVertical, d as discoveryCardOrientationHorizontal } from "../../props-DjRkcEE8.js";
 import { a as energySnippetOrientations, b as energySnippetSizes, e as energyClasses } from "../../props-DFHEdEnk.js";
 import { i as iconSizes } from "../../props-BBT_7iiy.js";
 import { p as positionTypes } from "../../PositionType-BIdZQO2H.js";
+import { a as cornerStyles } from "../../CornerStyle-n77nckhh.js";
 import { b as gridItemTags, g as gridAligns, c as gridTags } from "../../props-B4dAdfyc.js";
 import { h as hifiIconSizes } from "../../props-BgLhK53x.js";
 import { b as iconButtonShapes } from "../../props-B_ZIEzzu.js";
@@ -38,6 +39,7 @@ import { l as linkListItemOrientations } from "../../props-KyOo_gFu.js";
 import { b as linkListVariants } from "../../props-DSy1T2sH.js";
 import { o as overlayAppearancePrimary, a as overlayAppearanceSecondary } from "../../props-BYequ6c_.js";
 import { t as tabGroupWidth, c as tabIconPositions } from "../../props-eUlhO4k_.js";
+import { t as tabularPricePrefixWeights } from "../../props-n71pckjd.js";
 var iconNames = [
   "AbTest",
   "Above28",
@@ -15136,7 +15138,8 @@ const toggleButtonComponentName = "ToggleButton";
 const toggleButtonProviderComponentName = "ToggleButtonProvider";
 const trayComponentName = "Tray";
 const utilityLinkComponentName = "UtilityLink";
-const componentNames = [accordionComponentName, accordionGroupComponentName, artDirectedImageComponentName, badgeComponentName, bodyComponentName, bottomBarComponentName, buttonComponentName, buttonAsLinkComponentName, buttonGroupComponentName, calendarComponentName, cardComponentName, calloutComponentName, carouselItemComponentName, carouselComponentName, checkboxComponentName, checkboxGroupComponentName, collapsibleComponentName, colorSwatchComponentName, colorSwatchGroupComponentName, consentMessageComponentName, containerComponentName, dateInputComponentName, demoBoxComponentName, dialogComponentName, discoveryCardComponentName, discoveryCardGroupComponentName, dividerComponentName, energySnippetComponentName, featureCardComponentName, featureCardGroupComponentName, fieldsetComponentName, filterComponentName, filterGroupComponentName, flexComponentName, flexItemComponentName, footnoteComponentName, footnoteSectionComponentName, footnoteContentComponentName, footnoteLinkComponentName, formComponentName, formElementComponentName, formHelperMessageComponentName, googleMapComponentName, gridComponentName, gridItemComponentName, headingComponentName, hifiIconComponentName, iconComponentName, iconButtonComponentName, iconLoaderComponentName, iconSnippetComponentName, iconSnippetListComponentName, imageComponentName, imageHeaderComponentName, infoBannerComponentName, inlineIconComponentName, inlineLinkComponentName, inputComponentName, passwordInputComponentName, inputGroupComponentName, labelComponentName, legendComponentName, linkComponentName, linkAsButtonComponentName, linkListComponentName, linkListItemComponentName, linkListItemAsButtonComponentName, loadingSpinnerComponentName, localStyleComponentName, mediaTextComponentName, marTechPlaceholderComponentName, notificationComponentName, openTextFootnoteAdapterComponentName, overlayComponentName, pickerComponentName, pickerGroupComponentName, priceComponentName, productCardComponentName, quickLinkComponentName, quickLinkListComponentName, radioComponentName, radioGroupComponentName, ratingComponentName, richTextComponentName, richTextContentfulComponentName, screenreaderOnlyComponentName, searchInputComponentName, selectInputComponentName, smoothScrollAreaComponentName, stepperComponentName, suggestInputComponentName, switchComponentName, tabGroupComponentName, tableComponentName, tabularPriceComponentName, textareaComponentName, textListItemComponentName, textListComponentName, timeInputComponentName, toggleButtonComponentName, toggleButtonProviderComponentName, trayComponentName, utilityLinkComponentName, youTubeVideoComponentName];
+const videoComponentName = "Video";
+const componentNames = [accordionComponentName, accordionGroupComponentName, artDirectedImageComponentName, badgeComponentName, bodyComponentName, bottomBarComponentName, buttonComponentName, buttonAsLinkComponentName, buttonGroupComponentName, calendarComponentName, cardComponentName, calloutComponentName, carouselItemComponentName, carouselComponentName, checkboxComponentName, checkboxGroupComponentName, collapsibleComponentName, colorSwatchComponentName, colorSwatchGroupComponentName, consentMessageComponentName, containerComponentName, dateInputComponentName, demoBoxComponentName, dialogComponentName, discoveryCardComponentName, discoveryCardGroupComponentName, dividerComponentName, energySnippetComponentName, featureCardComponentName, featureCardGroupComponentName, fieldsetComponentName, filterComponentName, filterGroupComponentName, flexComponentName, flexItemComponentName, footnoteComponentName, footnoteSectionComponentName, footnoteContentComponentName, footnoteLinkComponentName, formComponentName, formElementComponentName, formHelperMessageComponentName, googleMapComponentName, gridComponentName, gridItemComponentName, headingComponentName, hifiIconComponentName, iconComponentName, iconButtonComponentName, iconLoaderComponentName, iconSnippetComponentName, iconSnippetListComponentName, imageComponentName, imageHeaderComponentName, infoBannerComponentName, inlineIconComponentName, inlineLinkComponentName, inputComponentName, passwordInputComponentName, inputGroupComponentName, labelComponentName, legendComponentName, linkComponentName, linkAsButtonComponentName, linkListComponentName, linkListItemComponentName, linkListItemAsButtonComponentName, loadingSpinnerComponentName, localStyleComponentName, mediaTextComponentName, marTechPlaceholderComponentName, notificationComponentName, openTextFootnoteAdapterComponentName, overlayComponentName, pickerComponentName, pickerGroupComponentName, priceComponentName, productCardComponentName, quickLinkComponentName, quickLinkListComponentName, radioComponentName, radioGroupComponentName, ratingComponentName, richTextComponentName, richTextContentfulComponentName, screenreaderOnlyComponentName, searchInputComponentName, selectInputComponentName, smoothScrollAreaComponentName, stepperComponentName, suggestInputComponentName, switchComponentName, tabGroupComponentName, tableComponentName, tabularPriceComponentName, textareaComponentName, textListItemComponentName, textListComponentName, timeInputComponentName, toggleButtonComponentName, toggleButtonProviderComponentName, trayComponentName, utilityLinkComponentName, videoComponentName, youTubeVideoComponentName];
 const minimalPropsSchema = looseObject({
   component: _enum(componentNames),
   uid: string$1().trim().nonempty()
@@ -15272,7 +15275,7 @@ const accordionSchema = cmsBrixComponentPropsSchema.extend({
     size: true,
     bottomSpacing: true
   }),
-  iconName: z.enum(iconNames).optional(),
+  icon: z.enum(iconNames).optional(),
   expanded: z.boolean().optional(),
   verticalScrollOffset: z.number().optional(),
   handleOnToggle: z.function().optional()
@@ -15311,7 +15314,6 @@ const validateAccordionGroupProps = (props) => {
 const imageSchema = cmsBrixComponentPropsSchema.extend({
   component: z.literal(imageComponentName),
   objectFit: z.enum(imageObjectFits).optional(),
-  objectPosition: z.enum(imageObjectPositions).optional(),
   roundedCorners: z.boolean().optional(),
   src: z.string().trim().nonempty(),
   alt: z.string().optional(),
@@ -16596,7 +16598,7 @@ const validateFormHelperStatusIconProps = (props) => {
     data: result.data
   };
 };
-const viewportHeightSchema = z.object({
+const heightSchema = z.object({
   sm: z.number().positive(),
   md: z.number().positive().optional(),
   lg: z.number().positive().optional()
@@ -16604,8 +16606,10 @@ const viewportHeightSchema = z.object({
 const googleMapSchema = cmsPatternPropsSchema.extend({
   component: z.literal(googleMapComponentName),
   apiKey: z.string().trim().nonempty(),
-  viewportHeight: viewportHeightSchema,
+  height: heightSchema.optional(),
+  viewportHeight: heightSchema.optional(),
   roundedCorners: z.boolean().optional(),
+  corners: z.enum(cornerStyles).optional(),
   consentMessage: consentMessageSchema.omit({
     variant: true
   }),
@@ -16916,7 +16920,6 @@ const linkListItemSchema = cmsBrixComponentPropsSchema.extend({
     size: true,
     bottomSpacing: true
   }).optional(),
-  isLastItemInList: z.boolean().optional(),
   elevation: z.boolean().optional(),
   href: z.string().trim().nonempty().optional()
 });
@@ -17689,6 +17692,31 @@ const validateTrayProps = (props) => {
     data: result.data
   };
 };
+const videoSourceSchema = z.object({
+  src: z.string().trim().nonempty(),
+  type: z.string().trim().nonempty()
+});
+const videoSchema = cmsBrixComponentPropsSchema.extend({
+  component: z.literal(videoComponentName),
+  video: videoSourceSchema,
+  preview: z.string().trim().nonempty(),
+  aspectRatio: z.enum(aspectRatios).optional(),
+  caption: z.string().trim().nonempty().optional(),
+  roundedCorners: z.boolean().optional()
+});
+const validateVideoProps = (props) => {
+  const result = videoSchema.safeParse(props);
+  if (!result.success) {
+    return {
+      ok: false,
+      issues: result.error.issues
+    };
+  }
+  return {
+    ok: true,
+    data: result.data
+  };
+};
 export {
   validateAccordionGroupProps,
   validateAccordionProps,
@@ -17792,5 +17820,6 @@ export {
   validateToggleButtonProviderProps,
   validateTrayProps,
   validateUtilityLinkProps,
+  validateVideoProps,
   validateYouTubeVideoProps
 };

package/dist/{cssVars-DIZd9rHN.js → cssVars-DKs5LlTN.js}

@@ -147,7 +147,8 @@ const iconColors = {
     dark: colorVodafoneWhite
   },
   colorIconNeutralStatic: {
-    light: colorBlack95
+    light: colorBlack95,
+    dark: colorBlack95
   },
   colorIconInverse: {
     light: colorVodafoneWhite,
@@ -250,6 +251,113 @@ const textColors = {
     dark: colorBlack25
   }
 };
+const typographyAndIconSizeCssVars = `
+    :root {
+        --bodyMdFontSize: var(--fontSize16);
+        --bodyMdLineHeight: var(--lineHeight125);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --bodyMdFontSize: var(--fontSize18);
+            --bodyMdLineHeight: var(--lineHeight144);
+        }
+
+        --bodySmFontSize: var(--fontSize14);
+        --bodySmLineHeight: var(--lineHeight128);
+
+        --headingXlFontSize: var(--fontSize32);
+        --headingXlLineHeight: var(--lineHeight125);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingXlFontSize: var(--fontSize56);
+            --headingXlLineHeight: var(--lineHeight114);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingXlFontSize: var(--fontSize64);
+            --headingXlLineHeight: var(--lineHeight112);
+        }
+
+        --headingLgFontSize: var(--fontSize28);
+        --headingLgLineHeight: var(--lineHeight128);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingLgFontSize: var(--fontSize40);
+            --headingLgLineHeight: var(--lineHeight120);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingLgFontSize: var(--fontSize56);
+            --headingLgLineHeight: var(--lineHeight114);
+        }
+
+        --headingMdFontSize: var(--fontSize24);
+        --headingMdLineHeight: var(--lineHeight133);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingMdFontSize: var(--fontSize32);
+            --headingMdLineHeight: var(--lineHeight125);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingMdFontSize: var(--fontSize40);
+            --headingMdLineHeight: var(--lineHeight120);
+        }
+
+        --headingSmFontSize: var(--fontSize20);
+        --headingSmLineHeight: var(--lineHeight140);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingSmFontSize: var(--fontSize24);
+            --headingSmLineHeight: var(--lineHeight133);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingSmFontSize: var(--fontSize28);
+            --headingSmLineHeight: var(--lineHeight128);
+        }
+
+        --headingXsFontSize: var(--fontSize18);
+        --headingXsLineHeight: var(--lineHeight144);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingXsFontSize: var(--fontSize20);
+            --headingXsLineHeight: var(--lineHeight140);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingXsFontSize: var(--fontSize20);
+            --headingXsLineHeight: var(--lineHeight140);
+        }
+    }
+    :root {
+        --iconSize2xs: 16px;
+        --iconSizeXs: 20px;
+        --iconSizeSm: 20px;
+        --iconSizeMd: 24px;
+        --iconSizeLg: 32px;
+        --iconSizeXl: 36px;
+        --iconSize2xl: 40px;
+        --iconSize3xl: 48px;
+        --iconSize4xl: 56px;
+        --iconSize5xl: 64px;
+        --iconSize6xl: 72px;
+        --iconSize7xl: 84px;
+        --iconSize8xl: 96px;
+        --iconSize9xl: 120px;
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --iconSize2xs: 16px;
+            --iconSizeXs: 20px;
+            --iconSizeSm: 24px;
+            --iconSizeMd: 32px;
+            --iconSizeLg: 36px;
+            --iconSizeXl: 40px;
+            --iconSize2xl: 48px;
+            --iconSize3xl: 56px;
+            --iconSize4xl: 64px;
+            --iconSize5xl: 72px;
+            --iconSize6xl: 84px;
+            --iconSize7xl: 96px;
+            --iconSize8xl: 120px;
+            --iconSize9xl: 192px;
+        }
+    }
+`;
 const cssVarsString = `
     :root {
 
@@ -549,7 +657,7 @@ const cssVarsString = `
 
             --colorIconBrand: var(--${iconColors.colorIconBrand.dark});
             --colorIconNeutral: var(--${iconColors.colorIconNeutral.dark});
-            --colorIconNeutralStatic: var(--${iconColors.colorIconBrand.dark});
+            --colorIconNeutralStatic: var(--${iconColors.colorIconNeutralStatic.dark});
             --colorIconInverse: var(--${iconColors.colorIconInverse.dark});
             --colorIconInverseStatic: var(--${iconColors.colorIconInverseStatic.dark});
             --colorIconSuccess: var(--${iconColors.colorIconSuccess.dark});
@@ -637,7 +745,7 @@ const cssVarsString = `
 
                 --colorIconBrand: var(--${iconColors.colorIconBrand.dark});
                 --colorIconNeutral: var(--${iconColors.colorIconNeutral.dark});
-                --colorIconNeutralStatic: var(--${iconColors.colorIconBrand.dark});
+                --colorIconNeutralStatic: var(--${iconColors.colorIconNeutralStatic.dark});
                 --colorIconInverse: var(--${iconColors.colorIconInverse.dark});
                 --colorIconInverseStatic: var(--${iconColors.colorIconInverseStatic.dark});
                 --colorIconSuccess: var(--${iconColors.colorIconSuccess.dark});
@@ -649,111 +757,7 @@ const cssVarsString = `
             }
         }
     }
-    :root {
-        --bodyMdFontSize: var(--fontSize16);
-        --bodyMdLineHeight: var(--lineHeight125);
-
-        @media screen and (min-width: ${breakpoint_medium}) {
-            --bodyMdFontSize: var(--fontSize18);
-            --bodyMdLineHeight: var(--lineHeight144);
-        }
-
-        --bodySmFontSize: var(--fontSize14);
-        --bodySmLineHeight: var(--lineHeight128);
-
-        --headingXlFontSize: var(--fontSize32);
-        --headingXlLineHeight: var(--lineHeight125);
-
-        @media screen and (min-width: ${breakpoint_medium}) {
-            --headingXlFontSize: var(--fontSize56);
-            --headingXlLineHeight: var(--lineHeight114);
-        }
-        @media screen and (min-width: ${breakpoint_large}) {
-            --headingXlFontSize: var(--fontSize64);
-            --headingXlLineHeight: var(--lineHeight112);
-        }
-
-        --headingLgFontSize: var(--fontSize28);
-        --headingLgLineHeight: var(--lineHeight128);
-
-        @media screen and (min-width: ${breakpoint_medium}) {
-            --headingLgFontSize: var(--fontSize40);
-            --headingLgLineHeight: var(--lineHeight120);
-        }
-        @media screen and (min-width: ${breakpoint_large}) {
-            --headingLgFontSize: var(--fontSize56);
-            --headingLgLineHeight: var(--lineHeight114);
-        }
-
-        --headingMdFontSize: var(--fontSize24);
-        --headingMdLineHeight: var(--lineHeight133);
-
-        @media screen and (min-width: ${breakpoint_medium}) {
-            --headingMdFontSize: var(--fontSize32);
-            --headingMdLineHeight: var(--lineHeight125);
-        }
-        @media screen and (min-width: ${breakpoint_large}) {
-            --headingMdFontSize: var(--fontSize40);
-            --headingMdLineHeight: var(--lineHeight120);
-        }
-
-        --headingSmFontSize: var(--fontSize20);
-        --headingSmLineHeight: var(--lineHeight140);
-
-        @media screen and (min-width: ${breakpoint_medium}) {
-            --headingSmFontSize: var(--fontSize24);
-            --headingSmLineHeight: var(--lineHeight133);
-        }
-        @media screen and (min-width: ${breakpoint_large}) {
-            --headingSmFontSize: var(--fontSize28);
-            --headingSmLineHeight: var(--lineHeight128);
-        }
-
-        --headingXsFontSize: var(--fontSize18);
-        --headingXsLineHeight: var(--lineHeight144);
-
-        @media screen and (min-width: ${breakpoint_medium}) {
-            --headingXsFontSize: var(--fontSize20);
-            --headingXsLineHeight: var(--lineHeight140);
-        }
-        @media screen and (min-width: ${breakpoint_large}) {
-            --headingXsFontSize: var(--fontSize20);
-            --headingXsLineHeight: var(--lineHeight140);
-        }
-    }
-    :root {
-        --iconSize2xs: 16px;
-        --iconSizeXs: 20px;
-        --iconSizeSm: 20px;
-        --iconSizeMd: 24px;
-        --iconSizeLg: 32px;
-        --iconSizeXl: 36px;
-        --iconSize2xl: 40px;
-        --iconSize3xl: 48px;
-        --iconSize4xl: 56px;
-        --iconSize5xl: 64px;
-        --iconSize6xl: 72px;
-        --iconSize7xl: 84px;
-        --iconSize8xl: 96px;
-        --iconSize9xl: 120px;
-
-        @media screen and (min-width: ${breakpoint_medium}) {
-            --iconSize2xs: 16px;
-            --iconSizeXs: 20px;
-            --iconSizeSm: 24px;
-            --iconSizeMd: 32px;
-            --iconSizeLg: 36px;
-            --iconSizeXl: 40px;
-            --iconSize2xl: 48px;
-            --iconSize3xl: 56px;
-            --iconSize4xl: 64px;
-            --iconSize5xl: 72px;
-            --iconSize6xl: 84px;
-            --iconSize7xl: 96px;
-            --iconSize8xl: 120px;
-            --iconSize9xl: 192px;
-        }
-    }
+    ${typographyAndIconSizeCssVars}
 `;
 const cssVars = css(["", ""], cssVarsString);
 export {

package/dist/foundations/BrixComponentProps/componentNames.d.ts

@@ -1,2 +1,2 @@
-export declare const componentNames: readonly ["Accordion", "AccordionGroup", "ArtDirectedImage", "Badge", "Body", "BottomBar", "Button", "ButtonAsLink", "ButtonGroup", "Calendar", "Card", "Callout", "CarouselItem", "Carousel", "Checkbox", "CheckboxGroup", "Collapsible", "ColorSwatch", "ColorSwatchGroup", "ConsentMessage", "Container", "DateInput", "DemoBox", "Dialog", "DiscoveryCard", "DiscoveryCardGroup", "Divider", "EnergySnippet", "FeatureCard", "FeatureCardGroup", "Fieldset", "Filter", "FilterGroup", "Flex", "FlexItem", "Footnote", "FootnoteSection", "FootnoteContent", "FootnoteLink", "Form", "FormElement", "FormHelperMessage", "GoogleMap", "Grid", "GridItem", "Heading", "HifiIcon", "Icon", "IconButton", "IconLoader", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "InfoBanner", "InlineIcon", "InlineLink", "Input", "PasswordInput", "InputGroup", "Label", "Legend", "Link", "LinkAsButton", "LinkList", "LinkListItem", "LinkListItemAsButton", "LoadingSpinner", "LocalStyle", "MediaText", "MarTechPlaceholder", "Notification", "OpenTextFootnoteAdapter", "Overlay", "Picker", "PickerGroup", "Price", "ProductCard", "QuickLink", "QuickLinkList", "Radio", "RadioGroup", "Rating", "RichText", "RichTextContentful", "ScreenreaderOnly", "SearchInput", "SelectInput", "SmoothScrollArea", "Stepper", "SuggestInput", "Switch", "TabGroup", "Table", "TabularPrice", "Textarea", "TextListItem", "TextList", "TimeInput", "ToggleButton", "ToggleButtonProvider", "Tray", "UtilityLink", "YouTubeVideo"];
+export declare const componentNames: readonly ["Accordion", "AccordionGroup", "ArtDirectedImage", "Badge", "Body", "BottomBar", "Button", "ButtonAsLink", "ButtonGroup", "Calendar", "Card", "Callout", "CarouselItem", "Carousel", "Checkbox", "CheckboxGroup", "Collapsible", "ColorSwatch", "ColorSwatchGroup", "ConsentMessage", "Container", "DateInput", "DemoBox", "Dialog", "DiscoveryCard", "DiscoveryCardGroup", "Divider", "EnergySnippet", "FeatureCard", "FeatureCardGroup", "Fieldset", "Filter", "FilterGroup", "Flex", "FlexItem", "Footnote", "FootnoteSection", "FootnoteContent", "FootnoteLink", "Form", "FormElement", "FormHelperMessage", "GoogleMap", "Grid", "GridItem", "Heading", "HifiIcon", "Icon", "IconButton", "IconLoader", "IconSnippet", "IconSnippetList", "Image", "ImageHeader", "InfoBanner", "InlineIcon", "InlineLink", "Input", "PasswordInput", "InputGroup", "Label", "Legend", "Link", "LinkAsButton", "LinkList", "LinkListItem", "LinkListItemAsButton", "LoadingSpinner", "LocalStyle", "MediaText", "MarTechPlaceholder", "Notification", "OpenTextFootnoteAdapter", "Overlay", "Picker", "PickerGroup", "Price", "ProductCard", "QuickLink", "QuickLinkList", "Radio", "RadioGroup", "Rating", "RichText", "RichTextContentful", "ScreenreaderOnly", "SearchInput", "SelectInput", "SmoothScrollArea", "Stepper", "SuggestInput", "Switch", "TabGroup", "Table", "TabularPrice", "Textarea", "TextListItem", "TextList", "TimeInput", "ToggleButton", "ToggleButtonProvider", "Tray", "UtilityLink", "Video", "YouTubeVideo"];
 export type ComponentName = (typeof componentNames)[number];