@stihl-design-system/components 1.0.0-RC.1 → 1.0.0-RC.11

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,56 +1,65 @@
-import { type FieldsetHTMLAttributes } from 'react';
-import { type FieldsetProps } from '../Fieldset/Fieldset';
-import { type RadioGroupOption } from './RadioGroup.utils';
+import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetProps } from '../Fieldset/Fieldset';
+import { 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'`
+     * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | '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 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
+     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button.
+     * `{label: string; value: string; customArea?: React.ReactNode; hint?: string}[]`
+     * @prop {{label: string; value: string; customArea?: React.ReactNode; hint?: string}[]} options
      */
     options: RadioGroupOption[];
+    /** Value of the selected Option in **uncontrolled RadioGroup** component. */
+    defaultValue?: string;
+    /** Short descriptive text displayed beneath the legend. */
+    description?: FieldsetProps['description'];
     /**
-     * Set the alignment of the radio buttons
+     * Set the direction of the radio buttons.
+     * `direction="horizontal"` is not possible if a `hint` or `customArea` is passed to the `options`.
+     * @default 'vertical'
      */
-    alignment?: 'vertical' | 'horizontal';
-    /**
-     * Value of the selected Option in **uncontrolled RadioGroup** component
+    direction?: 'vertical' | 'horizontal';
+    /** Disables the radio group, preventing user interaction.
+     * @default false
      */
-    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 */
+    /** Controls whether the hint is displayed when the radio buttons are not checked. If set to `false` labels of radio buttons with hints will be displayed in bold.
+     * @default false
+     */
+    hideUncheckedHints?: 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 */
+    /** Marks the radio group as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
     /** Marks the radio group as required.
-     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend
+     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend.
+     * @default false
      * */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Set the value of the selected option */
+    /** Set the value of the selected option. */
     value?: string;
-    /** Callback function triggered when the value of the radio group changes */
+    /** Callback function called 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,
+ * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
  * */
-export declare const DSRadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,8 @@
-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;
+import { RadioProps } from '../Radio/Radio';
+import { RadioGroupProps } from './RadioGroup';
+export type RadioGroupOption = Pick<RadioProps, 'label' | 'value' | 'customArea' | 'hint'>;
+type ValidationProps = Pick<RadioGroupProps, 'legend' | 'name' | 'options' | 'description' | 'direction' | 'id' | 'systemFeedback'>;
+export declare const optionsHaveHint: (options: RadioGroupOption[]) => boolean;
+export declare const optionsHaveCustomArea: (options: RadioGroupOption[]) => boolean;
+export declare const validateRadioGroupProps: ({ legend, name, options, description, direction, id, systemFeedback, }: ValidationProps) => void;
 export {};

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

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

package/components/Select/Select.d.ts

@@ -1,35 +1,46 @@
-import { type SelectHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import { type SelectOptionsOrOptGroups, type SelectSize } from './Select.utils';
+import { SelectHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    /** Unique id for the select */
+    /** Unique id for the select. */
     id: string;
-    /** Label text displayed above the select */
+    /** Label text displayed above the select. */
     label: string;
     /**
-     * Defines the options, can be a mixed array of options and option groups
+     * 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 */
+    /** Disables the select, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the select label, can be responsive
+    /** Hides the select label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the select as invalid, typically used for form validation */
+    /** Marks the select as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Modifies the empty option label to ensure a conscious choice. */
+    /** Modifies the empty option label to ensure a conscious choice.
+     * @default 'Select'
+     */
     placeholder?: string;
-    /** Indicates that the select is required */
+    /** Indicates that the select is required.
+     * @default false
+     */
     required?: boolean;
-    /** Size of the select */
+    /** Size of the select.
+     * @default 'medium'
+     */
     size?: SelectSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**

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

@@ -1,6 +1,6 @@
-import type { HTMLAttributes } from 'react';
-import type { GroupBase, OptionsOrGroups } from 'react-select';
-import type { SelectProps } from './Select';
+import { HTMLAttributes } from 'react';
+import { GroupBase, OptionsOrGroups } from 'react-select';
+import { SelectProps } from './Select';
 type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options'>;
 export interface SelectOption extends HTMLAttributes<HTMLOptionElement> {
     label: string;

package/components/SkipToContent/SkipToContent.d.ts

@@ -0,0 +1,17 @@
+import { LinkProps } from '../Link/Link';
+export interface SkipToContentProps extends Pick<LinkProps, 'className' | 'theme'> {
+    /** Content within the SkipToContent Link.
+     * @default 'Skip to main content'
+     */
+    children?: string;
+    /** id of the element to be focused by the SkipToContent Link.
+     * @default 'main'
+     */
+    targetElementId?: string;
+}
+/**
+ * The `<DSSkipToContent />` component is an accessibility feature that allows users, especially those using screen readers or keyboard navigation, to quickly jump to the targeted content of a webpage without having to focus all the navigation items first. This improves the user experience by making it easier and faster to access important information.
+ *
+ * Focus the section below by using the tab key to see the "Skip To Content" component in action.
+ */
+export declare const DSSkipToContent: ({ children, className, targetElementId, theme, ...rest }: SkipToContentProps) => JSX.Element;

package/components/SkipToContent/SkipToContent.test.d.ts

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

package/components/Spinner/Spinner.d.ts

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

package/components/Switch/Switch.d.ts

@@ -1,26 +1,36 @@
-import { type ButtonHTMLAttributes } from 'react';
-import type { SelectedAriaAttributes } from '../../types';
-import type { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
+import { ButtonHTMLAttributes } from 'react';
+import { SelectedAriaAttributes } from '../../types';
+import { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
 export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Content within the label */
+    /** Content within the label. */
     children: React.ReactNode;
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<SwitchAriaAttribute>;
-    /** Alignment of the label */
+    /** Alignment of the label.
+     * @default 'left'
+     */
     alignLabel?: SwitchLabelPosition;
-    /** Controls whether the switch is checked. */
+    /** Controls whether the switch is checked.
+     * @default false
+     */
     checked?: boolean;
-    /** Identifier for analytics tracking */
+    /** Identifier for analytics tracking. */
     dataTrackingid?: string;
-    /** Disables the switch, preventing user interaction */
+    /** Disables the switch, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Shows loading indicator */
+    /** Shows loading indicator.
+     * @default false
+     */
     loading?: boolean;
-    /** Stretches the Switch over the parent's width */
+    /** Stretches the Switch over the parent's width.
+     * @default false
+     */
     stretched?: boolean;
-    /** Callback function triggered when the switch is clicked */
+    /** Callback function called when the switch is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**

package/components/SystemFeedback/SystemFeedback.d.ts

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

package/components/Text/Text.d.ts

@@ -1,16 +1,24 @@
-import type { HTMLAttributes } from 'react';
-import type { Theme } from '../../types';
-import type { TextSize, TextTag, TextWeight } from './Text.utils';
+import { HTMLAttributes } from 'react';
+import { Theme } from '../../types';
+import { TextSize, TextTag, TextWeight } from './Text.utils';
 export interface TextProps extends HTMLAttributes<HTMLQuoteElement | HTMLDivElement | HTMLLegendElement | HTMLParagraphElement | HTMLSpanElement | HTMLTimeElement> {
-    /** Content of the text */
+    /** Content of the text. */
     children: React.ReactNode;
-    /** Size of the text */
+    /** Size of the text.
+     * @default 'medium'
+     */
     size?: TextSize;
-    /** Specifies the HTML tag to be used for the text */
+    /** Specifies the HTML tag to be used for the text.
+     * @default 'p'
+     */
     tag?: TextTag;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
-    /** Defines the weight, `size='xx-small'` does not have a bold variant */
+    /** Defines the weight, `size='xx-small'` does not have a bold variant.
+     * @default 'normal'
+     */
     weight?: TextWeight;
 }
 /**

package/components/Textarea/Textarea.d.ts

@@ -1,36 +1,53 @@
-import { type TextareaHTMLAttributes } from 'react';
-import type { BreakpointCustomizable } from '../../types';
-import { type TextareaSize } from './Textarea.utils';
+import { TextareaHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { TextareaSize } from './Textarea.utils';
 export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'rows' | 'cols'> {
-    /** Unique id for the textarea */
+    /** Unique id for the textarea. */
     id: string;
-    /** Label text displayed above the textarea */
+    /** Label text displayed above the textarea. */
     label: string;
-    /** Text displayed when maximum characters are reached */
+    /** Text displayed when maximum characters are reached.
+     * @default 'Character limit reached'
+     */
     charsLimitText?: string;
-    /** Text used for assistive technologies when the characters remaining amount changes */
+    /** Text used for assistive technologies when the characters remaining amount changes.
+     * @default 'Characters remaining:'
+     */
     charsRemainingText?: string;
-    /** Disables the textarea, preventing user interaction */
+    /** Disables the textarea, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the textarea label, can be responsive
+    /** Hides the textarea label, can be responsive.
      *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
-    /** Short descriptive text displayed beneath the label */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the textarea as invalid, typically used for form validation */
+    /** Marks the textarea as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Maximum length of the textarea value - if set, a character counter is visible beneath the textarea */
+    /** 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 */
+    /** Enables the readonly state of the textarea.
+     * @default false
+     */
     readonly?: boolean;
-    /** Indicates that the textarea is required */
+    /** Indicates that the textarea is required.
+     * @default false
+     */
     required?: boolean;
-    /** Controls whether the textarea is resizable manually or automatically adjusts to user input */
+    /** Controls whether the textarea is resizable manually or automatically adjusts to user input.
+     * @default 'vertical'
+     */
     resize?: 'vertical' | 'auto';
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
-    /** Size of the textarea */
+    /** Size of the textarea.
+     * @default 'medium'
+     */
     size?: TextareaSize;
     /** CSS className that can be set on the wrapping container of `<DSTextarea />`.  */
     wrapperClassName?: string;

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

@@ -1,4 +1,4 @@
-import type { TextareaProps } from './Textarea';
+import { TextareaProps } from './Textarea';
 export declare const TEXTAREA_SIZE: readonly ["medium", "small"];
 export type TextareaSize = (typeof TEXTAREA_SIZE)[number];
 type ValidationProps = Pick<TextareaProps, 'id' | 'label'>;

package/components/Title/Title.d.ts

@@ -1,14 +1,20 @@
-import type { HTMLAttributes } from 'react';
-import type { Theme } from '../../types';
-import type { TitleSize, TitleTag } from './Title.utils';
+import { HTMLAttributes } from 'react';
+import { Theme } from '../../types';
+import { TitleSize, TitleTag } from './Title.utils';
 export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
-    /** Content of the title */
+    /** Content of the title. */
     children: React.ReactNode;
-    /** Size of the title */
+    /** Size of the title.
+     * @default 'x-large'
+     */
     size?: TitleSize;
-    /** Specifies the HTML tag to be used for the title */
+    /** Specifies the HTML tag to be used for the title.
+     * @default 'h1'
+     */
     tag?: TitleTag;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
 /**

package/components/Toast/Toast.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes } from 'react';
+import { ToastVariant } from './Toast.utils';
+export interface ToastProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave'> {
+    /** Message displayed in the Toast. */
+    message: string;
+    /** Hides the icon of the Toast.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /** Visual style variant of the Toast.
+     * @default 'info'
+     */
+    variant?: ToastVariant;
+    /** Used by the ToastManager to clear the timeout of the toast removal. */
+    onClick: () => void;
+    /** Used by the ToastManager to clear the timeout of the toast removal. */
+    onMouseEnter: () => void;
+    /** Used by the ToastManager to start timeout of the toast removal again. */
+    onMouseLeave: () => void;
+}
+/**
+ * Toasts are small, non-intrusive messages that appear temporarily to provide feedback or information.
+ *
+ * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
+ *
+ * */
+export declare const DSToast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/Toast/Toast.utils.d.ts

@@ -0,0 +1,14 @@
+import { IconName } from '../../types';
+export declare const TOAST_VARIANT: readonly ["info", "success", "warning"];
+export type ToastVariant = (typeof TOAST_VARIANT)[number];
+export declare const TOAST_ICONS: Record<ToastVariant, IconName>;
+export type ToastOptions = {
+    /** Visual style variant of the Toast.
+     * @default 'info'
+     */
+    variant?: ToastVariant;
+    /** Hides the icon of the Toast.
+     * @default false
+     */
+    hideIcon?: boolean;
+};

package/components/Toast/ToastManager.d.ts

@@ -0,0 +1,9 @@
+import { ToastOptions } from './Toast.utils';
+type ToastContextType = {
+    queueDSToastMessage: (message: string, options?: ToastOptions) => void;
+};
+export declare const useDSToast: () => ToastContextType;
+export declare const DSToastProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/components/Toast/ToastManager.test.d.ts

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

package/components/Toast/ToastManager.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const validateIsLiveRegionPresent: () => void;
+export declare const validateMultipleToastsOnPage: () => void;

package/components/Toast/ToastManager.utils.test.d.ts

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

package/customreactselect.d.ts

@@ -1 +1,2 @@
 export * from './components/CustomReactSelect/CustomReactSelect'
+export {}

package/customreactselect.lYJhIeyx.js

@@ -0,0 +1,13 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import { c as l } from "./chunks/CustomReactSelect.D3jv5-fa.js";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.DDn-yX4P.js";
+import "./chunks/Icon.C2o2seDb.js";
+import "./systemfeedback.ZzRUAVYX.js";
+import "./optioncheckbox.BPN3f6l_.js";
+export {
+  l as CustomReactSelect
+};

package/dialog.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Dialog/Dialog'
+export {}

package/dialog.lGwNQU91.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./button.C5opEJ6x.js";
+import { D as e } from "./chunks/Dialog.Fwr6vLiK.js";
+export {
+  e as DSDialog
+};

package/drawer.DNi5m8wP.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./button.C5opEJ6x.js";
+import { D as e } from "./chunks/Drawer.CKoYzQHd.js";
+export {
+  e as DSDrawer
+};

package/drawer.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Drawer/Drawer'
+export {}

package/fieldset.BqiAjeax.js

@@ -0,0 +1,11 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./asterisk.DDn-yX4P.js";
+import "./heading.CAkraI2D.js";
+import "./systemfeedback.ZzRUAVYX.js";
+import { D as l } from "./chunks/Fieldset.C9K8BYmH.js";
+export {
+  l as DSFieldset
+};

package/fieldset.d.ts

@@ -1 +1,2 @@
 export * from './components/Fieldset/Fieldset'
+export {}

package/flag.XJHHSP38.js

@@ -0,0 +1,43 @@
+"use client";
+import { j as e } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as i } from "./chunks/index.CvOaL64Y.js";
+import { D as n } from "./chunks/Icon.C2o2seDb.js";
+import './assets/flag.DX_lH1v7.css';const h = "_flag_dk9bs_76", d = "_flag--color-grey-light_dk9bs_103", b = "_flag--color-yellow-light_dk9bs_106", C = "_flag--color-red-light_dk9bs_109", k = "_flag--color-green-light_dk9bs_112", y = "_flag--color-orange-base_dk9bs_115", o = {
+  flag: h,
+  "flag--color-grey-light": "_flag--color-grey-light_dk9bs_103",
+  flagColorGreyLight: d,
+  "flag--color-yellow-light": "_flag--color-yellow-light_dk9bs_106",
+  flagColorYellowLight: b,
+  "flag--color-red-light": "_flag--color-red-light_dk9bs_109",
+  flagColorRedLight: C,
+  "flag--color-green-light": "_flag--color-green-light_dk9bs_112",
+  flagColorGreenLight: k,
+  "flag--color-orange-base": "_flag--color-orange-base_dk9bs_115",
+  flagColorOrangeBase: y
+}, u = ({
+  children: s,
+  className: t,
+  color: l,
+  iconName: g,
+  iconSource: r,
+  ...f
+}) => {
+  const a = typeof l == "string" && o[`flag--color-${l}`], _ = a ? {} : { backgroundColor: l }, c = i(o.flag, t, {
+    [o[`flag--color-${l}`]]: a
+  });
+  return /* @__PURE__ */ e.jsxs("span", { className: c, style: _, ...f, children: [
+    (g || r) && /* @__PURE__ */ e.jsx(
+      n,
+      {
+        name: g,
+        theme: "light",
+        source: r,
+        "aria-hidden": "true"
+      }
+    ),
+    s
+  ] });
+};
+export {
+  u as DSFlag
+};

package/flag.d.ts

@@ -0,0 +1,2 @@
+export * from './components/Flag/Flag'
+export {}