@stihl-design-system/components 1.0.0-RC.0

package/components/Link/Link.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import type { BreakpointCustomizable, IconName, LinkTarget, SelectedAriaAttributes, Theme } from '../../types';
+import { type IconProps } from '../Icon/Icon';
+import type { LinkAriaAttribute, LinkIconPosition, LinkReferrerPolicy, LinkRel, LinkSize, LinkVariant } from './Link.utils';
+export interface CommonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** ARIA attributes to enhance accessibility
+     *  `{'aria-label'? string;`
+     *  `'aria-current'?: boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time';`
+     *  `'aria-labelledby'?: string;}`
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    /** Identifier for analytics tracking */
+    dataTrackingid?: string;
+    /** Specifies that the target will be downloaded and opens native browser download dialog */
+    download?: string;
+    /** Defines the URL to link to */
+    href?: string;
+    /** Name of the icon to display */
+    iconName?: IconName;
+    /** The position of the icon */
+    iconPosition?: LinkIconPosition;
+    /** URL or path for a custom icon */
+    iconSource?: IconProps['source'];
+    /** Defines the referrer information send with the link */
+    referrerPolicy?: LinkReferrerPolicy;
+    /** Defines the rel attribute */
+    rel?: LinkRel;
+    /** The target of the link */
+    target?: LinkTarget;
+    /** Defines the theme */
+    theme?: Theme;
+}
+export interface LinkProps extends CommonLinkProps {
+    /** Content within the link */
+    children: React.ReactNode;
+    /** Hides the link label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Aligns `variant='ghost'` with text */
+    isFlush?: boolean;
+    /** Size of the link */
+    size?: LinkSize;
+    /** Visual style variant of the link */
+    variant?: LinkVariant;
+}
+/**
+ * Use the Link component when you want the users to navigate to another internal or external page.
+ * */
+export declare const DSLink: ({ children, aria, className, dataTrackingid, download, hideLabel, href, iconName, iconPosition, iconSource, isFlush, referrerPolicy, rel, size, target, theme, variant, ...rest }: LinkProps) => JSX.Element;

package/components/Link/Link.test.d.ts

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

package/components/Link/Link.utils.d.ts

@@ -0,0 +1,8 @@
+export declare const LINK_SIZE: readonly ["medium", "small"];
+export type LinkSize = typeof LINK_SIZE[number];
+export declare const LINK_VARIANT: readonly ["filled", "highlight", "outline", "ghost"];
+export type LinkVariant = typeof LINK_VARIANT[number];
+export type LinkIconPosition = 'left' | 'right';
+export type LinkRel = 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+export type LinkReferrerPolicy = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+export type LinkAriaAttribute = 'aria-label' | 'aria-current' | 'aria-labelledby';

package/components/LinkStandalone/LinkStandalone.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { type CommonLinkProps } from '../Link/Link';
+import { type LinkStandaloneVariant } from './LinkStandalone.utils';
+export interface LinkStandaloneProps extends CommonLinkProps {
+    /** Content within the link */
+    children: React.ReactNode;
+    /** Enables the active state */
+    active?: boolean;
+    /** Visual style variant of the Link Standalone */
+    variant?: LinkStandaloneVariant;
+}
+/**
+ * Use LinkStandalone when you want the users to navigate to another internal or external page.
+ * */
+export declare const DSLinkStandalone: ({ children, aria, active, className, dataTrackingid, download, href, iconName, iconPosition, iconSource, referrerPolicy, rel, target, theme, variant, ...rest }: LinkStandaloneProps) => JSX.Element;

package/components/LinkStandalone/LinkStandalone.test.d.ts

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

package/components/LinkStandalone/LinkStandalone.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const LINK_STANDALONE_VARIANT: readonly ["neutral", "highlight"];
+export type LinkStandaloneVariant = typeof LINK_STANDALONE_VARIANT[number];

package/components/Logo/Logo.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, Theme } from '../../types';
+import type { LogoAriaAttribute, LogoTarget } from './Logo.utils';
+export interface LogoProps extends HTMLAttributes<HTMLOrSVGElement | HTMLAnchorElement> {
+    /** If the DSLogo is used with an href prop, make sure to add a descriptive label to inform screen reader users what the link stands for
+     *  `{'aria-label'? string;}`
+     */
+    aria?: SelectedAriaAttributes<LogoAriaAttribute>;
+    /** Defines the URL to link to. When providing an url then the component will be rendered as a link */
+    href?: string;
+    /** The target of the link */
+    target?: LogoTarget;
+    /** Defines the theme */
+    theme?: Theme;
+}
+/**
+ * This component is used to display the logo.
+ *
+ * It can be also used as a link by providing a `href` and an `aria-label`.
+ */
+export declare const DSLogo: ({ aria, className, href, target, theme, ...rest }: LogoProps) => JSX.Element;

package/components/Logo/Logo.utils.d.ts

@@ -0,0 +1,3 @@
+import type { LinkTarget } from '../../types';
+export type LogoTarget = LinkTarget;
+export type LogoAriaAttribute = 'aria-label';

package/components/Radio/Radio.d.ts

@@ -0,0 +1,27 @@
+import { type InputHTMLAttributes } from 'react';
+import type { BreakpointCustomizable } from '../../types';
+export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Label text displayed next to the radio */
+    label: React.ReactNode;
+    /** Name of the radio group */
+    name: string;
+    /** Set the value of the radio */
+    value: string;
+    /** Disables the radio, preventing user interaction */
+    disabled?: boolean;
+    /** Hides the radio label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Controls whether the radio is checked. */
+    checked?: boolean;
+    /** Marks the radio as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Callback function triggered when the state of the radio changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * Generally used in radio groups—collections of radio buttons describing a set of related options.
+ * Only one radio button in a given group can be selected at the same time.
+ * */
+export declare const DSRadio: import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/Radio/Radio.test.d.ts

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

package/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,56 @@
+import { type FieldsetHTMLAttributes } from 'react';
+import { type FieldsetProps } from '../Fieldset/Fieldset';
+import { type RadioGroupOption } from './RadioGroup.utils';
+export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    /**
+     * The `legend` prop can either be a simple `string` or an object with specific properties.
+     * When provided as a string, it represents the legend text directly.
+     * When provided as an object, it allows for more detailed configuration, including:
+     * - `headingText: string` The text content for the legend.
+     * - `headingSize?: 'x-large' | 'large' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'`
+     * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h2'`
+     *
+     * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
+     */
+    legend: FieldsetProps['legend'];
+    /** Name of the radio group */
+    name: string;
+    /**
+     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button
+     * `{label: string; value: string}[]`
+     * @prop {{label: string; value: string}[]} options
+     */
+    options: RadioGroupOption[];
+    /**
+     * Set the alignment of the radio buttons
+     */
+    alignment?: 'vertical' | 'horizontal';
+    /**
+     * Value of the selected Option in **uncontrolled RadioGroup** component
+     */
+    defaultValue?: string;
+    /** Short descriptive text displayed beneath the legend */
+    description?: FieldsetProps['description'];
+    /** Disables the radio group, preventing user interaction */
+    disabled?: boolean;
+    /** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    id?: string;
+    /** Marks the radio group as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Marks the radio group as required.
+     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend
+     * */
+    required?: boolean;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+    /** Set the value of the selected option */
+    value?: string;
+    /** Callback function triggered when the value of the radio group changes */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * The `DSRadioGroup` component offers a cohesive and accessible solution for grouping radio buttons,
+ * complete with customizable legends, alignment options, and integrated validation feedback,
+ * enhancing the user experience in form designs.
+ * */
+export declare const DSRadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/RadioGroup/RadioGroup.test.d.ts

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

package/components/RadioGroup/RadioGroup.utils.d.ts

@@ -0,0 +1,6 @@
+import type { RadioProps } from '../Radio/Radio';
+import type { RadioGroupProps } from './RadioGroup';
+export type RadioGroupOption = Pick<RadioProps, 'label' | 'value'>;
+type ValidationProps = Pick<RadioGroupProps, 'description' | 'id' | 'legend' | 'name' | 'options' | 'systemFeedback'>;
+export declare const validateProps: ({ description, id, legend, name, options, systemFeedback, }: ValidationProps) => void;
+export {};

package/components/Select/Select.d.ts

@@ -0,0 +1,43 @@
+import { type SelectHTMLAttributes } from 'react';
+import type { BreakpointCustomizable } from '../../types';
+import { type SelectOptionsOrOptGroups, type SelectSize } from './Select.utils';
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** Unique id for the select */
+    id: string;
+    /** Label text displayed above the select */
+    label: string;
+    /**
+     * Defines the options, can be a mixed array of options and option groups
+     *  `type SelectOption = {label: string; value: string | number; isDisabled?: boolean;}`
+     *  `type SelectOptionsGroup = {label: string; options: SelectOption[];}`
+     *  `type SelectOptionsOrOptGroups = (SelectOption | SelectOptionsGroup)[];`
+     * */
+    options: SelectOptionsOrOptGroups;
+    /** Disables the select, preventing user interaction */
+    disabled?: boolean;
+    /** Hides the select label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label */
+    hint?: string;
+    /** Marks the select as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Modifies the empty option label to ensure a conscious choice. */
+    placeholder?: string;
+    /** Indicates that the select is required */
+    required?: boolean;
+    /** Size of the select */
+    size?: SelectSize;
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+}
+/**
+ * Use the DSSelect component to efficiently navigate through and select from a range of options,
+ * enhancing user interaction and decision-making in your application.
+ *
+ *
+ * <div className="ds-alert">If you are looking for a component with a **custom dropdown** or the ability to **filter** and **select multiple options**, please take a look at
+ * [DSCombobox](/docs/components-combobox--documentation)</div>
+ * */
+export declare const DSSelect: ({ id, label, options, className, defaultValue, disabled, hideLabel, hint, invalid, placeholder, required, size, systemFeedback, value, ...rest }: SelectProps) => JSX.Element;

package/components/Select/Select.test.d.ts

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

package/components/Select/Select.utils.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes } from 'react';
+import type { GroupBase, OptionsOrGroups } from 'react-select';
+import type { SelectProps } from './Select';
+type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options'>;
+export interface SelectOption extends HTMLAttributes<HTMLOptionElement> {
+    label: string;
+    value: string | number;
+    isDisabled?: boolean;
+}
+export type SelectOptionsGroup = GroupBase<SelectOption>;
+export type SelectOptionsOrOptGroups = OptionsOrGroups<SelectOption, SelectOptionsGroup>;
+export declare const SELECT_SIZE: readonly ["medium", "small"];
+export type SelectSize = (typeof SELECT_SIZE)[number];
+/**
+ * Validates the given properties of the DSSelect component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSSelect properties to validate. This includes
+ *                          id and label.
+ */
+export declare const validateSelectProps: ({ id, label, options, }: ValidationProps) => void;
+/**
+ * Determines the initial visibility of the placeholder based on the `placeholder` string and
+ * the values of `defaultValue` and `value` from the props.
+ * The function will return true to indicate the placeholder should be selected in the following conditions:
+ * - The `placeholder` is not an empty string, and neither `defaultValue` nor `value` are provided.
+ * - Both `defaultValue` and `value` are either undefined or explicitly set to an empty string.
+ * Otherwise, it returns false, indicating the placeholder is not selected.
+ *
+ * This ensures that the placeholder is only selected when no initial or current value is set
+ * and a placeholder string is provided, enforcing a more deliberate selection by the user when necessary.
+ */
+export declare const getIsPlaceholderSelected: (placeholder: string, defaultValue: string | number | readonly string[] | undefined, value: string | number | readonly string[] | undefined) => boolean;
+export {};

package/components/Select/Select.utils.test.d.ts

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

package/components/Spinner/Spinner.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, Theme } from '../../types';
+import type { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** ARIA attributes to enhance accessibility
+     * `{'aria-label'? string;}`
+     */
+    aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
+    /** Size of the spinner */
+    size?: SpinnerSize;
+    /** Defines the theme */
+    theme?: Theme;
+}
+export declare const DSSpinner: ({ aria, className, size, theme, ...rest }: SpinnerProps) => JSX.Element;

package/components/Spinner/Spinner.test.d.ts

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

package/components/Spinner/Spinner.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const SPINNER_SIZE: readonly ["small", "medium", "large", "x-large", "inherit"];
+export type SpinnerSize = (typeof SPINNER_SIZE)[number];
+export type SpinnerAriaAttribute = 'aria-label';

package/components/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+import { type ButtonHTMLAttributes } from 'react';
+import type { SelectedAriaAttributes } from '../../types';
+import type { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
+export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Content within the label */
+    children: React.ReactNode;
+    /** ARIA attributes to enhance accessibility
+     * `{'aria-label'? string;}`
+     */
+    aria?: SelectedAriaAttributes<SwitchAriaAttribute>;
+    /** Alignment of the label */
+    alignLabel?: SwitchLabelPosition;
+    /** Controls whether the switch is checked. */
+    checked?: boolean;
+    /** Identifier for analytics tracking */
+    dataTrackingid?: string;
+    /** Disables the switch, preventing user interaction */
+    disabled?: boolean;
+    /** Shows loading indicator */
+    loading?: boolean;
+    /** Stretches the Switch over the parent's width */
+    stretched?: boolean;
+    /** Callback function triggered when the switch is clicked */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+/**
+ * Often used in settings, in which users can communicate their choice through binary selection.
+ * */
+export declare const DSSwitch: ({ children, aria, alignLabel, checked, className, dataTrackingid, disabled, loading, stretched, onClick, ...rest }: SwitchProps) => JSX.Element;

package/components/Switch/Switch.test.d.ts

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

package/components/Switch/Switch.utils.d.ts

@@ -0,0 +1,2 @@
+export type SwitchLabelPosition = 'left' | 'right';
+export type SwitchAriaAttribute = 'aria-label';

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+import { type SystemFeedbackType } from './SystemFeedback.utils';
+export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
+    /** Defines the message */
+    message: string;
+    /** Defines the type */
+    type: SystemFeedbackType;
+}
+export declare const DSSystemFeedback: ({ className, message, type, ...rest }: SystemFeedbackProps) => JSX.Element;

package/components/SystemFeedback/SystemFeedback.test.d.ts

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

package/components/SystemFeedback/SystemFeedback.utils.d.ts

@@ -0,0 +1,8 @@
+interface SystemFeedbackIcons {
+    valid: 'circle-check-colored';
+    invalid: 'diamond-exclamationmark-colored';
+    warning: 'triangle-exclamationmark-colored';
+}
+export declare const systemFeedbackIcons: SystemFeedbackIcons;
+export type SystemFeedbackType = 'valid' | 'invalid' | 'warning';
+export {};

package/components/Text/Text.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+import type { Theme } from '../../types';
+import type { TextSize, TextTag, TextWeight } from './Text.utils';
+export interface TextProps extends HTMLAttributes<HTMLQuoteElement | HTMLDivElement | HTMLLegendElement | HTMLParagraphElement | HTMLSpanElement | HTMLTimeElement> {
+    /** Content of the text */
+    children: React.ReactNode;
+    /** Size of the text */
+    size?: TextSize;
+    /** Specifies the HTML tag to be used for the text */
+    tag?: TextTag;
+    /** Defines the theme */
+    theme?: Theme;
+    /** Defines the weight, `size='xx-small'` does not have a bold variant */
+    weight?: TextWeight;
+}
+/**
+ *  The `DSText` component is designed for displaying body text and paragraphs,
+ *  ensuring consistent sizing across different viewports.
+ *  It is a versatile component that can be used in various parts of your application where text content is needed.
+ */
+export declare const DSText: ({ children, className, size, tag, theme, weight, ...rest }: TextProps) => JSX.Element;

package/components/Text/Text.test.d.ts

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

package/components/Text/Text.utils.d.ts

@@ -0,0 +1,6 @@
+export declare const TEXT_TAG: readonly ["address", "blockquote", "cite", "div", "figcaption", "legend", "p", "span", "time"];
+export type TextTag = (typeof TEXT_TAG)[number];
+export declare const TEXT_SIZE: readonly ["large", "medium", "small", "x-small", "xx-small"];
+export type TextSize = (typeof TEXT_SIZE)[number];
+export declare const TEXT_WEIGHT: readonly ["bold", "normal"];
+export type TextWeight = (typeof TEXT_WEIGHT)[number];

package/components/Textarea/Textarea.d.ts

@@ -0,0 +1,42 @@
+import { type TextareaHTMLAttributes } from 'react';
+import type { BreakpointCustomizable } from '../../types';
+import { type TextareaSize } from './Textarea.utils';
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows' | 'cols'> {
+    /** Unique id for the textarea */
+    id: string;
+    /** Label text displayed above the textarea */
+    label: string;
+    /** Text displayed when maximum characters are reached */
+    charsLimitText?: string;
+    /** Text used for assistive technologies when the characters remaining amount changes */
+    charsRemainingText?: string;
+    /** Disables the textarea, preventing user interaction */
+    disabled?: boolean;
+    /** Hides the textarea label, can be responsive
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label */
+    hint?: string;
+    /** Marks the textarea as invalid, typically used for form validation */
+    invalid?: boolean;
+    /** Maximum length of the textarea value - if set, a character counter is visible beneath the textarea */
+    maxLength?: number;
+    /** Enables the readonly state of the textarea */
+    readonly?: boolean;
+    /** Indicates that the textarea is required */
+    required?: boolean;
+    /** Controls whether the textarea is resizable manually or automatically adjusts to user input */
+    resize?: 'vertical' | 'auto';
+    /** Defines a system feedback message, shown when `invalid={true}` */
+    systemFeedback?: string;
+    /** Size of the textarea */
+    size?: TextareaSize;
+    /** CSS className that can be set on the wrapping container of `<DSTextarea />`.  */
+    wrapperClassName?: string;
+}
+/**
+ * The `<DSTextarea />` component allows users to enter and edit multi line text.
+ * It comes in two sizes (medium & small) and supports various customizations
+ */
+export declare const DSTextarea: ({ id, label, charsLimitText, charsRemainingText, className, defaultValue, disabled, hint, hideLabel, invalid, maxLength, readonly, required, resize, size, systemFeedback, value, wrapperClassName, onChange, onInput, ...rest }: TextareaProps) => JSX.Element;

package/components/Textarea/Textarea.test.d.ts

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

package/components/Textarea/Textarea.utils.d.ts

@@ -0,0 +1,13 @@
+import type { TextareaProps } from './Textarea';
+export declare const TEXTAREA_SIZE: readonly ["medium", "small"];
+export type TextareaSize = (typeof TEXTAREA_SIZE)[number];
+type ValidationProps = Pick<TextareaProps, 'id' | 'label'>;
+/**
+ * Validates the given properties of the DSTextarea component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSTextarea properties to validate.
+ */
+export declare const validateTextareaProps: ({ id, label }: ValidationProps) => void;
+export {};

package/components/Textarea/Textarea.utils.test.d.ts

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

package/components/Title/Title.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'react';
+import type { Theme } from '../../types';
+import type { TitleSize, TitleTag } from './Title.utils';
+export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Content of the title */
+    children: React.ReactNode;
+    /** Size of the title */
+    size?: TitleSize;
+    /** Specifies the HTML tag to be used for the title */
+    tag?: TitleTag;
+    /** Defines the theme */
+    theme?: Theme;
+}
+/**
+ * The `DSTitle` component is specifically designed for `h1` and `h2` headlines.
+ * It's intended for primary emotional headlines that should be prominent,
+ * accompanied by a stand line for reinforcement.
+ * The component ensures impactful headline presentation in your application.
+ */
+export declare const DSTitle: ({ children, className, size, tag, theme, ...rest }: TitleProps) => JSX.Element;

package/components/Title/Title.test.d.ts

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

package/components/Title/Title.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const TITLE_SIZE: readonly ["x-large", "large"];
+export type TitleSize = typeof TITLE_SIZE[number];
+export type TitleTag = 'h1' | 'h2';

package/customreactselect.a53f9932.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunks/jsx-runtime.5c071667.js";
+import "./chunks/index.8021d3e0.js";
+import "react";
+import { C as l } from "./chunks/CustomReactSelect.9d0a378a.js";
+import "./chunks/useBreakpoint.6c1b06c2.js";
+import "./asterisk.91abccec.js";
+import "./icon.b4211784.js";
+import "./systemfeedback.6bbd1505.js";
+import "./optioncheckbox.7195f001.js";
+export {
+  l as CustomReactSelect
+};

package/customreactselect.d.ts

@@ -0,0 +1 @@
+export * from './components/CustomReactSelect/CustomReactSelect'

package/fieldset.d.ts

@@ -0,0 +1 @@
+export * from './components/Fieldset/Fieldset'

package/fieldset.fb7b7e49.js

@@ -0,0 +1,98 @@
+import "./assets/Fieldset.5297efb8.css";
+import { j as e } from "./chunks/jsx-runtime.5c071667.js";
+import { c } from "./chunks/index.8021d3e0.js";
+import "react";
+import { Asterisk as k } from "./asterisk.91abccec.js";
+import { DSHeading as F } from "./heading.cb7698f4.js";
+import { DSSystemFeedback as w } from "./systemfeedback.6bbd1505.js";
+import { g as y } from "./chunks/helpers.ea3ca41a.js";
+const N = "_root_1q2kr_25", v = "_child-wrapper_1q2kr_31", E = "_legend_1q2kr_38", M = "_legend--utility--m_1q2kr_41", C = "_description_1q2kr_52", P = "_description--small_1q2kr_65", T = "_system-feedback_1q2kr_69", i = {
+  root: N,
+  "child-wrapper": "_child-wrapper_1q2kr_31",
+  childWrapper: v,
+  legend: E,
+  "legend--utility--m": "_legend--utility--m_1q2kr_41",
+  legendUtilityM: M,
+  description: C,
+  "description--small": "_description--small_1q2kr_65",
+  descriptionSmall: P,
+  "system-feedback": "_system-feedback_1q2kr_69",
+  systemFeedback: T
+}, U = ({
+  description: n,
+  id: s,
+  legend: a,
+  systemFeedback: t
+}) => {
+  if (!s && (n || t))
+    throw new Error(
+      y(
+        "DSFieldset",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSFieldset component.'
+      )
+    );
+  if (!a)
+    throw new Error(
+      y(
+        "DSFieldset",
+        "The legend prop is required. Please add the legend prop to the DSFieldset component."
+      )
+    );
+}, L = ({
+  children: n,
+  legend: s,
+  className: a,
+  description: t,
+  disabled: j = !1,
+  id: d,
+  invalid: p = !1,
+  required: m = !1,
+  systemFeedback: r,
+  ...q
+}) => {
+  process.env.NODE_ENV !== "production" && U({ description: t, id: d, legend: s, systemFeedback: r });
+  let o, _, g;
+  const l = typeof s == "object" && s !== void 0;
+  l && ({ headingSize: o, headingTag: _, headingText: g } = s);
+  const h = `${d}-feedback`, f = `${d}-description`, S = [
+    r && h,
+    t && f
+  ].filter(Boolean).join(" "), b = !l || o === "small" || o === "small-uppercase", u = c(i.root, a), x = c(i.legend, {
+    [i.legendUtilityM]: !l
+  }), D = c(i.description, {
+    [i.descriptionSmall]: b
+  });
+  return /* @__PURE__ */ e.jsxs(
+    "fieldset",
+    {
+      className: u,
+      disabled: j,
+      ...q,
+      "aria-invalid": p,
+      "aria-describedby": S || void 0,
+      children: [
+        /* @__PURE__ */ e.jsx("legend", { className: x, children: l ? /* @__PURE__ */ e.jsxs(F, { tag: _, size: o, children: [
+          g,
+          m && /* @__PURE__ */ e.jsx(k, {})
+        ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          s,
+          m && /* @__PURE__ */ e.jsx(k, {})
+        ] }) }),
+        t && /* @__PURE__ */ e.jsx("span", { id: f, className: D, children: t }),
+        p && r && /* @__PURE__ */ e.jsx(
+          w,
+          {
+            id: h,
+            type: "invalid",
+            message: r,
+            className: i.systemFeedback
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { className: i.childWrapper, children: n })
+      ]
+    }
+  );
+};
+export {
+  L as DSFieldset
+};