@frontify/fondue-components 4.0.2 → 5.1.0

package/dist/fondue-components15.js

@@ -1,67 +1,69 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-scroll-area";
-import { forwardRef as n } from "react";
-import l from "./fondue-components45.js";
-const b = ({
+import { forwardRef as b } from "react";
+import a from "./fondue-components45.js";
+const h = ({
   type: t,
   maxHeight: e = "100%",
   maxWidth: s = "100%",
-  children: c,
+  showShadow: c = !1,
+  children: i,
   "data-test-id": r = "fondue-scroll-area"
-}, i) => /* @__PURE__ */ m(
+}, m) => /* @__PURE__ */ n(
   o.Root,
   {
     type: t,
-    className: l.root,
+    className: a.root,
     style: { maxWidth: s },
     "data-test-id": r,
-    ref: i,
+    ref: m,
     children: [
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ l(
         o.Viewport,
         {
-          className: l.viewport,
+          className: a.viewport,
           style: { maxHeight: e },
           "data-test-id": `${r}-viewport`,
-          children: c
+          "data-show-shadow": c,
+          children: i
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ l(
         o.Scrollbar,
         {
-          className: l.scrollbar,
+          className: a.scrollbar,
           orientation: "vertical",
           "data-test-id": `${r}-vertical-scrollbar`,
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ l(
             o.Thumb,
             {
-              className: l.thumb,
+              className: a.thumb,
               "data-test-id": `${r}-vertical-scrollbar-thumb`
             }
           )
         }
       ),
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ l(
         o.Scrollbar,
         {
-          className: l.scrollbar,
+          className: a.scrollbar,
           orientation: "horizontal",
           "data-test-id": `${r}-horizontal-scrollbar`,
-          children: /* @__PURE__ */ a(
+          children: /* @__PURE__ */ l(
             o.Thumb,
             {
-              className: l.thumb,
+              className: a.thumb,
               "data-test-id": `${r}-horizontal-scrollbar-thumb`
             }
           )
         }
       ),
-      /* @__PURE__ */ a(o.Corner, { className: l.corner, "data-test-id": `${r}-corner` })
+      /* @__PURE__ */ l(o.Corner, { className: a.corner, "data-test-id": `${r}-corner` })
     ]
   }
-), h = n(b);
-h.displayName = "ScrollArea";
+), d = b(h);
+d.displayName = "ScrollArea";
 export {
-  h as ScrollArea
+  d as ScrollArea
 };
 //# sourceMappingURL=fondue-components15.js.map

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AA8BA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAP;AAAA,IACA,WAAWQ,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAN,EAAS;AAAA,IAClB,gBAAcE;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAP,EAAU;AAAA,UACnB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4CZ,CAAmB;AACzFW,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components15.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    /**\n     * Determines if a inset shadow should be shown the edge of the component\n     */\n    showShadow?: boolean;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        showShadow = false,\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-test-id={`${dataTestId}-viewport`}\n                data-show-shadow={showShadow}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","showShadow","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AAkCA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAR;AAAA,IACA,WAAWS,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAP,EAAS;AAAA,IAClB,gBAAcG;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAR,EAAU;AAAA,UACnB,gBAAc,GAAGI,CAAU;AAAA,UAC3B,oBAAkBF;AAAA,UAEjB,UAAAC;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4Cb,CAAmB;AACzFY,EAAW,cAAc;"}

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.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 ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\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: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: ChangeEvent<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};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\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            ) : null}\n            <input\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                type=\"text\"\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            />\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 (\n        <div\n            data-slot={true}\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={cn(styles.slot, className)}\n        />\n    );\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","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA2GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGP,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACVM,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACjB,UAACP,EAAW,YACDO,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcR,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACP,gBAAAS,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGP,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGP,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQf,MAAAmB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAlB,GAAW,GAAGmB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMT,CAAS;AAAA,EAAA;AACxC;AAIRiB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CxB,CAAa,GACtFyB,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components22.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    type FocusEvent,\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\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};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\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            ) : null}\n            <input\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                type=\"text\"\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            />\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 (\n        <div\n            data-slot={true}\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={cn(styles.slot, className)}\n        />\n    );\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","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA4GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGP,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACVM,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACjB,UAACP,EAAW,YACDO,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcR,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACP,gBAAAS,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGP,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGP,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQf,MAAAmB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAlB,GAAW,GAAGmB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMT,CAAS;AAAA,EAAA;AACxC;AAIRiB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CxB,CAAa,GACtFyB,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}

package/dist/fondue-components27.js

@@ -1,10 +1,10 @@
 import { FOCUS_OUTLINE as t } from "./fondue-components61.js";
 import { sv as e } from "./fondue-components26.js";
 const o = e({
-  base: `tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${t}`,
+  base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ${t}`,
   variants: {
     disabled: {
-      true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
+      true: "tw-not-allowed tw-pointer-events-none tw-text-box-disabled-inverse tw-bg-box-disabled"
     },
     rounding: {
       medium: "tw-rounded",
@@ -40,79 +40,79 @@ const o = e({
       disabled: !1,
       variant: "default",
       emphasis: "default",
-      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "default",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
+      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "default",
       emphasis: "strong",
-      class: "tw-bg-button-strong-background tw-border-button-strong-border hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
+      class: "tw-bg-button-strong-background hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
     },
     {
       disabled: !1,
       variant: "positive",
       emphasis: "default",
-      class: "tw-bg-button-positive-background tw-border-button-positive-border hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
+      class: "tw-bg-button-positive-background hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
     },
     {
       disabled: !1,
       variant: "positive",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
+      class: "hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
     },
     {
       disabled: !1,
       variant: "positive",
       emphasis: "strong",
-      class: "tw-bg-button-strong-positive-background tw-border-button-strong-positive-border hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
+      class: "tw-bg-button-strong-positive-background hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
     },
     {
       disabled: !1,
       variant: "negative",
       emphasis: "default",
-      class: "tw-bg-button-negative-background tw-border-button-negative-border hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
+      class: "tw-bg-button-negative-background hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
     },
     {
       disabled: !1,
       variant: "negative",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
+      class: "hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
     },
     {
       disabled: !1,
       variant: "negative",
       emphasis: "strong",
-      class: "tw-bg-button-strong-negative-background tw-border-button-strong-negative-border hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
+      class: "tw-bg-button-strong-negative-background hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
     },
     {
       disabled: !1,
       variant: "danger",
       emphasis: "default",
-      class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "danger",
       emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
+      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "danger",
       emphasis: "strong",
-      class: "tw-bg-button-danger-background tw-border-button-danger-border hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
+      class: "tw-bg-button-danger-background hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
     },
     {
       disabled: !1,
       variant: "loud",
       emphasis: "default",
-      class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
+      class: "tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
     },
     {
       disabled: !1,
@@ -124,7 +124,7 @@ const o = e({
       disabled: !1,
       variant: "loud",
       emphasis: "strong",
-      class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
+      class: "tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
     },
     {
       aspect: "default",

package/dist/fondue-components27.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components27.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base:\n        'tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n        },\n        rounding: {\n            medium: 'tw-rounded',\n            full: 'tw-rounded-full',\n        },\n        size: {\n            small: 'tw-h-6 tw-text-body-small',\n            medium: 'tw-h-9 tw-text-body-medium',\n            large: 'tw-h-12 tw-text-body-large',\n        },\n        aspect: {\n            square: 'tw-aspect-square tw-px-0',\n            default: '',\n        },\n        hugWidth: {\n            false: 'tw-w-full',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background tw-border-button-strong-border ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background tw-border-button-positive-border ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background tw-border-button-negative-border ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background tw-border-button-danger-border ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-bg-box-selected tw-border-button-border ' +\n                'hover:tw-bg-box-selected-hover ' +\n                'active:tw-bg-box-selected-pressed ',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n                'hover:tw-bg-box-selected-strong-hover ' +\n                'active:tw-bg-box-selected-strong-pressed ',\n        },\n        {\n            aspect: 'default',\n            size: 'small',\n            class: 'tw-px-2',\n        },\n        {\n            aspect: 'default',\n            size: 'medium',\n            class: 'tw-px-4',\n        },\n        {\n            aspect: 'default',\n            size: 'large',\n            class: 'tw-px-6',\n        },\n    ],\n    defaultVariants: {\n        variant: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n        disabled: false,\n    },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":";;AAKO,MAAMA,IAAeC,EAAG;AAAA,EAC3B,MACI,+IACGC,CAAa;AAAA,EACpB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EAEd;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EAEf;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"fondue-components27.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base:\n        'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none tw-text-box-disabled-inverse tw-bg-box-disabled',\n        },\n        rounding: {\n            medium: 'tw-rounded',\n            full: 'tw-rounded-full',\n        },\n        size: {\n            small: 'tw-h-6 tw-text-body-small',\n            medium: 'tw-h-9 tw-text-body-medium',\n            large: 'tw-h-12 tw-text-body-large',\n        },\n        aspect: {\n            square: 'tw-aspect-square tw-px-0',\n            default: '',\n        },\n        hugWidth: {\n            false: 'tw-w-full',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class: 'tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-box-selected-strong ' +\n                'hover:tw-bg-box-selected-strong-hover ' +\n                'active:tw-bg-box-selected-strong-pressed ',\n        },\n        {\n            aspect: 'default',\n            size: 'small',\n            class: 'tw-px-2',\n        },\n        {\n            aspect: 'default',\n            size: 'medium',\n            class: 'tw-px-4',\n        },\n        {\n            aspect: 'default',\n            size: 'large',\n            class: 'tw-px-6',\n        },\n    ],\n    defaultVariants: {\n        variant: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n        disabled: false,\n    },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":"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"}

package/dist/fondue-components36.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components36.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FocusEvent, type MouseEvent as ReactMouseEvent, type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n    if (!window) {\n        throw new Error('Window object not found, this method should be used in a browser environment');\n    }\n\n    dialog.style.maxHeight = '';\n\n    const { top, bottom } = dialog.getBoundingClientRect();\n    if (top - MAX_HEIGHT_MARGIN < 0) {\n        // if the dialog is overflowing to the top\n        dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n    } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n        // if the dialog is overflowing to the bottom\n        dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n    }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const hasSize = rect.width > 0 && rect.height > 0;\n\n    const style = window.getComputedStyle(element);\n    const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n    // Check if the element is within the viewport\n    const isInViewport =\n        rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n    return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs(localRef: RefObject<HTMLDivElement>, forwardedRef: ForwardedRef<HTMLDivElement>) {\n    if (!forwardedRef) {\n        return;\n    }\n\n    if (typeof forwardedRef === 'function') {\n        forwardedRef(localRef.current);\n    } else if (forwardedRef && 'current' in forwardedRef) {\n        forwardedRef.current = localRef.current;\n    }\n}\n\n/**\n * Sets the 'autoFocusVisible' data attribute to 'false' on the current target of a mouse event.\n * This function is typically used to indicate that an element has been interacted with via mouse,\n * which should prevent the focus ring from being displayed when the element receives focus.\n *\n * @param mouseEvent - The mouse event object.\n */\nexport function addAutoFocusAttribute(mouseEvent: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n    mouseEvent.currentTarget.dataset.autoFocusVisible = 'false';\n}\n\n/**\n * Manages the focus ring visibility based on the previous focus state and the current focus event.\n * This function sets the 'showFocusRing' data attribute on the target element and updates the\n * 'autoFocusVisible' data attribute on the previously focused element.\n *\n * ! This function should be used in conjunction with the 'addAutoFocusAttribute' function and the autoFocusVisible data autoFocusTrigger.\n *\n * @param event - The focus event object.\n */\nexport function addShowFocusRing(event: FocusEvent<HTMLDivElement, HTMLElement>) {\n    const triggerElement = event.relatedTarget;\n\n    if (!triggerElement?.dataset.autoFocusTrigger) {\n        return;\n    }\n\n    if (triggerElement.dataset.autoFocusVisible === 'true') {\n        event.target.dataset.showFocusRing = 'true';\n    } else {\n        event.target.dataset.showFocusRing = 'false';\n    }\n\n    triggerElement.dataset.autoFocusVisible = 'true';\n}\n"],"names":["MAX_HEIGHT_MARGIN","setMaxHeightToAvailableSpace","dialog","top","bottom","isElementVisible","element","rect","hasSize","style","isVisibleStyle","isInViewport","syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAIO,MAAMA,IAAoB;AAe1B,SAASC,EAA6BC,GAAqB;AAC9D,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,8EAA8E;AAGlG,EAAAA,EAAO,MAAM,YAAY;AAEzB,QAAM,EAAE,KAAAC,GAAK,QAAAC,MAAWF,EAAO,sBAAsB;AACjD,EAAAC,IAAM,IAAoB,IAE1BD,EAAO,MAAM,YAAY,GAAGE,IAAS,CAAiB,OAC/CA,IAAS,IAAoB,OAAO,gBAE3CF,EAAO,MAAM,YAAY,GAAG,OAAO,cAAcC,IAAM,CAAiB;AAEhF;AAYO,SAASE,EAAiBC,GAAsB;AAC7C,QAAAC,IAAOD,EAAQ,sBAAsB,GACrCE,IAAUD,EAAK,QAAQ,KAAKA,EAAK,SAAS,GAE1CE,IAAQ,OAAO,iBAAiBH,CAAO,GACvCI,IAAiBD,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,WAAWA,EAAM,OAAO,MAAM,GAG5GE,IACFJ,EAAK,MAAM,OAAO,eAAeA,EAAK,OAAO,OAAO,cAAcA,EAAK,SAAS,KAAKA,EAAK,QAAQ;AAEtG,SAAOC,KAAWE,KAAkBC;AACxC;AAQgB,SAAAC,EAASC,GAAqCC,GAA4C;AACtG,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AACnF,EAAAA,EAAA,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAEzB,EAACC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SACtCD,EAAA,OAAO,QAAQ,gBAAgB,SAE/BA,EAAA,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}
+{"version":3,"file":"fondue-components36.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FocusEvent, type MouseEvent as ReactMouseEvent, type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n    if (!window) {\n        throw new Error('Window object not found, this method should be used in a browser environment');\n    }\n\n    dialog.style.maxHeight = '';\n\n    const { top, bottom } = dialog.getBoundingClientRect();\n    if (top - MAX_HEIGHT_MARGIN < 0) {\n        // if the dialog is overflowing to the top\n        dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n    } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n        // if the dialog is overflowing to the bottom\n        dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n    }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const hasSize = rect.width > 0 && rect.height > 0;\n\n    const style = window.getComputedStyle(element);\n    const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n    // Check if the element is within the viewport\n    const isInViewport =\n        rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n    return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs<TElement = HTMLElement>(localRef: RefObject<TElement>, forwardedRef: ForwardedRef<TElement>) {\n    if (!forwardedRef) {\n        return;\n    }\n\n    if (typeof forwardedRef === 'function') {\n        forwardedRef(localRef.current);\n    } else if (forwardedRef && 'current' in forwardedRef) {\n        forwardedRef.current = localRef.current;\n    }\n}\n\n/**\n * Sets the 'autoFocusVisible' data attribute to 'false' on the current target of a mouse event.\n * This function is typically used to indicate that an element has been interacted with via mouse,\n * which should prevent the focus ring from being displayed when the element receives focus.\n *\n * @param mouseEvent - The mouse event object.\n */\nexport function addAutoFocusAttribute(mouseEvent: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n    mouseEvent.currentTarget.dataset.autoFocusVisible = 'false';\n}\n\n/**\n * Manages the focus ring visibility based on the previous focus state and the current focus event.\n * This function sets the 'showFocusRing' data attribute on the target element and updates the\n * 'autoFocusVisible' data attribute on the previously focused element.\n *\n * ! This function should be used in conjunction with the 'addAutoFocusAttribute' function and the autoFocusVisible data autoFocusTrigger.\n *\n * @param event - The focus event object.\n */\nexport function addShowFocusRing(event: FocusEvent<HTMLDivElement, HTMLElement>) {\n    const triggerElement = event.relatedTarget;\n\n    if (!triggerElement?.dataset.autoFocusTrigger) {\n        return;\n    }\n\n    if (triggerElement.dataset.autoFocusVisible === 'true') {\n        event.target.dataset.showFocusRing = 'true';\n    } else {\n        event.target.dataset.showFocusRing = 'false';\n    }\n\n    triggerElement.dataset.autoFocusVisible = 'true';\n}\n"],"names":["MAX_HEIGHT_MARGIN","setMaxHeightToAvailableSpace","dialog","top","bottom","isElementVisible","element","rect","hasSize","style","isVisibleStyle","isInViewport","syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAIO,MAAMA,IAAoB;AAe1B,SAASC,EAA6BC,GAAqB;AAC9D,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,8EAA8E;AAGlG,EAAAA,EAAO,MAAM,YAAY;AAEzB,QAAM,EAAE,KAAAC,GAAK,QAAAC,MAAWF,EAAO,sBAAsB;AACjD,EAAAC,IAAM,IAAoB,IAE1BD,EAAO,MAAM,YAAY,GAAGE,IAAS,CAAiB,OAC/CA,IAAS,IAAoB,OAAO,gBAE3CF,EAAO,MAAM,YAAY,GAAG,OAAO,cAAcC,IAAM,CAAiB;AAEhF;AAYO,SAASE,EAAiBC,GAAsB;AAC7C,QAAAC,IAAOD,EAAQ,sBAAsB,GACrCE,IAAUD,EAAK,QAAQ,KAAKA,EAAK,SAAS,GAE1CE,IAAQ,OAAO,iBAAiBH,CAAO,GACvCI,IAAiBD,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,WAAWA,EAAM,OAAO,MAAM,GAG5GE,IACFJ,EAAK,MAAM,OAAO,eAAeA,EAAK,OAAO,OAAO,cAAcA,EAAK,SAAS,KAAKA,EAAK,QAAQ;AAEtG,SAAOC,KAAWE,KAAkBC;AACxC;AAQgB,SAAAC,EAAiCC,GAA+BC,GAAsC;AAClH,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AACnF,EAAAA,EAAA,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAEzB,EAACC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SACtCD,EAAA,OAAO,QAAQ,gBAAgB,SAE/BA,EAAA,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}

package/dist/fondue-components40.js

@@ -1,8 +1,8 @@
-const t = "_content_8laf8_5", n = "_subContent_8laf8_6", o = "_item_8laf8_19", e = "_subTrigger_8laf8_19", s = "_itemContent_8laf8_87", _ = "_subMenuIndicator_8laf8_98", u = "_group_8laf8_104", c = "_slot_8laf8_111", a = {
+const t = "_content_zlne2_5", n = "_subContent_zlne2_6", e = "_item_zlne2_19", o = "_subTrigger_zlne2_19", s = "_itemContent_zlne2_95", _ = "_subMenuIndicator_zlne2_106", u = "_group_zlne2_112", c = "_slot_zlne2_119", l = {
   content: t,
   subContent: n,
-  item: o,
-  subTrigger: e,
+  item: e,
+  subTrigger: o,
   itemContent: s,
   subMenuIndicator: _,
   group: u,
@@ -10,13 +10,13 @@ const t = "_content_8laf8_5", n = "_subContent_8laf8_6", o = "_item_8laf8_19", e
 };
 export {
   t as content,
-  a as default,
+  l as default,
   u as group,
-  o as item,
+  e as item,
   s as itemContent,
   c as slot,
   n as subContent,
   _ as subMenuIndicator,
-  e as subTrigger
+  o as subTrigger
 };
 //# sourceMappingURL=fondue-components40.js.map

package/dist/fondue-components45.js

@@ -1,4 +1,4 @@
-const o = "_root_16is5_3", r = "_viewport_16is5_10", t = "_scrollbar_16is5_16", s = "_thumb_16is5_48", _ = "_corner_16is5_66", c = {
+const o = "_root_uxsne_3", r = "_viewport_uxsne_10", t = "_scrollbar_uxsne_19", s = "_thumb_uxsne_51", _ = "_corner_uxsne_69", e = {
   root: o,
   viewport: r,
   scrollbar: t,
@@ -7,7 +7,7 @@ const o = "_root_16is5_3", r = "_viewport_16is5_10", t = "_scrollbar_16is5_16",
 };
 export {
   _ as corner,
-  c as default,
+  e as default,
   o as root,
   t as scrollbar,
   s as thumb,

package/dist/fondue-components58.js

@@ -1,4 +1,4 @@
-const t = "_root_17u01_5", r = "_triggerList_17u01_13", e = "_triggerListWrapper_17u01_27", i = "_trigger_17u01_13", o = "_content_17u01_76", g = "_activeIndicator_17u01_80", _ = {
+const t = "_root_l52u2_5", r = "_triggerList_l52u2_14", e = "_triggerListWrapper_l52u2_28", i = "_trigger_l52u2_14", o = "_content_l52u2_77", g = "_activeIndicator_l52u2_81", _ = {
   root: t,
   triggerList: r,
   triggerListWrapper: e,

package/dist/fondue-components9.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as I } from "react/jsx-runtime";
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
 import { IconCaretRight as h } from "@frontify/fondue-icons";
 import * as n from "@radix-ui/react-dropdown-menu";
 import { forwardRef as s, useRef as l } from "react";
@@ -8,66 +8,66 @@ import a from "./fondue-components40.js";
 const g = ({
   children: o,
   open: t,
-  onOpenChange: r,
+  onOpenChange: e,
   "data-test-id": d = "fondue-dropdown"
-}) => /* @__PURE__ */ e(n.Root, { open: t, onOpenChange: r, "data-test-id": d, children: o });
+}) => /* @__PURE__ */ r(n.Root, { open: t, onOpenChange: e, "data-test-id": d, children: o });
 g.displayName = "Dropdown.Root";
-const D = ({ asChild: o = !0, children: t, "data-test-id": r = "fondue-dropdown-trigger" }, d) => /* @__PURE__ */ e(n.Trigger, { asChild: o, "data-test-id": r, ref: d, children: t });
+const D = ({ asChild: o = !0, children: t, "data-test-id": e = "fondue-dropdown-trigger" }, d) => /* @__PURE__ */ r(n.Trigger, { asChild: o, "data-test-id": e, ref: d, children: t });
 D.displayName = "Dropdown.Trigger";
 const b = ({
   onOpen: o,
   onClose: t,
-  side: r = "bottom",
+  side: e = "bottom",
   padding: d = "comfortable",
-  align: p = "start",
-  children: u,
-  "data-test-id": c = "fondue-dropdown-content"
-}, m) => {
-  const i = l(null), w = l(!1), { setMaxHeight: F } = v(i);
-  return /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
+  align: u = "start",
+  children: c,
+  "data-test-id": w = "fondue-dropdown-content"
+}, i) => {
+  const p = l(null), m = l(!1), { setMaxHeight: F } = v(p);
+  return /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(
     n.Content,
     {
-      align: p,
+      align: u,
       collisionPadding: 8,
       sideOffset: 8,
-      side: r,
+      side: e,
       className: a.content,
       "data-padding": d,
-      "data-test-id": c,
-      ref: i,
+      "data-test-id": w,
+      ref: p,
       onCloseAutoFocus: () => {
-        f(i, m), t && t(), w.current = !1;
+        f(p, i), t && t(), m.current = !1;
       },
       onFocus: () => {
-        w.current || (F(), f(i, m), o && o(), w.current = !0);
+        m.current || (F(), f(p, i), o && o(), m.current = !0);
       },
-      children: u
+      children: c
     }
   ) });
 };
 b.displayName = "Dropdown.Content";
-const N = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, r) => /* @__PURE__ */ e(n.Group, { className: a.group, "data-test-id": t, ref: r, children: o });
+const N = ({ children: o, "data-test-id": t = "fondue-dropdown-group" }, e) => /* @__PURE__ */ r(n.Group, { className: a.group, "data-test-id": t, ref: e, children: o });
 N.displayName = "Dropdown.Group";
 const S = ({
   children: o,
   "data-test-id": t = "fondue-dropdown-submenu"
-}) => /* @__PURE__ */ e(n.Sub, { "data-test-id": t, children: o });
+}) => /* @__PURE__ */ r(n.Sub, { "data-test-id": t, children: o });
 S.displayName = "Dropdown.SubMenu";
-const R = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, r) => /* @__PURE__ */ I(n.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: r, children: [
-  /* @__PURE__ */ e("div", { className: a.itemContent, children: o }),
-  /* @__PURE__ */ e(h, { className: a.subMenuIndicator, size: 16 })
+const R = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => /* @__PURE__ */ I(n.SubTrigger, { className: a.subTrigger, "data-test-id": t, ref: e, children: [
+  /* @__PURE__ */ r("div", { className: a.itemContent, children: o }),
+  /* @__PURE__ */ r(h, { className: a.subMenuIndicator, size: 16 })
 ] });
 R.displayName = "Dropdown.SubTrigger";
 const C = ({
   padding: o = "comfortable",
   children: t,
-  "data-test-id": r = "fondue-dropdown-subcontent"
-}, d) => /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(
+  "data-test-id": e = "fondue-dropdown-subcontent"
+}, d) => /* @__PURE__ */ r(n.Portal, { children: /* @__PURE__ */ r(
   n.SubContent,
   {
     className: a.subContent,
     "data-padding": o,
-    "data-test-id": r,
+    "data-test-id": e,
     ref: d,
     children: t
   }
@@ -76,25 +76,27 @@ C.displayName = "Dropdown.SubContent";
 const y = ({
   children: o,
   disabled: t,
-  textValue: r,
+  textValue: e,
   onSelect: d,
-  "data-test-id": p = "fondue-dropdown-subtrigger",
-  ...u
-}, c) => /* @__PURE__ */ e(
+  emphasis: u = "default",
+  "data-test-id": c = "fondue-dropdown-subtrigger",
+  ...w
+}, i) => /* @__PURE__ */ r(
   n.Item,
   {
     onSelect: d,
     className: a.item,
-    textValue: r,
-    "data-test-id": p,
-    ref: c,
+    textValue: e,
+    "data-test-id": c,
+    "data-emphasis": u,
+    ref: i,
     disabled: t,
-    ...u,
-    children: /* @__PURE__ */ e("div", { className: a.itemContent, children: o })
+    ...w,
+    children: /* @__PURE__ */ r("div", { className: a.itemContent, children: o })
   }
 );
 y.displayName = "Dropdown.Item";
-const T = ({ children: o, name: t, "data-test-id": r = "fondue-dropdown-slot" }, d) => /* @__PURE__ */ e("div", { "data-name": t, className: a.slot, "data-test-id": r, ref: d, children: o });
+const T = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, d) => /* @__PURE__ */ r("div", { "data-name": t, className: a.slot, "data-test-id": e, ref: d, children: o });
 T.displayName = "Dropdown.Slot";
 const x = s(D), G = s(b), M = s(N), P = s(R), j = s(C), O = s(y), z = s(T), J = {
   Root: g,

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dropdown-trigger' }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    onOpen?: () => void;\n    onClose?: () => void;\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const DropdownContent = (\n    {\n        onOpen,\n        onClose,\n        side = 'bottom',\n        padding = 'comfortable',\n        align = 'start',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n    const dropdownIsOpen = useRef(false);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                side={side}\n                className={styles.content}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={localRef}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                    onClose && onClose();\n                    dropdownIsOpen.current = false;\n                }}\n                onFocus={() => {\n                    if (!dropdownIsOpen.current) {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                        onOpen && onOpen();\n                        dropdownIsOpen.current = true;\n                    }\n                }}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            <div className={styles.itemContent}>{children}</div>\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    {\n        padding = 'comfortable',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-subcontent',\n    }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent\n                className={styles.subContent}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            ref={ref}\n            disabled={disabled}\n            {...props}\n        >\n            <div className={styles.itemContent}>{children}</div>\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","ref","DropdownContent","onOpen","onClose","side","padding","align","localRef","useRef","dropdownIsOpen","setMaxHeight","usePreventDropdownOverflow","styles","syncRefs","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","props","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dropdown-trigger' }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    onOpen?: () => void;\n    onClose?: () => void;\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const DropdownContent = (\n    {\n        onOpen,\n        onClose,\n        side = 'bottom',\n        padding = 'comfortable',\n        align = 'start',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n    const dropdownIsOpen = useRef(false);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.Content\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                side={side}\n                className={styles.content}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={localRef}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                    onClose && onClose();\n                    dropdownIsOpen.current = false;\n                }}\n                onFocus={() => {\n                    if (!dropdownIsOpen.current) {\n                        setMaxHeight();\n                        syncRefs(localRef, ref);\n                        onOpen && onOpen();\n                        dropdownIsOpen.current = true;\n                    }\n                }}\n            >\n                {children}\n            </RadixDropdown.Content>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            <div className={styles.itemContent}>{children}</div>\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    /**\n     * The vertical padding around each dropdown item.\n     * @default \"comfortable\"\n     */\n    padding?: 'comfortable' | 'compact';\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    {\n        padding = 'comfortable',\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-subcontent',\n    }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Portal>\n            <RadixDropdown.SubContent\n                className={styles.subContent}\n                data-padding={padding}\n                data-test-id={dataTestId}\n                ref={ref}\n            >\n                {children}\n            </RadixDropdown.SubContent>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            {...props}\n        >\n            <div className={styles.itemContent}>{children}</div>\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","ref","DropdownContent","onOpen","onClose","side","padding","align","localRef","useRef","dropdownIsOpen","setMaxHeight","usePreventDropdownOverflow","styles","syncRefs","DropdownGroup","DropdownSubMenu","DropdownSubTrigger","jsxs","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","props","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}