@vodafone_de/publish-test 0.0.1 → 53.0.0

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

@@ -0,0 +1,404 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { InputProps } from './props';
+export type InputCmsProps = CmsProps<InputProps>;
+export declare const inputTypes: readonly ["text", "password", "email", "tel", "url"];
+/**
+ * Shared validation schema for InputSharedProps.
+ * Used by Input, Textarea, and SelectInput components.
+ */
+export declare const inputSharedPropsSchema: z.ZodObject<{
+    component: z.ZodEnum<{
+        ScreenreaderOnly: "ScreenreaderOnly";
+        Accordion: "Accordion";
+        AccordionGroup: "AccordionGroup";
+        ArtDirectedImage: "ArtDirectedImage";
+        Badge: "Badge";
+        Body: "Body";
+        BottomBar: "BottomBar";
+        Button: "Button";
+        ButtonAsLink: "ButtonAsLink";
+        ButtonGroup: "ButtonGroup";
+        Calendar: "Calendar";
+        Callout: "Callout";
+        Card: "Card";
+        CarouselItem: "CarouselItem";
+        Carousel: "Carousel";
+        Checkbox: "Checkbox";
+        CheckboxGroup: "CheckboxGroup";
+        Collapsible: "Collapsible";
+        ColorSwatch: "ColorSwatch";
+        ColorSwatchGroup: "ColorSwatchGroup";
+        ConsentMessage: "ConsentMessage";
+        Container: "Container";
+        DateInput: "DateInput";
+        DemoBox: "DemoBox";
+        Dialog: "Dialog";
+        DiscoveryCard: "DiscoveryCard";
+        DiscoveryCardGroup: "DiscoveryCardGroup";
+        Divider: "Divider";
+        EnergySnippet: "EnergySnippet";
+        FeatureCard: "FeatureCard";
+        FeatureCardGroup: "FeatureCardGroup";
+        Fieldset: "Fieldset";
+        Filter: "Filter";
+        FilterGroup: "FilterGroup";
+        Flex: "Flex";
+        FlexItem: "FlexItem";
+        Footnote: "Footnote";
+        FootnoteContent: "FootnoteContent";
+        FootnoteLink: "FootnoteLink";
+        FootnoteSection: "FootnoteSection";
+        Form: "Form";
+        FormElement: "FormElement";
+        FormHelperMessage: "FormHelperMessage";
+        GoogleMap: "GoogleMap";
+        Grid: "Grid";
+        GridItem: "GridItem";
+        Heading: "Heading";
+        HifiIcon: "HifiIcon";
+        Icon: "Icon";
+        IconButton: "IconButton";
+        IconLoader: "IconLoader";
+        IconSnippet: "IconSnippet";
+        IconSnippetList: "IconSnippetList";
+        Image: "Image";
+        ImageHeader: "ImageHeader";
+        InfoBanner: "InfoBanner";
+        InlineIcon: "InlineIcon";
+        InlineLink: "InlineLink";
+        Input: "Input";
+        InputGroup: "InputGroup";
+        Label: "Label";
+        Legend: "Legend";
+        Link: "Link";
+        LinkAsButton: "LinkAsButton";
+        LinkList: "LinkList";
+        LinkListItem: "LinkListItem";
+        LinkListItemAsButton: "LinkListItemAsButton";
+        LoadingSpinner: "LoadingSpinner";
+        LocalStyle: "LocalStyle";
+        MarTechPlaceholder: "MarTechPlaceholder";
+        MediaText: "MediaText";
+        Notification: "Notification";
+        OpenTextFootnoteAdapter: "OpenTextFootnoteAdapter";
+        Overlay: "Overlay";
+        PasswordInput: "PasswordInput";
+        Picker: "Picker";
+        PickerGroup: "PickerGroup";
+        Price: "Price";
+        ProductCard: "ProductCard";
+        QuickLink: "QuickLink";
+        QuickLinkList: "QuickLinkList";
+        Radio: "Radio";
+        RadioGroup: "RadioGroup";
+        Rating: "Rating";
+        RichText: "RichText";
+        RichTextContentful: "RichTextContentful";
+        SearchInput: "SearchInput";
+        SelectInput: "SelectInput";
+        SmoothScrollArea: "SmoothScrollArea";
+        Stepper: "Stepper";
+        SuggestInput: "SuggestInput";
+        Switch: "Switch";
+        TabGroup: "TabGroup";
+        Table: "Table";
+        TabularPrice: "TabularPrice";
+        Textarea: "Textarea";
+        TextListItem: "TextListItem";
+        TextList: "TextList";
+        TimeInput: "TimeInput";
+        ToggleButton: "ToggleButton";
+        ToggleButtonProvider: "ToggleButtonProvider";
+        Tray: "Tray";
+        UtilityLink: "UtilityLink";
+        Video: "Video";
+        YouTubeVideo: "YouTubeVideo";
+    }>;
+    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>;
+}, z.core.$loose>;
+export declare const inputSchema: 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<"Input">;
+    type: z.ZodOptional<z.ZodEnum<{
+        text: "text";
+        tel: "tel";
+        url: "url";
+        email: "email";
+        password: "password";
+    }>>;
+    onUpdate: z.ZodOptional<z.ZodNever>;
+}, z.core.$loose>;
+export declare const validateInputProps: (props: unknown) => ValidationResult<InputCmsProps>;
+export declare const isInputProps: (props: unknown) => props is InputCmsProps;

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

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

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

@@ -0,0 +1 @@
+export declare const inputGroupComponentName: "InputGroup";

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

@@ -0,0 +1,4 @@
+import { InputGroupProps } from './props';
+declare const InputGroup: ({ uid, status, helperText, errorMessage, label, inputs, separator, bottomSpacing, disabled, autoAdvance, onUpdate, ...props }: InputGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default InputGroup;
+export * from './props';

package/dist/components/InputGroup/index.js

@@ -0,0 +1,229 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useCallback, Fragment } from "react";
+import Body from "../Body/index.js";
+import Fieldset from "../Fieldset/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import Input from "../Input/index.js";
+import { i as inputComponentName, s as suggestInputComponentName, a as selectInputComponentName } from "../../componentName-D7GffML7.js";
+import { i as inputStateError, a as inputStateSuccess } from "../../props-Czq9XX2J.js";
+import { S as ScreenreaderOnly } from "../../index-p6eyyJpy.js";
+import SelectInput from "../SelectInput/index.js";
+import SuggestInput from "../SuggestInput/index.js";
+import { a as spacingXs, s as spacingMd, b as spacingNone } from "../../Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const InputGroupLegendStyled = styled.legend.withConfig({
+  shouldForwardProp,
+  displayName: "InputGroupLegendStyled",
+  componentId: "sc-ntqitf-0"
+})({
+  marginBottom: getSpacing(spacingXs),
+  ...getBodySize("md")
+});
+const InputGroupFieldsStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "InputGroupFieldsStyled",
+  componentId: "sc-ntqitf-1"
+})({
+  display: "flex",
+  alignItems: "center",
+  gap: getSpacing(spacingXs),
+  marginBottom: getSpacing(spacingXs)
+});
+const InputGroupDashStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "InputGroupDashStyled",
+  componentId: "sc-ntqitf-2"
+})({
+  color: getTextColor(colorTextNeutral),
+  userSelect: "none",
+  flexShrink: 0
+});
+const isPlainInput = (input) => input.component === inputComponentName;
+const useAutoAdvance = (inputs, {
+  enabled,
+  onUpdate
+}) => {
+  const refMap = useRef(/* @__PURE__ */ new Map());
+  const collectValues = useCallback(() => inputs.map((input) => {
+    var _a;
+    return ((_a = refMap.current.get(input.uid)) == null ? void 0 : _a.value) ?? "";
+  }), [inputs]);
+  const getNextPlainInputIndex = useCallback((fromIndex) => {
+    for (let i = fromIndex + 1; i < inputs.length; i++) {
+      if (isPlainInput(inputs[i])) return i;
+    }
+    return -1;
+  }, [inputs]);
+  const getPreviousPlainInputIndex = useCallback((fromIndex) => {
+    for (let i = fromIndex - 1; i >= 0; i--) {
+      if (isPlainInput(inputs[i])) return i;
+    }
+    return -1;
+  }, [inputs]);
+  const handleChange = useCallback((index, event) => {
+    var _a, _b;
+    const input = inputs[index];
+    (_a = input.onChange) == null ? void 0 : _a.call(input, event);
+    if (onUpdate) {
+      onUpdate(collectValues());
+    }
+    if (enabled) {
+      const maxLength = input.maxLength;
+      if (maxLength && event.target.value.length >= maxLength) {
+        const nextIndex = getNextPlainInputIndex(index);
+        if (nextIndex !== -1) {
+          (_b = refMap.current.get(inputs[nextIndex].uid)) == null ? void 0 : _b.focus();
+        }
+      }
+    }
+  }, [inputs, getNextPlainInputIndex, onUpdate, collectValues, enabled]);
+  const handleKeyDown = useCallback((index, event) => {
+    if (event.key === "Backspace" && event.currentTarget.value === "") {
+      const prevIndex = getPreviousPlainInputIndex(index);
+      if (prevIndex !== -1) {
+        const prevEl = refMap.current.get(inputs[prevIndex].uid);
+        if (prevEl) {
+          event.preventDefault();
+          prevEl.focus();
+          prevEl.setSelectionRange(prevEl.value.length, prevEl.value.length);
+        }
+      }
+    }
+  }, [getPreviousPlainInputIndex, inputs]);
+  const handlePaste = useCallback((index, event) => {
+    var _a;
+    const input = inputs[index];
+    const maxLength = input.maxLength;
+    if (!maxLength) {
+      (_a = input.onPaste) == null ? void 0 : _a.call(input, event);
+      return;
+    }
+    event.preventDefault();
+    const pastedText = event.clipboardData.getData("text/plain");
+    let charIndex = 0;
+    for (let i = index; i < inputs.length && charIndex < pastedText.length; i++) {
+      if (!isPlainInput(inputs[i])) continue;
+      const fieldMaxLength = inputs[i].maxLength;
+      if (!fieldMaxLength) continue;
+      const el = refMap.current.get(inputs[i].uid);
+      if (!el) continue;
+      const chunk = pastedText.slice(charIndex, charIndex + fieldMaxLength);
+      el.value = chunk;
+      charIndex += fieldMaxLength;
+    }
+    for (let i = index; i < inputs.length; i++) {
+      if (!isPlainInput(inputs[i])) continue;
+      const fieldMaxLength = inputs[i].maxLength;
+      const el = refMap.current.get(inputs[i].uid);
+      if (el && fieldMaxLength && el.value.length < fieldMaxLength) {
+        el.focus();
+        if (onUpdate) onUpdate(collectValues());
+        return;
+      }
+    }
+    for (let i = inputs.length - 1; i >= index; i--) {
+      if (isPlainInput(inputs[i]) && refMap.current.get(inputs[i].uid)) {
+        refMap.current.get(inputs[i].uid).focus();
+        break;
+      }
+    }
+    if (onUpdate) onUpdate(collectValues());
+  }, [inputs, onUpdate, collectValues]);
+  const getRef = (input) => {
+    if (!isPlainInput(input)) return void 0;
+    return (el) => {
+      if (el) {
+        refMap.current.set(input.uid, el);
+      } else {
+        refMap.current.delete(input.uid);
+      }
+    };
+  };
+  const getExtraProps = (input, index) => {
+    if (!isPlainInput(input)) return void 0;
+    return {
+      onChange: (e) => handleChange(index, e),
+      onPaste: enabled ? (e) => handlePaste(index, e) : void 0,
+      onKeyDown: enabled ? (e) => handleKeyDown(index, e) : void 0
+    };
+  };
+  return {
+    getRef,
+    getExtraProps
+  };
+};
+const InputGroupFieldRenderer = ({
+  input,
+  legendId,
+  status,
+  messageId,
+  ref,
+  extraInputProps,
+  autoAdvance,
+  disabled
+}) => {
+  const isError = status === inputStateError;
+  const isSuccess = status === inputStateSuccess;
+  const sharedProps = {
+    inputGroupMode: true,
+    "aria-describedby": isError || autoAdvance ? `${legendId} ${messageId}` : legendId,
+    "aria-invalid": isError ? true : void 0,
+    status: isError ? inputStateError : isSuccess ? inputStateSuccess : void 0,
+    disabled
+  };
+  switch (input.component) {
+    case selectInputComponentName:
+      return /* @__PURE__ */ jsx(SelectInput, { layout: {
+        flex: "1 1 0"
+      }, ...input, ...sharedProps, bottomSpacing: spacingNone });
+    case suggestInputComponentName:
+      return /* @__PURE__ */ jsx(SuggestInput, { layout: {
+        flex: "1 1 0"
+      }, ...input, ...sharedProps, bottomSpacing: spacingNone });
+    case inputComponentName:
+      return /* @__PURE__ */ jsx(Input, { layout: {
+        flex: "1 1 0"
+      }, ...input, ...sharedProps, ...extraInputProps, ref, bottomSpacing: spacingNone });
+  }
+};
+const InputGroup = ({
+  uid,
+  status,
+  helperText,
+  errorMessage,
+  label,
+  inputs,
+  separator = "",
+  bottomSpacing = spacingMd,
+  disabled,
+  autoAdvance,
+  onUpdate,
+  ...props
+}) => {
+  const legendId = `inputgroup-legend-${uid}`;
+  const messageId = `inputgroup-message-${uid}`;
+  const {
+    getRef,
+    getExtraProps
+  } = useAutoAdvance(inputs, {
+    enabled: autoAdvance,
+    onUpdate
+  });
+  return /* @__PURE__ */ jsxs(Fieldset, { bottomSpacing, disabled, status, uid, "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : props["aria-describedby"], children: [
+    /* @__PURE__ */ jsx(InputGroupLegendStyled, { children: /* @__PURE__ */ jsx(Body, { bottomSpacing: spacingNone, id: legendId, tag: "span", children: label }) }),
+    /* @__PURE__ */ jsx(InputGroupFieldsStyled, { children: inputs.map((input, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      index > 0 && separator.length > 0 && /* @__PURE__ */ jsx(InputGroupDashStyled, { "aria-hidden": "true", children: separator }),
+      /* @__PURE__ */ jsx(InputGroupFieldRenderer, { input, legendId, status, messageId, ref: getRef(input), extraInputProps: getExtraProps(input, index), autoAdvance, disabled })
+    ] }, input.uid)) }),
+    inputStateError !== status && helperText || inputStateError === status && errorMessage ? /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, message: inputStateError === status ? errorMessage : helperText, status, children: autoAdvance && /* @__PURE__ */ jsx(ScreenreaderOnly, { children: "Eingabe springt automatisch zum nächsten Feld." }) }) : autoAdvance && /* @__PURE__ */ jsx(ScreenreaderOnly, { id: messageId, children: "Eingabe springt automatisch zum nächsten Feld." })
+  ] });
+};
+export {
+  InputGroup as default
+};

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

@@ -0,0 +1,40 @@
+import { inputGroupComponentName } from './componentName';
+import { FieldsetSharedProps } from '../Fieldset';
+import { InputProps } from '../Input/props';
+import { SelectInputProps } from '../SelectInput/props';
+import { SuggestInputProps } from '../SuggestInput/props';
+type OmittedSharedProps = 'status' | 'errorMessage' | 'helperText';
+export type InputGroupField = Omit<InputProps, OmittedSharedProps> | Omit<SelectInputProps, OmittedSharedProps> | Omit<SuggestInputProps, OmittedSharedProps>;
+/**
+ *
+ */
+export interface InputGroupProps extends Omit<FieldsetSharedProps, 'label'> {
+    /**
+     * Configuration for each input field in the group.
+     * Minimum 2 fields, maximum 6 fields.
+     */
+    inputs: InputGroupField[];
+    /**
+     * The character that visually separates inputs of the group. Defaults to an empty string.
+     */
+    separator?: string;
+    /**
+     * The Label that appears above the InputGroup.
+     */
+    label: string;
+    /**
+     * Function that is called on every change with the combined values of all fields
+     */
+    onUpdate?: (values: string[]) => void;
+    /**
+     * When enabled, automatically advances focus to the next input when the current input reaches its maxLength.
+     * Also distributes pasted text across inputs, filling each up to its maxLength before moving to the next.
+     * Only applies to plain Input fields (SelectInput and SuggestInput are skipped).
+     */
+    autoAdvance?: boolean;
+    /**
+     * Pin component's name
+     */
+    component?: typeof inputGroupComponentName;
+}
+export {};