@frontify/fondue 12.0.0-beta.164 → 12.0.0-beta.165

package/dist/components/ColorPicker/CustomColorPicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomColorPicker.es.js","sources":["../../../src/components/ColorPicker/CustomColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Dropdown } from '@components/Dropdown/Dropdown';\nimport { TextInputType } from '@components/TextInput/TextInput';\nimport { toLongRgb, toShortRgb } from '@utilities/colors';\nimport React, { FC, useEffect, useState } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\nimport tinycolor from 'tinycolor2';\nimport { Color, ColorFormat } from '../../types';\nimport { ColorInput, DecoratorPosition } from './ColorInput';\nimport { ColorPickerProps } from './ColorPicker';\n\nconst convertToHex = (color: Color) => tinycolor(toShortRgb(color)).toHex();\n\nexport const CustomColorPicker: FC<Omit<ColorPickerProps, 'palette'>> = ({\n    currentColor,\n    currentFormat,\n    setFormat,\n    onSelect,\n}) => {\n    const formatMenuBlock = [\n        {\n            id: 'color-picker-format-dropdown-block',\n            menuItems: Object.values(ColorFormat).map((id) => ({ id, title: id.toLocaleUpperCase() })),\n        },\n    ];\n    const { red, green, blue, alpha = 1 } = currentColor;\n    const [hexInput, setHexInput] = useState(convertToHex(currentColor));\n    const [alphaValue, setAlphaValue] = useState(alpha);\n\n    const handleHexChange = () => {\n        const parsedHex = tinycolor(hexInput);\n        if (parsedHex.isValid()) {\n            onSelect(toLongRgb(parsedHex.toRgb()));\n        }\n    };\n\n    useEffect(() => {\n        setAlphaValue(alpha);\n        setHexInput(convertToHex(currentColor));\n    }, [alpha, currentColor]);\n\n    return (\n        <div className=\"tw-flex tw-flex-col tw-gap-4\" data-test-id=\"custom-color-picker\" id=\"custom-color-picker\">\n            <div className=\"tw-flex tw-flex-col md:tw-flex-row tw-gap-2 tw-max-w-full\">\n                <div className=\"tw-min-w-[84px]\">\n                    <Dropdown\n                        menuBlocks={formatMenuBlock}\n                        activeItemId={currentFormat}\n                        onChange={(id) => id && setFormat && setFormat(id as ColorFormat)}\n                    />\n                </div>\n                {currentFormat === ColorFormat.Hex ? (\n                    <div className=\"tw-flex-1\">\n                        <ColorInput\n                            value={hexInput}\n                            decorator=\"#\"\n                            size={6}\n                            onChange={setHexInput}\n                            onEnterPressed={handleHexChange}\n                            onBlur={handleHexChange}\n                        />\n                    </div>\n                ) : (\n                    <>\n                        <div className=\"tw-flex-1\">\n                            <ColorInput\n                                min={0}\n                                max={255}\n                                size={3}\n                                type={TextInputType.Number}\n                                value={red.toString()}\n                                onChange={(value) => onSelect({ ...currentColor, red: parseInt(value) })}\n                            />\n                        </div>\n                        <div className=\"tw-flex-1\">\n                            <ColorInput\n                                min={0}\n                                max={255}\n                                size={3}\n                                type={TextInputType.Number}\n                                value={green.toString()}\n                                onChange={(value) => onSelect({ ...currentColor, green: parseInt(value) })}\n                            />\n                        </div>\n                        <div className=\"tw-flex-1\">\n                            <ColorInput\n                                min={0}\n                                max={255}\n                                size={3}\n                                type={TextInputType.Number}\n                                value={blue.toString()}\n                                onChange={(value) => onSelect({ ...currentColor, blue: parseInt(value) })}\n                            />\n                        </div>\n                    </>\n                )}\n                <ColorInput\n                    min={0}\n                    max={100}\n                    size={3}\n                    type={TextInputType.Number}\n                    value={Math.trunc(alphaValue * 100).toString()}\n                    decorator=\"%\"\n                    decoratorPosition={DecoratorPosition.Right}\n                    onChange={(value) => {\n                        const a = parseInt(value || '0', 10) / 100;\n                        setAlphaValue(a);\n                        onSelect({ ...currentColor, alpha: a });\n                    }}\n                />\n            </div>\n            <div className=\"tw-flex tw-gap-2 tw-w-full tw-h-[200px]\">\n                <div className=\"tw-relative tw-grow tw-rounded\">\n                    <RgbaColorPicker\n                        color={{ r: red, g: green, b: blue, a: alpha }}\n                        onChange={(color) =>\n                            onSelect({\n                                red: color.r,\n                                green: color.g,\n                                blue: color.b,\n                                alpha: color.a,\n                            })\n                        }\n                        style={{ width: '100%' }}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\nCustomColorPicker.displayName = 'FondueCustomColorPicker';\n"],"names":["convertToHex","color","tinycolor","toShortRgb","CustomColorPicker","currentColor","currentFormat","setFormat","onSelect","formatMenuBlock","ColorFormat","id","red","green","blue","alpha","hexInput","setHexInput","useState","alphaValue","setAlphaValue","handleHexChange","parsedHex","toLongRgb","useEffect","React","Dropdown","ColorInput","TextInputType","value","DecoratorPosition","a","RgbaColorPicker"],"mappings":";;;;;;;;AAYA,MAAMA,IAAe,CAACC,MAAiBC,EAAUC,EAAWF,CAAK,CAAC,EAAE,SAEvDG,IAA2D,CAAC;AAAA,EACrE,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACJ,MAAM;AACF,QAAMC,IAAkB;AAAA,IACpB;AAAA,MACI,IAAI;AAAA,MACJ,WAAW,OAAO,OAAOC,CAAW,EAAE,IAAI,CAACC,OAAQ,EAAE,IAAAA,GAAI,OAAOA,EAAG,kBAAA,EAAsB,EAAA;AAAA,IAC7F;AAAA,EAAA,GAEE,EAAE,KAAAC,GAAK,OAAAC,GAAO,MAAAC,GAAM,OAAAC,IAAQ,EAAM,IAAAV,GAClC,CAACW,GAAUC,CAAW,IAAIC,EAASlB,EAAaK,CAAY,CAAC,GAC7D,CAACc,GAAYC,CAAa,IAAIF,EAASH,CAAK,GAE5CM,IAAkB,MAAM;AACpB,UAAAC,IAAYpB,EAAUc,CAAQ;AAChC,IAAAM,EAAU,aACVd,EAASe,EAAUD,EAAU,MAAM,CAAC,CAAC;AAAA,EACzC;AAGJ,SAAAE,EAAU,MAAM;AACZ,IAAAJ,EAAcL,CAAK,GACPE,EAAAjB,EAAaK,CAAY,CAAC;AAAA,EAAA,GACvC,CAACU,GAAOV,CAAY,CAAC,GAGnB,gBAAAoB,EAAA,cAAA,OAAA,EAAI,WAAU,gCAA+B,gBAAa,uBAAsB,IAAG,sBAChF,GAAA,gBAAAA,EAAA,cAAC,SAAI,WAAU,4DAAA,GACV,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,kBACX,GAAA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAYjB;AAAA,MACZ,cAAcH;AAAA,MACd,UAAU,CAACK,MAAOA,KAAMJ,KAAaA,EAAUI,CAAiB;AAAA,IAAA;AAAA,EAExE,CAAA,GACCL,MAAkBI,EAAY,MAC1B,gBAAAe,EAAA,cAAA,OAAA,EAAI,WAAU,YACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAOX;AAAA,MACP,WAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAUC;AAAA,MACV,gBAAgBI;AAAA,MAChB,QAAQA;AAAA,IAAA;AAAA,EAEhB,CAAA,IAEA,gBAAAI,EAAA,cAAAA,EAAA,UAAA,MACK,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,YACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAMC,EAAc;AAAA,MACpB,OAAOhB,EAAI,SAAS;AAAA,MACpB,UAAU,CAACiB,MAAUrB,EAAS,EAAE,GAAGH,GAAc,KAAK,SAASwB,CAAK,GAAG;AAAA,IAAA;AAAA,EAAA,CAE/E,GACC,gBAAAJ,EAAA,cAAA,OAAA,EAAI,WAAU,YACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAMC,EAAc;AAAA,MACpB,OAAOf,EAAM,SAAS;AAAA,MACtB,UAAU,CAACgB,MAAUrB,EAAS,EAAE,GAAGH,GAAc,OAAO,SAASwB,CAAK,GAAG;AAAA,IAAA;AAAA,EAAA,CAEjF,GACC,gBAAAJ,EAAA,cAAA,OAAA,EAAI,WAAU,YACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAMC,EAAc;AAAA,MACpB,OAAOd,EAAK,SAAS;AAAA,MACrB,UAAU,CAACe,MAAUrB,EAAS,EAAE,GAAGH,GAAc,MAAM,SAASwB,CAAK,GAAG;AAAA,IAAA;AAAA,EAAA,CAEhF,CACJ,GAEJ,gBAAAJ,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,MAAMC,EAAc;AAAA,MACpB,OAAO,KAAK,MAAMT,IAAa,GAAG,EAAE,SAAS;AAAA,MAC7C,WAAU;AAAA,MACV,mBAAmBW,EAAkB;AAAA,MACrC,UAAU,CAACD,MAAU;AACjB,cAAME,IAAI,SAASF,KAAS,KAAK,EAAE,IAAI;AACvC,QAAAT,EAAcW,CAAC,GACfvB,EAAS,EAAE,GAAGH,GAAc,OAAO0B,EAAG,CAAA;AAAA,MAC1C;AAAA,IAAA;AAAA,EAAA,CAER,GACC,gBAAAN,EAAA,cAAA,OAAA,EAAI,WAAU,0CACX,GAAA,gBAAAA,EAAA,cAAC,OAAI,EAAA,WAAU,iCACX,GAAA,gBAAAA,EAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACG,OAAO,EAAE,GAAGpB,GAAK,GAAGC,GAAO,GAAGC,GAAM,GAAGC,EAAM;AAAA,MAC7C,UAAU,CAACd,MACPO,EAAS;AAAA,QACL,KAAKP,EAAM;AAAA,QACX,OAAOA,EAAM;AAAA,QACb,MAAMA,EAAM;AAAA,QACZ,OAAOA,EAAM;AAAA,MAAA,CAChB;AAAA,MAEL,OAAO,EAAE,OAAO,OAAO;AAAA,IAAA;AAAA,EAE/B,CAAA,CACJ,CACJ;AAER;AACAG,EAAkB,cAAc;"}
+{"version":3,"file":"CustomColorPicker.es.js","sources":["../../../src/components/ColorPicker/CustomColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Dropdown } from '@components/Dropdown/Dropdown';\nimport { TextInputType } from '@components/TextInput/TextInput';\nimport { toLongRgb, toShortRgb } from '@utilities/colors';\nimport React, { ReactElement, useEffect, useState } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\nimport tinycolor from 'tinycolor2';\nimport { Color, ColorFormat } from '../../types';\nimport { ColorInput, DecoratorPosition } from './ColorInput';\nimport { ColorPickerProps } from './ColorPicker';\n\nconst convertToHex = (color: Color) => tinycolor(toShortRgb(color)).toHex();\n\nexport const CustomColorPicker = ({\n    currentColor,\n    currentFormat,\n    setFormat,\n    onSelect,\n}: Omit<ColorPickerProps, 'palette'>): ReactElement => {\n    const formatMenuBlock = [\n        {\n            id: 'color-picker-format-dropdown-block',\n            menuItems: Object.values(ColorFormat).map((id) => ({ id, title: id.toLocaleUpperCase() })),\n        },\n    ];\n    const { red, green, blue, alpha = 1 } = currentColor;\n    const [hexInput, setHexInput] = useState(convertToHex(currentColor));\n    const [alphaValue, setAlphaValue] = useState(alpha);\n\n    const handleHexChange = () => {\n        const parsedHex = tinycolor(hexInput);\n        if (parsedHex.isValid()) {\n            onSelect(toLongRgb(parsedHex.toRgb()));\n        }\n    };\n\n    useEffect(() => {\n        setAlphaValue(alpha);\n        setHexInput(convertToHex(currentColor));\n    }, [alpha, currentColor]);\n\n    return (\n        <div className=\"tw-flex tw-flex-col tw-gap-4\" data-test-id=\"custom-color-picker\" id=\"custom-color-picker\">\n            <div className=\"tw-flex tw-flex-col md:tw-flex-row tw-gap-2 tw-max-w-full\">\n                <div className=\"tw-min-w-[84px]\">\n                    <Dropdown\n                        menuBlocks={formatMenuBlock}\n                        activeItemId={currentFormat}\n                        onChange={(id) => id && setFormat && setFormat(id as ColorFormat)}\n                    />\n                </div>\n                {currentFormat === ColorFormat.Hex ? (\n                    <div className=\"tw-flex-1\">\n                        <ColorInput\n                            value={hexInput}\n                            decorator=\"#\"\n                            size={6}\n                            onChange={setHexInput}\n                            onEnterPressed={handleHexChange}\n                            onBlur={handleHexChange}\n                        />\n                    </div>\n                ) : (\n                    <>\n                        <div className=\"tw-flex-1\">\n                            <ColorInput\n                                min={0}\n                                max={255}\n                                size={3}\n                                type={TextInputType.Number}\n                                value={red.toString()}\n                                onChange={(value) => onSelect({ ...currentColor, red: parseInt(value) })}\n                            />\n                        </div>\n                        <div className=\"tw-flex-1\">\n                            <ColorInput\n                                min={0}\n                                max={255}\n                                size={3}\n                                type={TextInputType.Number}\n                                value={green.toString()}\n                                onChange={(value) => onSelect({ ...currentColor, green: parseInt(value) })}\n                            />\n                        </div>\n                        <div className=\"tw-flex-1\">\n                            <ColorInput\n                                min={0}\n                                max={255}\n                                size={3}\n                                type={TextInputType.Number}\n                                value={blue.toString()}\n                                onChange={(value) => onSelect({ ...currentColor, blue: parseInt(value) })}\n                            />\n                        </div>\n                    </>\n                )}\n                <ColorInput\n                    min={0}\n                    max={100}\n                    size={3}\n                    type={TextInputType.Number}\n                    value={Math.trunc(alphaValue * 100).toString()}\n                    decorator=\"%\"\n                    decoratorPosition={DecoratorPosition.Right}\n                    onChange={(value) => {\n                        const a = parseInt(value || '0', 10) / 100;\n                        setAlphaValue(a);\n                        onSelect({ ...currentColor, alpha: a });\n                    }}\n                />\n            </div>\n            <div className=\"tw-flex tw-gap-2 tw-w-full tw-h-[200px]\">\n                <div className=\"tw-relative tw-grow tw-rounded\">\n                    <RgbaColorPicker\n                        color={{ r: red, g: green, b: blue, a: alpha }}\n                        onChange={(color) =>\n                            onSelect({\n                                red: color.r,\n                                green: color.g,\n                                blue: color.b,\n                                alpha: color.a,\n                            })\n                        }\n                        style={{ width: '100%' }}\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\nCustomColorPicker.displayName = 'FondueCustomColorPicker';\n"],"names":["convertToHex","color","tinycolor","toShortRgb","CustomColorPicker","currentColor","currentFormat","setFormat","onSelect","formatMenuBlock","ColorFormat","id","red","green","blue","alpha","hexInput","setHexInput","useState","alphaValue","setAlphaValue","handleHexChange","parsedHex","toLongRgb","useEffect","React","Dropdown","ColorInput","TextInputType","value","DecoratorPosition","a","RgbaColorPicker"],"mappings":"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"}

package/dist/components/DatePicker/DatePickerTrigger.d.ts

@@ -1,13 +1,14 @@
 import { Validation } from '../../utilities/validation';
-import React from 'react';
-export declare const DatePickerTrigger: React.ForwardRefExoticComponent<{
-    placeHolder?: string | undefined;
-    value?: string | undefined;
-    isClearable?: boolean | undefined;
-    isCalendarOpen?: boolean | undefined;
-    onClick?: (() => void) | undefined;
-    validation?: Validation | undefined;
-    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void) | undefined;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+import React, { ReactNode } from 'react';
+type DatePickerTriggerProps = {
+    placeHolder?: string;
+    value?: string;
+    isClearable?: boolean;
+    isCalendarOpen?: boolean;
+    onClick?: () => void;
+    validation?: Validation;
+    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);
+    children?: ReactNode;
+};
+export declare const DatePickerTrigger: React.ForwardRefExoticComponent<DatePickerTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/DatePicker/DatePickerTrigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInput } from '@components/TextInput';\nimport { IconCalendar } from '@foundation/Icon/Generated';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { PropsWithChildren, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = PropsWithChildren<{\n    placeHolder?: string;\n    value?: string;\n    isClearable?: boolean;\n    isCalendarOpen?: boolean;\n    onClick?: () => void;\n    validation?: Validation;\n    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);\n}>;\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        { value, onClick, isClearable, placeHolder, isCalendarOpen, validation = Validation.Default, onDateChanged },\n        ref,\n    ) => {\n        const isWarningOrErrorValidationState = validation === Validation.Error || validation === Validation.Warning;\n\n        const twoSlotsAwayFromRightEdge = 'tw-right-14';\n        const oneSlotAwayFromRightEdge = 'tw-right-8';\n        const zeroSlotsAwayFromRightEdge = 'tw-right-4';\n\n        const carrotRightSideTWPositionClassByOffset = (slotsOffsetFromRighSide: number): string => {\n            switch (slotsOffsetFromRighSide) {\n                case 0:\n                    return zeroSlotsAwayFromRightEdge;\n                case 1:\n                    return oneSlotAwayFromRightEdge;\n                case 2:\n                    return twoSlotsAwayFromRightEdge;\n            }\n            return '';\n        };\n\n        const carrotOffsetForClearButton = value && isClearable ? 1 : 0;\n        const carrotOffsetForValidationErrorIcon = isWarningOrErrorValidationState ? 1 : 0;\n\n        const carrotRightSideTWPositionClass = carrotRightSideTWPositionClassByOffset(\n            carrotOffsetForClearButton + carrotOffsetForValidationErrorIcon,\n        );\n\n        /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        return (\n            <div ref={ref} aria-hidden=\"true\">\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                >\n                    {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n                </div>\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                    onClick={onClick}\n                    data-test-id=\"open-close-click-zone\"\n                ></div>\n                <TextInput\n                    decorator={<IconCalendar />}\n                    placeholder={placeHolder}\n                    value={value}\n                    clearable={isClearable}\n                    onEnterPressed={onClick}\n                    onClear={() => {\n                        onDateChanged && onDateChanged(null);\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n        /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","ref","isWarningOrErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","React","merge","IconCaretUp","IconSize","IconCaretDown","TextInput","IconCalendar"],"mappings":";;;;;;;;AAmBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI,EAAE,OAAAC,GAAO,SAAAC,GAAS,aAAAC,GAAa,aAAAC,GAAa,gBAAAC,GAAgB,YAAAC,IAAaC,EAAW,SAAS,eAAAC,EAAc,GAC3GC,MACC;AACD,UAAMC,IAAkCJ,MAAeC,EAAW,SAASD,MAAeC,EAAW,SAE/FI,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAyB;AAAA,QAC7B,KAAK;AACM,iBAAAF;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,MACf;AACO,aAAA;AAAA,IAAA;AAAA,OAGwBV,KAASE,IAAc,IAAI,MACnBO,IAAkC,IAAI;AAAA,IAGhD;AAIjC,WACK,gBAAAM,EAAA,cAAA,OAAA,EAAI,KAAAP,GAAU,eAAY,UACvB,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,MAEAT,IAAkB,gBAAAW,EAAA,cAAAE,GAAA,EAAY,MAAMC,EAAS,OAAQ,CAAA,IAAM,gBAAAH,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ;AAAA,IAErG,GAAA,gBAAAH,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,QACD,SAAAZ;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IAEjB,GAAA,gBAAAc,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,2CAAYC,GAAa,IAAA;AAAA,QACzB,aAAalB;AAAA,QACb,OAAAH;AAAA,QACA,WAAWE;AAAA,QACX,gBAAgBD;AAAA,QAChB,SAAS,MAAM;AACX,UAAAM,KAAiBA,EAAc,IAAI;AAAA,QACvC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IAAA,CAER;AAAA,EAGR;AACJ;AAEAP,EAAkB,cAAc;"}
+{"version":3,"file":"DatePickerTrigger.es.js","sources":["../../../src/components/DatePicker/DatePickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInput } from '@components/TextInput';\nimport { IconCalendar } from '@foundation/Icon/Generated';\nimport { IconCaretDown, IconCaretUp, IconSize } from '@foundation/Icon/index';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { ReactNode, forwardRef } from 'react';\n\ntype DatePickerTriggerProps = {\n    placeHolder?: string;\n    value?: string;\n    isClearable?: boolean;\n    isCalendarOpen?: boolean;\n    onClick?: () => void;\n    validation?: Validation;\n    onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void);\n    children?: ReactNode;\n};\n\nexport const DatePickerTrigger = forwardRef<HTMLDivElement, DatePickerTriggerProps>(\n    (\n        { value, onClick, isClearable, placeHolder, isCalendarOpen, validation = Validation.Default, onDateChanged },\n        ref,\n    ) => {\n        const isWarningOrErrorValidationState = validation === Validation.Error || validation === Validation.Warning;\n\n        const twoSlotsAwayFromRightEdge = 'tw-right-14';\n        const oneSlotAwayFromRightEdge = 'tw-right-8';\n        const zeroSlotsAwayFromRightEdge = 'tw-right-4';\n\n        const carrotRightSideTWPositionClassByOffset = (slotsOffsetFromRighSide: number): string => {\n            switch (slotsOffsetFromRighSide) {\n                case 0:\n                    return zeroSlotsAwayFromRightEdge;\n                case 1:\n                    return oneSlotAwayFromRightEdge;\n                case 2:\n                    return twoSlotsAwayFromRightEdge;\n            }\n            return '';\n        };\n\n        const carrotOffsetForClearButton = value && isClearable ? 1 : 0;\n        const carrotOffsetForValidationErrorIcon = isWarningOrErrorValidationState ? 1 : 0;\n\n        const carrotRightSideTWPositionClass = carrotRightSideTWPositionClassByOffset(\n            carrotOffsetForClearButton + carrotOffsetForValidationErrorIcon,\n        );\n\n        /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n        return (\n            <div ref={ref} aria-hidden=\"true\">\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-2 tw-text-black-60 tw-z-[1]',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                >\n                    {isCalendarOpen ? <IconCaretUp size={IconSize.Size20} /> : <IconCaretDown size={IconSize.Size20} />}\n                </div>\n                <div\n                    className={merge([\n                        'tw-absolute tw-top-0 tw-left-0 tw-bottom-0 tw-z-10',\n                        carrotRightSideTWPositionClass,\n                    ])}\n                    onClick={onClick}\n                    data-test-id=\"open-close-click-zone\"\n                ></div>\n                <TextInput\n                    decorator={<IconCalendar />}\n                    placeholder={placeHolder}\n                    value={value}\n                    clearable={isClearable}\n                    onEnterPressed={onClick}\n                    onClear={() => {\n                        onDateChanged && onDateChanged(null);\n                    }}\n                    validation={validation}\n                />\n            </div>\n        );\n        /* eslint-enable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    },\n);\n\nDatePickerTrigger.displayName = 'FondueDatePickerTrigger';\n"],"names":["DatePickerTrigger","forwardRef","value","onClick","isClearable","placeHolder","isCalendarOpen","validation","Validation","onDateChanged","ref","isWarningOrErrorValidationState","twoSlotsAwayFromRightEdge","oneSlotAwayFromRightEdge","zeroSlotsAwayFromRightEdge","carrotRightSideTWPositionClass","slotsOffsetFromRighSide","React","merge","IconCaretUp","IconSize","IconCaretDown","TextInput","IconCalendar"],"mappings":";;;;;;;;AAoBO,MAAMA,IAAoBC;AAAA,EAC7B,CACI,EAAE,OAAAC,GAAO,SAAAC,GAAS,aAAAC,GAAa,aAAAC,GAAa,gBAAAC,GAAgB,YAAAC,IAAaC,EAAW,SAAS,eAAAC,EAAc,GAC3GC,MACC;AACD,UAAMC,IAAkCJ,MAAeC,EAAW,SAASD,MAAeC,EAAW,SAE/FI,IAA4B,eAC5BC,IAA2B,cAC3BC,IAA6B,cAiB7BC,KAfyC,CAACC,MAA4C;AACxF,cAAQA,GAAyB;AAAA,QAC7B,KAAK;AACM,iBAAAF;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,QACX,KAAK;AACM,iBAAAD;AAAA,MACf;AACO,aAAA;AAAA,IAAA;AAAA,OAGwBV,KAASE,IAAc,IAAI,MACnBO,IAAkC,IAAI;AAAA,IAGhD;AAIjC,WACK,gBAAAM,EAAA,cAAA,OAAA,EAAI,KAAAP,GAAU,eAAY,UACvB,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,MAAA;AAAA,MAEAT,IAAkB,gBAAAW,EAAA,cAAAE,GAAA,EAAY,MAAMC,EAAS,OAAQ,CAAA,IAAM,gBAAAH,EAAA,cAAAI,GAAA,EAAc,MAAMD,EAAS,QAAQ;AAAA,IAErG,GAAA,gBAAAH,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAH;AAAA,QAAA,CACH;AAAA,QACD,SAAAZ;AAAA,QACA,gBAAa;AAAA,MAAA;AAAA,IAEjB,GAAA,gBAAAc,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACG,2CAAYC,GAAa,IAAA;AAAA,QACzB,aAAalB;AAAA,QACb,OAAAH;AAAA,QACA,WAAWE;AAAA,QACX,gBAAgBD;AAAA,QAChB,SAAS,MAAM;AACX,UAAAM,KAAiBA,EAAc,IAAI;AAAA,QACvC;AAAA,QACA,YAAAF;AAAA,MAAA;AAAA,IAAA,CAER;AAAA,EAGR;AACJ;AAEAP,EAAkB,cAAc;"}

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 export declare enum DividerStyle {
     NoLine = "noline",
     Dashed = "dashed",
@@ -15,4 +15,7 @@ export type DividerProps = {
     height?: DividerHeight | string;
     color?: string;
 };
-export declare const Divider: FC<DividerProps>;
+export declare const Divider: {
+    ({ style, height, color: borderTopColor, }: DividerProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Divider/Divider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.es.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC } from 'react';\n\nexport enum DividerStyle {\n    NoLine = 'noline',\n    Dashed = 'dashed',\n    Solid = 'solid',\n    Dotted = 'dotted',\n}\n\nexport enum DividerHeight {\n    Small = '36px',\n    Medium = '60px',\n    Large = '96px',\n}\n\nexport type DividerProps = {\n    style?: DividerStyle;\n    height?: DividerHeight | string;\n    color?: string;\n};\n\nconst styleMap = {\n    [DividerStyle.NoLine]: 'tw-border-none',\n    [DividerStyle.Dashed]: 'tw-border-dashed',\n    [DividerStyle.Solid]: 'tw-border-solid',\n    [DividerStyle.Dotted]: 'tw-border-dotted',\n};\n\nexport const Divider: FC<DividerProps> = ({\n    style = DividerStyle.Solid,\n    height = DividerHeight.Small,\n    color: borderTopColor = '#CCC',\n}) => (\n    <div className=\"tw-flex tw-items-center\" style={{ height }} data-test-id=\"divider\">\n        <hr\n            className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}\n            style={{ borderTopColor }}\n            data-test-id=\"divider-hr\"\n        />\n    </div>\n);\nDivider.displayName = 'FondueDivider';\n"],"names":["DividerStyle","DividerHeight","styleMap","Divider","style","height","borderTopColor","React"],"mappings":";AAIY,IAAAA,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAJDA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACRA,EAAA,QAAQ,QACRA,EAAA,SAAS,QACTA,EAAA,QAAQ,QAHAA,IAAAA,KAAA,CAAA,CAAA;AAYZ,MAAMC,IAAW;AAAA,EACZ,QAAsB;AAAA,EACtB,QAAsB;AAAA,EACtB,OAAqB;AAAA,EACrB,QAAsB;AAC3B,GAEaC,IAA4B,CAAC;AAAA,EACtC,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,OAAOC,IAAiB;AAC5B,MACI,gBAAAC,EAAA,cAAC,SAAI,WAAU,2BAA0B,OAAO,EAAE,QAAAF,EAAA,GAAU,gBAAa,UACrE,GAAA,gBAAAE,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,gCAAgCL,EAASE,CAAK;AAAA,IACzD,OAAO,EAAE,gBAAAE,EAAe;AAAA,IACxB,gBAAa;AAAA,EAAA;AACjB,CACJ;AAEJH,EAAQ,cAAc;"}
+{"version":3,"file":"Divider.es.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement } from 'react';\n\nexport enum DividerStyle {\n    NoLine = 'noline',\n    Dashed = 'dashed',\n    Solid = 'solid',\n    Dotted = 'dotted',\n}\n\nexport enum DividerHeight {\n    Small = '36px',\n    Medium = '60px',\n    Large = '96px',\n}\n\nexport type DividerProps = {\n    style?: DividerStyle;\n    height?: DividerHeight | string;\n    color?: string;\n};\n\nconst styleMap = {\n    [DividerStyle.NoLine]: 'tw-border-none',\n    [DividerStyle.Dashed]: 'tw-border-dashed',\n    [DividerStyle.Solid]: 'tw-border-solid',\n    [DividerStyle.Dotted]: 'tw-border-dotted',\n};\n\nexport const Divider = ({\n    style = DividerStyle.Solid,\n    height = DividerHeight.Small,\n    color: borderTopColor = '#CCC',\n}: DividerProps): ReactElement => (\n    <div className=\"tw-flex tw-items-center\" style={{ height }} data-test-id=\"divider\">\n        <hr\n            className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}\n            style={{ borderTopColor }}\n            data-test-id=\"divider-hr\"\n        />\n    </div>\n);\nDivider.displayName = 'FondueDivider';\n"],"names":["DividerStyle","DividerHeight","styleMap","Divider","style","height","borderTopColor","React"],"mappings":";AAIY,IAAAA,sBAAAA,OACRA,EAAA,SAAS,UACTA,EAAA,SAAS,UACTA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAJDA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACRA,EAAA,QAAQ,QACRA,EAAA,SAAS,QACTA,EAAA,QAAQ,QAHAA,IAAAA,KAAA,CAAA,CAAA;AAYZ,MAAMC,IAAW;AAAA,EACZ,QAAsB;AAAA,EACtB,QAAsB;AAAA,EACtB,OAAqB;AAAA,EACrB,QAAsB;AAC3B,GAEaC,IAAU,CAAC;AAAA,EACpB,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,OAAOC,IAAiB;AAC5B,MACI,gBAAAC,EAAA,cAAC,SAAI,WAAU,2BAA0B,OAAO,EAAE,QAAAF,EAAA,GAAU,gBAAa,UACrE,GAAA,gBAAAE,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,gCAAgCL,EAASE,CAAK;AAAA,IACzD,OAAO,EAAE,gBAAAE,EAAe;AAAA,IACxB,gBAAa;AAAA,EAAA;AACjB,CACJ;AAEJH,EAAQ,cAAc;"}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,7 +1,7 @@
 import { MenuBlock } from '../Dropdown/SelectMenu/SelectMenu';
 import { TriggerEmphasis } from '../Trigger/Trigger';
 import { Validation } from '../../utilities/validation';
-import { FC, ReactElement } from 'react';
+import { ReactElement } from 'react';
 export declare const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36;
 export declare enum DropdownSize {
     Small = "Small",
@@ -33,4 +33,7 @@ export type DropdownProps = {
     emphasis?: TriggerEmphasis;
     flip?: boolean;
 };
-export declare const Dropdown: FC<DropdownProps>;
+export declare const Dropdown: {
+    ({ id: propId, menuBlocks, onChange, activeItemId, placeholder, size, disabled, clearable, ariaLabel, decorator, autoResize, validation, alignment, position, emphasis, flip, }: DropdownProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Dropdown/Dropdown.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { MenuBlock, MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport {\n    MenuItemContent,\n    MenuItemContentSize,\n    MenuItemStyle,\n    MenuItemTextColorState,\n    menuItemTextColorRecord,\n} from '@components/MenuItem';\nimport { Trigger, TriggerEmphasis, TriggerSize } from '@components/Trigger/Trigger';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { VariationPlacement } from '@popperjs/core';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { FC, ReactElement, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from './useDropdownAutoHeight';\n\nexport const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36; //Small Input height as default\n\nexport enum DropdownSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n    Start = 'Start',\n    End = 'End',\n}\n\nexport enum DropdownPosition {\n    Top = 'Top',\n    Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n    id?: string;\n    menuBlocks: MenuBlock[];\n    onChange: (id?: string | number) => void;\n    activeItemId?: string | number;\n    placeholder?: string;\n    size?: DropdownSize;\n    disabled?: boolean;\n    clearable?: boolean;\n    ariaLabel?: string;\n    decorator?: ReactElement;\n    autoResize?: boolean;\n    validation?: Validation;\n    alignment?: DropdownAlignment;\n    position?: DropdownPosition;\n    emphasis?: TriggerEmphasis;\n    flip?: boolean;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n    const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n    if (disabledItems.has(activeId)) {\n        return null;\n    }\n\n    return (\n        blocks\n            .map(({ menuItems }) => menuItems)\n            .flat()\n            .find(({ id }) => id.toString() === activeId?.toString()) || null\n    );\n};\n\nexport const Dropdown: FC<DropdownProps> = ({\n    id: propId,\n    menuBlocks,\n    onChange,\n    activeItemId,\n    placeholder = 'Select item',\n    size = DropdownSize.Small,\n    disabled = false,\n    clearable = false,\n    ariaLabel = 'Dropdown',\n    decorator,\n    autoResize = true,\n    validation = Validation.Default,\n    alignment = DropdownAlignment.Start,\n    position = DropdownPosition.Bottom,\n    emphasis = TriggerEmphasis.Default,\n    flip = false,\n}) => {\n    const activeItem = !!activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n    const props = mapToAriaProps(ariaLabel, menuBlocks);\n    const state = useSelectState({\n        ...props,\n        defaultSelectedKey: activeItemId,\n        onSelectionChange: (key) => onChange(key),\n        disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n    });\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n    const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n    const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n    const { isOpen } = state;\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n        overlayRef,\n    );\n\n    useEffect(() => {\n        if (state.disabledKeys.has(activeItemId as string)) {\n            return;\n        }\n\n        if (activeItemId !== state.selectedKey) {\n            state.setSelectedKey(activeItemId as string);\n        }\n    }, [activeItemId]);\n\n    const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n    const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n    const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n    const textColorClass = activeItem\n        ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n        : 'tw-text-text-x-weak';\n\n    const onClear = clearable\n        ? () => {\n              state.setSelectedKey('');\n              const first = state.collection.getFirstKey();\n              if (first) {\n                  state.selectionManager.setFocusedKey(first);\n              }\n          }\n        : undefined;\n\n    const showClear = !!activeItem && !!onClear;\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const placementMap: Record<string, VariationPlacement> = {\n        ['Top-Start']: 'top-start',\n        ['Top-End']: 'top-end',\n        ['Bottom-Start']: 'bottom-start',\n        ['Bottom-End']: 'bottom-end',\n    };\n    const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n        placement: placementMap[`${position}-${alignment}`],\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    return (\n        <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\">\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={!disabled && isFocusVisible}\n                isOpen={isOpen}\n                size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n                emphasis={emphasis}\n                onClear={onClear}\n                showClear={showClear}\n                validation={validation}\n            >\n                <HiddenSelect state={state} triggerRef={triggerRef} />\n                <button\n                    {...mergeProps(buttonProps, focusProps)}\n                    id={useMemoizedId(propId)}\n                    ref={triggerRef}\n                    data-test-id=\"dropdown-trigger\"\n                    className={merge([\n                        'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n                        size === DropdownSize.Small\n                            ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n                            : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n                        showClear ? 'tw-pr-11' : 'tw-pr-7',\n                        textColorClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        ariaProps={valueProps}\n                        title={activeItem?.title || placeholder}\n                        decorator={decorator ?? activeItem?.decorator}\n                        subtitle={activeItem?.subtitle}\n                        size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n                    />\n                </button>\n            </Trigger>\n            {!disabled &&\n                isOpen &&\n                heightIsReady &&\n                createPortal(\n                    <div\n                        ref={dropdownRef}\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef.current?.getBoundingClientRect().width,\n                            minWidth: 'fit-content',\n                        }}\n                        {...popperInstance.attributes.popper}\n                        className=\"tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n                        key=\"content\"\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                {...overlayProps}\n                                ref={overlayRef}\n                                style={autoResize ? { maxHeight } : {}}\n                                className=\"tw-flex tw-flex-col\"\n                                data-test-id=\"dropdown-menu\"\n                                role=\"dialog\"\n                            >\n                                <DismissButton onDismiss={() => close()} />\n                                <SelectMenu ariaProps={menuProps} state={state} menuBlocks={menuBlocks} scrollable />\n                                <DismissButton onDismiss={() => close()} />\n                            </div>\n                        </FocusScope>\n                    </div>,\n                    document.body,\n                )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n        </div>\n    );\n};\nDropdown.displayName = 'FonduesDropdown';\n"],"names":["DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","DropdownSize","DropdownAlignment","DropdownPosition","getActiveItem","blocks","activeId","getDisabledItemIds","getMenuItems","menuItems","id","Dropdown","propId","menuBlocks","onChange","activeItemId","placeholder","size","disabled","clearable","ariaLabel","decorator","autoResize","validation","Validation","alignment","position","emphasis","TriggerEmphasis","flip","activeItem","props","mapToAriaProps","state","useSelectState","key","triggerRef","useRef","triggerProps","valueProps","menuProps","useSelect","buttonProps","useButton","isOpen","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","useEffect","maxHeight","useDropdownAutoHeight","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","enabledTextColorState","MenuItemTextColorState","textState","textColorClass","menuItemTextColorRecord","MenuItemStyle","onClear","first","showClear","dropdownRef","placementMap","popperInstance","usePopper","React","Trigger","TriggerSize","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","createPortal","_a","FocusScope","DismissButton","SelectMenu","LoadingCircle","LoadingCircleSize"],"mappings":"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"}
+{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { MenuBlock, MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport {\n    MenuItemContent,\n    MenuItemContentSize,\n    MenuItemStyle,\n    MenuItemTextColorState,\n    menuItemTextColorRecord,\n} from '@components/MenuItem';\nimport { Trigger, TriggerEmphasis, TriggerSize } from '@components/Trigger/Trigger';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { VariationPlacement } from '@popperjs/core';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { ReactElement, useEffect, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from './useDropdownAutoHeight';\n\nexport const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36; //Small Input height as default\n\nexport enum DropdownSize {\n    Small = 'Small',\n    Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n    Start = 'Start',\n    End = 'End',\n}\n\nexport enum DropdownPosition {\n    Top = 'Top',\n    Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n    id?: string;\n    menuBlocks: MenuBlock[];\n    onChange: (id?: string | number) => void;\n    activeItemId?: string | number;\n    placeholder?: string;\n    size?: DropdownSize;\n    disabled?: boolean;\n    clearable?: boolean;\n    ariaLabel?: string;\n    decorator?: ReactElement;\n    autoResize?: boolean;\n    validation?: Validation;\n    alignment?: DropdownAlignment;\n    position?: DropdownPosition;\n    emphasis?: TriggerEmphasis;\n    flip?: boolean;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n    const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n    if (disabledItems.has(activeId)) {\n        return null;\n    }\n\n    return (\n        blocks\n            .map(({ menuItems }) => menuItems)\n            .flat()\n            .find(({ id }) => id.toString() === activeId?.toString()) || null\n    );\n};\n\nexport const Dropdown = ({\n    id: propId,\n    menuBlocks,\n    onChange,\n    activeItemId,\n    placeholder = 'Select item',\n    size = DropdownSize.Small,\n    disabled = false,\n    clearable = false,\n    ariaLabel = 'Dropdown',\n    decorator,\n    autoResize = true,\n    validation = Validation.Default,\n    alignment = DropdownAlignment.Start,\n    position = DropdownPosition.Bottom,\n    emphasis = TriggerEmphasis.Default,\n    flip = false,\n}: DropdownProps): ReactElement => {\n    const activeItem = !!activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n    const props = mapToAriaProps(ariaLabel, menuBlocks);\n    const state = useSelectState({\n        ...props,\n        defaultSelectedKey: activeItemId,\n        onSelectionChange: (key) => onChange(key),\n        disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n    });\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n    const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n    const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n    const { isOpen } = state;\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const { overlayProps } = useOverlay(\n        { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n        overlayRef,\n    );\n\n    useEffect(() => {\n        if (state.disabledKeys.has(activeItemId as string)) {\n            return;\n        }\n\n        if (activeItemId !== state.selectedKey) {\n            state.setSelectedKey(activeItemId as string);\n        }\n    }, [activeItemId]);\n\n    const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n    const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n    const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n    const textColorClass = activeItem\n        ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n        : 'tw-text-text-x-weak';\n\n    const onClear = clearable\n        ? () => {\n              state.setSelectedKey('');\n              const first = state.collection.getFirstKey();\n              if (first) {\n                  state.selectionManager.setFocusedKey(first);\n              }\n          }\n        : undefined;\n\n    const showClear = !!activeItem && !!onClear;\n    const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n    const placementMap: Record<string, VariationPlacement> = {\n        ['Top-Start']: 'top-start',\n        ['Top-End']: 'top-end',\n        ['Bottom-Start']: 'bottom-start',\n        ['Bottom-End']: 'bottom-end',\n    };\n    const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n        placement: placementMap[`${position}-${alignment}`],\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    return (\n        <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\">\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={!disabled && isFocusVisible}\n                isOpen={isOpen}\n                size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n                emphasis={emphasis}\n                onClear={onClear}\n                showClear={showClear}\n                validation={validation}\n            >\n                <HiddenSelect state={state} triggerRef={triggerRef} />\n                <button\n                    {...mergeProps(buttonProps, focusProps)}\n                    id={useMemoizedId(propId)}\n                    ref={triggerRef}\n                    data-test-id=\"dropdown-trigger\"\n                    className={merge([\n                        'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n                        size === DropdownSize.Small\n                            ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n                            : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n                        showClear ? 'tw-pr-11' : 'tw-pr-7',\n                        textColorClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        ariaProps={valueProps}\n                        title={activeItem?.title || placeholder}\n                        decorator={decorator ?? activeItem?.decorator}\n                        subtitle={activeItem?.subtitle}\n                        size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n                    />\n                </button>\n            </Trigger>\n            {!disabled &&\n                isOpen &&\n                heightIsReady &&\n                createPortal(\n                    <div\n                        ref={dropdownRef}\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef.current?.getBoundingClientRect().width,\n                            minWidth: 'fit-content',\n                        }}\n                        {...popperInstance.attributes.popper}\n                        className=\"tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n                        key=\"content\"\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                {...overlayProps}\n                                ref={overlayRef}\n                                style={autoResize ? { maxHeight } : {}}\n                                className=\"tw-flex tw-flex-col\"\n                                data-test-id=\"dropdown-menu\"\n                                role=\"dialog\"\n                            >\n                                <DismissButton onDismiss={() => close()} />\n                                <SelectMenu ariaProps={menuProps} state={state} menuBlocks={menuBlocks} scrollable />\n                                <DismissButton onDismiss={() => close()} />\n                            </div>\n                        </FocusScope>\n                    </div>,\n                    document.body,\n                )}\n            {validation === Validation.Loading && (\n                <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak\">\n                    <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                </span>\n            )}\n        </div>\n    );\n};\nDropdown.displayName = 'FonduesDropdown';\n"],"names":["DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","DropdownSize","DropdownAlignment","DropdownPosition","getActiveItem","blocks","activeId","getDisabledItemIds","getMenuItems","menuItems","id","Dropdown","propId","menuBlocks","onChange","activeItemId","placeholder","size","disabled","clearable","ariaLabel","decorator","autoResize","validation","Validation","alignment","position","emphasis","TriggerEmphasis","flip","activeItem","props","mapToAriaProps","state","useSelectState","key","triggerRef","useRef","triggerProps","valueProps","menuProps","useSelect","buttonProps","useButton","isOpen","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","useEffect","maxHeight","useDropdownAutoHeight","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","enabledTextColorState","MenuItemTextColorState","textState","textColorClass","menuItemTextColorRecord","MenuItemStyle","onClear","first","showClear","dropdownRef","placementMap","popperInstance","usePopper","React","Trigger","TriggerSize","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","createPortal","_a","FocusScope","DismissButton","SelectMenu","LoadingCircle","LoadingCircleSize"],"mappings":"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"}

package/dist/components/Dropdown/SelectMenu/SelectMenuItem.d.ts

@@ -1,11 +1,14 @@
 import { ListState } from '@react-stately/list';
 import { Node } from '@react-types/shared';
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { MenuItemType } from './SelectMenu';
 type SelectMenuItemProps = {
     state: ListState<object>;
     menuItem: MenuItemType;
     node: Node<object>;
 };
-export declare const SelectMenuItem: FC<SelectMenuItemProps>;
+export declare const SelectMenuItem: {
+    ({ state, menuItem, node }: SelectMenuItemProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/Dropdown/SelectMenu/SelectMenuItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuItem.es.js","sources":["../../../../src/components/Dropdown/SelectMenu/SelectMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useOption } from '@react-aria/listbox';\nimport { mergeProps } from '@react-aria/utils';\nimport { ListState } from '@react-stately/list';\nimport { Node } from '@react-types/shared';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef } from 'react';\nimport { MenuItem } from '../../MenuItem';\nimport { MenuItemType } from './SelectMenu';\n\ntype SelectMenuItemProps = {\n    state: ListState<object>;\n    menuItem: MenuItemType;\n    node: Node<object>;\n};\n\nexport const SelectMenuItem: FC<SelectMenuItemProps> = ({ state, menuItem, node }) => {\n    const ref = useRef<HTMLLIElement | null>(null);\n    const { optionProps, isSelected } = useOption(\n        {\n            key: node.key,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n\n    const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <li\n            {...mergeProps(optionProps, focusProps)}\n            data-test-id=\"menu-item\"\n            className={merge([\n                'tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none',\n                disabled && 'tw-pointer-events-none tw-top-px',\n                isFocusVisible && FOCUS_STYLE_INSET,\n            ])}\n            ref={ref}\n        >\n            <MenuItem\n                title={title}\n                decorator={decorator}\n                subtitle={subtitle}\n                size={size}\n                style={style}\n                disabled={disabled}\n                active={isSelected}\n                selectionIndicator={selectionIndicator}\n            />\n        </li>\n    );\n};\nSelectMenuItem.displayName = 'FondueSelectMenuItem';\n"],"names":["SelectMenuItem","state","menuItem","node","ref","useRef","optionProps","isSelected","useOption","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","React","mergeProps","merge","FOCUS_STYLE_INSET","MenuItem"],"mappings":";;;;;;;AAmBO,MAAMA,IAA0C,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,MAAAC,QAAW;AAC5E,QAAAC,IAAMC,EAA6B,IAAI,GACvC,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC;AAAA,IAChC;AAAA,MACI,KAAKL,EAAK;AAAA,MACV,oBAAoB;AAAA,IACxB;AAAA,IACAF;AAAA,IACAG;AAAA,EAAA,GAGE,EAAE,OAAAK,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,EAAuB,IAAAb,GAC5E,EAAE,gBAAAc,GAAgB,YAAAC,EAAW,IAAIC,EAAa;AAGhD,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWd,GAAaW,CAAU;AAAA,MACtC,gBAAa;AAAA,MACb,WAAWI,EAAM;AAAA,QACb;AAAA,QACAP,KAAY;AAAA,QACZE,KAAkBM;AAAA,MAAA,CACrB;AAAA,MACD,KAAAlB;AAAA,IAAA;AAAA,IAEA,gBAAAe,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,OAAAd;AAAA,QACA,WAAAC;AAAA,QACA,UAAAC;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,UAAAC;AAAA,QACA,QAAQP;AAAA,QACR,oBAAAQ;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAf,EAAe,cAAc;"}
+{"version":3,"file":"SelectMenuItem.es.js","sources":["../../../../src/components/Dropdown/SelectMenu/SelectMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useOption } from '@react-aria/listbox';\nimport { mergeProps } from '@react-aria/utils';\nimport { ListState } from '@react-stately/list';\nimport { Node } from '@react-types/shared';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, useRef } from 'react';\nimport { MenuItem } from '../../MenuItem';\nimport { MenuItemType } from './SelectMenu';\n\ntype SelectMenuItemProps = {\n    state: ListState<object>;\n    menuItem: MenuItemType;\n    node: Node<object>;\n};\n\nexport const SelectMenuItem = ({ state, menuItem, node }: SelectMenuItemProps): ReactElement => {\n    const ref = useRef<HTMLLIElement | null>(null);\n    const { optionProps, isSelected } = useOption(\n        {\n            key: node.key,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n\n    const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <li\n            {...mergeProps(optionProps, focusProps)}\n            data-test-id=\"menu-item\"\n            className={merge([\n                'tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none',\n                disabled && 'tw-pointer-events-none tw-top-px',\n                isFocusVisible && FOCUS_STYLE_INSET,\n            ])}\n            ref={ref}\n        >\n            <MenuItem\n                title={title}\n                decorator={decorator}\n                subtitle={subtitle}\n                size={size}\n                style={style}\n                disabled={disabled}\n                active={isSelected}\n                selectionIndicator={selectionIndicator}\n            />\n        </li>\n    );\n};\nSelectMenuItem.displayName = 'FondueSelectMenuItem';\n"],"names":["SelectMenuItem","state","menuItem","node","ref","useRef","optionProps","isSelected","useOption","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","React","mergeProps","merge","FOCUS_STYLE_INSET","MenuItem"],"mappings":";;;;;;;AAmBO,MAAMA,IAAiB,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,MAAAC,QAA8C;AACtF,QAAAC,IAAMC,EAA6B,IAAI,GACvC,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC;AAAA,IAChC;AAAA,MACI,KAAKL,EAAK;AAAA,MACV,oBAAoB;AAAA,IACxB;AAAA,IACAF;AAAA,IACAG;AAAA,EAAA,GAGE,EAAE,OAAAK,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,EAAuB,IAAAb,GAC5E,EAAE,gBAAAc,GAAgB,YAAAC,EAAW,IAAIC,EAAa;AAGhD,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWd,GAAaW,CAAU;AAAA,MACtC,gBAAa;AAAA,MACb,WAAWI,EAAM;AAAA,QACb;AAAA,QACAP,KAAY;AAAA,QACZE,KAAkBM;AAAA,MAAA,CACrB;AAAA,MACD,KAAAlB;AAAA,IAAA;AAAA,IAEA,gBAAAe,EAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,OAAAd;AAAA,QACA,WAAAC;AAAA,QACA,UAAAC;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,UAAAC;AAAA,QACA,QAAQP;AAAA,QACR,oBAAAQ;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAf,EAAe,cAAc;"}

package/dist/components/Dropdown/SelectMenu/SelectMenuSection.d.ts

@@ -1,6 +1,10 @@
-import { FC, PropsWithChildren } from 'react';
-type SelectMenuSectionProps = PropsWithChildren<{
+import { ReactElement, ReactNode } from 'react';
+type SelectMenuSectionProps = {
     ariaLabel?: string;
-}>;
-export declare const SelectMenuSection: FC<SelectMenuSectionProps>;
+    children?: ReactNode;
+};
+export declare const SelectMenuSection: {
+    ({ ariaLabel, children }: SelectMenuSectionProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/Dropdown/SelectMenu/SelectMenuSection.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuSection.es.js","sources":["../../../../src/components/Dropdown/SelectMenu/SelectMenuSection.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useListBoxSection } from '@react-aria/listbox';\nimport React, { FC, PropsWithChildren } from 'react';\n\ntype SelectMenuSectionProps = PropsWithChildren<{\n    ariaLabel?: string;\n}>;\n\nexport const SelectMenuSection: FC<SelectMenuSectionProps> = ({ ariaLabel, children }) => {\n    const { itemProps, groupProps } = useListBoxSection({ 'aria-label': ariaLabel });\n\n    return (\n        <li {...itemProps} className=\"tw-border-b tw-border-b-line last:tw-border-0\" data-test-id=\"menu-block-divider\">\n            <ul {...groupProps} className=\"tw-py-2 tw-px-0 tw-m-0 tw-list-none\" data-test-id=\"menu-item-list\">\n                {children}\n            </ul>\n        </li>\n    );\n};\nSelectMenuSection.displayName = 'FondueSelectMenuSection';\n"],"names":["SelectMenuSection","ariaLabel","children","itemProps","groupProps","useListBoxSection","React"],"mappings":";;AASO,MAAMA,IAAgD,CAAC,EAAE,WAAAC,GAAW,UAAAC,QAAe;AAChF,QAAA,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAkB,EAAE,cAAcJ,GAAW;AAE/E,yCACK,MAAI,EAAA,GAAGE,GAAW,WAAU,iDAAgD,gBAAa,wBACrF,gBAAAG,EAAA,cAAA,MAAA,EAAI,GAAGF,GAAY,WAAU,uCAAsC,gBAAa,iBAAA,GAC5EF,CACL,CACJ;AAER;AACAF,EAAkB,cAAc;"}
+{"version":3,"file":"SelectMenuSection.es.js","sources":["../../../../src/components/Dropdown/SelectMenu/SelectMenuSection.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useListBoxSection } from '@react-aria/listbox';\nimport React, { ReactElement, ReactNode } from 'react';\n\ntype SelectMenuSectionProps = {\n    ariaLabel?: string;\n    children?: ReactNode;\n};\n\nexport const SelectMenuSection = ({ ariaLabel, children }: SelectMenuSectionProps): ReactElement => {\n    const { itemProps, groupProps } = useListBoxSection({ 'aria-label': ariaLabel });\n\n    return (\n        <li {...itemProps} className=\"tw-border-b tw-border-b-line last:tw-border-0\" data-test-id=\"menu-block-divider\">\n            <ul {...groupProps} className=\"tw-py-2 tw-px-0 tw-m-0 tw-list-none\" data-test-id=\"menu-item-list\">\n                {children}\n            </ul>\n        </li>\n    );\n};\nSelectMenuSection.displayName = 'FondueSelectMenuSection';\n"],"names":["SelectMenuSection","ariaLabel","children","itemProps","groupProps","useListBoxSection","React"],"mappings":";;AAUO,MAAMA,IAAoB,CAAC,EAAE,WAAAC,GAAW,UAAAC,QAAqD;AAC1F,QAAA,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAkB,EAAE,cAAcJ,GAAW;AAE/E,yCACK,MAAI,EAAA,GAAGE,GAAW,WAAU,iDAAgD,gBAAa,wBACrF,gBAAAG,EAAA,cAAA,MAAA,EAAI,GAAGF,GAAY,WAAU,uCAAsC,gBAAa,iBAAA,GAC5EF,CACL,CACJ;AAER;AACAF,EAAkB,cAAc;"}

package/dist/components/FieldsetHeader/FieldsetHeader.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export declare const ACCORDION_ICON_CONTAINER_ID = "accordion-icon-container";
 export declare const ADDREMOVE_ICON_CONTAINER_ID = "addremove-icon-container";
 export declare enum FieldsetHeaderSize {
@@ -25,4 +25,7 @@ export type FieldsetHeaderProps = {
     tabIndex?: number;
 };
 export declare const renderFieldsetHeaderIconType: (type: FieldsetHeaderType, id: string, size: FieldsetHeaderSize, active: boolean, disabled: boolean) => JSX.Element | null;
-export declare const FieldsetHeader: FC<FieldsetHeaderProps>;
+export declare const FieldsetHeader: {
+    ({ size, active, decorator, type, disabled, bold, children, onClick, as: Heading, tabIndex, }: FieldsetHeaderProps): ReactElement;
+    displayName: string;
+};

package/dist/components/FieldsetHeader/FieldsetHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { FC, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon';\n\nexport const ACCORDION_ICON_CONTAINER_ID = 'accordion-icon-container';\n\nexport const ADDREMOVE_ICON_CONTAINER_ID = 'addremove-icon-container';\n\nexport enum FieldsetHeaderSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n    [FieldsetHeaderSize.Small]: {\n        icon: IconSize.Size12,\n        text: 'tw-text-s',\n        switch: 'small',\n    },\n    [FieldsetHeaderSize.Medium]: {\n        icon: IconSize.Size16,\n        text: 'tw-text-m',\n        switch: 'medium',\n    },\n    [FieldsetHeaderSize.Large]: {\n        icon: IconSize.Size20,\n        text: 'tw-text-l',\n        switch: 'medium',\n    },\n};\n\nexport enum FieldsetHeaderType {\n    Default = 'Default',\n    Switch = 'Switch',\n    Accordion = 'Accordion',\n    AddRemove = 'AddRemove',\n}\n\nexport type FieldsetHeaderProps = {\n    size?: FieldsetHeaderSize;\n    active?: boolean;\n    decorator?: ReactNode;\n    type?: FieldsetHeaderType;\n    disabled?: boolean;\n    bold?: boolean;\n    children: string;\n    onClick?: () => void;\n    as?: keyof JSX.IntrinsicElements;\n    tabIndex?: number;\n};\n\nexport const renderFieldsetHeaderIconType = (\n    type: FieldsetHeaderType,\n    id: string,\n    size: FieldsetHeaderSize,\n    active: boolean,\n    disabled: boolean,\n) => {\n    const props = {\n        'aria-labelledby': id,\n        size: sizeMap[size].icon,\n    };\n\n    switch (type) {\n        case FieldsetHeaderType.Switch:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <Switch {...props} size={sizeMap[size].switch} mode={active ? 'on' : 'off'} disabled={disabled} />\n                </div>\n            );\n        case FieldsetHeaderType.Accordion:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ACCORDION_ICON_CONTAINER_ID}\n                        className={merge([\n                            'tw-transition-transform',\n                            active && 'tw-rotate-180 tw-duration-300',\n                            !disabled && active && 'tw-text-black',\n                            !disabled && !active && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        <IconCaretDown {...props} />\n                    </div>\n                </div>\n            );\n        case FieldsetHeaderType.AddRemove:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ADDREMOVE_ICON_CONTAINER_ID}\n                        className={merge([\n                            active && !disabled && 'tw-text-black',\n                            !active && !disabled && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        {active ? <IconMinus {...props} /> : <IconPlus {...props} />}\n                    </div>\n                </div>\n            );\n    }\n\n    return null;\n};\n\nexport const FieldsetHeader: FC<FieldsetHeaderProps> = ({\n    size = FieldsetHeaderSize.Large,\n    active = true,\n    decorator,\n    type = FieldsetHeaderType.Default,\n    disabled = false,\n    bold = true,\n    children,\n    onClick,\n    as: Heading = 'label',\n    tabIndex = -1,\n}) => {\n    const id = useMemoizedId();\n    const clickOnNotDisabled = () => !disabled && onClick && onClick();\n\n    let headingFontWeightClass = 'tw-font-normal';\n    if (bold) {\n        headingFontWeightClass = 'tw-font-bold';\n    } else if (size === FieldsetHeaderSize.Medium) {\n        headingFontWeightClass = 'tw-font-medium';\n    }\n\n    return (\n        <header\n            data-test-id=\"fieldset-header\"\n            role={onClick ? 'button' : undefined}\n            onClick={clickOnNotDisabled}\n            onKeyPress={clickOnNotDisabled}\n            className={merge([\n                'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n                !disabled && active ? 'tw-text-black' : 'tw-text-black-80',\n                !disabled && onClick ? 'hover:tw-cursor-pointer' : 'tw-pointer-events-none',\n            ])}\n            tabIndex={tabIndex}\n        >\n            {isValidElement(decorator) && (\n                <span className=\"tw-shrink-0\">\n                    {cloneElement(decorator as ReactElement<IconProps>, {\n                        size: sizeMap[size].icon,\n                    })}\n                </span>\n            )}\n            <Heading\n                id={id}\n                className={merge([\n                    'tw-text-left',\n                    sizeMap[size].text,\n                    headingFontWeightClass,\n                    onClick && 'hover:tw-cursor-pointer',\n                ])}\n            >\n                {children}\n            </Heading>\n            {type !== FieldsetHeaderType.Default && (\n                <span data-test-id=\"fieldset-icon-container\" className=\"tw-ml-auto tw-shrink-0\">\n                    {renderFieldsetHeaderIconType(type, id, size, active, disabled)}\n                </span>\n            )}\n        </header>\n    );\n};\nFieldsetHeader.displayName = 'FondueFieldsetHeader';\n"],"names":["ACCORDION_ICON_CONTAINER_ID","ADDREMOVE_ICON_CONTAINER_ID","FieldsetHeaderSize","sizeMap","IconSize","FieldsetHeaderType","renderFieldsetHeaderIconType","type","id","size","active","disabled","props","React","Switch","merge","IconCaretDown","IconMinus","IconPlus","FieldsetHeader","decorator","bold","children","onClick","Heading","tabIndex","useMemoizedId","clickOnNotDisabled","headingFontWeightClass","isValidElement","cloneElement"],"mappings":"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"}
+{"version":3,"file":"FieldsetHeader.es.js","sources":["../../../src/components/FieldsetHeader/FieldsetHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Switch, SwitchSize } from '@components/Switch/Switch';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\nimport { IconCaretDown, IconMinus, IconPlus } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { IconProps } from '@foundation/Icon';\n\nexport const ACCORDION_ICON_CONTAINER_ID = 'accordion-icon-container';\n\nexport const ADDREMOVE_ICON_CONTAINER_ID = 'addremove-icon-container';\n\nexport enum FieldsetHeaderSize {\n    Small = 'Small',\n    Medium = 'Medium',\n    Large = 'Large',\n}\n\nconst sizeMap: Record<FieldsetHeaderSize, { icon: IconSize; text: string; switch: SwitchSize }> = {\n    [FieldsetHeaderSize.Small]: {\n        icon: IconSize.Size12,\n        text: 'tw-text-s',\n        switch: 'small',\n    },\n    [FieldsetHeaderSize.Medium]: {\n        icon: IconSize.Size16,\n        text: 'tw-text-m',\n        switch: 'medium',\n    },\n    [FieldsetHeaderSize.Large]: {\n        icon: IconSize.Size20,\n        text: 'tw-text-l',\n        switch: 'medium',\n    },\n};\n\nexport enum FieldsetHeaderType {\n    Default = 'Default',\n    Switch = 'Switch',\n    Accordion = 'Accordion',\n    AddRemove = 'AddRemove',\n}\n\nexport type FieldsetHeaderProps = {\n    size?: FieldsetHeaderSize;\n    active?: boolean;\n    decorator?: ReactNode;\n    type?: FieldsetHeaderType;\n    disabled?: boolean;\n    bold?: boolean;\n    children: string;\n    onClick?: () => void;\n    as?: keyof JSX.IntrinsicElements;\n    tabIndex?: number;\n};\n\nexport const renderFieldsetHeaderIconType = (\n    type: FieldsetHeaderType,\n    id: string,\n    size: FieldsetHeaderSize,\n    active: boolean,\n    disabled: boolean,\n) => {\n    const props = {\n        'aria-labelledby': id,\n        size: sizeMap[size].icon,\n    };\n\n    switch (type) {\n        case FieldsetHeaderType.Switch:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <Switch {...props} size={sizeMap[size].switch} mode={active ? 'on' : 'off'} disabled={disabled} />\n                </div>\n            );\n        case FieldsetHeaderType.Accordion:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ACCORDION_ICON_CONTAINER_ID}\n                        className={merge([\n                            'tw-transition-transform',\n                            active && 'tw-rotate-180 tw-duration-300',\n                            !disabled && active && 'tw-text-black',\n                            !disabled && !active && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        <IconCaretDown {...props} />\n                    </div>\n                </div>\n            );\n        case FieldsetHeaderType.AddRemove:\n            return (\n                <div data-test-id=\"fieldset-icon-wrapper\">\n                    <div\n                        data-test-id={ADDREMOVE_ICON_CONTAINER_ID}\n                        className={merge([\n                            active && !disabled && 'tw-text-black',\n                            !active && !disabled && 'tw-text-black-80',\n                            disabled && 'tw-text-black-40',\n                        ])}\n                    >\n                        {active ? <IconMinus {...props} /> : <IconPlus {...props} />}\n                    </div>\n                </div>\n            );\n    }\n\n    return null;\n};\n\nexport const FieldsetHeader = ({\n    size = FieldsetHeaderSize.Large,\n    active = true,\n    decorator,\n    type = FieldsetHeaderType.Default,\n    disabled = false,\n    bold = true,\n    children,\n    onClick,\n    as: Heading = 'label',\n    tabIndex = -1,\n}: FieldsetHeaderProps): ReactElement => {\n    const id = useMemoizedId();\n    const clickOnNotDisabled = () => !disabled && onClick && onClick();\n\n    let headingFontWeightClass = 'tw-font-normal';\n    if (bold) {\n        headingFontWeightClass = 'tw-font-bold';\n    } else if (size === FieldsetHeaderSize.Medium) {\n        headingFontWeightClass = 'tw-font-medium';\n    }\n\n    return (\n        <header\n            data-test-id=\"fieldset-header\"\n            role={onClick ? 'button' : undefined}\n            onClick={clickOnNotDisabled}\n            onKeyPress={clickOnNotDisabled}\n            className={merge([\n                'tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row',\n                disabled ? 'tw-text-black-40' : 'dark:tw-text-white',\n                !disabled && active ? 'tw-text-black' : 'tw-text-black-80',\n                !disabled && onClick ? 'hover:tw-cursor-pointer' : 'tw-pointer-events-none',\n            ])}\n            tabIndex={tabIndex}\n        >\n            {isValidElement(decorator) && (\n                <span className=\"tw-shrink-0\">\n                    {cloneElement(decorator as ReactElement<IconProps>, {\n                        size: sizeMap[size].icon,\n                    })}\n                </span>\n            )}\n            <Heading\n                id={id}\n                className={merge([\n                    'tw-text-left',\n                    sizeMap[size].text,\n                    headingFontWeightClass,\n                    onClick && 'hover:tw-cursor-pointer',\n                ])}\n            >\n                {children}\n            </Heading>\n            {type !== FieldsetHeaderType.Default && (\n                <span data-test-id=\"fieldset-icon-container\" className=\"tw-ml-auto tw-shrink-0\">\n                    {renderFieldsetHeaderIconType(type, id, size, active, disabled)}\n                </span>\n            )}\n        </header>\n    );\n};\nFieldsetHeader.displayName = 'FondueFieldsetHeader';\n"],"names":["ACCORDION_ICON_CONTAINER_ID","ADDREMOVE_ICON_CONTAINER_ID","FieldsetHeaderSize","sizeMap","IconSize","FieldsetHeaderType","renderFieldsetHeaderIconType","type","id","size","active","disabled","props","React","Switch","merge","IconCaretDown","IconMinus","IconPlus","FieldsetHeader","decorator","bold","children","onClick","Heading","tabIndex","useMemoizedId","clickOnNotDisabled","headingFontWeightClass","isValidElement","cloneElement"],"mappings":"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"}

package/dist/components/Flyout/Flyout.d.ts

@@ -1,5 +1,5 @@
 import { BadgeProps } from '../Badge';
-import { FC, HTMLAttributes, MouseEvent, MutableRefObject, PropsWithChildren, ReactNode } from 'react';
+import { HTMLAttributes, MouseEvent, MutableRefObject, ReactElement, ReactNode } from 'react';
 export declare const FLYOUT_DIVIDER_COLOR = "#eaebeb";
 export declare const FLYOUT_DIVIDER_HEIGHT = "10px";
 export declare enum FlyoutPlacement {
@@ -12,7 +12,7 @@ export declare enum FlyoutPlacement {
     Right = "right",
     Left = "left"
 }
-export type FlyoutProps = PropsWithChildren<{
+export type FlyoutProps = {
     trigger: ReactNode | ((triggerProps: HTMLAttributes<HTMLElement>, ref: MutableRefObject<HTMLElement | null>, triggerState: {
         isFocusVisible: boolean;
         isPressed: boolean;
@@ -38,5 +38,9 @@ export type FlyoutProps = PropsWithChildren<{
     offset?: number;
     updatePositionOnContentChange?: boolean;
     isTriggerDisabled?: boolean;
-}>;
-export declare const Flyout: FC<FlyoutProps>;
+    children?: ReactNode;
+};
+export declare const Flyout: {
+    ({ trigger, isTriggerDisabled, decorator, onConfirm, onCancel, children, onOpenChange, isOpen, title, badges, hug, fitContent, fixedHeader, fixedFooter, contentMinHeight, legacyFooter, placement, offset, updatePositionOnContentChange, }: FlyoutProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Flyout/Flyout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flyout.es.js","sources":["../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { BadgeProps } from '@components/Badge';\nimport { watchModals } from '@react-aria/aria-modal-polyfill';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { OverlayContainer, useOverlayTrigger } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    FC,\n    HTMLAttributes,\n    MouseEvent,\n    MutableRefObject,\n    PropsWithChildren,\n    ReactNode,\n    useEffect,\n    useRef,\n} from 'react';\nimport { LegacyFlyoutFooter } from '.';\nimport { useContainScroll } from './hooks/useContainScroll';\nimport { useOverlayPositionWithBottomMargin } from './hooks/useOverlayPositionWithBottomMargin';\nimport { Overlay } from './Overlay';\n\nexport const FLYOUT_DIVIDER_COLOR = '#eaebeb';\nexport const FLYOUT_DIVIDER_HEIGHT = '10px';\n\nexport enum FlyoutPlacement {\n    Top = 'top',\n    Bottom = 'bottom',\n    TopLeft = 'top left',\n    BottomLeft = 'bottom left',\n    TopRight = 'top right',\n    BottomRight = 'bottom right',\n    Right = 'right',\n    Left = 'left',\n}\n\nexport type FlyoutProps = PropsWithChildren<{\n    trigger:\n        | ReactNode\n        | ((\n              triggerProps: HTMLAttributes<HTMLElement>,\n              ref: MutableRefObject<HTMLElement | null>,\n              triggerState: { isFocusVisible: boolean; isPressed: boolean },\n          ) => JSX.Element);\n    onCancel?: () => void;\n    onConfirm?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n    decorator?: ReactNode;\n    badges?: BadgeProps[];\n    hug?: boolean;\n    fitContent?: boolean;\n    isOpen?: boolean;\n    onOpenChange: (isOpen: boolean) => void;\n    fixedHeader?: ReactNode;\n    fixedFooter?: ReactNode;\n    contentMinHeight?: number;\n    /**\n     * The legacy footer buttons section inside of the flyout will be deleted in the future.\n     * @deprecated Pass the FlyoutFooter component with buttons to the Flyout component.\n     */\n    legacyFooter?: boolean;\n    placement?: FlyoutPlacement;\n    offset?: number;\n    updatePositionOnContentChange?: boolean;\n    isTriggerDisabled?: boolean;\n}>;\n\nexport const Flyout: FC<FlyoutProps> = ({\n    trigger,\n    isTriggerDisabled = false,\n    decorator,\n    onConfirm,\n    onCancel,\n    children,\n    onOpenChange,\n    isOpen = false,\n    title = '',\n    badges = [],\n    hug = true,\n    fitContent = false,\n    fixedHeader,\n    fixedFooter,\n    contentMinHeight,\n    legacyFooter = true,\n    placement = FlyoutPlacement.BottomLeft,\n    offset,\n    updatePositionOnContentChange = false,\n}) => {\n    const state = useOverlayTriggerState({ isOpen, onOpenChange });\n    const { toggle, close } = state;\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const scrollRef = useRef<HTMLDivElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { triggerProps, overlayProps: overlayTriggerProps } = useOverlayTrigger(\n        { type: 'dialog' },\n        state,\n        triggerRef,\n    );\n\n    const { positionProps } = useOverlayPositionWithBottomMargin({\n        triggerRef,\n        overlayRef,\n        scrollRef,\n        isOpen,\n        placement,\n        offset,\n        updatePositionOnContentChange,\n    });\n\n    const { buttonProps, isPressed } = useButton(\n        { onPress: () => toggle(), elementType: 'div', isDisabled: isTriggerDisabled },\n        triggerRef,\n    );\n\n    useEffect(() => {\n        const revert = watchModals();\n\n        return () => revert();\n    }, []);\n\n    useContainScroll(overlayRef, { isDisabled: !isOpen });\n\n    const combinedTriggerProps = mergeProps(buttonProps, triggerProps, focusProps, {\n        'aria-label': 'Toggle Flyout Menu',\n    });\n\n    const triggerComponent =\n        typeof trigger === 'function' ? (\n            trigger(combinedTriggerProps, triggerRef, { isFocusVisible, isPressed })\n        ) : (\n            <div\n                {...combinedTriggerProps}\n                ref={triggerRef}\n                className={merge([\n                    'tw-outline-none tw-rounded',\n                    hug ? 'tw-mx-3' : 'tw-w-full',\n                    isFocusVisible && FOCUS_STYLE,\n                ])}\n                data-test-id=\"flyout-trigger\"\n            >\n                {trigger}\n            </div>\n        );\n\n    return (\n        <>\n            {triggerComponent}\n            {isOpen && (\n                <OverlayContainer>\n                    <FocusScope restoreFocus contain>\n                        <Overlay\n                            title={title}\n                            badges={badges}\n                            decorator={decorator}\n                            isOpen={isOpen}\n                            onClose={close}\n                            overlayTriggerProps={overlayTriggerProps}\n                            positionProps={positionProps}\n                            fixedHeader={fixedHeader}\n                            fixedFooter={\n                                legacyFooter ? (\n                                    <LegacyFlyoutFooter onConfirm={onConfirm} onCancel={onCancel} />\n                                ) : (\n                                    fixedFooter\n                                )\n                            }\n                            ref={overlayRef}\n                            scrollRef={scrollRef}\n                            fitContent={fitContent}\n                            contentMinHeight={contentMinHeight}\n                        >\n                            {children}\n                        </Overlay>\n                    </FocusScope>\n                </OverlayContainer>\n            )}\n        </>\n    );\n};\nFlyout.displayName = 'FondueFlyout';\n"],"names":["FLYOUT_DIVIDER_COLOR","FLYOUT_DIVIDER_HEIGHT","FlyoutPlacement","Flyout","trigger","isTriggerDisabled","decorator","onConfirm","onCancel","children","onOpenChange","isOpen","title","badges","hug","fitContent","fixedHeader","fixedFooter","contentMinHeight","legacyFooter","placement","offset","updatePositionOnContentChange","state","useOverlayTriggerState","toggle","close","triggerRef","useRef","overlayRef","scrollRef","isFocusVisible","focusProps","useFocusRing","triggerProps","overlayTriggerProps","useOverlayTrigger","positionProps","useOverlayPositionWithBottomMargin","buttonProps","isPressed","useButton","useEffect","revert","watchModals","useContainScroll","combinedTriggerProps","mergeProps","triggerComponent","React","merge","FOCUS_STYLE","OverlayContainer","FocusScope","Overlay","LegacyFlyoutFooter"],"mappings":"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"}
+{"version":3,"file":"Flyout.es.js","sources":["../../../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { BadgeProps } from '@components/Badge';\nimport { watchModals } from '@react-aria/aria-modal-polyfill';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { OverlayContainer, useOverlayTrigger } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { HTMLAttributes, MouseEvent, MutableRefObject, ReactElement, ReactNode, useEffect, useRef } from 'react';\nimport { LegacyFlyoutFooter } from '.';\nimport { useContainScroll } from './hooks/useContainScroll';\nimport { useOverlayPositionWithBottomMargin } from './hooks/useOverlayPositionWithBottomMargin';\nimport { Overlay } from './Overlay';\n\nexport const FLYOUT_DIVIDER_COLOR = '#eaebeb';\nexport const FLYOUT_DIVIDER_HEIGHT = '10px';\n\nexport enum FlyoutPlacement {\n    Top = 'top',\n    Bottom = 'bottom',\n    TopLeft = 'top left',\n    BottomLeft = 'bottom left',\n    TopRight = 'top right',\n    BottomRight = 'bottom right',\n    Right = 'right',\n    Left = 'left',\n}\n\nexport type FlyoutProps = {\n    trigger:\n        | ReactNode\n        | ((\n              triggerProps: HTMLAttributes<HTMLElement>,\n              ref: MutableRefObject<HTMLElement | null>,\n              triggerState: { isFocusVisible: boolean; isPressed: boolean },\n          ) => JSX.Element);\n    onCancel?: () => void;\n    onConfirm?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n    decorator?: ReactNode;\n    badges?: BadgeProps[];\n    hug?: boolean;\n    fitContent?: boolean;\n    isOpen?: boolean;\n    onOpenChange: (isOpen: boolean) => void;\n    fixedHeader?: ReactNode;\n    fixedFooter?: ReactNode;\n    contentMinHeight?: number;\n    /**\n     * The legacy footer buttons section inside of the flyout will be deleted in the future.\n     * @deprecated Pass the FlyoutFooter component with buttons to the Flyout component.\n     */\n    legacyFooter?: boolean;\n    placement?: FlyoutPlacement;\n    offset?: number;\n    updatePositionOnContentChange?: boolean;\n    isTriggerDisabled?: boolean;\n    children?: ReactNode;\n};\n\nexport const Flyout = ({\n    trigger,\n    isTriggerDisabled = false,\n    decorator,\n    onConfirm,\n    onCancel,\n    children,\n    onOpenChange,\n    isOpen = false,\n    title = '',\n    badges = [],\n    hug = true,\n    fitContent = false,\n    fixedHeader,\n    fixedFooter,\n    contentMinHeight,\n    legacyFooter = true,\n    placement = FlyoutPlacement.BottomLeft,\n    offset,\n    updatePositionOnContentChange = false,\n}: FlyoutProps): ReactElement => {\n    const state = useOverlayTriggerState({ isOpen, onOpenChange });\n    const { toggle, close } = state;\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const scrollRef = useRef<HTMLDivElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { triggerProps, overlayProps: overlayTriggerProps } = useOverlayTrigger(\n        { type: 'dialog' },\n        state,\n        triggerRef,\n    );\n\n    const { positionProps } = useOverlayPositionWithBottomMargin({\n        triggerRef,\n        overlayRef,\n        scrollRef,\n        isOpen,\n        placement,\n        offset,\n        updatePositionOnContentChange,\n    });\n\n    const { buttonProps, isPressed } = useButton(\n        { onPress: () => toggle(), elementType: 'div', isDisabled: isTriggerDisabled },\n        triggerRef,\n    );\n\n    useEffect(() => {\n        const revert = watchModals();\n\n        return () => revert();\n    }, []);\n\n    useContainScroll(overlayRef, { isDisabled: !isOpen });\n\n    const combinedTriggerProps = mergeProps(buttonProps, triggerProps, focusProps, {\n        'aria-label': 'Toggle Flyout Menu',\n    });\n\n    const triggerComponent =\n        typeof trigger === 'function' ? (\n            trigger(combinedTriggerProps, triggerRef, { isFocusVisible, isPressed })\n        ) : (\n            <div\n                {...combinedTriggerProps}\n                ref={triggerRef}\n                className={merge([\n                    'tw-outline-none tw-rounded',\n                    hug ? 'tw-mx-3' : 'tw-w-full',\n                    isFocusVisible && FOCUS_STYLE,\n                ])}\n                data-test-id=\"flyout-trigger\"\n            >\n                {trigger}\n            </div>\n        );\n\n    return (\n        <>\n            {triggerComponent}\n            {isOpen && (\n                <OverlayContainer>\n                    <FocusScope restoreFocus contain>\n                        <Overlay\n                            title={title}\n                            badges={badges}\n                            decorator={decorator}\n                            isOpen={isOpen}\n                            onClose={close}\n                            overlayTriggerProps={overlayTriggerProps}\n                            positionProps={positionProps}\n                            fixedHeader={fixedHeader}\n                            fixedFooter={\n                                legacyFooter ? (\n                                    <LegacyFlyoutFooter onConfirm={onConfirm} onCancel={onCancel} />\n                                ) : (\n                                    fixedFooter\n                                )\n                            }\n                            ref={overlayRef}\n                            scrollRef={scrollRef}\n                            fitContent={fitContent}\n                            contentMinHeight={contentMinHeight}\n                        >\n                            {children}\n                        </Overlay>\n                    </FocusScope>\n                </OverlayContainer>\n            )}\n        </>\n    );\n};\nFlyout.displayName = 'FondueFlyout';\n"],"names":["FLYOUT_DIVIDER_COLOR","FLYOUT_DIVIDER_HEIGHT","FlyoutPlacement","Flyout","trigger","isTriggerDisabled","decorator","onConfirm","onCancel","children","onOpenChange","isOpen","title","badges","hug","fitContent","fixedHeader","fixedFooter","contentMinHeight","legacyFooter","placement","offset","updatePositionOnContentChange","state","useOverlayTriggerState","toggle","close","triggerRef","useRef","overlayRef","scrollRef","isFocusVisible","focusProps","useFocusRing","triggerProps","overlayTriggerProps","useOverlayTrigger","positionProps","useOverlayPositionWithBottomMargin","buttonProps","isPressed","useButton","useEffect","revert","watchModals","useContainScroll","combinedTriggerProps","mergeProps","triggerComponent","React","merge","FOCUS_STYLE","OverlayContainer","FocusScope","Overlay","LegacyFlyoutFooter"],"mappings":"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"}

package/dist/components/Flyout/FlyoutFooter.d.ts

@@ -1,14 +1,18 @@
 import { ButtonProps } from '../Button';
-import { FC, PropsWithChildren } from 'react';
-export type FlyoutFooterProps = PropsWithChildren<{
+import { ReactElement, ReactNode } from 'react';
+export type FlyoutFooterProps = {
     buttons: [ButtonProps, ButtonProps] | [ButtonProps];
     border?: boolean;
-}>;
-export declare const FlyoutFooter: FC<FlyoutFooterProps>;
+    children?: ReactNode;
+};
+export declare const FlyoutFooter: {
+    ({ buttons, border }: FlyoutFooterProps): ReactElement;
+    displayName: string;
+};
 export declare const LegacyFlyoutFooter: {
-    ({ onConfirm, onCancel }: {
+    ({ onConfirm, onCancel, }: {
         onConfirm?: (() => void) | undefined;
         onCancel?: (() => void) | undefined;
-    }): JSX.Element;
+    }): ReactElement;
     displayName: string;
 };

package/dist/components/Flyout/FlyoutFooter.es.js

@@ -18,7 +18,10 @@ const a = ({ buttons: t, border: e = !0 }) => /* @__PURE__ */ o.createElement(
   t.map((m, i) => /* @__PURE__ */ o.createElement(c, { key: `flyout-footer-button-${i}`, ...m, size: s.Medium }))
 );
 a.displayName = "FondueFlyoutFooter";
-const p = ({ onConfirm: t, onCancel: e }) => /* @__PURE__ */ o.createElement(
+const p = ({
+  onConfirm: t,
+  onCancel: e
+}) => /* @__PURE__ */ o.createElement(
   a,
   {
     buttons: t ? [

package/dist/components/Flyout/FlyoutFooter.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlyoutFooter.es.js","sources":["../../../src/components/Flyout/FlyoutFooter.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonProps, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconCheckMark } from '@foundation/Icon/Generated';\nimport { merge } from '@utilities/merge';\nimport React, { FC, PropsWithChildren } from 'react';\n\nexport type FlyoutFooterProps = PropsWithChildren<{\n    buttons: [ButtonProps, ButtonProps] | [ButtonProps];\n    border?: boolean;\n}>;\n\nexport const FlyoutFooter: FC<FlyoutFooterProps> = ({ buttons, border = true }) => {\n    return (\n        <div\n            className={merge([\n                'tw-flex tw-gap-x-3 tw-justify-end tw-py-5 tw-px-8 tw-bg-white dark:tw-bg-black-95',\n                border && 'tw-border-t tw-border-t-black-10',\n                // The footer min-height should be 76px, since we Tailwind doesn't have a tw-h-19 class\n                // we force TW to create it\n                // The 19 comes from, 10 from the tw-py-5 + 9 from button height tw-h-9\n                'tw-min-h-[4.75rem]',\n            ])}\n        >\n            {buttons.map((button, index) => (\n                <Button key={`flyout-footer-button-${index}`} {...button} size={ButtonSize.Medium} />\n            ))}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'FondueFlyoutFooter';\n\nexport const LegacyFlyoutFooter = ({ onConfirm, onCancel }: { onConfirm?: () => void; onCancel?: () => void }) => (\n    <FlyoutFooter\n        buttons={\n            onConfirm\n                ? [\n                      {\n                          style: ButtonStyle.Default,\n                          emphasis: ButtonEmphasis.Default,\n                          children: 'Cancel',\n                          onClick: onCancel,\n                      },\n                      {\n                          style: ButtonStyle.Default,\n                          emphasis: ButtonEmphasis.Strong,\n                          children: 'Confirm',\n                          onClick: onConfirm,\n                          icon: <IconCheckMark />,\n                      },\n                  ]\n                : [\n                      {\n                          style: ButtonStyle.Default,\n                          emphasis: ButtonEmphasis.Default,\n                          children: 'Close',\n                          onClick: onCancel,\n                      },\n                  ]\n        }\n    />\n);\nLegacyFlyoutFooter.displayName = 'FondueLegacyFlyoutFooter';\n"],"names":["FlyoutFooter","buttons","border","React","merge","button","index","Button","ButtonSize","LegacyFlyoutFooter","onConfirm","onCancel","ButtonStyle","ButtonEmphasis","IconCheckMark"],"mappings":";;;;;AAYO,MAAMA,IAAsC,CAAC,EAAE,SAAAC,GAAS,QAAAC,IAAS,SAEhE,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAM;AAAA,MACb;AAAA,MACAF,KAAU;AAAA;AAAA;AAAA;AAAA,MAIV;AAAA,IAAA,CACH;AAAA,EAAA;AAAA,EAEAD,EAAQ,IAAI,CAACI,GAAQC,MACjB,gBAAAH,EAAA,cAAAI,GAAA,EAAO,KAAK,wBAAwBD,KAAU,GAAGD,GAAQ,MAAMG,EAAW,QAAQ,CACtF;AAAA;AAIbR,EAAa,cAAc;AAEpB,MAAMS,IAAqB,CAAC,EAAE,WAAAC,GAAW,UAAAC,EAC5C,MAAA,gBAAAR,EAAA;AAAA,EAACH;AAAA,EAAA;AAAA,IACG,SACIU,IACM;AAAA,MACI;AAAA,QACI,OAAOE,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,MACA;AAAA,QACI,OAAOC,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASH;AAAA,QACT,sCAAOI,GAAc,IAAA;AAAA,MACzB;AAAA,IAAA,IAEJ;AAAA,MACI;AAAA,QACI,OAAOF,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,IACJ;AAAA,EAAA;AAEd;AAEJF,EAAmB,cAAc;"}
+{"version":3,"file":"FlyoutFooter.es.js","sources":["../../../src/components/Flyout/FlyoutFooter.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonProps, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconCheckMark } from '@foundation/Icon/Generated';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement, ReactNode } from 'react';\n\nexport type FlyoutFooterProps = {\n    buttons: [ButtonProps, ButtonProps] | [ButtonProps];\n    border?: boolean;\n    children?: ReactNode;\n};\n\nexport const FlyoutFooter = ({ buttons, border = true }: FlyoutFooterProps): ReactElement => {\n    return (\n        <div\n            className={merge([\n                'tw-flex tw-gap-x-3 tw-justify-end tw-py-5 tw-px-8 tw-bg-white dark:tw-bg-black-95',\n                border && 'tw-border-t tw-border-t-black-10',\n                // The footer min-height should be 76px, since we Tailwind doesn't have a tw-h-19 class\n                // we force TW to create it\n                // The 19 comes from, 10 from the tw-py-5 + 9 from button height tw-h-9\n                'tw-min-h-[4.75rem]',\n            ])}\n        >\n            {buttons.map((button, index) => (\n                <Button key={`flyout-footer-button-${index}`} {...button} size={ButtonSize.Medium} />\n            ))}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'FondueFlyoutFooter';\n\nexport const LegacyFlyoutFooter = ({\n    onConfirm,\n    onCancel,\n}: {\n    onConfirm?: () => void;\n    onCancel?: () => void;\n}): ReactElement => (\n    <FlyoutFooter\n        buttons={\n            onConfirm\n                ? [\n                      {\n                          style: ButtonStyle.Default,\n                          emphasis: ButtonEmphasis.Default,\n                          children: 'Cancel',\n                          onClick: onCancel,\n                      },\n                      {\n                          style: ButtonStyle.Default,\n                          emphasis: ButtonEmphasis.Strong,\n                          children: 'Confirm',\n                          onClick: onConfirm,\n                          icon: <IconCheckMark />,\n                      },\n                  ]\n                : [\n                      {\n                          style: ButtonStyle.Default,\n                          emphasis: ButtonEmphasis.Default,\n                          children: 'Close',\n                          onClick: onCancel,\n                      },\n                  ]\n        }\n    />\n);\nLegacyFlyoutFooter.displayName = 'FondueLegacyFlyoutFooter';\n"],"names":["FlyoutFooter","buttons","border","React","merge","button","index","Button","ButtonSize","LegacyFlyoutFooter","onConfirm","onCancel","ButtonStyle","ButtonEmphasis","IconCheckMark"],"mappings":";;;;;AAaO,MAAMA,IAAe,CAAC,EAAE,SAAAC,GAAS,QAAAC,IAAS,SAEzC,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAM;AAAA,MACb;AAAA,MACAF,KAAU;AAAA;AAAA;AAAA;AAAA,MAIV;AAAA,IAAA,CACH;AAAA,EAAA;AAAA,EAEAD,EAAQ,IAAI,CAACI,GAAQC,MACjB,gBAAAH,EAAA,cAAAI,GAAA,EAAO,KAAK,wBAAwBD,KAAU,GAAGD,GAAQ,MAAMG,EAAW,QAAQ,CACtF;AAAA;AAIbR,EAAa,cAAc;AAEpB,MAAMS,IAAqB,CAAC;AAAA,EAC/B,WAAAC;AAAA,EACA,UAAAC;AACJ,MAII,gBAAAR,EAAA;AAAA,EAACH;AAAA,EAAA;AAAA,IACG,SACIU,IACM;AAAA,MACI;AAAA,QACI,OAAOE,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,MACA;AAAA,QACI,OAAOC,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASH;AAAA,QACT,sCAAOI,GAAc,IAAA;AAAA,MACzB;AAAA,IAAA,IAEJ;AAAA,MACI;AAAA,QACI,OAAOF,EAAY;AAAA,QACnB,UAAUC,EAAe;AAAA,QACzB,UAAU;AAAA,QACV,SAASF;AAAA,MACb;AAAA,IACJ;AAAA,EAAA;AAEd;AAEJF,EAAmB,cAAc;"}

package/dist/components/Flyout/Overlay.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, RefObject } from 'react';
 import { FlyoutProps } from '.';
-export declare const Overlay: React.ForwardRefExoticComponent<Omit<FlyoutProps, "trigger" | "onCancel" | "onConfirm" | "onOpenChange" | "legacyFooter"> & {
+export declare const Overlay: React.ForwardRefExoticComponent<Omit<FlyoutProps, "trigger" | "onConfirm" | "onCancel" | "onOpenChange" | "legacyFooter"> & {
     positionProps: HTMLAttributes<Element>;
     overlayTriggerProps: HTMLAttributes<Element>;
     scrollRef: RefObject<HTMLDivElement>;

package/dist/components/FormControl/FormControl.d.ts

@@ -1,5 +1,5 @@
 import { InputLabelProps } from '../InputLabel/InputLabel';
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export declare enum FormControlStyle {
     Primary = "Primary",
     Positive = "Positive",
@@ -19,7 +19,7 @@ export declare enum FormControlDirection {
     Horizontal = "Horizontal",
     Vertical = "Vertical"
 }
-export type FormControlProps = PropsWithChildren<{
+export type FormControlProps = {
     direction?: FormControlDirection;
     disabled?: boolean;
     clickable?: boolean;
@@ -30,6 +30,10 @@ export type FormControlProps = PropsWithChildren<{
     };
     style?: FormControlStyle;
     name?: string;
-}>;
-export declare const FormControl: FC<FormControlProps>;
+    children?: ReactNode;
+};
+export declare const FormControl: {
+    ({ label, children, extra, name, helper, disabled, clickable, direction, style, }: FormControlProps): ReactElement;
+    displayName: string;
+};
 export {};

package/dist/components/FormControl/FormControl.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.es.js","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { InputLabel, InputLabelProps } from '@components/InputLabel/InputLabel';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { FC, PropsWithChildren, ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nexport enum FormControlStyle {\n    Primary = 'Primary',\n    Positive = 'Positive',\n    Danger = 'Danger',\n}\n\ntype HelperTextProps = {\n    text: string;\n    style: FormControlStyle;\n    disabled?: boolean;\n    fullWidth?: boolean;\n};\n\nconst inputValidation: Record<FormControlStyle, Validation> = {\n    [FormControlStyle.Primary]: Validation.Default,\n    [FormControlStyle.Positive]: Validation.Success,\n    [FormControlStyle.Danger]: Validation.Error,\n};\n\nconst HelperText: FC<HelperTextProps> = ({ text, disabled, style, fullWidth = false }) => {\n    let textColorClass;\n\n    switch (true) {\n        case disabled:\n            textColorClass = 'tw-text-black-40';\n            break;\n        case style === FormControlStyle.Danger:\n            textColorClass = 'tw-text-red-60';\n            break;\n        case style === FormControlStyle.Positive:\n            textColorClass = 'tw-text-green-60';\n            break;\n        default:\n            textColorClass = 'tw-text-black-80';\n            break;\n    }\n\n    return (\n        <span\n            data-test-id=\"form-control-helper-text\"\n            className={`tw-text-s tw-font-sans ${fullWidth ? 'tw-w-full' : ''} ${textColorClass}`}\n        >\n            {text}\n        </span>\n    );\n};\nHelperText.displayName = 'FondueHelperText';\n\nexport enum HelperPosition {\n    Before = 'Before',\n    After = 'After',\n}\n\nexport enum FormControlDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\nexport type FormControlProps = PropsWithChildren<{\n    direction?: FormControlDirection;\n    disabled?: boolean;\n    clickable?: boolean;\n    label?: Omit<InputLabelProps, 'disabled'>;\n    extra?: ReactNode;\n    helper?: Omit<HelperTextProps, 'disabled' | 'style'> & { position?: HelperPosition };\n    style?: FormControlStyle;\n    name?: string;\n}>;\n\nexport const FormControl: FC<FormControlProps> = ({\n    label,\n    children,\n    extra,\n    name,\n    helper,\n    disabled,\n    clickable,\n    direction = FormControlDirection.Vertical,\n    style = FormControlStyle.Primary,\n}) => {\n    const isHelperBefore = helper?.position === HelperPosition.Before;\n\n    return (\n        <div\n            data-test-id=\"form-control\"\n            data-name={name}\n            className={merge([\n                'tw-flex tw-items-center tw-gap-2',\n                direction === FormControlDirection.Horizontal ? 'tw-flex-row' : 'tw-w-full tw-flex-col',\n            ])}\n        >\n            {(label?.children || extra) && (\n                <div\n                    className={merge([\n                        'tw-flex tw-flew-row tw-items-center tw-justify-between',\n                        direction === FormControlDirection.Vertical && 'tw-w-full',\n                    ])}\n                >\n                    {label?.children && <InputLabel {...label} disabled={disabled} clickable={clickable} />}\n                    {extra && (\n                        <span\n                            data-test-id=\"form-control-extra\"\n                            className=\"tw-pl-2 tw-text-black-80 tw-font-sans tw-text-s tw-whitespace-nowrap\"\n                        >\n                            {extra}\n                        </span>\n                    )}\n                </div>\n            )}\n            {helper?.text && isHelperBefore && (\n                <HelperText\n                    style={style}\n                    fullWidth={direction === FormControlDirection.Vertical}\n                    text={helper.text}\n                    disabled={disabled}\n                />\n            )}\n            {children && (\n                <div\n                    className={\n                        direction === FormControlDirection.Vertical ? 'tw-w-full tw-grid tw-grid-cols-1 tw-gap-5' : ''\n                    }\n                >\n                    {isValidElement(children)\n                        ? cloneElement(children as ReactElement, {\n                              id: label?.htmlFor ?? children.props.id,\n                              disabled,\n                              validation: inputValidation[style],\n                          })\n                        : children}\n                </div>\n            )}\n            {helper?.text && !isHelperBefore && (\n                <HelperText\n                    fullWidth={direction === FormControlDirection.Vertical}\n                    text={helper.text}\n                    disabled={disabled}\n                    style={style}\n                />\n            )}\n        </div>\n    );\n};\nFormControl.displayName = 'FondueFormControl';\n"],"names":["FormControlStyle","inputValidation","Validation","HelperText","text","disabled","style","fullWidth","textColorClass","React","HelperPosition","FormControlDirection","FormControl","label","children","extra","name","helper","clickable","direction","isHelperBefore","merge","InputLabel","isValidElement","cloneElement"],"mappings":"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"}
+{"version":3,"file":"FormControl.es.js","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { InputLabel, InputLabelProps } from '@components/InputLabel/InputLabel';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { ReactElement, ReactNode, cloneElement, isValidElement } from 'react';\n\nexport enum FormControlStyle {\n    Primary = 'Primary',\n    Positive = 'Positive',\n    Danger = 'Danger',\n}\n\ntype HelperTextProps = {\n    text: string;\n    style: FormControlStyle;\n    disabled?: boolean;\n    fullWidth?: boolean;\n};\n\nconst inputValidation: Record<FormControlStyle, Validation> = {\n    [FormControlStyle.Primary]: Validation.Default,\n    [FormControlStyle.Positive]: Validation.Success,\n    [FormControlStyle.Danger]: Validation.Error,\n};\n\nconst HelperText = ({ text, disabled, style, fullWidth = false }: HelperTextProps): ReactElement => {\n    let textColorClass;\n\n    switch (true) {\n        case disabled:\n            textColorClass = 'tw-text-black-40';\n            break;\n        case style === FormControlStyle.Danger:\n            textColorClass = 'tw-text-red-60';\n            break;\n        case style === FormControlStyle.Positive:\n            textColorClass = 'tw-text-green-60';\n            break;\n        default:\n            textColorClass = 'tw-text-black-80';\n            break;\n    }\n\n    return (\n        <span\n            data-test-id=\"form-control-helper-text\"\n            className={`tw-text-s tw-font-sans ${fullWidth ? 'tw-w-full' : ''} ${textColorClass}`}\n        >\n            {text}\n        </span>\n    );\n};\nHelperText.displayName = 'FondueHelperText';\n\nexport enum HelperPosition {\n    Before = 'Before',\n    After = 'After',\n}\n\nexport enum FormControlDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\nexport type FormControlProps = {\n    direction?: FormControlDirection;\n    disabled?: boolean;\n    clickable?: boolean;\n    label?: Omit<InputLabelProps, 'disabled'>;\n    extra?: ReactNode;\n    helper?: Omit<HelperTextProps, 'disabled' | 'style'> & { position?: HelperPosition };\n    style?: FormControlStyle;\n    name?: string;\n    children?: ReactNode;\n};\n\nexport const FormControl = ({\n    label,\n    children,\n    extra,\n    name,\n    helper,\n    disabled,\n    clickable,\n    direction = FormControlDirection.Vertical,\n    style = FormControlStyle.Primary,\n}: FormControlProps): ReactElement => {\n    const isHelperBefore = helper?.position === HelperPosition.Before;\n\n    return (\n        <div\n            data-test-id=\"form-control\"\n            data-name={name}\n            className={merge([\n                'tw-flex tw-items-center tw-gap-2',\n                direction === FormControlDirection.Horizontal ? 'tw-flex-row' : 'tw-w-full tw-flex-col',\n            ])}\n        >\n            {(label?.children || extra) && (\n                <div\n                    className={merge([\n                        'tw-flex tw-flew-row tw-items-center tw-justify-between',\n                        direction === FormControlDirection.Vertical && 'tw-w-full',\n                    ])}\n                >\n                    {label?.children && <InputLabel {...label} disabled={disabled} clickable={clickable} />}\n                    {extra && (\n                        <span\n                            data-test-id=\"form-control-extra\"\n                            className=\"tw-pl-2 tw-text-black-80 tw-font-sans tw-text-s tw-whitespace-nowrap\"\n                        >\n                            {extra}\n                        </span>\n                    )}\n                </div>\n            )}\n            {helper?.text && isHelperBefore && (\n                <HelperText\n                    style={style}\n                    fullWidth={direction === FormControlDirection.Vertical}\n                    text={helper.text}\n                    disabled={disabled}\n                />\n            )}\n            {children && (\n                <div\n                    className={\n                        direction === FormControlDirection.Vertical ? 'tw-w-full tw-grid tw-grid-cols-1 tw-gap-5' : ''\n                    }\n                >\n                    {isValidElement(children)\n                        ? cloneElement(children as ReactElement, {\n                              id: label?.htmlFor ?? children.props.id,\n                              disabled,\n                              validation: inputValidation[style],\n                          })\n                        : children}\n                </div>\n            )}\n            {helper?.text && !isHelperBefore && (\n                <HelperText\n                    fullWidth={direction === FormControlDirection.Vertical}\n                    text={helper.text}\n                    disabled={disabled}\n                    style={style}\n                />\n            )}\n        </div>\n    );\n};\nFormControl.displayName = 'FondueFormControl';\n"],"names":["FormControlStyle","inputValidation","Validation","HelperText","text","disabled","style","fullWidth","textColorClass","React","HelperPosition","FormControlDirection","FormControl","label","children","extra","name","helper","clickable","direction","isHelperBefore","merge","InputLabel","isValidElement","cloneElement"],"mappings":"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"}