@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,51 @@
+import { HTMLAttributes, JSX } from 'react';
+import { IconName } from '../../types';
+import { TabsAlignment } from './Tabs.utils';
+export interface Tab {
+    /** Content displayed when the Tab is active. */
+    content: React.ReactNode;
+    /** Unique id for the Tab. */
+    id: string;
+    /** Label text displayed on the Tab. */
+    label: string;
+    /** Name of the icon to display */
+    iconName?: IconName;
+    /** Number Indicator value displayed next to the label. */
+    numberIndicatorValue?: string;
+}
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique id for the tab list. */
+    id: string;
+    /** An array of Tab Objects containing the id, content, label, and other optional parameters.
+     *  `{ content: React.ReactNode;`
+     *  `id: string;`
+     *  `label: string;`
+     *  `iconName?: IconName;`
+     *  `numberIndicatorValue?: string; }[]`
+     */
+    tabs: Tab[];
+    /** Index of the tab that should be active. */
+    activeTabIndex?: number;
+    /** Alignment of the Tabs.
+     * @default 'left'
+     */
+    alignment?: TabsAlignment;
+    /**
+     * Additional class name to apply to the tab pane.
+     */
+    classNameTabPane?: string;
+    /** Index of the tab to be selected when Tabs are rendered the first time in **uncontrolled DSTabs** component.
+     * @default 0
+     * */
+    defaultSelectedTabIndex?: number;
+    /** Callback function called when the selected tab changes. */
+    onTabChange?: (selectedTabIndex: number) => void;
+}
+/**
+ * A component for organizing content into tabbed sections, allowing users to navigate between them.
+ * Supports single selection to maintain focus on one content area at a time.
+ * Avoid excessive tabs to prevent overwhelming the user.
+ *
+ * Design in Figma: [Tabs](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=24564-313&t=UBsmFURFENnuYSW1-11)
+ */
+export declare const DSTabs: ({ id: tabListId, tabs, activeTabIndex, alignment, className, classNameTabPane, defaultSelectedTabIndex, onTabChange, ...rest }: TabsProps) => JSX.Element;

package/components/Tabs/Tabs.test.d.ts

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

package/components/Tabs/Tabs.utils.d.ts

@@ -0,0 +1,6 @@
+import { TabsProps } from './Tabs';
+export declare const TABS_ALIGNMENT: readonly ["left", "center"];
+export type TabsAlignment = (typeof TABS_ALIGNMENT)[number];
+export declare const TABS_DIRECTION: readonly ["prev", "next"];
+export type TabsDirection = (typeof TABS_DIRECTION)[number];
+export declare const validateTabsProps: ({ id, tabs, defaultSelectedTabIndex, }: TabsProps) => void;

package/components/Text/Text.d.ts

@@ -1,22 +1,31 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } 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;
 }
 /**
- *  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.
+ * 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.
+ *
+ * Design in Figma: [Text](https://www.figma.com/design/d9wrOp4aCplDsV9AVC87Xn/Typography-%F0%9F%85%B0%EF%B8%8F?node-id=3-2301&t=TeSgud7dB5pnld5s-11)
  */
 export declare const DSText: ({ children, className, size, tag, theme, weight, ...rest }: TextProps) => JSX.Element;

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

@@ -1,6 +1,19 @@
-export declare const TEXT_TAG: readonly ["address", "blockquote", "cite", "div", "figcaption", "legend", "p", "span", "time"];
+export declare const TEXT_TAG: readonly ["address", "blockquote", "cite", "div", "dd", "dfn", "dt", "figcaption", "legend", "li", "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];
+/**
+ * Determines whether the specified HTMLElement is within one or more elements
+ * matching the provided CSS selector(s).
+ *
+ * This function checks if the given HTMLElement (`host`) is a descendant of
+ * any of the specified selectors in the DOM tree. It utilizes the
+ * `getClosestHTMLElement` utility to traverse the DOM hierarchy.
+ *
+ * @param {HTMLElement} host - The HTMLElement to check for being within a matching element.
+ * @param {string | string[]} selector - A CSS selector or an array of selectors to match against.
+ * @returns {boolean} `true` if the `host` element is within any matching element; otherwise, `false`.
+ */
+export declare const isWithinElement: (host: HTMLElement, selector: string | string[]) => boolean;

package/components/TextUtility/TextUtility.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes, JSX } from 'react';
+import { Theme } from '../../types';
+import { TextUtilitySize, TextUtilityTag, TextUtilityWeight } from './TextUtility.utils';
+export interface TextUtilityProps extends HTMLAttributes<HTMLQuoteElement | HTMLDivElement | HTMLLegendElement | HTMLParagraphElement | HTMLSpanElement | HTMLTimeElement> {
+    /** Content of the text. */
+    children: React.ReactNode;
+    /** Size of the text.
+     * @default 'medium'
+     */
+    size?: TextUtilitySize;
+    /** Specifies the HTML tag to be used for the text.
+     * @default 'p'
+     */
+    tag?: TextUtilityTag;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+    /** Defines the weight. **Weight 'demi' is only supported on sizes 'small' and 'x-small'. Size 'x-small' only supports 'demi' weight.**.
+     * @default 'normal'
+     */
+    weight?: TextUtilityWeight;
+}
+/**
+ * The `DSTextUtility` component is optimized for utility text use-cases
+ * (labels, captions, UI text) and maps directly to the SCSS utility typography mixins.
+ *
+ * Design in Figma: [Text](https://www.figma.com/design/d9wrOp4aCplDsV9AVC87Xn/Typography-%F0%9F%85%B0%EF%B8%8F?node-id=3-2301&t=TeSgud7dB5pnld5s-11)
+ */
+export declare const DSTextUtility: ({ children, className, size, tag, theme, weight, ...rest }: TextUtilityProps) => JSX.Element;

package/components/TextUtility/TextUtility.test.d.ts

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

package/components/TextUtility/TextUtility.utils.d.ts

@@ -0,0 +1,10 @@
+import { TextUtilityProps } from './TextUtility';
+export declare const TEXT_UTILITY_TAG: readonly ["address", "blockquote", "cite", "div", "dd", "dfn", "dt", "figcaption", "legend", "li", "p", "span", "time"];
+export type TextUtilityTag = (typeof TEXT_UTILITY_TAG)[number];
+export declare const TEXT_UTILITY_SIZE: readonly ["large", "medium", "small", "x-small"];
+export type TextUtilitySize = (typeof TEXT_UTILITY_SIZE)[number];
+export declare const TEXT_UTILITY_WEIGHT: readonly ["bold", "demi", "normal"];
+export type TextUtilityWeight = (typeof TEXT_UTILITY_WEIGHT)[number];
+type ValidationProps = Pick<TextUtilityProps, 'size' | 'weight'>;
+export declare const validateTextUtilityProps: ({ size, weight }: ValidationProps) => void;
+export {};

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

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

package/components/Textarea/Textarea.d.ts

@@ -1,37 +1,66 @@
 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 */
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** 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;
@@ -39,5 +68,7 @@ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaE
 /**
  * The `<DSTextarea />` component allows users to enter and edit multi line text.
  * It comes in two sizes (medium & small) and supports various customizations
+ *
+ * Design in Figma: [Textarea](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=4937-4402)
  */
-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;
+export declare const DSTextarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

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

@@ -1,8 +1,7 @@
 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'>;
+type ValidationProps = Pick<TextareaProps, 'id' | 'label' | 'hideLabel' | 'popoverContent'>;
 /**
  * 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
@@ -10,5 +9,5 @@ type ValidationProps = Pick<TextareaProps, 'id' | 'label'>;
  *
  * @param validationProps - The subset of DSTextarea properties to validate.
  */
-export declare const validateTextareaProps: ({ id, label }: ValidationProps) => void;
+export declare const validateTextareaProps: ({ id, label, hideLabel, popoverContent, }: ValidationProps) => void;
 export {};

package/components/Title/Title.d.ts

@@ -1,15 +1,20 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } 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;
 }
 /**
@@ -17,5 +22,7 @@ export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
  * 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.
+ *
+ * Design in Figma: [Title](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=7-77&t=ZOQH7XUcmLFb8aah-11)
  */
 export declare const DSTitle: ({ children, className, size, tag, theme, ...rest }: TitleProps) => JSX.Element;

package/components/Toast/Toast.d.ts

@@ -1,21 +1,42 @@
 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 displayed in the Toast. */
     message: string;
-    /** Hides the icon of the Toast */
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close notification'
+     */
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Hides the icon of the Toast.
+     * @default false
+     */
     hideIcon?: boolean;
-    /** Visual style variant of the Toast */
+    /** Visual style variant of the Toast.
+     * @default 'info'
+     */
     variant?: ToastVariant;
-    /** Used by the ToastManager to clear the timeout of the toast removal */
+    /** 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 */
+    /** 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 */
+    /** 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.
+ *
+ * Design in Figma: [Toast](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=8844-4923)
+ *
+ * <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

@@ -1,9 +1,27 @@
 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 = {
+    /** `data-*`: Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Visual style variant of the Toast.
+     * @default 'info'
+     */
     variant?: ToastVariant;
+    /** Hides the icon of the Toast.
+     * @default false
+     */
     hideIcon?: boolean;
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close toast'
+     */
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
 };

package/components/Toast/ToastManager.d.ts

@@ -1,6 +1,9 @@
 import { ToastOptions } from './Toast.utils';
-
-export declare const useToast: () => {
-    toast: import("react/jsx-runtime").JSX.Element | undefined;
-    queueToastMessage: (message: string, options?: ToastOptions) => void;
+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/Tooltip/Tooltip.d.ts

@@ -0,0 +1,40 @@
+import { HTMLProps, JSX } from 'react';
+import { OpenChangeReason, Placement } from '@floating-ui/react';
+export interface TooltipProps {
+    /** Content within the Tooltip. */
+    children?: React.ReactNode;
+    /** Opens the Tooltip on initial render.
+     * @default false
+     */
+    initialOpen?: boolean;
+    /** The placement of the Tooltip relative to the anchor element.
+     * @default 'top'
+     */
+    placement?: Placement;
+    /** The offset distance in "px" between the Tooltip and its anchor element.
+     * @default 6
+     */
+    tooltipOffset?: number;
+    /** Controls the open state of the Tooltip. If provided, it will be a controlled component.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** A function that is called when the open state should change. */
+    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
+}
+/**
+ * The Tooltip component is used to display additional information or actions related to an anchor element. It is opened on hover or focus. It can be positioned relative to the anchor and supports various placements and offsets.
+ *
+ * Design in Figma: [Tooltip](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/branch/HovZmjHiwxguawTWTO6ibS/Core-Components-%F0%9F%92%A0?node-id=26075-11658&p=f&t=TYKSgw0ZlRDBBUfn-11)
+ * */
+export declare const Tooltip: {
+    ({ children, ...rest }: TooltipProps): JSX.Element;
+    /** attach static members */
+    Anchor: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & TooltipAnchorProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+interface TooltipAnchorProps {
+    children: React.ReactNode;
+}
+export {};

package/components/Tooltip/Tooltip.test.d.ts

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

package/components/Tooltip/Tooltip.utils.d.ts

@@ -0,0 +1,70 @@
+import { TooltipProps } from './Tooltip';
+/**
+ * Tooltip hook for managing tooltip state and behavior.
+ * @param TooltipProps Tooltip props
+ * @returns Tooltip state and actions
+ */
+export declare function useTooltip({ initialOpen, placement, isOpen: controlledOpen, tooltipOffset, onOpenChange: setControlledOpen, }?: TooltipProps): {
+    placement: import('@floating-ui/utils').Placement;
+    strategy: import('@floating-ui/utils').Strategy;
+    middlewareData: import('@floating-ui/core').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    tooltipOffset: number;
+    setOpen: (isOpen: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+};
+export declare const validateTooltipAnchor: (children: React.ReactNode) => void;
+/**
+ * Validates the children of the tooltip component in development environment.
+ * - Check for children presence
+ * - Validate that <Tooltip.Anchor> and <Tooltip.Content> are used together.
+ *
+ * @param {Object} childrenObject
+ * @param {React.ReactNode} childrenObject.children - The Tooltip children.
+ * @param {boolean} childrenObject.hasContent - Whether <Tooltip.Content> is present.
+ * @param {boolean} childrenObject.hasAnchor - Whether <Tooltip.Anchor> is present.
+ * @returns {void}
+ */
+export declare const validateTooltipChildren: ({ children, hasContent, hasAnchor, }: {
+    children: React.ReactNode;
+    hasContent: boolean;
+    hasAnchor: boolean;
+}) => void;

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

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

package/components/TopBar/TopBar.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { SelectedAriaAttributes } from '../../types';
+import { OptionalSlotProps, SlotProps } from '../Header/Header.utils';
+import { Logo, LogoAriaAttribute, LogoTarget } from '../Logo/Logo.utils';
+import { BrandAddOnVariant } from './TopBar.utils';
+/** Props for the root <Header.TopBar> */
+interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    rootClassName?: string;
+}
+export interface BrandAreaLogoProps {
+    /**
+     * `aria`: Accessibility attributes for screen readers.
+     * Ensure to provide a descriptive label via `aria-label`.
+     * `{'aria-label'? string;}`
+     */
+    aria: SelectedAriaAttributes<LogoAriaAttribute>;
+    /** Defines the URL to link to. If you provide a URL, the component will be rendered as a link.
+     * * @default '/'
+     */
+    href: string;
+    /**
+     * Controls main and sub-brand logo display.
+     * @default 'main'
+     */
+    logo?: Logo;
+    /** The target of the link.
+     * @default '_self'
+     */
+    target?: LogoTarget;
+}
+export interface BrandAddOnProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Content of the brand add-on. */
+    children?: React.ReactNode;
+    /** Sub title displayed below the `children` to create a two line brand add-on. */
+    subTitle?: string;
+    /** Predefined variant of the brand add-on.
+     * @default 'single'
+     */
+    variant?: BrandAddOnVariant;
+}
+/** Compound type for TopBar with its static slots */
+interface TopBarComponent extends React.FC<TopBarProps> {
+    BrandArea: React.FC<OptionalSlotProps>;
+    PrimaryArea: React.FC<SlotProps>;
+    SecondaryArea: React.FC<SlotProps>;
+}
+/**
+ * The `<DSTopBar />`.
+ *
+ * Design in Figma: [Top Bar](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=5381-2186&t=7P7x6ASRWyOtQQJG-4)
+ */
+export declare const DSTopBar: TopBarComponent;
+export {};

package/components/TopBar/TopBar.utils.d.ts

@@ -0,0 +1,14 @@
+export declare const validateTopBarChildren: ({ hasBrandArea, hasPrimaryArea, hasSecondaryArea, }: {
+    hasBrandArea: boolean;
+    hasPrimaryArea: boolean;
+    hasSecondaryArea: boolean;
+}) => void;
+/**
+ * Checks whether a value is undefined, null, or an empty plain object.
+ *
+ * @param obj - The value to check.
+ * @returns `true` if the value is undefined, null, or a non-array object with no own enumerable properties; otherwise, `false`.
+ */
+export declare const isEmptyObjectOrUndefined: (obj: unknown) => boolean;
+export declare const BRAND_ADDON_VARIANT: readonly ["100years"];
+export type BrandAddOnVariant = (typeof BRAND_ADDON_VARIANT)[number];

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

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

package/connected-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512"><path fill="#F37A1F" d="M0 0h512v512H0z"/><path fill="#fff" d="M366.806 304.042c-17.69 35.56-54.39 60.01-96.8 60.04-57.87.04-105.97-46.12-108.17-103.95-2.35-61.65 46.94-112.38 108.08-112.38 42.34 0 78.99 24.33 96.75 59.77l48.01-48.01c-31.31-46.94-84.85-77.78-145.57-77.51-96.25.44-174.4 80.08-173.09 176.33 1.28 94.95 78.65 171.51 173.9 171.51 60.49 0 113.77-30.89 144.93-77.76l-48.04-48.04Z"/><path fill="#fff" d="M320.115 257.376c-.92-.92-.92-2.41 0-3.32l36.3-36.3c-9.38-21.21-26.31-38.31-47.39-47.92l-84.21 84.21c-.92.91-.92 2.4 0 3.32l84.5 84.5c21.05-9.67 37.93-26.83 47.23-48.07l-36.43-36.43"/></svg>

package/customreactselect.D7YraWJ7.js

@@ -0,0 +1,15 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.cKLI89Eg.js";
+import "./chunks/index.DQOqod3i.js";
+import "react";
+import { c as f } from "./chunks/CustomReactSelect.DBsnmMPl.js";
+import "./chunks/useBreakpoint.1txsny17.js";
+import "./asterisk.Dwtdwpkq.js";
+import "./chunks/Icon.m6sMB6vl.js";
+import "./chunks/Popover.C5wtha5l.js";
+import "./chunks/SystemFeedback.DFN6Y2cw.js";
+import "./optioncheckbox.v8Plcgeg.js";
+export {
+  f as CustomReactSelect
+};

package/customreactselect.d.ts

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

package/dialog.CBovd8em.js

@@ -0,0 +1,9 @@
+"use client";
+import "react/jsx-runtime";
+import "./chunks/index.DQOqod3i.js";
+import "react";
+import "./chunks/Button.DpGeheky.js";
+import { D as e } from "./chunks/Dialog.C-rcs_Up.js";
+export {
+  e as DSDialog
+};