@frontify/fondue-components 23.0.0 → 24.0.0-rc.1

package/dist/fondue-components30.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components30.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconCross, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    useEffect,\n    useRef,\n    useState,\n    type ChangeEventHandler,\n    type CSSProperties,\n    type FocusEventHandler,\n    type KeyboardEventHandler,\n    type ReactElement,\n    type SyntheticEvent,\n} from 'react';\n\nimport styles from './styles/textarea.module.scss';\n\nexport type ExtraAction = {\n    icon: ReactElement;\n    title: string;\n    callback: () => void;\n};\n\ntype Status = 'default' | 'loading' | 'success' | 'error';\n\ntype TextareaProps = {\n    /**\n     * The id of the textarea\n     */\n    id?: string;\n    /**\n     * If `true`, Textarea will have `autoComplete` functionality\n     */\n    autocomplete?: boolean;\n    /**\n     * If `true`, component rendered is a auto sizing Textarea\n     */\n    autosize?: boolean;\n    /**\n     * Render `clear` button to clear input on click\n     */\n    clearable?: boolean;\n    /**\n     * A `ReactElement` that will be rendered at the start of the `Textarea`\n     */\n    decorator?: ReactElement;\n    /**\n     * Initial value\n     */\n    defaultValue?: string;\n    disabled?: boolean;\n    /**\n     * Collection of extra actions the input can preform\n     */\n    extraActions?: ExtraAction[];\n    /**\n     * If `true`, Textarea will be focused on mount\n     */\n    focusOnMount?: boolean;\n    /**\n     * If autosize is false, this is used as rows property for default textarea\n     * @default 1\n     */\n    minRows?: number;\n    /**\n     * If `autosize` is `false`, this property is ignored\n     */\n    maxRows?: number;\n    /**\n     * Event handler called when the textarea value changes\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when Enter is pressed\n     */\n    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;\n    /**\n     * If `true`, Textarea will be required\n     */\n    required?: boolean;\n    /**\n     * The test id of the textarea\n     */\n    'data-test-id'?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    resizable?: boolean;\n    selectable?: boolean;\n    /**\n     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.\n     * @default 'default'\n     */\n    status?: Status;\n    value?: string;\n};\n\nexport const Textarea = ({\n    'data-test-id': dataTestId = 'fondue-textarea',\n    autocomplete,\n    autosize,\n    clearable,\n    decorator,\n    defaultValue,\n    disabled,\n    extraActions,\n    focusOnMount,\n    minRows: rows = 1,\n    maxRows,\n    onEnterPressed,\n    readOnly,\n    resizable,\n    selectable = true,\n    status = 'default',\n    value: inputValue,\n    ...props\n}: TextareaProps) => {\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\n\n    const [value, setValue] = useState(inputValue ?? defaultValue ?? '');\n\n    const hasTools = extraActions?.length !== undefined || clearable || ['success', 'error'].includes(status);\n\n    const clear = () => {\n        setValue('');\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n        props.onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n        setValue(inputValue ?? defaultValue ?? '');\n    }, [defaultValue, inputValue]);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            ref.current?.focus();\n        }\n    }, [focusOnMount]);\n\n    return (\n        <div\n            className={styles.root}\n            data-autosize={autosize}\n            data-clearable={clearable}\n            data-disabled={disabled || readOnly}\n            data-has-decorator={decorator ? true : false}\n            data-has-tools={hasTools}\n            data-replicated-value={value}\n            data-resizable={resizable}\n            data-status={status}\n            data-max-rows={!!maxRows}\n            data-test-id={dataTestId}\n            style={{ '--max-rows': `${maxRows}` } as CSSProperties}\n        >\n            {decorator ? <div className={styles.decorator}>{decorator}</div> : null}\n            <textarea\n                {...props}\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    props.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    props.onBlur?.(blurEvent);\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                className={styles.textarea}\n                disabled={disabled}\n                onKeyDown={handleKeyDown}\n                onInput={(event) => setValue(event.currentTarget.value)}\n                onSelect={(event) => {\n                    if (!selectable) {\n                        event.currentTarget.selectionStart = event.currentTarget.selectionEnd;\n                    }\n                }}\n                readOnly={readOnly}\n                ref={ref}\n                rows={rows}\n                value={value}\n            ></textarea>\n            {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}\n            {hasTools && (\n                <div className={styles.tools}>\n                    {status === 'success' && (\n                        <div className={styles.success}>\n                            <IconCheckMark size={20} />\n                        </div>\n                    )}\n                    {status === 'error' && (\n                        <div className={styles[status]}>\n                            <IconExclamationMarkTriangle size={20} />\n                        </div>\n                    )}\n                    {extraActions?.map(({ icon, title, callback }) => (\n                        <button\n                            className={styles.toolsButton}\n                            disabled={disabled || readOnly}\n                            key={title}\n                            onClick={callback}\n                            title={title}\n                        >\n                            {icon}\n                        </button>\n                    ))}\n                    {clearable && (\n                        <button className={styles.toolsButton} onClick={clear} disabled={disabled || readOnly}>\n                            <IconCross size={20} fill=\"currentColor\" />\n                        </button>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["Textarea","dataTestId","autocomplete","autosize","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","ref","useRef","wasClicked","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross"],"mappings":"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"}
+{"version":3,"file":"fondue-components30.js","sources":["../src/components/Text/Text.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode, forwardRef, type ForwardedRef, type HTMLAttributeAnchorTarget } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\ntype TextWeight = 'default' | 'strong' | 'x-strong';\ntype TextSize = 'x-small' | 'small' | 'medium' | 'large';\ntype TextColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\ntype BoxColor = 'neutral' | 'selected' | 'disabled' | 'positive' | 'negative' | 'warning';\n\ntype TagType = 'a' | 'abbr' | 'address' | 'em' | 'label' | 'li' | 'span' | 'strong' | 'time' | 'p';\n\nexport type TextProps<TTag extends TagType = 'span'> = CommonAriaProps &\n    TagProps<TTag> & {\n        /**\n         * Id of the element\n         */\n        id?: string;\n        /**\n         * Size of the text\n         *\n         * @default 'medium'\n         */\n        size?: TextSize;\n        /**\n         * Weight of the font\n         *\n         * @default 'default'\n         */\n        weight?: TextWeight;\n        /**\n         * The html element used to render\n         *\n         * @default 'span'\n         */\n        as?: TTag;\n        /**\n         * Color of the text\n         *\n         * @default 'default'\n         */\n        color?: TextColor;\n        /**\n         * The texts color when used within a box\n         *\n         * @description optional color prop that uses the inverse box color when accessibility contrast is needed\n         **/\n        boxColor?: BoxColor;\n        className?: string;\n        children?: ReactNode;\n    };\n\ntype TagPropMap = {\n    a: { href?: string; target: HTMLAttributeAnchorTarget; rel?: string; title?: string };\n    abbr: { title?: string };\n    address: object;\n    em: object;\n    label: { for?: string };\n    li: { value?: string };\n    p: object;\n    span: object;\n    strong: object;\n    time: { dateTime?: string };\n};\ntype TagProps<TTag extends TagType> = TagPropMap[TTag];\n\ntype TextElementMap = {\n    a: HTMLAnchorElement;\n    abbr: HTMLElement;\n    address: HTMLElement;\n    em: HTMLElement;\n    label: HTMLLabelElement;\n    li: HTMLLIElement;\n    p: HTMLParagraphElement;\n    span: HTMLSpanElement;\n    strong: HTMLElement;\n    time: HTMLTimeElement;\n};\ntype TextElementType<TTag extends TagType> = TextElementMap[TTag];\n\nexport const Text = forwardRef(\n    (\n        {\n            children,\n            as: Tag = 'span',\n            size = 'medium',\n            weight = 'default',\n            color = 'default',\n            boxColor,\n            className,\n            ...props\n        },\n        ref,\n    ) => (\n        <Tag\n            data-test-id=\"text\"\n            className={cn([\n                styles.root,\n                styles[`size-${size}`],\n                styles[`weight-${weight}`],\n                styles[boxColor ? `color-box-${boxColor}` : `color-${color}`],\n                className,\n            ])}\n            // @ts-expect-error ref can not be inferred properly by TS\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </Tag>\n    ),\n) as (<TTag extends TagType = 'span'>(\n    props: TextProps<TTag> & { ref?: ForwardedRef<TextElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nText.displayName = 'FondueText';\n"],"names":["Text","forwardRef","children","Tag","size","weight","color","boxColor","className","props","ref","jsx","cn","styles"],"mappings":";;;;AAoFO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,IAAIC,IAAM;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MAEA,gBAAAC;AAAA,IAACR;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWS,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQT,CAAI,EAAE;AAAA,QACrBS,EAAO,UAAUR,CAAM,EAAE;AAAA,QACzBQ,EAAON,IAAW,aAAaA,CAAQ,KAAK,SAASD,CAAK,EAAE;AAAA,QAC5DE;AAAA,MAAA,CACH;AAAA,MAED,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGb;AAIAF,EAAK,cAAc;"}

package/dist/fondue-components31.js

@@ -1,34 +1,68 @@
-import { jsx as m } from "react/jsx-runtime";
-import a from "./fondue-components84.js";
-import { Slot as p } from "@radix-ui/react-slot";
-import { createContext as u, useContext as x, useMemo as f } from "react";
-import { enUS as n } from "./fondue-components85.js";
-const o = u({
-  theme: "light",
-  dir: "ltr",
-  translations: n
-});
-o.displayName = "ThemeContext";
-const g = () => x(o), y = ({
-  children: s,
-  theme: e = "light",
-  dir: t = "ltr",
-  translations: r = n,
-  asChild: l = !1
-}) => {
-  const i = l ? p : "div", c = f(
-    () => ({
-      theme: e,
-      dir: t,
-      translations: r
-    }),
-    [t, e, r]
-  );
-  return /* @__PURE__ */ m(o.Provider, { value: c, children: /* @__PURE__ */ m(i, { dir: t, className: a[e], children: s }) });
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { IconCheckMark as h, IconExclamationMarkTriangle as S } from "@frontify/fondue-icons";
+import { forwardRef as f, useRef as T } from "react";
+import { cn as u } from "./fondue-components41.js";
+import { LoadingCircle as v } from "./fondue-components19.js";
+import a from "./fondue-components85.js";
+const x = ({
+  children: i,
+  className: c,
+  status: e = "neutral",
+  "data-test-id": s = "fondue-text-input",
+  "aria-errormessage": N,
+  placeholder: d,
+  ...r
+}, w) => {
+  const n = T(!1);
+  return /* @__PURE__ */ m("div", { className: u(a.root, c), "data-status": e, "data-test-id": s, children: [
+    e === "loading" ? /* @__PURE__ */ t("div", { className: a.loadingStatus, "data-test-id": `${s}-loader`, children: /* @__PURE__ */ t(v, { size: "xx-small" }) }) : null,
+    /* @__PURE__ */ m("div", { className: a.inputWrapper, children: [
+      d && /* @__PURE__ */ t("div", { className: a.placeholder, children: d }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          onMouseDown: (o) => {
+            n.current = !0, o.currentTarget.dataset.showFocusRing = "false";
+          },
+          type: "text",
+          placeholder: d,
+          ...r,
+          onFocus: (o) => {
+            var l;
+            n.current || (o.target.dataset.showFocusRing = "true"), (l = r.onFocus) == null || l.call(r, o);
+          },
+          onBlur: (o) => {
+            var l;
+            o.target.dataset.showFocusRing = "false", n.current = !1, (l = r.onBlur) == null || l.call(r, o);
+          },
+          ref: w,
+          className: a.input,
+          "aria-invalid": e === "error",
+          "aria-errormessage": e === "error" ? N : void 0
+        }
+      )
+    ] }),
+    e === "success" ? /* @__PURE__ */ t(h, { size: 16, className: a.iconSuccess, "data-test-id": `${s}-success-icon` }) : null,
+    e === "error" ? /* @__PURE__ */ t(
+      S,
+      {
+        size: 16,
+        className: a.iconError,
+        "data-test-id": `${s}-error-icon`
+      }
+    ) : null,
+    i
+  ] });
 };
+x.displayName = "TextField.Root";
+const F = ({ name: i, className: c, ...e }, s) => /* @__PURE__ */ t("div", { "data-slot": !0, "data-name": i, ...e, ref: s, className: u(a.slot, c) });
+F.displayName = "TextField.Slot";
+const g = f(x), k = f(F), R = g;
+R.Root = g;
+R.Slot = k;
 export {
-  o as ThemeContext,
-  y as ThemeProvider,
-  g as useFondueTheme
+  x as TextFieldRoot,
+  F as TextFieldSlot,
+  R as TextInput
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/theme-tokens';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nimport { enUS, type Translations } from '../../locales';\n\ntype AvailableTheme = keyof typeof styles;\n\ntype ThemeProviderProps = {\n    children: ReactNode;\n    /**\n     * The theme to apply\n     * @default \"light\"\n     * */\n    theme?: AvailableTheme;\n    /**\n     * Direction to apply to the theme\n     * @default \"ltr\"\n     */\n    dir?: 'ltr' | 'rtl';\n    /**\n     * Translations object to use for component strings.\n     * Import from '@frontify/fondue/components/locales' or provide your own.\n     * Must be a complete Translations object.\n     * @default \"enUS\"\n     * @example\n     * ```tsx\n     * import { deDE } from '@frontify/fondue/components/locales';\n     * <ThemeProvider translations={deDE}>...</ThemeProvider>\n     * ```\n     */\n    translations?: Translations;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n};\n\ntype ThemeContextValue = {\n    theme: AvailableTheme;\n    dir: 'ltr' | 'rtl';\n    translations: Translations;\n};\n\nexport const ThemeContext = createContext<ThemeContextValue>({\n    theme: 'light',\n    dir: 'ltr',\n    translations: enUS,\n});\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({\n    children,\n    theme = 'light',\n    dir = 'ltr',\n    translations = enUS,\n    asChild = false,\n}: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            dir,\n            translations,\n        }),\n        [dir, theme, translations],\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <Comp dir={dir} className={styles[theme]}>\n                {children}\n            </Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","enUS","useFondueTheme","useContext","ThemeProvider","children","theme","dir","translations","asChild","Comp","Slot","contextValue","useMemo","jsx","styles"],"mappings":";;;;;AA+CO,MAAMA,IAAeC,EAAiC;AAAA,EACzD,OAAO;AAAA,EACP,KAAK;AAAA,EACL,cAAcC;AAClB,CAAC;AACDF,EAAa,cAAc;AAEpB,MAAMG,IAAiB,MACnBC,EAAWJ,CAAY,GAGrBK,IAAgB,CAAC;AAAA,EAC1B,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAAC,IAAM;AAAA,EACN,cAAAC,IAAeP;AAAA,EACf,SAAAQ,IAAU;AACd,MAA0B;AACtB,QAAMC,IAAOD,IAAUE,IAAO,OAExBC,IAAeC;AAAA,IACjB,OAAO;AAAA,MACH,OAAAP;AAAA,MACA,KAAAC;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,IAEJ,CAACD,GAAKD,GAAOE,CAAY;AAAA,EAAA;AAG7B,SACI,gBAAAM,EAACf,EAAa,UAAb,EAAsB,OAAOa,GAC1B,UAAA,gBAAAE,EAACJ,GAAA,EAAK,KAAAH,GAAU,WAAWQ,EAAOT,CAAK,GAClC,UAAAD,GACL,GACJ;AAER;"}
+{"version":3,"file":"fondue-components31.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type FocusEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        'aria-errormessage': ariaErrormessage,\n        placeholder,\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`}>\n                    <LoadingCircle size=\"xx-small\" />\n                </div>\n            ) : null}\n            <div className={styles.inputWrapper}>\n                {placeholder && <div className={styles.placeholder}>{placeholder}</div>}\n                <input\n                    onMouseDown={(mouseEvent) => {\n                        wasClicked.current = true;\n                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    {...inputProps}\n                    onFocus={(focusEvent) => {\n                        if (!wasClicked.current) {\n                            focusEvent.target.dataset.showFocusRing = 'true';\n                        }\n                        inputProps.onFocus?.(focusEvent);\n                    }}\n                    onBlur={(blurEvent) => {\n                        blurEvent.target.dataset.showFocusRing = 'false';\n                        wasClicked.current = false;\n                        inputProps.onBlur?.(blurEvent);\n                    }}\n                    ref={ref}\n                    className={styles.input}\n                    aria-invalid={status === 'error'}\n                    aria-errormessage={status === 'error' ? ariaErrormessage : undefined}\n                />\n            </div>\n\n            {status === 'success' ? (\n                <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className={styles.iconError}\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return <div data-slot data-name={name} {...slotProps} ref={forwardedRef} className={cn(styles.slot, className)} />;\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","ariaErrormessage","placeholder","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","LoadingCircle","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;;AA+GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,qBAAqBC;AAAA,EACrB,aAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAaC,EAAO,EAAK;AAE/B,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,MAAMX,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAAD,MAAW,YACR,gBAAAW,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGT,CAAU,WAC7D,UAAA,gBAAAU,EAACC,GAAA,EAAc,MAAK,WAAA,CAAW,GACnC,IACA;AAAA,IACJ,gBAAAJ,EAAC,OAAA,EAAI,WAAWE,EAAO,cAClB,UAAA;AAAA,MAAAP,KAAe,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,aAAc,UAAAP,GAAY;AAAA,MACjE,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,aAAa,CAACE,MAAe;AACzB,YAAAP,EAAW,UAAU,IACrBO,EAAW,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,MAAK;AAAA,UACL,aAAAV;AAAA,UACC,GAAGC;AAAA,UACJ,SAAS,CAACU,MAAe;;AACrB,YAAKR,EAAW,YACZQ,EAAW,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAX,EAAW,YAAX,QAAAW,EAAA,KAAAX,GAAqBU;AAAA,UACzB;AAAA,UACA,QAAQ,CAACE,MAAc;;AACnB,YAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCV,EAAW,UAAU,KACrBS,IAAAX,EAAW,WAAX,QAAAW,EAAA,KAAAX,GAAoBY;AAAA,UACxB;AAAA,UACA,KAAAX;AAAA,UACA,WAAWK,EAAO;AAAA,UAClB,gBAAcV,MAAW;AAAA,UACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/D,GACJ;AAAA,IAECF,MAAW,YACR,gBAAAW,EAACM,GAAA,EAAc,MAAM,IAAI,WAAWP,EAAO,aAAa,gBAAc,GAAGT,CAAU,iBAAiB,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAW;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWR,EAAO;AAAA,QAClB,gBAAc,GAAGT,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQrB,MAAMsB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAArB,GAAW,GAAGsB,EAAA,GACtBC,MAEO,gBAAAX,EAAC,OAAA,EAAI,aAAS,IAAC,aAAWS,GAAO,GAAGC,GAAW,KAAKC,GAAc,WAAWb,EAAGC,EAAO,MAAMX,CAAS,GAAG;AAGpHoB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6C3B,CAAa,GACtF4B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}

package/dist/fondue-components32.js

@@ -1,60 +1,106 @@
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-tooltip";
-import { forwardRef as l } from "react";
-import { cn as R } from "./fondue-components39.js";
-import { useFondueTheme as N, ThemeProvider as x } from "./fondue-components31.js";
-import s from "./fondue-components86.js";
-const p = ({ children: t, enterDelay: e = 700, open: i, onOpenChange: n }) => /* @__PURE__ */ o(r.Provider, { children: /* @__PURE__ */ o(r.Root, { delayDuration: e, open: i, onOpenChange: n, children: t }) });
-p.displayName = "Tooltip.Root";
-const m = ({ asChild: t = !1, children: e, "data-test-id": i = "fondue-tooltip-trigger" }, n) => /* @__PURE__ */ o(
-  r.Trigger,
-  {
-    "data-tooltip-trigger": !0,
-    "data-test-id": i,
-    type: t ? void 0 : "button",
-    asChild: t,
-    ref: n,
-    children: e
-  }
-);
-m.displayName = "Tooltip.Trigger";
-const f = ({
-  children: t,
-  className: e,
-  maxWidth: i,
-  "data-test-id": n = "fondue-tooltip-content",
-  padding: c = "spacious",
-  side: g
-}, u) => {
-  const { theme: T, dir: d } = N(), h = (a) => !a || d === "ltr" ? a : a === "left" ? "right" : a === "right" ? "left" : a;
-  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(x, { theme: T, dir: d, children: /* @__PURE__ */ y(
-    r.Content,
+import { jsxs as z, jsx as o } from "react/jsx-runtime";
+import { IconCheckMark as $, IconExclamationMarkTriangle as b, IconCross as q } from "@frontify/fondue-icons";
+import { useRef as F, useState as x, useEffect as B } from "react";
+import l from "./fondue-components86.js";
+const Q = ({
+  "data-test-id": w = "fondue-textarea",
+  autocomplete: D,
+  autosize: R,
+  clearable: i,
+  decorator: d,
+  defaultValue: u,
+  disabled: n,
+  extraActions: c,
+  focusOnMount: N,
+  minRows: S = 1,
+  maxRows: k,
+  onEnterPressed: m,
+  readOnly: r,
+  resizable: y,
+  selectable: I = !0,
+  status: s = "default",
+  value: f,
+  ...t
+}) => {
+  const C = F(null), h = F(!1), [v, g] = x(f ?? u ?? ""), T = (c == null ? void 0 : c.length) !== void 0 || i || ["success", "error"].includes(s), K = () => {
+    g("");
+  }, j = (a) => {
+    var e;
+    a.key === "Enter" && (m == null || m(a)), (e = t.onKeyDown) == null || e.call(t, a);
+  };
+  return B(() => {
+    g(f ?? u ?? "");
+  }, [u, f]), B(() => {
+    var a;
+    N && ((a = C.current) == null || a.focus());
+  }, [N]), /* @__PURE__ */ z(
+    "div",
     {
-      "data-test-id": n,
-      "data-tooltip-spacing": c,
-      className: R(s.root, e),
-      style: { maxWidth: i },
-      collisionPadding: 16,
-      sideOffset: 8,
-      ref: u,
-      side: h(g),
+      className: l.root,
+      "data-autosize": R,
+      "data-clearable": i,
+      "data-disabled": n || r,
+      "data-has-decorator": !!d,
+      "data-has-tools": T,
+      "data-replicated-value": v,
+      "data-resizable": y,
+      "data-status": s,
+      "data-max-rows": !!k,
+      "data-test-id": w,
+      style: { "--max-rows": `${k}` },
       children: [
-        t,
-        /* @__PURE__ */ o(r.Arrow, { "aria-hidden": "true", className: s.arrow })
+        d ? /* @__PURE__ */ o("div", { className: l.decorator, children: d }) : null,
+        /* @__PURE__ */ o(
+          "textarea",
+          {
+            ...t,
+            onMouseDown: (a) => {
+              h.current = !0, a.currentTarget.dataset.showFocusRing = "false";
+            },
+            onFocus: (a) => {
+              var e;
+              h.current || (a.target.dataset.showFocusRing = "true"), (e = t.onFocus) == null || e.call(t, a);
+            },
+            onBlur: (a) => {
+              var e;
+              a.target.dataset.showFocusRing = "false", h.current = !1, (e = t.onBlur) == null || e.call(t, a);
+            },
+            autoComplete: D ? "on" : "off",
+            className: l.textarea,
+            disabled: n,
+            onKeyDown: j,
+            onInput: (a) => g(a.currentTarget.value),
+            onSelect: (a) => {
+              I || (a.currentTarget.selectionStart = a.currentTarget.selectionEnd);
+            },
+            readOnly: r,
+            ref: C,
+            rows: S,
+            value: v
+          }
+        ),
+        s === "loading" && /* @__PURE__ */ o("div", { className: l.loadingStatus, "data-test-id": `${w}-loader` }),
+        T && /* @__PURE__ */ z("div", { className: l.tools, children: [
+          s === "success" && /* @__PURE__ */ o("div", { className: l.success, children: /* @__PURE__ */ o($, { size: 20 }) }),
+          s === "error" && /* @__PURE__ */ o("div", { className: l[s], children: /* @__PURE__ */ o(b, { size: 20 }) }),
+          c == null ? void 0 : c.map(({ icon: a, title: e, callback: M }) => /* @__PURE__ */ o(
+            "button",
+            {
+              className: l.toolsButton,
+              disabled: n || r,
+              onClick: M,
+              title: e,
+              children: a
+            },
+            e
+          )),
+          i && /* @__PURE__ */ o("button", { className: l.toolsButton, onClick: K, disabled: n || r, children: /* @__PURE__ */ o(q, { size: 20, fill: "currentColor" }) })
+        ] })
       ]
     }
-  ) }) });
-};
-f.displayName = "Tooltip.Content";
-const A = {
-  Root: p,
-  Trigger: l(m),
-  Content: l(f)
+  );
 };
 export {
-  A as Tooltip,
-  f as TooltipContent,
-  p as TooltipRoot,
-  m as TooltipTrigger
+  Q as Textarea
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger\n            data-tooltip-trigger\n            data-test-id={dataTestId}\n            type={!asChild ? 'button' : undefined}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        side,\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixTooltip.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixTooltip.Content\n                    data-test-id={dataTestId}\n                    data-tooltip-spacing={padding}\n                    className={cn(styles.root, className)}\n                    style={{ maxWidth }}\n                    collisionPadding={16}\n                    sideOffset={8}\n                    ref={ref}\n                    side={getAdjustedSide(side)}\n                >\n                    {children}\n                    <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n                </RadixTooltip.Content>\n            </ThemeProvider>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","side","theme","dir","useFondueTheme","getAdjustedSide","ThemeProvider","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;;AA4BO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAExD,gBAAAC,EAACC,EAAa,UAAb,EACG,UAAA,gBAAAD,EAACC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,GACJ;AAGRD,EAAY,cAAc;AAYnB,MAAMO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAA,GAC1DC,MAGI,gBAAAL;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,wBAAoB;AAAA,IACpB,gBAAcG;AAAA,IACd,MAAOD,IAAqB,SAAX;AAAA,IACjB,SAAAA;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAT;AAAA,EAAA;AAAA;AAIbM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,MAAAC;AACJ,GACAL,MACC;AACD,QAAM,EAAE,OAAAM,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACJ,MACjB,CAACA,KAAQE,MAAQ,QACVF,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKT,EAAa,QAAb,EACG,UAAA,gBAAAD,EAACe,GAAA,EAAc,OAAAJ,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACf,EAAa;AAAA,IAAb;AAAA,MACG,gBAAcG;AAAA,MACd,wBAAsBK;AAAA,MACtB,WAAWQ,EAAGC,EAAO,MAAMX,CAAS;AAAA,MACpC,OAAO,EAAE,UAAAC,EAAA;AAAA,MACT,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,KAAAH;AAAA,MACA,MAAMS,EAAgBJ,CAAI;AAAA,MAEzB,UAAA;AAAA,QAAAd;AAAA,QACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWiB,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAZ,EAAe,cAAc;AAEtB,MAAMa,IAAU;AAAA,EACnB,MAAMxB;AAAA,EACN,SAASyB,EAAmDlB,CAAc;AAAA,EAC1E,SAASkB,EAAgDd,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components32.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconCross, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    useEffect,\n    useRef,\n    useState,\n    type ChangeEventHandler,\n    type CSSProperties,\n    type FocusEventHandler,\n    type KeyboardEventHandler,\n    type ReactElement,\n    type SyntheticEvent,\n} from 'react';\n\nimport styles from './styles/textarea.module.scss';\n\nexport type ExtraAction = {\n    icon: ReactElement;\n    title: string;\n    callback: () => void;\n};\n\ntype Status = 'default' | 'loading' | 'success' | 'error';\n\ntype TextareaProps = {\n    /**\n     * The id of the textarea\n     */\n    id?: string;\n    /**\n     * If `true`, Textarea will have `autoComplete` functionality\n     */\n    autocomplete?: boolean;\n    /**\n     * If `true`, component rendered is a auto sizing Textarea\n     */\n    autosize?: boolean;\n    /**\n     * Render `clear` button to clear input on click\n     */\n    clearable?: boolean;\n    /**\n     * A `ReactElement` that will be rendered at the start of the `Textarea`\n     */\n    decorator?: ReactElement;\n    /**\n     * Initial value\n     */\n    defaultValue?: string;\n    disabled?: boolean;\n    /**\n     * Collection of extra actions the input can preform\n     */\n    extraActions?: ExtraAction[];\n    /**\n     * If `true`, Textarea will be focused on mount\n     */\n    focusOnMount?: boolean;\n    /**\n     * If autosize is false, this is used as rows property for default textarea\n     * @default 1\n     */\n    minRows?: number;\n    /**\n     * If `autosize` is `false`, this property is ignored\n     */\n    maxRows?: number;\n    /**\n     * Event handler called when the textarea value changes\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when Enter is pressed\n     */\n    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;\n    /**\n     * If `true`, Textarea will be required\n     */\n    required?: boolean;\n    /**\n     * The test id of the textarea\n     */\n    'data-test-id'?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    resizable?: boolean;\n    selectable?: boolean;\n    /**\n     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.\n     * @default 'default'\n     */\n    status?: Status;\n    value?: string;\n};\n\nexport const Textarea = ({\n    'data-test-id': dataTestId = 'fondue-textarea',\n    autocomplete,\n    autosize,\n    clearable,\n    decorator,\n    defaultValue,\n    disabled,\n    extraActions,\n    focusOnMount,\n    minRows: rows = 1,\n    maxRows,\n    onEnterPressed,\n    readOnly,\n    resizable,\n    selectable = true,\n    status = 'default',\n    value: inputValue,\n    ...props\n}: TextareaProps) => {\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\n\n    const [value, setValue] = useState(inputValue ?? defaultValue ?? '');\n\n    const hasTools = extraActions?.length !== undefined || clearable || ['success', 'error'].includes(status);\n\n    const clear = () => {\n        setValue('');\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n        props.onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n        setValue(inputValue ?? defaultValue ?? '');\n    }, [defaultValue, inputValue]);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            ref.current?.focus();\n        }\n    }, [focusOnMount]);\n\n    return (\n        <div\n            className={styles.root}\n            data-autosize={autosize}\n            data-clearable={clearable}\n            data-disabled={disabled || readOnly}\n            data-has-decorator={decorator ? true : false}\n            data-has-tools={hasTools}\n            data-replicated-value={value}\n            data-resizable={resizable}\n            data-status={status}\n            data-max-rows={!!maxRows}\n            data-test-id={dataTestId}\n            style={{ '--max-rows': `${maxRows}` } as CSSProperties}\n        >\n            {decorator ? <div className={styles.decorator}>{decorator}</div> : null}\n            <textarea\n                {...props}\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    props.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    props.onBlur?.(blurEvent);\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                className={styles.textarea}\n                disabled={disabled}\n                onKeyDown={handleKeyDown}\n                onInput={(event) => setValue(event.currentTarget.value)}\n                onSelect={(event) => {\n                    if (!selectable) {\n                        event.currentTarget.selectionStart = event.currentTarget.selectionEnd;\n                    }\n                }}\n                readOnly={readOnly}\n                ref={ref}\n                rows={rows}\n                value={value}\n            ></textarea>\n            {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}\n            {hasTools && (\n                <div className={styles.tools}>\n                    {status === 'success' && (\n                        <div className={styles.success}>\n                            <IconCheckMark size={20} />\n                        </div>\n                    )}\n                    {status === 'error' && (\n                        <div className={styles[status]}>\n                            <IconExclamationMarkTriangle size={20} />\n                        </div>\n                    )}\n                    {extraActions?.map(({ icon, title, callback }) => (\n                        <button\n                            className={styles.toolsButton}\n                            disabled={disabled || readOnly}\n                            key={title}\n                            onClick={callback}\n                            title={title}\n                        >\n                            {icon}\n                        </button>\n                    ))}\n                    {clearable && (\n                        <button className={styles.toolsButton} onClick={clear} disabled={disabled || readOnly}>\n                            <IconCross size={20} fill=\"currentColor\" />\n                        </button>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["Textarea","dataTestId","autocomplete","autosize","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","ref","useRef","wasClicked","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross"],"mappings":"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"}

package/dist/fondue-components33.js

@@ -1,24 +1,34 @@
-const o = "_root_12wzh_2", c = "_accordionItem_12wzh_23", n = "_accordionTrigger_12wzh_29", r = "_accordionHeader_12wzh_34", t = "_accordionSlot_12wzh_42", e = "_accordionCaret_12wzh_69", a = "_accordionTriggerContent_12wzh_77", i = "_accordionContent_12wzh_82", d = "_accordionContentText_12wzh_111", _ = {
-  root: o,
-  accordionItem: c,
-  accordionTrigger: n,
-  accordionHeader: r,
-  accordionSlot: t,
-  accordionCaret: e,
-  accordionTriggerContent: a,
-  accordionContent: i,
-  accordionContentText: d
+import { jsx as m } from "react/jsx-runtime";
+import p from "./fondue-components87.js";
+import { Slot as u } from "@radix-ui/react-slot";
+import { createContext as a, useContext as d, useMemo as f } from "react";
+import { enUS as n } from "./fondue-components88.js";
+const o = a({
+  theme: "light",
+  dir: "ltr",
+  translations: n
+});
+o.displayName = "ThemeContext";
+const g = () => d(o), y = ({
+  children: s,
+  theme: e = "light",
+  dir: t = "ltr",
+  translations: r = n,
+  asChild: i = !1
+}) => {
+  const l = i ? u : "div", c = f(
+    () => ({
+      theme: e,
+      dir: t,
+      translations: r
+    }),
+    [t, e, r]
+  );
+  return /* @__PURE__ */ m(o.Provider, { value: c, children: /* @__PURE__ */ m(l, { dir: t, className: `${p[e]} fondue-theme-provider`, children: s }) });
 };
 export {
-  e as accordionCaret,
-  i as accordionContent,
-  d as accordionContentText,
-  r as accordionHeader,
-  c as accordionItem,
-  t as accordionSlot,
-  n as accordionTrigger,
-  a as accordionTriggerContent,
-  _ as default,
-  o as root
+  o as ThemeContext,
+  y as ThemeProvider,
+  g as useFondueTheme
 };
 //# sourceMappingURL=fondue-components33.js.map

package/dist/fondue-components33.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components33.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components33.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/themes';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nimport { enUS, type Translations } from '../../locales';\n\ntype AvailableTheme = keyof typeof styles;\n\ntype ThemeProviderProps = {\n    children: ReactNode;\n    /**\n     * The theme to apply\n     * @default \"light\"\n     * */\n    theme?: AvailableTheme;\n    /**\n     * Direction to apply to the theme\n     * @default \"ltr\"\n     */\n    dir?: 'ltr' | 'rtl';\n    /**\n     * Translations object to use for component strings.\n     * Import from '@frontify/fondue/components/locales' or provide your own.\n     * Must be a complete Translations object.\n     * @default \"enUS\"\n     * @example\n     * ```tsx\n     * import { deDE } from '@frontify/fondue/components/locales';\n     * <ThemeProvider translations={deDE}>...</ThemeProvider>\n     * ```\n     */\n    translations?: Translations;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n};\n\ntype ThemeContextValue = {\n    theme: AvailableTheme;\n    dir: 'ltr' | 'rtl';\n    translations: Translations;\n};\n\nexport const ThemeContext = createContext<ThemeContextValue>({\n    theme: 'light',\n    dir: 'ltr',\n    translations: enUS,\n});\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({\n    children,\n    theme = 'light',\n    dir = 'ltr',\n    translations = enUS,\n    asChild = false,\n}: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            dir,\n            translations,\n        }),\n        [dir, theme, translations],\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <Comp dir={dir} className={`${styles[theme]} fondue-theme-provider`}>\n                {children}\n            </Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","enUS","useFondueTheme","useContext","ThemeProvider","children","theme","dir","translations","asChild","Comp","Slot","contextValue","useMemo","jsx","styles"],"mappings":";;;;;AA+CO,MAAMA,IAAeC,EAAiC;AAAA,EACzD,OAAO;AAAA,EACP,KAAK;AAAA,EACL,cAAcC;AAClB,CAAC;AACDF,EAAa,cAAc;AAEpB,MAAMG,IAAiB,MACnBC,EAAWJ,CAAY,GAGrBK,IAAgB,CAAC;AAAA,EAC1B,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAAC,IAAM;AAAA,EACN,cAAAC,IAAeP;AAAA,EACf,SAAAQ,IAAU;AACd,MAA0B;AACtB,QAAMC,IAAOD,IAAUE,IAAO,OAExBC,IAAeC;AAAA,IACjB,OAAO;AAAA,MACH,OAAAP;AAAA,MACA,KAAAC;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,IAEJ,CAACD,GAAKD,GAAOE,CAAY;AAAA,EAAA;AAG7B,2BACKT,EAAa,UAAb,EAAsB,OAAOa,GAC1B,UAAA,gBAAAE,EAACJ,GAAA,EAAK,KAAAH,GAAU,WAAW,GAAGQ,EAAOT,CAAK,CAAC,0BACtC,UAAAD,GACL,GACJ;AAER;"}

package/dist/fondue-components34.js

@@ -1,27 +1,60 @@
-import { useContext as i, useCallback as u } from "react";
-import { ThemeContext as c } from "./fondue-components31.js";
-const d = () => {
-  const { translations: r } = i(c);
-  return {
-    /** Translation function */
-    t: u(
-      (o, e) => {
-        const n = r[o];
-        if (n === void 0)
-          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation key "${o}" not found`), o;
-        if (typeof n != "string")
-          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation value for key "${o}" is not a string`), o;
-        let t = n;
-        if (e)
-          for (const [s, a] of Object.entries(e))
-            t = t.replaceAll(`\${${s}}`, a);
-        return t;
-      },
-      [r]
-    )
-  };
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-tooltip";
+import { forwardRef as l } from "react";
+import { cn as R } from "./fondue-components41.js";
+import { useFondueTheme as N, ThemeProvider as x } from "./fondue-components33.js";
+import s from "./fondue-components89.js";
+const p = ({ children: t, enterDelay: e = 700, open: i, onOpenChange: n }) => /* @__PURE__ */ o(r.Provider, { children: /* @__PURE__ */ o(r.Root, { delayDuration: e, open: i, onOpenChange: n, children: t }) });
+p.displayName = "Tooltip.Root";
+const m = ({ asChild: t = !1, children: e, "data-test-id": i = "fondue-tooltip-trigger" }, n) => /* @__PURE__ */ o(
+  r.Trigger,
+  {
+    "data-tooltip-trigger": !0,
+    "data-test-id": i,
+    type: t ? void 0 : "button",
+    asChild: t,
+    ref: n,
+    children: e
+  }
+);
+m.displayName = "Tooltip.Trigger";
+const f = ({
+  children: t,
+  className: e,
+  maxWidth: i,
+  "data-test-id": n = "fondue-tooltip-content",
+  padding: c = "spacious",
+  side: g
+}, u) => {
+  const { theme: T, dir: d } = N(), h = (a) => !a || d === "ltr" ? a : a === "left" ? "right" : a === "right" ? "left" : a;
+  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(x, { theme: T, dir: d, children: /* @__PURE__ */ y(
+    r.Content,
+    {
+      "data-test-id": n,
+      "data-tooltip-spacing": c,
+      className: R(s.root, e),
+      style: { maxWidth: i },
+      collisionPadding: 16,
+      sideOffset: 8,
+      ref: u,
+      side: h(g),
+      children: [
+        t,
+        /* @__PURE__ */ o(r.Arrow, { "aria-hidden": "true", className: s.arrow })
+      ]
+    }
+  ) }) });
+};
+f.displayName = "Tooltip.Content";
+const A = {
+  Root: p,
+  Trigger: l(m),
+  Content: l(f)
 };
 export {
-  d as useTranslation
+  A as Tooltip,
+  f as TooltipContent,
+  p as TooltipRoot,
+  m as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.js","sources":["../src/hooks/useTranslation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useContext } from 'react';\n\nimport { ThemeContext } from '../components/ThemeProvider/ThemeProvider';\n\n/**\n * Hook to access translation functionality.\n *\n * @returns Object containing translation function\n *\n * @example\n * ```tsx\n * const { t } = useTranslation();\n *\n * // Simple translation\n * const label = t('ColorPicker_selectColor');\n *\n * // Translation with variables\n * const sortLabel = t('Table_sortByAscending', { column: 'Name' });\n * ```\n */\nexport const useTranslation = () => {\n    const { translations } = useContext(ThemeContext);\n\n    /**\n     * Translates a key to its localized string value.\n     * Keys follow the format ComponentName_localLabelName[_moreLocalLabelName]\n     * and support variable interpolation using ${variable} syntax.\n     *\n     * @param key - The translation key (e.g., 'ColorPicker_selectColor')\n     * @param variables - Optional variables to interpolate into the translation\n     * @returns The translated string, or the key itself if translation is not found\n     */\n    const t = useCallback(\n        (key: keyof typeof translations, variables?: Record<string, string>): string => {\n            // Direct lookup for flat keys\n            const value = translations[key];\n\n            if (value === undefined) {\n                if (process.env.NODE_ENV !== 'production') {\n                    console.warn(`[Fondue] Translation key \"${key}\" not found`);\n                }\n                return key;\n            }\n\n            if (typeof value !== 'string') {\n                if (process.env.NODE_ENV !== 'production') {\n                    console.warn(`[Fondue] Translation value for key \"${key}\" is not a string`);\n                }\n                return key;\n            }\n\n            let text = value;\n\n            // Variable interpolation: replace ${variable} with actual values\n            if (variables) {\n                for (const [varKey, varValue] of Object.entries(variables)) {\n                    text = text.replaceAll(`\\${${varKey}}`, varValue);\n                }\n            }\n\n            return text;\n        },\n        [translations],\n    );\n\n    return {\n        /** Translation function */\n        t,\n    };\n};\n"],"names":["useTranslation","translations","useContext","ThemeContext","useCallback","key","variables","value","text","varKey","varValue"],"mappings":";;AAsBO,MAAMA,IAAiB,MAAM;AAChC,QAAM,EAAE,cAAAC,EAAA,IAAiBC,EAAWC,CAAY;AA4ChD,SAAO;AAAA;AAAA,IAEH,GAnCMC;AAAA,MACN,CAACC,GAAgCC,MAA+C;AAE5E,cAAMC,IAAQN,EAAaI,CAAG;AAE9B,YAAIE,MAAU;AACV,iBAAI,QAAQ,IAAI,aAAa,gBACzB,QAAQ,KAAK,6BAA6BF,CAAG,aAAa,GAEvDA;AAGX,YAAI,OAAOE,KAAU;AACjB,iBAAI,QAAQ,IAAI,aAAa,gBACzB,QAAQ,KAAK,uCAAuCF,CAAG,mBAAmB,GAEvEA;AAGX,YAAIG,IAAOD;AAGX,YAAID;AACA,qBAAW,CAACG,GAAQC,CAAQ,KAAK,OAAO,QAAQJ,CAAS;AACrD,YAAAE,IAAOA,EAAK,WAAW,MAAMC,CAAM,KAAKC,CAAQ;AAIxD,eAAOF;AAAA,MACX;AAAA,MACA,CAACP,CAAY;AAAA,IAAA;AAAA,EAKb;AAER;"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger\n            data-tooltip-trigger\n            data-test-id={dataTestId}\n            type={!asChild ? 'button' : undefined}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        side,\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixTooltip.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixTooltip.Content\n                    data-test-id={dataTestId}\n                    data-tooltip-spacing={padding}\n                    className={cn(styles.root, className)}\n                    style={{ maxWidth }}\n                    collisionPadding={16}\n                    sideOffset={8}\n                    ref={ref}\n                    side={getAdjustedSide(side)}\n                >\n                    {children}\n                    <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n                </RadixTooltip.Content>\n            </ThemeProvider>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","side","theme","dir","useFondueTheme","getAdjustedSide","ThemeProvider","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;;AA4BO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAExD,gBAAAC,EAACC,EAAa,UAAb,EACG,UAAA,gBAAAD,EAACC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,GACJ;AAGRD,EAAY,cAAc;AAYnB,MAAMO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAA,GAC1DC,MAGI,gBAAAL;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,wBAAoB;AAAA,IACpB,gBAAcG;AAAA,IACd,MAAOD,IAAqB,SAAX;AAAA,IACjB,SAAAA;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAT;AAAA,EAAA;AAAA;AAIbM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,MAAAC;AACJ,GACAL,MACC;AACD,QAAM,EAAE,OAAAM,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACJ,MACjB,CAACA,KAAQE,MAAQ,QACVF,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKT,EAAa,QAAb,EACG,UAAA,gBAAAD,EAACe,GAAA,EAAc,OAAAJ,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACf,EAAa;AAAA,IAAb;AAAA,MACG,gBAAcG;AAAA,MACd,wBAAsBK;AAAA,MACtB,WAAWQ,EAAGC,EAAO,MAAMX,CAAS;AAAA,MACpC,OAAO,EAAE,UAAAC,EAAA;AAAA,MACT,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,KAAAH;AAAA,MACA,MAAMS,EAAgBJ,CAAI;AAAA,MAEzB,UAAA;AAAA,QAAAd;AAAA,QACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWiB,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAZ,EAAe,cAAc;AAEtB,MAAMa,IAAU;AAAA,EACnB,MAAMxB;AAAA,EACN,SAASyB,EAAmDlB,CAAc;AAAA,EAC1E,SAASkB,EAAgDd,CAAc;AAC3E;"}

package/dist/fondue-components35.js

@@ -1,11 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components87.js";
-import { colorToCss as e } from "./fondue-components88.js";
-const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
-  const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
-  return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });
+const o = "_root_1wz2l_2", c = "_accordionItem_1wz2l_23", n = "_accordionTrigger_1wz2l_29", r = "_accordionHeader_1wz2l_34", t = "_accordionSlot_1wz2l_42", e = "_accordionCaret_1wz2l_70", a = "_accordionTriggerContent_1wz2l_78", i = "_accordionContent_1wz2l_83", d = "_accordionContentText_1wz2l_112", _ = {
+  root: o,
+  accordionItem: c,
+  accordionTrigger: n,
+  accordionHeader: r,
+  accordionSlot: t,
+  accordionCaret: e,
+  accordionTriggerContent: a,
+  accordionContent: i,
+  accordionContentText: d
 };
 export {
-  p as BadgeStatus
+  e as accordionCaret,
+  i as accordionContent,
+  d as accordionContentText,
+  r as accordionHeader,
+  c as accordionItem,
+  t as accordionSlot,
+  n as accordionTrigger,
+  a as accordionTriggerContent,
+  _ as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components35.js.map