@frontify/fondue-components 1.2.3 → 1.3.0

package/dist/fondue-components9.js

@@ -1,121 +1,50 @@
-import { sv as e } from "./fondue-components7.js";
-const s = e({
-  variants: {
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    style: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
-    },
-    disabled: {
-      true: "tw-text-box-disabled-inverse"
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-toggle-group";
+import { forwardRef as m } from "react";
+import { useControllableState as S } from "./fondue-components21.js";
+import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components22.js";
+const d = ({ children: e, value: o, defaultValue: s, onValueChange: c, ...a }, g) => {
+  const [p, C] = S({
+    prop: o,
+    defaultProp: s,
+    onChange: c
+  });
+  return /* @__PURE__ */ l(
+    r.Root,
+    {
+      ref: g,
+      ...a,
+      className: f,
+      onValueChange: (n) => {
+        n && C(n);
+      },
+      value: p,
+      type: "single",
+      asChild: !1,
+      "aria-disabled": a.disabled,
+      children: [
+        e,
+        /* @__PURE__ */ t("div", { className: I })
+      ]
     }
-  },
-  compoundVariants: [
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-strong-icon group-hover:[&_svg]:tw-text-button-strong-icon-hover group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-positive-icon group-hover:[&_svg]:tw-text-button-positive-icon-hover group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hovergroup-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-strong-negative-icon group-hover:[&_svg]:tw-text-button-strong-negative-icon-hovergroup-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-button-danger-icon group-hover:[&_svg]:tw-text-button-danger-icon-hovergroup-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "default",
-      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "weak",
-      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "strong",
-      class: "[&_svg]:tw-text-box-selected-strong-inverse group-hover:[&_svg]:tw-text-box-selected-strong-inversegroup-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none"
-    }
-  ],
-  defaultVariants: {
-    emphasis: "strong",
-    style: "default",
-    disabled: !1
-  }
-});
+  );
+};
+d.displayName = "SegmentedControl.Root";
+const i = ({ children: e, ...o }, s) => /* @__PURE__ */ l(r.Item, { ref: s, ...o, className: y, asChild: !1, children: [
+  /* @__PURE__ */ t("span", { className: N }),
+  /* @__PURE__ */ l("span", { className: u, children: [
+    /* @__PURE__ */ t("span", { className: b, children: e }),
+    /* @__PURE__ */ t("span", { className: h, children: e })
+  ] })
+] });
+i.displayName = "SegmentedControl.Item";
+const j = {
+  Root: m(d),
+  Item: m(i)
+};
 export {
-  s as iconStyles
+  j as SegmentedControl,
+  i as SegmentedControlItem,
+  d as SegmentedControlRoot
 };
 //# sourceMappingURL=fondue-components9.js.map

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Button/styles/iconStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const iconStyles = sv({\n    variants: {\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n        disabled: {\n            true: 'tw-text-box-disabled-inverse',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-icon ' +\n                'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-icon ' +\n                'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-positive-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-strong-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-danger-icon ' +\n                'group-hover:[&_svg]:tw-text-button-danger-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-box-selected-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n                'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-box-selected-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n                'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-box-selected-strong-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-strong-inverse' +\n                'group-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        style: 'default',\n        disabled: false,\n    },\n});\n"],"names":["iconStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,EACd;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport {\n    segmentedControlActiveIndicatorStyles,\n    segmentedControlItemLabelActiveStyles,\n    segmentedControlItemLabelInactiveStyles,\n    segmentedControlItemLabelStyles,\n    segmentedControlItemSeparatorStyles,\n    segmentedControlItemStyles,\n    segmentedControlRootStyles,\n} from './styles/segmentedControlStyles';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={segmentedControlRootStyles}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={segmentedControlActiveIndicatorStyles} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={segmentedControlItemStyles} asChild={false}>\n        {/* Separator */}\n        <span className={segmentedControlItemSeparatorStyles} />\n        <span className={segmentedControlItemLabelStyles}>\n            {/* Active children */}\n            <span className={segmentedControlItemLabelActiveStyles}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={segmentedControlItemLabelInactiveStyles}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","segmentedControlRootStyles","jsx","segmentedControlActiveIndicatorStyles","SegmentedControlItem","itemProps","segmentedControlItemStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles","SegmentedControl","forwardRef"],"mappings":";;;;;AAwCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO;AAAA,MACX,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAED,gBAAAY,EAAC,OAAI,EAAA,WAAWC,EAAuC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE;AACAd,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,EAAA,GACfV,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGU,GAAW,WAAWC,GAA4B,SAAS,IAEhG,UAAA;AAAA,EAAC,gBAAAJ,EAAA,QAAA,EAAK,WAAWK,EAAqC,CAAA;AAAA,EACtD,gBAAAR,EAAC,QAAK,EAAA,WAAWS,GAEb,UAAA;AAAA,IAAC,gBAAAN,EAAA,QAAA,EAAK,WAAWO,GAAwC,UAAAnB,EAAS,CAAA;AAAA,IAGjE,gBAAAY,EAAA,QAAA,EAAK,WAAWQ,GAA0C,UAAApB,EAAS,CAAA;AAAA,EAAA,GACxE;AAAA,GACJ;AAEJc,EAAqB,cAAc;AAE5B,MAAMO,IAAmB;AAAA,EAC5B,MAAMC,EAAsDvB,CAAoB;AAAA,EAChF,MAAMuB,EAAyDR,CAAoB;AACvF;"}

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 
+import { ChangeEvent } from 'react';
+import { FormEvent } from 'react';
+import { ForwardedRef } from 'react';
 import { ForwardRefExoticComponent } 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 { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -65,19 +70,207 @@ declare type ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'lou
 
 declare type ButtonType = 'button' | 'submit' | 'reset';
 
-export declare const Divider: ({ vertical, style, height, "data-test-id": dataTestId, color, }: DividerProps) => ReactElement;
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLButtonElement>>;
 
-declare type DividerHeight = 'small' | 'medium' | 'large';
+declare type CheckboxProps = {
+    id?: string;
+    name?: string;
+    /**
+     * The default value of the checkbox
+     * Used for uncontrolled components
+     * @default false
+     */
+    defaultValue?: boolean | 'indeterminate';
+    /**
+     * The controlled value of the checkbox
+     * @default false
+     */
+    value?: boolean | 'indeterminate';
+    /**
+     * The size of the checkbox
+     * @default "default"
+     */
+    size?: 'default' | 'large';
+    /**
+     * The emphasis of the checkbox
+     * @default "default"
+     */
+    emphasis?: 'default' | 'weak';
+    /**
+     * Disable the checkbox
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Make the checkbox required in form
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Make the checkbox read-only
+     * @default false
+     */
+    readOnly?: boolean;
+    className?: string;
+    /**
+     * Event handler called when the checkbox value changes
+     */
+    onChange?: (event: FormEvent<HTMLButtonElement>) => void;
+    /**
+     * Event handler called when the checkbox is blurred
+     */
+    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;
+    /**
+     * Event handler called when the checkbox is focused
+     */
+    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;
+    'data-test-id'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+
+export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
+
+declare type DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';
+
+declare type DividerDirection = 'horizontal' | 'vertical';
+
+declare type DividerPadding = 'none' | 'small' | 'medium' | 'large';
 
 declare type DividerProps = {
+    /**
+     * The style of the divider
+     * @default "solid"
+     */
     style?: DividerStyle;
-    height?: DividerHeight;
-    color?: string;
-    vertical?: boolean;
+    /**
+     * The padding of the divider
+     * @default "medium"
+     */
+    padding?: DividerPadding;
+    /**
+     * The color of the divider
+     * @default "default"
+     */
+    color?: DividerColor;
+    /**
+     * The direction of the divider
+     * @default "horizontal"
+     */
+    direction?: DividerDirection;
+    'data-test-id'?: string;
+    className?: string;
+};
+
+declare type DividerStyle = 'noline' | 'dashed' | 'solid';
+
+export declare const Flyout: {
+    Root: {
+        ({ children, ...props }: FlyoutRootProps): JSX_2.Element;
+        displayName: string;
+    };
+    Trigger: ForwardRefExoticComponent<FlyoutTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<FlyoutContentProps & RefAttributes<HTMLDivElement>>;
+    Header: ForwardRefExoticComponent<FlyoutHeaderProps & RefAttributes<HTMLDivElement>>;
+    Footer: ForwardRefExoticComponent<FlyoutFooterProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<FlyoutBodyProps & RefAttributes<HTMLDivElement>>;
+};
+
+declare type FlyoutBodyProps = {
+    children?: ReactNode;
+    'data-test-id'?: string;
+};
+
+declare type FlyoutContentProps = {
+    /**
+     * Add rounded corners to the flyout
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.
+     * @default "bottom"
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.
+     * @default "start"
+     */
+    align?: 'start' | 'center' | 'end';
+    /**
+     * Define the padding of the flyout
+     * @default "compact"
+     */
+    padding?: 'compact' | 'comfortable' | 'spacious';
+    /**
+     * Define the maximum width of the flyout
+     * @default "360px"
+     */
+    maxWidth?: string;
+    children?: ReactNode;
+    'data-test-id'?: string;
+};
+
+declare type FlyoutFooterProps = {
+    children?: ReactNode;
+    'data-test-id'?: string;
+};
+
+declare type FlyoutHeaderProps = {
+    /**
+     * Show a close button in the header
+     * @default false
+     */
+    showCloseButton?: boolean;
+    children?: ReactNode;
+    'data-test-id'?: string;
+};
+
+declare type FlyoutRootProps = {
+    /**
+     * Disable interaction with the rest of the page
+     * @default false
+     */
+    modal?: boolean;
+    /**
+     * The controlled `open` state of the flyout
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Event handler called when the `open` state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+};
+
+declare type FlyoutTriggerProps = {
+    children?: ReactNode;
     'data-test-id'?: string;
 };
 
-declare type DividerStyle = 'noline' | 'dashed' | 'solid' | 'dotted';
+declare const ForwardedRefTextFieldRoot: ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>>;
+
+declare const ForwardedRefTextFieldSlot: ForwardRefExoticComponent<TextFieldSlotProps & RefAttributes<HTMLDivElement>>;
+
+export declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLLabelElement>>;
+
+declare type LabelProps = {
+    id?: string;
+    children: ReactNode;
+    /**
+     * The id of the input element the label is associated with
+     */
+    htmlFor: string;
+    /**
+     * Add an asterisk to the label to indicate it is required
+     * @default false
+     */
+    required?: boolean;
+    className?: string;
+    'data-test-id'?: string;
+};
 
 export declare const LoadingBar: ForwardRefExoticComponent<LoadingBarProps & RefAttributes<HTMLDivElement>>;
 
@@ -88,6 +281,7 @@ declare type LoadingBarProps = {
      */
     value: number | null;
     /**
+     * The maximum value of the loading bar
      * @default 100
      */
     max?: number;
@@ -96,17 +290,23 @@ declare type LoadingBarProps = {
      */
     'data-test-id'?: string;
     /**
+     * Add rounded corners to the loading bar
      * @default true
      */
     rounded?: boolean;
     /**
-     * @default 'default'
+     * The style of the loading bar
+     * @default "default"
      */
     style?: 'default' | 'positive' | 'negative';
     /**
-     * @default 'medium'
+     * The size of the loading bar
+     * @default "medium"
      */
     size?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * The label of the loading bar for accessibility purposes
+     */
     getValueLabel?: (value: number, max: number) => string;
 } & ({
     'aria-label': string;
@@ -114,6 +314,175 @@ declare type LoadingBarProps = {
     'aria-labelledby': string;
 });
 
+export declare const SegmentedControl: {
+    Root: ForwardRefExoticComponent<SegmentedControlRootProps & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<SegmentedControlItemProps & RefAttributes<HTMLButtonElement>>;
+};
+
+declare type SegmentedControlItemProps = {
+    children: ReactNode;
+    value: string;
+};
+
+declare type SegmentedControlRootProps = {
+    id?: string;
+    children: ReactNode;
+    /**
+     * The default value of the segmented control
+     * Used for uncontrolled components
+     */
+    defaultValue: string;
+    /**
+     * The controlled value of the segmented control
+     */
+    value?: string;
+    /**
+     * Event handler called when the value changes
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Disable the segmented control
+     * @default false
+     */
+    disabled?: boolean;
+};
+
+declare const TextFieldRoot: {
+    ({ children, className, status, "data-test-id": dataTestId, ...inputProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>): JSX_2.Element;
+    displayName: string;
+};
+
+declare type TextFieldSlotProps = {
+    children: ReactNode;
+    name?: 'left' | 'right';
+    className?: string;
+};
+
+export declare const TextInput: typeof TextFieldRoot & {
+    Root: typeof ForwardedRefTextFieldRoot;
+    Slot: typeof ForwardedRefTextFieldSlot;
+};
+
+declare type TextInputProps = {
+    id?: string;
+    name?: string;
+    /**
+     * The place where the input slots are placed
+     */
+    children?: ReactNode;
+    /**
+     * The default value of the text input
+     * Used for uncontrolled components
+     */
+    defaultValue?: string | number;
+    /**
+     * The controlled value of the text input
+     */
+    value?: string | number;
+    /**
+     * Type of the text input
+     * @default "text"
+     */
+    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
+    /**
+     * The placeholder in the text input
+     */
+    placeholder?: string;
+    /**
+     * Disable the text input
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Make the text input required in form
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Make the text input spell-checkable
+     * @default true
+     */
+    spellCheck?: boolean;
+    /**
+     * Make the text input read-only
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Set the type of input so autocomplete can help the user
+     * @default "on"
+     */
+    autoComplete?: string;
+    /**
+     * The maximum length of the text input
+     */
+    maxLength?: number;
+    /**
+     * Status of the text input
+     * @default "neutral"
+     */
+    status?: 'neutral' | 'success' | 'error' | 'loading';
+    className?: string;
+    /**
+     * Event handler called when the text input value changes
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Event handler called when the text input is blurred
+     */
+    onBlur?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Event handler called when the text input is focused
+     */
+    onFocus?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Event handler called when a key is pressed
+     */
+    onKeyDown?: (event: KeyboardEvent_2<HTMLInputElement>) => void;
+    /**
+     * Event handler called when a key is released
+     */
+    onKeyUp?: (event: KeyboardEvent_2<HTMLInputElement>) => void;
+    'data-test-id'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+
+export declare const Tooltip: {
+    Root: {
+        ({ children, enterDelay }: TooltipRootProps): JSX_2.Element;
+        displayName: string;
+    };
+    Trigger: ForwardRefExoticComponent<TooltipTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Content: ForwardRefExoticComponent<TooltipContentProps & RefAttributes<HTMLDivElement>>;
+};
+
+declare type TooltipContentProps = {
+    /**
+     * @default spacious
+     */
+    padding?: 'spacious' | 'compact';
+    /**
+     * Defines the preffered side of the tooltip. It will not be respected if there are collisions with the viewport.
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    maxWidth?: string;
+    className?: string;
+    children: ReactNode;
+    'data-test-id'?: string;
+};
+
+declare type TooltipRootProps = {
+    enterDelay?: number;
+    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;
+};
+
+declare type TooltipTriggerProps = {
+    children: ReactNode;
+    'data-test-id'?: string;
+};
+
 export { }