@vodafone_de/publish-test 0.0.1 → 53.0.0

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

@@ -0,0 +1,12 @@
+import { CalendarMonthIcon } from '@vfde-react/inline-icon-library/CalendarMonthIcon';
+import { ComponentProps, InputHTMLAttributes } from 'react';
+import { IStyledComponent } from 'styled-components';
+import { InlineIconProps } from '../InlineIcon';
+export declare const CalendarMonthIconStyled: IStyledComponent<'web', ComponentProps<typeof CalendarMonthIcon> & InlineIconProps>;
+export declare const DateInputStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import('styled-components').WebTarget | undefined;
+    forwardedAs?: import('styled-components').WebTarget | undefined;
+}, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never> & Partial<Pick<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never>>, "as" | "forwardedAs"> & {
+    as?: import('styled-components').WebTarget | undefined;
+    forwardedAs?: import('styled-components').WebTarget | undefined;
+}, keyof InputHTMLAttributes<HTMLInputElement>> & InputHTMLAttributes<HTMLInputElement>, never>>> & string;

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

@@ -0,0 +1,147 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { DateInputProps } from './props';
+export type DateInputCmsProps = CmsProps<DateInputProps>;
+export declare const dateInputSchema: z.ZodObject<{
+    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>]>>>;
+    uid: z.ZodString;
+    label: z.ZodUnion<readonly [z.ZodString, 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<"Label">;
+        children: z.ZodUnknown;
+        disabled: z.ZodOptional<z.ZodBoolean>;
+        htmlFor: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>]>;
+    status: z.ZodOptional<z.ZodEnum<{
+        error: "error";
+        success: "success";
+    }>>;
+    errorMessage: z.ZodOptional<z.ZodString>;
+    helperText: z.ZodOptional<z.ZodString>;
+    disabled: z.ZodOptional<z.ZodBoolean>;
+    required: z.ZodOptional<z.ZodBoolean>;
+    component: z.ZodLiteral<"DateInput">;
+    onUpdate: z.ZodOptional<z.ZodNever>;
+}, z.core.$loose>;
+export declare const validateDateInputProps: (props: unknown) => ValidationResult<DateInputCmsProps>;
+export declare const isDateInputProps: (props: unknown) => props is DateInputCmsProps;

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

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

package/dist/components/DemoBox/componentName.d.ts

@@ -0,0 +1 @@
+export declare const demoBoxComponentName: "DemoBox";

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

@@ -0,0 +1,4 @@
+import { DemoBoxProps } from './props';
+declare const DemoBox: ({ children, ...props }: DemoBoxProps) => import("react/jsx-runtime").JSX.Element;
+export default DemoBox;
+export * from './props';

package/dist/components/DemoBox/index.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import IconSnippet from "../IconSnippet/index.js";
+import { t as textHeadingXs } from "../../HeadingSize-O__w72MO.js";
+import { i as iconSizeSm } from "../../IconSize-Da9zhR76.js";
+import { b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
+import { D as DemoBoxStyled } from "../../styled-CEsof0yq.js";
+const DemoBox = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(DemoBoxStyled, { ...props, children: [
+  !children && /* @__PURE__ */ jsx(IconSnippet, { iconSize: iconSizeSm, icon: {
+    name: "Sync"
+  }, bottomSpacing: spacingNone, contents: [{
+    uid: `demobox-${props.uid}-heading`,
+    component: "Heading",
+    children: "Child component",
+    size: textHeadingXs
+  }, {
+    uid: `demobox-${props.uid}-richtext`,
+    component: "RichText",
+    html: "<p>This is a placeholder.</p>"
+  }] }),
+  children
+] });
+export {
+  DemoBox as default
+};

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { demoBoxComponentName } from './componentName';
+/**
+ * Props for the DemoBox component.
+ * A visual container used in Storybook for demonstration purposes.
+ */
+export interface DemoBoxProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof demoBoxComponentName;
+}

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

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

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

@@ -0,0 +1,71 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { DemoBoxProps } from './props';
+export type DemoBoxCmsProps = CmsProps<DemoBoxProps>;
+export declare const demoBoxSchema: 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<"DemoBox">;
+}, z.core.$loose>;
+export declare const validateDemoBoxProps: (props: unknown) => ValidationResult<DemoBoxCmsProps>;
+export declare const isDemoBoxProps: (props: unknown) => props is DemoBoxCmsProps;

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

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

package/dist/components/Dialog/componentName.d.ts

@@ -0,0 +1 @@
+export declare const dialogComponentName: "Dialog";

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

@@ -0,0 +1,4 @@
+import { DialogProps } from './props';
+declare const Dialog: ({ heading, children, uid, focusElementOnOpen, focusElementOnClose, buttons, dismissable, contentElements, ...props }: DialogProps) => import('react').ReactPortal | null;
+export default Dialog;
+export * from './props';

package/dist/components/Dialog/index.js

@@ -0,0 +1,180 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import Heading from "../Heading/index.js";
+import { a as fontWeightBold } from "../../FontWeight-C8c-UnWu.js";
+import { b as textHeadingMd } from "../../HeadingSize-O__w72MO.js";
+import { s as spacingMd, b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import ButtonGroup from "../ButtonGroup/index.js";
+import Card from "../Card/index.js";
+import Flex from "../Flex/index.js";
+import IconButton from "../IconButton/index.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { f as colorBackgroundOverlayStatic } from "../../BackgroundColor-Ba4D10TC.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const DialogOverlayStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "DialogOverlayStyled",
+  componentId: "sc-gn4yty-0"
+})({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  padding: `0 ${getSpacing(spacingMd)}`,
+  flexDirection: "column",
+  justifyContent: "center",
+  background: getBackgroundColor(colorBackgroundOverlayStatic),
+  height: "100%",
+  width: "100%",
+  zIndex: "22"
+}, ({
+  open
+}) => ({
+  display: open ? "flex" : "none"
+}));
+const DialogCardStyled = styled(Card).withConfig({
+  displayName: "DialogCardStyled",
+  componentId: "sc-gn4yty-1"
+})({
+  height: "auto",
+  maxHeight: `calc(100% - 2*${getSpacing(spacingMd)})`,
+  maxWidth: "1240px",
+  alignSelf: "center",
+  padding: `${getSpacing(spacingMd)} calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const DialogIconButtonStyled = styled(IconButton).withConfig({
+  displayName: "DialogIconButtonStyled",
+  componentId: "sc-gn4yty-2"
+})({
+  flex: "0 0 auto"
+});
+const DialogButtonGroupStyled = styled(ButtonGroup).withConfig({
+  displayName: "DialogButtonGroupStyled",
+  componentId: "sc-gn4yty-3"
+})({
+  justifyContent: "flex-end",
+  padding: `0 ${getBorderWidth(borderWidthFocus)}`,
+  height: "auto"
+});
+const DialogChildrenContainerStyled = styled("div").withConfig({
+  displayName: "DialogChildrenContainerStyled",
+  componentId: "sc-gn4yty-4"
+})({
+  padding: `${getBorderWidth(borderWidthFocus)} ${getBorderWidth(borderWidthFocus)} 0`,
+  marginBottom: getSpacing(spacingMd),
+  overflowY: "auto"
+});
+const DialogHeadingContainerStyled = styled(Flex).withConfig({
+  displayName: "DialogHeadingContainerStyled",
+  componentId: "sc-gn4yty-5"
+})({
+  padding: `0 ${getBorderWidth(borderWidthFocus)}`,
+  marginBottom: `calc(${getSpacing(spacingMd)} - ${getBorderWidth(borderWidthFocus)})`
+});
+const Dialog = ({
+  heading,
+  children,
+  uid,
+  focusElementOnOpen,
+  focusElementOnClose,
+  buttons,
+  dismissable = true,
+  // This default should be sufficient for most use cases, but can be overridden if needed.
+  contentElements = "body>*:not([id^='dialog'])",
+  ...props
+}) => {
+  const [open, setOpen] = useState(props.open === true);
+  const [mounted, setMounted] = useState(false);
+  const invokingElement = useRef(null);
+  const headingId = `${uid}-dialog-heading`;
+  const headingProps = {
+    ...heading,
+    size: textHeadingMd,
+    weight: fontWeightBold,
+    uid: headingId,
+    id: headingId,
+    bottomSpacing: spacingNone,
+    tabIndex: focusElementOnOpen ? void 0 : -1
+  };
+  const closeWithEscape = (event) => {
+    if (event.key !== "Escape") return;
+    closeDialog();
+  };
+  const updateAttributes = (element, open2) => {
+    if (open2) {
+      element.setAttribute("aria-hidden", "true");
+    } else {
+      element.removeAttribute("aria-hidden");
+    }
+    element.toggleAttribute("inert", open2);
+  };
+  const updateElements = (open2) => {
+    const content = document.querySelectorAll(contentElements);
+    for (const element of content) {
+      updateAttributes(element, open2);
+    }
+    document.body.classList.toggle("HideOverflowY", open2);
+  };
+  const openDialog = (event) => {
+    if (invokingElement) invokingElement.current = event.target;
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    var _a;
+    (_a = props.onToggle) == null ? void 0 : _a.call(props, false);
+    setOpen(false);
+  };
+  useEffect(() => {
+    setOpen(true === props.open);
+  }, [props.open]);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    const openingElements = document.querySelectorAll(`[data-action='dialog-${uid}']`);
+    for (const openingElement of openingElements) {
+      openingElement.addEventListener("click", openDialog);
+    }
+    return () => {
+      for (const openingElement of openingElements) {
+        openingElement.removeEventListener("click", openDialog);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    var _a, _b;
+    if (!mounted) return;
+    if (open) {
+      updateElements(true);
+      focusElementOnOpen ? (_a = document.getElementById(focusElementOnOpen)) == null ? void 0 : _a.focus() : (_b = document.getElementById(headingId)) == null ? void 0 : _b.focus();
+      dismissable && document.addEventListener("keydown", closeWithEscape);
+    }
+    return () => {
+      var _a2, _b2;
+      updateElements(false);
+      focusElementOnClose ? (_a2 = document.getElementById(focusElementOnClose)) == null ? void 0 : _a2.focus() : (_b2 = invokingElement.current) == null ? void 0 : _b2.focus();
+      dismissable && document.removeEventListener("keydown", closeWithEscape);
+    };
+  }, [open, mounted]);
+  const onCloseIconButtonClick = (event) => {
+    event.preventDefault();
+    closeDialog();
+  };
+  const dialog = /* @__PURE__ */ jsx(DialogOverlayStyled, { open, id: `dialog-${uid}`, className: props.className, children: /* @__PURE__ */ jsxs(DialogCardStyled, { role: "dialog", "aria-modal": "true", "aria-describedby": headingId, children: [
+    /* @__PURE__ */ jsxs(DialogHeadingContainerStyled, { justify: "between", bottomSpacing: spacingNone, children: [
+      /* @__PURE__ */ jsx(Heading, { ...headingProps }),
+      dismissable && /* @__PURE__ */ jsx(DialogIconButtonStyled, { screenReaderLabel: "Schließen", icon: "Close", appearance: "tertiary", bottomSpacing: spacingNone, onClick: onCloseIconButtonClick })
+    ] }),
+    /* @__PURE__ */ jsx(DialogChildrenContainerStyled, { children }),
+    /* @__PURE__ */ jsx(DialogButtonGroupStyled, { ...buttons, orientation: "horizontal", justify: "end", reversed: true, bottomSpacing: spacingNone })
+  ] }) });
+  return mounted && open ? createPortal(dialog, document.body) : null;
+};
+export {
+  Dialog as default
+};

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

@@ -0,0 +1,56 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonGroupProps } from '../ButtonGroup/props';
+import { HeadingProps } from '../Heading/props';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { dialogComponentName } from './componentName';
+/**
+ * Props for the Dialog component.
+ * A modal dialog overlay with heading, content, and action buttons.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/feedback-and-progress-dialog--docs} Dialog stories
+ */
+export interface DialogProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'> {
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof dialogComponentName;
+    /**
+     * Content rendered inside the dialog body.
+     */
+    children: ReactNode;
+    /**
+     * Dialog heading configuration. Size, spacing, weight, and alignment are controlled internally.
+     */
+    heading: Omit<HeadingProps, 'size' | 'bottomSpacing' | 'weight' | 'align'>;
+    /**
+     * CSS selector for the element to receive focus when the dialog opens.
+     */
+    focusElementOnOpen?: string;
+    /**
+     * CSS selector for the element to receive focus when the dialog closes.
+     */
+    focusElementOnClose?: string;
+    /**
+     * Controls whether the dialog is currently visible.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * When `true`, the dialog can be closed by clicking the backdrop or pressing Escape.
+     * @default true
+     */
+    dismissable?: boolean;
+    /**
+     * Action buttons rendered at the bottom of the dialog.
+     */
+    buttons: Omit<ButtonGroupProps, 'orientation'>;
+    /**
+     * Callback fired when the dialog opens or closes. Receives the new open state.
+     */
+    onToggle?: (open: boolean) => void;
+    /**
+     * CSS selector for page content elements that should be marked as `aria-hidden` and `inert`
+     * while the dialog is open.
+     * @default "body>*:not([id^='dialog'])"
+     */
+    contentElements?: string;
+}

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

@@ -0,0 +1,11 @@
+import { DialogProps } from './props';
+export declare const DialogOverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "color" | "content" | "layout" | "style" | "open" | "translate" | "key" | "component" | "uid" | "bottomSpacing" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "contentElements" | "focusElementOnOpen" | "focusElementOnClose" | "dismissable"> & Omit<DialogProps, "heading" | "buttons"> & {
+    open: boolean;
+}, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "color" | "content" | "layout" | "style" | "open" | "translate" | "key" | "component" | "uid" | "bottomSpacing" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "contentElements" | "focusElementOnOpen" | "focusElementOnClose" | "dismissable"> & Omit<DialogProps, "heading" | "buttons"> & {
+    open: boolean;
+}, never>>> & string;
+export declare const DialogCardStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Card').CardProps, never> & Partial<Pick<import('../Card').CardProps, never>>> & string & Omit<({ children, className, theme, tag, mobileDark, appearance, ...props }: import('../Card').CardProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const DialogIconButtonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../IconButton').IconButtonProps, never> & Partial<Pick<import('../IconButton').IconButtonProps, never>>> & string & Omit<({ screenReaderLabel, shape, ...props }: import('../IconButton').IconButtonProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const DialogButtonGroupStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../ButtonGroup').ButtonGroupProps, never> & Partial<Pick<import('../ButtonGroup').ButtonGroupProps, never>>> & string & Omit<({ reversed, buttons, orientation, justify, bottomSpacing, ...props }: import('../ButtonGroup').ButtonGroupProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+export declare const DialogChildrenContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never> & Partial<Pick<import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement>, never>>> & string;
+export declare const DialogHeadingContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Flex').FlexProps, never> & Partial<Pick<import('../Flex').FlexProps, never>>> & string & Omit<({ children, tag, ...props }: import('../Flex').FlexProps) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;