@frontify/fondue-components 13.0.2 → 14.1.0

package/dist/fondue-components9.js

@@ -1,130 +1,33 @@
-import { jsx as d, jsxs as m } from "react/jsx-runtime";
-import { IconCaretRight as I } from "@frontify/fondue-icons";
-import * as n from "@radix-ui/react-dropdown-menu";
-import { forwardRef as i } from "react";
-import { useFondueTheme as w, ThemeProvider as f } from "./fondue-components27.js";
-import { useProcessedChildren as g } from "./fondue-components45.js";
-import a from "./fondue-components46.js";
-const D = ({
-  children: t,
-  open: o,
-  modal: e = !1,
-  onOpenChange: r,
-  "data-test-id": s = "fondue-dropdown"
-}) => /* @__PURE__ */ d(n.Root, { open: o, modal: e, onOpenChange: r, "data-test-id": s, children: t });
-D.displayName = "Dropdown.Root";
-const b = ({
-  asChild: t = !0,
-  children: o,
-  "data-test-id": e = "fondue-dropdown-trigger",
-  ...r
-}, s) => /* @__PURE__ */ d(n.Trigger, { asChild: t, "data-test-id": e, ref: s, ...r, children: o });
-b.displayName = "Dropdown.Trigger";
-const P = {
-  compact: 8,
-  comfortable: 12,
-  spacious: 16
-}, S = ({
-  side: t = "bottom",
-  align: o = "start",
-  triggerOffset: e = "compact",
-  children: r,
-  preventTriggerFocusOnClose: s,
-  "data-test-id": p = "fondue-dropdown-content"
-}, u) => {
-  const c = w();
-  return /* @__PURE__ */ d(n.Portal, { children: /* @__PURE__ */ d(f, { theme: c, children: /* @__PURE__ */ d(
-    n.Content,
+import { jsx as d } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-separator";
+import { forwardRef as s } from "react";
+import { cn as f } from "./fondue-components33.js";
+import { dividerStyles as p } from "./fondue-components46.js";
+const n = s(
+  ({
+    "data-test-id": r = "fondue-divider",
+    direction: o = "horizontal",
+    className: t,
+    variant: i,
+    ...e
+  }, a) => /* @__PURE__ */ d(
+    m.Root,
     {
-      align: o,
-      collisionPadding: 8,
-      sideOffset: P[e],
-      side: t,
-      className: a.content,
-      "data-test-id": p,
-      ref: u,
-      onCloseAutoFocus: (l) => {
-        s && l.preventDefault();
-      },
-      children: r
+      ref: a,
+      className: f(
+        p({
+          direction: o,
+          variant: i,
+          ...e
+        }),
+        t
+      ),
+      "data-test-id": r
     }
-  ) }) });
-};
-S.displayName = "Dropdown.Content";
-const N = ({ children: t, heading: o, "data-test-id": e = "fondue-dropdown-group" }, r) => /* @__PURE__ */ m(n.Group, { className: a.group, "data-test-id": e, ref: r, children: [
-  o ? /* @__PURE__ */ d("div", { className: a.groupHeading, children: /* @__PURE__ */ d("span", { "aria-label": o, children: o }) }) : null,
-  t
-] });
-N.displayName = "Dropdown.Group";
-const C = ({
-  children: t,
-  "data-test-id": o = "fondue-dropdown-submenu"
-}) => /* @__PURE__ */ d(n.Sub, { "data-test-id": o, children: t });
-C.displayName = "Dropdown.SubMenu";
-const h = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, e) => {
-  const { content: r } = g(t);
-  return /* @__PURE__ */ m(n.SubTrigger, { className: a.subTrigger, "data-test-id": o, ref: e, children: [
-    r,
-    /* @__PURE__ */ d(I, { className: a.subMenuIndicator, size: 16 })
-  ] });
-};
-h.displayName = "Dropdown.SubTrigger";
-const R = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, e) => {
-  const r = w();
-  return /* @__PURE__ */ d(n.Portal, { children: /* @__PURE__ */ d(f, { theme: r, children: /* @__PURE__ */ d(n.SubContent, { className: a.subContent, "data-test-id": o, ref: e, children: t }) }) });
-};
-R.displayName = "Dropdown.SubContent";
-const T = ({
-  children: t,
-  disabled: o,
-  textValue: e,
-  onSelect: r,
-  emphasis: s = "default",
-  asChild: p = !1,
-  "data-test-id": u = "fondue-dropdown-subtrigger",
-  ...c
-}, l) => {
-  const { content: F } = g(t);
-  return /* @__PURE__ */ d(
-    n.Item,
-    {
-      onSelect: r,
-      className: a.item,
-      textValue: e,
-      "data-test-id": u,
-      "data-emphasis": s,
-      ref: l,
-      disabled: o,
-      asChild: p,
-      ...c,
-      children: F
-    }
-  );
-};
-T.displayName = "Dropdown.Item";
-const y = ({ children: t, name: o, "data-test-id": e = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ d("div", { "data-name": o, className: a.slot, "data-test-id": e, ref: r, children: t });
-y.displayName = "Dropdown.Slot";
-const G = i(b), M = i(S), v = i(N), x = i(h), A = i(R), j = i(T), z = i(y), E = {
-  Root: D,
-  Trigger: G,
-  Content: M,
-  Group: v,
-  SubMenu: C,
-  SubTrigger: x,
-  SubContent: A,
-  Item: j,
-  Slot: z
-};
+  )
+);
+n.displayName = "Divider";
 export {
-  E as Dropdown,
-  S as DropdownContent,
-  N as DropdownGroup,
-  T as DropdownItem,
-  D as DropdownRoot,
-  y as DropdownSlot,
-  R as DropdownSubContent,
-  C as DropdownSubMenu,
-  h as DropdownSubTrigger,
-  b as DropdownTrigger
+  n as Divider
 };
 //# sourceMappingURL=fondue-components9.js.map

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={8}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild={asChild}\n            {...props}\n        >\n            {content}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","SPACING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n            />\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","props","ref","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AAuCO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAAF;AAAA,MACA,WAAWG;AAAA,QACPC,EAAc;AAAA,UACV,WAAAR;AAAA,UACA,SAAAE;AAAA,UACA,GAAGC;AAAA,QAAA,CACN;AAAA,QACDF;AAAA,MACJ;AAAA,MACA,gBAAcF;AAAA,IAAA;AAAA,EAClB;AAGZ;AAEAF,EAAQ,cAAc;"}

package/dist/index.d.ts

@@ -12,11 +12,121 @@ import { HTMLAttributeAnchorTarget } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
+import { MouseEventHandler } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SyntheticEvent } from 'react';
 
+export declare const Accordion: {
+    Root: {
+        ({ "data-test-id": dataTestId, border, children, defaultValue, disabled, value, }: AccordionRootProps): JSX_2.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ "data-test-id": dataTestId, children, disabled, onClick, value, }: AccordionItemProps): JSX_2.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ children }: AccordionHeaderProps): JSX_2.Element;
+        displayName: string;
+    };
+    Trigger: {
+        ({ "data-test-id": dataTestId, children, }: AccordionTriggerProps): JSX_2.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ "data-test-id": dataTestId, children, divider, onClick, padding, }: AccordionContentProps): JSX_2.Element;
+        displayName: string;
+    };
+};
+
+declare type AccordionContentProps = {
+    'data-test-id'?: string;
+    /**
+     * Children of the Accordion content. This contains the main content.
+     */
+    children?: ReactNode;
+    /**
+     * Adds a divider line between the header and the content.
+     */
+    divider?: boolean;
+    /**
+     * Click callback for the content.
+     */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * Controls if we show paddings around the content.
+     * @default 'large'
+     */
+    padding?: AccordionPadding;
+};
+
+declare type AccordionHeaderProps = {
+    /**
+     * Children of the Accordion header. This should contain `Accordion.Trigger`
+     */
+    children?: ReactNode;
+};
+
+declare type AccordionItemProps = {
+    'data-test-id'?: string;
+    /**
+     * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components
+     */
+    children?: ReactNode;
+    /**
+     * Whether or not an accordion item is disabled from user interaction.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Click callback for this item.
+     */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /**
+     * A string value for the accordion item. All items within an accordion should use a unique value.
+     */
+    value: string;
+};
+
+declare type AccordionPadding = 'none' | 'small' | 'medium' | 'large';
+
+declare type AccordionRootProps = {
+    'data-test-id'?: string;
+    /**
+     * Show or hide the top and bottom border
+     * @default true
+     */
+    border?: boolean;
+    /**
+     * Children of the Accordion component. This should contain the `Accordion.Item` components
+     */
+    children?: ReactNode;
+    /**
+     * The value of the items whose contents are expanded when the accordion is initially rendered.
+     * Use `defaultValue` if you do not need to control the state of an accordion.
+     */
+    defaultValue?: string[];
+    /**
+     * Whether or not an accordion is disabled from user interaction.
+     */
+    disabled?: boolean;
+    /**
+     * The controlled stateful value of the accordion items whose contents are expanded.
+     */
+    value?: string[];
+};
+
+declare type AccordionTriggerProps = {
+    'data-test-id'?: string;
+    /**
+     * Children of the Accordion trigger. This contains the actually clickable and visible header content
+     */
+    children?: ReactNode;
+};
+
 declare type AriaLabelAttrs = Pick<AriaAttributes, 'aria-label'> & Pick<AriaAttributes, 'aria-labelledby'>;
 
 declare type AtLeastOneAriaLabelAttr = AtLeastOneAttr<AriaLabelAttrs>;
@@ -248,55 +358,6 @@ declare type ColorPickerProps = {
     'data-test-id'?: string;
 };
 
-declare type ComboboxProps = {
-    /**
-     * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.
-     */
-    children?: ReactNode;
-    /**
-     * Callback function that is called when an item is selected.
-     */
-    onSelect?: (selectedValue: string | null) => void;
-    /**
-     * The active value in the combobox component. This is used to control the combobox externally.
-     */
-    value?: string | null;
-    /**
-     * The default value of the combobox component. Used for uncontrolled usages.
-     */
-    defaultValue?: string;
-    /**
-     * The placeholder in the combobox component.
-     */
-    placeholder?: string;
-    /**
-     * Status of the text input
-     * @default "neutral"
-     */
-    status?: 'neutral' | 'success' | 'error';
-    /**
-     * Disables the combobox component.
-     */
-    disabled?: boolean;
-    /**
-     * The alignment of the menu.
-     * @default "start"
-     */
-    alignMenu?: 'start' | 'center' | 'end' /**
-    * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.
-    * @default "bottom"
-    */;
-    side?: 'left' | 'right' | 'bottom' | 'top';
-    /**
-     * The aria label of the combobox component.
-     */
-    'aria-label'?: string;
-    /**
-     * The data test id of the select component.
-     */
-    'data-test-id'?: string;
-};
-
 declare type CommonAriaAttrs_2 = Pick<AriaAttributes, 'aria-describedby'> & AtLeastOneAriaLabelAttr;
 
 declare type CommonAriaProps = {
@@ -732,6 +793,11 @@ declare type FlyoutContentProps = {
      * @default "fit-content"
      */
     width?: string;
+    /**
+     * Defines the spacing between the dropdown and its trigger.
+     * @default 'compact'
+     */
+    triggerOffset?: FlyoutSpacing;
     /**
      * Define the maximum width of the flyout
      * @default "360px"
@@ -774,6 +840,8 @@ declare type FlyoutRootProps = {
     children?: ReactNode;
 };
 
+declare type FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';
+
 declare type FlyoutTriggerProps = {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -784,7 +852,54 @@ declare type FlyoutTriggerProps = {
     'data-test-id'?: string;
 };
 
-declare const ForwardedRefCombobox: ForwardRefExoticComponent<ComboboxProps & RefAttributes<HTMLDivElement>>;
+declare const ForwardedRefCombobox: ForwardRefExoticComponent<    {
+/**
+* Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.
+*/
+children?: ReactNode;
+/**
+* Callback function that is called when an item is selected.
+*/
+onSelect?: (selectedValue: string | null) => void;
+/**
+* The active value in the combobox component. This is used to control the combobox externally.
+*/
+value?: string | null;
+/**
+* The default value of the combobox component. Used for uncontrolled usages.
+*/
+defaultValue?: string;
+/**
+* The placeholder in the combobox component.
+*/
+placeholder?: string;
+/**
+* Status of the text input
+* @default "neutral"
+*/
+status?: "neutral" | "success" | "error";
+/**
+* Disables the combobox component.
+*/
+disabled?: boolean;
+/**
+* The alignment of the menu.
+* @default "start"
+*/
+alignMenu?: "start" | "center" | "end" /**
+* Defines the preferred side of the combobox. It will not be respected if there are collisions with the viewport.
+* @default "bottom"
+*/;
+side?: "left" | "right" | "bottom" | "top";
+/**
+* Id of the combobox component
+*/
+id?: string;
+/**
+* The data test id of the combobox component.
+*/
+'data-test-id'?: string;
+} & CommonAriaProps & RefAttributes<HTMLDivElement>>;
 
 declare const ForwardedRefSelectItem: ForwardRefExoticComponent<SelectItemProps & RefAttributes<HTMLLIElement>>;
 
@@ -884,6 +999,7 @@ declare type LabelProps = {
      */
     required?: boolean;
     className?: string;
+    onClick?: MouseEventHandler<HTMLLabelElement>;
     'data-test-id'?: string;
 };
 
@@ -1112,12 +1228,17 @@ export declare const ScrollArea: ForwardRefExoticComponent<ScrollAreaProps & Ref
 declare type ScrollAreaProps = {
     /**
      * "auto" visible when content is overflowing on the corresponding orientation.
-     * "always" always visible regardless of whether the content is overflowing.
+     * "always" always visible regardless of whether the content is overflowing. Sets the scrollbar gutter to stable.
      * "scroll" visible when the user is scrolling along its corresponding orientation.
      * "hover" when the user is hovering over the scroll area.
      * @default 'hover'
      */
     type?: 'auto' | 'always' | 'scroll' | 'hover';
+    /**
+     * Determines if the scrollbar should take up space in the content area
+     * @default 'auto'
+     */
+    scrollbarGutter?: 'auto' | 'stable' | 'stable-horizontal' | 'stable-vertical';
     /**
      * Maximum height of the scroll area
      * @default '100%'
@@ -1182,6 +1303,11 @@ declare type SegmentedControlRootProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Specify if the segmented control should only take the width of its content
+     * @default true
+     */
+    hugWidth?: boolean;
 };
 
 export declare const Select: typeof SelectInput & {
@@ -1231,18 +1357,23 @@ declare type SelectComponentProps = {
      * @default "bottom"
      */
     side?: 'left' | 'right' | 'bottom' | 'top';
-    /**
-     * The aria label of the select component.
-     */
-    'aria-label'?: string;
     /**
      * The data test id of the select component.
      */
     'data-test-id'?: string;
-};
+    /**
+     * Id of the select component
+     */
+    id?: string;
+    /**
+     * The value of the select is shown as plan text when set to true, items child components are used if set to true
+     * @default true
+     */
+    showStringValue?: boolean;
+} & CommonAriaProps;
 
 declare const SelectInput: {
-    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, side, "aria-label": ariaLabel, "data-test-id": dataTestId, }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
+    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, alignMenu, side, id, showStringValue, "data-test-id": dataTestId, ...props }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
     displayName: string;
 };
 
@@ -1775,7 +1906,7 @@ declare type TextWeight = 'default' | 'strong' | 'x-strong';
 
 export declare const ThemeContext: Context<"dark" | "light">;
 
-export declare const ThemeProvider: ({ children, theme }: ThemeProviderProps) => JSX_2.Element;
+export declare const ThemeProvider: ({ children, theme, asChild }: ThemeProviderProps) => JSX_2.Element;
 
 declare type ThemeProviderProps = {
     children: ReactNode;
@@ -1784,6 +1915,11 @@ declare type ThemeProviderProps = {
      * @default "light"
      * */
     theme: AvailableTheme;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
+    asChild?: boolean;
 };
 
 export declare const Tooltip: {